@masterkeymaterial/ui 0.0.2 → 0.0.3

package/src/elements/ui-select/ui-select.ts

@@ -1,482 +0,0 @@
-import { AfterViewInit, Component, computed, effect, ElementRef, HostListener, inject, input, model, OnDestroy, output, signal, viewChild } from '@angular/core';
-import { computePosition, flip, offset, shift, detectOverflow, Elements, autoUpdate } from '@floating-ui/dom';
-import { LibUtil, LOG } from '../../util/util';
-import { IKV } from '../../interfaces/interfaces';
-import { UiButton } from "../ui-button/ui-button";
-
-export interface IOptionValue {
-  optionChanged?: IKV;
-  keys: string | number | string[] | number[];
-  values: string | number | string[] | number[];
-}
-
-interface IKVSeletor extends IKV {
-  selected: boolean;
-  choosing: boolean;
-}
-
-@Component({
-  selector: 'ui-select',
-  templateUrl: './ui-select.html',
-  styleUrl: './ui-select.css',
-  host: { '[class]': 'hostClasses()' },
-  imports: [UiButton],
-})
-export class UiSelect implements OnDestroy, AfterViewInit {
-
-  elementRef: ElementRef = inject(ElementRef);
-
-  value = model<string | number | string[] | number[] | undefined>();
-  options = input<IKV[] | undefined | null>();
-
-  name = input<string | number | undefined>();
-  placeholder = input<string>();
-  disabled = input<boolean>();
-  multiple = input<boolean>(false);
-  canUnselect = input<boolean | undefined>(false);
-  textEmpty = input<string | undefined>("Nada selecionado");
-
-  changed = output<IOptionValue>();
-
-  isOpenedOptions = signal(false);
-  markedOptionKey = signal<string | number | null | undefined>(null);
-  elementoAcima: HTMLElement | null = null;
-  // isUnderOverflow = signal(false);
-  isSmallScreen = signal(window.innerWidth < 500);
-
-
-  textoFiltrado = signal<string>("");
-
-  readonly optionsList = computed<IKVSeletor[]>(() => {
-    const options = this.options?.() ?? [];
-    if (this.multiple() !== true) {
-      let valor = (this.value() as string | number | undefined);
-      return options.map(op => ({
-        ...op,
-        selected: String(op.k) == String(valor),
-        choosing: op.k == this.markedOptionKey()
-      }));
-    } else {
-      let valor = (this.value() as string[] | number[] | undefined);
-      if (!Array.isArray(valor)) {
-        valor = [];
-      }
-      return options.map(op => ({
-        ...op,
-        selected: op.k != null ? valor.some(v => String(op.k) == String(v)) : false,
-        choosing: op.k == this.markedOptionKey()
-      }));
-    }
-  });
-  readonly optionsFiltered = computed<IKVSeletor[]>(() => {
-    let words = this.textoFiltrado().trim().split(" ").filter(t => t != "");
-    const options = (this.optionsList() || []).map(o => ({ ...o, html: o.v || `⚠️ Chave: ${o.k}` }));
-    // Sem filtro, retorna tudo
-    if (words.length === 0) return options;
-    return options.filter(op => {
-      for (const w of words) {
-        let encontrado = false;
-        if (op.v != null && LibUtil.contem(op.v, w)) {
-          encontrado = true;
-        }
-        // Termo não encontrado na opção
-        if (!encontrado) return false;
-      }
-      // Todos os termos encontrados
-      return true;
-    }).map(op => {
-      let data = op.v?.toString() || '';
-
-      // Substitui o valor do html, colocando uma mark em volta do texto buscado.
-      if (words.length > 0) {
-        for (let word of words) {
-          let w = word.toLowerCase();
-          let preparedData = LibUtil.removeAcentos(data).toLowerCase();
-          if (w != "" && preparedData.includes(w)) {
-            // Se w estiver dentro de < ou >, ignora (para não interferir em tags HTML)
-            if (new RegExp(`<[^>]*${w}[^>]*>`, 'i').test(preparedData.toString())) continue;
-            // Se a palavra for encontrada, envolve com a tag <mark>
-            let pos = preparedData.indexOf(w);
-            data = data.slice(0, pos)
-              + "<mark>"
-              + data.slice(pos, pos + w.length)
-              + "</mark>"
-              + data.slice(pos + w.length);
-            data = data.replaceAll("</mark><mark>", "");
-          }
-        };
-      }
-      return {
-        ...op,
-        html: data,
-      };
-    });
-  });
-
-  readonly textoExibindo = computed<string>(() => {
-    const val = this.value();
-    if (this.multiple() !== true) {
-      let selectedOption = this.optionsList().find(op => String(op.k) == String(val));
-      return selectedOption?.v ?? (selectedOption?.k ? `⚠️ Chave: ${selectedOption?.k}` : (this.textEmpty() ?? 'Nada selecionado'));
-    }
-
-    let valor = (this.value() as string[] | number[] | undefined);
-    if (valor == undefined || !Array.isArray(valor)) {
-      valor = [];
-    }
-    const textosSelecionados = this.optionsList()
-      .filter(op => valor.some(v => String(v) == String(op.k)))
-      .map(op => op.v);
-    return textosSelecionados.length > 0 ? `[${textosSelecionados.length}] ${textosSelecionados.join(", ")}` : (this.textEmpty() ?? 'Nada selecionado');
-
-  });
-
-  readonly displayText = viewChild<ElementRef>('displayText');
-  readonly triggerElement = viewChild<ElementRef>('triggerElement');
-  readonly optionsOverlay = viewChild<ElementRef>('optionsOverlay');
-  readonly optionsContainer = viewChild<ElementRef>('optionsContainer');
-  readonly optionSearchInput = viewChild<ElementRef>('optionSearchInput');
-  optionMinWidth = signal<number>(0);
-  menuPosition = signal<{ top: string; left: string }>({ top: '0px', left: '0px' });
-
-  // scrollCleanup: (() => void) | null = null;
-
-  constructor() {
-    effect(() => {
-      const eTrigger = this.triggerElement()?.nativeElement as HTMLElement;
-      if (!eTrigger) return;
-
-      if (!this.isOpenedOptions()) return;
-
-      const cleanupAutoUpdate = autoUpdate(
-        eTrigger,
-        this.optionsContainer()?.nativeElement,
-        () => this.updatePosition()
-      );
-      return () => {
-        cleanupAutoUpdate();
-      };
-
-
-      // const resizeObserver = new ResizeObserver((entries) => {
-      //   // Atualiza a posição do menu quando redimensiona
-      //   if (this.isOpenedOptions()) {
-      //     this.updatePosition();
-      //   }
-      // });
-      // resizeObserver.observe(eTrigger);
-      // return () => resizeObserver.disconnect();
-    });
-
-    // Atualiza posição quando o menu abre
-    effect(() => {
-      if (this.isOpenedOptions()) {
-        setTimeout(() => {
-          this.updatePosition();
-          // this.setupScrollListeners();
-          this.focusToSearchInput();
-        }, 1);
-      } else {
-        // this.cleanupScrollListeners();
-      }
-    });
-  }
-
-  ngOnDestroy() {
-    if (this.isOpenedOptions() == true) this.closeOverlay();
-    // this.cleanupScrollListeners();
-  }
-  ngAfterViewInit() {
-    this.checkScreenSize();
-    this.setOverlaySizeToSizeViewport();
-
-
-    this.updatePosition();
-  }
-
-
-  // Manipula mudança de valor (valueOfK não chegará nulo ou undefined)
-  onChange(valueOfK: string | number | null): string | number | string[] | number[] {
-    if (valueOfK == null) return '';
-
-    let optionChanged = this.options?.()?.find(op => String(op.k) === String(valueOfK));
-    let newKeys = valueOfK;
-    let newValues = optionChanged?.v ?? newKeys;
-
-    // SINGLE
-    if (this.multiple() !== true) {
-      if (this.canUnselect() === true && this.value() === newKeys) {
-        newKeys = '';
-        newValues = '';
-      }
-      this.changed.emit({ optionChanged, keys: newKeys, values: newValues });
-      return newKeys;
-    }
-
-    // MULTIPLE (canUnselect sempre é true)
-    let currentKeys = this.value() ?? [] as any[];
-    let currentValues = [];
-    if (!Array.isArray(currentKeys)) {
-      currentKeys = [];
-    }
-
-    if (currentKeys.indexOf(newKeys) === -1) {
-      currentKeys = [...currentKeys, newKeys];
-    } else {
-      currentKeys = currentKeys.filter(v => v !== newKeys);
-    }
-    setTimeout(() => {
-      this.updatePosition();
-    }, 1);
-
-    currentValues = currentKeys.map(k => this.options?.()?.find(op => op.k === k)?.v ?? k);
-    this.changed.emit({ optionChanged, keys: currentKeys, values: currentValues });
-    return currentKeys;
-  }
-
-  // Abre ou fecha o overlay de opções
-  onOpenOrCloseOptions() {
-    if (!this.disabled()) {
-      if (this.isOpenedOptions()) {
-        this.closeOverlay();
-      } else {
-        this.openOverlay();
-      }
-    }
-  }
-
-  // Fecha o overlay de opções
-  protected closeOverlay() {
-    setTimeout(() => {
-      this.isOpenedOptions.set(false);
-    }, 2)
-
-    this.textoFiltrado.set("");
-    this.markedOptionKey.set(null);
-    this.focusToDisplayText();
-  }
-
-  // Abre o overlay de opções
-  protected openOverlay() {
-    this.updatePosition();
-    setTimeout(() => {
-      this.isOpenedOptions.set(true);
-    }, 2)
-  }
-
-  // Seleciona uma opção
-  onSelectOption(option?: IKV) {
-    if (!option || option.k == null) {
-      LOG(1, `❌ (SelectOption) Chave nula! (${option?.k}, classof: '${LibUtil.classof(option?.k)}'). Valor corresponde ${option?.v}`);
-      return;
-    }
-    this.value.set(this.onChange(option.k));
-    if (this.multiple() !== true) {
-      this.closeOverlay();
-    } else {
-      this.focusToSearchInput();
-    }
-  }
-
-  // Filtra as opções
-  onInputSearch(text: string) {
-    this.textoFiltrado.set(text);
-    this.markedOptionKey.set(null);
-  }
-
-  // Limpa o filtro de opções
-  onClearSearch() {
-    this.textoFiltrado.set("");
-    this.focusToSearchInput();
-  }
-
-  focusToSearchInput() {
-    this.optionSearchInput()?.nativeElement?.focus();
-  }
-
-  focusToDisplayText() {
-    this.displayText()?.nativeElement?.focus();
-  }
-
-  // Navegação por teclado
-  markKey(event: KeyboardEvent) {
-    const options = this.optionsFiltered();
-    if (options.length === 0) return;
-    let currentIndex = options.findIndex(op => op.k === this.markedOptionKey());
-    let currentKV = options.find(op => op.k === this.markedOptionKey());
-
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      currentIndex = (currentIndex + 1) % options.length;
-      this.markedOptionKey.set(options[currentIndex].k);
-      this.moveScrollToMarkedOption();
-    } else if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      currentIndex = (currentIndex - 1 + options.length) % options.length;
-      this.markedOptionKey.set(options[currentIndex].k);
-      this.moveScrollToMarkedOption();
-    } else if (event.key === 'Escape' || event.key === 'Tab') {
-      event.preventDefault();
-      this.closeOverlay();
-    } else if (event.key === 'Enter') {
-      event.preventDefault();
-      if (this.markedOptionKey() != null) {
-        this.onSelectOption(currentKV);
-      }
-      this.closeOverlay();
-    }
-  }
-
-  // ----------------------------------------------------
-  // Funções de Suporte ao Overlay
-  // ----------------------------------------------------
-
-  // Quando o overlay estiver aberto, define a classe showing no host
-  readonly hostClasses = computed(() => {
-    return this.isOpenedOptions() ? 'opened' : '';
-  })
-
-
-  // Fecha o overlay ao clicar fora
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: MouseEvent): void {
-    const clickedInside = this.elementRef.nativeElement.contains(event.target);
-    if (!clickedInside && this.isOpenedOptions()) {
-      setTimeout(() => {
-        this.isOpenedOptions.set(false);
-      }, 2)
-      this.textoFiltrado.set("");
-      this.markedOptionKey.set(null);
-    }
-  }
-
-  // Configura os listeners de scroll (Só necessita se não utilizar o autoUpdate do floating-ui, que já faz isso automaticamente)
-  // private setupScrollListeners() {
-  //   const trigger = this.triggerElement()?.nativeElement;
-  //   if (!trigger) return;
-
-  //   const updatePositionHandler = () => this.updatePosition();
-  //   const scrollElements: HTMLElement[] = [];
-  //   window.addEventListener('scroll', updatePositionHandler, { passive: true });
-  //   let parent = trigger.parentElement;
-  //   while (parent) {
-  //     const overflow = window.getComputedStyle(parent).overflow;
-  //     const overflowY = window.getComputedStyle(parent).overflowY;
-  //     const overflowX = window.getComputedStyle(parent).overflowX;
-  //     if (
-  //       overflow === 'auto' || overflow === 'scroll' ||
-  //       overflowY === 'auto' || overflowY === 'scroll' ||
-  //       overflowX === 'auto' || overflowX === 'scroll'
-  //     ) {
-  //       parent.addEventListener('scroll', updatePositionHandler, { passive: true });
-  //       scrollElements.push(parent);
-  //     }
-  //     parent = parent.parentElement;
-  //   }
-  //   this.scrollCleanup = () => {
-  //     window.removeEventListener('scroll', updatePositionHandler);
-  //     scrollElements.forEach(el => {
-  //       el.removeEventListener('scroll', updatePositionHandler);
-  //     });
-  //   };
-  // }
-
-  // Limpa os listeners de scroll (Só necessita se não utilizar o autoUpdate do floating-ui, que já faz isso automaticamente)
-  // private cleanupScrollListeners() {
-  //   if (this.scrollCleanup) {
-  //     this.scrollCleanup();
-  //     this.scrollCleanup = null;
-  //   }
-  // }
-
-  // Atualiza a posição do menu de opções
-  private async updatePosition() {
-    if (this.isSmallScreen()) return;
-
-    const trigger = this.triggerElement()?.nativeElement;
-    const optionsContainer = this.optionsContainer()?.nativeElement;
-    if (!trigger || !optionsContainer) return;
-
-    const { x, y } = await computePosition(trigger, optionsContainer, {
-      placement: 'bottom-start',
-      middleware: [
-        offset(2),
-        flip({
-          fallbackPlacements: ['top-start', 'bottom-end', 'top-end'],
-        }),
-        shift({ padding: 10 }),
-      ],
-    });
-    this.menuPosition.set({
-      left: `${x}px`,
-      top: `${y}px`
-    });
-  }
-
-  setOverlaySizeToSizeViewport() {
-    // if (!this.isOpenedOptions()) return;
-
-    // Obtem o tamanho da largura da viewport
-    const viewportWidth = window.innerWidth;
-    const parcialViewport = viewportWidth * 0.92;
-
-    const overlay = this.optionsOverlay()?.nativeElement as HTMLElement;
-    if (overlay) {
-      let currentElement = overlay.parentElement as HTMLElement | null;
-      while (currentElement) {
-        let larguraOverlay = overlay.clientWidth;
-
-        // Se chegar no body, para (para evitar mover o overlay para fora do body)
-        if (currentElement.tagName.toLowerCase() === "body") break;
-
-        // Move o overlay para o próximo nível acima
-        currentElement.appendChild(overlay);
-
-        if (larguraOverlay >= parcialViewport) {
-          currentElement = null;
-          break;
-        }
-
-        currentElement = currentElement.parentElement as HTMLElement;
-      }
-
-    }
-  }
-
-  onChangeMediaQuery(e: MediaQueryListEvent | MediaQueryList) {
-    this.isSmallScreen.set(e.matches);
-    const eTrigger = this.triggerElement()?.nativeElement as HTMLElement;
-    if (eTrigger) {
-      if (this.isSmallScreen()) {
-        this.optionMinWidth.set(0);
-      } else {
-        this.optionMinWidth.set(eTrigger.offsetWidth - 4);
-      }
-    }
-  }
-
-  checkScreenSize() {
-    const mediaQuery = window.matchMedia('(max-width: 500px)');
-    this.onChangeMediaQuery(mediaQuery);
-    mediaQuery.addEventListener('change', this.onChangeMediaQuery.bind(this));
-  }
-
-  // Move o scroll para a opção marcada
-  private moveScrollToMarkedOption() {
-    setTimeout(() => {
-      const optionsContainer = this.optionsContainer()?.nativeElement?.querySelector(".e-select-options-list") as HTMLElement;
-      const markedOption = optionsContainer?.querySelector('.e-select-option.choosing') as HTMLElement;
-      if (optionsContainer && markedOption) {
-        const containerTop = optionsContainer.scrollTop;
-        const containerBottom = containerTop + optionsContainer.clientHeight;
-        const optionTop = markedOption.offsetTop;
-        const optionBottom = optionTop + markedOption.offsetHeight;
-        if (optionTop < containerTop) {
-          optionsContainer.scrollTop = optionTop - 40; // 40px do elemento Search
-        } else if (optionBottom > containerBottom) {
-          optionsContainer.scrollTop = optionBottom - optionsContainer.clientHeight;
-        }
-      }
-    }, 1);
-  }
-}

package/src/elements/ui-slide/ui-slide.css

@@ -1,75 +0,0 @@
-.sliderbox {
-	--height: 28px;
-	min-width: calc(var(--height) * 2.2);
-	display: flex;
-	align-items: center;
-	cursor: pointer;
-	height: var(--height);
-	width: calc(var(--height) * 2.2);
-	border-radius: calc(var(--height) / 2);
-	background-color: var(--sys-primary-15);
-	transition: background-color 0.3s ease;
-}
-
-.sliderbox.ativo {
-	background-color: var(--sys-primary);
-}
-
-.slidercircle {
-	height: calc(var(--height) - 6px);
-	width: calc(var(--height) - 6px);
-	background-color: var(--sys-card);
-	border-radius: 50%;
-	margin: 3px;
-	transition: transform 0.3s ease;
-	outline: 1px dashed var(--sys-primary);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.sliderbox.ativo .slidercircle {
-	transform: translateX(calc(var(--height) * 1.2)) scale(1.1);
-	outline: 2px solid var(--sys-primary);
-}
-
-.sliderbox.disabled {
-	cursor: not-allowed;
-	opacity: 0.6;
-	filter: grayscale(1);
-	pointer-events: none;
-}
-
-
-
-.sliderbox .slidercircle .nocheckmark {
-	display: block;
-	color: var(--sys-primary);
-	margin: 2px 0 0 1px;
-	font-size: 1.2rem;
-}
-
-.sliderbox.ativo .slidercircle .nocheckmark {
-	display: none;
-}
-
-
-.sliderbox .slidercircle .checkmark {
-	display: none;
-}
-
-.sliderbox.ativo .slidercircle .checkmark {
-	display: block;
-	color: var(--sys-primary);
-	margin: 2px 0 0 1px;
-	font-size: 1.2rem;
-}
-
-.sliderbox:focus-visible {
-	outline: none;
-}
-
-.sliderbox:focus-visible .slidercircle,
-.sliderbox:hover .slidercircle {
-	outline: 1px solid var(--sys-primary);
-}

package/src/elements/ui-slide/ui-slide.html

@@ -1,7 +0,0 @@
-<div #sliderbox class="sliderbox" tabindex="0" (click)="onClickSlide()" [class.ativo]="ativo()"
-	[class.disabled]="disabled()" (focus)="onFocus($event)" (blur)="onBlur($event)">
-	<div class="slidercircle">
-		<i class="checkmark bi bi-check-lg"></i>
-		<i class="nocheckmark bi bi-dash"></i>
-	</div>
-</div>

package/src/elements/ui-slide/ui-slide.ts

@@ -1,61 +0,0 @@
-import { AfterViewInit, Component, computed, effect, ElementRef, input, model, output, viewChild } from '@angular/core';
-
-@Component({
-  selector: 'ui-slide',
-  templateUrl: './ui-slide.html',
-  styleUrl: './ui-slide.css',
-  host: { '[class.focused]': 'focused()' }
-})
-export class UiSlide implements AfterViewInit {
-
-  sliderbox = viewChild('sliderbox', { read: ElementRef });
-
-  value = model<boolean>(false);
-  disabled = input<boolean>();
-  focused = model<boolean>(false);
-  focus = input<boolean>(false);
-  changed = output<boolean>();
-
-  ativo = computed(() => {
-    const val = (this.value() as any);
-    return val === true || val === 'true' || val === 1 || val === '1';
-  });
-
-  constructor() {
-    effect(() => {
-      if (this.focus()) {
-        this.sliderbox()?.nativeElement.focus();
-      }
-    });
-  }
-
-  ngAfterViewInit(): void {
-    this.sliderbox()?.nativeElement.addEventListener('keydown', (event: KeyboardEvent) => {
-      if (event.key === ' ' || event.key === 'Enter') {
-        event.preventDefault();
-        this.onClickSlide();
-      }
-    });
-  }
-
-  onClickSlide() {
-    if (this.disabled()) return;
-
-    const currentValue = (this.value() as any);
-    const newValue = !(currentValue === true || currentValue === 'true' || currentValue === 1 || currentValue === '1');
-    this.value.set(newValue);
-    this.changed.emit(newValue);
-  }
-
-  onFocus(ev: FocusEvent) {
-    if (this.disabled()) return;
-
-    this.focused.set(true);
-  }
-
-  onBlur(ev: FocusEvent) {
-    this.focused.set(false);
-  }
-
-
-}