@sapphire-ion/framework 1.3.5 → 1.3.8

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

@@ -1,12 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,176 +0,0 @@
-<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

@@ -1,366 +0,0 @@
-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;
-}