@masterkeymaterial/ui 0.0.2 → 0.0.4

package/src/fields/generic/generic.ts

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

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

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

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

@@ -1,27 +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">
-		<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

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

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

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

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

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

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

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

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

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