feat(option): add samples

projects/demo/src/app/components-example/option/option-basic-example/option-basic-example.component.html

@@ -0,0 +1,14 @@
+<ids-form-field class="w-80">
+  <ids-label>{{ "EXAMPLES.OPTION.COMMON.LABEL" | translate }}</ids-label>
+  <ids-select
+    [placeholder]="'EXAMPLES.OPTION.COMMON.PLACEHOLDER' | translate"
+    [(ngModel)]="_value"
+  >
+    @for (fruit of _fruits; track fruit.value) {
+      <ids-option [value]="fruit.value" [viewValue]="fruit.labelKey | translate">
+        {{ fruit.labelKey | translate }}
+      </ids-option>
+    }
+  </ids-select>
+  <ids-hint-message>{{ "EXAMPLES.OPTION.BASIC.CONTENT.HINT" | translate }}</ids-hint-message>
+</ids-form-field>

projects/demo/src/app/components-example/option/option-basic-example/option-basic-example.component.ts

@@ -0,0 +1,31 @@
+import { OPTION_EXAMPLE_FRUITS } from '../option-example.utils';
+
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IdsFormFieldComponent,
+  IdsHintMessageComponent,
+  IdsLabelDirective,
+  IdsOptionComponent,
+} from '@i-cell/ids-angular/forms';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-option-basic-example',
+  imports: [
+    FormsModule,
+    IdsFormFieldComponent,
+    IdsHintMessageComponent,
+    IdsLabelDirective,
+    IdsOptionComponent,
+    IdsSelectComponent,
+    TranslateModule,
+  ],
+  templateUrl: './option-basic-example.component.html',
+})
+export class OptionBasicExampleComponent {
+  protected readonly _fruits = OPTION_EXAMPLE_FRUITS;
+
+  protected _value: string | null = null;
+}

projects/demo/src/app/components-example/option/option-disabled-example/option-disabled-example.component.html

@@ -0,0 +1,50 @@
+<div class="flex flex-col gap-ids-container-gap-16 w-80">
+  <div class="grid gap-2">
+    <span>{{ "EXAMPLES.OPTION.DISABLED.CONTENT.DISABLED_OPTION" | translate }}</span>
+    <ids-form-field>
+      <ids-label>{{ "EXAMPLES.OPTION.COMMON.ANIMAL_LABEL" | translate }}</ids-label>
+      <ids-select
+        [placeholder]="'EXAMPLES.OPTION.COMMON.ANIMAL_PLACEHOLDER' | translate"
+        [(ngModel)]="_disabledOptionValue"
+      >
+        @for (animal of _landAnimals; track animal.value) {
+          <ids-option
+            [value]="animal.value"
+            [viewValue]="animal.labelKey | translate"
+            [disabled]="animal.value === 'cat'"
+          >
+            {{ animal.labelKey | translate }}
+          </ids-option>
+        }
+      </ids-select>
+      <ids-hint-message>{{ "EXAMPLES.OPTION.DISABLED.CONTENT.DISABLED_OPTION_HINT" | translate }}</ids-hint-message>
+    </ids-form-field>
+  </div>
+
+  <div class="grid gap-2">
+    <span>{{ "EXAMPLES.OPTION.DISABLED.CONTENT.DISABLED_GROUP" | translate }}</span>
+    <ids-form-field>
+      <ids-label>{{ "EXAMPLES.OPTION.COMMON.ANIMAL_LABEL" | translate }}</ids-label>
+      <ids-select
+        [placeholder]="'EXAMPLES.OPTION.COMMON.ANIMAL_PLACEHOLDER' | translate"
+        [(ngModel)]="_disabledGroupValue"
+      >
+        <ids-option-group [label]="'EXAMPLES.OPTION.GROUPS.CONTENT.LAND' | translate" [disabled]="true">
+          @for (animal of _landAnimals; track animal.value) {
+            <ids-option [value]="animal.value" [viewValue]="animal.labelKey | translate">
+              {{ animal.labelKey | translate }}
+            </ids-option>
+          }
+        </ids-option-group>
+        <ids-option-group [label]="'EXAMPLES.OPTION.GROUPS.CONTENT.AQUATIC' | translate">
+          @for (animal of _aquaticAnimals; track animal.value) {
+            <ids-option [value]="animal.value" [viewValue]="animal.labelKey | translate">
+              {{ animal.labelKey | translate }}
+            </ids-option>
+          }
+        </ids-option-group>
+      </ids-select>
+      <ids-hint-message>{{ "EXAMPLES.OPTION.DISABLED.CONTENT.DISABLED_GROUP_HINT" | translate }}</ids-hint-message>
+    </ids-form-field>
+  </div>
+</div>

projects/demo/src/app/components-example/option/option-disabled-example/option-disabled-example.component.ts

@@ -0,0 +1,35 @@
+import { OPTION_EXAMPLE_AQUATIC_ANIMALS, OPTION_EXAMPLE_LAND_ANIMALS } from '../option-example.utils';
+
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IdsFormFieldComponent,
+  IdsHintMessageComponent,
+  IdsLabelDirective,
+  IdsOptionComponent,
+  IdsOptionGroupComponent,
+} from '@i-cell/ids-angular/forms';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-option-disabled-example',
+  imports: [
+    FormsModule,
+    IdsFormFieldComponent,
+    IdsHintMessageComponent,
+    IdsLabelDirective,
+    IdsOptionComponent,
+    IdsOptionGroupComponent,
+    IdsSelectComponent,
+    TranslateModule,
+  ],
+  templateUrl: './option-disabled-example.component.html',
+})
+export class OptionDisabledExampleComponent {
+  protected readonly _landAnimals = OPTION_EXAMPLE_LAND_ANIMALS;
+  protected readonly _aquaticAnimals = OPTION_EXAMPLE_AQUATIC_ANIMALS;
+
+  protected _disabledOptionValue: string | null = 'cat';
+  protected _disabledGroupValue: string | null = 'whale';
+}

projects/demo/src/app/components-example/option/option-example.utils.ts

@@ -0,0 +1,24 @@
+export type OptionExampleEntry = {
+  value: string;
+  labelKey: string;
+};
+
+export const OPTION_EXAMPLE_FRUITS: OptionExampleEntry[] = [
+  { value: 'APPLE', labelKey: 'EXAMPLES.SELECT.FRUITS.APPLE' },
+  { value: 'BANANA', labelKey: 'EXAMPLES.SELECT.FRUITS.BANANA' },
+  { value: 'CHERRY', labelKey: 'EXAMPLES.SELECT.FRUITS.CHERRY' },
+  { value: 'GRAPE', labelKey: 'EXAMPLES.SELECT.FRUITS.GRAPE' },
+  { value: 'ORANGE', labelKey: 'EXAMPLES.SELECT.FRUITS.ORANGE' },
+];
+
+export const OPTION_EXAMPLE_LAND_ANIMALS: OptionExampleEntry[] = [
+  { value: 'dog', labelKey: 'SELECT.LAND.DOG' },
+  { value: 'cat', labelKey: 'SELECT.LAND.CAT' },
+  { value: 'giraffe', labelKey: 'SELECT.LAND.GIRAFFE' },
+];
+
+export const OPTION_EXAMPLE_AQUATIC_ANIMALS: OptionExampleEntry[] = [
+  { value: 'crocodile', labelKey: 'SELECT.AQUATIC.CROCODILE' },
+  { value: 'whale', labelKey: 'SELECT.AQUATIC.WHALE' },
+  { value: 'dolphin', labelKey: 'SELECT.AQUATIC.DOLPHIN' },
+];

projects/demo/src/app/components-example/option/option-examples.ts

@@ -0,0 +1,79 @@
+import { OptionBasicExampleComponent } from './option-basic-example/option-basic-example.component';
+import { OptionDisabledExampleComponent } from './option-disabled-example/option-disabled-example.component';
+import { OptionGroupsExampleComponent } from './option-groups-example/option-groups-example.component';
+import { OptionMultiselectExampleComponent } from './option-multiselect-example/option-multiselect-example.component';
+import { OptionViewValueExampleComponent } from './option-view-value-example/option-view-value-example.component';
+
+import { IdsExampleDef } from '../../shared/ids-example-viewer/ids-example.model';
+
+const OPTION_EXAMPLE_UTILS = {
+  HTMLpath: '',
+  TSpath: 'assets/examples/option/option-example.utils.ts',
+};
+
+export const OPTION_EXAMPLES: IdsExampleDef[] = [
+  {
+    id: 'option-basic',
+    title: 'EXAMPLES.OPTION.BASIC.TITLE',
+    description: 'EXAMPLES.OPTION.BASIC.DESCRIPTION',
+    component: OptionBasicExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/option/option-basic-example/option-basic-example.component.html',
+        TSpath: 'assets/examples/option/option-basic-example/option-basic-example.component.ts',
+      },
+      OPTION_EXAMPLE_UTILS,
+    ],
+  },
+  {
+    id: 'option-view-value',
+    title: 'EXAMPLES.OPTION.VIEW_VALUE.TITLE',
+    description: 'EXAMPLES.OPTION.VIEW_VALUE.DESCRIPTION',
+    component: OptionViewValueExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/option/option-view-value-example/option-view-value-example.component.html',
+        TSpath: 'assets/examples/option/option-view-value-example/option-view-value-example.component.ts',
+      },
+    ],
+  },
+  {
+    id: 'option-groups',
+    title: 'EXAMPLES.OPTION.GROUPS.TITLE',
+    description: 'EXAMPLES.OPTION.GROUPS.DESCRIPTION',
+    component: OptionGroupsExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/option/option-groups-example/option-groups-example.component.html',
+        TSpath: 'assets/examples/option/option-groups-example/option-groups-example.component.ts',
+      },
+      OPTION_EXAMPLE_UTILS,
+    ],
+  },
+  {
+    id: 'option-disabled',
+    title: 'EXAMPLES.OPTION.DISABLED.TITLE',
+    description: 'EXAMPLES.OPTION.DISABLED.DESCRIPTION',
+    component: OptionDisabledExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/option/option-disabled-example/option-disabled-example.component.html',
+        TSpath: 'assets/examples/option/option-disabled-example/option-disabled-example.component.ts',
+      },
+      OPTION_EXAMPLE_UTILS,
+    ],
+  },
+  {
+    id: 'option-multiselect',
+    title: 'EXAMPLES.OPTION.MULTISELECT.TITLE',
+    description: 'EXAMPLES.OPTION.MULTISELECT.DESCRIPTION',
+    component: OptionMultiselectExampleComponent,
+    files: [
+      {
+        HTMLpath: 'assets/examples/option/option-multiselect-example/option-multiselect-example.component.html',
+        TSpath: 'assets/examples/option/option-multiselect-example/option-multiselect-example.component.ts',
+      },
+      OPTION_EXAMPLE_UTILS,
+    ],
+  },
+];

projects/demo/src/app/components-example/option/option-groups-example/option-groups-example.component.html

@@ -0,0 +1,23 @@
+<ids-form-field class="w-80">
+  <ids-label>{{ "EXAMPLES.OPTION.COMMON.ANIMAL_LABEL" | translate }}</ids-label>
+  <ids-select
+    [placeholder]="'EXAMPLES.OPTION.COMMON.ANIMAL_PLACEHOLDER' | translate"
+    [(ngModel)]="_value"
+  >
+    <ids-option-group [label]="'EXAMPLES.OPTION.GROUPS.CONTENT.LAND' | translate">
+      @for (animal of _landAnimals; track animal.value) {
+        <ids-option [value]=" animal.value" [viewValue]="animal.labelKey | translate">
+          {{ animal.labelKey | translate }}
+        </ids-option>
+      }
+    </ids-option-group>
+    <ids-option-group [label]="'EXAMPLES.OPTION.GROUPS.CONTENT.AQUATIC' | translate">
+      @for (animal of _aquaticAnimals; track animal.value) {
+        <ids-option [value]="animal.value" [viewValue]="animal.labelKey | translate">
+          {{ animal.labelKey | translate }}
+        </ids-option>
+      }
+    </ids-option-group>
+  </ids-select>
+  <ids-hint-message>{{ "EXAMPLES.OPTION.GROUPS.CONTENT.HINT" | translate }}</ids-hint-message>
+</ids-form-field>

projects/demo/src/app/components-example/option/option-groups-example/option-groups-example.component.ts

@@ -0,0 +1,34 @@
+import { OPTION_EXAMPLE_AQUATIC_ANIMALS, OPTION_EXAMPLE_LAND_ANIMALS } from '../option-example.utils';
+
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IdsFormFieldComponent,
+  IdsHintMessageComponent,
+  IdsLabelDirective,
+  IdsOptionComponent,
+  IdsOptionGroupComponent,
+} from '@i-cell/ids-angular/forms';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-option-groups-example',
+  imports: [
+    FormsModule,
+    IdsFormFieldComponent,
+    IdsHintMessageComponent,
+    IdsLabelDirective,
+    IdsOptionComponent,
+    IdsOptionGroupComponent,
+    IdsSelectComponent,
+    TranslateModule,
+  ],
+  templateUrl: './option-groups-example.component.html',
+})
+export class OptionGroupsExampleComponent {
+  protected readonly _landAnimals = OPTION_EXAMPLE_LAND_ANIMALS;
+  protected readonly _aquaticAnimals = OPTION_EXAMPLE_AQUATIC_ANIMALS;
+
+  protected _value: string | null = null;
+}

projects/demo/src/app/components-example/option/option-multiselect-example/option-multiselect-example.component.html

@@ -0,0 +1,15 @@
+<ids-form-field class="w-80">
+  <ids-label>{{ "EXAMPLES.OPTION.COMMON.LABEL" | translate }}</ids-label>
+  <ids-select
+    [multiSelect]="true"
+    [placeholder]="'EXAMPLES.OPTION.COMMON.PLACEHOLDER' | translate"
+    [(ngModel)]="_value"
+  >
+    @for (fruit of _fruits; track fruit.value) {
+      <ids-option [value]="fruit.value" [viewValue]="fruit.labelKey | translate">
+        {{ fruit.labelKey | translate }}
+      </ids-option>
+    }
+  </ids-select>
+  <ids-hint-message>{{ "EXAMPLES.OPTION.MULTISELECT.CONTENT.HINT" | translate }}</ids-hint-message>
+</ids-form-field>

projects/demo/src/app/components-example/option/option-multiselect-example/option-multiselect-example.component.ts

@@ -0,0 +1,34 @@
+import { OPTION_EXAMPLE_FRUITS } from '../option-example.utils';
+
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IdsFormFieldComponent,
+  IdsHintMessageComponent,
+  IdsLabelDirective,
+  IdsOptionComponent,
+} from '@i-cell/ids-angular/forms';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-option-multiselect-example',
+  imports: [
+    FormsModule,
+    IdsFormFieldComponent,
+    IdsHintMessageComponent,
+    IdsLabelDirective,
+    IdsOptionComponent,
+    IdsSelectComponent,
+    TranslateModule,
+  ],
+  templateUrl: './option-multiselect-example.component.html',
+})
+export class OptionMultiselectExampleComponent {
+  protected readonly _fruits = OPTION_EXAMPLE_FRUITS;
+
+  protected _value: string[] = [
+    'APPLE',
+    'CHERRY',
+  ];
+}

projects/demo/src/app/components-example/option/option-view-value-example/option-view-value-example.component.html

@@ -0,0 +1,22 @@
+<ids-form-field class="w-80">
+  <ids-label>{{ "EXAMPLES.OPTION.COMMON.LABEL" | translate }}</ids-label>
+  <ids-select
+    [placeholder]="'EXAMPLES.OPTION.COMMON.PLACEHOLDER' | translate"
+    [(ngModel)]="_value"
+  >
+    <ids-option
+      value="BANANA"
+      [viewValue]="'EXAMPLES.SELECT.FRUITS.BANANA' | translate"
+    >
+      <span class="font-medium">{{ "EXAMPLES.SELECT.FRUITS.BANANA" | translate }}</span>
+      <span class="block text-sm opacity-70">{{ "EXAMPLES.OPTION.VIEW_VALUE.CONTENT.BANANA_DETAIL" | translate }}</span>
+    </ids-option>
+    <ids-option value="CHERRY" [viewValue]="'EXAMPLES.SELECT.FRUITS.CHERRY' | translate">
+      {{ "EXAMPLES.SELECT.FRUITS.CHERRY" | translate }}
+    </ids-option>
+    <ids-option value="GRAPE" [viewValue]="'EXAMPLES.SELECT.FRUITS.GRAPE' | translate">
+      {{ "EXAMPLES.SELECT.FRUITS.GRAPE" | translate }}
+    </ids-option>
+  </ids-select>
+  <ids-hint-message>{{ "EXAMPLES.OPTION.VIEW_VALUE.CONTENT.HINT" | translate }}</ids-hint-message>
+</ids-form-field>

projects/demo/src/app/components-example/option/option-view-value-example/option-view-value-example.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import {
+  IdsFormFieldComponent,
+  IdsHintMessageComponent,
+  IdsLabelDirective,
+  IdsOptionComponent,
+} from '@i-cell/ids-angular/forms';
+import { IdsSelectComponent } from '@i-cell/ids-angular/select';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-option-view-value-example',
+  imports: [
+    FormsModule,
+    IdsFormFieldComponent,
+    IdsHintMessageComponent,
+    IdsLabelDirective,
+    IdsOptionComponent,
+    IdsSelectComponent,
+    TranslateModule,
+  ],
+  templateUrl: './option-view-value-example.component.html',
+})
+export class OptionViewValueExampleComponent {
+  protected _value: string | null = 'BANANA';
+}