Review of examples + add French

Harvest-Dev · Dec 23, 2024 · a125f1b · a125f1b
1 parent 6bb25d3
commit a125f1b
Show file tree

Hide file tree

Showing 26 changed files with 292 additions and 144 deletions.
diff --git a/src/app/app-gen.component.html b/src/app/app-gen.component.html
@@ -228,7 +228,7 @@ <h4>{{ 'Events' | transloco }}</h4>
     <div>
       <label for="search">search</label>
       <input type="checkbox" formControlName="search" id="search" />
-      (Required: <code>customSearchEnabled</code>)
+      ({{ 'Required:' | transloco }}<code>customSearchEnabled</code>)
     </div>
     <div>
       <label for="scroll">scroll</label>

diff --git a/src/app/examples/app-examples.component.html b/src/app/examples/app-examples.component.html
@@ -41,9 +41,10 @@ <h2>{{ 'Examples' | transloco }}</h2>
             <a routerLink="./grid" routerLinkActive="active">{{ 'Grid' | transloco }}</a>
           </li>
           <li>
-            <a routerLink="./selection-override" routerLinkActive="active">{{
-              'Selection override & no wrap' | transloco
-            }}</a>
+            <a routerLink="./selection-override" routerLinkActive="active">{{ 'Selection override' | transloco }}</a>
+          </li>
+          <li>
+            <a routerLink="./selection-nowrap" routerLinkActive="active">{{ 'Selection no wrap' | transloco }}</a>
           </li>
           <li>
             <a routerLink="./select-all" routerLinkActive="active">{{ 'Select All' | transloco }}</a>
@@ -63,11 +64,11 @@ <h2>{{ 'Examples' | transloco }}</h2>
     <div class="col-9 container">
       <div class="row options">
         <div class="col-3">
-          <label for="disabled">Angular CDK Overlay:</label>
+          <label for="disabled">{{ 'Angular CDK Overlay:' | transloco }} </label>
           <input id="disabled" type="checkbox" [(ngModel)]="overlay" (ngModelChange)="changeOverlay($event)" />
         </div>
         <div class="col-4">
-          <label for="disabled">Style mode:</label>
+          <label for="disabled">{{ 'Style mode:' | transloco }} </label>
           <select id="disabled" [(ngModel)]="styleMode" (ngModelChange)="changeStyleMode($event)">
             <option selected>default</option>
             <option>material</option>

diff --git a/src/app/examples/app-examples.component.scss b/src/app/examples/app-examples.component.scss
@@ -7,7 +7,8 @@ nav {
     li {
         margin: 2px 0;
 
-        :hover {
+        :hover,
+        .active {
             background-color: #eee;
         }
 

diff --git a/src/app/examples/examples-auto-create.component.html b/src/app/examples/examples-auto-create.component.html
@@ -1,8 +1,8 @@
-<h2>{{ 'Auto Create' | transloco }}</h2>
+<h2>{{ 'Auto create' | transloco }}</h2>
 
 <div class="container">
   <div class="row">
-    <h3 class="col-12" id="ex-32">Single for create new item with search box & resettable</h3>
+    <h3 class="col-12" id="ex-32">{{ 'Single for create new item with search box & resettable' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -23,7 +23,7 @@ <h3 class="col-12" id="ex-32">Single for create new item with search box & reset
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-29">Multiple with input for create new item in selection zone</h3>
+    <h3 class="col-12" id="ex-29">{{ 'Multiple with input for create new item in selection zone' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -43,7 +43,7 @@ <h3 class="col-12" id="ex-29">Multiple with input for create new item in selecti
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-29b">Multiple for create new item with search box</h3>
+    <h3 class="col-12" id="ex-29b">{{ 'Multiple for create new item with search box' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"

diff --git a/src/app/examples/examples-basic.component.html b/src/app/examples/examples-basic.component.html
@@ -1,8 +1,8 @@
-<h2>{{ 'Template' | transloco }}</h2>
+<h2>{{ 'Basic' | transloco }}</h2>
 
 <div class="container">
   <div class="row">
-    <h3 class="col-12" id="ex-2">Basic list of options</h3>
+    <h3 class="col-12" id="ex-2">{{ 'Basic list of options' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -20,7 +20,7 @@ <h3 class="col-12" id="ex-2">Basic list of options</h3>
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-1">Basic list with group</h3>
+    <h3 class="col-12" id="ex-1">{{ 'Basic list with groups' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -39,7 +39,7 @@ <h3 class="col-12" id="ex-1">Basic list with group</h3>
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-3">Less options</h3>
+    <h3 class="col-12" id="ex-3">{{ 'Less options' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -57,15 +57,15 @@ <h3 class="col-12" id="ex-3">Less options</h3>
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-4">Disabled ({{ value4 }})</h3>
+    <h3 class="col-12" id="ex-4">{{ 'Disabled' | transloco }}</h3>
     <select2 class="col-6" [overlay]="overlay" [data]="data4" [value]="value4" [disabled]="true" id="select2-4">
     </select2>
     <div class="col-12 value">
       <span>{{ 'value:' | transloco }}</span
       ><code>{{ value4 | json }}</code>
     </div>
 
-    <h3 class="col-12" id="ex-7">Placeholder</h3>
+    <h3 class="col-12" id="ex-7">{{ 'Placeholder' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -80,7 +80,7 @@ <h3 class="col-12" id="ex-7">Placeholder</h3>
       ><code>{{ value7 | json }}</code>
     </div>
 
-    <h3 class="col-12" id="ex-13">Boolean value</h3>
+    <h3 class="col-12" id="ex-13">{{ 'Boolean value' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"

diff --git a/src/app/examples/examples-events.component.html b/src/app/examples/examples-events.component.html
@@ -2,10 +2,7 @@ <h2>{{ 'Events' | transloco }}</h2>
 
 <div class="container">
   <div class="row">
-    <h3 class="col-12" id="ex-8">
-      <code>update</code>, <code>change</code>, <code>blur</code>, <code>focus</code>, <code>open,</code>
-      <code>close</code> and <code>search</code> events
-    </h3>
+    <h3 class="col-12" id="ex-8" [innerHTML]=" 'List events'| transloco"></h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -29,9 +26,9 @@ <h3 class="col-12" id="ex-8">
     </div>
   </div>
 
-  <button (click)="event = []">Clear events</button>
+  <button (click)="event = []">{{ 'Clear events' | transloco }}</button>
   <div class="events">
-    <h4>Events:</h4>
+    <h4>{{ 'Events:' | transloco }}</h4>
     @for (item of event; track item) {
       <code>
         <div>{{ item.key }} - {{ item.type }}</div>

diff --git a/src/app/examples/examples-form-control.component.html b/src/app/examples/examples-form-control.component.html
@@ -14,7 +14,7 @@ <h3 class="col-12" id="ex-11">ngModel</h3>
       ></select2>
     </form>
     <div class="col-12">
-      <button (click)="reset11()">reset</button>
+      <button (click)="reset11()">{{ 'Reset' | transloco }}</button>
       <button (click)="change11()">Utah</button>
     </div>
     <div class="col-12 value">
@@ -24,7 +24,7 @@ <h3 class="col-12" id="ex-11">ngModel</h3>
       </div>
     </div>
 
-    <h3 id="ex-33">FormControl & reset form multiple</h3>
+    <h3 id="ex-33">{{ 'FormControl & reset form multiple' | transloco }}</h3>
     <form [formGroup]="ctrlForm3" class="col-6">
       <select2
         [data]="data32"
@@ -35,7 +35,7 @@ <h3 id="ex-33">FormControl & reset form multiple</h3>
       ></select2>
     </form>
     <div class="col-12">
-      <button (click)="reset()">Reset</button>
+      <button (click)="reset()">{{ 'Reset' | transloco }}</button>
     </div>
 
     <div class="col-12 value">
@@ -45,7 +45,7 @@ <h3 id="ex-33">FormControl & reset form multiple</h3>
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-14">FormControl & reset a specific value</h3>
+    <h3 class="col-12" id="ex-14">{{ 'FormControl & reset a specific value' | transloco }}</h3>
     <form [formGroup]="fg" class="col-6">
       <select2
         class="col-6"
@@ -59,8 +59,8 @@ <h3 class="col-12" id="ex-14">FormControl & reset a specific value</h3>
       ></select2>
     </form>
     <div class="col-12">
-      <button (click)="print()">Log selected (See F12)</button>
-      <button (click)="resetForm()">Reset form to value : ['CA', 'NV']</button>
+      <button (click)="print()">{{ 'Selection log (See F12)' | transloco }}</button>
+      <button (click)="resetForm()">{{ 'Reset form to value:' | transloco }} <code>['CA', 'NV']</code></button>
     </div>
     <div class="col-12 value">
       <div>

diff --git a/src/app/examples/examples-grid.component.html b/src/app/examples/examples-grid.component.html
@@ -2,7 +2,7 @@ <h2>{{ 'Grid list' | transloco }}</h2>
 
 <div class="container">
   <div class="row">
-    <h3 class="col-12" id="ex-34b">Simple</h3>
+    <h3 class="col-12" id="ex-34b">{{ 'Basic (4 per line)' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -21,7 +21,7 @@ <h3 class="col-12" id="ex-34b">Simple</h3>
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-34b">With sub-group ({{ value34b }})</h3>
+    <h3 class="col-12" id="ex-34b">{{ 'With sub-group (4 per line)' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -40,7 +40,7 @@ <h3 class="col-12" id="ex-34b">With sub-group ({{ value34b }})</h3>
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-35">Grid with cell size</h3>
+    <h3 class="col-12" id="ex-35">{{ 'Grid with cell size (min 35px par item)' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -59,7 +59,7 @@ <h3 class="col-12" id="ex-35">Grid with cell size</h3>
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-35b">Grid with cell size & sub-group</h3>
+    <h3 class="col-12" id="ex-35b">{{ 'Grid with cell size & sub-group (min 35px par item)' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"

diff --git a/src/app/examples/examples-limits.component.html b/src/app/examples/examples-limits.component.html
@@ -2,7 +2,9 @@ <h2>{{ 'Limits' | transloco }}</h2>
 
 <div class="container">
   <div class="row">
-    <h3 class="col-12" id="ex-5">Search box (infinity) ({{ value5 }})</h3>
+    <h3 class="col-12" id="ex-5">
+      {{ 'Search box always show' | transloco }} (minCountForSearch = <code>infinity</code>) ({{ value5 }})
+    </h3>
     <form [formGroup]="ctrlForm2" class="col-6">
       <select2
         [overlay]="overlay"
@@ -22,16 +24,18 @@ <h3 class="col-12" id="ex-5">Search box (infinity) ({{ value5 }})</h3>
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-6">Search box limit to <input #limit size="3" value="7" /> / display status</h3>
+    <h3 class="col-12" id="ex-6">
+      {{ 'Search box limit to ' | transloco }}<input #limit size="3" value="7" />{{ ' / display status' | transloco }}
+    </h3>
     <div class="col-12">
       <select #status>
         <option selected>default</option>
         <option>hidden</option>
         <option>always</option>
       </select>
       -
-      <button type="button" (click)="addItem()">Add item</button>
-      <button type="button" (click)="removeItem()">Remove item</button>
+      <button type="button" (click)="addItem()">{{ 'Add item' | transloco }}</button>
+      <button type="button" (click)="removeItem()">{{ 'Remove item' | transloco }}</button>
     </div>
 
     <select2
@@ -53,9 +57,10 @@ <h3 class="col-12" id="ex-6">Search box limit to <input #limit size="3" value="7
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-9">Multiple with a limit selection</h3>
+    <h3 class="col-12" id="ex-9">{{ 'Multiple with limited selection' | transloco }}</h3>
     <div>
-      <label>Limit: <input type="number" size="3" [(ngModel)]="limitSelection" /></label> (0 = no limit)
+      <label>{{ 'Limit:' | transloco }} <input type="number" size="3" [(ngModel)]="limitSelection" /></label>
+      {{ '(0 = no limit)' | transloco }}
     </div>
     <select2
       class="col-6"
@@ -75,7 +80,7 @@ <h3 class="col-12" id="ex-9">Multiple with a limit selection</h3>
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-28">Max results (50)</h3>
+    <h3 class="col-12" id="ex-28">{{ 'Max results (50)' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -86,7 +91,7 @@ <h3 class="col-12" id="ex-28">Max results (50)</h3>
       id="select2-28"
       (update)="update('value28', $event)"
       maxResults="50"
-      maxResultsMessage="Too much results in this list."
+      [maxResultsMessage]="'Too much results in this list.' | transloco"
     ></select2>
     <div class="col-12 value">
       <div>
@@ -95,7 +100,7 @@ <h3 class="col-12" id="ex-28">Max results (50)</h3>
       </div>
     </div>
 
-    <h3 class="col-12" id="ex-18">Search starts with 3 chars</h3>
+    <h3 class="col-12" id="ex-18">{{ 'Search starts with 3 chars' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"

diff --git a/src/app/examples/examples-multiple.component.html b/src/app/examples/examples-multiple.component.html
@@ -2,7 +2,7 @@ <h2>{{ 'Events' | transloco }}</h2>
 
 <div class="container">
   <div class="row">
-    <h3 class="col-12" id="ex-10a">Basic usage</h3>
+    <h3 class="col-12" id="ex-10a">{{ 'Basic usage' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"
@@ -18,7 +18,7 @@ <h3 class="col-12" id="ex-10a">Basic usage</h3>
       ><code>{{ value10a | json }}</code>
     </div>
 
-    <h3 class="col-12" id="ex-10">With hide selected items</h3>
+    <h3 class="col-12" id="ex-10">{{ 'With hide selected items' | transloco }}</h3>
 
     <select2
       class="col-6"
@@ -36,7 +36,7 @@ <h3 class="col-12" id="ex-10">With hide selected items</h3>
       ><code>{{ value10 | json }}</code>
     </div>
 
-    <h3 class="col-12" id="ex-10b">Basic with placeholder</h3>
+    <h3 class="col-12" id="ex-10b">{{ 'Basic with placeholder' | transloco }}</h3>
     <select2
       class="col-6"
       [overlay]="overlay"

diff --git a/src/app/examples/examples-others.component.html b/src/app/examples/examples-others.component.html
@@ -2,15 +2,15 @@ <h2>{{ 'Others' | transloco }}</h2>
 
 <div class="container">
   <div class="row">
-    <h3 class="col-12" id="ex-31">Change list</h3>
+    <h3 class="col-12" id="ex-31">{{ 'Change list' | transloco }}</h3>
     <div class="col-6">
       <select #select31 (change)="changeData31(select31.value)">
-        <option>english</option>
-        <option>french</option>
-        <option>japanese</option>
+        <option>{{ 'english' | transloco }}</option>
+        <option>{{ 'french' | transloco }}</option>
+        <option>{{ 'japanese' | transloco }}</option>
       </select>
 
-      <div>Value :</div>
+      <div>{{ 'Single value:' | transloco }}</div>
       <select2
         [overlay]="overlay"
         [styleMode]="styleMode"
@@ -20,7 +20,7 @@ <h3 class="col-12" id="ex-31">Change list</h3>
         (update)="update('value31', $event)"
       >
       </select2>
-      <div>Value multiple :</div>
+      <div>{{ 'Multiple value:' | transloco }}</div>
       <select2
         [overlay]="overlay"
         [styleMode]="styleMode"
@@ -33,7 +33,7 @@ <h3 class="col-12" id="ex-31">Change list</h3>
       </select2>
       <br />
 
-      <div>NgModel :</div>
+      <div>NgModel:</div>
       <select2
         [overlay]="overlay"
         [styleMode]="styleMode"
@@ -44,7 +44,7 @@ <h3 class="col-12" id="ex-31">Change list</h3>
       ></select2>
     </div>
 
-    <h3 class="col-12" id="ex-21">Update to empty/null/undefined</h3>
+    <h3 class="col-12" id="ex-21">{{ 'Update to empty/null/undefined' | transloco }}</h3>
     <div class="col-6">
       <select2
         [overlay]="overlay"
@@ -64,9 +64,9 @@ <h3 class="col-12" id="ex-21">Update to empty/null/undefined</h3>
       </div>
     </div>
     <div class="col-12">
-      <button (click)="value21 = ''">Update value to empty "string"</button>
-      <button (click)="value21 = null">Update value to "null"</button>
-      <button (click)="value21 = undefined">Update value to "undefined"</button>
+      <button (click)="value21 = ''">{{ 'Update value to empty “string”' | transloco }}</button>
+      <button (click)="value21 = null">{{ 'Update value to “null”' | transloco }}</button>
+      <button (click)="value21 = undefined">{{ 'Update value to “undefined”' | transloco }}</button>
     </div>
   </div>
 </div>