@sapphire-ion/framework 1.2.62 → 1.3.1

package/src/lib/components/inputs/input-provider-factory.ts

@@ -0,0 +1,12 @@
+import { forwardRef, Provider } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+
+export class InputProviderFactory{
+  static GetProviders(component: unknown): Provider[] {
+    return [ {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => component),
+        multi: true,
+    } ]
+  }
+}

package/src/lib/components/inputs/input-select/directives/sion-label-template.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[sionLabelTemplate]',
+})
+export class SIonLabelTemplateDirective<T> {
+  constructor(public template: TemplateRef<LabelTemplateContext<T>>) {}
+}
+
+export interface LabelTemplateContext<T> {
+  /**
+   * O valor do item via bindLabel que está sendo renderizado.
+   */
+  $implicit: string;
+  /**
+   * O item selecionado no componente de input select.
+   */
+  item: T;
+}

package/src/lib/components/inputs/input-select/directives/sion-option-template.directive.ts

@@ -0,0 +1,16 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[sionOptionTemplate]',
+})
+export class SIonOptionTemplateDirective<T> {
+  constructor(public template: TemplateRef<OptionTemplateContext<T>>) {}
+}
+
+
+export interface OptionTemplateContext<T> {
+  /**
+   * O item naquela opção
+   */
+  item: T;
+}

package/src/lib/components/inputs/input-select/directives/sion-placeholder-template.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[sionPlaceholderTemplate]',
+})
+export class SIonPlaceholderTemplateDirective {
+  constructor(public template: TemplateRef<PlaceholderTemplateContext>) {}
+}
+
+export interface PlaceholderTemplateContext {
+  /**
+   * Placeholder na configuração do componente de input select.
+   */
+  $implicit: string;
+  /**
+   * Placeholder na configuração do componente de input select.
+   */
+  placeholder: string;
+}

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

@@ -0,0 +1,176 @@
+<div 
+  #inputContainer
+  class="input-container" 
+  (click)="setFocus($event);"
+  [class.required]="required()" 
+  [class.submitted]="submitted()" 
+  [class.manual-focus]="floatingVisible"
+  [class.invalid]="invalid" 
+  [class.disabled]="loading() || loadingFromLoader || disabled()"
+  [class.loading]="loading() || loadingFromLoader"
+>
+  <div class="input-label"> 
+    <span class="truncate">
+      {{label()}} 
+    </span>
+  </div>
+  
+  <div class="w-full truncate outline-none" [class.pr-7]="!configuration().clearable" [class.pr-10]="configuration().clearable"  #inputSelectLabel tabindex="0">
+    @if (!configuration().multiple && currentLabel){
+      @if(labelTemplate){
+        <ng-container 
+          [ngTemplateOutlet]="labelTemplate"
+          [ngTemplateOutletContext]="{ $implicit: currentLabel, item: currentItems.item }">
+        </ng-container>
+      }
+      @else {
+        <span class="input-select-label"> {{currentLabel}} </span>
+      }
+    }
+    @else if (configuration().multiple && isArray(currentItems) && $any(currentItems).length) {
+      <div class="w-full min-h-6 overflow-hidden relative">
+        <div class="absolute left-0 top-0 overflow-x-auto flex gap-2 size-full mask-x/2">
+          @for (item of currentItems; track $index) {
+            <div class="translucid-border rounded-lg flex items-center justify-center gap-2 pl-2">
+              @if(labelTemplate){
+                <ng-container 
+                  [ngTemplateOutlet]="labelTemplate"
+                  [ngTemplateOutletContext]="{ $implicit: item.label, item: item.item }">
+                </ng-container>
+              }
+              @else {
+                <span class="input-select-label"> {{item.label}} </span>
+              }
+            
+              <div class="h-full aspect-square flex items-center justify-center cursor-pointer" (click)="Select(item); $event.stopPropagation()">
+                <ion-icon name="close" color="danger" slot="icon-only"></ion-icon>
+              </div>
+              <!-- <ion-button class="m-0 h-full" (click)="Select(item.value); $event.stopPropagation()" color="medium" size="small" fill="outline" style="--border-radius: .5rem">
+                <ion-icon name="close" color="danger" slot="icon-only"></ion-icon>
+              </ion-button> -->
+            </div>
+          }
+        </div>
+      </div>
+    }
+    @else {
+      @if(placeholderTemplate){
+        <ng-container 
+          [ngTemplateOutlet]="placeholderTemplate"
+          [ngTemplateOutletContext]="{ $implicit: this.configuration().placeholder, placeholder: this.configuration().placeholder }">
+        </ng-container>
+      }
+      @else {
+        <span class="input-select-label !text-medium"> {{this.configuration().placeholder}} </span>
+      }
+    }
+  </div>
+
+  <div class="absolute bottom-1 flex flex-col items-center justify-center size-7" [class.right-1]="!configuration().clearable" [class.right-8]="configuration().clearable">
+    <ion-icon class="-mb-0.5" name="chevron-up"></ion-icon>
+    <ion-icon class="-mt-0.5" name="chevron-down"></ion-icon>
+  </div>
+  @if(configuration().clearable){
+    <ion-button class="absolute right-1 bottom-1" (click)="Clear($event)" color="medium" size="small" fill="clear" style="--border-radius: .5rem">
+      <ion-icon name="close" slot="icon-only"></ion-icon>
+    </ion-button>
+  } 
+
+  <div class="loading-container" [class.loading]="loading() || loadingFromLoader">
+    <ion-spinner></ion-spinner>
+  </div>
+  <div class="error-container" (click)="configuration().loader.Refresh()" [class.active]="configuration().loader.error && !loadingFromLoader">
+    <ion-icon class="text-xl" color="danger" name="refresh-circle"></ion-icon>
+  </div>
+</div>
+
+@if(!disabled() && renderInterface){
+  @switch (interface()) {
+    @case (SelectInterfaces.Popover) {
+      <sion-popover 
+          #popover 
+          [width]="inputContainer.offsetWidth + 'px'" 
+          (onWillPresent)="OnPresent()" 
+          (onDidDismiss)="OnDismiss()" 
+          [anchor]="inputContainer" 
+          [placement]="configuration().popoverConfiguration.placement" 
+          [flip]="configuration().popoverConfiguration.flip"
+        >
+        <ng-container [ngTemplateOutlet]="selectContentTemplate"></ng-container>
+      </sion-popover>
+    }
+    @case (SelectInterfaces.Modal) {
+      <ion-modal #modal (ionModalWillPresent)="OnPresent()" (didDismiss)="OnDismiss()" [initialBreakpoint]="0.9" [keepContentsMounted]="true">
+        <ng-template>
+          <ion-header>
+            <ion-toolbar>
+              <ion-title class="text-center">
+                {{label()}}
+              </ion-title>
+              <ion-buttons slot="end">
+                <ion-button (click)="modal.dismiss()">
+                  <ion-icon name="close-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+    
+          <ng-container [ngTemplateOutlet]="selectContentTemplate" [ngTemplateOutletContext]="{ modal: true }"></ng-container>
+        </ng-template>
+      </ion-modal>
+    }
+    @case (SelectInterfaces.ActionSheet) {
+      <ion-action-sheet #actionSheet trigger="open-action-sheet" [header]="label()" [buttons]="lstOptionsActionSheet"></ion-action-sheet>
+    }
+  }
+}
+
+<ng-template #selectContentTemplate let-modal="modal">
+  <div #selectContent class="select-content" [class.!size-full]="modal">
+    <div class="select-search-bar-container">
+      <div class="select-search-bar-icon-container !border-r-0 border-primary/70 bg-primary/70 shrink-0">
+        <ion-icon color="dark" name="search"></ion-icon>
+      </div>
+      <input #inputSearchBar tabindex="-1" class="select-search-bar border-primary/70 !rounded-l-none" [formControl]="searchBarControl"/>
+    </div> 
+    <ul class="select-item-list mask-y" role="listbox" [attr.aria-activedescendant]="'sion-is-' + selectedIndex">
+      <ion-content #scrollContent class="size-full" [scrollY]="true">
+        @for (item of lstOptions; track item.value) { 
+          <ng-container 
+            [ngTemplateOutlet]="baseOptionTemplate"
+            [ngTemplateOutletContext]="{ item: item, index: $index }">
+          </ng-container>
+        }
+        @if(configuration().useInfiniteScroll){
+          <ion-infinite-scroll threshold="10px" *ngIf="lstOptions.length && lstOptions.length != lstOptionsItemValue().length" (ionInfinite)="AddPage($event)">
+            <ion-infinite-scroll-content></ion-infinite-scroll-content>
+          </ion-infinite-scroll>
+        }
+      </ion-content>
+    </ul>
+    @if(hasAtivo()){
+      <div class="w-full text-xs flex items-center justify-end">
+        <ion-checkbox [ngModel]="somenteAtivos()" (ngModelChange)="somenteAtivos.set($event)" class="scale-75"> Somente ativos </ion-checkbox>
+      </div>
+    }
+  </div>
+</ng-template>
+
+<ng-template #baseOptionTemplate let-item="item" let-index="index">
+  <li [id]="'sion-is-' + index" class="select-item" [class.disabled]="item.disabled" [attr.aria-selected]="index == selectedIndex" (mouseenter)="selectedIndex = index" (click)="Select(item)">
+    <div class="select-item-checkmark-conteiner">
+      @if(item.selected) {
+        <ion-icon class="select-item-checkmark" color="primary" name="checkmark"></ion-icon>
+      }
+    </div>
+    @if (optionTemplate) {
+      <ng-container 
+        [ngTemplateOutlet]="optionTemplate"
+        [ngTemplateOutletContext]="{ item: item.item }">
+      </ng-container>
+    }
+    @else {
+      <span class="select-item-label"> {{item.label}} </span>
+    }
+  </li>
+</ng-template>

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

@@ -0,0 +1,366 @@
+import { afterNextRender, AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, computed, ContentChild, effect, ElementRef, forwardRef, HostListener, inject, Injector, input, InputSignal, model, ModelSignal, signal, Signal, TemplateRef, ViewChild, WritableSignal, } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { ActionSheetButton, AlertButton, AlertInput, InfiniteScrollCustomEvent, IonActionSheet, IonAlert, IonContent, IonModal } from '@ionic/angular';
+
+import { debounceTime, distinctUntilChanged, Subject, Subscription, takeUntil } from 'rxjs';
+import { BindLabelFactory, BindValueFactory, InputSelectConfiguration, SelectInterfaces } from './input.select.configuration';
+import { SIonPopoverComponent } from '../../popover/sion-popover/sion-popover.component';
+import { InputProviderFactory } from '../input-provider-factory';
+import { CustomInput } from '../custom-input';
+import { Search, Timeout } from '../../../services/utils.service';
+
+import { PlaceholderTemplateContext, SIonPlaceholderTemplateDirective } from './directives/sion-placeholder-template.directive';
+import { OptionTemplateContext, SIonOptionTemplateDirective } from './directives/sion-option-template.directive';
+import { LabelTemplateContext, SIonLabelTemplateDirective } from './directives/sion-label-template.directive';
+import { HttpServiceAtivo } from '../../../services/web/http.ativo.service';
+
+@Component({
+  selector: 'input-select',
+  templateUrl: './input-select.component.html',
+  styleUrls: ['./input-select.component.scss', '../inputs.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    ...InputProviderFactory.GetProviders(InputSelectComponent),
+    { provide: CustomInput, useExisting: forwardRef(() => InputSelectComponent) },
+  ],
+})
+export class InputSelectComponent<T = any> extends CustomInput<T | T[]> implements AfterViewInit {
+
+  SelectInterfaces = SelectInterfaces;
+
+  /** Items disponíveis no select */
+  items            : ModelSignal<any[]>                      = model<any[]>([]);
+  /** Configuração do select */
+  configuration    : InputSignal<InputSelectConfiguration> = input<InputSelectConfiguration>(new InputSelectConfiguration()); 
+  loadingFromLoader: boolean = false;
+
+  currentLabel: string | undefined = undefined;
+  currentItems : any | ItemValue<any>[] | undefined = undefined;
+  
+  SetCurrentItemLabel(): void {
+    if(this.configuration().multiple){
+      this.currentLabel = this.lstOptionsItemValue().filter(p => p.selected).map(p => p.label).join(', ');
+      this.currentItems = this.lstOptionsItemValue().filter(p => p.selected);
+    }
+    else{
+      this.currentLabel = this.lstOptionsItemValue().find(p => p.selected)?.label;
+      this.currentItems = this.lstOptionsItemValue().find(p => p.selected);
+    }
+  }
+
+  lstOptionsItemValue: Signal<ItemValue<any>[]> = computed(() => {
+    const bindLabel = BindLabelFactory(this.configuration());
+    const bindValue = BindValueFactory(this.configuration());
+    return this.items().filter(p => (this.somenteAtivos() && this.hasAtivo()) ? p.ativo : true) .map(p => {
+      const item = new ItemValue<any>();
+      item.label = bindLabel(p);
+      item.value = bindValue(p);
+      item.item  = p;
+      item.selected = this.value() == item.value;
+      item.disabled = p.disabled || false || (this.hasAtivo() && p.ativo == false);
+      return item;
+    });
+  });
+
+  windowSize: WritableSignal<number> = signal<number>(window.innerWidth);
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    this.windowSize.set(window.innerWidth);
+    this.SetInterface();
+  }
+  SetInterface(): void {
+    var _interface = this.configuration().interface;
+    if(_interface == SelectInterfaces.Dynamic){
+      _interface = isPortrait() ? SelectInterfaces.ActionSheet : SelectInterfaces.Popover;
+    }
+    this.interface.set(_interface);
+  }
+  interface: WritableSignal<SelectInterfaces> = signal<SelectInterfaces>(undefined);
+
+  lstOptions: ItemValue<any>[] = [];
+  lstOptionsAlert      : AlertInput[] = [];
+  lstButtonsAlert      : AlertButton[] = [];
+  lstOptionsActionSheet: ActionSheetButton[] = [];
+
+  infiniteScrollPage: WritableSignal<number> = signal<number>(1);
+  AddPage(event: InfiniteScrollCustomEvent): void {
+    this.infiniteScrollPage.set(this.infiniteScrollPage() + 1);
+    event.target.complete();
+  }
+
+  UpdateLstOptions(search: string): void {
+    // Update the search 
+    if (search) {
+      this.lstOptions = Search<ItemValue<any>>(this.lstOptionsItemValue(), search, (item: ItemValue<any>) => item.label);
+    } else { 
+      this.lstOptions = this.lstOptionsItemValue(); 
+    }
+    if(this.configuration().useInfiniteScroll){
+      this.lstOptions = this.lstOptions.slice(0, this.infiniteScrollPage() * 25);
+    }
+    
+    if(this.interface() == SelectInterfaces.ActionSheet){
+      this.lstOptionsActionSheet = [...this.lstOptions.map(p => {
+        return {
+          text: p.label,
+          handler: () => { this.Select(p); },
+          role    : p.selected ? 'selected' : '',
+        };
+      }), 
+        {
+          text: 'Cancelar',
+          role: 'cancel',
+          data: { action: 'cancel', },
+          handler() {
+            this.renderInterface = false;
+          },
+        }
+      ];
+    }
+  }
+  UpdateSelected(): void {
+    if (this.configuration().multiple){
+      const arr = this.value() as any[] || [];
+      for (const item of this.lstOptions) {
+        item.selected = arr.find(p => p == item.value) != undefined;
+      }
+    } else {
+      this.lstOptions.forEach((item: ItemValue<any>) => { item.selected = this.value() == item.value; });
+    }
+    this.SetCurrentItemLabel();
+  }
+
+  @ContentChild(SIonLabelTemplateDirective      , { read: TemplateRef }) labelTemplate      : TemplateRef<LabelTemplateContext<T>>;
+  @ContentChild(SIonOptionTemplateDirective     , { read: TemplateRef }) optionTemplate     : TemplateRef<OptionTemplateContext<T>>;
+  @ContentChild(SIonPlaceholderTemplateDirective, { read: TemplateRef }) placeholderTemplate: TemplateRef<PlaceholderTemplateContext>;
+
+
+  @ViewChild('inputContainer') inputContainer: ElementRef<HTMLDivElement>;
+  @ViewChild('inputSelectLabel') inputSelectLabel: ElementRef<HTMLDivElement>;
+  override setFocus(event: MouseEvent | null): void { 
+    if(this.configuration().loader.error || this.loadingFromLoader || this.loading() || this.disabled()) { return; }
+    this.Present(event);
+  }
+
+  
+  constructor(
+    private cdr: ChangeDetectorRef
+  ) { 
+    super(); 
+    effect(() => {
+      this.cdr.markForCheck();    
+      this.UpdateLstOptions(this.searchValue());
+      this.UpdateSelected();
+
+    }, { allowSignalWrites: true }) 
+  }
+  override async ngOnInit(): Promise<void> {
+    await super.ngOnInit();
+    this.SetInterface();
+    this.configuration().loader.AddComponent(this);
+    this.configuration().loader.Refresh(this.items());
+  }
+  hasAtivo: Signal<boolean> = computed(() => {
+    return (
+      this.configuration().hasAtivo == true ||
+      this.configuration().loadFromService instanceof HttpServiceAtivo
+    );
+  });
+  somenteAtivos: WritableSignal<boolean> = signal<boolean>(true);
+
+  @HostListener('document:keydown', ['$event'])
+  HandleKeyboardEvent(event: KeyboardEvent): void {
+    // [ Popover ]
+    if(this.selectContent?.nativeElement?.contains(event.target as Node)){
+      if(event.key == "Tab"){
+        event.preventDefault();
+        return;
+      } else
+      if (event.key == "Escape"){
+        event.preventDefault();
+        event.stopPropagation();
+        this.Dismiss();
+        return;
+      }
+    }
+    // [ inputContainer ]
+    if(this.inputContainer?.nativeElement?.contains(event.target as Node)){ 
+      if(["ArrowDown", "ArrowUp"].includes(event.key)){
+        event.preventDefault();
+        this.Present(event);
+        return;
+      }
+    }
+    // [ inputSelectSearchBar ]
+    if(this.inputSearchBar?.nativeElement == event.target){
+      if(event.key == "Enter"){
+        event.preventDefault();
+        // If the select is not ativo ignore the selected item
+        const item = this.lstOptions[this.selectedIndex!];
+        if(this.hasAtivo() && !item.item.ativo) { return; }
+        this.Select(item);
+        return;
+      } else 
+      if(event.key == "ArrowDown"){
+        if(this.selectedIndex == undefined){ this.selectedIndex = 0; return; }
+        event.preventDefault();
+        this.selectedIndex = (this.selectedIndex < this.lstOptions.length - 1 ? this.selectedIndex + 1 : this.selectedIndex)
+        return;
+      } else 
+      if(event.key == "ArrowUp"){
+        if(this.selectedIndex == undefined){ this.selectedIndex = 0; return; }
+        event.preventDefault();
+        this.selectedIndex = (this.selectedIndex > 0 ? this.selectedIndex - 1 : this.selectedIndex)
+        return;
+      }
+    }
+  }
+  selectedIndex: number | undefined = undefined;
+
+  //[ Search Bar ]
+  @ViewChild('inputSearchBar') inputSearchBar: ElementRef<HTMLInputElement>;
+  searchBarControl: FormControl = new FormControl('');
+  searchValue     : WritableSignal<string> =  signal<string>("");
+  private searchBarSubscription: Subscription | null = null;
+  private destroy$ = new Subject<void>();
+  public destroyed: boolean = false
+
+  ngAfterViewInit(): void {
+    const observable = this.searchBarControl.valueChanges.pipe(
+      takeUntil(this.destroy$),
+      distinctUntilChanged(),
+      debounceTime(200),
+    )
+    //OnSearchChange
+    this.searchBarSubscription = observable.subscribe(async (value: string) => { 
+      this.selectedIndex = undefined;
+      this.searchValue.set(value); 
+    });
+  }
+
+  ClearSearchBar(): void {
+    this.destroyed = true;
+    this.destroy$.next();
+    this.destroy$.complete();
+    if (this.searchBarSubscription) { this.searchBarSubscription.unsubscribe(); }
+  }
+
+  ngOnDestroy(): void {
+    this.ClearSearchBar();
+  }
+
+  override writeValue(obj: T | T[]): void | Promise<void> {
+    this.value.set(obj);
+    this.runValidation();
+    this.UpdateSelected();
+  }
+  
+  override SetValue(obj: T | T[]): void {
+    this.value.set(obj);
+    this.runValidation();
+    this.UpdateSelected();
+    this.propagateChange(this.value());
+    if(!this.configuration().multiple){
+      this.Dismiss();
+    }
+  }
+  Clear(event: MouseEvent): void {
+    event.stopPropagation();
+    if(this.configuration().multiple){
+      this.SetValue([]);
+    }
+    else {
+      this.SetValue(undefined);
+    }
+  }
+  public Select(itemValue: ItemValue<T>): void{
+    const item = itemValue.value;
+    if(this.configuration().multiple){
+      const currentValue = this.value();
+      if(Array.isArray(currentValue)){
+        const index = currentValue.findIndex(p => p == item);
+        if(index > -1){
+          currentValue.splice(index, 1);
+        } else {
+          currentValue.push(item);
+        }
+        this.SetValue([...currentValue]);
+      } else {
+        this.SetValue([item]);
+      }
+    } else {
+      this.SetValue(item);
+      this.Dismiss();
+    }
+  }
+
+  //#region [ Popover / Modal ]
+  @ViewChild('selectContent') selectContent: ElementRef<HTMLDivElement>;
+  
+  @ViewChild(SIonPopoverComponent) popover: SIonPopoverComponent;
+  @ViewChild(IonModal)   modal: IonModal;
+  @ViewChild(IonAlert)   alert: IonAlert;
+  @ViewChild(IonActionSheet) actionSheet: IonActionSheet;
+
+  floatingVisible: boolean = false;
+  renderInterface: boolean = false;
+  @ViewChild('scrollContent') ionContent: IonContent;
+  async Present(event: Event): Promise<void> {
+    this.renderInterface = true;
+    this.cdr.markForCheck();
+    await Timeout(0); //Espera a renderização da interface
+    if(this.interface() == SelectInterfaces.Modal){
+      await this.modal.present();
+      this.inputSearchBar.nativeElement.focus();
+    } else
+    if(this.interface() == SelectInterfaces.Popover){
+      await this.popover.present(event);
+      this.inputSearchBar.nativeElement.focus();
+    } else
+    if(this.interface() == SelectInterfaces.ActionSheet){
+      await this.actionSheet.present();
+      this.inputSearchBar?.nativeElement?.focus();
+    }
+  }
+
+  async Dismiss(): Promise<void> {
+    if(this.modal) {
+      await this.modal.dismiss();
+    }
+    if(this.popover) {
+      await this.popover.dismiss();
+    }
+    this.selectedIndex = undefined;
+    if(this.inputSelectLabel?.nativeElement){ 
+      this.inputSelectLabel.nativeElement.focus();
+    }
+    if(this.configuration().useInfiniteScroll){
+      this.infiniteScrollPage.set(1);
+    }
+  }
+  OnDismiss(): void {
+    this.renderInterface = false;
+    this.floatingVisible = false; 
+    this.searchValue.set('');
+    this.searchBarControl.setValue('');
+  }
+  OnPresent(): void {
+    this.floatingVisible = true;
+  }
+
+  isArray(obj : any ) {
+   return Array.isArray(obj)
+  }
+}
+
+class ItemValue<T>{
+  label: string;
+  value: T;
+  selected: boolean = false;
+  item    : any; 
+  disabled: boolean = false;
+}
+
+function isPortrait() {
+  return window.innerHeight > window.innerWidth;
+}