@sapphire-caitlyn/schema-kit-ng 0.0.4 → 0.0.6

package/fesm2022/sapphire-caitlyn-schema-kit-ng.mjs

@@ -4489,8 +4489,6 @@ var InputNumberComponent = class InputNumberComponent extends InputBaseComponent
 		let minimumFractionDigits;
 		let postfix;
 		let prefix;
-		let min;
-		let max;
 		switch (this.inputType()) {
 			case InputNumberType.DECIMAL:
 				maximumFractionDigits = this.maximumFractionDigits() ?? 2;
@@ -4516,8 +4514,8 @@ var InputNumberComponent = class InputNumberComponent extends InputBaseComponent
 				postfix = this.postfix() ?? "";
 				prefix = this.prefix() ?? "";
 		}
-		min = this.min() ?? Number.MIN_SAFE_INTEGER;
-		max = this.max() ?? Number.MAX_SAFE_INTEGER;
+		const min = this.min() ?? Number.MIN_SAFE_INTEGER;
+		const max = this.max() ?? Number.MAX_SAFE_INTEGER;
 		return {
 			maximumFractionDigits,
 			minimumFractionDigits,
@@ -5009,32 +5007,110 @@ const maskitoOptionsPhone = {
 	plugins: [...phoneOptions.plugins],
 	mask: phoneOptions.mask
 };
+const SCHEMA_KIT_OPTIONS = new InjectionToken("SCHEMA_KIT_OPTIONS");
+const SCHEMA_KIT_PERMISSAO_CHECKER = new InjectionToken("SCHEMA_KIT_PERMISSAO_CHECKER");
+var SchemaKitModule = class SchemaKitModule {
+	static forRoot(options) {
+		const _options = {
+			apiUrlGetter: options.apiUrlGetter,
+			paginationOptions: { rows: options.paginationOptions?.rows ?? 20 },
+			environmentKey: options.environmentKey
+		};
+		return {
+			ngModule: SchemaKitModule,
+			providers: [
+				{
+					provide: SCHEMA_KIT_OPTIONS,
+					useValue: _options
+				},
+				{
+					provide: EnvironmentService,
+					useFactory: (opts) => {
+						const service = new EnvironmentService();
+						service.registerApiUrlGetter(() => opts.apiUrlGetter(service.getEnvironment()));
+						return service;
+					},
+					deps: [SCHEMA_KIT_OPTIONS]
+				},
+				{
+					provide: SCHEMA_KIT_PERMISSAO_CHECKER,
+					useFactory: options.perfilCheckerFactory ?? (() => () => {
+						console.warn("No perfil checker provided. All permissao checks will return false.");
+						return false;
+					})
+				}
+			]
+		};
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: SchemaKitModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: SchemaKitModule,
+		imports: [CommonModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.4",
+		ngImport: i0,
+		type: SchemaKitModule,
+		imports: [CommonModule]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SchemaKitModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			declarations: [],
+			imports: [CommonModule]
+		}]
+	}]
+});
 var EnvironmentService = class EnvironmentService {
-	environment;
+	_environment;
+	environment = computed(() => {
+		const environment = this._environment();
+		if (!environment) throw new Error("Environment is not defined");
+		return environment;
+	}, ...ngDevMode ? [{ debugName: "environment" }] : /* istanbul ignore next */ []);
+	apiUrlGetter = signal(() => {
+		throw new Error("API URL getter not registered");
+	}, ...ngDevMode ? [{ debugName: "apiUrlGetter" }] : /* istanbul ignore next */ []);
+	apiUrl = computed(() => this.apiUrlGetter()(), ...ngDevMode ? [{ debugName: "apiUrl" }] : /* istanbul ignore next */ []);
 	constructor() {
-		this.environment = window.environment;
+		const options = inject(SCHEMA_KIT_OPTIONS);
+		const environment = window[options.environmentKey];
+		this._environment = signal(environment, ...ngDevMode ? [{ debugName: "_environment" }] : /* istanbul ignore next */ []);
 	}
 	set(key, value) {
-		this.environment[key] = value;
+		this._environment.set({
+			...this.environment(),
+			[key]: value
+		});
 	}
 	get(key) {
-		return this.environment[key];
+		return this.environment()[key];
 	}
 	resource(path) {
 		return `${this.apiUrl()}/${path}`;
 	}
 	getEnvironment() {
-		if (!this.environment) throw new Error("Environment is not defined");
-		return this.environment;
-	}
-	apiUrl() {
-		return this.apiUrlGetter();
+		return this.environment();
 	}
-	apiUrlGetter = () => {
-		throw new Error("API URL getter not registered");
-	};
 	registerApiUrlGetter(getter) {
-		this.apiUrlGetter = getter;
+		this.apiUrlGetter.set(getter);
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -5064,7 +5140,6 @@ i0.ɵɵngDeclareClassMetadata({
 	ctorParameters: () => []
 });
 var AlertComponent = class AlertComponent {
-	constructor() {}
 	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
 	description = input(...ngDevMode ? [void 0, { debugName: "description" }] : /* istanbul ignore next */ []);
 	buttons = input([], ...ngDevMode ? [{ debugName: "buttons" }] : /* istanbul ignore next */ []);
@@ -5231,7 +5306,6 @@ i0.ɵɵngDeclareClassMetadata({
 			template: "<hlm-alert-dialog>\n  <hlm-alert-dialog-content *hlmAlertDialogPortal=\"let ctx\" [size]=\"size()\">\n    <hlm-alert-dialog-header>\n      @if(icon()){\n        <hlm-alert-dialog-media\n          class=\"bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive\"\n        >\n          <ng-icon [name]=\"icon()!\"/>\n        </hlm-alert-dialog-media>\n      }\n      <h2 hlmAlertDialogTitle>{{ title() }}</h2>\n      <p hlmAlertDialogDescription>\n        {{ description() }}\n      </p>\n    </hlm-alert-dialog-header>\n    <hlm-alert-dialog-footer>\n      @for (button of buttons(); track button.id) {\n        <button hlmAlertDialogAction [variant]=\"button.variant ?? 'default'\" (click)=\"onClick(button)\">\n          {{ button.label }}\n        </button>\n      }\n    </hlm-alert-dialog-footer>\n  </hlm-alert-dialog-content>\n</hlm-alert-dialog>\n"
 		}]
 	}],
-	ctorParameters: () => [],
 	propDecorators: {
 		icon: [{
 			type: i0.Input,
@@ -5280,7 +5354,6 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 var AlertService = class AlertService {
-	constructor() {}
 	appRef = inject(ApplicationRef);
 	injector = inject(EnvironmentInjector);
 	async present(options) {
@@ -5353,8 +5426,7 @@ i0.ɵɵngDeclareClassMetadata({
 	version: "22.2.4",
 	ngImport: i0,
 	type: AlertService,
-	decorators: [{ type: Service }],
-	ctorParameters: () => []
+	decorators: [{ type: Service }]
 });
 var SchemaService = class {
 	options;
@@ -6644,7 +6716,7 @@ var SchemaTableFilterComponent = class SchemaTableFilterComponent {
 		},
 		outputs: { value: "valueChange" },
 		ngImport: i0,
-		template: "<hlm-popover sideOffset=\"5\" align=\"start\">\n\n  <div hlmButtonGroup>\n    <button hlmPopoverTrigger hlmBtn variant=\"outline\" size=\"sm\">\n      <ng-icon name=\"lucideFunnel\" class=\"text-lg shrink-0\"></ng-icon>\n      {{ label() }}\n    </button>\n    @if (hasValue()) {\n      <button hlmBtn size=\"icon-sm\" variant=\"outline\" (click)=\"setValue(null)\" hlmTooltip=\"Limpar filtro\" position=\"top\">\n        <ng-icon name=\"lucideSquareX\" class=\"text-lg shrink-0\"></ng-icon>\n      </button>\n    }\n  </div>\n\n\n  <hlm-popover-content *hlmPopoverPortal=\"let ctx\">\n    <hlm-popover-header>\n      <div hlmPopoverTitle>\n        {{ label() }}\n      </div>\n      <p hlmPopoverDescription>\n        Filtros de {{ label() }}.\n      </p>\n\n      @switch (type()) {\n        @case (FieldType.UUID)\n        @case (FieldType.TextArea)\n        @case (FieldType.String) {\n          <input-string\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-string>\n        }\n        @case (FieldType.Mask) {\n          <input-mask\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [maskitoOptions]=\"options()?.maskitoOptions!\"\n            [unmaskHandler]=\"options()?.unmaskHandler\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-mask>\n        }\n        @case (FieldType.Icon) {\n          <input-icon\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Selecione o valor do filtro'\"\n          ></input-icon>\n        }\n        @case (FieldType.Number) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-number\n              label=\"Mínimo\"\n              [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"\n            ></input-number>\n            <input-number\n              label=\"Máximo\"\n              [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"\n            ></input-number>\n          </div>\n        }\n        @case (FieldType.Decimal) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-decimal\n              label=\"Mínimo\"\n              [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"\n            ></input-decimal>\n            <input-decimal\n              label=\"Máximo\"\n              [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"\n            ></input-decimal>\n          </div>\n        }\n        @case (FieldType.Currency) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-currency\n              label=\"Mínimo\"\n              [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"\n            ></input-currency>\n            <input-currency\n              label=\"Máximo\"\n              [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"\n            ></input-currency>\n          </div>\n        }\n        @case (FieldType.Date) {\n          <input-date-span\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n          ></input-date-span>\n        }\n        @case (FieldType.DateTime) {\n          <input-date-time-span\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n          ></input-date-time-span>\n        }\n        @case (FieldType.Time) {\n          <input-time-span\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n          ></input-time-span>\n        }\n        @case (FieldType.Bool) {\n          <input-select\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            [items]=\"[ \n              { label: 'Sim', value: true }, \n              { label: 'Não', value: false } \n            ]\"\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n          ></input-select>\n        }\n        @case (FieldType.Phone) {\n          <input-phone\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-phone>\n        }\n        @case (FieldType.CpfCnpj) {\n          <input-cpf-cnpj\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-cpf-cnpj>\n        }\n        @case (FieldType.Cpf) {\n          <input-cpf\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-cpf>\n        }\n        @case (FieldType.Cnpj) {\n          <input-cnpj\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-cnpj>\n        }\n        @case (FieldType.Select) {\n          <input-select\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [schemaService]=\"schemaService()\"\n            [lstFilter]=\"options()?.lstFilter ?? null\"\n            [items]=\"options()?.lstOptions ?? []\"\n            [bindValue]=\"options()?.bindValue ?? null\"\n            [bindLabel]=\"options()?.bindLabel ?? null\"\n            [placeholder]=\"'Selecione o valor do filtro'\"\n          ></input-select>\n        }\n      }\n\n    </hlm-popover-header>\n  </hlm-popover-content>\n</hlm-popover>\n",
+		template: "<hlm-popover sideOffset=\"5\" align=\"start\">\n  <div hlmButtonGroup>\n    <button hlmPopoverTrigger hlmBtn variant=\"outline\" size=\"sm\">\n      <ng-icon name=\"lucideFunnel\" class=\"text-lg shrink-0\"></ng-icon>\n      {{ label() }}\n    </button>\n    @if (hasValue()) {\n      <button hlmBtn size=\"icon-sm\" variant=\"outline\" (click)=\"setValue(null)\" hlmTooltip=\"Limpar filtro\" position=\"top\">\n        <ng-icon name=\"lucideSquareX\" class=\"text-lg shrink-0\"></ng-icon>\n      </button>\n    }\n  </div>\n\n  <hlm-popover-content *hlmPopoverPortal=\"let ctx\">\n    <hlm-popover-header>\n      <div hlmPopoverTitle>\n        {{ label() }}\n      </div>\n      <p hlmPopoverDescription>Filtros de {{ label() }}.</p>\n\n      @switch (type()) {\n        @case (FieldType.UUID)\n        @case (FieldType.TextArea)\n        @case (FieldType.String) {\n          <input-string [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Digite o valor do filtro'\"></input-string>\n        }\n        @case (FieldType.Mask) {\n          <input-mask\n            [ngModel]=\"value()\"\n            (ngModelChange)=\"setValue($event)\"\n            [maskitoOptions]=\"options()?.maskitoOptions!\"\n            [unmaskHandler]=\"options()?.unmaskHandler\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-mask>\n        }\n        @case (FieldType.Icon) {\n          <input-icon [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Selecione o valor do filtro'\"></input-icon>\n        }\n        @case (FieldType.Number) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-number label=\"Mínimo\" [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"></input-number>\n            <input-number label=\"Máximo\" [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"></input-number>\n          </div>\n        }\n        @case (FieldType.Decimal) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-decimal label=\"Mínimo\" [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"></input-decimal>\n            <input-decimal label=\"Máximo\" [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"></input-decimal>\n          </div>\n        }\n        @case (FieldType.Currency) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-currency label=\"Mínimo\" [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"></input-currency>\n            <input-currency label=\"Máximo\" [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"></input-currency>\n          </div>\n        }\n        @case (FieldType.Date) {\n          <input-date-span [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"></input-date-span>\n        }\n        @case (FieldType.DateTime) {\n          <input-date-time-span [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"></input-date-time-span>\n        }\n        @case (FieldType.Time) {\n          <input-time-span [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"></input-time-span>\n        }\n        @case (FieldType.Bool) {\n          <input-select\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            [items]=\"[\n              { label: 'Sim', value: true },\n              { label: 'Não', value: false },\n            ]\"\n            [ngModel]=\"value()\"\n            (ngModelChange)=\"setValue($event)\"\n          ></input-select>\n        }\n        @case (FieldType.Phone) {\n          <input-phone [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Digite o valor do filtro'\"></input-phone>\n        }\n        @case (FieldType.CpfCnpj) {\n          <input-cpf-cnpj [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Digite o valor do filtro'\"></input-cpf-cnpj>\n        }\n        @case (FieldType.Cpf) {\n          <input-cpf [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Digite o valor do filtro'\"></input-cpf>\n        }\n        @case (FieldType.Cnpj) {\n          <input-cnpj [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Digite o valor do filtro'\"></input-cnpj>\n        }\n        @case (FieldType.Select) {\n          <input-select\n            [ngModel]=\"value()\"\n            (ngModelChange)=\"setValue($event)\"\n            [schemaService]=\"schemaService()\"\n            [lstFilter]=\"options()?.lstFilter ?? null\"\n            [items]=\"options()?.lstOptions ?? []\"\n            [bindValue]=\"options()?.bindValue ?? null\"\n            [bindLabel]=\"options()?.bindLabel ?? null\"\n            [placeholder]=\"'Selecione o valor do filtro'\"\n          ></input-select>\n        }\n      }\n    </hlm-popover-header>\n  </hlm-popover-content>\n</hlm-popover>\n",
 		styles: [""],
 		dependencies: [
 			{
@@ -6874,7 +6946,7 @@ i0.ɵɵngDeclareClassMetadata({
 				NgIcon
 			],
 			selector: "schema-table-filter",
-			template: "<hlm-popover sideOffset=\"5\" align=\"start\">\n\n  <div hlmButtonGroup>\n    <button hlmPopoverTrigger hlmBtn variant=\"outline\" size=\"sm\">\n      <ng-icon name=\"lucideFunnel\" class=\"text-lg shrink-0\"></ng-icon>\n      {{ label() }}\n    </button>\n    @if (hasValue()) {\n      <button hlmBtn size=\"icon-sm\" variant=\"outline\" (click)=\"setValue(null)\" hlmTooltip=\"Limpar filtro\" position=\"top\">\n        <ng-icon name=\"lucideSquareX\" class=\"text-lg shrink-0\"></ng-icon>\n      </button>\n    }\n  </div>\n\n\n  <hlm-popover-content *hlmPopoverPortal=\"let ctx\">\n    <hlm-popover-header>\n      <div hlmPopoverTitle>\n        {{ label() }}\n      </div>\n      <p hlmPopoverDescription>\n        Filtros de {{ label() }}.\n      </p>\n\n      @switch (type()) {\n        @case (FieldType.UUID)\n        @case (FieldType.TextArea)\n        @case (FieldType.String) {\n          <input-string\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-string>\n        }\n        @case (FieldType.Mask) {\n          <input-mask\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [maskitoOptions]=\"options()?.maskitoOptions!\"\n            [unmaskHandler]=\"options()?.unmaskHandler\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-mask>\n        }\n        @case (FieldType.Icon) {\n          <input-icon\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Selecione o valor do filtro'\"\n          ></input-icon>\n        }\n        @case (FieldType.Number) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-number\n              label=\"Mínimo\"\n              [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"\n            ></input-number>\n            <input-number\n              label=\"Máximo\"\n              [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"\n            ></input-number>\n          </div>\n        }\n        @case (FieldType.Decimal) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-decimal\n              label=\"Mínimo\"\n              [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"\n            ></input-decimal>\n            <input-decimal\n              label=\"Máximo\"\n              [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"\n            ></input-decimal>\n          </div>\n        }\n        @case (FieldType.Currency) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-currency\n              label=\"Mínimo\"\n              [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"\n            ></input-currency>\n            <input-currency\n              label=\"Máximo\"\n              [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"\n            ></input-currency>\n          </div>\n        }\n        @case (FieldType.Date) {\n          <input-date-span\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n          ></input-date-span>\n        }\n        @case (FieldType.DateTime) {\n          <input-date-time-span\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n          ></input-date-time-span>\n        }\n        @case (FieldType.Time) {\n          <input-time-span\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n          ></input-time-span>\n        }\n        @case (FieldType.Bool) {\n          <input-select\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            [items]=\"[ \n              { label: 'Sim', value: true }, \n              { label: 'Não', value: false } \n            ]\"\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n          ></input-select>\n        }\n        @case (FieldType.Phone) {\n          <input-phone\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-phone>\n        }\n        @case (FieldType.CpfCnpj) {\n          <input-cpf-cnpj\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-cpf-cnpj>\n        }\n        @case (FieldType.Cpf) {\n          <input-cpf\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-cpf>\n        }\n        @case (FieldType.Cnpj) {\n          <input-cnpj\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-cnpj>\n        }\n        @case (FieldType.Select) {\n          <input-select\n            [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"\n            [schemaService]=\"schemaService()\"\n            [lstFilter]=\"options()?.lstFilter ?? null\"\n            [items]=\"options()?.lstOptions ?? []\"\n            [bindValue]=\"options()?.bindValue ?? null\"\n            [bindLabel]=\"options()?.bindLabel ?? null\"\n            [placeholder]=\"'Selecione o valor do filtro'\"\n          ></input-select>\n        }\n      }\n\n    </hlm-popover-header>\n  </hlm-popover-content>\n</hlm-popover>\n"
+			template: "<hlm-popover sideOffset=\"5\" align=\"start\">\n  <div hlmButtonGroup>\n    <button hlmPopoverTrigger hlmBtn variant=\"outline\" size=\"sm\">\n      <ng-icon name=\"lucideFunnel\" class=\"text-lg shrink-0\"></ng-icon>\n      {{ label() }}\n    </button>\n    @if (hasValue()) {\n      <button hlmBtn size=\"icon-sm\" variant=\"outline\" (click)=\"setValue(null)\" hlmTooltip=\"Limpar filtro\" position=\"top\">\n        <ng-icon name=\"lucideSquareX\" class=\"text-lg shrink-0\"></ng-icon>\n      </button>\n    }\n  </div>\n\n  <hlm-popover-content *hlmPopoverPortal=\"let ctx\">\n    <hlm-popover-header>\n      <div hlmPopoverTitle>\n        {{ label() }}\n      </div>\n      <p hlmPopoverDescription>Filtros de {{ label() }}.</p>\n\n      @switch (type()) {\n        @case (FieldType.UUID)\n        @case (FieldType.TextArea)\n        @case (FieldType.String) {\n          <input-string [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Digite o valor do filtro'\"></input-string>\n        }\n        @case (FieldType.Mask) {\n          <input-mask\n            [ngModel]=\"value()\"\n            (ngModelChange)=\"setValue($event)\"\n            [maskitoOptions]=\"options()?.maskitoOptions!\"\n            [unmaskHandler]=\"options()?.unmaskHandler\"\n            [placeholder]=\"'Digite o valor do filtro'\"\n          ></input-mask>\n        }\n        @case (FieldType.Icon) {\n          <input-icon [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Selecione o valor do filtro'\"></input-icon>\n        }\n        @case (FieldType.Number) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-number label=\"Mínimo\" [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"></input-number>\n            <input-number label=\"Máximo\" [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"></input-number>\n          </div>\n        }\n        @case (FieldType.Decimal) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-decimal label=\"Mínimo\" [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"></input-decimal>\n            <input-decimal label=\"Máximo\" [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"></input-decimal>\n          </div>\n        }\n        @case (FieldType.Currency) {\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input-currency label=\"Mínimo\" [ngModel]=\"range()?.[0] ?? null\" (ngModelChange)=\"setRangeEdge(0, $event)\"></input-currency>\n            <input-currency label=\"Máximo\" [ngModel]=\"range()?.[1] ?? null\" (ngModelChange)=\"setRangeEdge(1, $event)\"></input-currency>\n          </div>\n        }\n        @case (FieldType.Date) {\n          <input-date-span [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"></input-date-span>\n        }\n        @case (FieldType.DateTime) {\n          <input-date-time-span [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"></input-date-time-span>\n        }\n        @case (FieldType.Time) {\n          <input-time-span [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\"></input-time-span>\n        }\n        @case (FieldType.Bool) {\n          <input-select\n            bindLabel=\"label\"\n            bindValue=\"value\"\n            [items]=\"[\n              { label: 'Sim', value: true },\n              { label: 'Não', value: false },\n            ]\"\n            [ngModel]=\"value()\"\n            (ngModelChange)=\"setValue($event)\"\n          ></input-select>\n        }\n        @case (FieldType.Phone) {\n          <input-phone [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Digite o valor do filtro'\"></input-phone>\n        }\n        @case (FieldType.CpfCnpj) {\n          <input-cpf-cnpj [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Digite o valor do filtro'\"></input-cpf-cnpj>\n        }\n        @case (FieldType.Cpf) {\n          <input-cpf [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Digite o valor do filtro'\"></input-cpf>\n        }\n        @case (FieldType.Cnpj) {\n          <input-cnpj [ngModel]=\"value()\" (ngModelChange)=\"setValue($event)\" [placeholder]=\"'Digite o valor do filtro'\"></input-cnpj>\n        }\n        @case (FieldType.Select) {\n          <input-select\n            [ngModel]=\"value()\"\n            (ngModelChange)=\"setValue($event)\"\n            [schemaService]=\"schemaService()\"\n            [lstFilter]=\"options()?.lstFilter ?? null\"\n            [items]=\"options()?.lstOptions ?? []\"\n            [bindValue]=\"options()?.bindValue ?? null\"\n            [bindLabel]=\"options()?.bindLabel ?? null\"\n            [placeholder]=\"'Selecione o valor do filtro'\"\n          ></input-select>\n        }\n      }\n    </hlm-popover-header>\n  </hlm-popover-content>\n</hlm-popover>\n"
 		}]
 	}],
 	propDecorators: {
@@ -6921,75 +6993,6 @@ function hasFilterValue(v) {
 	if (Array.isArray(v)) return v.length > 0;
 	return true;
 }
-const SCHEMA_KIT_OPTIONS = new InjectionToken("SCHEMA_KIT_OPTIONS");
-const SCHEMA_KIT_PERMISSAO_CHECKER = new InjectionToken("SCHEMA_KIT_PERMISSAO_CHECKER");
-var SchemaKitModule = class SchemaKitModule {
-	static forRoot(options) {
-		const _options = {
-			apiUrlGetter: options.apiUrlGetter,
-			paginationOptions: { rows: options.paginationOptions?.rows ?? 20 }
-		};
-		return {
-			ngModule: SchemaKitModule,
-			providers: [
-				{
-					provide: SCHEMA_KIT_OPTIONS,
-					useValue: _options
-				},
-				{
-					provide: EnvironmentService,
-					useFactory: (opts) => {
-						const service = new EnvironmentService();
-						service.registerApiUrlGetter(() => opts.apiUrlGetter(service.getEnvironment()));
-						return service;
-					},
-					deps: [SCHEMA_KIT_OPTIONS]
-				},
-				{
-					provide: SCHEMA_KIT_PERMISSAO_CHECKER,
-					useFactory: options.perfilCheckerFactory ?? (() => () => {
-						console.warn("No perfil checker provided. All permissao checks will return false.");
-					})
-				}
-			]
-		};
-	}
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.4",
-		ngImport: i0,
-		type: SchemaKitModule,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.NgModule
-	});
-	static ɵmod = i0.ɵɵngDeclareNgModule({
-		minVersion: "14.0.0",
-		version: "22.2.4",
-		ngImport: i0,
-		type: SchemaKitModule,
-		imports: [CommonModule]
-	});
-	static ɵinj = i0.ɵɵngDeclareInjector({
-		minVersion: "12.0.0",
-		version: "22.2.4",
-		ngImport: i0,
-		type: SchemaKitModule,
-		imports: [CommonModule]
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.4",
-	ngImport: i0,
-	type: SchemaKitModule,
-	decorators: [{
-		type: NgModule,
-		args: [{
-			declarations: [],
-			imports: [CommonModule]
-		}]
-	}]
-});
 var HasPermissaoPipe = class HasPermissaoPipe {
 	permissaoChecker = inject(SCHEMA_KIT_PERMISSAO_CHECKER);
 	transform(permissao) {
@@ -7456,9 +7459,9 @@ var SchemaTableComponent = class SchemaTableComponent {
 				const cells = {};
 				for (const field of fields) {
 					const service = field.options?.service?.();
-					let endpoint = service?.options.endpoint;
+					const endpoint = service?.options.endpoint;
 					if (endpoint && responseMap[endpoint]) {
-						let response = responseMap[endpoint];
+						const response = responseMap[endpoint];
 						cells[field.index] = this.toCell(item, field, {
 							response,
 							bindLabelFn: service?.bindLabelFn(),
@@ -7564,7 +7567,7 @@ var SchemaTableComponent = class SchemaTableComponent {
 			patchValue[index] = value;
 			await this.schemaService().patch(uuid, patchValue);
 			toast.success("Dados salvos com sucesso");
-		} catch (error) {
+		} catch {
 			toast.error("Erro ao salvar os dados");
 			this.refresh();
 		} finally {
@@ -7740,7 +7743,7 @@ var SchemaTableComponent = class SchemaTableComponent {
 			}
 		],
 		ngImport: i0,
-		template: "<div class=\"size-full flex flex-col gap-2\">\n  <div class=\"flex flex-col gap-3 flex-1 min-h-0\">\n    <breadcrumbs [items]=\"lstBreadCrumbs()\"></breadcrumbs>\n    \n    <hlm-card class=\"flex-1 flex flex-col min-h-0 py-0\">\n      <div hlmCardContent class=\"flex flex-col flex-1 min-h-0 px-0\">\n        <div class=\"p-2 w-full flex flex-wrap md:flex-nowrap md:h-12 gap-2 items-center\">\n          <!-- <input hlmInput  placeholder=\"Pesquisar...\"/> -->\n          \n          @if(!noQuery()){\n            <div hlmInputGroup class=\"flex-1 min-w-0 md:flex-none md:min-w-32 md:max-w-1/3\">\n              <div hlmInputGroupAddon align=\"inline-start\">\n                <ng-icon name=\"lucideSearch\" />\n              </div>\n              <input hlmInputGroupInput placeholder=\"Pesquisar...\" [formField]=\"searchForm.query\" />\n            </div>\n          }\n          \n          <ng-scrollbar class=\"order-last basis-full min-w-0 md:order-0 md:basis-auto md:flex-1\" hlm appearance=\"compact\">\n            <div class=\"flex w-max space-x-2 h-full items-center\" scrollViewport>\n              @for (item of lstField(); track item.index) {\n                @if(!item.hiddenList){\n                  <schema-table-filter\n                    [label]=\"item.label\"\n                    [formField]=\"$any(lstFilterForms[$any(item.index)].value)\"\n                    [options]=\"item.options || null\"\n                    [type]=\"item.type\"\n                  ></schema-table-filter>\n                }\n              }\n            </div>\n          </ng-scrollbar>\n          @for (toolbar of toolbarStart(); track $index) {\n            <ng-container\n              (click)=\"$event.stopPropagation()\"\n              [ngTemplateOutlet]=\"toolbar.template\"\n            />\n          }\n          @if(!noNew()){\n            <button hlmBtn size=\"icon-sm\" variant=\"outline\" class=\"shrink-0\" (click)=\"novo()\" hlmTooltip=\"Novo\" position=\"top\">\n              <ng-icon name=\"lucideCirclePlus\" class=\"text-lg shrink-0\"></ng-icon>\n            </button>\n          }\n          <button hlmBtn size=\"icon-sm\" variant=\"outline\" class=\"shrink-0\" (click)=\"reset()\" hlmTooltip=\"Resetar filtros\" position=\"top\">\n            <ng-icon name=\"lucideSquareX\" class=\"text-lg shrink-0\"></ng-icon>\n          </button>\n          <button hlmBtn size=\"icon-sm\" class=\"shrink-0\" (click)=\"refresh()\" hlmTooltip=\"Atualizar dados\" position=\"top\">\n            <ng-icon name=\"lucideRefreshCcw\" class=\"text-lg shrink-0\"></ng-icon>\n          </button>\n          @for (toolbar of toolbarEnd(); track $index) {\n            <ng-container\n              (click)=\"$event.stopPropagation()\"\n              [ngTemplateOutlet]=\"toolbar.template\"\n            />\n          }\n        </div>\n\n        <div class=\"flex-1 min-h-0 relative overflow-hidden\">\n          <div\n            [ngClass]=\"loading() ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10 pointer-events-none'\"\n            class=\"absolute mask-y-from-10% z-10 left-0 top-0 w-full h-full flex items-center justify-center bg-white/10 transition-all duration-300 ease-in-out\">\n            <hlm-spinner class=\"text-2xl\"/>\n          </div>\n          \n          @if(!loading() && !lstItems().length){\n           <div class=\"absolute left-0 top-0 size-full flex items-center justify-center\">\n            <span>\n              Nenhum dado encontrado.\n            </span>\n           </div>\n            <!-- <tr hlmTableRow>\n              <td hlmTableCell [attr.colspan]=\"lstField().length + actionsStart().length + actionsEnd().length\" class=\"text-center py-6 text-muted-foreground\">\n              </td>\n            </tr> -->\n          }\n\n          <div hlmTableContainer class=\"h-full overflow-auto rounded-t-2xl portrait:hidden\">\n            <table hlmTable>\n              @let hasPermissaoEdit = editPermissao() | hasPermissao;\n              @let hasPermissaoDelete = deletePermissao() | hasPermissao;\n\n              <thead hlmTableHeader class=\"sticky top-0 z-1 backdrop-blur-2xl\">\n                <tr hlmTableRow>\n                  @if (actionsStart().length) {\n                    <th hlmTableHead></th>\n                  }\n                  @for (item of lstField(); track $index) {\n                    @if (!item.hiddenList) {\n                      <th hlmTableHead>\n                        <div class=\"flex justify-start items-center size-full gap-2\">\n                          @let sort = lstFieldSort()[item.index];\n  \n                          <button hlmBtn size=\"sm\" variant=\"ghost\" class=\"capitalize\" (click)=\"onSort(item.index)\">\n                            {{ item.label }}\n                            <ng-icon [ngClass]=\"{\n                              'opacity-0!': !sort,\n                              'first-path:text-brand-primary': sort === 'ASC',\n                              'second-path:text-brand-primary': sort === 'DESC',\n                            }\" class=\"first-path:opacity-100 second-path:opacity-100 child-path:transition-all\" name=\"lucideArrowUpDown\"/>\n                          </button>\n  \n                          @if(item.tooltipInfo){\n                            <ng-icon name=\"lucideCircleQuestionMark\" [hlmTooltip]=\"item.tooltipInfo\" position=\"top\"></ng-icon>\n                          }\n                        </div>\n                      </th>\n                    }\n                  }\n                  @if (actionsEnd().length || hasPermissaoEdit || hasPermissaoDelete) {\n                    <th hlmTableHead>\n                      Ações\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody hlmTableBody class=\"relative\">\n                <!-- #region Loading -->\n                @if(loading()){\n                  @for (item of [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]; track $index) {\n                    <tr hlmTableRow class=\"animate-in slide-in-from-top-10\">\n                     @for (item of lstField(); track $index; let rowIndex = $index) {\n                        <td hlmTableCell class=\"py-3\">\n                          <hlm-skeleton class=\"h-3 w-25 rounded-full\" />\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n                <!-- #endregion Loading -->\n                @else if(error()){\n                  <tr hlmTableRow>\n                    <td hlmTableCell [attr.colspan]=\"lstField().length + actionsStart().length + actionsEnd().length\" class=\"text-center py-6 text-destructive\">\n                      Erro ao carregar os dados.\n                      <button hlmBtn variant=\"link\" size=\"sm\" (click)=\"refresh()\">Tentar novamente</button>\n                    </td>\n                  </tr>\n                }    \n                @else if(!loading() && lstItems().length){ \n                  @for (row of rows.value(); track row.item.uuid) {\n                    <tr hlmTableRow class=\"animate-in slide-in-from-top-10 cursor-pointer\" (click)=\"hasPermissaoEdit && edit(row.item)\">\n\n                      @if (actionsStart().length) {\n                        <td hlmTableCell>\n                          <div class=\"flex gap-1 justify-end items-center h-fit\">\n                            @for (action of actionsStart(); track $index) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"action.template\"\n                                  [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                                />\n                              </div>\n                            }\n                          </div>\n                        </td>\n                      }\n\n                      @for (field of lstField(); track field.index) {\n                        @if (!field.hiddenList) {\n                          <td hlmTableCell class=\"relative\">\n                            @let loading = loadingMap()[row.item.uuid]?.[field.index] || false;\n                            <loading [active]=\"loading\" />\n\n                            @let cell = row.cells[field.index];\n                            @if (cell.template; as template) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"template\"\n                                  [ngTemplateOutletContext]=\"{\n                                    $implicit: row.item,\n                                    value: row.item[field.index],\n                                    index: field.index,\n                                    label: field.label,\n                                    loading: loading,\n                                    readonly: field.readonly\n                                  }\"\n                                />\n                              </div>\n                            } @else if (cell.component; as component) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngComponentOutlet]=\"component\" />\n                              </div>\n                            } @else {\n                              <span class=\"p-2\" (click)=\"$event.stopPropagation()\">{{ cell.text }}</span>\n                            }\n                          </td>\n                        }\n                      }\n\n                      @if (actionsEnd().length || hasPermissaoEdit || hasPermissaoDelete) {\n                        <td hlmTableCell>\n                          <div class=\"flex gap-1 justify-end items-center h-fit\">\n                            @if(hasPermissaoEdit) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"templateView\"\n                                  [ngTemplateOutletContext]=\"{ $implicit: row.item.uuid }\"\n                                />\n                              </div>\n                            }\n\n                            @for (action of actionsEnd(); track $index) {\n                              <div (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"action.template\"\n                                  [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                                />\n                              </div>\n                            }\n\n                            @if(hasPermissaoDelete) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"templateDelete\"\n                                  [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                                />\n                              </div>\n                            }\n                          </div>\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              </tbody>\n            </table>\n          </div>\n\n          <div class=\"flex flex-col p-2 gap-2 mask-y-from-98% no-scrollbar overflow-y-auto size-full\">\n            @if(!loading()){\n              @for (row of rows.value(); track row.item.uuid) {\n                <div hlmCard class=\"animate-in slide-in-from-top-10 cursor-pointer shrink-0 p-2 flex flex-col gap-1.5\" (click)=\"hasPermissaoEdit && edit(row.item)\">\n                  @if (actionsStart().length) {\n                    <td hlmTableCell>\n                      <div class=\"flex gap-1 justify-end items-center h-fit\">\n                        @for (action of actionsStart(); track $index) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container\n                              [ngTemplateOutlet]=\"action.template\"\n                              [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                            />\n                          </div>\n                        }\n                      </div>\n                    </td>\n                  }\n  \n                  @for (field of lstField(); track field.index) {\n                    @if (!field.hiddenList) {\n                      <div class=\"relative\">\n                        @let loading = loadingMap()[row.item.uuid]?.[field.index] || false;\n                        <loading [active]=\"loading\" />\n                        \n                        <span class=\"text-sm text-muted-foreground\"> {{field.label}} </span> <br>\n\n                        @let cell = row.cells[field.index];\n                        @if (cell.template; as template) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container\n                              [ngTemplateOutlet]=\"template\"\n                              [ngTemplateOutletContext]=\"{\n                                $implicit: row.item,\n                                value: row.item[field.index],\n                                index: field.index,\n                                label: field.label,\n                                loading: loading,\n                                readonly: field.readonly\n                              }\"\n                            />\n                          </div>\n                        } @else if (cell.component; as component) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container [ngComponentOutlet]=\"component\" />\n                          </div>\n                        } @else {\n                          <span (click)=\"$event.stopPropagation()\">{{ cell.text }}</span>\n                        }\n                      </div>\n                    }\n                  }\n  \n                  @if (actionsEnd().length || hasPermissaoDelete) {\n                    <td hlmTableCell>\n                      <div class=\"flex gap-1 justify-end items-center h-fit\" (click)=\"$event.stopPropagation()\">\n                        @for (action of actionsEnd(); track $index) {\n                          <ng-container\n                            (click)=\"$event.stopPropagation()\"\n                            [ngTemplateOutlet]=\"action.template\"\n                            [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                          />\n                        }\n\n                        @if(hasPermissaoDelete) {\n                          <ng-container \n                            (click)=\"$event.stopPropagation()\"\n                            [ngTemplateOutlet]=\"templateDelete\" \n                            [ngTemplateOutletContext]=\"{ $implicit: row.item }\" \n                          />\n                        }\n                      </div>\n                    </td>\n                  }\n                </div>\n              }\n            }\n          </div>\n\n        </div>\n\n        <hlm-numbered-pagination \n          [(currentPage)]=\"page\" \n          [(itemsPerPage)]=\"limit\"\n          [totalItems]=\"total()\" \n        />\n      </div>\n    </hlm-card>\n  </div>\n</div>\n\n<ng-template #templateBool let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\" let-readonly=\"readonly\">\n  <div (click)=\"$event.stopPropagation()\">\n    <hlm-switch \n      [checked]=\"value\" \n      (checkedChange)=\"patch(item, $event, index)\" \n      class=\"mr-2\"\n      [disabled]=\"loading || readonly\" \n    />\n  </div>\n</ng-template>\n\n<ng-template #templateView let-uuid>\n  <button hlmBtn variant=\"ghost\" size=\"icon-sm\" [routerLink]=\"'./view/' + uuid\">\n    <ng-icon name=\"lucideChevronRight\"></ng-icon>\n  </button>\n</ng-template>\n\n<ng-template #templateDelete [schemaTableActions] let-item>\n  <button class=\"portrait:hidden\" hlmBtn variant=\"destructive\" size=\"icon-sm\" (click)=\"$event.stopPropagation(); deleteAlert(item)\">\n    <ng-icon name=\"lucideTrash2\"></ng-icon>\n  </button>\n  <button class=\"landscape:hidden\" hlmBtn variant=\"destructive\" size=\"sm\" (click)=\"$event.stopPropagation(); deleteAlert(item)\">\n    <ng-icon name=\"lucideTrash2\"></ng-icon>\n    <span> Excluir </span>\n  </button>\n</ng-template>\n\n<ng-template #templateIcon let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\">\n  <ng-icon [name]=\"value\" class=\"text-2xl\"/>\n</ng-template>\n\n<ng-template #templateFile let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\">\n  @let lstFile = fileItemsFromValue(value);\n  @if (lstFile.length) {\n    <div class=\"flex flex-col gap-1\" (click)=\"$event.stopPropagation()\">\n      @for (file of lstFile; track file.url) {\n        <div class=\"flex items-center gap-1 min-w-0\">\n          <file-preview [item]=\"file\" />\n          <span class=\"truncate max-w-48\">{{ file.name }}</span>\n        </div>\n      }\n    </div>\n  } @else {\n    <span>-</span>\n  }\n</ng-template>\n\n<ng-template #templateJSON let-item let-value=\"value\" let-label=\"label\" let-index=\"index\" let-loading=\"loading\">\n  <hlm-dialog>\n    \n    <button class=\"portrait:hidden\" hlmBtn hlmDialogTrigger size=\"icon-sm\" variant=\"outline\" (click)=\"$event.stopPropagation()\">\n      <ng-icon name=\"lucideCode\"></ng-icon>\n    </button>\n\n    <button class=\"landscape:hidden w-full\" hlmBtn hlmDialogTrigger size=\"sm\" variant=\"outline\" (click)=\"$event.stopPropagation()\">\n      <ng-icon name=\"lucideCode\"></ng-icon>\n      <span> {{label}} - JSON </span>\n    </button>\n\n    <hlm-dialog-content *hlmDialogPortal=\"let ctx\" class=\"flex max-h-[80vh] min-w-[50vw] flex-col\">\n      <hlm-dialog-header>\n        <h3 hlmDialogTitle>{{label}}</h3>\n      </hlm-dialog-header>\n      <hlm-code-block class=\"min-h-8\">\n        <hlm-code-block-header>\n          <!-- <hlm-code-block-title>Title goes here</hlm-code-block-title> -->\n          <hlm-code-block-actions>\n            <button hlmCodeBlockCopyButton [value]=\"value | json\"></button>\n          </hlm-code-block-actions>\n        </hlm-code-block-header>\n        <pre \n          class=\"min-h-fit\"\n          hlmCodeBlockContent \n          lineNumbers\n          wrap\n          [code]=\"value | json\"\n        >\n        </pre>\n      </hlm-code-block>\n      <hlm-dialog-footer>\n        <button hlmBtn variant=\"outline\" hlmDialogClose>\n          <ng-icon name=\"lucideCircleX\" class=\"text-lg shrink-0\"></ng-icon>\n          Fechar\n        </button>\n      </hlm-dialog-footer>\n    </hlm-dialog-content>\n  </hlm-dialog>\n\n</ng-template>",
+		template: "<div class=\"size-full flex flex-col gap-2\">\n  <div class=\"flex flex-col gap-3 flex-1 min-h-0\">\n    <breadcrumbs [items]=\"lstBreadCrumbs()\"></breadcrumbs>\n\n    <hlm-card class=\"flex-1 flex flex-col min-h-0 py-0\">\n      <div hlmCardContent class=\"flex flex-col flex-1 min-h-0 px-0\">\n        <div class=\"p-2 w-full flex flex-wrap md:flex-nowrap md:h-12 gap-2 items-center\">\n          <!-- <input hlmInput  placeholder=\"Pesquisar...\"/> -->\n\n          @if (!noQuery()) {\n            <div hlmInputGroup class=\"flex-1 min-w-0 md:flex-none md:min-w-32 md:max-w-1/3\">\n              <div hlmInputGroupAddon align=\"inline-start\">\n                <ng-icon name=\"lucideSearch\" />\n              </div>\n              <input hlmInputGroupInput placeholder=\"Pesquisar...\" [formField]=\"searchForm.query\" />\n            </div>\n          }\n\n          <ng-scrollbar class=\"order-last basis-full min-w-0 md:order-0 md:basis-auto md:flex-1\" hlm appearance=\"compact\">\n            <div class=\"flex w-max space-x-2 h-full items-center\" scrollViewport>\n              @for (item of lstField(); track item.index) {\n                @if (!item.hiddenList) {\n                  <schema-table-filter\n                    [label]=\"item.label\"\n                    [formField]=\"$any(lstFilterForms[$any(item.index)].value)\"\n                    [options]=\"item.options || null\"\n                    [type]=\"item.type\"\n                  ></schema-table-filter>\n                }\n              }\n            </div>\n          </ng-scrollbar>\n          @for (toolbar of toolbarStart(); track $index) {\n            <ng-container (click)=\"$event.stopPropagation()\" [ngTemplateOutlet]=\"toolbar.template\" />\n          }\n          @if (!noNew()) {\n            <button hlmBtn size=\"icon-sm\" variant=\"outline\" class=\"shrink-0\" (click)=\"novo()\" hlmTooltip=\"Novo\" position=\"top\">\n              <ng-icon name=\"lucideCirclePlus\" class=\"text-lg shrink-0\"></ng-icon>\n            </button>\n          }\n          <button hlmBtn size=\"icon-sm\" variant=\"outline\" class=\"shrink-0\" (click)=\"reset()\" hlmTooltip=\"Resetar filtros\" position=\"top\">\n            <ng-icon name=\"lucideSquareX\" class=\"text-lg shrink-0\"></ng-icon>\n          </button>\n          <button hlmBtn size=\"icon-sm\" class=\"shrink-0\" (click)=\"refresh()\" hlmTooltip=\"Atualizar dados\" position=\"top\">\n            <ng-icon name=\"lucideRefreshCcw\" class=\"text-lg shrink-0\"></ng-icon>\n          </button>\n          @for (toolbar of toolbarEnd(); track $index) {\n            <ng-container (click)=\"$event.stopPropagation()\" [ngTemplateOutlet]=\"toolbar.template\" />\n          }\n        </div>\n\n        <div class=\"flex-1 min-h-0 relative overflow-hidden\">\n          <div\n            [ngClass]=\"loading() ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10 pointer-events-none'\"\n            class=\"absolute mask-y-from-10% z-10 left-0 top-0 w-full h-full flex items-center justify-center bg-white/10 transition-all duration-300 ease-in-out\"\n          >\n            <hlm-spinner class=\"text-2xl\" />\n          </div>\n\n          @if (!loading() && !lstItems().length) {\n            <div class=\"absolute left-0 top-0 size-full flex items-center justify-center\">\n              <span> Nenhum dado encontrado. </span>\n            </div>\n            <!-- <tr hlmTableRow>\n              <td hlmTableCell [attr.colspan]=\"lstField().length + actionsStart().length + actionsEnd().length\" class=\"text-center py-6 text-muted-foreground\">\n              </td>\n            </tr> -->\n          }\n\n          <div hlmTableContainer class=\"h-full overflow-auto rounded-t-2xl portrait:hidden\">\n            <table hlmTable>\n              @let hasPermissaoEdit = editPermissao() | hasPermissao;\n              @let hasPermissaoDelete = deletePermissao() | hasPermissao;\n\n              <thead hlmTableHeader class=\"sticky top-0 z-1 backdrop-blur-2xl\">\n                <tr hlmTableRow>\n                  @if (actionsStart().length) {\n                    <th hlmTableHead></th>\n                  }\n                  @for (item of lstField(); track $index) {\n                    @if (!item.hiddenList) {\n                      <th hlmTableHead>\n                        <div class=\"flex justify-start items-center size-full gap-2\">\n                          @let sort = lstFieldSort()[item.index];\n\n                          <button hlmBtn size=\"sm\" variant=\"ghost\" class=\"capitalize\" (click)=\"onSort(item.index)\">\n                            {{ item.label }}\n                            <ng-icon\n                              [ngClass]=\"{\n                                'opacity-0!': !sort,\n                                'first-path:text-brand-primary': sort === 'ASC',\n                                'second-path:text-brand-primary': sort === 'DESC',\n                              }\"\n                              class=\"first-path:opacity-100 second-path:opacity-100 child-path:transition-all\"\n                              name=\"lucideArrowUpDown\"\n                            />\n                          </button>\n\n                          @if (item.tooltipInfo) {\n                            <ng-icon name=\"lucideCircleQuestionMark\" [hlmTooltip]=\"item.tooltipInfo\" position=\"top\"></ng-icon>\n                          }\n                        </div>\n                      </th>\n                    }\n                  }\n                  @if (actionsEnd().length || hasPermissaoEdit || hasPermissaoDelete) {\n                    <th hlmTableHead>Ações</th>\n                  }\n                </tr>\n              </thead>\n              <tbody hlmTableBody class=\"relative\">\n                <!-- #region Loading -->\n                @if (loading()) {\n                  @for (item of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track $index) {\n                    <tr hlmTableRow class=\"animate-in slide-in-from-top-10\">\n                      @for (item of lstField(); track $index; let rowIndex = $index) {\n                        <td hlmTableCell class=\"py-3\">\n                          <hlm-skeleton class=\"h-3 w-25 rounded-full\" />\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n                <!-- #endregion Loading -->\n                @else if (error()) {\n                  <tr hlmTableRow>\n                    <td hlmTableCell [attr.colspan]=\"lstField().length + actionsStart().length + actionsEnd().length\" class=\"text-center py-6 text-destructive\">\n                      Erro ao carregar os dados.\n                      <button hlmBtn variant=\"link\" size=\"sm\" (click)=\"refresh()\">Tentar novamente</button>\n                    </td>\n                  </tr>\n                } @else if (!loading() && lstItems().length) {\n                  @for (row of rows.value(); track row.item.uuid) {\n                    <tr hlmTableRow class=\"animate-in slide-in-from-top-10 cursor-pointer\" (click)=\"hasPermissaoEdit && edit(row.item)\">\n                      @if (actionsStart().length) {\n                        <td hlmTableCell>\n                          <div class=\"flex gap-1 justify-end items-center h-fit\">\n                            @for (action of actionsStart(); track $index) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngTemplateOutlet]=\"action.template\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                              </div>\n                            }\n                          </div>\n                        </td>\n                      }\n\n                      @for (field of lstField(); track field.index) {\n                        @if (!field.hiddenList) {\n                          <td hlmTableCell class=\"relative\">\n                            @let loading = loadingMap()[row.item.uuid]?.[field.index] || false;\n                            <loading [active]=\"loading\" />\n\n                            @let cell = row.cells[field.index];\n                            @if (cell.template; as template) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"template\"\n                                  [ngTemplateOutletContext]=\"{\n                                    $implicit: row.item,\n                                    value: row.item[field.index],\n                                    index: field.index,\n                                    label: field.label,\n                                    loading: loading,\n                                    readonly: field.readonly,\n                                  }\"\n                                />\n                              </div>\n                            } @else if (cell.component; as component) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngComponentOutlet]=\"component\" />\n                              </div>\n                            } @else {\n                              <span class=\"p-2\" (click)=\"$event.stopPropagation()\">{{ cell.text }}</span>\n                            }\n                          </td>\n                        }\n                      }\n\n                      @if (actionsEnd().length || hasPermissaoEdit || hasPermissaoDelete) {\n                        <td hlmTableCell>\n                          <div class=\"flex gap-1 justify-end items-center h-fit\">\n                            @if (hasPermissaoEdit) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngTemplateOutlet]=\"templateView\" [ngTemplateOutletContext]=\"{ $implicit: row.item.uuid }\" />\n                              </div>\n                            }\n\n                            @for (action of actionsEnd(); track $index) {\n                              <div (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngTemplateOutlet]=\"action.template\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                              </div>\n                            }\n\n                            @if (hasPermissaoDelete) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngTemplateOutlet]=\"templateDelete\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                              </div>\n                            }\n                          </div>\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              </tbody>\n            </table>\n          </div>\n\n          <div class=\"flex flex-col p-2 gap-2 mask-y-from-98% no-scrollbar overflow-y-auto size-full\">\n            @if (!loading()) {\n              @for (row of rows.value(); track row.item.uuid) {\n                <div\n                  hlmCard\n                  class=\"animate-in slide-in-from-top-10 cursor-pointer shrink-0 p-2 flex flex-col gap-1.5\"\n                  (click)=\"hasPermissaoEdit && edit(row.item)\"\n                >\n                  @if (actionsStart().length) {\n                    <td hlmTableCell>\n                      <div class=\"flex gap-1 justify-end items-center h-fit\">\n                        @for (action of actionsStart(); track $index) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container [ngTemplateOutlet]=\"action.template\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                          </div>\n                        }\n                      </div>\n                    </td>\n                  }\n\n                  @for (field of lstField(); track field.index) {\n                    @if (!field.hiddenList) {\n                      <div class=\"relative\">\n                        @let loading = loadingMap()[row.item.uuid]?.[field.index] || false;\n                        <loading [active]=\"loading\" />\n\n                        <span class=\"text-sm text-muted-foreground\"> {{ field.label }} </span> <br />\n\n                        @let cell = row.cells[field.index];\n                        @if (cell.template; as template) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container\n                              [ngTemplateOutlet]=\"template\"\n                              [ngTemplateOutletContext]=\"{\n                                $implicit: row.item,\n                                value: row.item[field.index],\n                                index: field.index,\n                                label: field.label,\n                                loading: loading,\n                                readonly: field.readonly,\n                              }\"\n                            />\n                          </div>\n                        } @else if (cell.component; as component) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container [ngComponentOutlet]=\"component\" />\n                          </div>\n                        } @else {\n                          <span (click)=\"$event.stopPropagation()\">{{ cell.text }}</span>\n                        }\n                      </div>\n                    }\n                  }\n\n                  @if (actionsEnd().length || hasPermissaoDelete) {\n                    <td hlmTableCell>\n                      <div class=\"flex gap-1 justify-end items-center h-fit\" (click)=\"$event.stopPropagation()\">\n                        @for (action of actionsEnd(); track $index) {\n                          <ng-container\n                            (click)=\"$event.stopPropagation()\"\n                            [ngTemplateOutlet]=\"action.template\"\n                            [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                          />\n                        }\n\n                        @if (hasPermissaoDelete) {\n                          <ng-container\n                            (click)=\"$event.stopPropagation()\"\n                            [ngTemplateOutlet]=\"templateDelete\"\n                            [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                          />\n                        }\n                      </div>\n                    </td>\n                  }\n                </div>\n              }\n            }\n          </div>\n        </div>\n\n        <hlm-numbered-pagination [(currentPage)]=\"page\" [(itemsPerPage)]=\"limit\" [totalItems]=\"total()\" />\n      </div>\n    </hlm-card>\n  </div>\n</div>\n\n<ng-template #templateBool let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\" let-readonly=\"readonly\">\n  <div (click)=\"$event.stopPropagation()\">\n    <hlm-switch [checked]=\"value\" (checkedChange)=\"patch(item, $event, index)\" class=\"mr-2\" [disabled]=\"loading || readonly\" />\n  </div>\n</ng-template>\n\n<ng-template #templateView let-uuid>\n  <button hlmBtn variant=\"ghost\" size=\"icon-sm\" [routerLink]=\"'./view/' + uuid\">\n    <ng-icon name=\"lucideChevronRight\"></ng-icon>\n  </button>\n</ng-template>\n\n<ng-template #templateDelete [schemaTableActions] let-item>\n  <button class=\"portrait:hidden\" hlmBtn variant=\"destructive\" size=\"icon-sm\" (click)=\"$event.stopPropagation(); deleteAlert(item)\">\n    <ng-icon name=\"lucideTrash2\"></ng-icon>\n  </button>\n  <button class=\"landscape:hidden\" hlmBtn variant=\"destructive\" size=\"sm\" (click)=\"$event.stopPropagation(); deleteAlert(item)\">\n    <ng-icon name=\"lucideTrash2\"></ng-icon>\n    <span> Excluir </span>\n  </button>\n</ng-template>\n\n<ng-template #templateIcon let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\">\n  <ng-icon [name]=\"value\" class=\"text-2xl\" />\n</ng-template>\n\n<ng-template #templateFile let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\">\n  @let lstFile = fileItemsFromValue(value);\n  @if (lstFile.length) {\n    <div class=\"flex flex-col gap-1\" (click)=\"$event.stopPropagation()\">\n      @for (file of lstFile; track file.url) {\n        <div class=\"flex items-center gap-1 min-w-0\">\n          <file-preview [item]=\"file\" />\n          <span class=\"truncate max-w-48\">{{ file.name }}</span>\n        </div>\n      }\n    </div>\n  } @else {\n    <span>-</span>\n  }\n</ng-template>\n\n<ng-template #templateJSON let-item let-value=\"value\" let-label=\"label\" let-index=\"index\" let-loading=\"loading\">\n  <hlm-dialog>\n    <button class=\"portrait:hidden\" hlmBtn hlmDialogTrigger size=\"icon-sm\" variant=\"outline\" (click)=\"$event.stopPropagation()\">\n      <ng-icon name=\"lucideCode\"></ng-icon>\n    </button>\n\n    <button class=\"landscape:hidden w-full\" hlmBtn hlmDialogTrigger size=\"sm\" variant=\"outline\" (click)=\"$event.stopPropagation()\">\n      <ng-icon name=\"lucideCode\"></ng-icon>\n      <span> {{ label }} - JSON </span>\n    </button>\n\n    <hlm-dialog-content *hlmDialogPortal=\"let ctx\" class=\"flex max-h-[80vh] min-w-[50vw] flex-col\">\n      <hlm-dialog-header>\n        <h3 hlmDialogTitle>{{ label }}</h3>\n      </hlm-dialog-header>\n      <hlm-code-block class=\"min-h-8\">\n        <hlm-code-block-header>\n          <!-- <hlm-code-block-title>Title goes here</hlm-code-block-title> -->\n          <hlm-code-block-actions>\n            <button hlmCodeBlockCopyButton [value]=\"value | json\"></button>\n          </hlm-code-block-actions>\n        </hlm-code-block-header>\n        <pre class=\"min-h-fit\" hlmCodeBlockContent lineNumbers wrap [code]=\"value | json\"></pre>\n      </hlm-code-block>\n      <hlm-dialog-footer>\n        <button hlmBtn variant=\"outline\" hlmDialogClose>\n          <ng-icon name=\"lucideCircleX\" class=\"text-lg shrink-0\"></ng-icon>\n          Fechar\n        </button>\n      </hlm-dialog-footer>\n    </hlm-dialog-content>\n  </hlm-dialog>\n</ng-template>\n",
 		styles: [":host{@apply block size-full;}\n"],
 		dependencies: [
 			{
@@ -8165,7 +8168,7 @@ i0.ɵɵngDeclareClassMetadata({
 				BreadcrumbsComponent
 			],
 			providers: [provideBrnTooltipGroup()],
-			template: "<div class=\"size-full flex flex-col gap-2\">\n  <div class=\"flex flex-col gap-3 flex-1 min-h-0\">\n    <breadcrumbs [items]=\"lstBreadCrumbs()\"></breadcrumbs>\n    \n    <hlm-card class=\"flex-1 flex flex-col min-h-0 py-0\">\n      <div hlmCardContent class=\"flex flex-col flex-1 min-h-0 px-0\">\n        <div class=\"p-2 w-full flex flex-wrap md:flex-nowrap md:h-12 gap-2 items-center\">\n          <!-- <input hlmInput  placeholder=\"Pesquisar...\"/> -->\n          \n          @if(!noQuery()){\n            <div hlmInputGroup class=\"flex-1 min-w-0 md:flex-none md:min-w-32 md:max-w-1/3\">\n              <div hlmInputGroupAddon align=\"inline-start\">\n                <ng-icon name=\"lucideSearch\" />\n              </div>\n              <input hlmInputGroupInput placeholder=\"Pesquisar...\" [formField]=\"searchForm.query\" />\n            </div>\n          }\n          \n          <ng-scrollbar class=\"order-last basis-full min-w-0 md:order-0 md:basis-auto md:flex-1\" hlm appearance=\"compact\">\n            <div class=\"flex w-max space-x-2 h-full items-center\" scrollViewport>\n              @for (item of lstField(); track item.index) {\n                @if(!item.hiddenList){\n                  <schema-table-filter\n                    [label]=\"item.label\"\n                    [formField]=\"$any(lstFilterForms[$any(item.index)].value)\"\n                    [options]=\"item.options || null\"\n                    [type]=\"item.type\"\n                  ></schema-table-filter>\n                }\n              }\n            </div>\n          </ng-scrollbar>\n          @for (toolbar of toolbarStart(); track $index) {\n            <ng-container\n              (click)=\"$event.stopPropagation()\"\n              [ngTemplateOutlet]=\"toolbar.template\"\n            />\n          }\n          @if(!noNew()){\n            <button hlmBtn size=\"icon-sm\" variant=\"outline\" class=\"shrink-0\" (click)=\"novo()\" hlmTooltip=\"Novo\" position=\"top\">\n              <ng-icon name=\"lucideCirclePlus\" class=\"text-lg shrink-0\"></ng-icon>\n            </button>\n          }\n          <button hlmBtn size=\"icon-sm\" variant=\"outline\" class=\"shrink-0\" (click)=\"reset()\" hlmTooltip=\"Resetar filtros\" position=\"top\">\n            <ng-icon name=\"lucideSquareX\" class=\"text-lg shrink-0\"></ng-icon>\n          </button>\n          <button hlmBtn size=\"icon-sm\" class=\"shrink-0\" (click)=\"refresh()\" hlmTooltip=\"Atualizar dados\" position=\"top\">\n            <ng-icon name=\"lucideRefreshCcw\" class=\"text-lg shrink-0\"></ng-icon>\n          </button>\n          @for (toolbar of toolbarEnd(); track $index) {\n            <ng-container\n              (click)=\"$event.stopPropagation()\"\n              [ngTemplateOutlet]=\"toolbar.template\"\n            />\n          }\n        </div>\n\n        <div class=\"flex-1 min-h-0 relative overflow-hidden\">\n          <div\n            [ngClass]=\"loading() ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10 pointer-events-none'\"\n            class=\"absolute mask-y-from-10% z-10 left-0 top-0 w-full h-full flex items-center justify-center bg-white/10 transition-all duration-300 ease-in-out\">\n            <hlm-spinner class=\"text-2xl\"/>\n          </div>\n          \n          @if(!loading() && !lstItems().length){\n           <div class=\"absolute left-0 top-0 size-full flex items-center justify-center\">\n            <span>\n              Nenhum dado encontrado.\n            </span>\n           </div>\n            <!-- <tr hlmTableRow>\n              <td hlmTableCell [attr.colspan]=\"lstField().length + actionsStart().length + actionsEnd().length\" class=\"text-center py-6 text-muted-foreground\">\n              </td>\n            </tr> -->\n          }\n\n          <div hlmTableContainer class=\"h-full overflow-auto rounded-t-2xl portrait:hidden\">\n            <table hlmTable>\n              @let hasPermissaoEdit = editPermissao() | hasPermissao;\n              @let hasPermissaoDelete = deletePermissao() | hasPermissao;\n\n              <thead hlmTableHeader class=\"sticky top-0 z-1 backdrop-blur-2xl\">\n                <tr hlmTableRow>\n                  @if (actionsStart().length) {\n                    <th hlmTableHead></th>\n                  }\n                  @for (item of lstField(); track $index) {\n                    @if (!item.hiddenList) {\n                      <th hlmTableHead>\n                        <div class=\"flex justify-start items-center size-full gap-2\">\n                          @let sort = lstFieldSort()[item.index];\n  \n                          <button hlmBtn size=\"sm\" variant=\"ghost\" class=\"capitalize\" (click)=\"onSort(item.index)\">\n                            {{ item.label }}\n                            <ng-icon [ngClass]=\"{\n                              'opacity-0!': !sort,\n                              'first-path:text-brand-primary': sort === 'ASC',\n                              'second-path:text-brand-primary': sort === 'DESC',\n                            }\" class=\"first-path:opacity-100 second-path:opacity-100 child-path:transition-all\" name=\"lucideArrowUpDown\"/>\n                          </button>\n  \n                          @if(item.tooltipInfo){\n                            <ng-icon name=\"lucideCircleQuestionMark\" [hlmTooltip]=\"item.tooltipInfo\" position=\"top\"></ng-icon>\n                          }\n                        </div>\n                      </th>\n                    }\n                  }\n                  @if (actionsEnd().length || hasPermissaoEdit || hasPermissaoDelete) {\n                    <th hlmTableHead>\n                      Ações\n                    </th>\n                  }\n                </tr>\n              </thead>\n              <tbody hlmTableBody class=\"relative\">\n                <!-- #region Loading -->\n                @if(loading()){\n                  @for (item of [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]; track $index) {\n                    <tr hlmTableRow class=\"animate-in slide-in-from-top-10\">\n                     @for (item of lstField(); track $index; let rowIndex = $index) {\n                        <td hlmTableCell class=\"py-3\">\n                          <hlm-skeleton class=\"h-3 w-25 rounded-full\" />\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n                <!-- #endregion Loading -->\n                @else if(error()){\n                  <tr hlmTableRow>\n                    <td hlmTableCell [attr.colspan]=\"lstField().length + actionsStart().length + actionsEnd().length\" class=\"text-center py-6 text-destructive\">\n                      Erro ao carregar os dados.\n                      <button hlmBtn variant=\"link\" size=\"sm\" (click)=\"refresh()\">Tentar novamente</button>\n                    </td>\n                  </tr>\n                }    \n                @else if(!loading() && lstItems().length){ \n                  @for (row of rows.value(); track row.item.uuid) {\n                    <tr hlmTableRow class=\"animate-in slide-in-from-top-10 cursor-pointer\" (click)=\"hasPermissaoEdit && edit(row.item)\">\n\n                      @if (actionsStart().length) {\n                        <td hlmTableCell>\n                          <div class=\"flex gap-1 justify-end items-center h-fit\">\n                            @for (action of actionsStart(); track $index) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"action.template\"\n                                  [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                                />\n                              </div>\n                            }\n                          </div>\n                        </td>\n                      }\n\n                      @for (field of lstField(); track field.index) {\n                        @if (!field.hiddenList) {\n                          <td hlmTableCell class=\"relative\">\n                            @let loading = loadingMap()[row.item.uuid]?.[field.index] || false;\n                            <loading [active]=\"loading\" />\n\n                            @let cell = row.cells[field.index];\n                            @if (cell.template; as template) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"template\"\n                                  [ngTemplateOutletContext]=\"{\n                                    $implicit: row.item,\n                                    value: row.item[field.index],\n                                    index: field.index,\n                                    label: field.label,\n                                    loading: loading,\n                                    readonly: field.readonly\n                                  }\"\n                                />\n                              </div>\n                            } @else if (cell.component; as component) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngComponentOutlet]=\"component\" />\n                              </div>\n                            } @else {\n                              <span class=\"p-2\" (click)=\"$event.stopPropagation()\">{{ cell.text }}</span>\n                            }\n                          </td>\n                        }\n                      }\n\n                      @if (actionsEnd().length || hasPermissaoEdit || hasPermissaoDelete) {\n                        <td hlmTableCell>\n                          <div class=\"flex gap-1 justify-end items-center h-fit\">\n                            @if(hasPermissaoEdit) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"templateView\"\n                                  [ngTemplateOutletContext]=\"{ $implicit: row.item.uuid }\"\n                                />\n                              </div>\n                            }\n\n                            @for (action of actionsEnd(); track $index) {\n                              <div (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"action.template\"\n                                  [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                                />\n                              </div>\n                            }\n\n                            @if(hasPermissaoDelete) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"templateDelete\"\n                                  [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                                />\n                              </div>\n                            }\n                          </div>\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              </tbody>\n            </table>\n          </div>\n\n          <div class=\"flex flex-col p-2 gap-2 mask-y-from-98% no-scrollbar overflow-y-auto size-full\">\n            @if(!loading()){\n              @for (row of rows.value(); track row.item.uuid) {\n                <div hlmCard class=\"animate-in slide-in-from-top-10 cursor-pointer shrink-0 p-2 flex flex-col gap-1.5\" (click)=\"hasPermissaoEdit && edit(row.item)\">\n                  @if (actionsStart().length) {\n                    <td hlmTableCell>\n                      <div class=\"flex gap-1 justify-end items-center h-fit\">\n                        @for (action of actionsStart(); track $index) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container\n                              [ngTemplateOutlet]=\"action.template\"\n                              [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                            />\n                          </div>\n                        }\n                      </div>\n                    </td>\n                  }\n  \n                  @for (field of lstField(); track field.index) {\n                    @if (!field.hiddenList) {\n                      <div class=\"relative\">\n                        @let loading = loadingMap()[row.item.uuid]?.[field.index] || false;\n                        <loading [active]=\"loading\" />\n                        \n                        <span class=\"text-sm text-muted-foreground\"> {{field.label}} </span> <br>\n\n                        @let cell = row.cells[field.index];\n                        @if (cell.template; as template) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container\n                              [ngTemplateOutlet]=\"template\"\n                              [ngTemplateOutletContext]=\"{\n                                $implicit: row.item,\n                                value: row.item[field.index],\n                                index: field.index,\n                                label: field.label,\n                                loading: loading,\n                                readonly: field.readonly\n                              }\"\n                            />\n                          </div>\n                        } @else if (cell.component; as component) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container [ngComponentOutlet]=\"component\" />\n                          </div>\n                        } @else {\n                          <span (click)=\"$event.stopPropagation()\">{{ cell.text }}</span>\n                        }\n                      </div>\n                    }\n                  }\n  \n                  @if (actionsEnd().length || hasPermissaoDelete) {\n                    <td hlmTableCell>\n                      <div class=\"flex gap-1 justify-end items-center h-fit\" (click)=\"$event.stopPropagation()\">\n                        @for (action of actionsEnd(); track $index) {\n                          <ng-container\n                            (click)=\"$event.stopPropagation()\"\n                            [ngTemplateOutlet]=\"action.template\"\n                            [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                          />\n                        }\n\n                        @if(hasPermissaoDelete) {\n                          <ng-container \n                            (click)=\"$event.stopPropagation()\"\n                            [ngTemplateOutlet]=\"templateDelete\" \n                            [ngTemplateOutletContext]=\"{ $implicit: row.item }\" \n                          />\n                        }\n                      </div>\n                    </td>\n                  }\n                </div>\n              }\n            }\n          </div>\n\n        </div>\n\n        <hlm-numbered-pagination \n          [(currentPage)]=\"page\" \n          [(itemsPerPage)]=\"limit\"\n          [totalItems]=\"total()\" \n        />\n      </div>\n    </hlm-card>\n  </div>\n</div>\n\n<ng-template #templateBool let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\" let-readonly=\"readonly\">\n  <div (click)=\"$event.stopPropagation()\">\n    <hlm-switch \n      [checked]=\"value\" \n      (checkedChange)=\"patch(item, $event, index)\" \n      class=\"mr-2\"\n      [disabled]=\"loading || readonly\" \n    />\n  </div>\n</ng-template>\n\n<ng-template #templateView let-uuid>\n  <button hlmBtn variant=\"ghost\" size=\"icon-sm\" [routerLink]=\"'./view/' + uuid\">\n    <ng-icon name=\"lucideChevronRight\"></ng-icon>\n  </button>\n</ng-template>\n\n<ng-template #templateDelete [schemaTableActions] let-item>\n  <button class=\"portrait:hidden\" hlmBtn variant=\"destructive\" size=\"icon-sm\" (click)=\"$event.stopPropagation(); deleteAlert(item)\">\n    <ng-icon name=\"lucideTrash2\"></ng-icon>\n  </button>\n  <button class=\"landscape:hidden\" hlmBtn variant=\"destructive\" size=\"sm\" (click)=\"$event.stopPropagation(); deleteAlert(item)\">\n    <ng-icon name=\"lucideTrash2\"></ng-icon>\n    <span> Excluir </span>\n  </button>\n</ng-template>\n\n<ng-template #templateIcon let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\">\n  <ng-icon [name]=\"value\" class=\"text-2xl\"/>\n</ng-template>\n\n<ng-template #templateFile let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\">\n  @let lstFile = fileItemsFromValue(value);\n  @if (lstFile.length) {\n    <div class=\"flex flex-col gap-1\" (click)=\"$event.stopPropagation()\">\n      @for (file of lstFile; track file.url) {\n        <div class=\"flex items-center gap-1 min-w-0\">\n          <file-preview [item]=\"file\" />\n          <span class=\"truncate max-w-48\">{{ file.name }}</span>\n        </div>\n      }\n    </div>\n  } @else {\n    <span>-</span>\n  }\n</ng-template>\n\n<ng-template #templateJSON let-item let-value=\"value\" let-label=\"label\" let-index=\"index\" let-loading=\"loading\">\n  <hlm-dialog>\n    \n    <button class=\"portrait:hidden\" hlmBtn hlmDialogTrigger size=\"icon-sm\" variant=\"outline\" (click)=\"$event.stopPropagation()\">\n      <ng-icon name=\"lucideCode\"></ng-icon>\n    </button>\n\n    <button class=\"landscape:hidden w-full\" hlmBtn hlmDialogTrigger size=\"sm\" variant=\"outline\" (click)=\"$event.stopPropagation()\">\n      <ng-icon name=\"lucideCode\"></ng-icon>\n      <span> {{label}} - JSON </span>\n    </button>\n\n    <hlm-dialog-content *hlmDialogPortal=\"let ctx\" class=\"flex max-h-[80vh] min-w-[50vw] flex-col\">\n      <hlm-dialog-header>\n        <h3 hlmDialogTitle>{{label}}</h3>\n      </hlm-dialog-header>\n      <hlm-code-block class=\"min-h-8\">\n        <hlm-code-block-header>\n          <!-- <hlm-code-block-title>Title goes here</hlm-code-block-title> -->\n          <hlm-code-block-actions>\n            <button hlmCodeBlockCopyButton [value]=\"value | json\"></button>\n          </hlm-code-block-actions>\n        </hlm-code-block-header>\n        <pre \n          class=\"min-h-fit\"\n          hlmCodeBlockContent \n          lineNumbers\n          wrap\n          [code]=\"value | json\"\n        >\n        </pre>\n      </hlm-code-block>\n      <hlm-dialog-footer>\n        <button hlmBtn variant=\"outline\" hlmDialogClose>\n          <ng-icon name=\"lucideCircleX\" class=\"text-lg shrink-0\"></ng-icon>\n          Fechar\n        </button>\n      </hlm-dialog-footer>\n    </hlm-dialog-content>\n  </hlm-dialog>\n\n</ng-template>",
+			template: "<div class=\"size-full flex flex-col gap-2\">\n  <div class=\"flex flex-col gap-3 flex-1 min-h-0\">\n    <breadcrumbs [items]=\"lstBreadCrumbs()\"></breadcrumbs>\n\n    <hlm-card class=\"flex-1 flex flex-col min-h-0 py-0\">\n      <div hlmCardContent class=\"flex flex-col flex-1 min-h-0 px-0\">\n        <div class=\"p-2 w-full flex flex-wrap md:flex-nowrap md:h-12 gap-2 items-center\">\n          <!-- <input hlmInput  placeholder=\"Pesquisar...\"/> -->\n\n          @if (!noQuery()) {\n            <div hlmInputGroup class=\"flex-1 min-w-0 md:flex-none md:min-w-32 md:max-w-1/3\">\n              <div hlmInputGroupAddon align=\"inline-start\">\n                <ng-icon name=\"lucideSearch\" />\n              </div>\n              <input hlmInputGroupInput placeholder=\"Pesquisar...\" [formField]=\"searchForm.query\" />\n            </div>\n          }\n\n          <ng-scrollbar class=\"order-last basis-full min-w-0 md:order-0 md:basis-auto md:flex-1\" hlm appearance=\"compact\">\n            <div class=\"flex w-max space-x-2 h-full items-center\" scrollViewport>\n              @for (item of lstField(); track item.index) {\n                @if (!item.hiddenList) {\n                  <schema-table-filter\n                    [label]=\"item.label\"\n                    [formField]=\"$any(lstFilterForms[$any(item.index)].value)\"\n                    [options]=\"item.options || null\"\n                    [type]=\"item.type\"\n                  ></schema-table-filter>\n                }\n              }\n            </div>\n          </ng-scrollbar>\n          @for (toolbar of toolbarStart(); track $index) {\n            <ng-container (click)=\"$event.stopPropagation()\" [ngTemplateOutlet]=\"toolbar.template\" />\n          }\n          @if (!noNew()) {\n            <button hlmBtn size=\"icon-sm\" variant=\"outline\" class=\"shrink-0\" (click)=\"novo()\" hlmTooltip=\"Novo\" position=\"top\">\n              <ng-icon name=\"lucideCirclePlus\" class=\"text-lg shrink-0\"></ng-icon>\n            </button>\n          }\n          <button hlmBtn size=\"icon-sm\" variant=\"outline\" class=\"shrink-0\" (click)=\"reset()\" hlmTooltip=\"Resetar filtros\" position=\"top\">\n            <ng-icon name=\"lucideSquareX\" class=\"text-lg shrink-0\"></ng-icon>\n          </button>\n          <button hlmBtn size=\"icon-sm\" class=\"shrink-0\" (click)=\"refresh()\" hlmTooltip=\"Atualizar dados\" position=\"top\">\n            <ng-icon name=\"lucideRefreshCcw\" class=\"text-lg shrink-0\"></ng-icon>\n          </button>\n          @for (toolbar of toolbarEnd(); track $index) {\n            <ng-container (click)=\"$event.stopPropagation()\" [ngTemplateOutlet]=\"toolbar.template\" />\n          }\n        </div>\n\n        <div class=\"flex-1 min-h-0 relative overflow-hidden\">\n          <div\n            [ngClass]=\"loading() ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10 pointer-events-none'\"\n            class=\"absolute mask-y-from-10% z-10 left-0 top-0 w-full h-full flex items-center justify-center bg-white/10 transition-all duration-300 ease-in-out\"\n          >\n            <hlm-spinner class=\"text-2xl\" />\n          </div>\n\n          @if (!loading() && !lstItems().length) {\n            <div class=\"absolute left-0 top-0 size-full flex items-center justify-center\">\n              <span> Nenhum dado encontrado. </span>\n            </div>\n            <!-- <tr hlmTableRow>\n              <td hlmTableCell [attr.colspan]=\"lstField().length + actionsStart().length + actionsEnd().length\" class=\"text-center py-6 text-muted-foreground\">\n              </td>\n            </tr> -->\n          }\n\n          <div hlmTableContainer class=\"h-full overflow-auto rounded-t-2xl portrait:hidden\">\n            <table hlmTable>\n              @let hasPermissaoEdit = editPermissao() | hasPermissao;\n              @let hasPermissaoDelete = deletePermissao() | hasPermissao;\n\n              <thead hlmTableHeader class=\"sticky top-0 z-1 backdrop-blur-2xl\">\n                <tr hlmTableRow>\n                  @if (actionsStart().length) {\n                    <th hlmTableHead></th>\n                  }\n                  @for (item of lstField(); track $index) {\n                    @if (!item.hiddenList) {\n                      <th hlmTableHead>\n                        <div class=\"flex justify-start items-center size-full gap-2\">\n                          @let sort = lstFieldSort()[item.index];\n\n                          <button hlmBtn size=\"sm\" variant=\"ghost\" class=\"capitalize\" (click)=\"onSort(item.index)\">\n                            {{ item.label }}\n                            <ng-icon\n                              [ngClass]=\"{\n                                'opacity-0!': !sort,\n                                'first-path:text-brand-primary': sort === 'ASC',\n                                'second-path:text-brand-primary': sort === 'DESC',\n                              }\"\n                              class=\"first-path:opacity-100 second-path:opacity-100 child-path:transition-all\"\n                              name=\"lucideArrowUpDown\"\n                            />\n                          </button>\n\n                          @if (item.tooltipInfo) {\n                            <ng-icon name=\"lucideCircleQuestionMark\" [hlmTooltip]=\"item.tooltipInfo\" position=\"top\"></ng-icon>\n                          }\n                        </div>\n                      </th>\n                    }\n                  }\n                  @if (actionsEnd().length || hasPermissaoEdit || hasPermissaoDelete) {\n                    <th hlmTableHead>Ações</th>\n                  }\n                </tr>\n              </thead>\n              <tbody hlmTableBody class=\"relative\">\n                <!-- #region Loading -->\n                @if (loading()) {\n                  @for (item of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; track $index) {\n                    <tr hlmTableRow class=\"animate-in slide-in-from-top-10\">\n                      @for (item of lstField(); track $index; let rowIndex = $index) {\n                        <td hlmTableCell class=\"py-3\">\n                          <hlm-skeleton class=\"h-3 w-25 rounded-full\" />\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n                <!-- #endregion Loading -->\n                @else if (error()) {\n                  <tr hlmTableRow>\n                    <td hlmTableCell [attr.colspan]=\"lstField().length + actionsStart().length + actionsEnd().length\" class=\"text-center py-6 text-destructive\">\n                      Erro ao carregar os dados.\n                      <button hlmBtn variant=\"link\" size=\"sm\" (click)=\"refresh()\">Tentar novamente</button>\n                    </td>\n                  </tr>\n                } @else if (!loading() && lstItems().length) {\n                  @for (row of rows.value(); track row.item.uuid) {\n                    <tr hlmTableRow class=\"animate-in slide-in-from-top-10 cursor-pointer\" (click)=\"hasPermissaoEdit && edit(row.item)\">\n                      @if (actionsStart().length) {\n                        <td hlmTableCell>\n                          <div class=\"flex gap-1 justify-end items-center h-fit\">\n                            @for (action of actionsStart(); track $index) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngTemplateOutlet]=\"action.template\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                              </div>\n                            }\n                          </div>\n                        </td>\n                      }\n\n                      @for (field of lstField(); track field.index) {\n                        @if (!field.hiddenList) {\n                          <td hlmTableCell class=\"relative\">\n                            @let loading = loadingMap()[row.item.uuid]?.[field.index] || false;\n                            <loading [active]=\"loading\" />\n\n                            @let cell = row.cells[field.index];\n                            @if (cell.template; as template) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container\n                                  [ngTemplateOutlet]=\"template\"\n                                  [ngTemplateOutletContext]=\"{\n                                    $implicit: row.item,\n                                    value: row.item[field.index],\n                                    index: field.index,\n                                    label: field.label,\n                                    loading: loading,\n                                    readonly: field.readonly,\n                                  }\"\n                                />\n                              </div>\n                            } @else if (cell.component; as component) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngComponentOutlet]=\"component\" />\n                              </div>\n                            } @else {\n                              <span class=\"p-2\" (click)=\"$event.stopPropagation()\">{{ cell.text }}</span>\n                            }\n                          </td>\n                        }\n                      }\n\n                      @if (actionsEnd().length || hasPermissaoEdit || hasPermissaoDelete) {\n                        <td hlmTableCell>\n                          <div class=\"flex gap-1 justify-end items-center h-fit\">\n                            @if (hasPermissaoEdit) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngTemplateOutlet]=\"templateView\" [ngTemplateOutletContext]=\"{ $implicit: row.item.uuid }\" />\n                              </div>\n                            }\n\n                            @for (action of actionsEnd(); track $index) {\n                              <div (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngTemplateOutlet]=\"action.template\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                              </div>\n                            }\n\n                            @if (hasPermissaoDelete) {\n                              <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                                <ng-container [ngTemplateOutlet]=\"templateDelete\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                              </div>\n                            }\n                          </div>\n                        </td>\n                      }\n                    </tr>\n                  }\n                }\n              </tbody>\n            </table>\n          </div>\n\n          <div class=\"flex flex-col p-2 gap-2 mask-y-from-98% no-scrollbar overflow-y-auto size-full\">\n            @if (!loading()) {\n              @for (row of rows.value(); track row.item.uuid) {\n                <div\n                  hlmCard\n                  class=\"animate-in slide-in-from-top-10 cursor-pointer shrink-0 p-2 flex flex-col gap-1.5\"\n                  (click)=\"hasPermissaoEdit && edit(row.item)\"\n                >\n                  @if (actionsStart().length) {\n                    <td hlmTableCell>\n                      <div class=\"flex gap-1 justify-end items-center h-fit\">\n                        @for (action of actionsStart(); track $index) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container [ngTemplateOutlet]=\"action.template\" [ngTemplateOutletContext]=\"{ $implicit: row.item }\" />\n                          </div>\n                        }\n                      </div>\n                    </td>\n                  }\n\n                  @for (field of lstField(); track field.index) {\n                    @if (!field.hiddenList) {\n                      <div class=\"relative\">\n                        @let loading = loadingMap()[row.item.uuid]?.[field.index] || false;\n                        <loading [active]=\"loading\" />\n\n                        <span class=\"text-sm text-muted-foreground\"> {{ field.label }} </span> <br />\n\n                        @let cell = row.cells[field.index];\n                        @if (cell.template; as template) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container\n                              [ngTemplateOutlet]=\"template\"\n                              [ngTemplateOutletContext]=\"{\n                                $implicit: row.item,\n                                value: row.item[field.index],\n                                index: field.index,\n                                label: field.label,\n                                loading: loading,\n                                readonly: field.readonly,\n                              }\"\n                            />\n                          </div>\n                        } @else if (cell.component; as component) {\n                          <div class=\"contents\" (click)=\"$event.stopPropagation()\">\n                            <ng-container [ngComponentOutlet]=\"component\" />\n                          </div>\n                        } @else {\n                          <span (click)=\"$event.stopPropagation()\">{{ cell.text }}</span>\n                        }\n                      </div>\n                    }\n                  }\n\n                  @if (actionsEnd().length || hasPermissaoDelete) {\n                    <td hlmTableCell>\n                      <div class=\"flex gap-1 justify-end items-center h-fit\" (click)=\"$event.stopPropagation()\">\n                        @for (action of actionsEnd(); track $index) {\n                          <ng-container\n                            (click)=\"$event.stopPropagation()\"\n                            [ngTemplateOutlet]=\"action.template\"\n                            [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                          />\n                        }\n\n                        @if (hasPermissaoDelete) {\n                          <ng-container\n                            (click)=\"$event.stopPropagation()\"\n                            [ngTemplateOutlet]=\"templateDelete\"\n                            [ngTemplateOutletContext]=\"{ $implicit: row.item }\"\n                          />\n                        }\n                      </div>\n                    </td>\n                  }\n                </div>\n              }\n            }\n          </div>\n        </div>\n\n        <hlm-numbered-pagination [(currentPage)]=\"page\" [(itemsPerPage)]=\"limit\" [totalItems]=\"total()\" />\n      </div>\n    </hlm-card>\n  </div>\n</div>\n\n<ng-template #templateBool let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\" let-readonly=\"readonly\">\n  <div (click)=\"$event.stopPropagation()\">\n    <hlm-switch [checked]=\"value\" (checkedChange)=\"patch(item, $event, index)\" class=\"mr-2\" [disabled]=\"loading || readonly\" />\n  </div>\n</ng-template>\n\n<ng-template #templateView let-uuid>\n  <button hlmBtn variant=\"ghost\" size=\"icon-sm\" [routerLink]=\"'./view/' + uuid\">\n    <ng-icon name=\"lucideChevronRight\"></ng-icon>\n  </button>\n</ng-template>\n\n<ng-template #templateDelete [schemaTableActions] let-item>\n  <button class=\"portrait:hidden\" hlmBtn variant=\"destructive\" size=\"icon-sm\" (click)=\"$event.stopPropagation(); deleteAlert(item)\">\n    <ng-icon name=\"lucideTrash2\"></ng-icon>\n  </button>\n  <button class=\"landscape:hidden\" hlmBtn variant=\"destructive\" size=\"sm\" (click)=\"$event.stopPropagation(); deleteAlert(item)\">\n    <ng-icon name=\"lucideTrash2\"></ng-icon>\n    <span> Excluir </span>\n  </button>\n</ng-template>\n\n<ng-template #templateIcon let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\">\n  <ng-icon [name]=\"value\" class=\"text-2xl\" />\n</ng-template>\n\n<ng-template #templateFile let-item let-value=\"value\" let-index=\"index\" let-loading=\"loading\">\n  @let lstFile = fileItemsFromValue(value);\n  @if (lstFile.length) {\n    <div class=\"flex flex-col gap-1\" (click)=\"$event.stopPropagation()\">\n      @for (file of lstFile; track file.url) {\n        <div class=\"flex items-center gap-1 min-w-0\">\n          <file-preview [item]=\"file\" />\n          <span class=\"truncate max-w-48\">{{ file.name }}</span>\n        </div>\n      }\n    </div>\n  } @else {\n    <span>-</span>\n  }\n</ng-template>\n\n<ng-template #templateJSON let-item let-value=\"value\" let-label=\"label\" let-index=\"index\" let-loading=\"loading\">\n  <hlm-dialog>\n    <button class=\"portrait:hidden\" hlmBtn hlmDialogTrigger size=\"icon-sm\" variant=\"outline\" (click)=\"$event.stopPropagation()\">\n      <ng-icon name=\"lucideCode\"></ng-icon>\n    </button>\n\n    <button class=\"landscape:hidden w-full\" hlmBtn hlmDialogTrigger size=\"sm\" variant=\"outline\" (click)=\"$event.stopPropagation()\">\n      <ng-icon name=\"lucideCode\"></ng-icon>\n      <span> {{ label }} - JSON </span>\n    </button>\n\n    <hlm-dialog-content *hlmDialogPortal=\"let ctx\" class=\"flex max-h-[80vh] min-w-[50vw] flex-col\">\n      <hlm-dialog-header>\n        <h3 hlmDialogTitle>{{ label }}</h3>\n      </hlm-dialog-header>\n      <hlm-code-block class=\"min-h-8\">\n        <hlm-code-block-header>\n          <!-- <hlm-code-block-title>Title goes here</hlm-code-block-title> -->\n          <hlm-code-block-actions>\n            <button hlmCodeBlockCopyButton [value]=\"value | json\"></button>\n          </hlm-code-block-actions>\n        </hlm-code-block-header>\n        <pre class=\"min-h-fit\" hlmCodeBlockContent lineNumbers wrap [code]=\"value | json\"></pre>\n      </hlm-code-block>\n      <hlm-dialog-footer>\n        <button hlmBtn variant=\"outline\" hlmDialogClose>\n          <ng-icon name=\"lucideCircleX\" class=\"text-lg shrink-0\"></ng-icon>\n          Fechar\n        </button>\n      </hlm-dialog-footer>\n    </hlm-dialog-content>\n  </hlm-dialog>\n</ng-template>\n",
 			styles: [":host{@apply block size-full;}\n"]
 		}]
 	}],
@@ -8526,7 +8529,7 @@ var SchemaViewComponent = class SchemaViewComponent {
 			const data = await service.show(uuid);
 			if (uuid !== this.uuid()) return;
 			this.form()().reset(data);
-		} catch (error) {
+		} catch {
 			if (uuid === this.uuid()) toast.error("Erro ao carregar os dados");
 		}
 		this.loading.set(false);
@@ -8591,7 +8594,7 @@ var SchemaViewComponent = class SchemaViewComponent {
 					this._onDidSave.emit(data);
 					toast.success("Dados salvos com sucesso");
 				}
-			} catch (error) {
+			} catch {
 				toast.error("Erro ao salvar os dados");
 			}
 			this.saving.set(false);
@@ -8717,7 +8720,7 @@ var SchemaViewComponent = class SchemaViewComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<div class=\"size-full flex flex-col gap-2\">\n  \n  <div class=\"flex flex-col gap-3 flex-1 min-h-0\">\n    <breadcrumbs [items]=\"lstBreadCrumbs()\"></breadcrumbs>\n  \n    <hlm-card  class=\"flex-1 min-h-0 w-full py-0\">\n      <div class=\"flex-1 min-h-0 w-full rounded-t-2xl p-3 flex flex-col gap-2\">\n        @if(!noBack() || (!noNew() && uuid())) {\n          <div class=\"w-full shrink-0 flex gap-2 justify-between\">\n            @if(!noBack()){\n              <button hlmBtn size=\"sm\" variant=\"outline\" (click)=\"voltar()\">\n                <ng-icon name=\"lucideArrowLeft\" class=\"text-lg shrink-0\"></ng-icon>\n                Voltar\n              </button>\n            }\n            @if(uuid() && !noNew()){\n              <button hlmBtn size=\"sm\" variant=\"outline\" (click)=\"novo()\">\n                <ng-icon name=\"lucideCirclePlus\" class=\"text-lg shrink-0\"></ng-icon>\n                Novo\n              </button>\n            }\n          </div>\n        }\n      \n        @for (item of contentStart(); track $index) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n        }\n\n        @if(form(); as formTree){\n          <fieldset hlmFieldSet class=\"grid grid-cols-12 mask-y-from-98% flex-1 min-h-0 content-start *:min-w-0 overflow-y-auto py-2\">\n            @for (item of lstFields(); track $index) {\n              @switch(item.type) {\n                @case(FieldType.Phone) {\n                  <input-phone \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Cnpj) {\n                  <input-cnpj \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Bool) {\n                  <input-bool \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Cpf) {\n                  <input-cpf \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.CpfCnpj) {\n                  <input-cpf-cnpj\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.UUID) {\n                  <input-string\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.TextArea) {\n                  <input-text-area\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Number) {\n                  <input-number\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Decimal) {\n                  <input-decimal\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Currency) {\n                  <input-currency\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.File) {\n                  <input-file\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [clearable]=\"item.options?.clearable ?? false\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.String) {\n                  <input-string\n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [type]=\"item.options?.type\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Mask) {\n                  <input-mask \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [maskitoOptions]=\"item.options?.maskitoOptions!\"\n                    [unmaskHandler]=\"item.options?.unmaskHandler\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  ></input-mask>\n                }\n                @case (FieldType.Select) {\n                  <input-select \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [schemaService]=\"item.options?.service?.() ?? null\"\n                    [items]=\"item.options?.lstOptions ?? []\"\n                    [bindValue]=\"item.options?.bindValue ?? null\"\n                    [bindLabel]=\"item.options?.bindLabel ?? null\"\n                    [lstFilter]=\"item.options?.lstFilter || null\"\n                    [clearable]=\"item.options?.clearable ?? false\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Date) {\n                  <input-date \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateTime) {\n                  <input-date-time \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Time) {\n                  <input-time\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateSpan) {\n                  <input-date-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateTimeSpan) {\n                  <input-date-time-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.TimeSpan) {\n                  <input-time-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Icon) {\n                  <input-icon \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.JSON) {\n                  <!-- @let json = $any(formTree)[item.index]().value() | json;\n                  <hlm-code-block class=\"min-h-8\" [ngClass]=\"item.class\">\n                    <hlm-code-block-header>\n                      <hlm-code-block-title>{{ item.label }}</hlm-code-block-title>\n                      <hlm-code-block-actions>\n                        <button hlmCodeBlockCopyButton [value]=\"json\"></button>\n                      </hlm-code-block-actions>\n                    </hlm-code-block-header>\n                    <pre \n                      class=\"min-h-fit\"\n                      hlmCodeBlockContent \n                      lineNumbers\n                      wrap\n                      [code]=\"json\"\n                    >\n                    </pre>\n                  </hlm-code-block> -->\n                  <input-json\n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @default {\n                  <div hlmField [ngClass]=\"item.class\" [hidden]=\"item.hiddenForm\">\n                    <label hlmFieldLabel [attr.for]=\"item.index\">\n                      {{ item.label }}\n                    </label>\n                    @if(!loading()){\n                      <input hlmInput [formField]=\"$any(formTree)[item.index]\" [attr.id]=\"item.index\" type=\"text\" [placeholder]=\"item.placeholder || ''\"/>\n                      <!-- <p hlmFieldDescription>This appears on invoices and emails.</p> -->\n                    }@else {\n                      <hlm-skeleton class=\"h-8 w-full rounded-lg\" [ngClass]=\"item.class\"/>\n                    }\n                  </div>\n                }\n              }\n            }\n          </fieldset>\n        }\n          \n        @for (item of contentEnd(); track $index) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n        }\n\n\n        @if(!noSave()){\n          <div class=\"w-full shrink-0 flex items-center gap-2 justify-end\">\n            <save-button [saving]=\"saving()\" (save)=\"save()\"></save-button>\n  <!--           \n            <button class=\"relative\" hlmBtn [variant]=\"saving() ? 'ghost' : 'default'\"  size=\"sm\" (click)=\"save()\">\n              @if(saving()) {\n                <span class=\"absolute inset-0 rounded-[inherit] border-shimmer pointer-events-none\"></span>\n      \n                <ng-icon name=\"lucideRefreshCw\" class=\"text-lg shrink-0 animate-spin\"></ng-icon>\n                Salvando...\n              } @else {\n                <ng-icon name=\"lucideSave\" class=\"text-lg shrink-0\"></ng-icon>\n                Salvar\n              }\n            </button> -->\n          </div>\n        }\n      </div>\n    </hlm-card>\n  </div>\n</div>",
+		template: "<div class=\"size-full flex flex-col gap-2\">\n  \n  <div class=\"flex flex-col gap-3 flex-1 min-h-0\">\n    <breadcrumbs [items]=\"lstBreadCrumbs()\"></breadcrumbs>\n  \n    <hlm-card  class=\"flex-1 min-h-0 w-full py-0\">\n      <div class=\"flex-1 min-h-0 w-full rounded-t-2xl p-3 flex flex-col gap-2\">\n        @if(!noBack() || (!noNew() && uuid())) {\n          <div class=\"w-full shrink-0 flex gap-2 justify-between\">\n            @if(!noBack()){\n              <button hlmBtn size=\"sm\" variant=\"outline\" (click)=\"voltar()\">\n                <ng-icon name=\"lucideArrowLeft\" class=\"text-lg shrink-0\"></ng-icon>\n                Voltar\n              </button>\n            }\n            @if(uuid() && !noNew()){\n              <button hlmBtn size=\"sm\" variant=\"outline\" (click)=\"novo()\">\n                <ng-icon name=\"lucideCirclePlus\" class=\"text-lg shrink-0\"></ng-icon>\n                Novo\n              </button>\n            }\n          </div>\n        }\n      \n        @for (item of contentStart(); track $index) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n        }\n\n        @if(form(); as formTree){\n          <fieldset hlmFieldSet class=\"grid grid-cols-12 mask-y-from-98% flex-1 min-h-0 content-start *:min-w-0 overflow-y-auto py-2\">\n            @for (item of lstFields(); track item.index) {\n              @switch(item.type) {\n                @case(FieldType.Phone) {\n                  <input-phone \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Cnpj) {\n                  <input-cnpj \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Bool) {\n                  <input-bool \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Cpf) {\n                  <input-cpf \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.CpfCnpj) {\n                  <input-cpf-cnpj\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.UUID) {\n                  <input-string\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.TextArea) {\n                  <input-text-area\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Number) {\n                  <input-number\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Decimal) {\n                  <input-decimal\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Currency) {\n                  <input-currency\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.File) {\n                  <input-file\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [clearable]=\"item.options?.clearable ?? false\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.String) {\n                  <input-string\n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [type]=\"item.options?.type\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Mask) {\n                  <input-mask \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [maskitoOptions]=\"item.options?.maskitoOptions!\"\n                    [unmaskHandler]=\"item.options?.unmaskHandler\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  ></input-mask>\n                }\n                @case (FieldType.Select) {\n                  <input-select \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [schemaService]=\"item.options?.service?.() ?? null\"\n                    [items]=\"item.options?.lstOptions ?? []\"\n                    [bindValue]=\"item.options?.bindValue ?? null\"\n                    [bindLabel]=\"item.options?.bindLabel ?? null\"\n                    [lstFilter]=\"item.options?.lstFilter || null\"\n                    [clearable]=\"item.options?.clearable ?? false\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Date) {\n                  <input-date \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateTime) {\n                  <input-date-time \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Time) {\n                  <input-time\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateSpan) {\n                  <input-date-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateTimeSpan) {\n                  <input-date-time-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.TimeSpan) {\n                  <input-time-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Icon) {\n                  <input-icon \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.JSON) {\n                  <!-- @let json = $any(formTree)[item.index]().value() | json;\n                  <hlm-code-block class=\"min-h-8\" [ngClass]=\"item.class\">\n                    <hlm-code-block-header>\n                      <hlm-code-block-title>{{ item.label }}</hlm-code-block-title>\n                      <hlm-code-block-actions>\n                        <button hlmCodeBlockCopyButton [value]=\"json\"></button>\n                      </hlm-code-block-actions>\n                    </hlm-code-block-header>\n                    <pre \n                      class=\"min-h-fit\"\n                      hlmCodeBlockContent \n                      lineNumbers\n                      wrap\n                      [code]=\"json\"\n                    >\n                    </pre>\n                  </hlm-code-block> -->\n                  <input-json\n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @default {\n                  <div hlmField [ngClass]=\"item.class\" [hidden]=\"item.hiddenForm\">\n                    <label hlmFieldLabel [attr.for]=\"item.index\">\n                      {{ item.label }}\n                    </label>\n                    @if(!loading()){\n                      <input hlmInput [formField]=\"$any(formTree)[item.index]\" [attr.id]=\"item.index\" type=\"text\" [placeholder]=\"item.placeholder || ''\"/>\n                      <!-- <p hlmFieldDescription>This appears on invoices and emails.</p> -->\n                    }@else {\n                      <hlm-skeleton class=\"h-8 w-full rounded-lg\" [ngClass]=\"item.class\"/>\n                    }\n                  </div>\n                }\n              }\n            }\n          </fieldset>\n        }\n          \n        @for (item of contentEnd(); track $index) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n        }\n\n\n        @if(!noSave()){\n          <div class=\"w-full shrink-0 flex items-center gap-2 justify-end\">\n            <save-button [saving]=\"saving()\" (save)=\"save()\"></save-button>\n  <!--           \n            <button class=\"relative\" hlmBtn [variant]=\"saving() ? 'ghost' : 'default'\"  size=\"sm\" (click)=\"save()\">\n              @if(saving()) {\n                <span class=\"absolute inset-0 rounded-[inherit] border-shimmer pointer-events-none\"></span>\n      \n                <ng-icon name=\"lucideRefreshCw\" class=\"text-lg shrink-0 animate-spin\"></ng-icon>\n                Salvando...\n              } @else {\n                <ng-icon name=\"lucideSave\" class=\"text-lg shrink-0\"></ng-icon>\n                Salvar\n              }\n            </button> -->\n          </div>\n        }\n      </div>\n    </hlm-card>\n  </div>\n</div>",
 		styles: [":host{@apply size-full block;}\n"],
 		dependencies: [
 			{
@@ -9002,7 +9005,7 @@ i0.ɵɵngDeclareClassMetadata({
 				...InputImports
 			],
 			selector: "schema-view",
-			template: "<div class=\"size-full flex flex-col gap-2\">\n  \n  <div class=\"flex flex-col gap-3 flex-1 min-h-0\">\n    <breadcrumbs [items]=\"lstBreadCrumbs()\"></breadcrumbs>\n  \n    <hlm-card  class=\"flex-1 min-h-0 w-full py-0\">\n      <div class=\"flex-1 min-h-0 w-full rounded-t-2xl p-3 flex flex-col gap-2\">\n        @if(!noBack() || (!noNew() && uuid())) {\n          <div class=\"w-full shrink-0 flex gap-2 justify-between\">\n            @if(!noBack()){\n              <button hlmBtn size=\"sm\" variant=\"outline\" (click)=\"voltar()\">\n                <ng-icon name=\"lucideArrowLeft\" class=\"text-lg shrink-0\"></ng-icon>\n                Voltar\n              </button>\n            }\n            @if(uuid() && !noNew()){\n              <button hlmBtn size=\"sm\" variant=\"outline\" (click)=\"novo()\">\n                <ng-icon name=\"lucideCirclePlus\" class=\"text-lg shrink-0\"></ng-icon>\n                Novo\n              </button>\n            }\n          </div>\n        }\n      \n        @for (item of contentStart(); track $index) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n        }\n\n        @if(form(); as formTree){\n          <fieldset hlmFieldSet class=\"grid grid-cols-12 mask-y-from-98% flex-1 min-h-0 content-start *:min-w-0 overflow-y-auto py-2\">\n            @for (item of lstFields(); track $index) {\n              @switch(item.type) {\n                @case(FieldType.Phone) {\n                  <input-phone \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Cnpj) {\n                  <input-cnpj \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Bool) {\n                  <input-bool \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Cpf) {\n                  <input-cpf \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.CpfCnpj) {\n                  <input-cpf-cnpj\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.UUID) {\n                  <input-string\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.TextArea) {\n                  <input-text-area\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Number) {\n                  <input-number\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Decimal) {\n                  <input-decimal\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Currency) {\n                  <input-currency\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.File) {\n                  <input-file\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [clearable]=\"item.options?.clearable ?? false\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.String) {\n                  <input-string\n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [type]=\"item.options?.type\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Mask) {\n                  <input-mask \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [maskitoOptions]=\"item.options?.maskitoOptions!\"\n                    [unmaskHandler]=\"item.options?.unmaskHandler\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  ></input-mask>\n                }\n                @case (FieldType.Select) {\n                  <input-select \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [schemaService]=\"item.options?.service?.() ?? null\"\n                    [items]=\"item.options?.lstOptions ?? []\"\n                    [bindValue]=\"item.options?.bindValue ?? null\"\n                    [bindLabel]=\"item.options?.bindLabel ?? null\"\n                    [lstFilter]=\"item.options?.lstFilter || null\"\n                    [clearable]=\"item.options?.clearable ?? false\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Date) {\n                  <input-date \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateTime) {\n                  <input-date-time \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Time) {\n                  <input-time\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateSpan) {\n                  <input-date-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateTimeSpan) {\n                  <input-date-time-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.TimeSpan) {\n                  <input-time-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Icon) {\n                  <input-icon \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.JSON) {\n                  <!-- @let json = $any(formTree)[item.index]().value() | json;\n                  <hlm-code-block class=\"min-h-8\" [ngClass]=\"item.class\">\n                    <hlm-code-block-header>\n                      <hlm-code-block-title>{{ item.label }}</hlm-code-block-title>\n                      <hlm-code-block-actions>\n                        <button hlmCodeBlockCopyButton [value]=\"json\"></button>\n                      </hlm-code-block-actions>\n                    </hlm-code-block-header>\n                    <pre \n                      class=\"min-h-fit\"\n                      hlmCodeBlockContent \n                      lineNumbers\n                      wrap\n                      [code]=\"json\"\n                    >\n                    </pre>\n                  </hlm-code-block> -->\n                  <input-json\n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @default {\n                  <div hlmField [ngClass]=\"item.class\" [hidden]=\"item.hiddenForm\">\n                    <label hlmFieldLabel [attr.for]=\"item.index\">\n                      {{ item.label }}\n                    </label>\n                    @if(!loading()){\n                      <input hlmInput [formField]=\"$any(formTree)[item.index]\" [attr.id]=\"item.index\" type=\"text\" [placeholder]=\"item.placeholder || ''\"/>\n                      <!-- <p hlmFieldDescription>This appears on invoices and emails.</p> -->\n                    }@else {\n                      <hlm-skeleton class=\"h-8 w-full rounded-lg\" [ngClass]=\"item.class\"/>\n                    }\n                  </div>\n                }\n              }\n            }\n          </fieldset>\n        }\n          \n        @for (item of contentEnd(); track $index) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n        }\n\n\n        @if(!noSave()){\n          <div class=\"w-full shrink-0 flex items-center gap-2 justify-end\">\n            <save-button [saving]=\"saving()\" (save)=\"save()\"></save-button>\n  <!--           \n            <button class=\"relative\" hlmBtn [variant]=\"saving() ? 'ghost' : 'default'\"  size=\"sm\" (click)=\"save()\">\n              @if(saving()) {\n                <span class=\"absolute inset-0 rounded-[inherit] border-shimmer pointer-events-none\"></span>\n      \n                <ng-icon name=\"lucideRefreshCw\" class=\"text-lg shrink-0 animate-spin\"></ng-icon>\n                Salvando...\n              } @else {\n                <ng-icon name=\"lucideSave\" class=\"text-lg shrink-0\"></ng-icon>\n                Salvar\n              }\n            </button> -->\n          </div>\n        }\n      </div>\n    </hlm-card>\n  </div>\n</div>",
+			template: "<div class=\"size-full flex flex-col gap-2\">\n  \n  <div class=\"flex flex-col gap-3 flex-1 min-h-0\">\n    <breadcrumbs [items]=\"lstBreadCrumbs()\"></breadcrumbs>\n  \n    <hlm-card  class=\"flex-1 min-h-0 w-full py-0\">\n      <div class=\"flex-1 min-h-0 w-full rounded-t-2xl p-3 flex flex-col gap-2\">\n        @if(!noBack() || (!noNew() && uuid())) {\n          <div class=\"w-full shrink-0 flex gap-2 justify-between\">\n            @if(!noBack()){\n              <button hlmBtn size=\"sm\" variant=\"outline\" (click)=\"voltar()\">\n                <ng-icon name=\"lucideArrowLeft\" class=\"text-lg shrink-0\"></ng-icon>\n                Voltar\n              </button>\n            }\n            @if(uuid() && !noNew()){\n              <button hlmBtn size=\"sm\" variant=\"outline\" (click)=\"novo()\">\n                <ng-icon name=\"lucideCirclePlus\" class=\"text-lg shrink-0\"></ng-icon>\n                Novo\n              </button>\n            }\n          </div>\n        }\n      \n        @for (item of contentStart(); track $index) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n        }\n\n        @if(form(); as formTree){\n          <fieldset hlmFieldSet class=\"grid grid-cols-12 mask-y-from-98% flex-1 min-h-0 content-start *:min-w-0 overflow-y-auto py-2\">\n            @for (item of lstFields(); track item.index) {\n              @switch(item.type) {\n                @case(FieldType.Phone) {\n                  <input-phone \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Cnpj) {\n                  <input-cnpj \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Bool) {\n                  <input-bool \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Cpf) {\n                  <input-cpf \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.CpfCnpj) {\n                  <input-cpf-cnpj\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.UUID) {\n                  <input-string\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.TextArea) {\n                  <input-text-area\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Number) {\n                  <input-number\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Decimal) {\n                  <input-decimal\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Currency) {\n                  <input-currency\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.File) {\n                  <input-file\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [clearable]=\"item.options?.clearable ?? false\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.String) {\n                  <input-string\n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [type]=\"item.options?.type\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Mask) {\n                  <input-mask \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [maskitoOptions]=\"item.options?.maskitoOptions!\"\n                    [unmaskHandler]=\"item.options?.unmaskHandler\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  ></input-mask>\n                }\n                @case (FieldType.Select) {\n                  <input-select \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [schemaService]=\"item.options?.service?.() ?? null\"\n                    [items]=\"item.options?.lstOptions ?? []\"\n                    [bindValue]=\"item.options?.bindValue ?? null\"\n                    [bindLabel]=\"item.options?.bindLabel ?? null\"\n                    [lstFilter]=\"item.options?.lstFilter || null\"\n                    [clearable]=\"item.options?.clearable ?? false\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Date) {\n                  <input-date \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateTime) {\n                  <input-date-time \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Time) {\n                  <input-time\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateSpan) {\n                  <input-date-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.DateTimeSpan) {\n                  <input-date-time-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.TimeSpan) {\n                  <input-time-span\n                    [ngClass]=\"item.class\"\n                    [class.hidden]=\"item.hiddenForm\"\n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\"\n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.Icon) {\n                  <input-icon \n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @case (FieldType.JSON) {\n                  <!-- @let json = $any(formTree)[item.index]().value() | json;\n                  <hlm-code-block class=\"min-h-8\" [ngClass]=\"item.class\">\n                    <hlm-code-block-header>\n                      <hlm-code-block-title>{{ item.label }}</hlm-code-block-title>\n                      <hlm-code-block-actions>\n                        <button hlmCodeBlockCopyButton [value]=\"json\"></button>\n                      </hlm-code-block-actions>\n                    </hlm-code-block-header>\n                    <pre \n                      class=\"min-h-fit\"\n                      hlmCodeBlockContent \n                      lineNumbers\n                      wrap\n                      [code]=\"json\"\n                    >\n                    </pre>\n                  </hlm-code-block> -->\n                  <input-json\n                    [ngClass]=\"item.class\" \n                    [class.hidden]=\"item.hiddenForm\" \n                    [formField]=\"$any(formTree)[item.index]\"\n                    [label]=\"item.label\"\n                    [placeholder]=\"item.placeholder\" \n                    [loading]=\"loading()\"\n                    [tooltipInfo]=\"item.tooltipInfo\"\n                  />\n                }\n                @default {\n                  <div hlmField [ngClass]=\"item.class\" [hidden]=\"item.hiddenForm\">\n                    <label hlmFieldLabel [attr.for]=\"item.index\">\n                      {{ item.label }}\n                    </label>\n                    @if(!loading()){\n                      <input hlmInput [formField]=\"$any(formTree)[item.index]\" [attr.id]=\"item.index\" type=\"text\" [placeholder]=\"item.placeholder || ''\"/>\n                      <!-- <p hlmFieldDescription>This appears on invoices and emails.</p> -->\n                    }@else {\n                      <hlm-skeleton class=\"h-8 w-full rounded-lg\" [ngClass]=\"item.class\"/>\n                    }\n                  </div>\n                }\n              }\n            }\n          </fieldset>\n        }\n          \n        @for (item of contentEnd(); track $index) {\n          <ng-container *ngTemplateOutlet=\"item.template\"></ng-container>\n        }\n\n\n        @if(!noSave()){\n          <div class=\"w-full shrink-0 flex items-center gap-2 justify-end\">\n            <save-button [saving]=\"saving()\" (save)=\"save()\"></save-button>\n  <!--           \n            <button class=\"relative\" hlmBtn [variant]=\"saving() ? 'ghost' : 'default'\"  size=\"sm\" (click)=\"save()\">\n              @if(saving()) {\n                <span class=\"absolute inset-0 rounded-[inherit] border-shimmer pointer-events-none\"></span>\n      \n                <ng-icon name=\"lucideRefreshCw\" class=\"text-lg shrink-0 animate-spin\"></ng-icon>\n                Salvando...\n              } @else {\n                <ng-icon name=\"lucideSave\" class=\"text-lg shrink-0\"></ng-icon>\n                Salvar\n              }\n            </button> -->\n          </div>\n        }\n      </div>\n    </hlm-card>\n  </div>\n</div>",
 			styles: [":host{@apply size-full block;}\n"]
 		}]
 	}],
@@ -10105,6 +10108,6 @@ function isValid$2(password) {
 	return passwordSchema.safeParse(password).success;
 }
 const SCHEMA_KIT_VERSION = "0.0.1";
-export { BlurryTextRevealComponent, BreadcrumbsComponent, ColorPickerComponent, EnvironmentService, ErrorMessageProviderComponent, FieldType, FilePreviewComponent, HasPermissaoPipe, IdService, InputBoolComponent, InputBoolPresentation, InputColorComponent, InputCpfCnpjComponent, InputCpfCnpjType, InputDateComponent, InputDateSpanComponent, InputDateTimeComponent, InputDateTimeSpanComponent, InputFileComponent, InputIconComponent, InputImports, InputJsonComponent, InputMaskComponent, InputNumberComponent, InputNumberType, InputPhoneComponent, InputSelectComponent, InputStringComponent, InputTextAreaComponent, InputTimeComponent, InputTimeSpanComponent, LoadingComponent, SCHEMA_KIT_OPTIONS, SCHEMA_KIT_PERMISSAO_CHECKER, SCHEMA_KIT_VERSION, SaveButtonComponent, SchemaBuilder, SchemaDialogComponent, SchemaDialogController, SchemaField, SchemaKitModule, SchemaService, SchemaTableActionsDirective, SchemaTableComponent, SchemaTableReplacementForDirective, SchemaTableToolbarDirective, SchemaViewComponent, SchemaViewContentDirective, SortOrder, SuspendedSlideDirective, SuspendedSliderComponent, TreeDragDropComponent, TreeDragDropNodeDirective, cnpjValidator, cpfCnpjValidator, cpfValidator, fileItemFromUrl, fileItemsFromValue, isValid as isCnpjValid, isValid$1 as isCpfValid, isValid$2 as isValidPassword, lstDateTypes, markSpanEdgesDirtyOnChange, maskitoOptionsCNPJ, maskitoOptionsCPF, maskitoOptionsCPFOrCNPJ, maskitoOptionsNumber, maskitoOptionsPhone, partialUrlValidator, passwordValidator, setSpanEdge, urlValidator };
+export { AlertService, BlurryTextRevealComponent, BreadcrumbsComponent, ColorPickerComponent, EnvironmentService, ErrorMessageProviderComponent, FieldType, FilePreviewComponent, HasPermissaoPipe, IdService, InputBoolComponent, InputBoolPresentation, InputColorComponent, InputCpfCnpjComponent, InputCpfCnpjType, InputDateComponent, InputDateSpanComponent, InputDateTimeComponent, InputDateTimeSpanComponent, InputFileComponent, InputIconComponent, InputImports, InputJsonComponent, InputMaskComponent, InputNumberComponent, InputNumberType, InputPhoneComponent, InputSelectComponent, InputStringComponent, InputTextAreaComponent, InputTimeComponent, InputTimeSpanComponent, LoadingComponent, SCHEMA_KIT_OPTIONS, SCHEMA_KIT_PERMISSAO_CHECKER, SCHEMA_KIT_VERSION, SaveButtonComponent, SchemaBuilder, SchemaDialogComponent, SchemaDialogController, SchemaField, SchemaKitModule, SchemaService, SchemaTableActionsDirective, SchemaTableComponent, SchemaTableReplacementForDirective, SchemaTableToolbarDirective, SchemaViewComponent, SchemaViewContentDirective, SortOrder, SuspendedSlideDirective, SuspendedSliderComponent, TreeDragDropComponent, TreeDragDropNodeDirective, cnpjValidator, cpfCnpjValidator, cpfValidator, fileItemFromUrl, fileItemsFromValue, isValid as isCnpjValid, isValid$1 as isCpfValid, isValid$2 as isValidPassword, lstDateTypes, markSpanEdgesDirtyOnChange, maskitoOptionsCNPJ, maskitoOptionsCPF, maskitoOptionsCPFOrCNPJ, maskitoOptionsNumber, maskitoOptionsPhone, partialUrlValidator, passwordValidator, setSpanEdge, urlValidator };
 
 //# sourceMappingURL=sapphire-caitlyn-schema-kit-ng.mjs.map