ui-core-abv 0.3.29 → 0.3.55
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/fesm2022/ui-core-abv.mjs +438 -47
- package/fesm2022/ui-core-abv.mjs.map +1 -1
- package/lib/components/signature-pad/signature-pad.component.d.ts +36 -0
- package/lib/components/table/table.component.d.ts +6 -2
- package/lib/components/table/table.models.d.ts +1 -0
- package/lib/components/tooltip/tooltip.component.d.ts +1 -0
- package/lib/components/uic-portlet-card/uic-portlet-card.component.d.ts +5 -2
- package/lib/components/work-panel/work-panel.component.d.ts +53 -0
- package/lib/pipes/first-capital.pipe.d.ts +7 -0
- package/package.json +1 -1
- package/public-api.d.ts +3 -0
- package/src/lib/styles/_mixins.scss +3 -3
package/fesm2022/ui-core-abv.mjs
CHANGED
|
@@ -120,8 +120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
120
120
|
type: Input
|
|
121
121
|
}] } });
|
|
122
122
|
|
|
123
|
-
const base$
|
|
124
|
-
class UicCheckboxComponent extends base$
|
|
123
|
+
const base$b = createValueAccessor();
|
|
124
|
+
class UicCheckboxComponent extends base$b {
|
|
125
125
|
icon = ''; // Icono externo
|
|
126
126
|
iconColor = 'black';
|
|
127
127
|
label = '';
|
|
@@ -204,8 +204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
204
204
|
type: Input
|
|
205
205
|
}] } });
|
|
206
206
|
|
|
207
|
-
const base$
|
|
208
|
-
class UicSelectComponent extends base$
|
|
207
|
+
const base$a = createValueAccessor();
|
|
208
|
+
class UicSelectComponent extends base$a {
|
|
209
209
|
icon = ''; // Icono externo
|
|
210
210
|
iconColor = 'black';
|
|
211
211
|
internalIcon = ''; //Icono interno
|
|
@@ -380,8 +380,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
380
380
|
type: Output
|
|
381
381
|
}] } });
|
|
382
382
|
|
|
383
|
-
const base$
|
|
384
|
-
class UicRadioComponent extends base$
|
|
383
|
+
const base$9 = createValueAccessor();
|
|
384
|
+
class UicRadioComponent extends base$9 {
|
|
385
385
|
icon = '';
|
|
386
386
|
iconColor = 'black';
|
|
387
387
|
label = '';
|
|
@@ -449,8 +449,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
449
449
|
type: Input
|
|
450
450
|
}] } });
|
|
451
451
|
|
|
452
|
-
const base$
|
|
453
|
-
class UicSliderComponent extends base$
|
|
452
|
+
const base$8 = createValueAccessor();
|
|
453
|
+
class UicSliderComponent extends base$8 {
|
|
454
454
|
icon = ''; // Icono externo
|
|
455
455
|
iconColor = 'black';
|
|
456
456
|
label = '';
|
|
@@ -550,8 +550,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
550
550
|
args: ['document:mouseup']
|
|
551
551
|
}] } });
|
|
552
552
|
|
|
553
|
-
const base$
|
|
554
|
-
class UicDatePickerComponent extends base$
|
|
553
|
+
const base$7 = createValueAccessor();
|
|
554
|
+
class UicDatePickerComponent extends base$7 {
|
|
555
555
|
icon = ''; // Icono externo
|
|
556
556
|
iconColor = 'black';
|
|
557
557
|
internalIcon = ''; //Icono interno
|
|
@@ -1016,8 +1016,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1016
1016
|
args: ['calendarTemplate']
|
|
1017
1017
|
}] } });
|
|
1018
1018
|
|
|
1019
|
-
const base$
|
|
1020
|
-
class UicPoolOptionsComponent extends base$
|
|
1019
|
+
const base$6 = createValueAccessor();
|
|
1020
|
+
class UicPoolOptionsComponent extends base$6 {
|
|
1021
1021
|
icon = ''; // Icono externo
|
|
1022
1022
|
iconColor = 'primary'; //color de ícono externo
|
|
1023
1023
|
size = 'm'; // tamaño general del input
|
|
@@ -1140,8 +1140,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1140
1140
|
type: Input
|
|
1141
1141
|
}] } });
|
|
1142
1142
|
|
|
1143
|
-
const base$
|
|
1144
|
-
class UicSearcherComponent extends base$
|
|
1143
|
+
const base$5 = createValueAccessor();
|
|
1144
|
+
class UicSearcherComponent extends base$5 {
|
|
1145
1145
|
icon = ''; // Icono externo
|
|
1146
1146
|
iconColor = 'primary'; //color de ícono externo
|
|
1147
1147
|
internalIcon = 'ri-search-2-line'; //Icono interno
|
|
@@ -1334,8 +1334,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1334
1334
|
args: ['dropdownTemplate']
|
|
1335
1335
|
}] } });
|
|
1336
1336
|
|
|
1337
|
-
const base$
|
|
1338
|
-
class UicMultySelectComponent extends base$
|
|
1337
|
+
const base$4 = createValueAccessor();
|
|
1338
|
+
class UicMultySelectComponent extends base$4 {
|
|
1339
1339
|
icon = ''; // Icono externo
|
|
1340
1340
|
iconColor = 'primary'; //color de ícono externo
|
|
1341
1341
|
internalIcon = ''; //Icono interno
|
|
@@ -1479,8 +1479,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1479
1479
|
args: ['dropdownTemplate']
|
|
1480
1480
|
}] } });
|
|
1481
1481
|
|
|
1482
|
-
const base$
|
|
1483
|
-
class UicTimePickerComponent extends base$
|
|
1482
|
+
const base$3 = createValueAccessor();
|
|
1483
|
+
class UicTimePickerComponent extends base$3 {
|
|
1484
1484
|
// Iconos y estado
|
|
1485
1485
|
icon = '';
|
|
1486
1486
|
iconColor = 'primary';
|
|
@@ -1811,8 +1811,8 @@ const PHONE_COUNTRIES = [
|
|
|
1811
1811
|
{ name: 'Venezuela', iso2: 've', dialCode: '58' }
|
|
1812
1812
|
];
|
|
1813
1813
|
|
|
1814
|
-
const base$
|
|
1815
|
-
class UicPhoneInputComponent extends base$
|
|
1814
|
+
const base$2 = createValueAccessor();
|
|
1815
|
+
class UicPhoneInputComponent extends base$2 {
|
|
1816
1816
|
icon = '';
|
|
1817
1817
|
iconColor = 'black';
|
|
1818
1818
|
internalIcon = '';
|
|
@@ -2106,8 +2106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2106
2106
|
args: ['dropdownTemplate']
|
|
2107
2107
|
}] } });
|
|
2108
2108
|
|
|
2109
|
-
const base = createValueAccessor();
|
|
2110
|
-
class UicFileInputComponent extends base {
|
|
2109
|
+
const base$1 = createValueAccessor();
|
|
2110
|
+
class UicFileInputComponent extends base$1 {
|
|
2111
2111
|
icon = ''; // Icono externo
|
|
2112
2112
|
iconColor = 'black';
|
|
2113
2113
|
internalIcon = ''; //Icono interno
|
|
@@ -2577,7 +2577,7 @@ class UicDynamicFormComponent {
|
|
|
2577
2577
|
recognition.start();
|
|
2578
2578
|
}
|
|
2579
2579
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
2580
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\n @let currentValue = form.get(field.name)?.value ?? '';\n @let inputColor = getInputColor(field, currentValue);\n <ui-input \n [error]=\"getErrorMessages(field)[0]\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [disabled]=\"!!form.get(field.name)?.disabled\"\n [internalIconColor]=\"inputColor\"\n [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\" >\n <input #inp\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'textarea' ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n cols=\"4\"\r\n ></textarea>\r\n @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n @let listening = isListening(field.name);\r\n <ui-button\r\n [disabled]=\"listening\"\r\n style=\"margin-bottom: 2px;\"\r\n (click)=\"voiceToText(ta, field.name)\"\r\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n [type]=\"listening?'filled':'bordered'\"\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n ></ui-button>\r\n }\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'phone' ) {\r\n <ui-phone-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder||field.label||''\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [min]=\"field.minDate??''\"\r\n [max]=\"field.maxDate??''\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'multyselect') {\r\n <ui-multy-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-multy-select>\r\n }\r\n @else if (field.type === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"field.searchFn\"\r\n [itemDisplayFn]=\"field.searchDisplayFn\"\r\n [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n [placeholder]=\"field.placeholder??'Buscar...'\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'file') {\r\n <ui-file-input\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [fileTypes]=\"field.fileTypes??null\"\r\n [formControlName]=\"field.name\"\r\n ></ui-file-input>\r\n }\r\n @else if ( ['checkbox','switch'].includes(field.type)) {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'radio') {\r\n <ui-radio\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [loading]=\"field.loading??false\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [options]=\"field.options || []\"\r\n ></ui-radio>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n [enabledListView]=\"field.poolEnabledListView||false\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2580
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicDynamicFormComponent, isStandalone: true, selector: "ui-dynamic-form", inputs: { fields: "fields", form: "form", disabled: "disabled", voiceToTextSilenceMs: "voiceToTextSilenceMs", cols: "cols" }, ngImport: i0, template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\r\n @let currentValue = form.get(field.name)?.value ?? '';\r\n @let inputColor = getInputColor(field, currentValue);\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIconColor]=\"inputColor\"\r\n [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <input #inp\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'textarea' ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n exp\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n cols=\"4\"\r\n ></textarea>\r\n @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n @let listening = isListening(field.name);\r\n <ui-button\r\n [disabled]=\"listening\"\r\n style=\"margin-bottom: 2px;\"\r\n (click)=\"voiceToText(ta, field.name)\"\r\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n [type]=\"listening?'filled':'bordered'\"\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n ></ui-button>\r\n }\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'phone' ) {\r\n <ui-phone-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder||field.label||''\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [min]=\"field.minDate??''\"\r\n [max]=\"field.maxDate??''\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'multyselect') {\r\n <ui-multy-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-multy-select>\r\n }\r\n @else if (field.type === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"field.searchFn\"\r\n [itemDisplayFn]=\"field.searchDisplayFn\"\r\n [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n [placeholder]=\"field.placeholder??'Buscar...'\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'file') {\r\n <ui-file-input\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [fileTypes]=\"field.fileTypes??null\"\r\n [formControlName]=\"field.name\"\r\n ></ui-file-input>\r\n }\r\n @else if ( ['checkbox','switch'].includes(field.type)) {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'radio') {\r\n <ui-radio\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [loading]=\"field.loading??false\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [options]=\"field.options || []\"\r\n ></ui-radio>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n [enabledListView]=\"field.poolEnabledListView||false\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}textarea{resize:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UicDatePickerComponent, selector: "ui-date-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "max", "min", "justMonth", "monthDay"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: UicSliderComponent, selector: "ui-slider", inputs: ["icon", "iconColor", "label", "error", "tip", "min", "max", "step", "markerCount", "disabled", "loading"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicPoolOptionsComponent, selector: "ui-pool-options", inputs: ["icon", "iconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "enabledListView", "listViewTitle", "options"] }, { kind: "component", type: UicTimePickerComponent, selector: "ui-time-picker", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "disabled", "label", "error", "tip", "interval"] }, { kind: "component", type: UicRadioComponent, selector: "ui-radio", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled", "loading", "options", "emptyText", "direction"] }, { kind: "component", type: UicSearcherComponent, selector: "ui-searcher", inputs: ["icon", "iconColor", "internalIcon", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "showSelected", "placeholder", "searchFn", "itemDisplayFn", "itemIsEnabledFn", "manualSearch", "stateless"], outputs: ["pickedItem"] }, { kind: "component", type: UicMultySelectComponent, selector: "ui-multy-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "options"] }, { kind: "component", type: UicFileInputComponent, selector: "ui-file-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading", "multy", "fileTypes"] }, { kind: "component", type: UicSelectComponent, selector: "ui-select", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "showSubtitle", "disabled", "loading", "nullable", "options"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "component", type: UicPhoneInputComponent, selector: "ui-phone-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "placeholder", "disabled", "loading", "preferredCountries", "flagPath", "countries"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
2581
2581
|
}
|
|
2582
2582
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDynamicFormComponent, decorators: [{
|
|
2583
2583
|
type: Component,
|
|
@@ -2597,7 +2597,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2597
2597
|
UicCheckboxComponent,
|
|
2598
2598
|
UicRadioComponent,
|
|
2599
2599
|
UicPhoneInputComponent,
|
|
2600
|
-
FormsModule], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\n @let currentValue = form.get(field.name)?.value ?? '';\n @let inputColor = getInputColor(field, currentValue);\n <ui-input \n [error]=\"getErrorMessages(field)[0]\"\n [label]=\"field.label + (field.required ? ' *' : '')\"\n [icon]=\"field.icon??''\"\n [disabled]=\"!!form.get(field.name)?.disabled\"\n [internalIconColor]=\"inputColor\"\n [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\n [loading]=\"field.loading??false\"\n [tip]=\"field.tip??''\" >\n <input #inp\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'textarea' ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n cols=\"4\"\r\n ></textarea>\r\n @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n @let listening = isListening(field.name);\r\n <ui-button\r\n [disabled]=\"listening\"\r\n style=\"margin-bottom: 2px;\"\r\n (click)=\"voiceToText(ta, field.name)\"\r\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n [type]=\"listening?'filled':'bordered'\"\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n ></ui-button>\r\n }\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'phone' ) {\r\n <ui-phone-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder||field.label||''\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [min]=\"field.minDate??''\"\r\n [max]=\"field.maxDate??''\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'multyselect') {\r\n <ui-multy-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-multy-select>\r\n }\r\n @else if (field.type === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"field.searchFn\"\r\n [itemDisplayFn]=\"field.searchDisplayFn\"\r\n [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n [placeholder]=\"field.placeholder??'Buscar...'\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'file') {\r\n <ui-file-input\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [fileTypes]=\"field.fileTypes??null\"\r\n [formControlName]=\"field.name\"\r\n ></ui-file-input>\r\n }\r\n @else if ( ['checkbox','switch'].includes(field.type)) {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'radio') {\r\n <ui-radio\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [loading]=\"field.loading??false\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [options]=\"field.options || []\"\r\n ></ui-radio>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n [enabledListView]=\"field.poolEnabledListView||false\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 399px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 400px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}\n"] }]
|
|
2600
|
+
FormsModule], template: "<div class=\"form\" [ngStyle]=\"{'--cols': cols, '--min': '180px'}\" [formGroup]=\"form\">\r\n @for (field of fields; track field.name) {\r\n <div class=\"col-span-{{field.colSpan || 1}}\" [class.new-line]=\"field.newLine\">\r\n \r\n @if ( ['text','number'].includes(field.type) ) {\r\n @let currentValue = form.get(field.name)?.value ?? '';\r\n @let inputColor = getInputColor(field, currentValue);\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIconColor]=\"inputColor\"\r\n [internalIcon]=\"field.internalIcon || (currentValue != '' ? getIconByColor(field, inputColor) : '')\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <input #inp\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [type]=\"field.type\"\r\n [step]=\"field.step\"\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"/>\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{inp.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'textarea' ) {\r\n <ui-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [disabled]=\"!!form.get(field.name)?.disabled\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" >\r\n <textarea #ta\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n exp\r\n [minLength]=\"field.minLength||null\"\r\n [maxlength]=\"field.maxLength||null\"\r\n [placeholder]=\"field.placeholder??field.label\"\r\n cols=\"4\"\r\n ></textarea>\r\n @if (field.voiceToTextEnabled && !form.get(field.name)?.disabled) {\r\n @let listening = isListening(field.name);\r\n <ui-button\r\n [disabled]=\"listening\"\r\n style=\"margin-bottom: 2px;\"\r\n (click)=\"voiceToText(ta, field.name)\"\r\n [icon]=\"listening?'ri-mic-fill':'ri-mic-line'\"\r\n [type]=\"listening?'filled':'bordered'\"\r\n size=\"s\"\r\n [iconOnly]=\"true\"\r\n ></ui-button>\r\n }\r\n @if (field.maxLength && field.showCounter) {\r\n <span counter> {{ta.value.length}} /{{field.maxLength}}</span>\r\n }\r\n </ui-input>\r\n }\r\n @if ( field.type === 'phone' ) {\r\n <ui-phone-input \r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\" \r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [placeholder]=\"field.placeholder||field.label||''\"\r\n >\r\n </ui-phone-input>\r\n }\r\n @else if (field.type === 'date') {\r\n <ui-date-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [justMonth]=\"!!field.monthMode\"\r\n [min]=\"field.minDate??''\"\r\n [max]=\"field.maxDate??''\"\r\n [monthDay]=\"field.monthDay||'first'\"\r\n [formControlName]=\"field.name\"\r\n ></ui-date-picker>\r\n }\r\n @else if (field.type === 'time') {\r\n <ui-time-picker\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [interval]=\"field.timeInterval??5\"\r\n [formControlName]=\"field.name\"\r\n ></ui-time-picker>\r\n }\r\n @else if (field.type === 'select') {\r\n <ui-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-select>\r\n }\r\n @else if (field.type === 'multyselect') {\r\n <ui-multy-select\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [tip]=\"field.tip??''\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-multy-select>\r\n }\r\n @else if (field.type === 'searcher') {\r\n <ui-searcher\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [tip]=\"field.tip??''\"\r\n [searchFn]=\"field.searchFn\"\r\n [itemDisplayFn]=\"field.searchDisplayFn\"\r\n [itemIsEnabledFn]=\"field.searchIsEnabledFn\"\r\n [placeholder]=\"field.placeholder??'Buscar...'\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n ></ui-searcher>\r\n }\r\n @else if (field.type === 'file') {\r\n <ui-file-input\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [internalIcon]=\"field.internalIcon??''\"\r\n [internalIconColor]=\"field.internalIconColor??'black'\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [fileTypes]=\"field.fileTypes??null\"\r\n [formControlName]=\"field.name\"\r\n ></ui-file-input>\r\n }\r\n @else if ( ['checkbox','switch'].includes(field.type)) {\r\n <ui-checkbox\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [placeholder]=\"field.placeholder??''\"\r\n [tip]=\"field.tip??''\"\r\n [type]=\"field.type === 'checkbox' ? 'checkbox' : 'switch'\"\r\n ></ui-checkbox>\r\n }\r\n @else if (field.type === 'radio') {\r\n <ui-radio\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [loading]=\"field.loading??false\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [options]=\"field.options || []\"\r\n ></ui-radio>\r\n }\r\n @else if (field.type === 'slider') {\r\n <ui-slider\r\n [min]=\"field.min??0\"\r\n [max]=\"field.max??100\"\r\n [step]=\"field.sliderInterval??1\"\r\n [markerCount]=\"field.sliderMarks??5\"\r\n [id]=\"field.name\"\r\n [formControlName]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [tip]=\"field.tip??''\"\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n ></ui-slider>\r\n }\r\n @else if (field.type === 'pool') {\r\n <ui-pool-options\r\n [error]=\"getErrorMessages(field)[0]\"\r\n [label]=\"field.label + (field.required ? ' *' : '')\"\r\n [id]=\"field.name\"\r\n [icon]=\"field.icon??''\"\r\n [loading]=\"field.loading??false\"\r\n [multy]=\"field.multyEnabled??false\"\r\n [tip]=\"field.tip??''\"\r\n [listViewTitle]=\"field.poolTitle??'Elementos seleccionados'\"\r\n [enabledListView]=\"field.poolEnabledListView||false\"\r\n [formControlName]=\"field.name\"\r\n [options]=\"field.options || []\"\r\n ></ui-pool-options>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".form{width:100%;display:grid;align-items:stretch;gap:1rem;padding-bottom:1.5rem}@media (max-width: 479px){.form{grid-template-columns:1fr}.form .col-span-1,.form .col-span-2,.form .col-span-3,.form .col-span-4,.form .col-span-5,.form .col-span-6,.form .col-span-7,.form .col-span-8,.form .col-span-9,.form .col-span-10,.form .col-span-11,.form .col-span-12{grid-column:1/-1}}@media (min-width: 768px){.form{grid-template-columns:repeat(var(--cols),1fr)}}@media (min-width: 480px) and (max-width: 767px){.form{grid-template-columns:repeat(min(var(--cols),2),1fr)}}h2{margin-top:1.5rem}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-4{grid-column:span 4/span 4}.col-span-5{grid-column:span 5/span 5}.col-span-6{grid-column:span 6/span 6}.col-span-7{grid-column:span 7/span 7}.col-span-8{grid-column:span 8/span 8}.col-span-9{grid-column:span 9/span 9}.col-span-10{grid-column:span 10/span 10}.col-span-11{grid-column:span 11/span 11}.col-span-12{grid-column:span 12/span 12}.new-line{grid-column-start:1}textarea{resize:none}\n"] }]
|
|
2601
2601
|
}], ctorParameters: () => [{ type: i0.NgZone }], propDecorators: { fields: [{
|
|
2602
2602
|
type: Input
|
|
2603
2603
|
}], form: [{
|
|
@@ -3342,12 +3342,13 @@ class UicTooltipComponent {
|
|
|
3342
3342
|
tooltip = '';
|
|
3343
3343
|
left = 0;
|
|
3344
3344
|
top = 0;
|
|
3345
|
+
placement = 'bottom';
|
|
3345
3346
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3346
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTooltipComponent, isStandalone: true, selector: "ui-tooltip", ngImport: i0, template: "<div @fadeAndRise class=\"tooltip\" \
|
|
3347
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicTooltipComponent, isStandalone: true, selector: "ui-tooltip", ngImport: i0, template: "<div @fadeAndRise class=\"tooltip\" \n [class.tooltip--top]=\"placement === 'top'\"\n [class.tooltip--bottom]=\"placement === 'bottom'\"\n [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\n</div>\n", styles: [".tooltip{position:fixed;background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:var(--grey-950);-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;position:absolute;left:calc(50% - 8px)}.tooltip.tooltip--bottom:before{top:-8px;border-bottom:8px solid var(--white);border-top:0}.tooltip.tooltip--top:before{bottom:-8px;top:auto;border-top:8px solid var(--white);border-bottom:0}\n"], animations: [fadeAndRise] });
|
|
3347
3348
|
}
|
|
3348
3349
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTooltipComponent, decorators: [{
|
|
3349
3350
|
type: Component,
|
|
3350
|
-
args: [{ selector: 'ui-tooltip', imports: [], animations: [fadeAndRise], template: "<div @fadeAndRise class=\"tooltip\" \
|
|
3351
|
+
args: [{ selector: 'ui-tooltip', imports: [], animations: [fadeAndRise], template: "<div @fadeAndRise class=\"tooltip\" \n [class.tooltip--top]=\"placement === 'top'\"\n [class.tooltip--bottom]=\"placement === 'bottom'\"\n [style.left]=\"left + 'px'\" [style.top]=\"top + 'px'\" [innerHTML]=\"tooltip\">\n</div>\n", styles: [".tooltip{position:fixed;background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;max-width:400px;color:var(--grey-950);-webkit-user-select:none;user-select:none;padding:5px 10px;border-radius:4px;font-size:14px;transform:translate(-50%);z-index:1000}.tooltip:before{content:\"\";width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;position:absolute;left:calc(50% - 8px)}.tooltip.tooltip--bottom:before{top:-8px;border-bottom:8px solid var(--white);border-top:0}.tooltip.tooltip--top:before{bottom:-8px;top:auto;border-top:8px solid var(--white);border-bottom:0}\n"] }]
|
|
3351
3352
|
}] });
|
|
3352
3353
|
|
|
3353
3354
|
class UicToolTipDirective {
|
|
@@ -3376,9 +3377,38 @@ class UicToolTipDirective {
|
|
|
3376
3377
|
setTooltipComponentProperties() {
|
|
3377
3378
|
if (this.componentRef !== null) {
|
|
3378
3379
|
this.componentRef.instance.tooltip = this.tip;
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
|
|
3380
|
+
this.componentRef.changeDetectorRef.detectChanges();
|
|
3381
|
+
requestAnimationFrame(() => {
|
|
3382
|
+
if (!this.componentRef) {
|
|
3383
|
+
return;
|
|
3384
|
+
}
|
|
3385
|
+
const tooltipElement = this.componentRef.hostView
|
|
3386
|
+
.rootNodes[0];
|
|
3387
|
+
const targetRect = this.elementRef.nativeElement.getBoundingClientRect();
|
|
3388
|
+
const tooltipRect = tooltipElement.getBoundingClientRect();
|
|
3389
|
+
const spacing = 8;
|
|
3390
|
+
const viewportWidth = window.innerWidth;
|
|
3391
|
+
const viewportHeight = window.innerHeight;
|
|
3392
|
+
const availableAbove = targetRect.top;
|
|
3393
|
+
const availableBelow = viewportHeight - targetRect.bottom;
|
|
3394
|
+
let placement = 'bottom';
|
|
3395
|
+
let top = targetRect.bottom + spacing;
|
|
3396
|
+
if (availableBelow < tooltipRect.height + spacing && availableAbove > availableBelow) {
|
|
3397
|
+
placement = 'top';
|
|
3398
|
+
top = Math.max(spacing, targetRect.top - tooltipRect.height - spacing);
|
|
3399
|
+
}
|
|
3400
|
+
else {
|
|
3401
|
+
top = Math.min(top, viewportHeight - tooltipRect.height - spacing);
|
|
3402
|
+
}
|
|
3403
|
+
const centerX = targetRect.left + (targetRect.width / 2);
|
|
3404
|
+
const maxLeft = viewportWidth - (tooltipRect.width / 2) - spacing;
|
|
3405
|
+
const minLeft = (tooltipRect.width / 2) + spacing;
|
|
3406
|
+
const left = Math.min(Math.max(centerX, minLeft), maxLeft);
|
|
3407
|
+
this.componentRef.instance.left = left;
|
|
3408
|
+
this.componentRef.instance.top = top;
|
|
3409
|
+
this.componentRef.instance.placement = placement;
|
|
3410
|
+
this.componentRef.changeDetectorRef.detectChanges();
|
|
3411
|
+
});
|
|
3382
3412
|
}
|
|
3383
3413
|
}
|
|
3384
3414
|
onMouseLeave() {
|
|
@@ -3430,11 +3460,11 @@ class UicTableUicSearcherComponent {
|
|
|
3430
3460
|
}
|
|
3431
3461
|
}
|
|
3432
3462
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3433
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"ui-table-searcher\">\r\n <div style=\"width: 300px;\">\r\n <ui-input internalIcon=\"ri-search-line\">\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </ui-input>\r\n </div>\r\n @if (showSearchButton) {\r\n <ui-button
|
|
3463
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableUicSearcherComponent, isStandalone: true, selector: "uic-table-searcher", inputs: { placeholder: "placeholder", label: "label", searchOnKeydown: "searchOnKeydown", showButtonText: "showButtonText", showSearchButton: "showSearchButton" }, outputs: { filter: "filter" }, ngImport: i0, template: "\r\n<div class=\"ui-table-searcher\">\r\n <div style=\"width: 300px;\">\r\n <ui-input internalIcon=\"ri-search-line\">\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </ui-input>\r\n </div>\r\n @if (showSearchButton) {\r\n <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n }\r\n <ui-button [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".ui-table-searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 479px){.ui-table-searcher{margin-bottom:16px}}.ui-table-searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 479px){.ui-table-searcher .fakeinput{width:100%}}.ui-table-searcher .fakeinput i{font-size:24px;margin-right:8px}.ui-table-searcher .fakeinput input{width:100%;border:none}.ui-table-searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }] });
|
|
3434
3464
|
}
|
|
3435
3465
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableUicSearcherComponent, decorators: [{
|
|
3436
3466
|
type: Component,
|
|
3437
|
-
args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective, UicInputComponent], template: "\r\n<div class=\"ui-table-searcher\">\r\n <div style=\"width: 300px;\">\r\n <ui-input internalIcon=\"ri-search-line\">\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </ui-input>\r\n </div>\r\n @if (showSearchButton) {\r\n <ui-button
|
|
3467
|
+
args: [{ selector: 'uic-table-searcher', imports: [UicButtonComponent, FormsModule, UicToolTipDirective, UicInputComponent], template: "\r\n<div class=\"ui-table-searcher\">\r\n <div style=\"width: 300px;\">\r\n <ui-input internalIcon=\"ri-search-line\">\r\n <input [(ngModel)]=\"text\" type=\"text\" (ngModelChange)=\"updateText()\" (keydown.enter)=\"filter.emit(text)\" placeholder=\"{{placeholder}}\">\r\n </ui-input>\r\n </div>\r\n @if (showSearchButton) {\r\n <ui-button [iconOnly]=\"!showButtonText\" (click)=\"filter.emit(text)\" color=\"black\" type=\"bordered\" rightIcon=\"ri-search-2-line\" size=\"m\">{{showButtonText?'Buscar':''}}</ui-button>\r\n }\r\n <ui-button [iconOnly]=\"!showButtonText\" (click)=\"reset()\" color=\"black\" type=\"bordered\" rightIcon=\"ri-eraser-line\" size=\"m\">{{showButtonText?'Limpiar':''}}</ui-button>\r\n</div>", styles: [".ui-table-searcher{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media (max-width: 479px){.ui-table-searcher{margin-bottom:16px}}.ui-table-searcher .fakeinput{display:flex;align-items:center;border:solid 1px var(--grey-200);height:40px;padding:2px 1px 2px 10px;border-radius:8px;transition:ease .3s;width:350px}@media (max-width: 479px){.ui-table-searcher .fakeinput{width:100%}}.ui-table-searcher .fakeinput i{font-size:24px;margin-right:8px}.ui-table-searcher .fakeinput input{width:100%;border:none}.ui-table-searcher .fakeinput:focus-within{box-shadow:0 0 0 3px var(--secondary-alpha)}\n"] }]
|
|
3438
3468
|
}], propDecorators: { placeholder: [{
|
|
3439
3469
|
type: Input
|
|
3440
3470
|
}], label: [{
|
|
@@ -3494,11 +3524,11 @@ class UicTablePaginationComponent {
|
|
|
3494
3524
|
}
|
|
3495
3525
|
}
|
|
3496
3526
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3497
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTablePaginationComponent, isStandalone: true, selector: "uic-table-pagination", inputs: { buttonSize: "buttonSize", currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading", showText: "showText" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n <ui-button \r\n [disabled]=\"loading || currentPage == 1\" \r\n (click)=\"changePage(currentPage - 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?'Anterior':''\"\r\n [iconOnly]=\"!showText\" \r\n icon=\"ri-arrow-left-line\" > \r\n </ui-button> \r\n <div class=\"table-numbers\">\r\n @for (p of pages; track $index) {\r\n @if ( p!= '...' ){\r\n <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n } @else {\r\n <div class=\"space\">...</div>\r\n }\r\n
|
|
3527
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTablePaginationComponent, isStandalone: true, selector: "uic-table-pagination", inputs: { buttonSize: "buttonSize", currentPage: "currentPage", totalPages: "totalPages", size: "size", loading: "loading", showText: "showText" }, outputs: { pageChange: "pageChange", sizeChange: "sizeChange" }, ngImport: i0, template: "\r\n<div class=\"table-page\">\r\n <ui-button \r\n [disabled]=\"loading || currentPage == 1\" \r\n (click)=\"changePage(currentPage - 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?'Anterior':''\"\r\n [iconOnly]=\"!showText\" \r\n icon=\"ri-arrow-left-line\" > \r\n </ui-button> \r\n <div class=\"table-numbers\">\r\n @for (p of pages; track $index) {\r\n @if ( p!= '...' ){\r\n <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n } @else {\r\n <div class=\"space\">...</div>\r\n }\r\n }\r\n </div>\r\n <ui-button \r\n [disabled]=\"loading || currentPage == totalPages\" \r\n (click)=\"changePage(currentPage + 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?'Siguiente':''\"\r\n [iconOnly]=\"!showText\" \r\n rightIcon=\"ri-arrow-right-line\" > \r\n </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:.75rem;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);border-radius:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
3498
3528
|
}
|
|
3499
3529
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTablePaginationComponent, decorators: [{
|
|
3500
3530
|
type: Component,
|
|
3501
|
-
args: [{ selector: 'uic-table-pagination', imports: [CommonModule, UicButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n <ui-button \r\n [disabled]=\"loading || currentPage == 1\" \r\n (click)=\"changePage(currentPage - 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?'Anterior':''\"\r\n [iconOnly]=\"!showText\" \r\n icon=\"ri-arrow-left-line\" > \r\n </ui-button> \r\n <div class=\"table-numbers\">\r\n @for (p of pages; track $index) {\r\n @if ( p!= '...' ){\r\n <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n } @else {\r\n <div class=\"space\">...</div>\r\n }\r\n
|
|
3531
|
+
args: [{ selector: 'uic-table-pagination', imports: [CommonModule, UicButtonComponent, FormsModule], template: "\r\n<div class=\"table-page\">\r\n <ui-button \r\n [disabled]=\"loading || currentPage == 1\" \r\n (click)=\"changePage(currentPage - 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?'Anterior':''\"\r\n [iconOnly]=\"!showText\" \r\n icon=\"ri-arrow-left-line\" > \r\n </ui-button> \r\n <div class=\"table-numbers\">\r\n @for (p of pages; track $index) {\r\n @if ( p!= '...' ){\r\n <button [disabled]=\"loading\" (click)=\"changePage(+p)\" [ngClass]=\"{'selected':currentPage==p}\" class=\"number\">{{p}}</button>\r\n } @else {\r\n <div class=\"space\">...</div>\r\n }\r\n }\r\n </div>\r\n <ui-button \r\n [disabled]=\"loading || currentPage == totalPages\" \r\n (click)=\"changePage(currentPage + 1)\" \r\n [size]=\"buttonSize\" \r\n color=\"black\" \r\n type=\"bordered\" \r\n [text]=\"showText?'Siguiente':''\"\r\n [iconOnly]=\"!showText\" \r\n rightIcon=\"ri-arrow-right-line\" > \r\n </ui-button>\r\n</div>", styles: [".table-page{display:flex;align-items:center;background-color:#fff;justify-content:space-between;width:100%;gap:1rem;border-top:solid 1px var(--table-border-color);padding:var(--table-spacing-ref) calc(var(--table-spacing-ref) * 1.5)}.table-numbers{display:flex;align-items:center;justify-content:center;gap:2px;-webkit-user-select:none;user-select:none;min-width:250px}.number{border:none;color:var(--grey-500);width:calc(var(--table-spacing-ref) * 4);height:calc(var(--table-spacing-ref) * 4);background-color:var(--white);border-radius:var(--button-radius);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:ease .3s}.number:enabled:hover{background-color:var(--secondary-200)}.selected{background-color:var(--grey-100);font-weight:600;color:var(--secondary-500)}.space{letter-spacing:5px}.page-size{flex:1 1;display:flex;font-size:.75rem;color:var(--grey-500);align-items:center;justify-content:flex-end}.page-size select{padding:5px 8px;margin-right:10px;color:var(--grey-500);border:solid 1px var(--primary-500);border-radius:5px}\n"] }]
|
|
3502
3532
|
}], propDecorators: { buttonSize: [{
|
|
3503
3533
|
type: Input
|
|
3504
3534
|
}], currentPage: [{
|
|
@@ -3520,11 +3550,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3520
3550
|
class UicTableListComponent {
|
|
3521
3551
|
list = [];
|
|
3522
3552
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3523
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableListComponent, isStandalone: true, selector: "uic-table-list", inputs: { list: "list" }, ngImport: i0, template: "@for (item of list; track $index) {\r\n <div class=\"list-item\">\r\n <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n <div class=\"list-item-data\">\r\n <div>{{item.text}}</div>\r\n <p>{{item.subtext}}</p>\r\n </div> \r\n </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] });
|
|
3553
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableListComponent, isStandalone: true, selector: "uic-table-list", inputs: { list: "list" }, ngImport: i0, template: "@for (item of list; track $index) {\r\n <div class=\"list-item\">\r\n <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n <div class=\"list-item-data\">\r\n <div>{{item.text}}</div>\r\n <p>{{item.subtext}}</p>\r\n </div> \r\n </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data{text-align:left}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] });
|
|
3524
3554
|
}
|
|
3525
3555
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableListComponent, decorators: [{
|
|
3526
3556
|
type: Component,
|
|
3527
|
-
args: [{ selector: 'uic-table-list', imports: [], template: "@for (item of list; track $index) {\r\n <div class=\"list-item\">\r\n <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n <div class=\"list-item-data\">\r\n <div>{{item.text}}</div>\r\n <p>{{item.subtext}}</p>\r\n </div> \r\n </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] }]
|
|
3557
|
+
args: [{ selector: 'uic-table-list', imports: [], template: "@for (item of list; track $index) {\r\n <div class=\"list-item\">\r\n <i [class]=\"item.icon??'ri-capsule-fill'\"></i>\r\n <div class=\"list-item-data\">\r\n <div>{{item.text}}</div>\r\n <p>{{item.subtext}}</p>\r\n </div> \r\n </div>\r\n\r\n}\r\n", styles: [".list-item{display:flex;margin-bottom:5px}.list-item i{color:var(--grey-500);margin-right:5px}.list-item-data{text-align:left}.list-item-data p{color:var(--grey-300);font-size:13px}\n"] }]
|
|
3528
3558
|
}], propDecorators: { list: [{
|
|
3529
3559
|
type: Input
|
|
3530
3560
|
}] } });
|
|
@@ -3745,6 +3775,10 @@ class UicTableComponent {
|
|
|
3745
3775
|
const col = data.find(col => col.key == key);
|
|
3746
3776
|
return col?.value?.toString() ?? '';
|
|
3747
3777
|
}
|
|
3778
|
+
getSubtext(data, key) {
|
|
3779
|
+
const col = data.find(col => col.key == key);
|
|
3780
|
+
return col?.subtext?.toString() ?? '';
|
|
3781
|
+
}
|
|
3748
3782
|
isChecked(data, key) {
|
|
3749
3783
|
const cell = data.find(c => c.key === key);
|
|
3750
3784
|
return !!cell?.checked;
|
|
@@ -3862,8 +3896,13 @@ class UicTableComponent {
|
|
|
3862
3896
|
switchHandler(key, value, columName) {
|
|
3863
3897
|
this.switchChange.emit({ key, value, columName });
|
|
3864
3898
|
}
|
|
3899
|
+
actionsRef;
|
|
3900
|
+
hasActions = false;
|
|
3901
|
+
ngAfterContentInit() {
|
|
3902
|
+
this.hasActions = !!this.actionsRef;
|
|
3903
|
+
}
|
|
3865
3904
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3866
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th>\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr class=\"\">\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" [class.ui-tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'text') {\r\n @if( getIcon(row.data,header.key) ){\r\n <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n }\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\r\n @for (alert of getList(row.data,header.key); track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (header.type == 'list'){\r\n <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'status'){\r\n <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == 'switch'){\r\n <div>\r\n <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch> \r\n </div>\r\n }\r\n @else if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
3905
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTableComponent, isStandalone: true, selector: "ui-table", inputs: { columns: "columns", data: "data", loading: "loading", disabled: "disabled", pages: "pages", size: "size", squeletonRows: "squeletonRows", buttonSize: "buttonSize", highlightedId: "highlightedId", headerText: "headerText", totalItems: "totalItems", alignment: "alignment", searchEnabled: "searchEnabled", searchLabel: "searchLabel", searchPlaceholder: "searchPlaceholder", headerClass: "headerClass", headerBackgroundColor: "headerBackgroundColor", striped: "striped", showPagination: "showPagination", searchOnKeydown: "searchOnKeydown", showEmptyMessage: "showEmptyMessage", showSearchButton: "showSearchButton", showTextPagination: "showTextPagination", emptyMessage: "emptyMessage", searcherShowButtonText: "searcherShowButtonText" }, outputs: { action: "action", update: "update", checkedChange: "checkedChange", switchChange: "switchChange" }, queries: [{ propertyName: "actionsRef", first: true, predicate: ["[actions]"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th>\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr class=\"\">\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" [class.ui-tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'text') {\r\n @if( getIcon(row.data,header.key) ){\r\n <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n }\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\r\n @for (alert of getList(row.data,header.key); track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (header.type == 'list'){\r\n <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'status'){\r\n <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == 'switch'){\r\n <div>\r\n <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch> \r\n </div>\r\n }\r\n @else if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n </div>\r\n @let subtext = getSubtext(row.data,header.key);\r\n @if( subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{subtext }}</div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.subtext{font-size:12px;color:var(--grey-600)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "component", type: UicActionButtonComponent, selector: "ui-action-button", inputs: ["icon", "options", "multiselect", "size"], outputs: ["optionSelected", "optionsApplied"] }, { kind: "component", type: UicTableUicSearcherComponent, selector: "uic-table-searcher", inputs: ["placeholder", "label", "searchOnKeydown", "showButtonText", "showSearchButton"], outputs: ["filter"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicTablePaginationComponent, selector: "uic-table-pagination", inputs: ["buttonSize", "currentPage", "totalPages", "size", "loading", "showText"], outputs: ["pageChange", "sizeChange"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicCheckboxComponent, selector: "ui-checkbox", inputs: ["icon", "iconColor", "label", "tip", "type", "placeholder", "loading", "noPadding", "disabled"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [highlightRow, animatedRow] });
|
|
3867
3906
|
}
|
|
3868
3907
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTableComponent, decorators: [{
|
|
3869
3908
|
type: Component,
|
|
@@ -3871,7 +3910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3871
3910
|
UicTableUserComponent, UicTableListComponent, UicActionButtonComponent,
|
|
3872
3911
|
UicTableUicSearcherComponent, UicStatusLabelComponent,
|
|
3873
3912
|
UicSwichComponent,
|
|
3874
|
-
UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "<div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n</div>\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th>\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr class=\"\">\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" [class.ui-tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'text') {\r\n @if( getIcon(row.data,header.key) ){\r\n <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n }\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\r\n @for (alert of getList(row.data,header.key); track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (header.type == 'list'){\r\n <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'status'){\r\n <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == 'switch'){\r\n <div>\r\n <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch> \r\n </div>\r\n }\r\n @else if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n </div>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{text-align:center;padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}\n"] }]
|
|
3913
|
+
UicTablePaginationComponent, UicToolTipDirective, UicCheckboxComponent, FormsModule], animations: [highlightRow, animatedRow], template: "@if ( hasActions || searchEnabled){\r\n <div class=\"ui-table-filters\">\r\n @if (searchEnabled) {\r\n <uic-table-searcher \r\n [showSearchButton]=\"showSearchButton\" \r\n [showButtonText]=\"searcherShowButtonText\" \r\n [searchOnKeydown]=\"searchOnKeydown\"\r\n (filter)=\"search($event)\" \r\n [placeholder]=\"searchPlaceholder\" ></uic-table-searcher>\r\n }\r\n <div class=\"ui-filter-actions\">\r\n <ng-content select=\"[actions]\"></ng-content>\r\n </div>\r\n </div>\r\n}\r\n<ng-content select=\"[filters]\"></ng-content>\r\n<div class=\"ui-table-wrapper\">\r\n @if (headerText) {\r\n <div class=\"ui-table-topbar\"> {{headerText}} <span class=\"hightlited-note\"> {{totalItems}} </span> </div>\r\n }\r\n <div class=\"ui-table-container\"> \r\n <table class=\"ui-table\" [class.ui-striped]=\"striped\">\r\n <thead>\r\n <tr [class]=\" headerClass || 'header-'+headerBackgroundColor\">\r\n @for (header of columns; track $index) {\r\n <th>\r\n <div [class]=\"'ui-th-wrap ui-alignment-'+alignment\" >\r\n @if (header.type=='checkbox') {\r\n <div>\r\n <ui-checkbox style=\"margin-right: 5px;\" [(ngModel)]=\"allSelected\" (ngModelChange)=\"toggleAll($event)\"></ui-checkbox>\r\n </div>\r\n }\r\n {{header.label.toUpperCase() }} \r\n @if (header.sortEnable) {\r\n <div class=\"ui-sort-arrow\" (click)=\"sortClick(header.key)\" [ngClass]=\"{'ui-sort-active':header.key == sortKey}\">\r\n <i [class]=\"(sortAsc||header.key != sortKey)?'ri-arrow-down-line':'ri-arrow-up-line'\"></i> \r\n </div>\r\n }\r\n </div>\r\n </th> \r\n }\r\n </tr>\r\n </thead>\r\n <tbody>\r\n\r\n @if (loading) {\r\n @for (item of [].constructor(squeletonRows); track $index) {\r\n <tr class=\"\">\r\n @for (header of columns; track $index) {\r\n <td> <div class=\"ui-row-loader\"></div> </td>\r\n }\r\n </tr> \r\n }\r\n } @else {\r\n @for (row of data; track row.id) {\r\n <tr [@highlightRow]=\"highlightedId === row.id ? 'highlighted' : null\" [class.ui-tr-highlighted]=\"row.highlighted\">\r\n @for (header of columns; track $index) {\r\n <!-- TIPOS DE HEADERS -->\r\n <td [class]=\"getFontColor(row.data,header.key)\">\r\n <div [class]=\"'ui-cell-content ui-alignment-'+alignment\" \r\n [style.justify-content]=\"header.align||null\"\r\n [style.width.px]=\"header.width || null\">\r\n @if (header.type == 'text') {\r\n @if( getIcon(row.data,header.key) ){\r\n <i [class]=\"getIcon(row.data,header.key)\"></i>\r\n }\r\n {{ getValue(row.data,header.key) }} \r\n }\r\n @if (header.type == 'icon-list') {\r\n @for (alert of getList(row.data,header.key); track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (header.type == 'list'){\r\n <uic-table-list [list]=\"getList(row.data,header.key)\"></uic-table-list> \r\n }\r\n @else if (header.type == 'user'){\r\n <uic-table-user [user]=\"getUser(row.data,header.key)\"></uic-table-user> \r\n }\r\n @else if (header.type == 'checkbox'){\r\n <ui-checkbox [disabled]=\"disabled\" [ngModel]=\"checkedIds.has(row.id)\" [placeholder]=\"getValue(row.data,header.key)\" (ngModelChange)=\"toggleSelection(row.id,$event)\" ></ui-checkbox> \r\n }\r\n @else if (header.type == 'status'){\r\n <ui-status-label [color]=\"getBackgroundColor(row.data,header.key)\"> {{getValue(row.data,header.key)}} </ui-status-label> \r\n }\r\n @else if (header.type == 'switch'){\r\n <div>\r\n <ui-switch [disabled]=\"disabled\" [checked]=\"isChecked(row.data,header.key)\" (checkedChange)=\"switchHandler(row.id,$event,header.key)\"></ui-switch> \r\n </div>\r\n }\r\n @else if (header.type == 'actions') { \r\n <div class=\"ui-centered-cell-content\">\r\n @for (btn of header.actions; track $index) {\r\n @if (isValidRule(row.data,btn.rule)) {\r\n <ui-button \r\n [disabled]=\"loading\"\r\n [tip]=\"btn.tooltip??''\"\r\n size=\"s\"\r\n [disabled]=\"disabled\"\r\n [text]=\"btn.text??''\"\r\n [type]=\"btn.type??'filled'\"\r\n [iconOnly]=\"!btn.text\"\r\n [icon]=\"btn.icon??''\"\r\n [color]=\"btn.color??'black'\"\r\n (click)=\"doAction(row.id,btn.key)\">\r\n </ui-button> \r\n }\r\n } \r\n @if ( header.moreActions && header.moreActions.length>0 ) {\r\n @for (ma of header.moreActions; track $index) {\r\n <ui-action-button [icon]=\"ma.icon??'ri-more-2-line'\" (optionSelected)=\"doAction(row.id,$event.id)\" [options]=\"getMoreActions(ma.actions||[],row.data)\"></ui-action-button>\r\n }\r\n }\r\n </div> \r\n }\r\n </div>\r\n @let subtext = getSubtext(row.data,header.key);\r\n @if( subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{subtext }}</div>\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n @empty {\r\n @if (showEmptyMessage) {\r\n <tr> \r\n <td [colSpan]=\"columns.length\">\r\n <div class=\"ui-empty\">{{emptyMessage}} </div>\r\n </td>\r\n </tr>\r\n }\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n </div>\r\n \r\n @if (showPagination) {\r\n <uic-table-pagination \r\n [loading]=\"loading\" \r\n [totalPages]=\"pages\" \r\n [showText]=\"showTextPagination\"\r\n [size]=\"size\"\r\n [buttonSize]=\"buttonSize\"\r\n (sizeChange)=\"sizeChabge($event)\"\r\n (pageChange)=\"pageChage($event)\">\r\n </uic-table-pagination>\r\n }\r\n</div>\r\n", styles: [".ui-table-wrapper{overflow:hidden;border:solid 1px var(--table-border-color);border-radius:12px}.ui-table{width:100%;font-weight:400;border-collapse:collapse;background-color:#fff}.ui-table th{font-size:12px;height:calc(var(--table-spacing-ref) * 5.4);font-weight:500}.ui-table th .ui-th-wrap{white-space:nowrap;display:flex;align-items:center}.ui-table th .ui-th-wrap .ui-sort-arrow{font-size:12px;line-height:12px}.ui-table th .ui-th-wrap div{padding:1px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;border-radius:50%;margin-left:10px;cursor:pointer;transition:ease .3s;color:var(--grey-400)}.ui-table th .ui-th-wrap div:hover{color:var(--primary-500)}.ui-table td{font-size:14px;color:var(--grey-600);height:calc(var(--table-spacing-ref) * 6)}.ui-table td,.ui-table th{padding:0 calc(var(--table-spacing-ref) * 2);vertical-align:middle;border:none;border-bottom:solid 1px var(--table-border-color)}.ui-table tr{transition:ease .3s}.ui-table tr:hover{background-color:var(--grey-50)}.ui-table thead tr:hover{color:var(--grey-900)}tbody tr:last-child td{border-bottom:none}.ui-table-container{width:100%;overflow-x:auto}.ui-table-topbar{padding:20px 24px;font-weight:600;font-size:18px;line-height:28px;gap:16px;display:flex;background-color:#fff;align-items:center;color:var(--grey-900);border-bottom:solid 1px var(--table-border-color)}.ui-cell-content{display:flex;gap:4px;align-items:center;width:100%;min-width:fit-content}.ui-loader-tr{border-bottom:none!important}.ui-loader-tr td{padding:0}.ui-sort-active{color:var(--secondary-500)!important;border:solid 1px}.ui-empty{text-align:center;color:var(--grey-300)}.subtext{font-size:12px;color:var(--grey-600)}.ui-table-filters{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:16px 0}.ui-filter-actions{display:flex;gap:8px}.ui-alert{width:24px;height:24px;font-size:18px;background-color:var(--red-500);color:var(--white);border-radius:50%;padding:3px}.ui-loader{height:5px;width:100%;--c:no-repeat linear-gradient(var(--primary-500) 0 0);background:var(--c),var(--c),var(--primary-500);background-size:60% 100%;animation:l16 3s infinite}@keyframes l16{0%{background-position:-150% 0,-150% 0}66%{background-position:250% 0,-150% 0}to{background-position:250% 0,250% 0}}.ui-striped tbody tr:nth-child(odd){background-color:var(--grey-50);transition:ease .3s}.ui-striped tbody tr:nth-child(odd):hover{background-color:var(--primary-500)}.ui-tr-highlighted{border-left:solid 6px var(--green-500)}.ui-centered-cell-content{width:100%;display:flex;gap:5px;justify-content:center}.ui-alignment-center{justify-content:center;text-align:center}.ui-trc-primary{color:var(--primary-500)}.ui-trc-red{color:var(--red-500)}.ui-trc-blue{color:var(--blue-500)}.ui-trc-green{color:var(--green-500)}.ui-trc-yellow{color:var(--yellow-500)}.ui-trc-black{color:var(--grey-900)}.ui-trc-grey{color:var(--grey-300)}.ui-row-loader{background:linear-gradient(90deg,var(--grey-100) 25%,var(--grey-200) 50%,var(--grey-100) 75%);height:20px;width:100%;background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.header-grey{background-color:var(--table-header-background);color:var(--table-header-color)}.header-blue{color:var(--white);background-color:var(--blue-600)}.header-red{color:var(--white);background-color:var(--red-600)}.header-green{color:var(--white);background-color:var(--green-600)}.header-primary{color:var(--white);background-color:var(--primary-600)}.header-secondary{color:var(--white);background-color:var(--secondary-600)}.header-yellow{color:var(--white);background-color:var(--yellow-600)}\n"] }]
|
|
3875
3914
|
}], propDecorators: { columns: [{
|
|
3876
3915
|
type: Input
|
|
3877
3916
|
}], data: [{
|
|
@@ -3930,6 +3969,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3930
3969
|
type: Output
|
|
3931
3970
|
}], switchChange: [{
|
|
3932
3971
|
type: Output
|
|
3972
|
+
}], actionsRef: [{
|
|
3973
|
+
type: ContentChild,
|
|
3974
|
+
args: ['[actions]']
|
|
3933
3975
|
}] } });
|
|
3934
3976
|
|
|
3935
3977
|
;
|
|
@@ -3996,6 +4038,138 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3996
4038
|
args: [{ selector: 'ui-alert-container', imports: [UiAlertComponent], template: "<div class=\"alert-container\">\r\n @for (alert of alerts; track alert.id){\r\n <ui-alert\r\n (closeAlert)=\"dismis($event)\"\r\n [alert]=\"alert\">\r\n </ui-alert>\r\n } \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"] }]
|
|
3997
4039
|
}], ctorParameters: () => [{ type: UicPushAlertService }] });
|
|
3998
4040
|
|
|
4041
|
+
const base = createValueAccessor();
|
|
4042
|
+
class UicSignaturePadComponent extends base {
|
|
4043
|
+
width = 400;
|
|
4044
|
+
height = 200;
|
|
4045
|
+
strokeColor = '#111827';
|
|
4046
|
+
strokeWidth = 2;
|
|
4047
|
+
disabled = false;
|
|
4048
|
+
imageChange = new EventEmitter();
|
|
4049
|
+
canvasRef;
|
|
4050
|
+
ctx = null;
|
|
4051
|
+
drawing = false;
|
|
4052
|
+
ngAfterViewInit() {
|
|
4053
|
+
const canvas = this.canvasRef.nativeElement;
|
|
4054
|
+
canvas.width = this.width;
|
|
4055
|
+
canvas.height = this.height;
|
|
4056
|
+
this.ctx = canvas.getContext('2d');
|
|
4057
|
+
if (this.ctx) {
|
|
4058
|
+
this.ctx.lineWidth = this.strokeWidth;
|
|
4059
|
+
this.ctx.lineCap = 'round';
|
|
4060
|
+
this.ctx.lineJoin = 'round';
|
|
4061
|
+
this.ctx.strokeStyle = this.strokeColor;
|
|
4062
|
+
}
|
|
4063
|
+
}
|
|
4064
|
+
startDraw(event) {
|
|
4065
|
+
if (!this.ctx || this.disabled)
|
|
4066
|
+
return;
|
|
4067
|
+
this.drawing = true;
|
|
4068
|
+
const { x, y } = this.relativePosition(event);
|
|
4069
|
+
this.ctx.beginPath();
|
|
4070
|
+
this.ctx.moveTo(x, y);
|
|
4071
|
+
this.canvasRef.nativeElement.setPointerCapture(event.pointerId);
|
|
4072
|
+
event.preventDefault();
|
|
4073
|
+
}
|
|
4074
|
+
draw(event) {
|
|
4075
|
+
if (!this.drawing || !this.ctx || this.disabled)
|
|
4076
|
+
return;
|
|
4077
|
+
const { x, y } = this.relativePosition(event);
|
|
4078
|
+
this.ctx.lineTo(x, y);
|
|
4079
|
+
this.ctx.stroke();
|
|
4080
|
+
event.preventDefault();
|
|
4081
|
+
}
|
|
4082
|
+
endDraw(event) {
|
|
4083
|
+
if (!this.drawing || !this.ctx || this.disabled)
|
|
4084
|
+
return;
|
|
4085
|
+
this.ctx.closePath();
|
|
4086
|
+
this.drawing = false;
|
|
4087
|
+
this.canvasRef.nativeElement.releasePointerCapture(event.pointerId);
|
|
4088
|
+
this.emitSignature();
|
|
4089
|
+
event.preventDefault();
|
|
4090
|
+
}
|
|
4091
|
+
clear() {
|
|
4092
|
+
if (!this.ctx)
|
|
4093
|
+
return;
|
|
4094
|
+
this.resetCanvas();
|
|
4095
|
+
this.notifyChange(null);
|
|
4096
|
+
this.imageChange.emit(null);
|
|
4097
|
+
}
|
|
4098
|
+
emitSignature() {
|
|
4099
|
+
if (this.disabled)
|
|
4100
|
+
return;
|
|
4101
|
+
const canvas = this.canvasRef.nativeElement;
|
|
4102
|
+
canvas.toBlob((blob) => {
|
|
4103
|
+
if (!blob)
|
|
4104
|
+
return;
|
|
4105
|
+
this.notifyChange(blob);
|
|
4106
|
+
this.imageChange.emit(blob);
|
|
4107
|
+
}, 'image/png');
|
|
4108
|
+
}
|
|
4109
|
+
relativePosition(event) {
|
|
4110
|
+
const rect = this.canvasRef.nativeElement.getBoundingClientRect();
|
|
4111
|
+
return {
|
|
4112
|
+
x: event.clientX - rect.left,
|
|
4113
|
+
y: event.clientY - rect.top,
|
|
4114
|
+
};
|
|
4115
|
+
}
|
|
4116
|
+
writeValue(value) {
|
|
4117
|
+
super.writeValue(value);
|
|
4118
|
+
if (!this.ctx)
|
|
4119
|
+
return;
|
|
4120
|
+
if (!value) {
|
|
4121
|
+
this.resetCanvas();
|
|
4122
|
+
return;
|
|
4123
|
+
}
|
|
4124
|
+
const url = URL.createObjectURL(value);
|
|
4125
|
+
const img = new Image();
|
|
4126
|
+
img.onload = () => {
|
|
4127
|
+
this.resetCanvas();
|
|
4128
|
+
this.ctx.drawImage(img, 0, 0, this.width, this.height);
|
|
4129
|
+
URL.revokeObjectURL(url);
|
|
4130
|
+
};
|
|
4131
|
+
img.src = url;
|
|
4132
|
+
}
|
|
4133
|
+
resetCanvas() {
|
|
4134
|
+
if (this.ctx) {
|
|
4135
|
+
this.ctx.clearRect(0, 0, this.width, this.height);
|
|
4136
|
+
}
|
|
4137
|
+
}
|
|
4138
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSignaturePadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
4139
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: UicSignaturePadComponent, isStandalone: true, selector: "ui-signature-pad", inputs: { width: "width", height: "height", strokeColor: "strokeColor", strokeWidth: "strokeWidth", disabled: "disabled" }, outputs: { imageChange: "imageChange" }, providers: [
|
|
4140
|
+
{
|
|
4141
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4142
|
+
useExisting: forwardRef(() => UicSignaturePadComponent),
|
|
4143
|
+
multi: true,
|
|
4144
|
+
},
|
|
4145
|
+
], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\r\n <canvas\r\n #canvas\r\n class=\"signature-canvas\"\r\n [attr.width]=\"width\"\r\n [attr.height]=\"height\"\r\n (pointerdown)=\"startDraw($event)\"\r\n (pointermove)=\"draw($event)\"\r\n (pointerup)=\"endDraw($event)\"\r\n (pointerleave)=\"endDraw($event)\"\r\n ></canvas>\r\n <div class=\"signature-actions\">\r\n <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\r\n </div>\r\n</div>\r\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--grey-200, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
|
|
4146
|
+
}
|
|
4147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSignaturePadComponent, decorators: [{
|
|
4148
|
+
type: Component,
|
|
4149
|
+
args: [{ selector: 'ui-signature-pad', imports: [CommonModule, UicButtonComponent], providers: [
|
|
4150
|
+
{
|
|
4151
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4152
|
+
useExisting: forwardRef(() => UicSignaturePadComponent),
|
|
4153
|
+
multi: true,
|
|
4154
|
+
},
|
|
4155
|
+
], template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\r\n <canvas\r\n #canvas\r\n class=\"signature-canvas\"\r\n [attr.width]=\"width\"\r\n [attr.height]=\"height\"\r\n (pointerdown)=\"startDraw($event)\"\r\n (pointermove)=\"draw($event)\"\r\n (pointerup)=\"endDraw($event)\"\r\n (pointerleave)=\"endDraw($event)\"\r\n ></canvas>\r\n <div class=\"signature-actions\">\r\n <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\r\n </div>\r\n</div>\r\n", styles: [".signature-pad{border-radius:8px;padding:8px}.signature-canvas{background-color:#fff;width:100%;display:block;border:1px solid var(--grey-200, #e5e7eb);border-radius:6px;touch-action:none}.signature-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}\n"] }]
|
|
4156
|
+
}], propDecorators: { width: [{
|
|
4157
|
+
type: Input
|
|
4158
|
+
}], height: [{
|
|
4159
|
+
type: Input
|
|
4160
|
+
}], strokeColor: [{
|
|
4161
|
+
type: Input
|
|
4162
|
+
}], strokeWidth: [{
|
|
4163
|
+
type: Input
|
|
4164
|
+
}], disabled: [{
|
|
4165
|
+
type: Input
|
|
4166
|
+
}], imageChange: [{
|
|
4167
|
+
type: Output
|
|
4168
|
+
}], canvasRef: [{
|
|
4169
|
+
type: ViewChild,
|
|
4170
|
+
args: ['canvas', { static: true }]
|
|
4171
|
+
}] } });
|
|
4172
|
+
|
|
3999
4173
|
class UicKpiCardComponent {
|
|
4000
4174
|
data;
|
|
4001
4175
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicKpiCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -4009,11 +4183,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4009
4183
|
}] } });
|
|
4010
4184
|
|
|
4011
4185
|
class UicPortletCardComponent {
|
|
4186
|
+
title = 'El título de la sección';
|
|
4012
4187
|
data = [];
|
|
4013
4188
|
/** Layout mode: horizontal keeps label/value in a row; vertical stacks label over value. */
|
|
4014
4189
|
layout = 'horizontal';
|
|
4015
4190
|
/** Columns for vertical grid layout. */
|
|
4016
4191
|
cols = 1;
|
|
4192
|
+
gap = 20;
|
|
4017
4193
|
get gridTemplateColumns() {
|
|
4018
4194
|
if (this.layout !== 'vertical') {
|
|
4019
4195
|
return null;
|
|
@@ -4021,22 +4197,36 @@ class UicPortletCardComponent {
|
|
|
4021
4197
|
const columns = Math.max(1, Math.floor(this.cols || 1));
|
|
4022
4198
|
return `repeat(${columns}, minmax(0, 1fr))`;
|
|
4023
4199
|
}
|
|
4200
|
+
copyText(text) {
|
|
4201
|
+
navigator.clipboard.writeText(text)
|
|
4202
|
+
.then(() => {
|
|
4203
|
+
console.log('Copiado!');
|
|
4204
|
+
})
|
|
4205
|
+
.catch(err => {
|
|
4206
|
+
console.error('No se pudo copiar: ', err);
|
|
4207
|
+
});
|
|
4208
|
+
}
|
|
4024
4209
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4025
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPortletCardComponent, isStandalone: true, selector: "ui-portlet-card", inputs: { data: "data", layout: "layout", cols: "cols" }, ngImport: i0, template: "<div class=\"portlet\" [class.portlet-vertical]=\"layout === 'vertical'\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n @for (item of data; track $index) {\n <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\n <div class=\"portlet-row-label\">{{item.label}}</div>\n <div class=\"portlet-row-value\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n @if (item.type
|
|
4210
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicPortletCardComponent, isStandalone: true, selector: "ui-portlet-card", inputs: { title: "title", data: "data", layout: "layout", cols: "cols", gap: "gap" }, ngImport: i0, template: "@if ( title) {\r\n <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n [class.portlet-vertical]=\"layout === 'vertical'\" \r\n [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n [style]=\"'gap: ' + gap + 'px;'\" >\r\n @for (item of data; track $index) {\r\n <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n <div class=\"portlet-row-label\">{{item.label}}</div>\r\n <div class=\"portlet-row-value\">\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n @if (['text','copy'].includes(item.type)) {\r\n <div class=\"p-type-text\">\r\n <div class=\"content-texttype\">\r\n {{item.value}} \r\n\r\n @if (item.type == 'copy'){\r\n <ui-button (click)=\"copyText(item.value.toString())\" type=\"bordered\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n }\r\n\r\n </div>\r\n <div class=\"p-type-text-sub\">{{item.subtext}}</div>\r\n </div>\r\n }\r\n @if (item.type == 'money') {\r\n {{ +item.value | currency: item.currencyCode}} \r\n }\r\n \r\n @if (item.type == 'date') {\r\n {{ item.value .toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (item.type == 'status' || item.type == 'tag') {\r\n <ui-status-label [type]=\"item.type\" [color]=\"item.color||'black'\"> {{item.value}}</ui-status-label>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;align-items:flex-start;gap:4px}.portlet-row-value{font-weight:500;display:flex;justify-content:flex-end;gap:5px}.portlet-row-label{font-weight:400;color:var(--grey-500)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"], dependencies: [{ kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
4026
4211
|
}
|
|
4027
4212
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicPortletCardComponent, decorators: [{
|
|
4028
4213
|
type: Component,
|
|
4029
4214
|
args: [{ selector: 'ui-portlet-card', imports: [
|
|
4030
4215
|
UicStatusLabelComponent,
|
|
4031
4216
|
CurrencyPipe,
|
|
4217
|
+
UicButtonComponent,
|
|
4032
4218
|
DatePipe
|
|
4033
|
-
], template: "<div class=\"portlet\" [class.portlet-vertical]=\"layout === 'vertical'\" [style.gridTemplateColumns]=\"gridTemplateColumns\">\n @for (item of data; track $index) {\n <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\n <div class=\"portlet-row-label\">{{item.label}}</div>\n <div class=\"portlet-row-value\">\n @if (item.icon) {\n <i [class]=\"item.icon\"></i>\n }\n @if (item.type
|
|
4034
|
-
}], propDecorators: {
|
|
4219
|
+
], template: "@if ( title) {\r\n <h2>{{title}}</h2>\r\n}\r\n<div class=\"portlet\" \r\n [class.portlet-vertical]=\"layout === 'vertical'\" \r\n [style.gridTemplateColumns]=\"gridTemplateColumns\"\r\n [style]=\"'gap: ' + gap + 'px;'\" >\r\n @for (item of data; track $index) {\r\n <div class=\"portlet-row\" [class.portlet-row-vertical]=\"layout === 'vertical'\">\r\n <div class=\"portlet-row-label\">{{item.label}}</div>\r\n <div class=\"portlet-row-value\">\r\n @if (item.icon) {\r\n <i [class]=\"item.icon\"></i>\r\n }\r\n @if (['text','copy'].includes(item.type)) {\r\n <div class=\"p-type-text\">\r\n <div class=\"content-texttype\">\r\n {{item.value}} \r\n\r\n @if (item.type == 'copy'){\r\n <ui-button (click)=\"copyText(item.value.toString())\" type=\"bordered\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n }\r\n\r\n </div>\r\n <div class=\"p-type-text-sub\">{{item.subtext}}</div>\r\n </div>\r\n }\r\n @if (item.type == 'money') {\r\n {{ +item.value | currency: item.currencyCode}} \r\n }\r\n \r\n @if (item.type == 'date') {\r\n {{ item.value .toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (item.type == 'status' || item.type == 'tag') {\r\n <ui-status-label [type]=\"item.type\" [color]=\"item.color||'black'\"> {{item.value}}</ui-status-label>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".portlet-vertical{display:grid}.portlet-row{display:flex;justify-content:space-between;font-size:.9rem}.portlet-row-vertical{flex-direction:column;align-items:flex-start;gap:4px}.portlet-row-value{font-weight:500;display:flex;justify-content:flex-end;gap:5px}.portlet-row-label{font-weight:400;color:var(--grey-500)}.p-type-text{font-size:.9rem;line-height:1.1rem;text-align:right}.p-type-text-sub{text-align:right;color:var(--grey-500);font-size:.8rem;font-weight:300}.portlet-vertical .portlet-row-value{justify-content:flex-start}.portlet-vertical .portlet-row-label,.portlet-vertical .p-type-text,.portlet-vertical .p-type-text-sub{text-align:left}.content-texttype{display:flex;gap:20px;align-items:center;width:100%}h2{width:100%;font-size:20px;font-weight:600;margin-bottom:15px}\n"] }]
|
|
4220
|
+
}], propDecorators: { title: [{
|
|
4221
|
+
type: Input
|
|
4222
|
+
}], data: [{
|
|
4035
4223
|
type: Input
|
|
4036
4224
|
}], layout: [{
|
|
4037
4225
|
type: Input
|
|
4038
4226
|
}], cols: [{
|
|
4039
4227
|
type: Input
|
|
4228
|
+
}], gap: [{
|
|
4229
|
+
type: Input
|
|
4040
4230
|
}] } });
|
|
4041
4231
|
|
|
4042
4232
|
class UicTabsButtonComponent {
|
|
@@ -4061,6 +4251,180 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4061
4251
|
type: Output
|
|
4062
4252
|
}] } });
|
|
4063
4253
|
|
|
4254
|
+
class UicWorkPanelComponent {
|
|
4255
|
+
cdr;
|
|
4256
|
+
host;
|
|
4257
|
+
/**
|
|
4258
|
+
* Compatibilidad con la version previa (un unico componente inicial).
|
|
4259
|
+
* Si se envia, se crea como primera pestana.
|
|
4260
|
+
*/
|
|
4261
|
+
componentType;
|
|
4262
|
+
componentInputs = {};
|
|
4263
|
+
/**
|
|
4264
|
+
* Lista inicial de pestanas a renderizar.
|
|
4265
|
+
*/
|
|
4266
|
+
tabs = [];
|
|
4267
|
+
tabsChange = new EventEmitter();
|
|
4268
|
+
tabClosed = new EventEmitter();
|
|
4269
|
+
tabSelected = new EventEmitter();
|
|
4270
|
+
tabAdded = new EventEmitter();
|
|
4271
|
+
addTabRequest = new EventEmitter();
|
|
4272
|
+
minPosition = 1;
|
|
4273
|
+
showAddButton = true;
|
|
4274
|
+
fullView = true;
|
|
4275
|
+
isMinimized = false;
|
|
4276
|
+
activeTabId;
|
|
4277
|
+
tabInstances = [];
|
|
4278
|
+
idCounter = 0;
|
|
4279
|
+
initialized = false;
|
|
4280
|
+
constructor(cdr) {
|
|
4281
|
+
this.cdr = cdr;
|
|
4282
|
+
}
|
|
4283
|
+
ngAfterViewInit() {
|
|
4284
|
+
this.initialized = true;
|
|
4285
|
+
this.initializeTabs();
|
|
4286
|
+
this.renderActiveTab();
|
|
4287
|
+
// Evita ExpressionChanged en el primer ciclo al crear dinamicamente.
|
|
4288
|
+
this.cdr.detectChanges();
|
|
4289
|
+
}
|
|
4290
|
+
initializeTabs() {
|
|
4291
|
+
if (this.tabs?.length) {
|
|
4292
|
+
this.tabs.forEach(tab => this.createTab(tab, false));
|
|
4293
|
+
}
|
|
4294
|
+
else if (this.componentType) {
|
|
4295
|
+
this.createTab({
|
|
4296
|
+
label: this.componentInputs['title'] ?? 'Panel',
|
|
4297
|
+
componentType: this.componentType,
|
|
4298
|
+
componentInputs: this.componentInputs
|
|
4299
|
+
}, false);
|
|
4300
|
+
}
|
|
4301
|
+
}
|
|
4302
|
+
addTab(tabConfig) {
|
|
4303
|
+
// Si el host aun no esta listo, guardamos la definicion para crearla luego.
|
|
4304
|
+
if (!this.initialized || !this.host) {
|
|
4305
|
+
const id = tabConfig.id ?? `tab-${++this.idCounter}`;
|
|
4306
|
+
this.tabs.push({ ...tabConfig, id });
|
|
4307
|
+
this.activeTabId = id;
|
|
4308
|
+
this.isMinimized = false;
|
|
4309
|
+
return id;
|
|
4310
|
+
}
|
|
4311
|
+
const instance = this.createTab(tabConfig, true);
|
|
4312
|
+
this.activeTabId = instance.id;
|
|
4313
|
+
this.isMinimized = false;
|
|
4314
|
+
this.renderActiveTab();
|
|
4315
|
+
this.tabAdded.emit(instance.id);
|
|
4316
|
+
this.tabSelected.emit(instance.id);
|
|
4317
|
+
return instance.id;
|
|
4318
|
+
}
|
|
4319
|
+
requestNewTab() {
|
|
4320
|
+
this.addTabRequest.emit();
|
|
4321
|
+
}
|
|
4322
|
+
selectTab(id) {
|
|
4323
|
+
this.isMinimized = false;
|
|
4324
|
+
if (this.activeTabId === id) {
|
|
4325
|
+
this.minimizePanel();
|
|
4326
|
+
return;
|
|
4327
|
+
}
|
|
4328
|
+
this.activeTabId = id;
|
|
4329
|
+
this.renderActiveTab();
|
|
4330
|
+
this.tabSelected.emit(id);
|
|
4331
|
+
}
|
|
4332
|
+
closeTab(id) {
|
|
4333
|
+
const index = this.tabInstances.findIndex(tab => tab.id === id);
|
|
4334
|
+
if (index === -1) {
|
|
4335
|
+
return;
|
|
4336
|
+
}
|
|
4337
|
+
const [tab] = this.tabInstances.splice(index, 1);
|
|
4338
|
+
const viewIndex = this.host.indexOf(tab.componentRef.hostView);
|
|
4339
|
+
if (viewIndex > -1) {
|
|
4340
|
+
this.host.detach(viewIndex);
|
|
4341
|
+
}
|
|
4342
|
+
tab.componentRef.destroy();
|
|
4343
|
+
if (this.activeTabId === id) {
|
|
4344
|
+
const next = this.tabInstances[index] ?? this.tabInstances[index - 1];
|
|
4345
|
+
this.activeTabId = next?.id;
|
|
4346
|
+
}
|
|
4347
|
+
if (!this.activeTabId) {
|
|
4348
|
+
this.isMinimized = true;
|
|
4349
|
+
}
|
|
4350
|
+
this.renderActiveTab();
|
|
4351
|
+
this.emitTabsChange();
|
|
4352
|
+
this.tabClosed.emit(id);
|
|
4353
|
+
}
|
|
4354
|
+
close() {
|
|
4355
|
+
if (this.activeTabId) {
|
|
4356
|
+
this.closeTab(this.activeTabId);
|
|
4357
|
+
}
|
|
4358
|
+
}
|
|
4359
|
+
minimizePanel() {
|
|
4360
|
+
this.isMinimized = true;
|
|
4361
|
+
this.activeTabId = '';
|
|
4362
|
+
}
|
|
4363
|
+
createTab(tabConfig, emitChange = true) {
|
|
4364
|
+
if (!this.host) {
|
|
4365
|
+
throw new Error('WorkPanel host ViewContainerRef not ready');
|
|
4366
|
+
}
|
|
4367
|
+
const id = tabConfig.id ?? `tab-${++this.idCounter}`;
|
|
4368
|
+
const componentRef = this.host.createComponent(tabConfig.componentType);
|
|
4369
|
+
Object.assign(componentRef.instance, tabConfig.componentInputs ?? {});
|
|
4370
|
+
const viewIndex = this.host.indexOf(componentRef.hostView);
|
|
4371
|
+
if (viewIndex > -1) {
|
|
4372
|
+
this.host.detach(viewIndex);
|
|
4373
|
+
}
|
|
4374
|
+
const instance = { ...tabConfig, id, componentRef };
|
|
4375
|
+
this.tabInstances.push(instance);
|
|
4376
|
+
if (!this.activeTabId) {
|
|
4377
|
+
this.activeTabId = id;
|
|
4378
|
+
}
|
|
4379
|
+
if (emitChange) {
|
|
4380
|
+
this.emitTabsChange();
|
|
4381
|
+
}
|
|
4382
|
+
return instance;
|
|
4383
|
+
}
|
|
4384
|
+
renderActiveTab() {
|
|
4385
|
+
while (this.host.length) {
|
|
4386
|
+
this.host.detach(0);
|
|
4387
|
+
}
|
|
4388
|
+
const active = this.tabInstances.find(tab => tab.id === this.activeTabId);
|
|
4389
|
+
if (active) {
|
|
4390
|
+
this.host.insert(active.componentRef.hostView);
|
|
4391
|
+
}
|
|
4392
|
+
}
|
|
4393
|
+
emitTabsChange() {
|
|
4394
|
+
const snapshot = this.tabInstances.map(({ componentRef, ...tab }) => ({ ...tab }));
|
|
4395
|
+
this.tabsChange.emit(snapshot);
|
|
4396
|
+
}
|
|
4397
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4398
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicWorkPanelComponent, isStandalone: true, selector: "ui-work-panel", inputs: { componentType: "componentType", componentInputs: "componentInputs", tabs: "tabs", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", addTabRequest: "addTabRequest" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\n>\n <div class=\"panel-header\">\n <ui-button (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\n @if (fullView) {\n <ui-button (click)=\"fullView = false\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\n } @else {\n <ui-button (click)=\"fullView = true\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\n }\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\n </div>\n <div class=\"panel-overflow\">\n <!-- contenido dinamico -->\n <ng-container #host></ng-container>\n </div>\n</div>\n@if (tabInstances.length > 0) {\n <div class=\"panel-nav-bar\">\n <div class=\"panel-tabs\">\n @for (tab of tabInstances; track tab.id) {\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\n <div class=\"min-text\">{{ tab.label }}</div>\n </button>\n <ui-button (click)=\"closeTab(tab.id)\" size=\"s\" [iconOnly]=\"true\" color=\"black\" type=\"ghost\" rightIcon=\"ri-close-line\"></ui-button>\n </div>\n }\n </div>\n </div>\n}\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;width:50vw;height:70vh;bottom:0;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;padding:2px 8px;display:flex;gap:8px}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.minimized-panel{min-width:180px;max-width:260px;height:34px;background-color:#fff;border:solid 1px var(--grey-300);border-radius:9px;color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{background-color:var(--primary-500);border-color:var(--primary-400);color:var(--white)}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;z-index:2000}}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }] });
|
|
4399
|
+
}
|
|
4400
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, decorators: [{
|
|
4401
|
+
type: Component,
|
|
4402
|
+
args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective], template: "<div\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\n>\n <div class=\"panel-header\">\n <ui-button (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\n @if (fullView) {\n <ui-button (click)=\"fullView = false\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\n } @else {\n <ui-button (click)=\"fullView = true\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\n }\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\n </div>\n <div class=\"panel-overflow\">\n <!-- contenido dinamico -->\n <ng-container #host></ng-container>\n </div>\n</div>\n@if (tabInstances.length > 0) {\n <div class=\"panel-nav-bar\">\n <div class=\"panel-tabs\">\n @for (tab of tabInstances; track tab.id) {\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\n <div class=\"min-text\">{{ tab.label }}</div>\n </button>\n <ui-button (click)=\"closeTab(tab.id)\" size=\"s\" [iconOnly]=\"true\" color=\"black\" type=\"ghost\" rightIcon=\"ri-close-line\"></ui-button>\n </div>\n }\n </div>\n </div>\n}\n", styles: [".open-panel{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background-color:#fff;border:solid 1px var(--grey-300);transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease}.mid-panel{position:fixed;width:50vw;height:70vh;bottom:0;right:0;display:flex;flex-direction:column;z-index:20;background-color:#fff;border:solid 1px var(--grey-400);border-radius:10px 10px 0 0;box-shadow:0 1px 6px 2px #00000039;transition:transform .18s ease,opacity .18s ease,width .22s ease,height .22s ease,bottom .2s ease,right .2s ease}.panel-nav-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;padding:2px 8px;display:flex;gap:8px}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.minimized-panel{min-width:180px;max-width:260px;height:34px;background-color:#fff;border:solid 1px var(--grey-300);border-radius:9px;color:var(--grey-800);font-size:13px;padding:0 4px 0 8px;display:flex;align-items:center;gap:5px;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.minimized-panel.active{background-color:var(--primary-500);border-color:var(--primary-400);color:var(--white)}.minimized-panel .min-text{margin-right:10px;flex:1 1;overflow:hidden;white-space:nowrap}.minimized-panel i{font-size:18px}.min-btn{border:none;background:transparent;color:inherit;display:flex;align-items:center;gap:6px;cursor:pointer;padding:0;flex:1 1 auto}.panel-overflow{width:100%;height:100%;height:fit-content;overflow:auto;animation:panelFadeIn .16s ease}.panel-header{display:flex;justify-content:flex-end;padding:5px 10px;gap:10px;border-radius:10px 10px 0 0}.add-tab{flex-shrink:0}.open-panel,.mid-panel{transform-origin:bottom right}@keyframes panelFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.panel-hidden{opacity:0;transform:translateY(10px) scale(.98);pointer-events:none}@media (min-width: 480px) and (max-width: 767px){.open-panel{position:fixed;inset:0;width:100vw;height:100vh;border-radius:0}.mid-panel{width:90vw;height:80vh;right:0;left:auto}}@media (max-width: 479px){.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;z-index:2000}}\n"] }]
|
|
4403
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { host: [{
|
|
4404
|
+
type: ViewChild,
|
|
4405
|
+
args: ['host', { read: ViewContainerRef, static: true }]
|
|
4406
|
+
}], componentType: [{
|
|
4407
|
+
type: Input
|
|
4408
|
+
}], componentInputs: [{
|
|
4409
|
+
type: Input
|
|
4410
|
+
}], tabs: [{
|
|
4411
|
+
type: Input
|
|
4412
|
+
}], tabsChange: [{
|
|
4413
|
+
type: Output
|
|
4414
|
+
}], tabClosed: [{
|
|
4415
|
+
type: Output
|
|
4416
|
+
}], tabSelected: [{
|
|
4417
|
+
type: Output
|
|
4418
|
+
}], tabAdded: [{
|
|
4419
|
+
type: Output
|
|
4420
|
+
}], addTabRequest: [{
|
|
4421
|
+
type: Output
|
|
4422
|
+
}], minPosition: [{
|
|
4423
|
+
type: Input
|
|
4424
|
+
}], showAddButton: [{
|
|
4425
|
+
type: Input
|
|
4426
|
+
}] } });
|
|
4427
|
+
|
|
4064
4428
|
const pushTop = trigger('pushTop', [
|
|
4065
4429
|
transition(':enter', [style({ opacity: 0, transform: 'translateY(20px)' }), animate('.3s ease', style({ opacity: 1, transform: 'translateY(0)' }))]),
|
|
4066
4430
|
transition(':leave', [animate('.3s ease', style({ opacity: 0, transform: 'translateY(-20px)' }))])
|
|
@@ -4161,11 +4525,11 @@ class UicModalComponent {
|
|
|
4161
4525
|
this.modalRef.closeFloating(null);
|
|
4162
4526
|
}
|
|
4163
4527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
|
|
4164
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"modal\" \r\n [class]=\"myConfig.size\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"modal-header\">\r\n {{myConfig.title}}\r\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n </div>\r\n }\r\n <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width:
|
|
4528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicModalComponent, isStandalone: true, selector: "ui-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div class=\"backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"modal\" \r\n [class]=\"myConfig.size\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"modal-header\">\r\n {{myConfig.title}}\r\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n </div>\r\n }\r\n <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 479px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 479px){.large{width:95%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [pushTop] });
|
|
4165
4529
|
}
|
|
4166
4530
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
|
|
4167
4531
|
type: Component,
|
|
4168
|
-
args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"modal\" \r\n [class]=\"myConfig.size\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"modal-header\">\r\n {{myConfig.title}}\r\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n </div>\r\n }\r\n <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width:
|
|
4532
|
+
args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"modal\" \r\n [class]=\"myConfig.size\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"modal-header\">\r\n {{myConfig.title}}\r\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\r\n </div>\r\n }\r\n <div class=\"modal-body\" [class.body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>", styles: [".backdrop{position:fixed;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center}@media (max-width: 479px){.backdrop{align-items:flex-start;padding-top:20px}}.modal{background:var(--white);border-radius:20px;min-width:300px;max-width:90%;height:fit-content;max-height:90vh;box-shadow:0 20px 70px #00000052;padding:0 10px;display:flex;flex-direction:column}.modal-header{padding:0 15px;width:100%;display:flex;align-items:center;font-size:22px;font-weight:600;justify-content:space-between;margin:0 auto;color:var(--primary-500);height:63px;border-bottom:solid 1px var(--primary-500)}@media (max-width: 479px){.modal-header{padding:5px}}.modal-body{flex:1 1;overflow-y:auto}.body-padding{padding:25px}@media (max-width: 479px){.body-padding{padding:10px}}.medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.medium{width:90%}}.large{width:80%;max-width:900px}@media (max-width: 479px){.large{width:95%}}\n"] }]
|
|
4169
4533
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
4170
4534
|
type: Inject,
|
|
4171
4535
|
args: [UiModalRef]
|
|
@@ -4244,11 +4608,11 @@ class UicSideModalComponent {
|
|
|
4244
4608
|
this.modal.triggerSave();
|
|
4245
4609
|
}
|
|
4246
4610
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, deps: [{ token: UiModalRef }, { token: MODAL_COMPONENT }, { token: MODAL_CONFIG }, { token: i0.Injector }, { token: UicModalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
4247
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n (@sideModal.done)=\"onAnimationDone($event)\" \r\n class=\"sidemodal\" \r\n [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n [style.width]=\"myConfig.width??'60%'\" \r\n (click)=\"$event.stopPropagation()\">\r\n @if (myConfig.headerEnabled) {\r\n <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n }\r\n <div class=\"sidemodal-body\" [class.nopadding]=\"myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n @if (myConfig.footerEnabled) {\r\n <div class=\"sidemodal-footer\">\r\n @if (myConfig.showCancelButton) {\r\n <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width:
|
|
4611
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicSideModalComponent, isStandalone: true, selector: "ui-side-modal", viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }], ngImport: i0, template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n (@sideModal.done)=\"onAnimationDone($event)\" \r\n class=\"sidemodal\" \r\n [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n [style.width]=\"myConfig.width??'60%'\" \r\n (click)=\"$event.stopPropagation()\">\r\n @if (myConfig.headerEnabled) {\r\n <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n }\r\n <div class=\"sidemodal-body\" [class.nopadding]=\"myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n @if (myConfig.footerEnabled) {\r\n <div class=\"sidemodal-footer\">\r\n @if (myConfig.showCancelButton) {\r\n <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 479px){.sidemodal{width:100%!important}}@media (min-width: 480px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:calc(9 * var(--design-size-ref));padding:0 calc(4 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}.nopadding{padding:0}\n"], dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }], animations: [sideModal, fadeBackdrop] });
|
|
4248
4612
|
}
|
|
4249
4613
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSideModalComponent, decorators: [{
|
|
4250
4614
|
type: Component,
|
|
4251
|
-
args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n (@sideModal.done)=\"onAnimationDone($event)\" \r\n class=\"sidemodal\" \r\n [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n [style.width]=\"myConfig.width??'60%'\" \r\n (click)=\"$event.stopPropagation()\">\r\n @if (myConfig.headerEnabled) {\r\n <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n }\r\n <div class=\"sidemodal-body\" [class.nopadding]=\"myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n @if (myConfig.footerEnabled) {\r\n <div class=\"sidemodal-footer\">\r\n @if (myConfig.showCancelButton) {\r\n <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width:
|
|
4615
|
+
args: [{ selector: 'ui-side-modal', imports: [PortalModule, UicButtonComponent], animations: [sideModal, fadeBackdrop], template: "<div [@fadeBackdrop]=\"state\" class=\"backdrop\" (click)=\"closeOuside()\"> \r\n</div>\r\n<div [@sideModal]=\"state\" \r\n (@sideModal.done)=\"onAnimationDone($event)\" \r\n class=\"sidemodal\" \r\n [style.padding-top]=\"myConfig.headerEnabled?'28px':'0'\"\r\n [style.width]=\"myConfig.width??'60%'\" \r\n (click)=\"$event.stopPropagation()\">\r\n @if (myConfig.headerEnabled) {\r\n <ui-button class=\"close-icon\" (click)=\"close()\" icon=\"ri-close-large-line\" type=\"ghost\" color=\"black\" [iconOnly]=\"true\" size=\"m\"></ui-button>\r\n }\r\n <div class=\"sidemodal-body\" [class.nopadding]=\"myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n @if (myConfig.footerEnabled) {\r\n <div class=\"sidemodal-footer\">\r\n @if (myConfig.showCancelButton) {\r\n <ui-button (click)=\"cancel()\" color=\"black\" size=\"l\" type=\"bordered\" [icon]=\"myConfig.footerCancelIcon??'ri-close-line'\">{{myConfig.footerCancelButtonText??'Cancelar'}}</ui-button>\r\n }\r\n <ui-button (click)=\"save()\" color=\"black\" size=\"l\" [rightIcon]=\"myConfig.footerOkIcon??'ri-check-line'\">{{myConfig.footerOkButtonText??'Siguiente'}}</ui-button>\r\n </div>\r\n }\r\n</div>", styles: ["::ng-deep .side-modal-panel{position:fixed!important;top:0;right:0;height:100%;width:400px;background:#fff;z-index:2000;box-shadow:-2px 0 8px #0003;display:flex;flex-direction:column}.backdrop{position:fixed;inset:0;width:100%;height:100vh;background-color:#00000080;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:flex;justify-content:flex-end}.close-icon{position:absolute;right:30px;height:30px}.sidemodal{position:fixed;right:0;top:0;height:100%;background-color:var(--white);display:flex;flex-direction:column}@media (max-width: 479px){.sidemodal{width:100%!important}}@media (min-width: 480px) and (max-width: 767px){.sidemodal{width:90%!important}}.sidemodal-header{height:30px;width:100%;padding:0 30px;display:flex;align-items:center;justify-content:space-between}.sidemodal-body{flex:1;overflow-y:auto;padding:32px}.sidemodal-footer{height:calc(9 * var(--design-size-ref));padding:0 calc(4 * var(--design-size-ref));width:100%;display:flex;align-items:center;gap:8px;justify-content:flex-end;border-top:1px solid var(--grey-300)}.nopadding{padding:0}\n"] }]
|
|
4252
4616
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
4253
4617
|
type: Inject,
|
|
4254
4618
|
args: [UiModalRef]
|
|
@@ -4345,11 +4709,11 @@ class TinyAlertComponent {
|
|
|
4345
4709
|
this.modalRef.closeFloating(value ? this.response : null);
|
|
4346
4710
|
}
|
|
4347
4711
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, deps: [{ token: MODAL_DATA }, { token: UiModalRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4348
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <h3 [class]=\"'icon-'+data.type\"> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width:
|
|
4712
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <h3 [class]=\"'icon-'+data.type\"> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
|
|
4349
4713
|
}
|
|
4350
4714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
|
|
4351
4715
|
type: Component,
|
|
4352
|
-
args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <h3 [class]=\"'icon-'+data.type\"> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width:
|
|
4716
|
+
args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n @if (data.iconPath) {\r\n <img [src]=\"data.iconPath\" alt=\"\"> \r\n }@else{\r\n <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n }\r\n <h3 [class]=\"'icon-'+data.type\"> {{data.title}} </h3>\r\n <div class=\"alert-body\" [innerHTML]=\"data.body\"> </div>\r\n <div class=\"tinyalert-buttons\">\r\n @if (data.showCancelButton) {\r\n <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n }\r\n <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n </div>\r\n <button class=\"floating-close\" (click)=\"close(false)\" >\r\n <i class=\"ri-close-line\"></i>\r\n </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
|
|
4353
4717
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
4354
4718
|
type: Inject,
|
|
4355
4719
|
args: [MODAL_DATA]
|
|
@@ -4452,6 +4816,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4452
4816
|
}]
|
|
4453
4817
|
}] });
|
|
4454
4818
|
|
|
4819
|
+
class FirstCapitalPipe {
|
|
4820
|
+
transform(str, max = 0) {
|
|
4821
|
+
if (str == null) {
|
|
4822
|
+
return '-';
|
|
4823
|
+
}
|
|
4824
|
+
if (str.length < 4) {
|
|
4825
|
+
return str;
|
|
4826
|
+
}
|
|
4827
|
+
if (max != 0 && str.length > max) {
|
|
4828
|
+
str = str.substring(0, max) + '...';
|
|
4829
|
+
}
|
|
4830
|
+
return str.replace(/\b(\p{L}+)(\p{L}*)/gu, (match, firstChar, rest) => {
|
|
4831
|
+
const capitalizedFirstChar = firstChar.normalize('NFD').charAt(0).toUpperCase() + firstChar.slice(1).toLowerCase();
|
|
4832
|
+
const lowerRest = rest.toLowerCase();
|
|
4833
|
+
return capitalizedFirstChar + lowerRest;
|
|
4834
|
+
});
|
|
4835
|
+
}
|
|
4836
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FirstCapitalPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
4837
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: FirstCapitalPipe, isStandalone: true, name: "firstCapital" });
|
|
4838
|
+
}
|
|
4839
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FirstCapitalPipe, decorators: [{
|
|
4840
|
+
type: Pipe,
|
|
4841
|
+
args: [{
|
|
4842
|
+
name: 'firstCapital'
|
|
4843
|
+
}]
|
|
4844
|
+
}] });
|
|
4845
|
+
|
|
4455
4846
|
// Mapea datos a tablas (deben tener el mismo nombre)
|
|
4456
4847
|
function helperTableMapDatoToColums(data, headers) {
|
|
4457
4848
|
const row = [];
|
|
@@ -4481,5 +4872,5 @@ function helperFormMapFormdataToObject(formData, defaults) {
|
|
|
4481
4872
|
* Generated bundle index. Do not edit.
|
|
4482
4873
|
*/
|
|
4483
4874
|
|
|
4484
|
-
export { DROPDOWN_OVERLAY_CONTROLS, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicPhoneInputComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, pushTop, sideModal, simpleFade };
|
|
4875
|
+
export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicPhoneInputComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, pushTop, sideModal, simpleFade };
|
|
4485
4876
|
//# sourceMappingURL=ui-core-abv.mjs.map
|