ui-core-abv 0.4.7 → 0.4.75

package/fesm2022/ui-core-abv.mjs

@@ -3846,11 +3846,11 @@ class UicModalComponent {
         this.modalRef.closeFloating(null);
     }
     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 });
-    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] });
+    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] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicModalComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], ctorParameters: () => [{ type: UiModalRef, decorators: [{
                     type: Inject,
                     args: [UiModalRef]
@@ -4327,7 +4327,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 function helperTableMapDatoToColums(data, headers) {
     const row = [];
     headers.forEach(head => {
-        if (head.key in data && head.type == 'text') {
+        if (head.key in data && (head.type == 'text' && !head.type)) {
             row.push({
                 key: head.key,
                 value: data[head.key]
@@ -4838,16 +4838,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
 class UicWorkPanelComponent {
     cdr;
     host;
-    /**
-     * Compatibilidad con la version previa (un unico componente inicial).
-     * Si se envia, se crea como primera pestana.
-     */
     componentType;
     componentInputs = {};
-    /**
-     * Lista inicial de pestanas a renderizar.
-     */
     tabs = [];
+    width = '50%';
     tabsChange = new EventEmitter();
     tabClosed = new EventEmitter();
     tabSelected = new EventEmitter();
@@ -4990,11 +4984,11 @@ class UicWorkPanelComponent {
         return !(this.isMinimized || !this.activeTabId) && this.fullView;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    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", fullViewChange: "fullViewChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\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;width:50vw;height:80vh;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}@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"] }] });
+    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", minPosition: "minPosition", showAddButton: "showAddButton" }, outputs: { tabsChange: "tabsChange", tabClosed: "tabClosed", tabSelected: "tabSelected", tabAdded: "tabAdded", addTabRequest: "addTabRequest", fullViewChange: "fullViewChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\r\n  [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n  [style]=\"fullView ?'':'width: {{width}};'\"\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;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}@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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicWorkPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective], template: "<div\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;width:50vw;height:80vh;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}@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"] }]
+            args: [{ selector: 'ui-work-panel', imports: [UicButtonComponent, UicToolTipDirective], template: "<div\r\n  [class]=\"fullView ? 'open-panel' : 'mid-panel'\"\r\n  [style]=\"fullView ?'':'width: {{width}};'\"\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;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}@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"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { host: [{
                 type: ViewChild,
                 args: ['host', { read: ViewContainerRef, static: true }]
@@ -5004,6 +4998,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }], tabs: [{
                 type: Input
+            }], width: [{
+                type: Input
             }], tabsChange: [{
                 type: Output
             }], tabClosed: [{
@@ -5146,7 +5142,10 @@ class UicTagSelectorComponent extends base {
     selectedTags = [];
     filterText = '';
     newTagLabel = '';
-    filterArray = [...this.predefinedLabels];
+    filterArray = [];
+    ngOnInit() {
+        this.filter();
+    }
     filter() {
         this.filterArray = this.predefinedLabels.filter(f => f.name.toLocaleLowerCase().includes(this.filterText.toLocaleLowerCase()));
     }
@@ -5190,7 +5189,7 @@ class UicTagSelectorComponent extends base {
                 useExisting: forwardRef(() => UicTagSelectorComponent),
                 multi: true
             }
-        ], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n<div class=\"tags-reel\">\r\n    @for (item of selectedTags; track $index) {\r\n        <div [class]=\"'selected-tag lc-'\" ><i class=\"ri-map-pin-3-fill\"></i>{{item.name}} <i (click)=\"removeTag(item)\" class=\"ri-close-line close-icon\"></i> </div>\r\n    }\r\n    <ui-overlay-card>\r\n        <ui-button button type=\"bordered\" color=\"black\" icon=\"ri-add-line\" size=\"s\">{{buttonText}}</ui-button>\r\n        <ng-container content >\r\n\r\n            <ui-input internalIcon=\"ri-search-line\" internalIconColor=\"blue\">\r\n                <input [placeholder]=\"placeholder\" [(ngModel)]=\"filterText\" (ngModelChange)=\"filter()\" >\r\n            </ui-input>\r\n            <div class=\"tags-overflow\">\r\n                <div class=\"tags-title\">{{predefinedTitle}}</div>\r\n                @for(item of filterArray; track $index){\r\n                    <div (click)=\"select(item)\" class=\"tag-option\"> \r\n                        <i class=\"ri-circle-fill f-grey\"></i> \r\n                        <div style=\"flex: 1 1;\">{{item.name}}</div>   \r\n                        @if ( isSelected(item.name) ) {\r\n                            <i class=\"ri-check-line\"></i>  \r\n                        }\r\n                    </div>\r\n                }\r\n                <div class=\"new-tag\">        \r\n                    <div class=\"new-tag-label\">{{newTagTitle}}:</div>\r\n                    <div class=\"input-tag\">\r\n                        <input [(ngModel)]=\"newTagLabel\" type=\"text\">\r\n                        <ui-button (click)=\"createTag()\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-add-line\"></ui-button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ui-overlay-card>\r\n</div>   \r\n</ui-input-wrapper>", styles: [".tags-reel{display:flex;gap:10px;flex-wrap:wrap}.selected-tag{display:flex;gap:5px;align-items:center;font-size:12px;line-height:28px;padding:0 12px;border:solid 1px var(--grey-200);border-radius:20px}.tags-title{font-size:13px;padding:4px;font-weight:600;margin-bottom:5px;color:var(--grey-500)}.tag-option{font-size:14px;padding:5px 10px;border-radius:5px;transition:ease;display:flex;gap:10px;color:var(--grey-600);cursor:pointer}.tag-option:hover{background-color:var(--grey-200)}.tags-overflow{display:flex;flex-direction:column;gap:2px;padding:3px;max-height:250px;overflow:auto}.new-tag{padding:5px;border-top:solid 1px var(--grey-200)}.new-tag-label{font-size:13px;line-height:25px;color:var(--grey-500)}.input-tag{display:flex;gap:5px}.input-tag input{border:solid 1px var(--grey-300);border-radius:8px;padding:0 10px}.f-grey{color:var(--grey-200)}\n"], dependencies: [{ kind: "component", type: UicOverlayCardComponent, selector: "ui-overlay-card" }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { 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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+        ], usesInheritance: true, ngImport: i0, template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n<div class=\"tags-reel\">\r\n    @for (item of selectedTags; track $index) {\r\n        <div [class]=\"'selected-tag lc-'+item.color\" ><i [class]=\"item.icon??'ri-hashtag'\"></i>{{item.name}} <i (click)=\"removeTag(item)\" class=\"ri-close-large-line close-icon\"></i> </div>\r\n    }\r\n    <ui-overlay-card>\r\n        <ui-button button type=\"bordered\" color=\"black\" icon=\"ri-add-line\" size=\"s\">{{buttonText}}</ui-button>\r\n        <ng-container content >\r\n\r\n            <ui-input internalIcon=\"ri-search-line\" internalIconColor=\"blue\">\r\n                <input [placeholder]=\"placeholder\" [(ngModel)]=\"filterText\" (ngModelChange)=\"filter()\" >\r\n            </ui-input>\r\n            <div class=\"tags-overflow\">\r\n                <div class=\"tags-title\">{{predefinedTitle}}</div>\r\n                @for(item of filterArray; track $index){\r\n                    <div (click)=\"select(item)\" class=\"tag-option\"> \r\n                        <i class=\"ri-circle-fill f-grey\"></i> \r\n                        <div style=\"flex: 1 1;\">{{item.name}}</div>   \r\n                        @if ( isSelected(item.name) ) {\r\n                            <i class=\"ri-check-line\"></i>  \r\n                        }\r\n                    </div>\r\n                }\r\n                <div class=\"new-tag\">        \r\n                    <div class=\"new-tag-label\">{{newTagTitle}}:</div>\r\n                    <div class=\"input-tag\">\r\n                        <input [(ngModel)]=\"newTagLabel\" type=\"text\">\r\n                        <ui-button (click)=\"createTag()\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-add-line\"></ui-button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ui-overlay-card>\r\n</div>   \r\n</ui-input-wrapper>", styles: [".tags-reel{display:flex;gap:10px;flex-wrap:wrap}.selected-tag{display:flex;gap:5px;align-items:center;font-size:12px;line-height:28px;padding:0 12px;border:solid 1px var(--grey-200);border-radius:20px}.selected-tag i{font-size:14px}.close-icon{color:var(--red-600);cursor:pointer}.tags-title{font-size:13px;padding:4px;font-weight:600;margin-bottom:5px;color:var(--grey-500)}.tag-option{font-size:14px;padding:5px 10px;border-radius:5px;transition:ease;display:flex;gap:10px;color:var(--grey-600);cursor:pointer}.tag-option:hover{background-color:var(--grey-200)}.tags-overflow{display:flex;flex-direction:column;gap:2px;padding:3px;max-height:250px;overflow:auto}.new-tag{padding:5px;border-top:solid 1px var(--grey-200)}.new-tag-label{font-size:13px;line-height:25px;color:var(--grey-500)}.input-tag{display:flex;gap:5px}.input-tag input{border:solid 1px var(--grey-300);border-radius:8px;padding:0 10px}.f-grey{color:var(--grey-200)}.lc-blue{background-color:var(--blue-100);border-color:var(--blue-600);color:var(--blue-700)}\n"], dependencies: [{ kind: "component", type: UicOverlayCardComponent, selector: "ui-overlay-card" }, { kind: "component", type: UicInputComponent, selector: "ui-input", inputs: ["icon", "iconColor", "internalIcon", "internalIconColor", "size", "label", "error", "tip", "disabled", "loading"], outputs: ["clickButton"] }, { 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: InputWrapperComponent, selector: "ui-input-wrapper", inputs: ["icon", "iconColor", "label", "error", "tip", "disabled"] }, { kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTagSelectorComponent, decorators: [{
             type: Component,
@@ -5206,7 +5205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             useExisting: forwardRef(() => UicTagSelectorComponent),
                             multi: true
                         }
-                    ], template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n<div class=\"tags-reel\">\r\n    @for (item of selectedTags; track $index) {\r\n        <div [class]=\"'selected-tag lc-'\" ><i class=\"ri-map-pin-3-fill\"></i>{{item.name}} <i (click)=\"removeTag(item)\" class=\"ri-close-line close-icon\"></i> </div>\r\n    }\r\n    <ui-overlay-card>\r\n        <ui-button button type=\"bordered\" color=\"black\" icon=\"ri-add-line\" size=\"s\">{{buttonText}}</ui-button>\r\n        <ng-container content >\r\n\r\n            <ui-input internalIcon=\"ri-search-line\" internalIconColor=\"blue\">\r\n                <input [placeholder]=\"placeholder\" [(ngModel)]=\"filterText\" (ngModelChange)=\"filter()\" >\r\n            </ui-input>\r\n            <div class=\"tags-overflow\">\r\n                <div class=\"tags-title\">{{predefinedTitle}}</div>\r\n                @for(item of filterArray; track $index){\r\n                    <div (click)=\"select(item)\" class=\"tag-option\"> \r\n                        <i class=\"ri-circle-fill f-grey\"></i> \r\n                        <div style=\"flex: 1 1;\">{{item.name}}</div>   \r\n                        @if ( isSelected(item.name) ) {\r\n                            <i class=\"ri-check-line\"></i>  \r\n                        }\r\n                    </div>\r\n                }\r\n                <div class=\"new-tag\">        \r\n                    <div class=\"new-tag-label\">{{newTagTitle}}:</div>\r\n                    <div class=\"input-tag\">\r\n                        <input [(ngModel)]=\"newTagLabel\" type=\"text\">\r\n                        <ui-button (click)=\"createTag()\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-add-line\"></ui-button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ui-overlay-card>\r\n</div>   \r\n</ui-input-wrapper>", styles: [".tags-reel{display:flex;gap:10px;flex-wrap:wrap}.selected-tag{display:flex;gap:5px;align-items:center;font-size:12px;line-height:28px;padding:0 12px;border:solid 1px var(--grey-200);border-radius:20px}.tags-title{font-size:13px;padding:4px;font-weight:600;margin-bottom:5px;color:var(--grey-500)}.tag-option{font-size:14px;padding:5px 10px;border-radius:5px;transition:ease;display:flex;gap:10px;color:var(--grey-600);cursor:pointer}.tag-option:hover{background-color:var(--grey-200)}.tags-overflow{display:flex;flex-direction:column;gap:2px;padding:3px;max-height:250px;overflow:auto}.new-tag{padding:5px;border-top:solid 1px var(--grey-200)}.new-tag-label{font-size:13px;line-height:25px;color:var(--grey-500)}.input-tag{display:flex;gap:5px}.input-tag input{border:solid 1px var(--grey-300);border-radius:8px;padding:0 10px}.f-grey{color:var(--grey-200)}\n"] }]
+                    ], template: "\r\n<ui-input-wrapper\r\n    [icon]=\"icon\"\r\n    [iconColor]=\"iconColor\"\r\n    [label]=\"label\"\r\n    [error]=\"error\"\r\n    [tip]=\"tip\"\r\n    [disabled]=\"disabled\">\r\n<div class=\"tags-reel\">\r\n    @for (item of selectedTags; track $index) {\r\n        <div [class]=\"'selected-tag lc-'+item.color\" ><i [class]=\"item.icon??'ri-hashtag'\"></i>{{item.name}} <i (click)=\"removeTag(item)\" class=\"ri-close-large-line close-icon\"></i> </div>\r\n    }\r\n    <ui-overlay-card>\r\n        <ui-button button type=\"bordered\" color=\"black\" icon=\"ri-add-line\" size=\"s\">{{buttonText}}</ui-button>\r\n        <ng-container content >\r\n\r\n            <ui-input internalIcon=\"ri-search-line\" internalIconColor=\"blue\">\r\n                <input [placeholder]=\"placeholder\" [(ngModel)]=\"filterText\" (ngModelChange)=\"filter()\" >\r\n            </ui-input>\r\n            <div class=\"tags-overflow\">\r\n                <div class=\"tags-title\">{{predefinedTitle}}</div>\r\n                @for(item of filterArray; track $index){\r\n                    <div (click)=\"select(item)\" class=\"tag-option\"> \r\n                        <i class=\"ri-circle-fill f-grey\"></i> \r\n                        <div style=\"flex: 1 1;\">{{item.name}}</div>   \r\n                        @if ( isSelected(item.name) ) {\r\n                            <i class=\"ri-check-line\"></i>  \r\n                        }\r\n                    </div>\r\n                }\r\n                <div class=\"new-tag\">        \r\n                    <div class=\"new-tag-label\">{{newTagTitle}}:</div>\r\n                    <div class=\"input-tag\">\r\n                        <input [(ngModel)]=\"newTagLabel\" type=\"text\">\r\n                        <ui-button (click)=\"createTag()\" size=\"s\" [iconOnly]=\"true\" icon=\"ri-add-line\"></ui-button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </ui-overlay-card>\r\n</div>   \r\n</ui-input-wrapper>", styles: [".tags-reel{display:flex;gap:10px;flex-wrap:wrap}.selected-tag{display:flex;gap:5px;align-items:center;font-size:12px;line-height:28px;padding:0 12px;border:solid 1px var(--grey-200);border-radius:20px}.selected-tag i{font-size:14px}.close-icon{color:var(--red-600);cursor:pointer}.tags-title{font-size:13px;padding:4px;font-weight:600;margin-bottom:5px;color:var(--grey-500)}.tag-option{font-size:14px;padding:5px 10px;border-radius:5px;transition:ease;display:flex;gap:10px;color:var(--grey-600);cursor:pointer}.tag-option:hover{background-color:var(--grey-200)}.tags-overflow{display:flex;flex-direction:column;gap:2px;padding:3px;max-height:250px;overflow:auto}.new-tag{padding:5px;border-top:solid 1px var(--grey-200)}.new-tag-label{font-size:13px;line-height:25px;color:var(--grey-500)}.input-tag{display:flex;gap:5px}.input-tag input{border:solid 1px var(--grey-300);border-radius:8px;padding:0 10px}.f-grey{color:var(--grey-200)}.lc-blue{background-color:var(--blue-100);border-color:var(--blue-600);color:var(--blue-700)}\n"] }]
         }], propDecorators: { icon: [{
                 type: Input
             }], iconColor: [{