@sapphire-caitlyn/schema-kit-ng 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -5
- package/fesm2022/sapphire-caitlyn-schema-kit-ng.mjs +92 -84
- package/fesm2022/sapphire-caitlyn-schema-kit-ng.mjs.map +1 -1
- package/package.json +2 -2
- package/styles/directives/border-shimmer.css +102 -0
- package/styles/directives/letter-reveal.css +21 -0
- package/styles.scss +14 -0
- package/types/sapphire-caitlyn-schema-kit-ng.d.ts +19 -16
package/README.md
CHANGED
|
@@ -5,13 +5,35 @@ Lib de CRUD do backoffice: um `SchemaService` descreve a entidade, o `<schema-ta
|
|
|
5
5
|
|
|
6
6
|
## Entry points
|
|
7
7
|
|
|
8
|
-
| Import
|
|
9
|
-
|
|
|
10
|
-
| `@sapphire-caitlyn/schema-kit-ng`
|
|
11
|
-
| `@sapphire-caitlyn/schema-kit-ng/helm`
|
|
8
|
+
| Import | Conteúdo |
|
|
9
|
+
| --------------------------------------------- | ------------------------------------------------------------- |
|
|
10
|
+
| `@sapphire-caitlyn/schema-kit-ng` | A lib (`src/public-api.ts`) |
|
|
11
|
+
| `@sapphire-caitlyn/schema-kit-ng/helm` | Componentes Spartan (helm) embutidos na lib (`helm/index.ts`) |
|
|
12
|
+
| `@sapphire-caitlyn/schema-kit-ng/styles.scss` | Estilos globais da lib (`src/lib/styles.scss`), ver "Estilos" |
|
|
12
13
|
|
|
13
14
|
No `front-backoffice` a app não usa o pacote: importa o código-fonte pelos aliases do `tsconfig.json`
|
|
14
|
-
(`@schema-kit` e `@sapphire-caitlyn/schema-kit-ng/helm`), o que mantém o hot reload.
|
|
15
|
+
(`@schema-kit` e `@sapphire-caitlyn/schema-kit-ng/helm`), o que mantém o hot reload. Os estilos entram pelo
|
|
16
|
+
caminho do fonte no `src/styles.scss` (`@use '../projects/schema-kit/src/lib/styles'`).
|
|
17
|
+
|
|
18
|
+
## Estilos
|
|
19
|
+
|
|
20
|
+
O `src/lib/styles.scss` não é compilado no build da lib: o `ng-package.json` copia o `.scss` e o
|
|
21
|
+
`styles/directives/*.css` como estão para a raiz do pacote. Quem instala compila com o próprio Sass e Tailwind 4:
|
|
22
|
+
|
|
23
|
+
```scss
|
|
24
|
+
// styles.scss da app
|
|
25
|
+
@use '@sapphire-caitlyn/schema-kit-ng/styles.scss';
|
|
26
|
+
|
|
27
|
+
// O Tailwind não varre o node_modules: sem isso, as classes dos templates da lib não são geradas
|
|
28
|
+
@source '../node_modules/@sapphire-caitlyn/schema-kit-ng';
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
O arquivo traz o Tailwind (theme, preflight, utilities), as utilities `border-shimmer`/`letter-reveal` e ajustes
|
|
32
|
+
do select/combobox. As variáveis de tema (`--primary`, `--radius`...) e o preset do Spartan
|
|
33
|
+
(`@spartan-ng/brain/hlm-tailwind-preset.css`) ficam com a app.
|
|
34
|
+
|
|
35
|
+
Use o caminho com `.scss`: o `exports` do pacote só libera esse nome, então `.../styles` sem extensão não resolve.
|
|
36
|
+
Arquivo novo em `src/lib/styles/` sai no pacote só se for `.css` (ou se entrar nos `assets` do `ng-package.json`).
|
|
15
37
|
|
|
16
38
|
> **Não edite o `dist/schema-kit/package.json`.** A lib importa o helm por `<name>/helm`, e esse texto
|
|
17
39
|
> vai literal para o bundle. Renomear só no `dist` publica um pacote que importa o nome antigo
|
|
@@ -5009,32 +5009,109 @@ const maskitoOptionsPhone = {
|
|
|
5009
5009
|
plugins: [...phoneOptions.plugins],
|
|
5010
5010
|
mask: phoneOptions.mask
|
|
5011
5011
|
};
|
|
5012
|
+
const SCHEMA_KIT_OPTIONS = new InjectionToken("SCHEMA_KIT_OPTIONS");
|
|
5013
|
+
const SCHEMA_KIT_PERMISSAO_CHECKER = new InjectionToken("SCHEMA_KIT_PERMISSAO_CHECKER");
|
|
5014
|
+
var SchemaKitModule = class SchemaKitModule {
|
|
5015
|
+
static forRoot(options) {
|
|
5016
|
+
const _options = {
|
|
5017
|
+
apiUrlGetter: options.apiUrlGetter,
|
|
5018
|
+
paginationOptions: { rows: options.paginationOptions?.rows ?? 20 },
|
|
5019
|
+
environmentKey: options.environmentKey
|
|
5020
|
+
};
|
|
5021
|
+
return {
|
|
5022
|
+
ngModule: SchemaKitModule,
|
|
5023
|
+
providers: [
|
|
5024
|
+
{
|
|
5025
|
+
provide: SCHEMA_KIT_OPTIONS,
|
|
5026
|
+
useValue: _options
|
|
5027
|
+
},
|
|
5028
|
+
{
|
|
5029
|
+
provide: EnvironmentService,
|
|
5030
|
+
useFactory: (opts) => {
|
|
5031
|
+
const service = new EnvironmentService();
|
|
5032
|
+
service.registerApiUrlGetter(() => opts.apiUrlGetter(service.getEnvironment()));
|
|
5033
|
+
return service;
|
|
5034
|
+
},
|
|
5035
|
+
deps: [SCHEMA_KIT_OPTIONS]
|
|
5036
|
+
},
|
|
5037
|
+
{
|
|
5038
|
+
provide: SCHEMA_KIT_PERMISSAO_CHECKER,
|
|
5039
|
+
useFactory: options.perfilCheckerFactory ?? (() => () => {
|
|
5040
|
+
console.warn("No perfil checker provided. All permissao checks will return false.");
|
|
5041
|
+
})
|
|
5042
|
+
}
|
|
5043
|
+
]
|
|
5044
|
+
};
|
|
5045
|
+
}
|
|
5046
|
+
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
5047
|
+
minVersion: "12.0.0",
|
|
5048
|
+
version: "22.2.4",
|
|
5049
|
+
ngImport: i0,
|
|
5050
|
+
type: SchemaKitModule,
|
|
5051
|
+
deps: [],
|
|
5052
|
+
target: i0.ɵɵFactoryTarget.NgModule
|
|
5053
|
+
});
|
|
5054
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({
|
|
5055
|
+
minVersion: "14.0.0",
|
|
5056
|
+
version: "22.2.4",
|
|
5057
|
+
ngImport: i0,
|
|
5058
|
+
type: SchemaKitModule,
|
|
5059
|
+
imports: [CommonModule]
|
|
5060
|
+
});
|
|
5061
|
+
static ɵinj = i0.ɵɵngDeclareInjector({
|
|
5062
|
+
minVersion: "12.0.0",
|
|
5063
|
+
version: "22.2.4",
|
|
5064
|
+
ngImport: i0,
|
|
5065
|
+
type: SchemaKitModule,
|
|
5066
|
+
imports: [CommonModule]
|
|
5067
|
+
});
|
|
5068
|
+
};
|
|
5069
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
5070
|
+
minVersion: "12.0.0",
|
|
5071
|
+
version: "22.2.4",
|
|
5072
|
+
ngImport: i0,
|
|
5073
|
+
type: SchemaKitModule,
|
|
5074
|
+
decorators: [{
|
|
5075
|
+
type: NgModule,
|
|
5076
|
+
args: [{
|
|
5077
|
+
declarations: [],
|
|
5078
|
+
imports: [CommonModule]
|
|
5079
|
+
}]
|
|
5080
|
+
}]
|
|
5081
|
+
});
|
|
5012
5082
|
var EnvironmentService = class EnvironmentService {
|
|
5013
|
-
|
|
5083
|
+
_environment;
|
|
5084
|
+
environment = computed(() => {
|
|
5085
|
+
const environment = this._environment();
|
|
5086
|
+
if (!environment) throw new Error("Environment is not defined");
|
|
5087
|
+
return environment;
|
|
5088
|
+
}, ...ngDevMode ? [{ debugName: "environment" }] : /* istanbul ignore next */ []);
|
|
5089
|
+
apiUrlGetter = signal(() => {
|
|
5090
|
+
throw new Error("API URL getter not registered");
|
|
5091
|
+
}, ...ngDevMode ? [{ debugName: "apiUrlGetter" }] : /* istanbul ignore next */ []);
|
|
5092
|
+
apiUrl = computed(() => this.apiUrlGetter()(), ...ngDevMode ? [{ debugName: "apiUrl" }] : /* istanbul ignore next */ []);
|
|
5014
5093
|
constructor() {
|
|
5015
|
-
|
|
5094
|
+
const options = inject(SCHEMA_KIT_OPTIONS);
|
|
5095
|
+
const environment = window[options.environmentKey];
|
|
5096
|
+
this._environment = signal(environment, ...ngDevMode ? [{ debugName: "_environment" }] : /* istanbul ignore next */ []);
|
|
5016
5097
|
}
|
|
5017
5098
|
set(key, value) {
|
|
5018
|
-
this.
|
|
5099
|
+
this._environment.set({
|
|
5100
|
+
...this.environment(),
|
|
5101
|
+
[key]: value
|
|
5102
|
+
});
|
|
5019
5103
|
}
|
|
5020
5104
|
get(key) {
|
|
5021
|
-
return this.environment[key];
|
|
5105
|
+
return this.environment()[key];
|
|
5022
5106
|
}
|
|
5023
5107
|
resource(path) {
|
|
5024
5108
|
return `${this.apiUrl()}/${path}`;
|
|
5025
5109
|
}
|
|
5026
5110
|
getEnvironment() {
|
|
5027
|
-
|
|
5028
|
-
return this.environment;
|
|
5029
|
-
}
|
|
5030
|
-
apiUrl() {
|
|
5031
|
-
return this.apiUrlGetter();
|
|
5111
|
+
return this.environment();
|
|
5032
5112
|
}
|
|
5033
|
-
apiUrlGetter = () => {
|
|
5034
|
-
throw new Error("API URL getter not registered");
|
|
5035
|
-
};
|
|
5036
5113
|
registerApiUrlGetter(getter) {
|
|
5037
|
-
this.apiUrlGetter
|
|
5114
|
+
this.apiUrlGetter.set(getter);
|
|
5038
5115
|
}
|
|
5039
5116
|
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
5040
5117
|
minVersion: "12.0.0",
|
|
@@ -6921,75 +6998,6 @@ function hasFilterValue(v) {
|
|
|
6921
6998
|
if (Array.isArray(v)) return v.length > 0;
|
|
6922
6999
|
return true;
|
|
6923
7000
|
}
|
|
6924
|
-
const SCHEMA_KIT_OPTIONS = new InjectionToken("SCHEMA_KIT_OPTIONS");
|
|
6925
|
-
const SCHEMA_KIT_PERMISSAO_CHECKER = new InjectionToken("SCHEMA_KIT_PERMISSAO_CHECKER");
|
|
6926
|
-
var SchemaKitModule = class SchemaKitModule {
|
|
6927
|
-
static forRoot(options) {
|
|
6928
|
-
const _options = {
|
|
6929
|
-
apiUrlGetter: options.apiUrlGetter,
|
|
6930
|
-
paginationOptions: { rows: options.paginationOptions?.rows ?? 20 }
|
|
6931
|
-
};
|
|
6932
|
-
return {
|
|
6933
|
-
ngModule: SchemaKitModule,
|
|
6934
|
-
providers: [
|
|
6935
|
-
{
|
|
6936
|
-
provide: SCHEMA_KIT_OPTIONS,
|
|
6937
|
-
useValue: _options
|
|
6938
|
-
},
|
|
6939
|
-
{
|
|
6940
|
-
provide: EnvironmentService,
|
|
6941
|
-
useFactory: (opts) => {
|
|
6942
|
-
const service = new EnvironmentService();
|
|
6943
|
-
service.registerApiUrlGetter(() => opts.apiUrlGetter(service.getEnvironment()));
|
|
6944
|
-
return service;
|
|
6945
|
-
},
|
|
6946
|
-
deps: [SCHEMA_KIT_OPTIONS]
|
|
6947
|
-
},
|
|
6948
|
-
{
|
|
6949
|
-
provide: SCHEMA_KIT_PERMISSAO_CHECKER,
|
|
6950
|
-
useFactory: options.perfilCheckerFactory ?? (() => () => {
|
|
6951
|
-
console.warn("No perfil checker provided. All permissao checks will return false.");
|
|
6952
|
-
})
|
|
6953
|
-
}
|
|
6954
|
-
]
|
|
6955
|
-
};
|
|
6956
|
-
}
|
|
6957
|
-
static ɵfac = i0.ɵɵngDeclareFactory({
|
|
6958
|
-
minVersion: "12.0.0",
|
|
6959
|
-
version: "22.2.4",
|
|
6960
|
-
ngImport: i0,
|
|
6961
|
-
type: SchemaKitModule,
|
|
6962
|
-
deps: [],
|
|
6963
|
-
target: i0.ɵɵFactoryTarget.NgModule
|
|
6964
|
-
});
|
|
6965
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({
|
|
6966
|
-
minVersion: "14.0.0",
|
|
6967
|
-
version: "22.2.4",
|
|
6968
|
-
ngImport: i0,
|
|
6969
|
-
type: SchemaKitModule,
|
|
6970
|
-
imports: [CommonModule]
|
|
6971
|
-
});
|
|
6972
|
-
static ɵinj = i0.ɵɵngDeclareInjector({
|
|
6973
|
-
minVersion: "12.0.0",
|
|
6974
|
-
version: "22.2.4",
|
|
6975
|
-
ngImport: i0,
|
|
6976
|
-
type: SchemaKitModule,
|
|
6977
|
-
imports: [CommonModule]
|
|
6978
|
-
});
|
|
6979
|
-
};
|
|
6980
|
-
i0.ɵɵngDeclareClassMetadata({
|
|
6981
|
-
minVersion: "12.0.0",
|
|
6982
|
-
version: "22.2.4",
|
|
6983
|
-
ngImport: i0,
|
|
6984
|
-
type: SchemaKitModule,
|
|
6985
|
-
decorators: [{
|
|
6986
|
-
type: NgModule,
|
|
6987
|
-
args: [{
|
|
6988
|
-
declarations: [],
|
|
6989
|
-
imports: [CommonModule]
|
|
6990
|
-
}]
|
|
6991
|
-
}]
|
|
6992
|
-
});
|
|
6993
7001
|
var HasPermissaoPipe = class HasPermissaoPipe {
|
|
6994
7002
|
permissaoChecker = inject(SCHEMA_KIT_PERMISSAO_CHECKER);
|
|
6995
7003
|
transform(permissao) {
|
|
@@ -8717,7 +8725,7 @@ var SchemaViewComponent = class SchemaViewComponent {
|
|
|
8717
8725
|
isSignal: true
|
|
8718
8726
|
}],
|
|
8719
8727
|
ngImport: i0,
|
|
8720
|
-
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>",
|
|
8728
|
+
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>",
|
|
8721
8729
|
styles: [":host{@apply size-full block;}\n"],
|
|
8722
8730
|
dependencies: [
|
|
8723
8731
|
{
|
|
@@ -9002,7 +9010,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
9002
9010
|
...InputImports
|
|
9003
9011
|
],
|
|
9004
9012
|
selector: "schema-view",
|
|
9005
|
-
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>",
|
|
9013
|
+
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>",
|
|
9006
9014
|
styles: [":host{@apply size-full block;}\n"]
|
|
9007
9015
|
}]
|
|
9008
9016
|
}],
|