@masterkeymaterial/ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,25 @@
+import { Component, computed, input } from '@angular/core';
+import { LibUtil } from '../../util/util';
+
+@Component({
+  selector: 'ui-chip',
+  templateUrl: './ui-chip.html',
+  styleUrl: './ui-chip.css',
+})
+export class UiChip {
+
+  // HSL
+  cor = input<number | null | undefined>();
+
+  hue = computed<number | null>(() => {
+    let hue = this.cor();
+    if (LibUtil.classof(hue) == 'number') {
+      if (hue! < 0) { return 0; };
+      if (hue! > 359) { return 359; };
+      return hue!;
+    }
+    return null;
+  });
+
+
+}

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

@@ -0,0 +1,91 @@
+:host {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	position: relative;
+	overflow: hidden;
+	padding: 5px;
+	width: 100%;
+	min-height: var(--ui-min-height, 200px);
+}
+
+.dropzone {
+	--minOffset: 1px;
+	padding: 2px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: var(--MasterRadius);
+	background-color: var(--sys-primary-15);
+	cursor: pointer;
+	outline: 1px dashed var(--sys-primary);
+	outline-offset: var(--minOffset);
+	position: absolute;
+	top: 5px;
+	left: 5px;
+	width: calc(100% - 10px);
+	height: calc(100% - 10px);
+	overflow: hidden;
+	z-index: 1;
+}
+
+.dropzone.naosobrepor {
+	z-index: 0;
+}
+
+.dropzone.disabled {
+	filter: grayscale(1);
+	cursor: auto;
+	pointer-events: none;
+	opacity: 0.8;
+}
+
+.dropzone * {
+	pointer-events: none;
+}
+
+.dropzone.dragging .grid {
+	pointer-events: none !important;
+}
+
+.dropzone.dragging {
+	outline: 3px dashed var(--sys-primary);
+	animation: onDragging 0.8s infinite ease-in-out;
+}
+
+@keyframes onDragging {
+	0% {
+		outline-offset: var(--minOffset);
+	}
+
+	50% {
+		outline-offset: -8px;
+	}
+
+	100% {
+		outline-offset: var(--minOffset);
+	}
+}
+
+
+.ripple {
+	position: absolute;
+	border-radius: 50%;
+	background: rgba(var(--toDark), 0.2);
+	transform: scale(0);
+	animation: ripple-animation 0.7s ease-out;
+	pointer-events: none;
+	z-index: 2;
+}
+
+@keyframes ripple-animation {
+	to {
+		transform: scale(1.4);
+		opacity: 0;
+	}
+}
+
+.ripple.red {
+	background: rgba(255, 0, 0, 0.2);
+}

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

@@ -0,0 +1,8 @@
+<div #dropzonearea class="dropzone" [class.naosobrepor]="!sobrepor()" (dragenter)="onDropZone('dragenter',$event)"
+	(dragleave)="onDropZone('dragleave',$event)" (drop)="onDrop($event)" (dragover)="onDropZone('dragover',$event)"
+	(click)="onDropZone('click',$event)" [class.disabled]="disabled()" [class.dragging]="isDragging">
+	<span #rippleEffect class="rippleArea">
+		<span #ripple class="ripple"></span>
+	</span>
+</div>
+<ng-content></ng-content>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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