@masterkeymaterial/ui 0.0.1 → 0.0.2

package/src/fields/multitext/multitext.ts

@@ -0,0 +1,75 @@
+import { Component, effect, OnInit } 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";
+
+@Component({
+  selector: 'fields-multitext',
+  templateUrl: './multitext.html',
+  styleUrls: ['../fields.css', './multitext.css'],
+  imports: [UiButton, UiListErrors],
+})
+export class FieldsMultiText extends BaseFieldsForm implements OnInit {
+
+  items: string[] | null = [];
+
+  constructor() {
+    super();
+    effect(() => {
+      const val = this.value();
+      let empty = val === null || val === undefined || val === '';
+      if (val && Array.isArray(val) && val.length <= 0) empty = true;
+      // if (!Array.isArray(val)) errors = [...errors, Valide.msg.apenasLista];
+      this.updateCampo({ empty });
+    });
+  }
+
+  override ngOnInit() {
+    super.ngOnInit();
+    let value = this.value();
+    if (value && Array.isArray(value)) this.items = value ?? [];
+    else this.items = [];
+  }
+
+  ngAfterViewInit(): void {
+    this.updateValue(this.items ?? [], false);
+  }
+
+  onInput(newValue: string) {
+    this.updateValue(newValue);
+    this.campo()?.onInput?.(this.form());
+    this.onChangeEmit();
+  }
+
+  onClickAddItem() {
+    let value = "";
+    if (!this.items) this.items = [];
+    this.items = [...this.items, value];
+    this.updateValue(this.items);
+    this.campo()?.onInput?.(this.form());
+    this.onChangeEmit();
+
+    setTimeout(() => {
+      let allInputs = (document.querySelectorAll(`.FieldMultiText .input`) as NodeListOf<HTMLInputElement> | null);
+      if (allInputs && allInputs.length > 0) {
+        allInputs[allInputs.length - 1].focus();
+      }
+    }, 1);
+  }
+
+  onClickDelItem(index: number) {
+    this.items = this.items?.filter((v, i) => i != index) ?? [];
+    if (this.items && this.items?.length <= 0) this.items = [];
+    this.updateValue(this.items);
+    this.campo()?.onInput?.(this.form());
+    this.onChangeEmit();
+  }
+
+  _onLocalInput(value: string, index: number) {
+    if (this.items) this.items[index] = value;
+    this.updateValue(this.items);
+    this.campo()?.onInput?.(this.form());
+    this.onChangeEmit();
+  }
+
+}

package/src/fields/number/number.html

@@ -0,0 +1,20 @@
+<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 FieldText">
+				<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" [readOnly]="campo()?.readonly ?? false" [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/number/number.ts

@@ -0,0 +1,35 @@
+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-number',
+  templateUrl: './number.html',
+  styleUrls: ['../fields.css'],
+  imports: [UiListErrors],
+})
+export class FieldsNumber extends BaseFieldsForm {
+
+  constructor() {
+    super();
+    effect(() => {
+      const val = this.value();
+      let empty = val === null || val === undefined || val === '' || val === 0;
+      this.updateCampo({ empty });
+    });
+  }
+
+  ngAfterViewInit(): void {
+    this.onInput(this.value(), false);
+  }
+
+  onInput(newValue: string, touch: boolean = true) {
+    if (this.campo()?.mask) newValue = LibUtil.mascarar(newValue, this.campo()?.mask) ?? '';
+    let num = parseFloat(newValue);
+    if (isNaN(num)) num = 0;
+    this.updateValue(num, touch);
+    this.campo()?.onInput?.(this.form());
+  }
+
+}

package/src/fields/password/password.html

@@ -0,0 +1,23 @@
+<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 FieldPassword">
+				<input [type]="hide() ? 'password' : 'text'" [value]="value()" (input)="onInput($event.target.value)"
+					(change)="onChangeEmit()" [name]="campo()?.prop" [disabled]="campo()?.disabled"
+					[placeholder]="campo()?.placeholder ?? ''" [class]="campo()?.classe" [style]="campo()?.style"
+					[attr.maxLength]="campo()?.maxl" [attr.minLength]="campo()?.minl" [class.outlined]="true"
+					[class.input]="true" />
+				<ui-button tipo="icon" tema="primary" (click)="_aoClicarVerSenha($event)" aria-label="Oculta ou Exibe Senha"
+					title="Oculta ou Exibe Senha" [aria-pressed]="hide()"><i
+						[class]="hide() ? 'bi bi-eye-slash-fill' : 'bi bi-eye-fill'"></i></ui-button>
+			</div>
+		</div>
+	</div>
+	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
+</div>

package/src/fields/password/password.ts

@@ -0,0 +1,37 @@
+import { Component, effect, signal } from '@angular/core';
+import { LibUtil } from '../../util/util';
+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";
+
+@Component({
+  selector: 'fields-password',
+  templateUrl: './password.html',
+  styleUrls: ['../fields.css'],
+  imports: [UiButton, UiListErrors],
+})
+export class FieldsPassword 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());
+  }
+
+  // Exibir e Ocultar Senha
+  hide = signal(true);
+  _aoClicarVerSenha(event: MouseEvent) {
+    this.hide.set(!this.hide());
+    event.stopPropagation();
+  }
+}
+

package/src/fields/search/search.html

@@ -0,0 +1,19 @@
+<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"
+	[class.isCollapsed]="isCollapsed()">
+	<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 FieldSearch">
+				<ui-procurar [value]="value()" [name]="campo()?.prop" (inputed)="onInput($event)" (changed)="onChangeEmit()"
+					[colapsed]="isCollapsed()" [disabled]="campo()?.disabled"
+					[placeholder]="campo()?.placeholder ?? 'Procurar...'"></ui-procurar>
+			</div>
+		</div>
+	</div>
+	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
+</div>

package/src/fields/search/search.ts

@@ -0,0 +1,54 @@
+import { Component, computed, effect, ElementRef, viewChild } from '@angular/core';
+import { UiListErrors } from "../../elements/ui-list-errors/ui-list-errors";
+import { UiProcurar } from "../../elements/ui-procurar/ui-procurar";
+import { LibUtil } from '../../util/util';
+import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
+
+@Component({
+  selector: 'fields-search',
+  templateUrl: './search.html',
+  styleUrls: ['../fields.css', './search.css'],
+  imports: [UiListErrors, UiProcurar],
+})
+export class FieldsSearch extends BaseFieldsForm {
+
+  readonly searchInput = viewChild<ElementRef>('searchInput');
+
+  isCollapsed = computed(() => this.campo()?.isCollapsed?.() ?? false);
+
+  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());
+  }
+
+  // Limpa o filtro de opções
+  onClearSearch() {
+    this.updateValue("");
+    this.focusSearchInput();
+    this.campo()?.onInput?.(this.form());
+    this.onChangeEmit();
+  }
+
+  focusSearchInput() {
+    this.searchInput()?.nativeElement?.focus();
+  }
+
+  onClickSearchIcon() {
+    this.focusSearchInput();
+    this.onChangeEmit();
+  }
+
+  onSearch() {
+    this.onChangeEmit();
+  }
+}

package/src/fields/select/select.css

@@ -0,0 +1,15 @@
+.FieldSelect {
+	width: 100%;
+	padding: 0 4px 0 8px;
+}
+
+.FieldSelect ui-select {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.fieldField:has(ui-select.opened) {
+	outline: 2px solid var(--campoCor);
+}

package/src/fields/select/select.html

@@ -0,0 +1,18 @@
+<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 FieldSelect">
+				<ui-select [value]="this.value()" [options]="fieldOptions()" (changed)="onChange($event)"
+					[multiple]="this.campo()?.multiple ?? false" [name]="this.campo()?.prop" [textEmpty]="this.campo()?.textEmpty"
+					[canUnselect]="campo()?.canUnselect"></ui-select>
+			</div>
+		</div>
+	</div>
+	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
+</div>

package/src/fields/select/select.ts

@@ -0,0 +1,52 @@
+import { Component, computed, effect, OnInit, signal } from '@angular/core';
+import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
+import { UiSelect } from '../../elements/ui-select/ui-select';
+import { IOptionValue } from '../../elements/ui-select/ui-select';
+import { UiListErrors } from "../../elements/ui-list-errors/ui-list-errors";
+import { LOG } from '../../util/util';
+
+
+@Component({
+  selector: 'fields-select',
+  templateUrl: './select.html',
+  styleUrls: ['../fields.css', './select.css'],
+  imports: [UiSelect, UiListErrors],
+})
+export class FieldsSelect extends BaseFieldsForm {
+
+
+  constructor() {
+    super();
+    effect(() => {
+      const val = this.value();
+      let empty = val === null || val === undefined || val === '';
+      this.updateCampo({ empty });
+    });
+  }
+  // Um Refill pode estar em andamento enquanto este componente é iniciado.
+  // Utilize o campo.mapear ou campo.refill para alterar o comportamento do refill inicial.
+
+
+  fieldOptions = computed(() => {
+    return this.campo()?.options?.() ?? [];
+  });
+
+
+  // Manipula mudança de valor (valueOfK não chegará nulo ou undefined)
+  onChange(optionValue: IOptionValue) {
+    let newValue: any = optionValue.keys;
+
+    if (this.campo()?.onMatchOption && optionValue.optionChanged) {
+      try {
+        this.campo()?.onMatchOption?.(this.form(), optionValue.optionChanged);
+      } catch (err) {
+        LOG(1, `❌ Erro ao executar onMatchOption do campo '${this.name()}'`, err);
+      }
+    }
+
+    this.updateValue(newValue);
+    this.campo()?.onInput?.(this.form());
+    this.onChangeEmit();
+  }
+
+}

package/src/fields/slide/slide.css

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

package/src/fields/slide/slide.html

@@ -0,0 +1,20 @@
+<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 FieldSlide microPos4">
+				<ui-slide [value]="value()" (changed)="onChange($event)" [focus]="signalFocus()"></ui-slide>
+				<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/slide/slide.ts

@@ -0,0 +1,45 @@
+import { AfterViewInit, Component, effect, signal } from '@angular/core';
+import { UiSlide } from '../../elements/ui-slide/ui-slide';
+import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
+import { UiListErrors } from "../../elements/ui-list-errors/ui-list-errors";
+
+@Component({
+  selector: 'fields-slide',
+  templateUrl: './slide.html',
+  styleUrls: ['../fields.css', './slide.css'],
+  imports: [UiSlide, UiListErrors],
+})
+export class FieldsSlide extends BaseFieldsForm implements AfterViewInit {
+
+  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/text/text.html

@@ -0,0 +1,19 @@
+<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 FieldText">
+				<input type="text" [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/text/text.ts

@@ -0,0 +1,30 @@
+import { Component, effect } from '@angular/core';
+import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
+import { LibUtil } from '../../util/util';
+import { UiListErrors } from '../../elements/ui-list-errors/ui-list-errors';
+
+@Component({
+  selector: 'fields-text',
+  templateUrl: './text.html',
+  styleUrls: ['../fields.css'],
+  imports: [UiListErrors]
+})
+export class FieldsText 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());
+
+  }
+
+}

package/src/fields/textarea/textarea.css

@@ -0,0 +1,4 @@
+.FieldTextArea {
+	padding: 0.5rem 0;
+	line-height: 22px;
+}

package/src/fields/textarea/textarea.html

@@ -0,0 +1,20 @@
+<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 FieldTextArea">
+				<textarea [value]="value()" (input)="onInput($event)" (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"
+					[rows]="campo()?.rows ?? 5" [cols]="campo()?.cols" [attr.readonly]="campo()?.readonly ? true : null"
+					[class.input]="true"></textarea>
+			</div>
+		</div>
+	</div>
+	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
+</div>

package/src/fields/textarea/textarea.ts

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

package/src/fields/time/time.html

@@ -0,0 +1,19 @@
+<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 FieldTime">
+				<input type="time" [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/time/time.ts

@@ -0,0 +1,29 @@
+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-time',
+  templateUrl: './time.html',
+  styleUrls: ['../fields.css'],
+  imports: [UiListErrors],
+})
+export class FieldsTime 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());
+  }
+
+}

package/src/fields/upload/upload.css

@@ -0,0 +1,24 @@
+.FieldUpload:has(ui-drop-zone) {
+	outline: none;
+	border: 0;
+}
+
+.fieldDidplayUpload {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	gap: 10px;
+}
+
+.fieldDidplayUpload i {
+	font-size: 48px;
+}
+
+.dica {
+	margin-top: 4px;
+	font-size: 12px;
+	filter: grayscale();
+	opacity: 0.7;
+}