ui-core-abv 0.4.5 → 0.4.7

package/fesm2022/ui-core-abv.mjs

@@ -120,8 +120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
-const base$b = createValueAccessor();
-class UicCheckboxComponent extends base$b {
+const base$c = createValueAccessor();
+class UicCheckboxComponent extends base$c {
     icon = ''; // Icono externo
     iconColor = 'black';
     label = '';
@@ -204,8 +204,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
-const base$a = createValueAccessor();
-class UicSelectComponent extends base$a {
+const base$b = createValueAccessor();
+class UicSelectComponent extends base$b {
     icon = ''; // Icono externo
     iconColor = 'black';
     internalIcon = ''; //Icono interno
@@ -388,8 +388,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
-const base$9 = createValueAccessor();
-class UicRadioComponent extends base$9 {
+const base$a = createValueAccessor();
+class UicRadioComponent extends base$a {
     icon = '';
     iconColor = 'black';
     label = '';
@@ -457,8 +457,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
-const base$8 = createValueAccessor();
-class UicSliderComponent extends base$8 {
+const base$9 = createValueAccessor();
+class UicSliderComponent extends base$9 {
     icon = ''; // Icono externo
     iconColor = 'black';
     label = '';
@@ -558,8 +558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['document:mouseup']
             }] } });
 
-const base$7 = createValueAccessor();
-class UicDatePickerComponent extends base$7 {
+const base$8 = createValueAccessor();
+class UicDatePickerComponent extends base$8 {
     icon = ''; // Icono externo
     iconColor = 'black';
     internalIcon = ''; //Icono interno
@@ -1024,8 +1024,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['calendarTemplate']
             }] } });
 
-const base$6 = createValueAccessor();
-class UicPoolOptionsComponent extends base$6 {
+const base$7 = createValueAccessor();
+class UicPoolOptionsComponent extends base$7 {
     icon = ''; // Icono externo
     iconColor = 'primary'; //color de ícono externo
     size = 'm'; // tamaño general del input
@@ -1148,8 +1148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
-const base$5 = createValueAccessor();
-class UicSearcherComponent extends base$5 {
+const base$6 = createValueAccessor();
+class UicSearcherComponent extends base$6 {
     icon = ''; // Icono externo
     iconColor = 'primary'; //color de ícono externo
     internalIcon = 'ri-search-2-line'; //Icono interno
@@ -1342,8 +1342,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['dropdownTemplate']
             }] } });
 
-const base$4 = createValueAccessor();
-class UicMultySelectComponent extends base$4 {
+const base$5 = createValueAccessor();
+class UicMultySelectComponent extends base$5 {
     icon = ''; // Icono externo
     iconColor = 'primary'; //color de ícono externo
     internalIcon = ''; //Icono interno
@@ -1487,8 +1487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['dropdownTemplate']
             }] } });
 
-const base$3 = createValueAccessor();
-class UicTimePickerComponent extends base$3 {
+const base$4 = createValueAccessor();
+class UicTimePickerComponent extends base$4 {
     // Iconos y estado
     icon = '';
     iconColor = 'primary';
@@ -1819,8 +1819,8 @@ const PHONE_COUNTRIES = [
     { name: 'Venezuela', iso2: 've', dialCode: '58' }
 ];
 
-const base$2 = createValueAccessor();
-class UicPhoneInputComponent extends base$2 {
+const base$3 = createValueAccessor();
+class UicPhoneInputComponent extends base$3 {
     icon = '';
     iconColor = 'black';
     internalIcon = '';
@@ -2114,8 +2114,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 args: ['dropdownTemplate']
             }] } });
 
-const base$1 = createValueAccessor();
-class UicFileInputComponent extends base$1 {
+const base$2 = createValueAccessor();
+class UicFileInputComponent extends base$2 {
     icon = ''; // Icono externo
     iconColor = 'black';
     internalIcon = ''; //Icono interno
@@ -3792,11 +3792,11 @@ class TinyAlertComponent {
         this.modalRef.closeFloating(value ? this.response : null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, deps: [{ token: MODAL_DATA }, { token: UiModalRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <h3 [class]=\"'icon-'+data.type\">  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TinyAlertComponent, isStandalone: true, selector: "ui-tiny-alert", ngImport: i0, template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <div class=\"h3-alert\" [class]=\"'icon-'+data.type\">  {{data.title}} </div>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"], dependencies: [{ kind: "component", type: UicButtonComponent, selector: "ui-button", inputs: ["text", "icon", "rightIcon", "iconOnly", "disabled", "loading", "size", "type", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TinyAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <h3 [class]=\"'icon-'+data.type\">  {{data.title}} </h3>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}h3{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
+            args: [{ selector: 'ui-tiny-alert', imports: [UicButtonComponent], template: "<div class=\"alert-wrapper\">\r\n    @if (data.iconPath) {\r\n        <img [src]=\"data.iconPath\" alt=\"\">    \r\n    }@else{\r\n        <i [class]=\"'alert-main-icon icon-'+data.type + ' ' + data.iconChar\" ></i>\r\n    }\r\n    <div class=\"h3-alert\" [class]=\"'icon-'+data.type\">  {{data.title}} </div>\r\n    <div class=\"alert-body\" [innerHTML]=\"data.body\">   </div>\r\n    <div class=\"tinyalert-buttons\">\r\n        @if (data.showCancelButton) {\r\n            <ui-button (click)=\"close(false)\" type=\"bordered\" [color]=\"data.cancelButtonColor??'black'\" size=\"l\"> {{data.cancelButtonText??'Cancelar'}} </ui-button>\r\n        }\r\n        <ui-button (click)=\"close(true)\" [color]=\"data.okButtonColor??'primary'\" size=\"l\"> {{data.okButtonText??'Continuar'}} </ui-button>\r\n    </div>\r\n    <button class=\"floating-close\" (click)=\"close(false)\" >\r\n        <i class=\"ri-close-line\"></i>\r\n    </button>\r\n</div>\r\n", styles: [".alert-wrapper{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 20px 5px;width:400px;max-width:100%;-webkit-user-select:none;user-select:none}.alert-wrapper img{height:88px;margin-bottom:20px}.tinyalert-buttons{padding-top:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.h3-alert{font-size:24px;font-weight:800;margin-bottom:10px}.alert-body{font-size:18px;font-weight:500;line-height:24px;text-align:center;color:var(--grey-700)}.floating-close{position:absolute;top:-10px;right:-20px;background-color:transparent;font-size:28px;border:none;cursor:pointer;transition:ease .3s}.floating-close:hover{color:var(--red-500)}@media (max-width: 479px){.floating-close{top:0;right:-5px}}.alert-main-icon{font-size:80px;margin-bottom:10px}.icon-error{color:var(--red-500)}.icon-delete{color:var(--red-800)}.icon-warning{color:var(--yellow-500)}.icon-info{color:var(--blue-800)}.icon-success{color:var(--green-500)}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MODAL_DATA]
@@ -4666,8 +4666,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ selector: 'ui-alert-container', imports: [UiAlertComponent], template: "<div class=\"alert-container\">\r\n    @for (alert of alerts; track alert.id){\r\n        <ui-alert\r\n            (closeAlert)=\"dismis($event)\"\r\n            [alert]=\"alert\">\r\n        </ui-alert>\r\n    }     \r\n</div>\r\n", styles: [".alert-container{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:9999}\n"] }]
         }], ctorParameters: () => [{ type: UicPushAlertService }] });
 
-const base = createValueAccessor();
-class UicSignaturePadComponent extends base {
+const base$1 = createValueAccessor();
+class UicSignaturePadComponent extends base$1 {
     width = 400;
     height = 200;
     strokeColor = '#111827';
@@ -5128,6 +5128,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }] } });
 
+const base = createValueAccessor();
+class UicTagSelectorComponent extends base {
+    icon = ''; // Icono externo
+    iconColor = 'black';
+    // TEXTO
+    label = '';
+    error = '';
+    tip = '';
+    disabled = false;
+    loading = false;
+    placeholder = 'Buscar...';
+    buttonText = 'Agregar tag';
+    predefinedTitle = 'Tags predefinidos';
+    newTagTitle = 'Nuevo tag';
+    predefinedLabels = [];
+    selectedTags = [];
+    filterText = '';
+    newTagLabel = '';
+    filterArray = [...this.predefinedLabels];
+    filter() {
+        this.filterArray = this.predefinedLabels.filter(f => f.name.toLocaleLowerCase().includes(this.filterText.toLocaleLowerCase()));
+    }
+    select(tag) {
+        const idx = this.selectedTags.findIndex(f => f.name == tag.name);
+        if (idx != -1) {
+            this.selectedTags.splice(idx, 1);
+        }
+        else {
+            this.selectedTags.push(tag);
+        }
+        this.notifyChange(this.selectedTags);
+    }
+    removeTag(tag) {
+        this.select(tag);
+    }
+    createTag() {
+        const newTag = {
+            id: 0,
+            color: 'blue',
+            name: this.newTagLabel
+        };
+        this.predefinedLabels.push(newTag);
+        this.filterText = '';
+        this.filter();
+        this.select(newTag);
+        this.newTagLabel = '';
+    }
+    isSelected(name) {
+        return this.selectedTags.some(t => t.name === name);
+    }
+    writeValue(value) {
+        const safeValue = Array.isArray(value) ? value : [];
+        super.writeValue(safeValue);
+        this.selectedTags = [...safeValue];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTagSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UicTagSelectorComponent, isStandalone: true, selector: "ui-tag-selector", inputs: { icon: "icon", iconColor: "iconColor", label: "label", error: "error", tip: "tip", disabled: "disabled", loading: "loading", placeholder: "placeholder", buttonText: "buttonText", predefinedTitle: "predefinedTitle", newTagTitle: "newTagTitle", predefinedLabels: "predefinedLabels" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UicTagSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-tag-selector', imports: [
+                        UicOverlayCardComponent,
+                        UicInputComponent,
+                        FormsModule,
+                        InputWrapperComponent,
+                        UicButtonComponent
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], propDecorators: { icon: [{
+                type: Input
+            }], iconColor: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], tip: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], buttonText: [{
+                type: Input
+            }], predefinedTitle: [{
+                type: Input
+            }], newTagTitle: [{
+                type: Input
+            }], predefinedLabels: [{
+                type: Input
+            }] } });
+
 const simpleFade = trigger('simpleFade', [
     transition(':enter', [style({ opacity: 0 }), animate('.3s ease', style({ opacity: 1 }))]),
     transition(':leave', [animate('.3s ease', style({ opacity: 0 }))])
@@ -5166,5 +5271,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, isMobile, pushTop, sideModal, simpleFade };
+export { DROPDOWN_OVERLAY_CONTROLS, FirstCapitalPipe, MODAL_CLOSE_EVENT, MODAL_CLOSE_REQUEST, MODAL_COMPONENT, MODAL_CONFIG, MODAL_DATA, UiDropdownCloseDirective, UiModalRef, UicAccordionComponent, UicActionButtonComponent, UicAlertContainerComponent, UicButtonComponent, UicCheckboxComponent, UicDatePickerComponent, UicDropdownContainerComponent, UicFileInputComponent, UicFormWrapperComponent, UicInputComponent, UicKpiCardComponent, UicModalService, UicMultySearcherComponent, UicMultySelectComponent, UicNameInitsPipe, UicOverlayCardComponent, UicPhoneInputComponent, UicPoolOptionsComponent, UicPortletCardComponent, UicPushAlertService, UicRadioComponent, UicSearcherComponent, UicSelectComponent, UicShortTableComponent, UicSignaturePadComponent, UicSkeletonLoaderComponent, UicSliderComponent, UicStepTabsComponent, UicStepsFormComponent, UicSwichComponent, UicTableComponent, UicTabsButtonComponent, UicTagSelectorComponent, UicTimePickerComponent, UicTinyAlertService, UicToolTipDirective, UicWorkPanelComponent, animatedRow, fadeAndRise, fadeBackdrop, helperFormMapFormdataToObject, helperTableMapDatoToColums, highlightRow, isMobile, pushTop, sideModal, simpleFade };
 //# sourceMappingURL=ui-core-abv.mjs.map