@masterkeymaterial/ui 0.0.1 → 0.0.2

package/src/fields/generic/generic.ts

@@ -0,0 +1,91 @@
+import { NgComponentOutlet } from '@angular/common';
+import { Component, computed } from '@angular/core';
+import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
+
+import { FieldsAutocomplete } from '../autocomplete/autocomplete';
+import { FieldsButton } from "../button/button";
+import { FieldsCheckbox } from '../checkbox/checkbox';
+import { FieldsColor } from '../color/color';
+import { FieldsDate } from '../date/date';
+import { FieldsDatetime } from '../datetime/datetime';
+import { FieldsDisplay } from '../display/display';
+import { FieldsEditor } from '../editor/editor';
+import { FieldsEmail } from '../email/email';
+import { FieldsHidden } from '../hidden/hidden';
+import { FieldsIcon } from '../icon/icon';
+import { FieldsMultifactor } from '../multifactor/multifactor';
+import { FieldsMultiText } from '../multitext/multitext';
+import { FieldsNumber } from '../number/number';
+import { FieldsPassword } from '../password/password';
+import { FieldsSearch } from '../search/search';
+import { FieldsSelect } from '../select/select';
+import { FieldsSlide } from '../slide/slide';
+import { FieldsText } from '../text/text';
+import { FieldsUpload } from '../upload/upload';
+import { FieldsTime } from '../time/time';
+import { FieldsTextarea } from '../textarea/textarea';
+import { IField } from '../Formulario/Formulario';
+import { FieldsMultiKV } from '../multikv/multikv';
+
+@Component({
+  selector: 'fields-g',
+  templateUrl: './generic.html',
+  // styles: `:host.hidden {
+  //   display: none;
+  // }`,
+  imports: [NgComponentOutlet],
+})
+export class FieldsGeneric extends BaseFieldsForm {
+
+  readonly campos = computed(() => this.form().campos());
+
+  // @HostBinding('class.hidden')
+  // isHidden = false;
+
+  // Mapeamento de tipos para componentes
+  getComponentForType(tipo?: IField): any {
+    // Tipo Hidden não exibe componente e coloca o host como hidden
+    // if (tipo == IField.Hidden) {
+    //   this.isHidden = true;
+    //   return null;
+    // }
+
+    /************************************************\\
+    // MAPA: Tipo de Campo - Componente Responsável   \\
+    //*************************************************/
+    // Comente o campo caso haja algum problema de dependência circular ou outro...
+
+    const FIELDS_MAP: Partial<Record<IField, any>> = {
+      [IField.AutoComplete]: FieldsAutocomplete,
+      [IField.Button]: FieldsButton,
+      [IField.Checkbox]: FieldsCheckbox,
+      [IField.Color]: FieldsColor,
+      [IField.Date]: FieldsDate,
+      [IField.DateTime]: FieldsDatetime,
+      [IField.Display]: FieldsDisplay,
+      [IField.Editor]: FieldsEditor,
+      [IField.Email]: FieldsEmail,
+      [IField.Hidden]: FieldsHidden,
+      [IField.Icon]: FieldsIcon,
+      [IField.MultiFactor]: FieldsMultifactor,
+      [IField.MultiKV]: FieldsMultiKV,
+      [IField.MultiText]: FieldsMultiText,
+      [IField.Number]: FieldsNumber,
+      [IField.Password]: FieldsPassword,
+      [IField.Referencia]: FieldsDisplay,
+      [IField.Search]: FieldsSearch,
+      [IField.Select]: FieldsSelect,
+      [IField.Slide]: FieldsSlide,
+      [IField.Text]: FieldsText,
+      [IField.Textarea]: FieldsTextarea,
+      [IField.Time]: FieldsTime,
+      [IField.Upload]: FieldsUpload,
+
+      [IField.Custom]: this.campo()?.componente,
+    }
+    if (tipo) return FIELDS_MAP[tipo] || null;
+    return null;
+  }
+
+}
+

package/src/fields/hidden/hidden.html

@@ -0,0 +1,3 @@
+<div class="fieldHidden" [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>

package/src/fields/hidden/hidden.ts

@@ -0,0 +1,20 @@
+import { Component, effect } from '@angular/core';
+import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
+
+@Component({
+  selector: 'fields-hidden',
+  templateUrl: './hidden.html',
+  styles: `.fieldHidden{display: none;}`
+})
+export class FieldsHidden extends BaseFieldsForm {
+
+  constructor() {
+    super();
+    effect(() => {
+      const val = this.value();
+      let empty = val === null || val === undefined || val === '';
+      this.updateCampo({ empty });
+    });
+  }
+
+}

package/src/fields/icon/icon.css

@@ -0,0 +1,19 @@
+.noIcon {
+	display: inline-block;
+	transform: rotate(-10deg) skewX(-15deg) skewY(-15deg) translate(0px, -5px);
+	font-size: 16px;
+	position: relative;
+}
+
+.noIcon:after {
+	content: 'ICO';
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	transform: scaleY(-1) skewX(-50deg);
+	transform-origin: bottom;
+	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}

package/src/fields/icon/icon.html

@@ -0,0 +1,27 @@
+<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">
+		<ui-button tipo="raised" tema="secondary" (clicked)="onClickEmit()" [disabled]="campo()?.disabled"
+			[style.width.px]="100">
+			@if(value()){
+			<i [class]="value()" [style.fontSize]="'25px'"></i>
+			}@else {
+			<div class="noIcon">ICO</div>
+			}
+		</ui-button>
+		<div class="fieldEffect">
+			<div class="fieldField FieldIconType">
+				<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/icon/icon.ts

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

@@ -0,0 +1,21 @@
+.gridFactor {
+	display: grid;
+	grid-template-columns: repeat(6, 1fr);
+	gap: 0.5rem;
+	padding: 5px;
+	width: 100%;
+}
+
+.fieldField.FieldMultifactor {
+	border: 0;
+}
+
+.fieldField.FieldMultifactor input {
+	text-align: center;
+	outline: 1px solid var(--sys-outline);
+	height: 37px;
+}
+
+.fieldField.FieldMultifactor .corpo:focus-visible {
+	outline: 2px solid var(--campoCor);
+}

package/src/fields/multifactor/multifactor.html

@@ -0,0 +1,39 @@
+<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 FieldMultifactor">
+				<input type="text" [value]="value()" (input)="onInput($event.target.value)" [name]="campo()?.prop"
+					[disabled]="campo()?.disabled" [placeholder]="campo()?.placeholder ?? ''" [class]="campo()?.classe"
+					[style]="campo()?.style" [hidden]="true" [readOnly]="true" />
+
+				<div class="gridFactor">
+					<input #controle class="fieldSingleInput" name="a" size="1" type="text" [maxLength]="1" min="0" max="9"
+						pattern="\d{1,1}" (input)="onInputChar($event)" (keyup)="onKeyUp($event)" (focus)="onFocus($event)"
+						[class.corpo]="true" [class.input]="true" />
+					<input class="fieldSingleInput" name="b" size="1" type="text" [maxLength]="1" min="0" max="9"
+						pattern="\d{1,1}" (input)="onInputChar($event)" (keyup)="onKeyUp($event)" (focus)="onFocus($event)"
+						[class.corpo]="true" [class.input]="true" />
+					<input class="fieldSingleInput" name="c" size="1" type="text" [maxLength]="1" min="0" max="9"
+						pattern="\d{1,1}" (input)="onInputChar($event)" (keyup)="onKeyUp($event)" (focus)="onFocus($event)"
+						[class.corpo]="true" [class.input]="true" />
+					<input class="fieldSingleInput" name="d" size="1" type="text" [maxLength]="1" min="0" max="9"
+						pattern="\d{1,1}" (input)="onInputChar($event)" (keyup)="onKeyUp($event)" (focus)="onFocus($event)"
+						[class.corpo]="true" [class.input]="true" />
+					<input class="fieldSingleInput" name="e" size="1" type="text" [maxLength]="1" min="0" max="9"
+						pattern="\d{1,1}" (input)="onInputChar($event)" (keyup)="onKeyUp($event)" (focus)="onFocus($event)"
+						[class.corpo]="true" [class.input]="true" />
+					<input class="fieldSingleInput" name="f" size="1" type="text" [maxLength]="1" min="0" max="9"
+						pattern="\d{1,1}" (input)="onInputChar($event)" (keyup)="onKeyUp($event)" (focus)="onFocus($event)"
+						[class.corpo]="true" [class.input]="true" />
+				</div>
+			</div>
+		</div>
+	</div>
+	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
+</div>

package/src/fields/multifactor/multifactor.ts

@@ -0,0 +1,106 @@
+import { AfterViewInit, Component, effect, ElementRef, viewChild } from '@angular/core';
+import { LibUtil, LOG } from '../../util/util';
+import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
+import { UiListErrors } from "../../elements/ui-list-errors/ui-list-errors";
+
+interface ICode {
+  [key: string]: string;
+}
+
+@Component({
+  selector: 'fields-multifactor',
+  templateUrl: './multifactor.html',
+  styleUrls: ['../fields.css', './multifactor.css'],
+  imports: [UiListErrors],
+})
+export class FieldsMultifactor extends BaseFieldsForm implements AfterViewInit {
+
+  code: ICode = {};
+  controle = viewChild('controle', { read: ElementRef });
+
+  constructor() {
+    super();
+    effect(() => {
+      const val = this.value();
+      let empty = val === null || val === undefined || val === '';
+      this.updateCampo({ empty });
+    });
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      if (this.campo()?.autofocus && this.controle()?.nativeElement) {
+        this.controle()?.nativeElement.focus();
+      }
+    }, 100);
+  }
+
+  onInput(newValue: string) {
+    if (this.campo()?.mask) newValue = LibUtil.mascarar(newValue, this.campo()?.mask) ?? '';
+    this.updateValue(newValue);
+    this.campo()?.onInput?.(this.form());
+  }
+
+
+  onInputChar(ev: Event) {
+    let e = (ev.target as HTMLInputElement);
+    let v = e.value;
+    let name = e.name;
+    let order = "abcdef";
+    let nextInputName: String = "b";
+    let isLast = false;
+
+    if (v && v != "" && "0123456789".includes(v)) {
+      // Só seta no objeto se for válido
+      this.code[name] = v;
+      // Identificar próximo campo
+      nextInputName = order.charAt(order.indexOf(name) + 1);
+      // Tentativa de focar próximo elemento
+      let nextE = (document.querySelector(`.fieldSingleInput[name='${nextInputName}']`) as HTMLInputElement | null);
+      if (nextE) {
+        nextE.focus();
+      } else {
+        isLast = true;
+      }
+    } else {
+      e.value = "";
+      delete this.code[name];
+    }
+
+    // Seta valor do campo de forma ordenada
+    let novoValor = Object.values(Object.fromEntries(Object.entries(this.code).sort())).join("");
+    this.updateValue(novoValor);
+
+    // Verifica se completou
+    if (this.campo()?.onComplete && novoValor.length == 6 && isLast) {
+      try {
+        this.campo()?.onComplete?.(this.form(), novoValor);
+        this.onChangeEmit();
+      } catch (err) {
+        LOG(1, `❌ Erro ao executar onMatch do campo '${this.name.toString()}'`, err);
+      }
+    }
+  }
+
+  onKeyUp(ev: KeyboardEvent) {
+    let key = ev.key;
+    let e = (ev.target as HTMLInputElement);
+    let v = e.value;
+    if (e && v == "" && key == "Backspace") {
+      let order = "abcdef";
+      let indexOf = order.indexOf(e.name);
+      let nextInputName: String = order.charAt(indexOf - 1);
+      // Tentativa de focar próximo elemento
+      let nextE = (document.querySelector(`.fieldSingleInput[name='${nextInputName}']`) as HTMLInputElement | null);
+      if (nextE) {
+        if (nextE.value != "") {
+          nextE.focus();
+        }
+      }
+    }
+  }
+
+  onFocus(ev: Event) {
+    (ev.target as HTMLInputElement)?.select();
+  }
+}

package/src/fields/multikv/multikv.css

@@ -0,0 +1,43 @@
+.FieldMultiKv {
+	display: grid;
+	grid-template-columns: 1fr 1fr auto;
+	grid-template-rows: 40px;
+	gap: 8px;
+	align-items: center;
+	padding: 8px;
+	border: 0;
+}
+
+
+.fieldField.FieldMultiKv .input {
+	outline: 1px solid var(--sys-outline);
+}
+
+.fieldField.FieldMultiKv .input:focus-visible {
+	outline: 2px solid var(--campoCor);
+}
+
+.index {
+	text-align: center;
+	font-weight: bold;
+	min-width: 18px;
+}
+
+.add {
+	grid-area: auto / auto / auto / span 3;
+}
+
+.input {
+	height: 40px;
+}
+
+.action {
+	min-width: 32px;
+	min-height: 32px;
+}
+
+.header {
+	font-weight: bold;
+	text-decoration: underline;
+	padding-left: 10px;
+}

package/src/fields/multikv/multikv.html

@@ -0,0 +1,47 @@
+<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 FieldMultiKv">
+				@if(campo()?.showHeader != false){
+				<div class="header">{{ campo()?.tituloChave ?? 'Chaves'}}</div>
+				<div class="header">{{ campo()?.tituloValor ?? 'Valores'}}</div>
+				<div class="header action"></div>
+				}
+				@for (item of items; track $index) {
+				<div>
+					<input type="text" [value]="item.k" [name]="campo()?.prop" [disabled]="campo()?.disabled"
+						[placeholder]="campo()?.placeholder ?? ''" [class]="campo()?.classe" [style]="campo()?.style"
+						[attr.maxLength]="campo()?.maxl" [attr.minLength]="campo()?.minl" [class.input]="true"
+						[class.outlined]="true" (input)="_onLocalInputK($event.target.value, $index)"
+						(change)="_onLocalChangeK($event.target.value, $index)" />
+				</div>
+				<div>
+					<input type="text" [value]="item.v" [name]="campo()?.prop" [disabled]="campo()?.disabled"
+						[placeholder]="campo()?.placeholder ?? ''" [class]="campo()?.classe" [style]="campo()?.style"
+						[attr.maxLength]="campo()?.maxl" [attr.minLength]="campo()?.minl" [class.input]="true"
+						[class.outlined]="true" (input)="_onLocalInputV($event.target.value, $index)"
+						(change)="_onLocalChangeV($event.target.value, $index)" />
+				</div>
+				<div class="action">
+					<ui-button tipo="icon" tema="error" title="Remover Linha" (click)="onClickDelItem($index)"
+						icone="bi bi-trash">
+					</ui-button>
+				</div>
+				}
+				<div class="add">
+					<ui-button tipo="nofill" tema="primary" title="Adicionar Linha" (click)="onClickAddItem()"
+						icone="bi bi-plus-circle">
+						Adicionar Linha
+					</ui-button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
+</div>

package/src/fields/multikv/multikv.ts

@@ -0,0 +1,88 @@
+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";
+import { IKV } from '../../interfaces/interfaces';
+
+@Component({
+  selector: 'fields-multikv',
+  templateUrl: './multikv.html',
+  styleUrls: ['../fields.css', './multikv.css'],
+  imports: [UiButton, UiListErrors],
+})
+export class FieldsMultiKV extends BaseFieldsForm implements OnInit {
+
+  // Componente para adicionar ou retirar itens em forma KV (Como usado nos seletores)
+  items: IKV[] | 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);
+  }
+
+  onClickAddItem() {
+    let value: IKV = this.campo()?.value ?? { k: "", v: "" };
+    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();
+  }
+
+  _onLocalInputK(key: string, index: number) {
+    if (this.items) this.items[index].k = key;
+    this.updateValue(this.items);
+    this.campo()?.onInput?.(this.form());
+  }
+
+  _onLocalInputV(value: string, index: number) {
+    if (this.items) this.items[index].v = value;
+    this.updateValue(this.items);
+    this.campo()?.onInput?.(this.form());
+  }
+
+  _onLocalChangeK(key: string, index: number) {
+    if (this.items) this.items[index].k = key;
+    this.updateValue(this.items);
+    this.onChangeEmit();
+  }
+
+  _onLocalChangeV(value: string, index: number) {
+    if (this.items) this.items[index].v = value;
+    this.updateValue(this.items);
+    this.onChangeEmit();
+  }
+
+}

package/src/fields/multitext/multitext.css

@@ -0,0 +1,36 @@
+.FieldMultiText {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	grid-template-rows: 40px;
+	gap: 8px;
+	align-items: center;
+	padding: 8px;
+	border: 0;
+}
+
+.fieldField.FieldMultiText .input {
+	outline: 1px solid var(--sys-outline);
+}
+
+.fieldField.FieldMultiText .input:focus-visible {
+	outline: 2px solid var(--campoCor);
+}
+
+.index {
+	text-align: center;
+	font-weight: bold;
+	min-width: 18px;
+}
+
+.add {
+	grid-area: auto / auto / auto / span 2;
+}
+
+.input {
+	height: 40px;
+}
+
+.action {
+	min-width: 32px;
+	min-height: 32px;
+}

package/src/fields/multitext/multitext.html

@@ -0,0 +1,38 @@
+<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 FieldMultiText">
+				@if(campo()?.showHeader){
+				<div>Itens</div>
+				<div class="action"></div>
+				}
+				@for (item of items; track $index) {
+				<div>
+					<input type="text" [value]="item" [name]="campo()?.prop" [disabled]="campo()?.disabled"
+						[placeholder]="campo()?.placeholder ?? ''" [class]="campo()?.classe" [style]="campo()?.style"
+						[attr.maxLength]="campo()?.maxl" [attr.minLength]="campo()?.minl" [class.input]="true"
+						[class.outlined]="true" (input)="_onLocalInput($event.target.value, $index)" />
+				</div>
+				<div class="action">
+					<ui-button tipo="icon" tema="error" title="Remover Linha" (click)="onClickDelItem($index)"
+						icone="bi bi-trash">
+					</ui-button>
+				</div>
+				}
+				<div class="add">
+					<ui-button tipo="nofill" tema="primary" title="Adicionar Linha" (click)="onClickAddItem()"
+						icone="bi bi-plus-circle">
+						Adicionar Linha
+					</ui-button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
+</div>