@masterkeymaterial/ui 0.0.2 → 0.0.3

package/src/fields/autocomplete/autocomplete.ts

@@ -1,294 +0,0 @@
-import { Component, computed, effect, ElementRef, HostListener, inject, OnDestroy, signal, viewChild } from '@angular/core';
-import { computePosition, flip, offset, shift } from '@floating-ui/dom';
-import { LibUtil, LOG } from '../../util/util';
-import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
-import { IKV } from '../../interfaces/interfaces';
-import { UiListErrors } from "../../elements/ui-list-errors/ui-list-errors";
-
-export interface IKVAutoCompletador extends IKV {
-  selected: boolean;
-  choosing: boolean;
-}
-
-@Component({
-  selector: 'fields-autocomplete',
-  templateUrl: './autocomplete.html',
-  styleUrls: ['../fields.css', './autocomplete.css'],
-  imports: [UiListErrors],
-})
-export class FieldsAutocomplete extends BaseFieldsForm implements OnDestroy {
-
-  elementRef: ElementRef = inject(ElementRef);
-
-  isOpenedOptions = signal(false);
-  markedOptionKey = signal<string | number | null | undefined>(null);
-
-  options = computed<IKVAutoCompletador[]>(() => {
-    const options = this.campo()?.options?.() || [];
-    // Autocompletar não exibe opções sem valor
-    return options.filter((op: IKV) => op.v != null && op.v !== '').map((op: IKV) => ({
-      ...op,
-      selected: op.k === this.value(),
-      choosing: op.k === this.markedOptionKey()
-    }));
-  });
-  optionsFiltered = computed<IKVAutoCompletador[]>(() => {
-    let words = this.value()?.toString().trim().split(" ").filter((t: string) => t != "");
-    const options = (this.options() || []).map(o => ({ ...o, html: o.v || `⚠️ Chave: ${o.k}` }));
-    // Sem filtro, retorna tudo
-    if (words.length === 0) return options;
-
-    return options.filter(op => {
-      for (const w of words) {
-        let encontrado = false;
-        if (op.v != null && LibUtil.contem(op.v, w)) {
-          encontrado = true;
-        }
-
-        // Termo não encontrado na opção
-        if (!encontrado) return false;
-      }
-
-      // Todos os termos encontrados
-      return true;
-    }).map(op => {
-      let data = op.v?.toString() || '';
-      // Substitui o valor do html, colocando uma mark em volta do texto buscado.
-      if (words.length > 0) {
-        for (let word of words) {
-          let w = word.toLowerCase();
-          let preparedData = LibUtil.removeAcentos(data).toLowerCase();
-          if (w != "" && preparedData.includes(w)) {
-            // Se w estiver dentro de < ou >, ignora (para não interferir em tags HTML)
-            if (new RegExp(`<[^>]*${w}[^>]*>`, 'i').test(preparedData.toString())) continue;
-            // Se a palavra for encontrada, envolve com a tag <mark>
-            let pos = preparedData.indexOf(w);
-            data = data.slice(0, pos)
-              + "<mark>"
-              + data.slice(pos, pos + w.length)
-              + "</mark>"
-              + data.slice(pos + w.length);
-            data = data.replaceAll("</mark><mark>", "");
-          }
-        };
-      }
-
-      return {
-        ...op,
-        html: data,
-      };
-    });
-  });
-
-  readonly displayText = viewChild<ElementRef>('displayText');
-  readonly triggerElement = viewChild<ElementRef>('triggerElement');
-  readonly optionsContainer = viewChild<ElementRef>('optionsContainer');
-  offsetWidth = signal<number>(0);
-  menuPosition = signal<{ top: string; left: string }>({ top: '0px', left: '0px' });
-
-  scrollCleanup: (() => void) | null = null;
-
-  constructor() {
-    super();
-    effect(() => {
-      const val = this.value();
-      let empty = val === null || val === undefined || val === '';
-      this.updateCampo({ empty });
-    });
-    effect(() => {
-      const el = this.triggerElement()?.nativeElement as HTMLElement;
-      if (!el) return;
-
-      const resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          this.offsetWidth.set(entry.target.clientWidth - 4); // -4 para compensar borda
-        }
-        // Atualiza a posição do menu quando redimensiona
-        if (this.isOpenedOptions()) {
-          this.updatePosition();
-        }
-      });
-      resizeObserver.observe(el);
-      return () => resizeObserver.disconnect();
-    });
-
-    // Atualiza posição quando o menu abre
-    effect(() => {
-      if (this.isOpenedOptions()) {
-        setTimeout(() => {
-          this.updatePosition();
-          this.setupScrollListeners();
-        }, 1);
-      } else {
-        this.cleanupScrollListeners();
-      }
-    });
-  }
-  override ngOnDestroy() {
-    super.ngOnDestroy();
-    this.closeOverlay();
-    this.cleanupScrollListeners();
-  }
-
-  onInput(newValue: string) {
-    if (newValue != "") {
-      this.isOpenedOptions.set(true);
-    } else {
-      this.isOpenedOptions.set(false);
-    }
-    if (this.campo()?.mask) newValue = LibUtil.mascarar(newValue, this.campo()?.mask) ?? '';
-    if (this.campo()?.onMatchOption) {
-      let option = this.campo()?.options?.()?.find((op: IKV) => op.v === newValue);
-      try {
-        this.campo()?.onMatchOption?.(this.form(), option);
-      } catch (err) {
-        LOG(1, `❌ Erro ao executar onMatchOption do campo '${this.name.toString()}'`, err);
-      }
-    }
-    this.updateValue(newValue);
-    this.campo()?.onInput?.(this.form());
-  }
-
-  override onClickLabel() {
-    super.onClickLabel();
-    this.closeOverlay();
-  }
-
-  // Fecha o overlay de opções
-  protected closeOverlay() {
-    this.isOpenedOptions.set(false);
-    this.markedOptionKey.set(null);
-  }
-
-  // Seleciona uma opção
-  onSelectOption(option?: IKV) {
-    if (!option || option.k == null) {
-      LOG(1, `❌ Chave nula (${option?.k}, classof: '${LibUtil.classof(option?.k)}'). Valor corresponde ${option?.v}`);
-      return;
-    }
-    this.onInput(option.v?.toString() ?? '');
-    this.closeOverlay();
-  }
-
-  // Navegação por teclado
-  markKey(event: KeyboardEvent) {
-    const options = this.optionsFiltered();
-    if (options.length === 0) return;
-    let currentIndex = options.findIndex(op => op.k === this.markedOptionKey());
-    let currentKV = options.find(op => op.k === this.markedOptionKey());
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      this.isOpenedOptions.set(true);
-      currentIndex = (currentIndex + 1) % options.length;
-      this.markedOptionKey.set(options[currentIndex].k);
-      this.moveScrollToMarkedOption();
-    } else if (event.key === 'ArrowUp') {
-      event.preventDefault();
-      this.isOpenedOptions.set(true);
-      currentIndex = (currentIndex - 1 + options.length) % options.length;
-      this.markedOptionKey.set(options[currentIndex].k);
-      this.moveScrollToMarkedOption();
-    } else if (event.key === 'Enter') {
-      event.preventDefault();
-      if (this.markedOptionKey() != null) {
-        this.onSelectOption(currentKV);
-      }
-      this.closeOverlay();
-    }
-  }
-
-
-  // ----------------------------------------------------
-  // Funções de Suporte ao Overlay
-  // ----------------------------------------------------
-
-  // Fecha o overlay ao clicar fora
-  @HostListener('document:click', ['$event'])
-  onDocumentClick(event: MouseEvent): void {
-    const clickedInside = this.elementRef.nativeElement.contains(event.target);
-    if (!clickedInside && this.isOpenedOptions()) {
-      this.isOpenedOptions.set(false);
-      this.markedOptionKey.set(null);
-    }
-  }
-
-  // Configura os listeners de scroll
-  private setupScrollListeners() {
-    const trigger = this.triggerElement()?.nativeElement;
-    if (!trigger) return;
-
-    const updatePositionHandler = () => this.updatePosition();
-    const scrollElements: HTMLElement[] = [];
-    window.addEventListener('scroll', updatePositionHandler, { passive: true });
-    let parent = trigger.parentElement;
-    while (parent) {
-      const overflow = window.getComputedStyle(parent).overflow;
-      const overflowY = window.getComputedStyle(parent).overflowY;
-      const overflowX = window.getComputedStyle(parent).overflowX;
-      if (
-        overflow === 'auto' || overflow === 'scroll' ||
-        overflowY === 'auto' || overflowY === 'scroll' ||
-        overflowX === 'auto' || overflowX === 'scroll'
-      ) {
-        parent.addEventListener('scroll', updatePositionHandler, { passive: true });
-        scrollElements.push(parent);
-      }
-      parent = parent.parentElement;
-    }
-    this.scrollCleanup = () => {
-      window.removeEventListener('scroll', updatePositionHandler);
-      scrollElements.forEach(el => {
-        el.removeEventListener('scroll', updatePositionHandler);
-      });
-    };
-  }
-
-  // Limpa os listeners de scroll
-  private cleanupScrollListeners() {
-    if (this.scrollCleanup) {
-      this.scrollCleanup();
-      this.scrollCleanup = null;
-    }
-  }
-
-  // Atualiza a posição do menu de opções
-  private async updatePosition() {
-    const trigger = this.triggerElement()?.nativeElement;
-    const optionsContainer = this.optionsContainer()?.nativeElement;
-    if (!trigger || !optionsContainer) return;
-    const { x, y } = await computePosition(trigger, optionsContainer, {
-      placement: 'bottom-start',
-      middleware: [
-        offset(2),
-        flip({
-          fallbackPlacements: ['top-start', 'bottom-end', 'top-end'],
-        }),
-        shift({ padding: 10 }),
-      ],
-    });
-    this.menuPosition.set({
-      left: `${x}px`,
-      top: `${y}px`
-    });
-  }
-
-  // Move o scroll para a opção marcada
-  private moveScrollToMarkedOption() {
-    setTimeout(() => {
-      const optionsContainer = this.optionsContainer()?.nativeElement?.querySelector(".options-list") as HTMLElement;
-      const markedOption = optionsContainer?.querySelector('.option-item.choosing') as HTMLElement;
-      if (optionsContainer && markedOption) {
-        const containerTop = optionsContainer.scrollTop;
-        const containerBottom = containerTop + optionsContainer.clientHeight;
-        const optionTop = markedOption.offsetTop;
-        const optionBottom = optionTop + markedOption.offsetHeight;
-        if (optionTop < containerTop) {
-          optionsContainer.scrollTop = optionTop - 40; // 40px do elemento Search
-        } else if (optionBottom > containerBottom) {
-          optionsContainer.scrollTop = optionBottom - optionsContainer.clientHeight;
-        }
-      }
-    }, 1);
-  }
-
-}

package/src/fields/button/button.css

@@ -1,7 +0,0 @@
-.fieldField.FieldButton {
-	border: none;
-}
-
-.FieldButton ui-button {
-	width: 100%;
-}

package/src/fields/button/button.html

@@ -1,19 +0,0 @@
-<div class="fieldContainer" [class.isTouched]="campo()?.touched" [class.showTouched]="form().showTouched()"
-	[class.isInvalid]="campo()?.invalid" [class.isDisabled]="campo()?.disabled" [class.isReadonly]="campo()?.readonly"
-	[class.isNeed]="campo()?.need" [class.isPending]="campo()?.pending" [class.isEmpty]="campo()?.empty">
-	<div class="fieldLabel" (click)="onClickLabel()" [class.hideLabel]="campo()?.hideLabel">
-		@if(campo()?.icone){ <div class="fieldIcon"><i [class]="campo()?.icone"></i></div> }
-		{{ campo()?.titulo ?? '&nbsp;' }}
-	</div>
-	<div class="fieldControl doCampo">
-		<div class="fieldEffect">
-			<div class="fieldField FieldButton">
-				<ui-button [tipo]="campo()?.tipoBotao" [tema]="campo()?.tema" [style]="campo()?.style"
-					(click)="onClickButton($event)" [disabled]="campo()?.disabled" [icone]="campo()?.icone">
-					<div [innerHTML]="campo()?.tituloClicavel"></div>
-				</ui-button>
-			</div>
-		</div>
-	</div>
-	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
-</div>

package/src/fields/button/button.ts

@@ -1,38 +0,0 @@
-import { Component, effect } from '@angular/core';
-import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
-import { UiButton } from "../../elements/ui-button/ui-button";
-import { UiListErrors } from "../../elements/ui-list-errors/ui-list-errors";
-import { LOG } from '../../util/util';
-
-@Component({
-  selector: 'fields-button',
-  templateUrl: './button.html',
-  styleUrls: ['../fields.css', './button.css'],
-  imports: [UiButton, UiListErrors]
-})
-export class FieldsButton extends BaseFieldsForm {
-
-  constructor() {
-    super();
-    effect(() => {
-      const val = this.value();
-      let empty = val === null || val === undefined || val === '';
-      this.updateCampo({ empty });
-    });
-  }
-
-  onClickButton(ev: Event) {
-    this.tocarCampo();
-    if (this.campo()?.onClick) {
-      try {
-        this.campo()?.onClick?.(this.form());
-      } catch (err) {
-        LOG(1, '❌ Erro ao executar onClick do botão:', err);
-      }
-    }
-    this.campo()?.onInput?.(this.form());
-    this.onChangeEmit();
-  }
-
-
-}

package/src/fields/checkbox/checkbox.css

@@ -1,27 +0,0 @@
-.FieldCheckbox {
-	padding-left: 10px;
-	display: flex;
-	flex-wrap: nowrap;
-	align-items: center;
-	transition: outline 0s;
-	transition-delay: 0.2s;
-}
-
-.tituloClicavel {
-	display: flex;
-	align-items: center;
-	padding-left: 10px;
-	padding-right: 10px;
-	font-size: 0.875rem;
-	cursor: pointer;
-	user-select: none;
-	flex: 1;
-	line-height: 30px;
-	text-align: var(--ui-text-align, center);
-}
-
-.FieldCheckbox:has(ui-check-box.focused) {
-	outline: 2px solid var(--sys-primary);
-	transition: outline 0s;
-
-}

package/src/fields/checkbox/checkbox.html

@@ -1,20 +0,0 @@
-<div class="fieldContainer" [class.isTouched]="campo()?.touched" [class.showTouched]="form().showTouched()"
-	[class.isInvalid]="campo()?.invalid" [class.isDisabled]="campo()?.disabled" [class.isReadonly]="campo()?.readonly"
-	[class.isNeed]="campo()?.need" [class.isPending]="campo()?.pending" [class.isEmpty]="campo()?.empty">
-	<div class="fieldLabel" (click)="onClickLabel()" [class.hideLabel]="campo()?.hideLabel">
-		@if(campo()?.icone){ <div class="fieldIcon"><i [class]="campo()?.icone"></i></div> }
-		{{ campo()?.titulo }}
-	</div>
-	<div class="fieldControl doCampo">
-		<div class="fieldEffect">
-			<div class="fieldField FieldCheckbox microPos4">
-				<ui-check-box [value]="value()" (changed)="onChange($event)" [focus]="signalFocus()"></ui-check-box>
-				<div class="tituloClicavel" (click)="toogleAtivo()">
-					{{ value() ? (campo()?.textoAtivo ?? campo()?.tituloClicavel ) : (campo()?.textoInativo ??
-					campo()?.tituloClicavel) }}
-				</div>
-			</div>
-		</div>
-	</div>
-	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
-</div>

package/src/fields/checkbox/checkbox.ts

@@ -1,44 +0,0 @@
-import { Component, effect, signal } from '@angular/core';
-import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
-import { UiCheckBox } from "../../elements/ui-check-box/ui-check-box";
-import { UiListErrors } from "../../elements/ui-list-errors/ui-list-errors";
-
-@Component({
-  selector: 'fields-checkbox',
-  templateUrl: './checkbox.html',
-  styleUrls: ['../fields.css', './checkbox.css'],
-  imports: [UiCheckBox, UiListErrors],
-})
-export class FieldsCheckbox extends BaseFieldsForm {
-
-  signalFocus = signal<boolean>(false);
-
-  constructor() {
-    super();
-    effect(() => {
-      const val = this.value();
-      let empty = val === null || val === undefined || val === '';
-      this.updateCampo({ empty });
-    });
-  }
-
-  onChange(newValue: boolean) {
-    this.updateValue(newValue);
-    this.campo()?.onInput?.(this.form());
-    this.onChangeEmit();
-  }
-
-  ngAfterViewInit(): void {
-    let val = this.value();
-    this.updateValue(val === true || val === 'true' || val === 1 || val === '1', false);
-  }
-
-  toogleAtivo() {
-    this.onChange(!this.value());
-    this.signalFocus.set(true);
-    setTimeout(() => {
-      this.signalFocus.set(false);
-    }, 1)
-  }
-
-}

package/src/fields/color/CirculoColorido/circulocolorido.css

@@ -1,50 +0,0 @@
-.container {
-	position: relative;
-	display: flex;
-	height: 60px;
-	aspect-ratio: 1 / 1;
-}
-
-.circulo {
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 100%;
-	width: 100%;
-	background: conic-gradient(hsl(0 100% 50%),
-			hsl(60 100% 50%),
-			hsl(120 100% 50%),
-			hsl(180 100% 50%),
-			hsl(240 100% 50%),
-			hsl(300 100% 50%),
-			hsl(360 100% 50%));
-	clip-path: circle(closest-side);
-	mask: radial-gradient(circle at center, transparent 20%, black 35%, black 55%, transparent 70%, transparent 100%);
-	transition: 200ms ease-in-out;
-}
-
-.circulo.hide {
-	opacity: 0.2;
-	mask: radial-gradient(circle at center, transparent 30%, black 50%, transparent 70%);
-	transition: 200ms ease-in-out;
-}
-
-.arrow {
-	position: absolute;
-	border-radius: 50%;
-	top: calc(50% - 10px);
-	left: calc(50% - 10px);
-	height: 20px;
-	width: 20px;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	transition: 0.3s;
-	font-size: 24px;
-	transform: rotate(var(--arrowAngle));
-	z-index: 2;
-}
-
-.arrow i {
-	color: hsl(var(--atualColor) 100% 50%);
-}

package/src/fields/color/CirculoColorido/circulocolorido.html

@@ -1,8 +0,0 @@
-<div class="container" [style.--atualColor]="angle()">
-	<div class="circulo {{ angle() != null ? 'show' : 'hide' }}"></div>
-	@if(angle() != null){
-	<div class="arrow" [style.--arrowAngle]="(angle()! - 47) + 'deg'">
-		<i class="bi bi-cursor-fill"></i>
-	</div>
-	}
-</div>

package/src/fields/color/CirculoColorido/circulocolorido.ts

@@ -1,24 +0,0 @@
-import { Component, computed, input } from '@angular/core';
-import { LibUtil } from '../../../util/util';
-
-@Component({
-  selector: 'field-color-circulocolorido',
-  templateUrl: './circulocolorido.html',
-  styleUrls: ['./circulocolorido.css'],
-})
-export class CirculoColorido {
-
-  valor = input<string | number | null>(null);
-
-  angle = computed<number | null>(() => {
-    let angle = this.valor();
-    if (!angle) return null;
-    if (LibUtil.classof(angle) === 'string') {
-      let num = Number(angle);
-      if (isNaN(num)) return 0;
-      angle = num;
-    }
-    return angle as number | null;
-  });
-
-}

package/src/fields/color/color.css

@@ -1,15 +0,0 @@
-.fieldComRange {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	gap: 0.5rem;
-	flex-direction: column;
-}
-
-input[type="range"] {
-	opacity: 0.7;
-}
-
-input[type="range"]:disabled {
-	opacity: 0.1;
-}

package/src/fields/color/color.html

@@ -1,24 +0,0 @@
-<div class="fieldContainer" [class.isTouched]="campo()?.touched" [class.showTouched]="form().showTouched()"
-	[class.isInvalid]="campo()?.invalid" [class.isDisabled]="campo()?.disabled" [class.isReadonly]="campo()?.readonly"
-	[class.isNeed]="campo()?.need" [class.isPending]="campo()?.pending" [class.isEmpty]="campo()?.empty">
-	<div class="fieldLabel" (click)="onClickLabel()" [class.hideLabel]="campo()?.hideLabel">
-		@if(campo()?.icone){ <div class="fieldIcon"><i [class]="campo()?.icone"></i></div> }
-		{{ campo()?.titulo }}
-	</div>
-	<div class="fieldControl doCampo">
-		<field-color-circulocolorido [valor]="value()"></field-color-circulocolorido>
-		<div class="fieldComRange">
-			<div class="fieldEffect">
-				<div class="fieldField FieldColor">
-					<input type="number" [value]="value()" (input)="onInput($event.target.value)" (change)="onChangeEmit()"
-						[name]="campo()?.prop" [disabled]="campo()?.disabled" [placeholder]="campo()?.placeholder ?? ''"
-						[attr.maxLength]="campo()?.maxl" [attr.minLength]="campo()?.minl" [class]="campo()?.classe"
-						[style]="campo()?.style" min="0" max="360" [class.outlined]="true" [class.input]="true" />
-				</div>
-			</div>
-			<input type="range" [value]="value() ?? 0" (input)="onInputRange($event)" min="0" max="360"
-				[disabled]="campo()?.disabled" (change)="onChangeEmit()" />
-		</div>
-	</div>
-	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
-</div>

package/src/fields/color/color.ts

@@ -1,47 +0,0 @@
-import { Component, effect, OnInit } from '@angular/core';
-import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
-import { CirculoColorido } from './CirculoColorido/circulocolorido';
-import { UiListErrors } from "../../elements/ui-list-errors/ui-list-errors";
-
-@Component({
-  selector: 'fields-color',
-  templateUrl: './color.html',
-  styleUrls: ['../fields.css', './color.css'],
-  imports: [CirculoColorido, UiListErrors],
-})
-export class FieldsColor extends BaseFieldsForm implements OnInit {
-
-  constructor() {
-    super();
-    effect(() => {
-      const val = this.value();
-      let empty = val === null || val === undefined || val === '' || val === 0;
-      // if (val && LibUtil.classof(val) === 'number' && (val < 0 || val > 360)) {
-      //   errors = [...errors, Valide.msg.apenasEntre(0, 360)];
-      // }
-      this.updateCampo({ empty });
-    });
-  }
-
-  override ngOnInit() {
-    super.ngOnInit();
-    this.onInput(this.value(), false);
-  }
-
-  onInput(newValue: string, touch: boolean = true) {
-    let num = Number(newValue);
-    if (isNaN(num)) num = 0;
-    this.updateValue(num, touch);
-    this.campo()?.onInput?.(this.form());
-  }
-
-  onInputRange(event: any) {
-    let num = Number(event.target.value);
-    if (isNaN(num)) num = 0;
-    if (num < 0) num = 0;
-    if (num > 360) num = 360;
-    this.updateValue(num);
-    this.campo()?.onInput?.(this.form());
-  }
-
-}

package/src/fields/date/date.html

@@ -1,19 +0,0 @@
-<div class="fieldContainer" [class.isTouched]="campo()?.touched" [class.showTouched]="form().showTouched()"
-	[class.isInvalid]="campo()?.invalid" [class.isDisabled]="campo()?.disabled" [class.isReadonly]="campo()?.readonly"
-	[class.isNeed]="campo()?.need" [class.isPending]="campo()?.pending" [class.isEmpty]="campo()?.empty">
-	<div class="fieldLabel" (click)="onClickLabel()" [class.hideLabel]="campo()?.hideLabel">
-		@if(campo()?.icone){ <div class="fieldIcon"><i [class]="campo()?.icone"></i></div> }
-		{{ campo()?.titulo }}
-	</div>
-	<div class="fieldControl doCampo">
-		<div class="fieldEffect">
-			<div class="fieldField FieldDate">
-				<input type="date" [value]="value()" (input)="onInput($event.target.value)" (change)="onChangeEmit()"
-					[name]="campo()?.prop" [disabled]="campo()?.disabled" [placeholder]="campo()?.placeholder ?? ''"
-					[attr.maxLength]="campo()?.maxl" [attr.minLength]="campo()?.minl" [class]="campo()?.classe"
-					[style]="campo()?.style" [class.outlined]="true" [class.input]="true" />
-			</div>
-		</div>
-	</div>
-	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
-</div>

package/src/fields/date/date.ts

@@ -1,29 +0,0 @@
-import { Component, effect } from '@angular/core';
-import { LibUtil } from '../../util/util';
-import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
-import { UiListErrors } from "../../elements/ui-list-errors/ui-list-errors";
-
-@Component({
-  selector: 'fields-date',
-  templateUrl: './date.html',
-  styleUrls: ['../fields.css'],
-  imports: [UiListErrors],
-})
-export class FieldsDate extends BaseFieldsForm {
-
-  constructor() {
-    super();
-    effect(() => {
-      const val = this.value();
-      let empty = val === null || val === undefined || val === '';
-      this.updateCampo({ empty });
-    });
-  }
-
-  onInput(newValue: string) {
-    if (this.campo()?.mask) newValue = LibUtil.mascarar(newValue, this.campo()?.mask) ?? '';
-    this.updateValue(newValue);
-    this.campo()?.onInput?.(this.form());
-  }
-
-}