@sapphire-ion/framework 1.2.41 → 1.2.43

package/src/lib/components/inputs/input-icon/input-icon.component.html

@@ -0,0 +1,8 @@
+<input-select [ngModel]="value()" (ngModelChange)="SetValue($event)" [items]="lstIcons" [configuration]="config" [submitted]="submitted()" [label]="label()" [required]="required()" [disabled]="disabled()" [loading]="loading()">
+  <ng-template sionLabelTemplate sionOptionTemplate let-item="item">
+    <div class="flex truncate items-center justify-start gap-2 text-dark">
+      <ion-icon [name]="item.name" class="size-5"></ion-icon>
+      <span class="truncate">{{item.name}}</span>
+    </div>
+  </ng-template>
+</input-select>

package/src/lib/components/inputs/input-icon/input-icon.component.ts

@@ -0,0 +1,52 @@
+import { Component, ElementRef, forwardRef, OnInit, ViewChild } from '@angular/core';
+import { CustomInput } from '../custom-input';
+import { InputProviderFactory } from '../input-provider-factory';
+import { EnvironmentService } from '../../../services/environment.service';
+import { lstIconsIonicons } from './ionicons';
+import { lstFluenticons } from './fluenticons';
+import { InputSelectConfiguration } from '../input-select/input.select.configuration';
+
+@Component({
+  selector: 'input-icon',
+  templateUrl: './input-icon.component.html',
+  styleUrls: ['./input-icon.component.scss', '../inputs.scss'],
+  providers: [
+    ...InputProviderFactory.GetProviders(InputIconComponent),
+    { provide: CustomInput, useExisting: forwardRef(() => InputIconComponent) },
+  ]
+})
+export class InputIconComponent extends CustomInput<string> {
+  
+  lstIcons: { name: string }[] = [];
+
+  @ViewChild('input') input: ElementRef<HTMLInputElement>;
+  @ViewChild('inputContainer') inputContainer: ElementRef<HTMLDivElement>;
+  override setFocus(event: MouseEvent | null): void {
+    if(this.input && (event == null || event.target == this.inputContainer.nativeElement)) { this.input.nativeElement.focus(); }      
+  }
+
+  config: InputSelectConfiguration;
+
+  constructor(
+    private environmentService: EnvironmentService
+  ) { super(); 
+    console.log('this.environmentService.environment.useFluentIcons', this.environmentService.environment.useFluentIcons);
+    const lst = this.environmentService.environment.useFluentIcons ? [...lstIconsIonicons, ...lstFluenticons] : [...lstIconsIonicons];
+    this.lstIcons = lst.map(icon => { 
+      return { name: icon.replaceAll('.svg', '') };
+    });
+    this.config = new InputSelectConfiguration("name", "name", true, true, null, false);
+  }
+
+  override writeValue(obj: string): void | Promise<void> {
+    this.value.set(obj);
+    this.runValidation();
+  }
+
+  override SetValue(obj: string): void {
+    this.value.set(obj);
+    this.runValidation();
+    this.propagateChange(obj);
+  }
+}
+