@masterkeymaterial/ui 0.0.1 → 0.0.2

package/README.md

@@ -1,6 +1,6 @@
 # @masterkeymaterial/ui
 
-Biblioteca Angular com componentes de UI e campos de formulario reutilizaveis para montar formularios dinamicos.
+Guia de instalacao para consumidores da biblioteca.
 
 ## Instalacao
 
@@ -8,76 +8,26 @@ Biblioteca Angular com componentes de UI e campos de formulario reutilizaveis pa
 npm install @masterkeymaterial/ui
 ```
 
-## Peer Dependencies
+## Pre-requisitos
 
-Esta biblioteca depende das versoes abaixo no projeto consumidor:
+Projeto consumidor com:
 
 ```json
 {
-   "@angular/common": "^21.2.0",
-   "@angular/core": "^21.2.0",
-   "@angular/platform-browser": "^21.2.0"
+  "@angular/common": "^21.2.0",
+  "@angular/core": "^21.2.0",
+  "@angular/platform-browser": "^21.2.0"
 }
 ```
 
-## Uso Rapido
+## Verificacao Rapida
 
-Exemplo de uso com componente standalone:
-
-```ts
-import { Component } from '@angular/core';
-import { UiButton } from '@masterkeymaterial/ui';
-
-@Component({
-   selector: 'app-root',
-   standalone: true,
-   imports: [UiButton],
-   template: `
-      <lib-ui-button
-         [label]="'Salvar'"
-         [tema]="'primario'"
-      />
-   `
-})
-export class AppComponent {}
-```
-
-## Build Da Biblioteca
-
-```bash
-ng build MasterKeyMaterial --configuration production
-```
-
-O artefato e gerado em `dist/master-key-material`.
-
-## Publicacao No npm
-
-Com login valido no npm e permissao na org `masterkeymaterial`:
+Depois da instalacao:
 
 ```bash
-npm publish dist/master-key-material --access public
+npm ls @masterkeymaterial/ui
 ```
 
-Para testar antes de publicar:
-
-```bash
-npm publish dist/master-key-material --dry-run
-```
-
-## Superficie Publica
-
-A API publica desta biblioteca e definida em `src/public-api.ts` e inclui:
-
-- Tipos e interfaces como `IKV`, `IKV_ext`, `IFileMetadata`, `ITipoBotao`, `ITiposTema`.
-- Utilitarios e base de formularios (`util`, `Formulario`, `BaseFieldsValues`, `BaseFieldsForm`).
-- Elementos de UI (`ui-button`, `ui-chip`, `ui-drop-zone`, `ui-file-list`, `ui-select`, `ui-procurar`, `ui-progress`, `ui-slide`, `ui-check-box`, `ui-list-errors`, `ui-loading`, `ui-menu`).
-- Componentes de formulario (`form-filter`, `form-action`, `form-no-action`, `formated-values`, `single-values`, `generic`).
-
-## Compatibilidade
-
-- Angular 21.x
-- Node.js 18+ recomendado
-
 ## Licenca
 
 MIT

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+    "dest": "../../dist/master-key-material",
+    "lib": {
+        "entryFile": "src/public-api.ts"
+    },
+    "allowedNonPeerDependencies": [
+        "@floating-ui/dom"
+    ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@masterkeymaterial/ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Biblioteca Angular de componentes UI e campos de formulario reutilizaveis para construir formularios dinamicos.",
   "keywords": [
     "angular",
@@ -22,20 +22,11 @@
     "@floating-ui/dom": "^1.7.6",
     "tslib": "^2.3.0"
   },
+  "devDependencies": {
+    "typescript": "~5.9.2"
+  },
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "module": "fesm2022/masterkeymaterial-ui.mjs",
-  "typings": "types/masterkeymaterial-ui.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/masterkeymaterial-ui.d.ts",
-      "default": "./fesm2022/masterkeymaterial-ui.mjs"
-    }
-  },
-  "type": "module"
+  "sideEffects": false
 }

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

@@ -0,0 +1,229 @@
+:host {
+	display: block;
+	user-select: none;
+}
+
+button {
+	width: var(--ui-width, 100%);
+	height: var(--ui-height, 40px);
+	min-height: var(--ui-min-height, auto);
+	display: var(--ui-display, flex);
+	flex-direction: var(--ui-flex-direction, row);
+	justify-content: var(--ui-justify-content, center);
+	align-items: var(--ui-align-items, center);
+	background-color: var(--ui-background, var(--sys-background));
+	color: var(--ui-on-background, var(--sys-on-background));
+	border-radius: var(--ui-border-radius, var(--MasterRadius, 15px));
+	gap: var(--ui-gap, 0.5rem);
+	text-align: var(--ui-text-align, center);
+	font-size: var(--ui-font-size, 14px);
+	cursor: pointer;
+	text-decoration: none;
+	border: none;
+	position: relative;
+	padding: var(--ui-padding, 0 16px);
+	outline: 1px solid var(--ui-outline-color, transparent);
+	outline-offset: var(--ui-outline-offset, -1px);
+	margin: var(--ui-margin, 0);
+	--button-transparency: var(--ui-effect-color, light-dark(#00000025, #ffffff25));
+}
+
+button.radiusTabFormat {
+	border-radius: var(--MasterRadius, 15px) var(--MasterRadius, 15px) 0 0;
+}
+
+/* TODOS HOVER */
+button:hover,
+button:focus-visible {
+	filter: brightness(1.1) saturate(1.1);
+}
+
+button.icon:hover,
+button.nofill:hover,
+button.outlined:hover,
+button.menu-item:hover,
+button.menu-item-category:hover,
+button.sidebar-item:hover,
+button.sidebar-item-category:hover,
+button.big:hover,
+button.big:focus-visible,
+button.icon:focus-visible,
+button.nofill:focus-visible {
+	background-color: color-mix(in srgb, var(--btnr-corFundo, hsl(0 0 50)) 10%, transparent 90%);
+}
+
+.expandedClick:hover {
+	cursor: pointer;
+}
+
+/* FIM DOS HOVER */
+
+button.fill {
+	background-color: var(--btnr-corFundo, var(--sys-background));
+	color: var(--btnr-corFrente, var(--sys-on-background));
+	--ui-cor-icone: var(--btnr-corFrente, var(--sys-on-background));
+}
+
+button.nofill {
+	background-color: var(--ui-background, transparent);
+	color: var(--ui-on-background, var(--btnr-corFundo, var(--sys-on-background)));
+}
+
+button.icon {
+	background-color: transparent;
+	--ui-cor-icone: var(--ui-on-background, var(--btnr-corFundo));
+	/* color: var(--ui-on-background, var(--btnr-corFundo)); */
+	height: var(--ui-height, 100%);
+	min-width: 36px;
+	aspect-ratio: 1 / 1;
+	padding: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+button.outlined {
+	outline: 1px solid var(--ui-outline-color, var(--sys-outline));
+	color: var(--btnr-corFundo);
+	background-color: transparent;
+}
+
+button.menu-item {
+	color: var(--ui-color, var(--sys-on-background));
+	background-color: transparent;
+	border-radius: 0px;
+	padding: var(--ui-padding, 0 16px);
+	height: var(--ui-height, auto);
+	min-height: var(--ui-min-height, 40px);
+	justify-content: var(--ui-justify-content, flex-start);
+}
+
+button.menu-item-category {
+	color: var(--ui-color, var(--sys-on-background));
+	background-color: transparent;
+	border-radius: 0px;
+	padding: var(--ui-padding, 0 16px);
+	height: var(--ui-height, auto);
+	min-height: var(--ui-min-height, 40px);
+	justify-content: var(--ui-justify-content, flex-start);
+}
+
+button.raised {
+	color: var(--btnr-corFundo);
+	background-color: color-mix(in srgb, var(--sys-background) 40%, transparent 60%);
+	box-shadow:
+		2px 2px 4px var(--button-transparency),
+		inset -1px -1px 1px var(--button-transparency);
+}
+
+button.big {
+	background-color: transparent;
+	color: var(--btnr-corFundo);
+	height: var(--ui-height, 100%);
+	padding: var(--ui-padding, 10px);
+}
+
+button.sidebar-item {
+	color: var(--ui-color, var(--sys-on-background));
+	background-color: transparent;
+	border-radius: 0px;
+	padding: var(--ui-padding, 0 16px);
+	height: var(--ui-height, auto);
+	min-height: var(--ui-min-height, 40px);
+	justify-content: var(--ui-justify-content, flex-start);
+	border-top-right-radius: var(--MasterRadius);
+	border-bottom-right-radius: var(--MasterRadius);
+	transition: all 0.3s;
+	outline: none;
+}
+
+button.sidebar-item-category {
+	color: var(--ui-color, var(--sys-on-background));
+	background-color: transparent;
+	border-radius: 0px;
+	padding: var(--ui-padding, 0 16px);
+	height: var(--ui-height, auto);
+	min-height: var(--ui-min-height, 40px);
+	justify-content: var(--ui-justify-content, flex-start);
+	border-top-right-radius: var(--MasterRadius);
+	border-bottom-right-radius: var(--MasterRadius);
+	transition: all 0.3s;
+	outline: none;
+}
+
+
+
+.ripple {
+	position: absolute;
+	border-radius: 50%;
+	background: var(--button-transparency);
+	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;
+	}
+}
+
+.expandedClick {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+	overflow: hidden;
+	border-radius: inherit;
+	/* background-color: red; */
+}
+
+
+.icon .expandedClick {
+	transform: scale(1.1);
+}
+
+.disabled,
+.disabled .expandedClick {
+	pointer-events: none;
+	cursor: default;
+	filter: grayscale(1);
+	opacity: 0.7;
+}
+
+.icone {
+	flex: 0;
+	opacity: var(--ui-opacity, 1);
+	font-size: var(--ui-font-size-icone, var(--ui-font-size));
+	color: var(--ui-cor-icone, var(--btnr-corFundo, var(--sys-on-background)));
+}
+
+.iconeCategory {
+	position: absolute;
+	right: 10px;
+	transition: transform 0.3s;
+}
+
+.ativo {
+	outline: 1px outset var(--sys-high);
+	box-shadow:
+		0 0 1px var(--sys-high),
+		inset 0 0 5px var(--sys-high);
+	border-radius: var(--MasterRadius);
+}
+
+button.sidebar-item.ativo,
+button.sidebar-item-category.ativo {
+	outline: none;
+	box-shadow: none;
+	background-color: color-mix(in srgb, var(--btnr-corFundo, hsl(0 0 50)) 10%, transparent 90%);
+}
+
+button.sidebar-item-category.category.ativo .iconeCategory {
+	transform: rotate(180deg);
+	transition: transform 0.3s;
+}

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

@@ -0,0 +1,12 @@
+<button #botao type="button" [class]="buttonClasses()" [style.--btnr-corFundo]="corFundo()"
+	[style.--btnr-corFrente]="corFrente()" [disabled]="disabled()" [tabIndex]="tabindex()"
+	[class.radiusTabFormat]="radiusTabFormat()" [class.disabled]="disabled()" [class.ativo]="ativo()"
+	(keyup.Enter)="onKeyPressed($event)" [class.category]="isCategory()">
+	@if(icone() && iconeAntes()){ <div class="icone iconeAntes"><i [class]="icone()"></i></div> }
+	<ng-content />
+	@if(icone() && iconeDepois()){ <div class="icone iconeDepois"><i [class]="icone()"></i></div> }
+	@if(isCategory()){ <div class="icone iconeCategory"><i [class]="iconeCategory()"></i></div> }
+	<span #rippleEffect class="expandedClick" (click)="onClickExpanded($event)">
+		<span #ripple class="ripple"></span>
+	</span>
+</button>

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

@@ -0,0 +1,133 @@
+import { Component, computed, effect, ElementRef, input, model, OnInit, output, signal, viewChild } from '@angular/core';
+import { ITipoBotao, ITiposTema } from '../../interfaces/interfaces';
+
+@Component({
+  selector: 'ui-button',
+  templateUrl: './ui-button.html',
+  styleUrl: './ui-button.css',
+})
+export class UiButton {
+
+  botao = viewChild('botao', { read: ElementRef });
+  rippleEffect = viewChild('rippleEffect', { read: ElementRef });
+  ripple = viewChild('ripple', { read: ElementRef });
+
+  icone = model<string | undefined | null>(null);
+  iconeAntes = model<boolean>(true);
+  iconeDepois = model<boolean>(false);
+  iconeCategory = model<string>('fa fa-chevron-right');
+
+  clicked = output<PointerEvent>();
+
+  disabled = input<boolean>();
+  eventPropagation = input<boolean>(false);
+  radiusTabFormat = input<boolean>(false);
+  tabindex = input<number | string>();
+  tipo = input<ITipoBotao | undefined>("fill");
+  tema = model<ITiposTema | undefined>("");
+  classes = input<string>("");
+  ativo = input<boolean>(false);
+
+  isCategory = computed(() => this.tipo() === 'menu-item-category' || this.tipo() === 'sidebar-item-category');
+  buttonClasses = computed(() => {
+    return `btnr ${this.tipo() || 'fill'} ${this.classes()}`;
+  });
+
+  corFundo = signal<string | undefined>(undefined);
+  corFrente = signal<string | undefined>(undefined);
+
+  constructor() {
+    effect(() => {
+      let tema = this.tema();
+      switch (tema) {
+        case "primary":
+          this.corFundo.set(`var(--sys-primary)`);
+          this.corFrente.set(`var(--sys-on-primary)`);
+          break;
+        case "secondary":
+          this.corFundo.set(`var(--sys-secondary)`);
+          this.corFrente.set(`var(--sys-on-secondary)`);
+          break;
+        case "high":
+          this.corFundo.set(`var(--sys-high)`);
+          this.corFrente.set(`var(--sys-on-high)`);
+          break;
+        case "success":
+          this.corFundo.set(`var(--sys-success)`);
+          this.corFrente.set(`var(--sys-on-success)`);
+          break;
+        case "warning":
+          this.corFundo.set(`var(--sys-warning)`);
+          this.corFrente.set(`var(--sys-on-warning)`);
+          break;
+        case "error":
+          this.corFundo.set(`var(--sys-error)`);
+          this.corFrente.set(`var(--sys-on-error)`);
+          break;
+        case "info":
+          this.corFundo.set(`var(--sys-info)`);
+          this.corFrente.set(`var(--sys-on-info)`);
+          break;
+        case "white":
+          this.corFundo.set(`var(--sys-white)`);
+          this.corFrente.set(`var(--sys-on-white)`);
+          break;
+        case "black":
+          this.corFundo.set(`var(--sys-black)`);
+          this.corFrente.set(`var(--sys-on-black)`);
+          break;
+        case "card":
+          this.corFundo.set(`var(--sys-card)`);
+          this.corFrente.set(`var(--sys-on-card)`);
+          break;
+        case "": // Sem Tema     
+        default: // Tema Desconhecido
+          this.corFundo.set(undefined);
+          this.corFrente.set(undefined);
+          break;
+      }
+    });
+  }
+
+
+  onKeyPressed(ev: Event) {
+    this.onClickExpanded(ev as any);
+  }
+
+  onClickExpanded(ev: PointerEvent) {
+    if (this.disabled()) {
+      ev.preventDefault();
+      if (this.eventPropagation()) {
+        ev.stopPropagation();
+      }
+      return;
+    }
+    this.botao()?.nativeElement.focus();
+    if (ev instanceof PointerEvent) {
+      this.createRipple(ev);
+    }
+    this.clicked.emit(ev);
+    if (this.eventPropagation()) {
+      ev.stopPropagation();
+    }
+  }
+
+  createRipple(e: PointerEvent) {
+    const rippleEffect = e.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 = e.clientX - rect.left;
+    const y = e.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');
+    rippleEffect.appendChild(ripple);
+    ripple.addEventListener('animationend', () => {
+      ripple.remove();
+    });
+  }
+}

package/src/elements/ui-check-box/ui-check-box.css

@@ -0,0 +1,66 @@
+:host {
+	display: contents;
+}
+
+.marcador-area {
+	width: var(--ui-size, 22px);
+	height: var(--ui-size, 22px);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	user-select: none;
+	border-radius: 50%;
+	outline: 1px dashed var(--ui-outline, var(--sys-outline));
+	position: relative;
+}
+
+.marcador-area.multiple {
+	border-radius: 4px;
+}
+
+.marcador-area:focus-visible,
+.marcador-area:hover {
+	outline: 1px solid var(--ui-color, var(--sys-primary));
+}
+
+.marcador-area.ativo {
+	outline: 1px solid var(--ui-color, var(--sys-primary));
+}
+
+.marcador-area.ativo .checkmark {
+	display: block;
+}
+
+.marcador-area.disabled {
+	cursor: not-allowed;
+	opacity: 0.6;
+	filter: grayscale(1);
+	pointer-events: none;
+}
+
+.checkmark.simples.ativo {
+	background-color: var(--ui-color, var(--sys-primary));
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	transform: scale(0.75);
+}
+
+.checkmark.multiple.ativo {
+	width: 60%;
+	height: 38%;
+	border-left: 2px solid var(--ui-color, var(--sys-primary));
+	border-bottom: 2px solid var(--ui-color, var(--sys-primary));
+	transform: rotate(-45deg) translateX(1px);
+}
+
+.checkmark.multiple.hasDash:not(.ativo) {
+	width: 60%;
+	height: 2px;
+	background-color: var(--ui-color, var(--sys-primary));
+}
+
+.marcador-area:has(.hasDash:not(.ativo)) {
+	outline: 1px solid var(--ui-outline, var(--sys-outline));
+}

package/src/elements/ui-check-box/ui-check-box.html

@@ -0,0 +1,5 @@
+<div #marcabox class="marcador-area" tabindex="0" (click)="onClickMarcador()" [class.ativo]="ativo()"
+	[class.multiple]="!single()" (focus)="onFocus($event)" (blur)="onBlur($event)" [class.disabled]="disabled()">
+	<div class="checkmark {{ single() ? 'simples' : 'multiple' }}" [class.hasDash]="hasDash()" [class.ativo]="ativo()">
+	</div>
+</div>

package/src/elements/ui-check-box/ui-check-box.ts

@@ -0,0 +1,65 @@
+import { AfterViewInit, Component, computed, effect, ElementRef, input, model, output, viewChild } from '@angular/core';
+
+@Component({
+  selector: 'ui-check-box',
+  templateUrl: './ui-check-box.html',
+  styleUrl: './ui-check-box.css',
+  host: {
+    '[class.focused]': 'focused()',
+  }
+})
+export class UiCheckBox implements AfterViewInit {
+
+  marcabox = viewChild('marcabox', { read: ElementRef });
+
+  value = model<boolean>(false);
+  disabled = input<boolean>();
+  focused = model<boolean>(false);
+  focus = input<boolean>(false);
+  changed = output<boolean>();
+  single = input<boolean>(false);
+  hasDash = input<boolean>(false);
+
+  ativo = computed(() => {
+    const val = (this.value() as any);
+    return val === true || val === 'true' || val === 1 || val === '1';
+  });
+
+  constructor() {
+    effect(() => {
+      if (this.focus()) {
+        this.marcabox()?.nativeElement.focus();
+      }
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this.marcabox()?.nativeElement.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault();
+        this.onClickMarcador();
+      }
+    });
+  }
+
+  onClickMarcador() {
+    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);
+  }
+
+
+}

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

@@ -0,0 +1,24 @@
+:host {
+	display: var(--ui-display, contents);
+}
+
+.baseChip {
+	display: inline-block;
+	font-weight: 500;
+	white-space: nowrap;
+	user-select: none;
+	vertical-align: middle;
+	line-height: 1;
+	outline-offset: -2px;
+	padding: 4px 7px;
+	color: white;
+	letter-spacing: 1.1px;
+	text-transform: uppercase;
+	font-family: monospace;
+	font-size: 12px;
+	border-radius: var(--MasterRadius);
+
+	outline: 1px solid hsl(var(--ChipHue) 50 var(--lightnessHalf) / 50%);
+	color: hsl(var(--ChipHue) 50 var(--lightnessHalf));
+	background-color: hsl(var(--ChipHue) 50 50 / 10%);
+}

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

@@ -0,0 +1,3 @@
+<span class="baseChip" [style.--ChipHue]="hue() ?? 'var(--sys-hue-color1)'">
+	<ng-content></ng-content>
+</span>