@masterkeymaterial/ui 0.0.2 → 0.0.4

package/src/elements/ui-drop-zone/ui-drop-zone.ts

@@ -1,153 +0,0 @@
-import { Component, ElementRef, input, model, output, viewChild } from '@angular/core';
-import { IDropOutput, IDropZoneEvent, IFileMetadata } from '../../interfaces/interfaces';
-import { LibUtil, LOG } from '../../util/util';
-
-@Component({
-  selector: 'ui-drop-zone',
-  templateUrl: './ui-drop-zone.html',
-  styleUrl: './ui-drop-zone.css',
-})
-export class UiDropZone {
-
-  value = model<IDropOutput>();
-  disabled = input<boolean>();
-  sobrepor = input<boolean>();
-  clicked = output<Event>();
-  changed = output<IDropOutput>();
-
-  rippleEffect = viewChild('rippleEffect', { read: ElementRef });
-  ripple = viewChild('ripple', { read: ElementRef });
-  // dropzonearea = viewChild('dropzonearea', { read: ElementRef })
-  isDragging: boolean = false;
-
-  async onDropZone(tipo: IDropZoneEvent, ev: Event) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    if (this.disabled()) return;
-
-    let target = ((ev as Event).target as HTMLDivElement);
-    if (tipo == "dragenter" && !this.disabled()) this.isDragging = true;
-    if (tipo == "dragleave" && !this.disabled()) this.isDragging = false;
-    if (tipo == "click" && target && target.classList?.contains("dropzone")) {
-      this.clicked.emit(ev);
-    }
-  }
-
-  async onDrop(ev: DragEvent) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    this.isDragging = false;
-    if (this.disabled()) return;
-
-    const dataTransfer = ev.dataTransfer;
-    if (!dataTransfer) {
-      this.createRipple(ev as DragEvent, "red");
-      return;
-    }
-    this.createRipple(ev as DragEvent);
-
-    const output: IDropOutput = {
-      timestamp: new Date().toISOString(),
-      types: (dataTransfer.types as any),
-      tipo: "unknown",
-    };
-
-    // 1. Verificar se há arquivos
-    if (dataTransfer.files && dataTransfer.files.length > 0) {
-
-      output.data = ([] as IFileMetadata[]);
-      output.tipo = "file";
-
-      for await (let file of dataTransfer.files) {
-        let lastIndexOf = file.name.lastIndexOf(".");
-        if (lastIndexOf < 0) {
-          LOG(1, `❌ O arquivo ${file.name} está sem uma extensão.`);
-          continue;
-        }
-        let base64: string | null = await LibUtil.fileReader(file);
-        if (!base64) {
-          LOG(1, `❌ Ocorreu um erro com o arquivo ${file.name}.`);
-          continue;
-        }
-
-        (output.data as IFileMetadata[]).push({
-          base64: base64,
-          name: file.name,
-          size: file.size,
-          extension: file.name.slice(lastIndexOf), // inclui o "."
-          type: file.type,
-          lastModifiedIso: new Date(file.lastModified).toISOString(),
-        });
-      }
-
-    }
-
-    // 2. Verificar se há texto
-    const text = dataTransfer.getData('text/plain');
-    if (text) {
-      output.data = text;
-      output.tipo = "text";
-    }
-
-    // 3. Verificar se há HTML
-    const html = dataTransfer.getData('text/html');
-    if (html) {
-      output.data = html;
-      output.tipo = "html";
-    }
-
-    // 4. Verificar se há URL
-    const url = dataTransfer.getData('text/uri-list');
-    if (url) {
-      output.data = url;
-      output.tipo = "url";
-    }
-
-    // 5. Verificar se há dados JSON customizados
-    try {
-      const json = dataTransfer.getData('application/json');
-      if (json) {
-        output.data = JSON.parse(json);
-        output.tipo = "json";
-      }
-    } catch (e) {
-      // JSON inválido, ignorar
-    }
-
-    // 6. Capturar todos os outros tipos de dados disponíveis
-    dataTransfer.types.forEach(type => {
-      if (!['text/plain', 'text/html', 'text/uri-list', 'application/json', 'Files'].includes(type)) {
-        const data = dataTransfer.getData(type);
-        if (data) {
-          output.data = data;
-          output.tipo = "unknown";
-        }
-      }
-    });
-
-    this.value.set(output);
-    this.changed.emit(output);
-  }
-
-  createRipple(ev: DragEvent, classColor: string = "") {
-    const rippleEffect = ev.currentTarget ?? this.rippleEffect()?.nativeElement;
-    const ripple = this.ripple()?.nativeElement.cloneNode(true) as HTMLElement;
-    const rect = rippleEffect.getBoundingClientRect();
-    // Calcula a posição do clique relativa ao botão
-    const x = ev.clientX - rect.left;
-    const y = ev.clientY - rect.top;
-    // Define o tamanho do ripple (maior dimensão do botão * 2)
-    const size = Math.max(rect.width, rect.height) * 2;
-    ripple.style.width = ripple.style.height = size + 'px';
-    ripple.style.left = (x - size / 2) + 'px';
-    ripple.style.top = (y - size / 2) + 'px';
-    ripple.classList.add('ripple');
-    if (classColor) {
-      ripple.classList.add(classColor);
-    }
-    rippleEffect.appendChild(ripple);
-    ripple.addEventListener('animationend', () => {
-      ripple.remove();
-    });
-  }
-}

package/src/elements/ui-file-list/ui-file-list.css

@@ -1,43 +0,0 @@
-:host {
-	width: 100%;
-}
-
-.e-filelist-area {
-	display: flex;
-	flex-direction: column;
-	gap: 12px;
-	margin: 6px 0;
-	width: 100%;
-}
-
-.e-filelist-item {
-	display: grid;
-	grid-template-columns: 1fr auto 1fr;
-	gap: 5px;
-}
-
-.e-filelist-item-icon {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	height: 100%;
-	aspect-ratio: 1 / 1;
-	border-radius: 6px;
-	font-size: 1.2rem;
-}
-
-.e-filelist-item-icon-ext {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 0.7rem;
-}
-
-.e-filelist-item-text {
-	align-items: center;
-	align-content: center;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}

package/src/elements/ui-file-list/ui-file-list.html

@@ -1,17 +0,0 @@
-<div class="e-filelist-area">
-	@for (file of filesList(); track $index) {
-	<div class="e-filelist-item">
-		<div class="e-filelist-item-icon">
-			<i class="bi bi-file-earmark-fill"></i>
-			<div class="e-filelist-item-icon-ext">{{ file.extension?.slice(1) }}</div>
-		</div>
-		<div class="e-filelist-item-text">{{ file.name }}</div>
-		<div class="e-filelist-action">
-			@if(!disabled()){
-			<ui-button tipo="icon" tema="error" [disabled]="disabled()" (click)="onDelete(file)" icone="bi bi-x-lg">
-			</ui-button>
-			}
-		</div>
-	</div>
-	}
-</div>

package/src/elements/ui-file-list/ui-file-list.ts

@@ -1,22 +0,0 @@
-import { Component, input, output } from '@angular/core';
-import { UiButton } from "../ui-button/ui-button";
-import { IFileMetadata } from '../../interfaces/interfaces';
-
-@Component({
-  selector: 'ui-file-list',
-  templateUrl: './ui-file-list.html',
-  styleUrl: './ui-file-list.css',
-  imports: [UiButton]
-})
-export class UiFileList {
-
-  disabled = input<boolean>();
-  filesList = input<IFileMetadata[]>();
-  remove = output<IFileMetadata>();
-
-  onDelete(file: IFileMetadata) {
-    if (this.disabled()) return;
-    this.remove.emit(file);
-  }
-
-}

package/src/elements/ui-list-errors/ui-list-errors.css

@@ -1,30 +0,0 @@
-:host {
-	display: contents;
-}
-
-.erroArea {
-	background-color: transparent;
-	border-radius: var(--MasterRadius);
-	font-size: 12px;
-	padding: 0px 8px 2px 8px;
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: flex-end;
-}
-
-.erroArea .erroText {
-	color: var(--sys-error);
-}
-
-.erroArea .dicaText {
-	color: var(--sys-info);
-}
-
-.erroArea.hide {
-	display: none;
-}
-
-span {
-	display: block;
-	margin-left: 3px;
-}

package/src/elements/ui-list-errors/ui-list-errors.html

@@ -1,10 +0,0 @@
-@if(show()){
-<div class="erroArea" [class.hide]="(!errors() || errors()?.length === 0) && (!dica())">
-	@for (erro of errors(); track $index) {
-	<span class="erroText">{{ erro ?? 'Erro desconhecido' }}</span>
-	}
-	@if(dica()){
-	<span class="dicaText">{{ dica() ?? '' }}</span>
-	}
-</div>
-}

package/src/elements/ui-list-errors/ui-list-errors.ts

@@ -1,14 +0,0 @@
-import { Component, input } from '@angular/core';
-
-@Component({
-  selector: 'ui-list-errors',
-  templateUrl: './ui-list-errors.html',
-  styleUrl: './ui-list-errors.css',
-})
-export class UiListErrors {
-
-  show = input.required<boolean | undefined>();
-
-  errors = input.required<(string | undefined)[] | undefined>();
-  dica = input.required<string | undefined>();
-}

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

@@ -1,13 +0,0 @@
-i {
-	animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-	0% {
-		transform: rotate(0deg);
-	}
-
-	100% {
-		transform: rotate(360deg);
-	}
-}

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

@@ -1 +0,0 @@
-<i class="fa fa-spinner"></i>

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

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'ui-loading',
-  templateUrl: './ui-loading.html',
-  styleUrl: './ui-loading.css',
-})
-export class UiLoading {
-
-}

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

@@ -1,69 +0,0 @@
-.e-menu-area {
-	background-color: var(--sys-card);
-	border-radius: 4px;
-	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-	padding: 8px 0;
-	display: flex;
-	flex-direction: column;
-	gap: var(--ui-gap, 4px);
-	user-select: none;
-}
-
-.e-menu-trigger {
-	flex: 1;
-	display: block;
-}
-
-.e-menu-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100vh;
-	z-index: 1001;
-	background-color: transparent;
-	pointer-events: none;
-	transition: background-color 0.2s ease-in-out;
-}
-
-.e-menu-overlay.open {
-	background-color: rgba(0, 0, 0, 0.25);
-	pointer-events: auto;
-}
-
-.e-menu-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;
-
-	transform-origin: top left;
-	transform: scale(0.8) translate(0, -10%) rotateX(90deg) skew(15deg);
-
-	opacity: 0;
-	visibility: hidden;
-	/* transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out; */
-	transition: all 0.15s ease-in-out;
-}
-
-.e-menu-overlay.open .e-menu-container {
-	color: var(--sys-on-card);
-	background: var(--sys-card);
-	outline: 1px solid var(--sys-outline);
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-	visibility: visible;
-	opacity: 1;
-	transform: scale(1);
-}
-
-.e-menu-overlay.open .e-menu-container.smallScreen {
-	width: 90vw;
-	left: 5vw !important;
-	/* 170 == 300 List + 40 Search / 2 */
-	top: calc(50vh - 170px) !important;
-}

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

@@ -1,20 +0,0 @@
-<div #menuTrigger class="e-menu-trigger" (click)="onClickSlotBotao($event)" (keyup.Enter)="onOpenOrCloseOptions()"
-	(keydown.ArrowDown)="onArrowDown($event)" (keyup.ArrowUp)="onArrowUp($event)" (keyup.Escape)="closeOverlay()"
-	[id]="'tr'+id()" [class.open]="isOpened()">
-	<ng-content select="[slot='botao']">
-		<ui-button tipo="icon" tema="primary" [icone]="icone()"></ui-button>
-	</ng-content>
-</div>
-
-<div #menuOverlay class="e-menu-overlay" [class.open]="isOpened()" (click)="onClickOverlay()"
-	(keydown.ArrowDown)="onArrowDown($event)" (keyup.ArrowUp)="onArrowUp($event)" [style.zIndex]="zIndex()"
-	[id]="'ov'+id()">
-
-	<div #menuContainer class="e-menu-container" [class.smallScreen]="isSmallScreen()" [style.left]="menuPosition().left"
-		[style.top]="menuPosition().top" (click)="onClickContainer($event)">
-		<div [style.minWidth.px]="optionMinWidth()" class="e-menu-area">
-			<ng-content></ng-content>
-		</div>
-	</div>
-
-</div>

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

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