UPDATED --tr.json --en.json --flexi-toast/** --flexi-tooltip/** --fle…

projects/documentation/public/i18n/en.json

@@ -348,5 +348,90 @@
       "TABLE_TAB_SECOND": "HTML Code",
       "TABLE_TAB_THIRD": "TypeScript Code"
     }
+  },
+  "FLEXI_TOAST": {
+    "WHAT_IS": {
+      "CARD_TITLE": "What is Flexi Toast?",
+      "DESCRIPTION_ONE": "Meet the elegant and practical Toast and Swal that you can use in your Angular applications.",
+      "LINKED_DESCRIPTION_ONE": "Flexi Toast is open source. You can access the source code by <a href=\"https://github.com/TanerSaydam/flexi-ui/tree/main/projects/flexi-toast/src/lib\" target=\"_blank\">clicking here</a>.",
+      "DESCRIPTION_TWO": "By reviewing the documentation step by step, you can learn how to install and use Flexi Toast in your project. Below is an example of Flexi Toast. After this section, you will learn step by step how to install and configure the component.",
+      "NOTE_ALERT_PRIMARY": "Note: You can use it in Angular v18+ projects.",
+      "CURRENT_VERSION": "Current version v19.",
+      "NOTE_ALERT_DANGER": "For v18, you must use the v18 versions of the package.",
+      "CODE_DESCRIPTION": "The usage example is below.",
+      "EXAMPLE": "Example"
+    },
+    "INSTALLATION": {
+      "CARD_TITLE": "Installation",
+      "DESCRIPTION": "To use/update Flexi Toast in your Angular project, you should run the following npm command",
+      "NOTE_ALERT": "Important Note: The toast or swal will not be visible on the screen unless you add the CSS file to the styles section!",
+      "USAGE_DESCRIPTION": "After installing the library, you need to add the CSS file to the styles section in the angular.json file. If the application is running while you do this, stop it and run it again."
+    },
+    "TOAST_USE_PAGE": {
+      "CARD_TITLE": "Toast Usage",
+      "DESCRIPTION": "To use the toast in your component, inject the service and display the toast using the showToast method. You can modify your settings through the options in the service, or create your own settings and set them to the options in the service."
+    },
+    "TOAST_TEST_PAGE": {
+      "CARD_TITLE": "Toast Test",
+      "DESCRIPTION": "You can test all features of the Toast from this section.",
+      "FIRST_LABEL": "Title",
+      "FOURTH_LABEL": "Position",
+      "OPTION_TOP_LEFT": "Top left",
+      "OPTION_TOP_RIGHT": "Top right",
+      "OPTION_BOTTOM_LEFT": "Bottom left",
+      "OPTION_BOTTOM_RIGHT": "Bottom right",
+      "OPTION_TOP_FULL": "Top full",
+      "OPTION_BOTTOM_FULL": "Bottom full",
+      "CHECKBOX_ONE": "Auto close",
+      "CHECKBOX_TWO": "Show close button",
+      "CHECKBOX_THREE": "Show progress bar",
+      "CHECKBOX_FOUR": "Prevent multiple toasts from showing",
+      "BUTTON": "Show Toast"
+    },
+    "SWAL_USE_PAGE": {
+      "CARD_TITLE": "Swal Usage",
+      "DESCRIPTION": "To use Swal in your component, inject the service and display the Swal using the showSwal method. This method requires a callback function as a parameter. With this approach, you can code what action to perform if the response is confirmed, for example, when the delete button is pressed. You can modify your settings through the options in the service, or create your own settings and set them to the options in the service."
+    },
+    "SWAL_TEST_PAGE": {
+      "CARD_TITLE": "Swal Test",
+      "DESCRIPTION": "You can test all features of Swal from this section.",
+      "FIRST_LABEL": "Title",
+      "BUTTON": "Show Swal"
+    }
+  },
+  "FLEXI_TOOLTIP": {
+    "INSTALLATION": {
+      "CARD_TITLE": "Installation",
+      "DESCRIPTION_ONE": "An elegant and practical tooltip that you can use in your Angular applications. After adding it as an attribute to an element, simply add the title attribute and provide a value. It allows you to display the value of the title attribute on the screen with the design I have created.",
+      "DESCRIPTION_TWO": "To use/update Flexi Tooltip, you should run the following npm command",
+      "CARD_TITLE_TWO": "Usage",
+      "TAB_FIRST": "Example",
+      "TAB_PANE_FIRST": "Example usages",
+      "TOOLTIP_ONE": "Open",
+      "TOOLTIP_TWO": "Save",
+      "TOOLTIP_THREE": "Update",
+      "TOOLTIP_FOUR": "Delete",
+      "TAB_PANE_SECOND": "HTML Codes",
+      "TAB_PANE_THIRD": "Typescript Codes"
+    }
+  },
+  "FLEXI_TREEVIEW": {
+    "FIRST_PART": {
+      "CARD_TITLE": "What is Flexi Treeview?",
+      "DESCRIPTION_ONE": "Meet Flexi Treeview, the new member of our Flexi UI library.",
+      "LINKED_DESCRIPTION_ONE": "Flexi Treeview is open source. You can access the source code by <a href=\"https://github.com/TanerSaydam/flexi-ui/tree/main/projects/flexi-treeview/src/lib\" target=\"_blank\">clicking here</a>.",
+      "DESCRIPTION_TWO": "With Flexi Treeview, you can display nested lists of any depth, collapse or expand all items, check items with checkboxes, and easily perform necessary operations using add, update, delete, and detail buttons.",
+      "LINKED_DESCRIPTION_TWO": "To contribute to the project and support me, don't forget to star (⭐) the GitHub repository. <a href=\"https://github.com/TanerSaydam/flexi-ui\" target=\"_blank\">Click here to access the GitHub repository</a>.",
+      "DESCRIPTION_THREE": "By reviewing the documentation step by step, you can learn how to install and use Flexi Grid in your project. Below is an example that includes all the features of Flexi Grid. After this section, you will learn step by step how to install and configure the component.",
+      "NOTE_ALERT_PRIMARY": "Note: You can use it in Angular v18+ projects.",
+      "CURRENT_VERSION": "Current version v19.",
+      "NOTE_ALERT_DANGER": "For v18, you must use the v18 versions of the package.",
+      "DESCRIPTION_FOUR": "To use/update Flexi Treeview, you should run the following npm command in your Angular project."
+    },
+    "SECOND_PART": {
+      "TAB_FIRST": "Example",
+      "TAB_PANE_SECOND": "HTML Codes",
+      "TAB_PANE_THIRD": "Typescript Codes"
+    }
   }
 }

projects/documentation/public/i18n/tr.json

@@ -349,5 +349,90 @@
       "TABLE_TAB_SECOND": "HTML kodları",
       "TABLE_TAB_THIRD": "Typescript kodları"
     }
+  },
+  "FLEXI_TOAST": {
+    "WHAT_IS": {
+      "CARD_TITLE": "Flexi Toast nedir?",
+      "DESCRIPTION_ONE": "Angular uygulamalarınızda kullanabileceğiniz, şık ve kullanışlı Toast ve Swal ile tanışın.",
+      "LINKED_DESCRIPTION_ONE": "Flexi Toast açık kaynak kodludur. Kaynak kodlarına <a href=\"https://github.com/TanerSaydam/flexi-ui/tree/main/projects/flexi-toast/src/lib\" target=\"_blank\">buraya tıklayarak</a> ulaşabilirsiniz.",
+      "DESCRIPTION_TWO": "Dökümantasyonu adım adım inceleyerek Flexi Toast'ı projenize nasıl kurup kullanabileceğinizi öğrenebilirsiniz. Aşağıda Flexi Toast'ın bir örneği bulunmaktadır. Bu başlıktan sonra, bileşeni nasıl kurup yapılandıracağınızı adım adım öğreneceksiniz.",
+      "NOTE_ALERT_PRIMARY": "Not: Angular v18+ projelerinde kullanabilirsiniz.",
+      "CURRENT_VERSION": "Güncel sürüm v19.",
+      "NOTE_ALERT_DANGER": "v18 için paketin v18 sürümlerini kullanmalısınız.",
+      "CODE_DESCRIPTION": "Kullanım örneği aşağıdadır.",
+      "EXAMPLE": "Örnek"
+    },
+    "INSTALLATION": {
+      "CARD_TITLE": "Kurulum",
+      "DESCRIPTION": "Flexi Toast'ı kullanmak/güncellemek için Angular projenizde aşağıdaki npm komutunu çalıştırmalısınız",
+      "NOTE_ALERT": "Önemli Not: css dosyasını styles kısmına eklemeden toast veya swalı ekranda görünmez!",
+      "USAGE_DESCRIPTION": "Kütüphaneyi kurduktan sonra css dosyasını angular.json dosyasındaki styles kısmına eklemeniz gerekiyor. Bu esnada uygulamaya çalışıyorsa durdurup tekrar çalıştırın"
+    },
+    "TOAST_USE_PAGE": {
+      "CARD_TITLE": "Toast Kullanım",
+      "DESCRIPTION": "Toastı kullanmak istediğiniz component de servisi inject edip showToast metodu ile toast görüntüleyebilirsiniz. Service de bulunan options üzerinden ayarlarınızı değiştirebilir ya da kendi ayarlarınızı oluşturup servicedeki options a set edebilirsiniz."
+    },
+    "TOAST_TEST_PAGE": {
+      "CARD_TITLE": "Toast Test",
+      "DESCRIPTION": "Bu bölümden Toast'ın tüm özelliklerini test edebilirsiniz.",
+      "FIRST_LABEL": "Başlık",
+      "FOURTH_LABEL": "Pozisyon",
+      "OPTION_TOP_LEFT": "Yukarı sol",
+      "OPTION_TOP_RIGHT": "Yukarı sağ",
+      "OPTION_BOTTOM_LEFT": "Aşağı sol",
+      "OPTION_BOTTOM_RIGHT": "Aşağı sağ",
+      "OPTION_TOP_FULL": "Yukarı full",
+      "OPTION_BOTTOM_FULL": "Aşağı full",
+      "CHECKBOX_ONE": "Otomatik kapat",
+      "CHECKBOX_TWO": "Kapat butonunu göster",
+      "CHECKBOX_THREE": "Progess barı göster",
+      "CHECKBOX_FOUR": "Birden fazla toast gözükmesini engelle",
+      "BUTTON": "Toast Göster"
+    },
+    "SWAL_USE_PAGE": {
+      "CARD_TITLE": "Swal Kullanım",
+      "DESCRIPTION": "Swalı kullanmak istediğiniz component de servisi inject edip showSwal metodu ile swalı görüntüleyebilirsiniz. Metot parametre olarak callBack funtion istiyor. Bu yöntemle de eğer sorunuz onaylanırsa, örneğin sil tuşuna basılırsa ne işlem yapacağınızı kodlayabiliyorsunuz. Service de bulunan options üzerinden ayarlarınızı değiştirebilir ya da kendi ayarlarınızı oluşturup servicedeki options a set edebilirsiniz."
+    },
+    "SWAL_TEST_PAGE": {
+      "CARD_TITLE": "Swal Test",
+      "DESCRIPTION": "Bu bölümden Swal'ın tüm özelliklerini test edebilirsiniz.",
+      "FIRST_LABEL": "Başlık",
+      "BUTTON": "Swal Göster"
+    }
+  },
+  "FLEXI_TOOLTIP": {
+    "INSTALLATION": {
+      "CARD_TITLE": "Kurulum",
+      "DESCRIPTION_ONE": "Angular uygulamalarınızda kullanabileceğiniz, şık ve kullanışlı tooltip. Attribute olarak elemente ekledikten sonra title attribute ekleyip değer vermeniz yeterli. Onun içindeki değeri oluşturduğum tasarımla ekranda göstermenize olanak sağlar.",
+      "DESCRIPTION_TWO": "Flexi Tooltip'i kullanmak/güncellemek için aşağıdaki npm komutunu çalıştırmalısınız",
+      "CARD_TITLE_TWO": "Kullanım",
+      "TAB_FIRST": "Örnek",
+      "TAB_PANE_FIRST": "Örnek kullanımları",
+      "TOOLTIP_ONE": "Aç",
+      "TOOLTIP_TWO": "Kaydet",
+      "TOOLTIP_THREE": "Güncelle",
+      "TOOLTIP_FOUR": "Sil",
+      "TAB_PANE_SECOND": "HTML Kodları",
+      "TAB_PANE_THIRD": "Typescript kodları"
+    }
+  },
+  "FLEXI_TREEVIEW": {
+    "FIRST_PART": {
+      "CARD_TITLE": "Flexi Treeview nedir?",
+      "DESCRIPTION_ONE": "Flexi UI kütüphanemizin yeni üyesi Flexi Treeview ile tanışın..",
+      "LINKED_DESCRIPTION_ONE": "Flexi Treview, açık kaynak kodludur. Kaynak kodlarına <a href=\"https://github.com/TanerSaydam/flexi-ui/tree/main/projects/flexi-treeview/src/lib\" target=\"_blank\">buraya tıklayarak</a> ulaşabilirsiniz.",
+      "DESCRIPTION_TWO": "Flexi Treeview ile n sayıda listesiyi iç içe gösterebilir, tamamını kapatabilir, açabilir, checkbox ile işaretleyebilir, ekleme, güncelleme, silme ve detay butonları ile gerekli işlemleri kolayca gerçekleştirebilirsiniz.",
+      "LINKED_DESCRIPTION_TWO": "Projeye katkıda bulunmak ve bana destek vermek için GitHub reposuna bir yıldız (⭐) atmayı unutmayın. <a href=\"https://github.com/TanerSaydam/flexi-ui\" target=\"_blank\">GitHub reposuna ulaşmak için tıklayın</a>.",
+      "DESCRIPTION_THREE": "Dökümantasyonu adım adım inceleyerek Flexi Grid'i projenize nasıl kurup kullanabileceğinizi öğrenebilirsiniz. Aşağıda, Flexi Grid'in tüm özelliklerini içeren bir örnek bulunmaktadır. Bu başlıktan sonra, bileşeni nasıl kurup yapılandıracağınızı adım adım öğreneceksiniz.",
+      "NOTE_ALERT_PRIMARY": "Not: Angular v18+ projelerinde kullanabilirsiniz.",
+      "CURRENT_VERSION": "Güncel sürüm v19.",
+      "NOTE_ALERT_DANGER": "v18 için paketin v18 sürümlerini kullanmalısınız.",
+      "DESCRIPTION_FOUR": "Flexi Treeview'i kullanmak/güncellemek için Angular projenizde aşağıdaki npm komutunu çalıştırmalısınız"
+    },
+    "SECOND_PART": {
+      "TAB_FIRST": "Örnek",
+      "TAB_PANE_SECOND": "HTML Kodları",
+      "TAB_PANE_THIRD": "Typescript kodları"
+    }
   }
 }

projects/documentation/src/app/flexi-toast/flexi-toast.component.html

@@ -1,22 +1,17 @@
-<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t">
+<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t; read: 'FLEXI_TOAST.WHAT_IS'">
     <!-- Flexi Toast Nedir?  -->
-    <app-card cardTitle="Flexi Toast nedir?">
-        <p>Angular uygulamalarınızda kullanabileceğiniz, şık ve kullanışlı Toast ve Swal ile tanışın.</p>
-        <p>Flexi Toast açık kaynak kodludur. Kaynak kodlarına <a
-                href="https://github.com/TanerSaydam/flexi-ui/tree/main/projects/flexi-toast/src/lib"
-                target="_blank">buraya tıklayarak</a> ulaşabilirsiniz.</p>
-        <hr>
-        <p>Projeye katkıda bulunmak ve bana destek vermek için GitHub reposuna bir yıldız (⭐) atmayı unutmayın. <a
-                href="https://github.com/TanerSaydam/flexi-ui" target="_blank">GitHub reposuna ulaşmak için
-                tıklayın</a>.</p>
-        <p>Dökümantasyonu adım adım inceleyerek Flexi Toast'ı projenize nasıl kurup kullanabileceğinizi öğrenebilirsiniz. Aşağıda Flexi Toast'ın bir örneği bulunmaktadır. Bu başlıktan sonra, bileşeni nasıl kurup yapılandıracağınızı adım adım öğreneceksiniz.</p>
-        <p class="alert aler-primary"><b>Not: Angular v18+ projelerinde kullanabilirsiniz.</b></p>
+    <app-card cardTitle="{{t('CARD_TITLE')}}">
+        <p>{{t('DESCRIPTION_ONE')}}</p>
+        <p [innerHTML]="t('LINKED_DESCRIPTION_ONE')"></p>
+                <hr>
+        <p>{{t('DESCRIPTION_TWO')}}</p>
+        <p class="alert aler-primary"><b>{{t('NOTE_ALERT_PRIMARY')}}</b></p>
         <div class="alert alert-danger"><b>
-        <p>Güncel sürüm v19.</p>
-        <p>v18 için paketin v18 sürümlerini kullanmalısınız.</p></b>
+        <p>{{t('CURRENT_VERSION')}} </p>
+        <p>{{t('NOTE_ALERT_DANGER')}}</p></b>
         </div>
         <br>
-        <p>Kullanım örneği aşağıdadır.</p>
+        <p>{{t('CODE_DESCRIPTION')}}</p>
     </app-card>
 
     <!-- Toast {{ t('EXAMPLE') }} Çıktısı -->

projects/documentation/src/app/flexi-toast/flexi-toast.component.ts

@@ -3,6 +3,7 @@ import { Component} from '@angular/core';
 import { CardComponent } from '../blank/card/card.component';
 import { BlankComponent } from '../blank/blank.component';
 import { FormsModule } from '@angular/forms';
+import { TranslocoModule } from '@jsverse/transloco';
 
 @Component({
     selector: 'app-flexi-toast',
@@ -11,6 +12,7 @@ import { FormsModule } from '@angular/forms';
         CardComponent,
         CommonModule,
         FormsModule,        
+        TranslocoModule
     ],
     templateUrl: './flexi-toast.component.html',
     styleUrl: './flexi-toast.component.css'

projects/documentation/src/app/flexi-toast/installation/installation.component.html

@@ -1,12 +1,12 @@
-<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast">
-    <app-card id="installation" cardTitle="Kurulum">
+<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t; read: 'FLEXI_TOAST.INSTALLATION'">
+    <app-card id="installation" cardTitle="{{t('CARD_TITLE')}}">
         <div class="card-body">
-            <p>Flexi Toast'ı kullanmak/güncellemek için Angular projenizde aşağıdaki npm komutunu çalıştırmalısınız</p>
+            <p>{{t('DESCRIPTION')}}</p>
             <pre><code style="font-size: larger; font-weight: 700;">npm install flexi-toast</code></pre>
         </div>
         <div class="card-body">
-            <div class="alert alert-warning">Önemli Not: css dosyasını styles kısmına eklemeden toast veya swalı ekranda görünmez!</div>
-            <p>Kütüphaneyi kurduktan sonra css dosyasını angular.json dosyasındaki styles kısmına eklemeniz gerekiyor. Bu esnada uygulamaya çalışıyorsa durdurup tekrar çalıştırın</p>
+            <div class="alert alert-warning">{{t('NOTE_ALERT')}}</div>
+            <p>{{t('USAGE_DESCRIPTION')}}</p>
             <strong>angular.json</strong>
             <pre><code style="font-size: larger; font-weight: 700;">{{angularJSONCode()}}</code></pre>                
         </div>

projects/documentation/src/app/flexi-toast/installation/installation.component.ts

@@ -1,13 +1,15 @@
 import { Component, signal } from '@angular/core';
 import { SharedModule } from '../../shared.module';
+import { TranslocoModule } from '@jsverse/transloco';
 
-@Component({
-    selector: 'app-installation',
-    imports: [
-        SharedModule
-    ],
-    templateUrl: './installation.component.html',
-    styleUrl: './installation.component.css'
+@Component({
+    selector: 'app-installation',
+    imports: [
+        SharedModule,
+        TranslocoModule
+    ],
+    templateUrl: './installation.component.html',
+    styleUrl: './installation.component.css'
 })
 export default class InstallationComponent {
   angularJSONCode = signal<string>(`{

projects/documentation/src/app/flexi-toast/swal-test/swal-test.component.html

@@ -1,12 +1,12 @@
-<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast">
-    <app-card id="swal-full" style="padding-top: 5px;" cardTitle="Swal Test">     
+<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t; read: 'FLEXI_TOAST.SWAL_TEST_PAGE'">
+    <app-card id="swal-full" style="padding-top: 5px;" cardTitle="{{t('CARD_TITLE')}}">     
         <div class="card-body">
-            <p>Bu bölümden Swal'ın tüm özelliklerini test edebilirsiniz</p>
+            <p>{{t('DESCRIPTION')}}</p>
         </div>  
         <div class="card-body">
             <div class="row form-group">
                 <div class="form-group">
-                    <label>Başlık</label>
+                    <label>{{t('FIRST_LABEL')}}</label>
                     <input type="text" class="form-control" [(ngModel)]="swalTitle">
                 </div>
                 <div class="form-group mt-2">
@@ -32,7 +32,7 @@
                 </div>                
             </div>        
             <div class="form-group mt-2">
-                <button class="btn btn-primary" (click)="showSwal()">Swal Göster</button>
+                <button class="btn btn-primary" (click)="showSwal()">{{t('BUTTON')}}</button>
             </div>
         </div>
     </app-card>

projects/documentation/src/app/flexi-toast/swal-test/swal-test.component.ts

@@ -1,12 +1,13 @@
 import { Component, signal } from '@angular/core';
 import { SharedModule } from '../../shared.module';
 import { FlexiToastOptionsModel, FlexiToastService } from 'flexi-toast';
+import { TranslocoModule } from '@jsverse/transloco';
 
-@Component({
-    selector: 'app-swal-test',
-    imports: [SharedModule],
-    templateUrl: './swal-test.component.html',
-    styleUrl: './swal-test.component.css'
+@Component({
+    selector: 'app-swal-test',
+    imports: [SharedModule,TranslocoModule],
+    templateUrl: './swal-test.component.html',
+    styleUrl: './swal-test.component.css'
 })
 export default class SwalTestComponent {
   swalTitle = signal<string>("Sil?");

projects/documentation/src/app/flexi-toast/swal-use/swal-use.component.html

@@ -1,11 +1,11 @@
-<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast">
-    <app-card id="installation" cardTitle="Swal Kullanım">    
+<app-blank pageName="Flexi Toast" pageDescription="Angular Flexi Toast" *transloco="let t; read: 'FLEXI_TOAST.SWAL_USE_PAGE'">
+    <app-card id="installation" cardTitle="{{t('CARD_TITLE')}}">    
         <div class="card-body">
             <img class="me-1" src="/img/flexi-swal-light.png">
             <img src="/img/flexi-swal-dark.png">
         </div>        
         <div class="card-body">
-            <p>Swalı kullanmak istediğiniz component de servisi inject edip showSwal metodu ile swalı görüntüleyebilirsiniz. Metot parametre olarak callBack funtion istiyor. Bu yöntemle de eğer sorunuz onaylanırsa, örneğin sil tuşuna basılırsa ne işlem yapacağınızı kodlayabiliyorsunuz. Service de bulunan options üzerinden ayarlarınızı değiştirebilir ya da kendi ayarlarınızı oluşturup servicedeki options a set edebilirsiniz.</p>
+            <p>{{t('DESCRIPTION')}}</p>
             <my-code [code]="swalTSCode()" language="typescript"></my-code>
         </div>
     </app-card>