@masterkeymaterial/ui 0.0.1 → 0.0.2

package/src/fields/datetime/datetime.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 FieldDate">
+				<input type="datetime-local" [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/datetime/datetime.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-datetime',
+  templateUrl: './datetime.html',
+  styleUrls: ['../fields.css'],
+  imports: [UiListErrors],
+})
+export class FieldsDatetime 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/display/display.css

@@ -0,0 +1,7 @@
+.fieldField.FieldDisplay {
+	border: 0px;
+	min-height: auto;
+	padding: 0 5px;
+	background: transparent;
+	outline: 0px solid transparent;
+}

package/src/fields/display/display.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.isEmpty]="campo()?.empty" (click)="onClickEmit()">
+	<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 FieldDisplay">
+				@if(campo()?.classe == 'displayJson') {
+				<pre class="p-2" [innerHTML]="value() | jsonColorido"></pre>
+				}@else {
+				<div [class]="campo()?.classe" [style]="campo()?.style" [innerHTML]="displayValue()"></div>
+				}
+			</div>
+		</div>
+	</div>
+	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
+</div>

package/src/fields/display/display.ts

@@ -0,0 +1,43 @@
+import { Component, computed, effect, inject, OnInit } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { LibUtil } from '../../util/util';
+import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
+import { UiListErrors } from "../../elements/ui-list-errors/ui-list-errors";
+import { JsonColoridoPipe } from '../../util/JsonColorido.pipe';
+
+@Component({
+  selector: 'fields-display',
+  templateUrl: './display.html',
+  styleUrls: ['../fields.css', './display.css'],
+  imports: [UiListErrors, JsonColoridoPipe],
+})
+export class FieldsDisplay extends BaseFieldsForm {
+
+  sanitizer = inject(DomSanitizer);
+
+  // Importante:
+  // - Este campo não é editável, então não tem onChange ou onInput.
+  // - Este campo não deve entrar no estado Pendente. A exibição foi removida e o fundo foi deixado transparente.
+
+  readonly displayValue = computed<SafeHtml>(() => {
+    let value = this.value();
+    if (this.campo()?.mask) value = LibUtil.mascarar(value, this.campo()?.mask) ?? '';
+    if (LibUtil.classof(value) === 'boolean') {
+      value = value ? 'Sim' : 'Não';
+    }
+    if (value == null) {
+      value = '';
+    }
+    return this.sanitizer.bypassSecurityTrustHtml(value.toString());
+  });
+
+  constructor() {
+    super();
+    effect(() => {
+      const val = this.value();
+      let empty = val === null || val === undefined || val === '';
+      this.updateCampo({ empty });
+    });
+  }
+
+}

package/src/fields/editor/editor.css

@@ -0,0 +1,51 @@
+.fieldField.fieldEditor {
+	display: flex;
+	flex-direction: column;
+	border: 0px;
+	padding: 2px;
+}
+
+.fieldField.fieldEditor .corpo {
+	min-height: 100px;
+	overflow: auto;
+	padding: 8px;
+	width: 100%;
+	line-height: 20px;
+	border-radius: var(--MasterRadius);
+	border: 1px solid var(--outlineColor);
+}
+
+.fieldField.fieldEditor .corpo:focus-visible {
+	outline: 2px solid var(--campoCor);
+}
+
+.fieldField.fieldEditor .toolbar {
+	display: flex;
+	gap: 5px;
+	padding: 4px 4px;
+}
+
+.fieldField.fieldEditor .toolbar .icone {
+	outline: 1px outset color-mix(in srgb, var(--sys-outline) 20%, transparent 80%);
+	height: 30px;
+	width: 30px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	border-radius: 50%;
+	overflow: hidden;
+}
+
+.toolbar .ativo {
+	outline: 1px outset var(--sys-high);
+	box-shadow:
+		0 0 1px var(--sys-high),
+		inset 0 0 5px var(--sys-high);
+	transform: scale(0.9);
+
+}
+
+.toolbar .espaco {
+	margin-left: 10px;
+}

package/src/fields/editor/editor.html

@@ -0,0 +1,37 @@
+<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 fieldEditor">
+				@if(campo()?.showToolbar !== false) {
+				<div class="toolbar">
+					<ui-button tipo="icon" tema="primary" class="icone" [class.ativo]="isNegrito" [disabled]="campo()?.disabled"
+						(click)="onNegrito()" [icone]="iconeNegrito"></ui-button>
+					<ui-button tipo="icon" tema="primary" class="icone" [class.ativo]="isItalico" [disabled]="campo()?.disabled"
+						(click)="onItalico()" [icone]="iconeItalico"></ui-button>
+					<ui-button tipo="icon" tema="primary" class="icone" [class.ativo]="isSublinhado"
+						[disabled]="campo()?.disabled" (click)="onSublinhado()" [icone]="iconeUnderline"></ui-button>
+
+					<ui-button tipo="icon" tema="primary" class="icone espaco" [class.ativo]="currentJustify === 'left'"
+						[disabled]="campo()?.disabled" (click)="onJustify('left')" [icone]="iconeJustifyLeft"></ui-button>
+					<ui-button tipo="icon" tema="primary" class="icone" [class.ativo]="currentJustify === 'center'"
+						[disabled]="campo()?.disabled" (click)="onJustify('center')" [icone]="iconeJustifyCenter"></ui-button>
+					<ui-button tipo="icon" tema="primary" class="icone" [class.ativo]="currentJustify === 'right'"
+						[disabled]="campo()?.disabled" (click)="onJustify('right')" [icone]="iconeJustifyRight"></ui-button>
+					<ui-button tipo="icon" tema="primary" class="icone" [disabled]="campo()?.disabled" (click)="onClearFormat()"
+						[icone]="iconeClearFormat"></ui-button>
+				</div>
+				}
+				<div #editavel [class.corpo]="true" [contentEditable]="!campo()?.disabled && !campo()?.readonly"
+					[class]="campo()?.classe" [style]="campo()?.style" (input)="onInput($event)" [innerHTML]="safeValue()"
+					(blur)="onChange()" (drop)="onDragEvent($event)" (keydown)="onKeyDown($event)"></div>
+			</div>
+		</div>
+	</div>
+	<ui-list-errors [errors]="campo()?.errors" [dica]="campo()?.dica" [show]="campo()?.touched"></ui-list-errors>
+</div>

package/src/fields/editor/editor.ts

@@ -0,0 +1,218 @@
+import { Component, computed, effect, ElementRef, inject, OnInit, viewChild } from '@angular/core';
+import { BaseFieldsForm } from '../Base/BaseFieldsForm/BaseFieldsForm.component';
+import { UiButton } from "../../elements/ui-button/ui-button";
+import { LibUtil, LOG } from '../../util/util';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { UiListErrors } from "../../elements/ui-list-errors/ui-list-errors";
+
+@Component({
+  selector: 'fields-editor',
+  templateUrl: './editor.html',
+  styleUrls: ['../fields.css', './editor.css'],
+  imports: [UiButton, UiListErrors],
+})
+export class FieldsEditor extends BaseFieldsForm implements OnInit {
+
+  sanitizer = inject(DomSanitizer);
+  editavel = viewChild('editavel', { read: ElementRef });
+
+  iconeJustifyLeft = 'fa fa-align-left';//'bi bi-justify-left';
+  iconeJustifyCenter = 'fa fa-align-center';//'bi bi-text-center';
+  iconeJustifyRight = 'fa fa-align-right';//'bi bi-justify-right';
+  iconeJustify = 'fa fa-align-justify';//'bi bi-justify';
+  iconeNegrito = 'fa fa-bold';//'bi bi-type-bold';
+  iconeItalico = 'fa fa-italic';//'bi bi-type-italic';
+  iconeUnderline = 'fa fa-underline';//'bi bi-type-underline';
+  iconeClearFormat = 'fa fa-eraser';//'bi bi-eraser';
+
+  isNegrito: boolean = false;
+  isItalico: boolean = false;
+  isSublinhado: boolean = false;
+  currentJustify: 'left' | 'center' | 'right' | null = null;
+
+  safeValue = computed<SafeHtml>(() => {
+    let value = this.value();
+    if (value == null) {
+      value = '';
+    }
+    return this.sanitizer.bypassSecurityTrustHtml(value.toString());
+  });
+
+  constructor() {
+    super();
+    effect(() => {
+      const val = this.value();
+      let empty = val === null || val === undefined || val === '';
+      this.updateCampo({ empty });
+    });
+  }
+  override ngOnInit() {
+    super.ngOnInit();
+    this.inicializarEstados();
+  }
+
+  onInput(ev?: Event, cursorPosition?: { start: number; end: number, plus: number } | null) {
+    if (this.campo()?.disabled) return;
+    let eEditavel = this.editavel()?.nativeElement as HTMLDivElement;
+    if (!eEditavel) return;
+    let texto = eEditavel.innerHTML;
+    if (!texto) return;
+
+    // Salva a posição do cursor apenas quando o usuário está digitando
+    if (cursorPosition === undefined) {
+      cursorPosition = ev ? LibUtil.saveCursorPosition(eEditavel) : null;
+    }
+
+    // Converte <br> em [br]s para preservar quebras de linha
+    texto = texto.replace(/<br>/g, '[br]');
+
+    // Ao ocorrer mudança aqui, deve-se retirar todas as tags de hipertexto e depois aplicar apenas as que estão ativas.
+    texto = LibUtil.removeHtmlTags(texto);
+
+    // Restaura as quebras de linha
+    texto = texto.replace(/\[br\]/g, '<br>');
+    if (texto === "<br>") {
+      texto = "";
+    }
+
+    if (this.isNegrito) {
+      texto = `<b>${texto}</b>`;
+    }
+    if (this.isItalico) {
+      texto = `<i>${texto}</i>`;
+    }
+    if (this.isSublinhado) {
+      texto = `<u>${texto}</u>`;
+    }
+    if (this.currentJustify) {
+      texto = `<div style="text-align: ${this.currentJustify};">${texto}</div>`;
+    }
+    eEditavel.innerHTML = texto;
+
+    if (cursorPosition) {
+      LibUtil.restoreCursorPosition(eEditavel, cursorPosition);
+    }
+
+    this.campo()?.onInput?.(this.form());
+  }
+
+  onChange() {
+    if (this.campo()?.disabled) return;
+    let eEditavel = this.editavel()?.nativeElement as HTMLDivElement;
+    if (!eEditavel) return;
+
+    let texto = eEditavel.innerHTML;
+    this.updateValue(texto);
+
+    this.onChangeEmit();
+  }
+
+  onDragEvent(dragEvent: DragEvent) {
+    if (this.campo()?.disabled) return;
+    const dataTransfer = dragEvent.dataTransfer;
+    if (!dataTransfer) return;
+
+    // Drag and Drop não é suportado.
+    dragEvent.preventDefault();
+    dragEvent.stopPropagation();
+    const text = dataTransfer.getData('text/plain');
+    LOG(1, "Drag and Drop Text: ", text, dragEvent);
+  }
+
+  onNegrito() {
+    if (this.campo()?.disabled) return;
+    this.isNegrito = !this.isNegrito;
+    this.onInput();
+    this.onChange();
+  }
+  onItalico() {
+    if (this.campo()?.disabled) return;
+    this.isItalico = !this.isItalico;
+    this.onInput();
+    this.onChange();
+  }
+  onSublinhado() {
+    if (this.campo()?.disabled) return;
+    this.isSublinhado = !this.isSublinhado;
+    this.onInput();
+    this.onChange();
+  }
+  onJustify(direction: 'left' | 'center' | 'right') {
+    if (this.campo()?.disabled) return;
+    if (this.currentJustify === direction) {
+      this.currentJustify = null;
+      this.onInput();
+      this.onChange();
+      return;
+    }
+    this.currentJustify = direction;
+    this.onInput();
+    this.onChange();
+  }
+
+
+  onClearFormat() {
+    if (this.campo()?.disabled) return;
+    let eEditavel = this.editavel()?.nativeElement as HTMLDivElement;
+    if (!eEditavel) return;
+    let texto = eEditavel.innerHTML;
+    if (!texto) return;
+
+    this.currentJustify = null;
+    this.isNegrito = false;
+    this.isItalico = false;
+    this.isSublinhado = false;
+
+    texto = LibUtil.removeHtmlTags(texto);
+    eEditavel.innerHTML = texto;
+    this.onChange();
+  }
+
+  onKeyDown(event: KeyboardEvent) {
+    if (this.campo()?.disabled) return;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+
+      const eEditavel = this.editavel()?.nativeElement as HTMLDivElement;
+      if (!eEditavel) return;
+
+      // Salva a posição do cursor
+      const cursorPosition = LibUtil.saveCursorPosition(eEditavel, 1);
+
+      // Insere uma quebra de linha (<br>) na posição do cursor
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const range = selection.getRangeAt(0);
+        range.deleteContents();
+
+        const br = document.createElement('br');
+        range.insertNode(br);
+
+        // Move o cursor para depois do <br>
+        range.setStartAfter(br);
+        range.setEndAfter(br);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+
+      this.onInput(undefined, cursorPosition);
+    }
+  }
+
+  inicializarEstados() {
+    let valor = this.value();
+    if (typeof valor !== 'string' || !valor) return;
+    valor = valor.toLowerCase();
+
+    this.isNegrito = valor.includes('<b>') && valor.includes('</b>');
+    this.isItalico = valor.includes('<i>') && valor.includes('</i>');
+    this.isSublinhado = valor.includes('<u>') && valor.includes('</u>');
+    if (valor.includes('text-align: left')) {
+      this.currentJustify = 'left';
+    } else if (valor.includes('text-align: center')) {
+      this.currentJustify = 'center';
+    } else if (valor.includes('text-align: right')) {
+      this.currentJustify = 'right';
+    }
+  }
+}

package/src/fields/email/email.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 FieldEmail">
+				<input type="email" [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/email/email.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-email',
+  templateUrl: './email.html',
+  styleUrls: ['../fields.css'],
+  imports: [UiListErrors],
+})
+export class FieldsEmail 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/fields.css

@@ -0,0 +1,180 @@
+:host {
+	display: block;
+	--campoCor: var(--sys-primary);
+	--outlineColor: var(--sys-outline)
+}
+
+.fieldContainer {
+	position: relative;
+	margin: 2px;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	gap: 1px;
+}
+
+.fieldField {
+	display: flex;
+	position: relative;
+	border: 1px solid var(--outlineColor);
+	border-radius: var(--MasterRadius);
+	height: 100%;
+	min-height: 37px;
+	outline: 2px solid var(--sys-card);
+	background: var(--sys-card);
+}
+
+
+.fieldInput,
+.fieldField .input {
+	padding: 0 10px;
+	border: none;
+	border-radius: var(--MasterRadius);
+	font-family: inherit;
+	font: inherit;
+	letter-spacing: inherit;
+	text-decoration: inherit;
+	text-transform: inherit;
+	color: var(--sys-on-card);
+	caret-color: var(--sys-primary);
+	outline: none;
+	flex-grow: 1;
+}
+
+.fieldInput {
+	outline: 1px solid var(--outlineColor);
+}
+
+.fieldLabel {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	line-height: 20px;
+	font-size: 14px;
+	font-weight: 600;
+	padding-left: 5px;
+}
+
+.fieldLabel.hideLabel {
+	display: none;
+}
+
+.fieldField:has(.outlined:focus) {
+	outline: 2px solid var(--campoCor);
+}
+
+.fieldContainer.isTouched.showTouched {
+	outline: 2px dotted green;
+	border-radius: 5px;
+	outline-offset: 0px;
+	animation: borderOutline 1s linear infinite;
+}
+
+@keyframes borderOutline {
+	0% {
+		outline-color: green;
+	}
+
+	50% {
+		outline-color: transparent;
+	}
+
+	100% {
+		outline-color: green;
+	}
+}
+
+/*  VALIDADOR FIELDS */
+.isTouched.isInvalid .fieldInput,
+.isTouched.isInvalid .fieldField {
+	outline: 2px solid var(--sys-error);
+}
+
+.fieldControl {
+	display: flex;
+	position: relative;
+	gap: 0.5rem;
+	height: fit-content;
+}
+
+.fieldTopRight {
+	position: absolute;
+	top: 0;
+	right: 0;
+	font-size: 14px;
+}
+
+.fieldContainer.isDisabled {
+	filter: grayscale(100%);
+	cursor: not-allowed;
+	--outlineColor: color-mix(in srgb, var(--sys-outline) 50%, transparent 50%);
+}
+
+.fieldContainer.isDisabled .fieldControl {
+	pointer-events: none;
+}
+
+.fieldContainer.isDisabled .fieldLabel {
+	opacity: 0.6;
+}
+
+.isNeed .fieldControl::after {
+	content: '*';
+	position: absolute;
+	right: -1px;
+	top: -1px;
+	font-size: 14px;
+	color: color-mix(in srgb, var(--sys-outline) 80%, var(--sys-error) 20%);
+}
+
+.fieldIcon {
+	display: flex;
+	align-items: center;
+	font-size: 16px;
+}
+
+.fieldEffect {
+	position: relative;
+	width: 100%;
+	border-radius: var(--MasterRadius);
+	padding: 3px;
+	height: fit-content;
+}
+
+.isPending .fieldEffect::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	border-radius: inherit;
+	background: repeating-conic-gradient(from var(--anglePendingEffect),
+			var(--sys-error) 0%,
+			var(--sys-error) 5%,
+			transparent 5%,
+			transparent 15%,
+			var(--sys-error) 25%,
+			var(--sys-info) 30%,
+			transparent 30%,
+			transparent 40%,
+			var(--sys-error) 50%);
+	animation: rotacionar 4s linear infinite;
+}
+
+
+@property --anglePendingEffect {
+	syntax: '<angle>';
+	inherits: false;
+	initial-value: 0deg;
+}
+
+@keyframes rotacionar {
+	0% {
+		--anglePendingEffect: 0deg;
+	}
+
+	100% {
+		--anglePendingEffect: 360deg;
+	}
+}

package/src/fields/generic/generic.html

@@ -0,0 +1,3 @@
+@if (getComponentForType(campo() ? campo()?.tipo : undefined); as component) {
+<ng-container [ngComponentOutlet]="component" [ngComponentOutletInputs]="{ form: this.form(), name: name() }" />
+}