ui-core-abv 0.4.85 → 0.5.0
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
CHANGED
|
@@ -3270,7 +3270,7 @@ class UicDropdownContainerComponent {
|
|
|
3270
3270
|
provide: DROPDOWN_OVERLAY_CONTROLS,
|
|
3271
3271
|
useExisting: forwardRef(() => UicDropdownContainerComponent),
|
|
3272
3272
|
},
|
|
3273
|
-
], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n <div class=\"ui-dropdown-panel\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
3273
|
+
], queries: [{ propertyName: "projectedTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true, static: true }], ngImport: i0, template: "\r\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\r\n <ng-content select=\"[button]\"></ng-content>\r\n</div>\r\n\r\n<ng-template #contentTemplate >\r\n <div class=\"ui-dropdown-panel\">\r\n <ng-content select=\"[content]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
3274
3274
|
}
|
|
3275
3275
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicDropdownContainerComponent, decorators: [{
|
|
3276
3276
|
type: Component,
|
|
@@ -3279,7 +3279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
3279
3279
|
provide: DROPDOWN_OVERLAY_CONTROLS,
|
|
3280
3280
|
useExisting: forwardRef(() => UicDropdownContainerComponent),
|
|
3281
3281
|
},
|
|
3282
|
-
], template: "\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\n <ng-content select=\"[button]\"></ng-content>\n</div>\n\n<ng-template #contentTemplate >\n <div class=\"ui-dropdown-panel\">\n <ng-content select=\"[content]\"></ng-content>\n </div>\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
|
|
3282
|
+
], template: "\r\n<div #triggerButton class=\"triggerButton\" (click)=\"onTriggerClick($event)\">\r\n <ng-content select=\"[button]\"></ng-content>\r\n</div>\r\n\r\n<ng-template #contentTemplate >\r\n <div class=\"ui-dropdown-panel\">\r\n <ng-content select=\"[content]\"></ng-content>\r\n </div>\r\n</ng-template>", styles: [":host{display:inline-block}.triggerButton{width:fit-content;height:fit-content}.ui-dropdown-panel{border-radius:var(--input-radius);background-color:var(--white);box-shadow:0 1px 1px #00000020,0 2px 5px #00000050;width:100%;top:100%;max-height:50vh;font-size:.875rem;z-index:500;overflow:auto}\n"] }]
|
|
3283
3283
|
}], propDecorators: { buttonLabel: [{
|
|
3284
3284
|
type: Input
|
|
3285
3285
|
}], disabled: [{
|
|
@@ -3846,11 +3846,11 @@ class UicModalComponent {
|
|
|
3846
3846
|
this.modalRef.closeFloating(null);
|
|
3847
3847
|
}
|
|
3848
3848
|
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 });
|
|
3849
|
-
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=\"uic_backdrop\" (click)=\"closeOuside()\"> \n <div @pushTop class=\"uic_modal\" \n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n (click)=\"$event.stopPropagation()\">\n \n @if ( myConfig.title) {\n <div class=\"uic_modal-header\">\n {{myConfig.title}}\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n </div>\n }\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n </div>\n</div>\n", styles: [".uic_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){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_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}.uic_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){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_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] });
|
|
3849
|
+
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=\"uic_backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"uic_modal\" \r\n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"uic_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=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: [".uic_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){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_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}.uic_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){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_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] });
|
|
3850
3850
|
}
|
|
3851
3851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
|
|
3852
3852
|
type: Component,
|
|
3853
|
-
args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \n <div @pushTop class=\"uic_modal\" \n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\n (click)=\"$event.stopPropagation()\">\n \n @if ( myConfig.title) {\n <div class=\"uic_modal-header\">\n {{myConfig.title}}\n <ui-button color=\"red\" type=\"ghost\" icon=\"ri-close-large-line\" (click)=\"close()\" [iconOnly]=\"true\"></ui-button>\n </div>\n }\n <div class=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\n <ng-template cdkPortalOutlet></ng-template>\n </div>\n\n </div>\n</div>\n", styles: [".uic_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){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_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}.uic_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){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
|
|
3853
|
+
args: [{ selector: 'ui-modal', imports: [CommonModule, PortalModule, UicButtonComponent], animations: [pushTop], template: "<div class=\"uic_backdrop\" (click)=\"closeOuside()\"> \r\n <div @pushTop class=\"uic_modal\" \r\n [class]=\"myConfig.size ? 'uic_' + myConfig.size : ''\"\r\n (click)=\"$event.stopPropagation()\">\r\n \r\n @if ( myConfig.title) {\r\n <div class=\"uic_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=\"uic_modal-body\" [class.uic_body-padding]=\"myConfig.title!='' && !myConfig.noPadding\">\r\n <ng-template cdkPortalOutlet></ng-template>\r\n </div>\r\n\r\n </div>\r\n</div>\r\n", styles: [".uic_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){.uic_backdrop{align-items:flex-start;padding-top:20px}}.uic_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}.uic_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){.uic_modal-header{padding:5px}}.uic_modal-body{flex:1 1;overflow-y:auto}.uic_body-padding{padding:25px}@media (max-width: 479px){.uic_body-padding{padding:10px}}.uic_medium{width:70%;max-width:800px;max-height:80%}@media (max-width: 479px){.uic_medium{width:90%}}.uic_large{width:80%;max-width:900px}@media (max-width: 479px){.uic_large{width:95%}}\n"] }]
|
|
3854
3854
|
}], ctorParameters: () => [{ type: UiModalRef, decorators: [{
|
|
3855
3855
|
type: Inject,
|
|
3856
3856
|
args: [UiModalRef]
|
|
@@ -4080,7 +4080,7 @@ function createTinyDelete(body, options) {
|
|
|
4080
4080
|
function createTinyWarning(body, options) {
|
|
4081
4081
|
return {
|
|
4082
4082
|
body,
|
|
4083
|
-
title: '¡
|
|
4083
|
+
title: '¡Alerta!',
|
|
4084
4084
|
iconChar: 'ri-alarm-warning-line',
|
|
4085
4085
|
okButtonColor: 'yellow',
|
|
4086
4086
|
type: 'warning',
|
|
@@ -4190,7 +4190,7 @@ class ItemValueComponent {
|
|
|
4190
4190
|
});
|
|
4191
4191
|
}
|
|
4192
4192
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4193
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ItemValueComponent, isStandalone: true, selector: "ui-item-value", inputs: { key: "key", type: "type", alignment: "alignment", row: "row", disabled: "disabled", data: "data", switchValidation: "switchValidation" }, outputs: { switchConfirmed: "switchConfirmed" }, ngImport: i0, template: "@if (data) {\r\n @if (type == 'text' || !type) {\r\n @if( data.icon ){ <i [class]=\"data.icon\"></i>}\r\n {{ data.value }} \r\n @if( data.rightIcon ){ <i [class]=\"data.rightIcon\"></i>}\r\n }\r\n @if (type == 'copy') {\r\n <div class=\"copy-div\">\r\n {{ data.value }} \r\n <ui-button (click)=\"copyText((data.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n </div>\r\n }\r\n @if (type == 'money'){\r\n {{ + (data.value??0) | currency: data.currencyCode||''}} \r\n }\r\n @if (type == 'date'){\r\n {{ (data.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (type == 'bigtext') {\r\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n {{ data.value }} \r\n @if( data.value && data.value.toString().length > 0){\r\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n }\r\n @if (!expanded && data.value && data.value.toString().length > 0) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (type == 'icon-list') {\r\n @for (alert of data.list; track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (type == 'list'){\r\n <uic-table-list [list]=\"data.list??[]\"></uic-table-list> \r\n }\r\n @else if (type == 'user'){\r\n <uic-table-user [user]=\"data.user\"></uic-table-user> \r\n }\r\n @else if (type == 'status'){\r\n @if (data.value) {\r\n <ui-status-label [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }@else {\r\n -\r\n }\r\n }\r\n @else if (type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }\r\n @else if (type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \r\n </div>\r\n }\r\n\r\n @if( data.subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ data.subtext }}</div>\r\n }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
4193
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: ItemValueComponent, isStandalone: true, selector: "ui-item-value", inputs: { key: "key", type: "type", alignment: "alignment", row: "row", disabled: "disabled", data: "data", switchValidation: "switchValidation" }, outputs: { switchConfirmed: "switchConfirmed" }, ngImport: i0, template: "@if (data) {\r\n @if (type == 'text' || !type) {\r\n @if( data.icon ){ <i [class]=\"data.icon + ' ui-trc-' + data.iconColor\"></i>}\r\n {{ data.value }} \r\n @if( data.rightIcon ){ <i [class]=\"data.rightIcon + ' ui-trc-' + data.iconColor\"></i>}\r\n }\r\n @if (type == 'copy') {\r\n <div class=\"copy-div\">\r\n {{ data.value }} \r\n <ui-button (click)=\"copyText((data.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n </div>\r\n }\r\n @if (type == 'money'){\r\n {{ + (data.value??0) | currency: data.currencyCode||''}} \r\n }\r\n @if (type == 'date'){\r\n {{ (data.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (type == 'bigtext') {\r\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n {{ data.value }} \r\n @if( data.value && data.value.toString().length > 0){\r\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n }\r\n @if (!expanded && data.value && data.value.toString().length > 0) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (type == 'icon-list') {\r\n @for (alert of data.list; track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (type == 'list'){\r\n <uic-table-list [list]=\"data.list??[]\"></uic-table-list> \r\n }\r\n @else if (type == 'user'){\r\n <uic-table-user [user]=\"data.user\"></uic-table-user> \r\n }\r\n @else if (type == 'status'){\r\n @if (data.value) {\r\n <ui-status-label [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }@else {\r\n -\r\n }\r\n }\r\n @else if (type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }\r\n @else if (type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \r\n </div>\r\n }\r\n\r\n @if( data.subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ data.subtext }}</div>\r\n }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.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-600)}.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)}\n"], dependencies: [{ kind: "directive", type: UicToolTipDirective, selector: "[tip]", inputs: ["tip"] }, { kind: "component", type: UicTableUserComponent, selector: "uic-table-user", inputs: ["user"] }, { kind: "component", type: UicSwichComponent, selector: "ui-switch", inputs: ["checked", "disabled", "placeholder", "label"], outputs: ["checkedChange"] }, { kind: "component", type: UicStatusLabelComponent, selector: "ui-status-label", inputs: ["color", "type", "icon"] }, { kind: "component", type: UicTableListComponent, selector: "uic-table-list", inputs: ["list"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }, { kind: "pipe", type: DatePipe, name: "date" }] });
|
|
4194
4194
|
}
|
|
4195
4195
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ItemValueComponent, decorators: [{
|
|
4196
4196
|
type: Component,
|
|
@@ -4204,7 +4204,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4204
4204
|
UicButtonComponent,
|
|
4205
4205
|
CurrencyPipe,
|
|
4206
4206
|
DatePipe
|
|
4207
|
-
], template: "@if (data) {\r\n @if (type == 'text' || !type) {\r\n @if( data.icon ){ <i [class]=\"data.icon\"></i>}\r\n {{ data.value }} \r\n @if( data.rightIcon ){ <i [class]=\"data.rightIcon\"></i>}\r\n }\r\n @if (type == 'copy') {\r\n <div class=\"copy-div\">\r\n {{ data.value }} \r\n <ui-button (click)=\"copyText((data.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n </div>\r\n }\r\n @if (type == 'money'){\r\n {{ + (data.value??0) | currency: data.currencyCode||''}} \r\n }\r\n @if (type == 'date'){\r\n {{ (data.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (type == 'bigtext') {\r\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n {{ data.value }} \r\n @if( data.value && data.value.toString().length > 0){\r\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n }\r\n @if (!expanded && data.value && data.value.toString().length > 0) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (type == 'icon-list') {\r\n @for (alert of data.list; track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (type == 'list'){\r\n <uic-table-list [list]=\"data.list??[]\"></uic-table-list> \r\n }\r\n @else if (type == 'user'){\r\n <uic-table-user [user]=\"data.user\"></uic-table-user> \r\n }\r\n @else if (type == 'status'){\r\n @if (data.value) {\r\n <ui-status-label [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }@else {\r\n -\r\n }\r\n }\r\n @else if (type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }\r\n @else if (type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \r\n </div>\r\n }\r\n\r\n @if( data.subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ data.subtext }}</div>\r\n }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.ui-alignment-center{justify-content:center;text-align:center}\n"] }]
|
|
4207
|
+
], template: "@if (data) {\r\n @if (type == 'text' || !type) {\r\n @if( data.icon ){ <i [class]=\"data.icon + ' ui-trc-' + data.iconColor\"></i>}\r\n {{ data.value }} \r\n @if( data.rightIcon ){ <i [class]=\"data.rightIcon + ' ui-trc-' + data.iconColor\"></i>}\r\n }\r\n @if (type == 'copy') {\r\n <div class=\"copy-div\">\r\n {{ data.value }} \r\n <ui-button (click)=\"copyText((data.value??'').toString(),$event)\" type=\"ghost\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-file-copy-line\"></ui-button>\r\n </div>\r\n }\r\n @if (type == 'money'){\r\n {{ + (data.value??0) | currency: data.currencyCode||''}} \r\n }\r\n @if (type == 'date'){\r\n {{ (data.value??'').toString() | date: 'dd/MM/yyyy'}} \r\n }\r\n @if (type == 'bigtext') {\r\n <div (click)=\"expand($event)\" class=\"expandible-row\" [class.expandedrow]=\"expanded\">\r\n {{ data.value }} \r\n @if( data.value && data.value.toString().length > 0){\r\n <i [class]=\"expanded?'ri-arrow-up-s-line':'ri-arrow-down-s-line'\"></i>\r\n }\r\n @if (!expanded && data.value && data.value.toString().length > 0) {\r\n <div class=\"fade-overlay\"></div>\r\n }\r\n </div>\r\n }\r\n @if (type == 'icon-list') {\r\n @for (alert of data.list; track $index) {\r\n <i [tip]=\"alert.text\" [class]=\"alert.icon + ' ui-alert'\" ></i>\r\n }\r\n }\r\n @else if (type == 'list'){\r\n <uic-table-list [list]=\"data.list??[]\"></uic-table-list> \r\n }\r\n @else if (type == 'user'){\r\n <uic-table-user [user]=\"data.user\"></uic-table-user> \r\n }\r\n @else if (type == 'status'){\r\n @if (data.value) {\r\n <ui-status-label [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }@else {\r\n -\r\n }\r\n }\r\n @else if (type == 'tag'){\r\n <ui-status-label type=\"tag\" [icon]=\"data.icon??'ri-circle-fill'\" [color]=\"data.color??''\"> {{data.value}} </ui-status-label> \r\n }\r\n @else if (type == 'switch'){\r\n <div (click)=\"$event.stopPropagation()\">\r\n <ui-switch [disabled]=\"disabled\" [(checked)]=\"checked\" (checkedChange)=\"switchHandler(row.id,$event)\"></ui-switch> \r\n </div>\r\n }\r\n\r\n @if( data.subtext ){\r\n <div [class]=\"'subtext ui-alignment-'+alignment\">{{ data.subtext }}</div>\r\n }\r\n}\r\n\r\n", styles: [".copy-div{display:flex;align-items:center;gap:5px}.expandible-row{display:flex;align-items:flex-start;gap:10px;height:calc(var(--table-spacing-ref) * 4);overflow:hidden;cursor:n-resize;-webkit-user-select:none;user-select:none;position:relative}.expandible-row i{font-size:18px;font-weight:600}.expandible-row:hover>i{color:var(--primary-500)}.fade-overlay{position:absolute;bottom:0;left:0;width:100%;height:10px;pointer-events:none;background:linear-gradient(to top,white 0%,transparent 100%)}.expandedrow{height:fit-content}.subtext{font-size:12px;color:var(--grey-500);font-weight:400;text-align:left}.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-600)}.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)}\n"] }]
|
|
4208
4208
|
}], propDecorators: { key: [{
|
|
4209
4209
|
type: Input
|
|
4210
4210
|
}], type: [{
|
|
@@ -4768,7 +4768,7 @@ class UicSignaturePadComponent extends base$1 {
|
|
|
4768
4768
|
useExisting: forwardRef(() => UicSignaturePadComponent),
|
|
4769
4769
|
multi: true,
|
|
4770
4770
|
},
|
|
4771
|
-
], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\n <canvas\n #canvas\n class=\"signature-canvas\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n (pointerdown)=\"startDraw($event)\"\n (pointermove)=\"draw($event)\"\n (pointerup)=\"endDraw($event)\"\n (pointerleave)=\"endDraw($event)\"\n ></canvas>\n <div class=\"signature-actions\">\n <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\n </div>\n</div>\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"] }] });
|
|
4771
|
+
], 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"] }] });
|
|
4772
4772
|
}
|
|
4773
4773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicSignaturePadComponent, decorators: [{
|
|
4774
4774
|
type: Component,
|
|
@@ -4778,7 +4778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
4778
4778
|
useExisting: forwardRef(() => UicSignaturePadComponent),
|
|
4779
4779
|
multi: true,
|
|
4780
4780
|
},
|
|
4781
|
-
], template: "<div class=\"signature-pad\" [style.width.px]=\"width\">\n <canvas\n #canvas\n class=\"signature-canvas\"\n [attr.width]=\"width\"\n [attr.height]=\"height\"\n (pointerdown)=\"startDraw($event)\"\n (pointermove)=\"draw($event)\"\n (pointerup)=\"endDraw($event)\"\n (pointerleave)=\"endDraw($event)\"\n ></canvas>\n <div class=\"signature-actions\">\n <ui-button size=\"s\" type=\"ghost\" icon=\"ri-delete-bin-line\" (click)=\"clear()\">Limpiar</ui-button>\n </div>\n</div>\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"] }]
|
|
4781
|
+
], 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"] }]
|
|
4782
4782
|
}], propDecorators: { width: [{
|
|
4783
4783
|
type: Input
|
|
4784
4784
|
}], height: [{
|
|
@@ -4840,6 +4840,7 @@ class UicWorkPanelComponent {
|
|
|
4840
4840
|
componentType;
|
|
4841
4841
|
componentInputs = {};
|
|
4842
4842
|
tabs = [];
|
|
4843
|
+
closeWarning;
|
|
4843
4844
|
width = '50%';
|
|
4844
4845
|
duplicateValidationMessage = "";
|
|
4845
4846
|
tabsChange = new EventEmitter();
|
|
@@ -4918,7 +4919,22 @@ class UicWorkPanelComponent {
|
|
|
4918
4919
|
this.renderActiveTab();
|
|
4919
4920
|
this.tabSelected.emit(id);
|
|
4920
4921
|
}
|
|
4922
|
+
close() {
|
|
4923
|
+
if (this.activeTabId)
|
|
4924
|
+
this.closeTab(this.activeTabId);
|
|
4925
|
+
}
|
|
4921
4926
|
closeTab(id) {
|
|
4927
|
+
if (this.closeWarning) {
|
|
4928
|
+
this.tinyAlert.showAlert(this.closeWarning).then(r => {
|
|
4929
|
+
if (r.value)
|
|
4930
|
+
this.destroyPanel(id);
|
|
4931
|
+
});
|
|
4932
|
+
}
|
|
4933
|
+
else {
|
|
4934
|
+
this.destroyPanel(id);
|
|
4935
|
+
}
|
|
4936
|
+
}
|
|
4937
|
+
destroyPanel(id) {
|
|
4922
4938
|
const index = this.tabInstances.findIndex(tab => tab.id === id);
|
|
4923
4939
|
if (index === -1) {
|
|
4924
4940
|
return;
|
|
@@ -4941,11 +4957,6 @@ class UicWorkPanelComponent {
|
|
|
4941
4957
|
this.tabClosed.emit(id);
|
|
4942
4958
|
this.fullViewChange.emit(this.isFullViewActivated());
|
|
4943
4959
|
}
|
|
4944
|
-
close() {
|
|
4945
|
-
if (this.activeTabId) {
|
|
4946
|
-
this.closeTab(this.activeTabId);
|
|
4947
|
-
}
|
|
4948
|
-
}
|
|
4949
4960
|
minimizePanel() {
|
|
4950
4961
|
this.isMinimized = true;
|
|
4951
4962
|
this.activeTabId = '';
|
|
@@ -4990,7 +5001,7 @@ class UicWorkPanelComponent {
|
|
|
4990
5001
|
return !(this.isMinimized || !this.activeTabId) && this.fullView;
|
|
4991
5002
|
}
|
|
4992
5003
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4993
|
-
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", width: "width", duplicateValidationMessage: "duplicateValidationMessage", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", addTabRequest: "addTabRequest", fullViewChange: "fullViewChange" }, host: { properties: { "style.--panel-width": "this.panelWidth" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\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;height:80vh;min-width:30%;bottom:32px;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{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);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{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.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%;flex:1 1;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}.dynamic-width{width:var(--panel-width)}@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){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\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"] }] });
|
|
5004
|
+
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", closeWarning: "closeWarning", width: "width", duplicateValidationMessage: "duplicateValidationMessage", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", addTabRequest: "addTabRequest", fullViewChange: "fullViewChange" }, host: { properties: { "style.--panel-width": "this.panelWidth" } }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n [class.dynamic-width]=\"!fullView\"\r\n [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n [class.panel-hidden]=\"isMinimized || !activeTabId\"\r\n>\r\n <div class=\"panel-header\">\r\n <ui-button class=\"nomob\" (click)=\"minimizePanel()\" size=\"s\" tip=\"Minimizar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-subtract-fill\"></ui-button>\r\n @if (fullView) {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(false)\" size=\"s\" tip=\"Reducir\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-collapse-diagonal-fill\"></ui-button>\r\n } @else {\r\n <ui-button class=\"nomob\" (click)=\"changeSizeBtn(true)\" size=\"s\" tip=\"Agrandar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-expand-diagonal-fill\"></ui-button>\r\n }\r\n <ui-button (click)=\"close()\" size=\"s\" tip=\"Cerrar\" [iconOnly]=\"true\" color=\"black\" type=\"bordered\" rightIcon=\"ri-close-line\"></ui-button>\r\n </div>\r\n <div class=\"panel-overflow\">\r\n <!-- contenido dinamico -->\r\n <ng-container #host></ng-container>\r\n </div>\r\n</div>\r\n@if (tabInstances.length > 0) {\r\n <div class=\"panel-nav-bar\">\r\n <div class=\"panel-tabs\">\r\n @for (tab of tabInstances; track tab.id) {\r\n <div class=\"minimized-panel\" [class.active]=\"tab.id === activeTabId\">\r\n <button class=\"min-btn\" type=\"button\" (click)=\"selectTab(tab.id)\">\r\n <i [class]=\"tab.icon?tab.icon : 'ri-dossier-line'\"></i>\r\n <div class=\"min-text\">{{ tab.label }}</div>\r\n </button>\r\n <i (click)=\"closeTab(tab.id)\" class=\"close-btn ri-close-line\"></i>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\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;height:80vh;min-width:30%;bottom:32px;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{background-color:var(--primary-900);box-shadow:0 0 7px 5px #00000041;border-radius:20px 0 0;width:100%;position:fixed;bottom:0;right:0;z-index:100;padding:0 8px 2px 20px;display:flex;gap:8px;height:32px}@media (max-width: 479px){.panel-nav-bar{display:none}}.panel-tabs{width:100%;display:flex;align-items:center;justify-content:flex-end;gap:6px;overflow-x:auto;flex:1 1 auto}.close-btn{cursor:pointer}.close-btn:hover{color:var(--primary-900)}.minimized-panel{min-width:180px;max-width:260px;height:30px;background-color:#fff;opacity:.5;border-radius:9px;border:solid 3px var(--primary-900);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{opacity:1;background-color:#fff;border-color:#fff;border-radius:0 0 9px 9px;color:var(--primary-900);font-weight:600}.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%;flex:1 1;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}.dynamic-width{width:var(--panel-width)}@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){.nomob{display:none}.open-panel,.mid-panel{position:fixed;inset:0;border-radius:0;width:100%;height:100vh;z-index:500}}\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"] }] });
|
|
4994
5005
|
}
|
|
4995
5006
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, decorators: [{
|
|
4996
5007
|
type: Component,
|
|
@@ -5004,6 +5015,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
5004
5015
|
type: Input
|
|
5005
5016
|
}], tabs: [{
|
|
5006
5017
|
type: Input
|
|
5018
|
+
}], closeWarning: [{
|
|
5019
|
+
type: Input
|
|
5007
5020
|
}], width: [{
|
|
5008
5021
|
type: Input
|
|
5009
5022
|
}], duplicateValidationMessage: [{
|