@masterkeymaterial/ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,267 @@
+import { AfterViewInit, Component, effect, ElementRef, HostListener, inject, input, model, OnDestroy, OnInit, signal, viewChild } from '@angular/core';
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';
+import { UiButton } from "../ui-button/ui-button";
+import { LibUtil, LOG } from '../../util/util';
+import { IPosicoesFloating } from '../../interfaces/interfaces';
+
+@Component({
+  selector: 'ui-menu',
+  templateUrl: './ui-menu.html',
+  styleUrl: './ui-menu.css',
+  imports: [UiButton],
+  host: { '[class.opened]': 'isOpened()' }
+})
+export class UiMenu implements OnDestroy, OnInit, AfterViewInit {
+  // UTILIZE:
+  // 'slot:botao' para colocar o botão que irá abrir o menu, ou utilize o botão padrão (três pontos verticais)
+  // O demais elementos dentro do <ui-menu> serão considerados opções do menu, e serão exibidos dentro do overlay quando o menu for aberto
+
+  elementRef: ElementRef = inject(ElementRef);
+
+  readonly disabled = input<boolean>();
+  readonly icone = input<string | undefined | null>("bi bi-three-dots-vertical");
+  autoCloseInCascade = model<boolean>(true);
+
+  posicao = model<IPosicoesFloating & string>('right-start');
+  isOpened = model(false);
+  id = signal(LibUtil.uuid().split('-')[0]);
+  internalId = signal<{ id: string | undefined; changed: boolean } | undefined>({ id: undefined, changed: false });
+  isSmallScreen = signal(window.innerWidth < 500);
+  optionMinWidth = signal<number>(0);
+  menuPosition = signal<{ top: string; left: string }>({ top: '0px', left: '0px' });
+  zIndex = signal<string>('999');
+  closeOverlayObserver = new MutationObserver((mutations) => {
+    let hasOpenClass = false;
+    for (const mutation of mutations) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        const target = mutation.target as HTMLElement;
+        if (target.classList.contains('open')) {
+          hasOpenClass = true;
+          break;
+        }
+      }
+    }
+    if (!hasOpenClass) {
+      // LOG(1, "%cObserver detectou overlay fechado:", 'color: lightcoral;', mutations?.[0]);
+      this.closeOverlay(true); // Callback para fechar o overlay quando a mutação indicar que perdeu a classe 'open'
+    }
+  });
+
+
+  readonly menuTrigger = viewChild<ElementRef>('menuTrigger');
+  readonly menuOverlay = viewChild<ElementRef>('menuOverlay');
+  readonly menuContainer = viewChild<ElementRef>('menuContainer');
+
+  constructor() {
+    effect(() => {
+
+      const eTrigger = this.menuTrigger()?.nativeElement as HTMLElement;
+      if (!eTrigger) return;
+
+      if (!this.isOpened()) return;
+
+      const cleanupAutoUpdate = autoUpdate(
+        eTrigger,
+        this.menuContainer()?.nativeElement,
+        () => this.updatePosition()
+      );
+      return () => {
+        cleanupAutoUpdate();
+      };
+
+    });
+
+    // Atualiza posição quando o menu abre
+    effect(() => {
+      if (this.isOpened()) {
+        setTimeout(() => {
+          this.updatePosition();
+        }, 1);
+      }
+    });
+    effect(() => {
+      let internalId = this.internalId();
+      if (internalId?.id === undefined && internalId?.changed === true) {
+        // LOG(1, "%cAlterado Internal:", 'color: lightcoral;', internalId, " - Menu ID:", this.id());
+        this.closeOverlay();
+      };
+    });
+  }
+  ngOnInit() {
+    // Inicializa o zIndex com base no valor armazenado no sessionStorage
+    this.zIndex.set(sessionStorage.getItem(`ui-menu-index`) ? (Number(sessionStorage.getItem(`ui-menu-index`)) + 1).toString() : '1001');
+    sessionStorage.setItem(`ui-menu-index`, this.zIndex());
+  }
+  ngOnDestroy() {
+    if (this.isOpened() == true) this.closeOverlay();
+    this.closeOverlayObserver.disconnect();
+    // this.cleanupScrollListeners();
+  }
+  ngAfterViewInit() {
+    this.checkScreenSize();
+    this.setOverlaySizeToSizeViewport();
+
+    this.updatePosition();
+  }
+
+  // Abre ou fecha o overlay de opções
+  onOpenOrCloseOptions() {
+    if (!this.disabled()) {
+      if (this.isOpened()) {
+        this.closeOverlay();
+      } else {
+        this.openOverlay();
+      }
+      this.menuTrigger()?.nativeElement.focus();
+    }
+  }
+  // Abre ou fecha o overlay de opções
+  onClickSlotBotao(event: Event) {
+    if (!this.disabled()) {
+      this.openOverlay();
+      this.menuTrigger()?.nativeElement.focus();
+    }
+    // LOG(1, "%cAbriu ID:", 'color: lightgreen;', this.id());
+  }
+
+  onClickOverlay() {
+    // LOG(1, "%cFECHOU OVERLAY ID:", 'color: lightblue;', this.id());
+    this.closeOverlay();
+  }
+
+
+  onClickContainer(event: Event) {
+    event.stopPropagation();
+    let closestOverlay = (event.target as HTMLElement).closest('.e-menu-overlay');
+    let overlayId = closestOverlay?.id?.replaceAll('ov', '');
+    let closestTrigger = (event.target as HTMLElement).closest('.e-menu-trigger');
+    let triggerId = closestTrigger?.id?.replaceAll('tr', '');
+    this.internalId.set({ id: triggerId, changed: true });
+
+    // LOG(1, 'Triger ID:', triggerId, ' - Overlay ID:', overlayId);
+
+    if (overlayId == this.id() && triggerId != null && triggerId != this.id()) {
+      // Um menu interno foi clicado, não fecha o overlay
+      // O atual nível de menu irá observar o elemento closestTrigger e só irá fechar o overlay quando o elemento trigger fechar.
+      this.closeOverlayObserver.observe(closestTrigger as HTMLElement, { attributes: true, attributeFilter: ['class'] });
+    } else {
+      // Clicou no container, fecha o overlay
+      this.closeOverlay();
+    }
+
+  }
+
+  // Fecha o overlay de opções
+  protected closeOverlay(fromCascade: boolean = false) {
+    if (fromCascade && !this.autoCloseInCascade()) return;
+
+    this.closeOverlayObserver.disconnect();
+    setTimeout(() => {
+      this.isOpened.set(false);
+    }, 2)
+  }
+
+  // Abre o overlay de opções
+  protected openOverlay() {
+    this.updatePosition();
+    setTimeout(() => {
+      this.isOpened.set(true);
+    }, 2)
+  }
+
+  // Atualiza a posição do menu de opções
+  private async updatePosition() {
+    if (this.isSmallScreen()) return;
+
+    const trigger = this.menuTrigger()?.nativeElement;
+    const menuContainer = this.menuContainer()?.nativeElement;
+    if (!trigger || !menuContainer) return;
+
+    const { x, y } = await computePosition(trigger, menuContainer, {
+      placement: this.posicao(),
+      middleware: [
+        offset(2),
+        flip({
+          fallbackPlacements: ['left-start', 'bottom-start', 'top-start', 'bottom-end', 'top-end'],
+        }),
+        shift({ padding: 10 }),
+      ],
+    });
+    this.menuPosition.set({
+      left: `${x}px`,
+      top: `${y}px`
+    });
+  }
+
+  setOverlaySizeToSizeViewport() {
+    // if (!this.isOpened()) return;
+
+    // Obtem o tamanho da largura da viewport
+    const viewportWidth = window.innerWidth;
+    const parcialViewport = viewportWidth * 0.92;
+
+    const overlay = this.menuOverlay()?.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.menuTrigger()?.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));
+  }
+
+  onArrowUp(event: Event) {
+    event.preventDefault();
+    // this.moveFocoPara('cima', event);
+  }
+
+  onArrowDown(event: Event) {
+    event.preventDefault();
+    // this.moveFocoPara('baixo', event);
+  }
+
+  // moveFocoPara(direcao: 'cima' | 'baixo', event: Event) {
+  //   this.openOverlay();
+  //   LOG(1, `Moverá para ${direcao} - Event:`, event);
+  //   const container = this.menuContainer()?.nativeElement as HTMLElement;
+  //   if (!container) return;
+
+  //   const focusableElements = Array.from(container.querySelectorAll('.e-menu-area>*')).filter(el => el instanceof HTMLElement && !el.hasAttribute('disabled')) as HTMLElement[];
+  //   if (focusableElements.length === 0) return;
+
+  //   // 
+
+  // }
+
+}

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

@@ -0,0 +1,48 @@
+:host {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	padding: 0px;
+}
+
+.e-procurar-input-container {
+	width: 200px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: width 1s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.e-procurar-input-container.colapsed {
+	width: 1px;
+	padding: 0px;
+	transition: width 1s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.e-procurar-input {
+	width: 100%;
+	height: auto;
+	cursor: text;
+	border: none;
+	outline: none;
+	background: transparent;
+	caret-color: var(--sys-primary);
+}
+
+.e-procurar-icone-search {
+	color: color-mix(in srgb, var(--sys-primary) 60%, var(--sys-background) 40%);
+	--ui-font-size: 14px;
+}
+
+.e-procurar-botao-clear {
+	color: color-mix(in srgb, var(--sys-primary) 80%, var(--sys-background) 20%);
+	margin-left: 7px;
+	--ui-font-size: 14px;
+}
+
+.e-procurar-input-container.colapsed .e-procurar-icone-search,
+.e-procurar-input-container.colapsed .e-procurar-botao-clear {
+	margin-left: 0px;
+	--ui-font-size: 12px;
+}

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

@@ -0,0 +1,14 @@
+<ui-button tipo="icon" tema="primary" class="e-procurar-icone-search" (clicked)="onClickSearchIcon()" tabindex="-1"
+	icone="fa fa-search">
+</ui-button>
+<div class="e-procurar-input-container" [class.colapsed]="computedColapsed()">
+	<input #searchInput type="text" class="e-procurar-input" [value]="value()" (input)="onInput($event.target.value)"
+		[name]="'procurar_'+(name() ?? '')" (change)="onChange()" [placeholder]="placeholder() ?? 'Procurar...'"
+		[disabled]="disabled()" (keyup.Enter)="onSearch()" (keyup.Escape)="onClearSearch()" (focus)="onFocus($event)"
+		(blur)="onBlur($event)" />
+</div>
+@if(value().length > 0) {
+<ui-button tipo="icon" tema="error" class="e-procurar-botao-clear" (clicked)="onClearSearch()" title="Limpar"
+	icone="fa fa-times">
+</ui-button>
+}

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

@@ -0,0 +1,82 @@
+import { Component, computed, ElementRef, input, model, output, signal, viewChild } from '@angular/core';
+import { UiButton } from "../ui-button/ui-button";
+
+@Component({
+  selector: 'ui-procurar',
+  templateUrl: './ui-procurar.html',
+  styleUrl: './ui-procurar.css',
+  host: { '[class.focused]': 'focused()' },
+  imports: [UiButton],
+})
+export class UiProcurar {
+
+  readonly searchInput = viewChild<ElementRef>('searchInput');
+
+  inputed = output<string>();
+  changed = output<string>();
+  value = model<string>('');
+  colapsed = model<boolean | undefined>(false);
+  autoColapse = model<boolean | undefined>(false);
+
+  computedColapsed = computed(() => {
+    if (this.focused() || this.value().length > 0) {
+      return false;
+    }
+    if (this.autoColapse()) {
+      return this.value().length === 0;
+    }
+    return this.colapsed() ?? false;
+  });
+
+  name = input<string | number | undefined>();
+  placeholder = input<string>();
+  disabled = input<boolean>();
+
+  focused = signal<boolean | undefined>(false);
+
+  onInput(value: string) {
+    this.value.set(value);
+    this.inputed.emit(value);
+  }
+
+  // Limpa o filtro de opções
+  onClearSearch() {
+    this.value.set('');
+    this.focusSearchInput();
+    this.onInputed();
+    this.onChange();
+  }
+
+  focusSearchInput() {
+    this.searchInput()?.nativeElement?.focus();
+  }
+
+  onClickSearchIcon() {
+    this.focusSearchInput();
+    this.onInputed();
+    this.onChange();
+  }
+
+  onSearch() {
+    this.onInputed();
+    this.onChange();
+  }
+
+  onInputed() {
+    this.inputed.emit(this.value());
+  }
+
+  onChange() {
+    this.changed.emit(this.value());
+  }
+
+
+  onFocus(ev: FocusEvent) {
+    this.focused.set(true);
+  }
+
+  onBlur(ev: FocusEvent) {
+    this.focused.set(false);
+  }
+
+}

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

@@ -0,0 +1 @@
+<progress [value]="value()"></progress>

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

@@ -0,0 +1,15 @@
+import { Component, input } from '@angular/core';
+import { UiProgressMode } from '../../interfaces/interfaces';
+
+@Component({
+  selector: 'ui-progress',
+  templateUrl: './ui-progress.html',
+  styleUrl: './ui-progress.css',
+})
+export class UiProgress {
+
+  value = input<number>(0);
+  bufferValue = input<number>(0);
+  mode = input<UiProgressMode>('determinate');
+
+}

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

@@ -0,0 +1,211 @@
+/* triggerElement */
+.e-select-container {
+	position: relative;
+	display: flex;
+	flex: 1;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--ui-padding, none);
+}
+
+.e-select-container,
+.e-select-arrow-area,
+.e-select,
+.e-select input {
+	cursor: pointer;
+}
+
+.e-select {
+	flex: 1;
+	height: var(--ui-height, auto);
+	width: var(--ui-width, auto);
+}
+
+.e-select input {
+	border: none;
+	background: transparent;
+	caret-color: var(--sys-primary);
+	outline: none;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+	text-align: left;
+}
+
+
+.e-select-arrow-area {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+}
+
+.e-select-arrow {
+	width: 0;
+	height: 0;
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	border-top: 6px solid var(--sys-primary);
+	margin: 0 5px;
+	transition: transform 0.2s ease-in-out;
+}
+
+.e-select-arrow.open {
+	transform: rotate(180deg);
+}
+
+.e-select-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100vh;
+	z-index: 2001;
+	background-color: transparent;
+	pointer-events: none;
+	transition: background-color 0.2s ease-in-out;
+}
+
+.e-select-overlay.open {
+	background-color: rgba(0, 0, 0, 0.25);
+	pointer-events: auto;
+}
+
+.e-select-options-container {
+	width: max-content;
+	position: fixed;
+	z-index: 2002;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	border-radius: 10px;
+	transform: translateZ(0);
+	will-change: transform;
+}
+
+.e-select-options-container.open {
+	color: var(--sys-on-background);
+	background: var(--sys-background);
+	outline: 1px solid var(--sys-outline);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.e-select-options-container.open.smallScreen {
+	width: 90vw;
+	left: 5vw !important;
+	/* 170 == 300 List + 40 Search / 2 */
+	top: calc(50vh - 170px) !important;
+}
+
+.e-select-search-area {
+	display: flex;
+	background-color: var(--sys-background);
+	border: 0;
+	border-bottom: 1px inset var(--sys-outline);
+	border-radius: 10px;
+	height: 40px;
+	max-height: 40px;
+}
+
+.e-select-search {
+	flex: 1;
+	width: 100%;
+	border: none;
+	background: var(--sys-surface-container-low);
+	color: var(--sys-on-surface);
+	caret-color: var(--sys-primary);
+	padding: 8px 12px 8px 4px;
+	outline: none;
+}
+
+.e-select-search-clearicon {
+	color: color-mix(in srgb, var(--sys-primary) 80%, var(--sys-background) 20%);
+	font-size: 1rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+}
+
+.e-select-search-icon {
+	color: color-mix(in srgb, var(--sys-primary) 60%, var(--sys-background) 40%);
+	font-size: 0.8rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+}
+
+.e-select-options-list {
+	padding: 0;
+	max-height: 300px;
+	overflow-y: auto;
+}
+
+.e-select-option {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 15px 0px;
+	margin-top: 2px;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.e-select-option.selected {
+	background: color-mix(in srgb, var(--sys-primary) 50%, var(--sys-background) 50%);
+	color: var(--sys-on-background);
+	font-weight: 500;
+}
+
+.e-select-option.choosing {
+	outline: none;
+	background: color-mix(in srgb, var(--sys-primary) 20%, var(--sys-background) 80%);
+	color: var(--sys-on-background);
+}
+
+.e-select-option.empty {
+	cursor: default;
+	color: var(--sys-on-surface-variant);
+	justify-content: center;
+	font-style: italic;
+}
+
+.e-select-option:hover {
+	background: color-mix(in srgb, var(--sys-primary) 20%, var(--sys-background) 80%);
+	color: var(--sys-on-background);
+}
+
+.e-select-option-text {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	user-select: none;
+}
+
+.e-select-option-check {
+	width: 16px;
+	height: 16px;
+	margin: auto 5px;
+	flex-shrink: 0;
+	visibility: hidden;
+
+	/* SVG como máscara */
+	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+
+	-webkit-mask-size: contain;
+	mask-size: contain;
+	-webkit-mask-repeat: no-repeat;
+	mask-repeat: no-repeat;
+	-webkit-mask-position: center;
+	mask-position: center;
+	background-color: var(--sys-on-background);
+}
+
+.e-select-option.selected .e-select-option-check {
+	visibility: visible;
+}

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

@@ -0,0 +1,46 @@
+<div #triggerElement class="e-select-container" (click)="onOpenOrCloseOptions()" (keyup.Enter)="onOpenOrCloseOptions()"
+	(keyup.ArrowDown)="onOpenOrCloseOptions()" (keyup.ArrowUp)="onOpenOrCloseOptions()">
+	<div class="e-select">
+		<input #displayText type="text" [name]="'select_'+(name() ?? '')" [value]="textoExibindo()" readonly
+			[placeholder]="placeholder() ?? ''" [disabled]="disabled()" [class.outlined]="true" [class.input]="true" />
+	</div>
+	<div class="e-select-arrow-area">
+		<div class="e-select-arrow" [class.open]="isOpenedOptions()"></div>
+	</div>
+</div>
+
+
+<div #optionsOverlay class="e-select-overlay" [class.open]="isOpenedOptions()" (click)="closeOverlay()">
+
+	<div #optionsContainer class="e-select-options-container" [class.open]="isOpenedOptions()"
+		[class.smallScreen]="isSmallScreen()" [style.left]="menuPosition().left" [style.top]="menuPosition().top">
+		@if(isOpenedOptions()) {
+		<div class="e-select-search-area" [style.minWidth.px]="optionMinWidth()">
+			<input #optionSearchInput type="text" name="e-select-search-input" class="e-select-search"
+				(keyup)="markKey($event)" placeholder="Procurar..." [value]="textoFiltrado()" (keydown.Escape)="closeOverlay()"
+				size="8" (keydown.Tab)="closeOverlay()" (input)="onInputSearch($event.target.value)" />
+			@if(textoFiltrado().length > 0) {
+			<ui-button tipo="icon" tema="error" class="e-select-search-clearicon" (click)="onClearSearch()"
+				icone="fa fa-times"></ui-button>
+			}
+			<ui-button tipo="icon" tema="primary" class="e-select-search-icon" (click)="focusToSearchInput()"
+				icone="fa fa-search"></ui-button>
+		</div>
+		<div class="e-select-options-list">
+			@for(option of optionsFiltered(); track $index) {
+			<div class="e-select-option" [class.selected]="option.selected" [style.minWidth.px]="optionMinWidth()"
+				[title]="option.v" (click)="onSelectOption(option)" (keyup.Enter)="onSelectOption(option)" tabindex="-1"
+				[class.choosing]="option.choosing">
+				<div class="e-select-option-check"></div>
+				<div class="e-select-option-text" [innerHTML]="option.html"></div>
+			</div>
+			}@empty {
+			<div class="e-select-option empty">
+				Nenhuma opção disponível
+			</div>
+			}
+		</div>
+		}
+	</div>
+
+</div>