@masterkeymaterial/ui 0.0.2 → 0.0.4

package/ng-package.json

@@ -1,10 +0,0 @@
-{
-    "$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/src/elements/ui-button/ui-button.css

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

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

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

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

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

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

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

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

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

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

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

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