@apipass/inputs 0.2.5-alpha.2 → 0.2.5-alpha.3

package/fesm2015/apipass-inputs.js

@@ -1,4 +1,4 @@
-import { ɵɵgetCurrentView, ɵɵelementStart, ɵɵlistener, ɵɵrestoreView, ɵɵnextContext, ɵɵelementEnd, ɵɵadvance, ɵɵproperty, ɵɵtext, ɵɵtextInterpolate, ɵɵdefineComponent, ɵɵProvidersFeature, forwardRef, ɵɵInheritDefinitionFeature, ɵɵtemplate, ɵɵpipe, ɵɵpipeBind2, ɵɵpipeBind1, ɵɵgetInheritedFactory, ɵsetClassMetadata, Component, ViewEncapsulation, Input, ɵɵreference, ɵɵtextInterpolate2, ɵɵelement, EventEmitter, ɵɵpureFunction1, ChangeDetectionStrategy, Output, ɵɵpureFunction3, ɵɵpureFunction2, ɵɵsanitizeUrl, ɵɵprojectionDef, ɵɵprojection, ɵɵviewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ViewChild, ɵɵdirectiveInject, NgZone, ɵɵdefineDirective, Directive, ɵɵtextInterpolate1, ɵɵpipeBind3, ɵɵstaticViewQuery, ɵɵattribute, ɵɵpureFunction0, HostBinding, HostListener, ElementRef, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
+import { ɵɵgetCurrentView, ɵɵelementStart, ɵɵlistener, ɵɵrestoreView, ɵɵnextContext, ɵɵelementEnd, ɵɵadvance, ɵɵproperty, ɵɵtext, ɵɵtextInterpolate, ɵɵdefineComponent, ɵɵProvidersFeature, forwardRef, ɵɵInheritDefinitionFeature, ɵɵtemplate, ɵɵpipe, ɵɵpipeBind2, ɵɵpipeBind1, ɵɵgetInheritedFactory, ɵsetClassMetadata, Component, ViewEncapsulation, Input, ɵɵreference, ɵɵtextInterpolate2, ɵɵelement, EventEmitter, ɵɵpureFunction1, ChangeDetectionStrategy, Output, ɵɵpureFunction3, ɵɵpureFunction2, ɵɵsanitizeUrl, ɵɵprojectionDef, ɵɵprojection, ɵɵviewQuery, ɵɵqueryRefresh, ɵɵloadQuery, ViewChild, ɵɵdirectiveInject, NgZone, ɵɵdefineDirective, Directive, ɵɵpipeBind3, ElementRef, ɵɵattribute, ɵɵpureFunction0, HostBinding, HostListener, ɵɵtextInterpolate1, ɵɵdefineNgModule, ɵɵdefineInjector, ɵɵsetNgModuleScope, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR, NgControlStatus, NgModel, DefaultValueAccessor, RequiredValidator, MinLengthValidator, NumberValueAccessor, FormsModule } from '@angular/forms';
 import { NgIf, NgForOf, NgClass, NgStyle, CommonModule } from '@angular/common';
 import { MatFormField, MatSuffix, MatLabel, MatHint, MatPrefix, MatFormFieldModule } from '@angular/material/form-field';
@@ -15,6 +15,7 @@ import { Subject, fromEvent } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil, tap, skip } from 'rxjs/operators';
 import { NgSelectComponent, ɵj, ɵf, ɵh, NgSelectModule } from '@ng-select/ng-select';
 import { MatSelectFilterModule } from 'mat-select-filter';
+import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 import { DndDropzoneDirective, DndModule } from 'ngx-drag-drop';
 import { RouterModule } from '@angular/router';
 import 'brace';
@@ -1078,62 +1079,68 @@ class CustomSelectItem {
     }
 }
 
-const _c0$4 = ["input"];
-function CustomSelectComponent_span_3_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "span", 8);
-    ɵɵlistener("click", function CustomSelectComponent_span_3_Template_span_click_0_listener($event) { ɵɵrestoreView(_r4); const ctx_r3 = ɵɵnextContext(); return ctx_r3.removeClick($event); });
-    ɵɵelement(1, "i", 9);
+const _c0$4 = ["trigger"];
+const _c1$3 = ["input"];
+function CustomSelectComponent_span_6_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "span", 11);
+    ɵɵlistener("click", function CustomSelectComponent_span_6_Template_span_click_0_listener($event) { ɵɵrestoreView(_r6); const ctx_r5 = ɵɵnextContext(); return ctx_r5.removeClick($event); });
+    ɵɵelement(1, "i", 12);
     ɵɵelementEnd();
 } }
-function CustomSelectComponent_ul_7_li_4_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "li", 17);
-    ɵɵlistener("click", function CustomSelectComponent_ul_7_li_4_Template_li_click_0_listener() { ɵɵrestoreView(_r8); const i_r6 = ctx.$implicit; const ctx_r7 = ɵɵnextContext(2); return ctx_r7.selectItem(i_r6); })("mousedown", function CustomSelectComponent_ul_7_li_4_Template_li_mousedown_0_listener() { ɵɵrestoreView(_r8); const i_r6 = ctx.$implicit; const ctx_r9 = ɵɵnextContext(2); return ctx_r9.selectItem(i_r6); });
+function CustomSelectComponent_ng_template_10_li_4_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "li", 20);
+    ɵɵlistener("click", function CustomSelectComponent_ng_template_10_li_4_Template_li_click_0_listener() { ɵɵrestoreView(_r10); const i_r8 = ctx.$implicit; const ctx_r9 = ɵɵnextContext(2); return ctx_r9.selectItem(i_r8); })("mousedown", function CustomSelectComponent_ng_template_10_li_4_Template_li_mousedown_0_listener() { ɵɵrestoreView(_r10); const i_r8 = ctx.$implicit; const ctx_r11 = ɵɵnextContext(2); return ctx_r11.selectItem(i_r8); });
     ɵɵtext(1);
     ɵɵelementEnd();
 } if (rf & 2) {
-    const i_r6 = ctx.$implicit;
+    const i_r8 = ctx.$implicit;
+    const ctx_r7 = ɵɵnextContext(2);
     ɵɵadvance(1);
-    ɵɵtextInterpolate1(" ", i_r6.text, " ");
+    ɵɵtextInterpolate2(" ", i_r8.text, " - ", ctx_r7._triggerRect == null ? null : ctx_r7._triggerRect.width, " ");
 } }
-function CustomSelectComponent_ul_7_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = ɵɵgetCurrentView();
-    ɵɵelementStart(0, "ul", 10);
-    ɵɵelementStart(1, "li", 11);
-    ɵɵelementStart(2, "mat-form-field", 12);
-    ɵɵelementStart(3, "input", 13);
-    ɵɵlistener("ngModelChange", function CustomSelectComponent_ul_7_Template_input_ngModelChange_3_listener($event) { ɵɵrestoreView(_r11); const ctx_r10 = ɵɵnextContext(); return ctx_r10.searchText = $event; })("blur", function CustomSelectComponent_ul_7_Template_input_blur_3_listener($event) { ɵɵrestoreView(_r11); const ctx_r12 = ɵɵnextContext(); return ctx_r12.onBlur($event); });
+function CustomSelectComponent_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = ɵɵgetCurrentView();
+    ɵɵelementStart(0, "ul", 13);
+    ɵɵelementStart(1, "li", 14);
+    ɵɵelementStart(2, "mat-form-field", 15);
+    ɵɵelementStart(3, "input", 16);
+    ɵɵlistener("ngModelChange", function CustomSelectComponent_ng_template_10_Template_input_ngModelChange_3_listener($event) { ɵɵrestoreView(_r13); const ctx_r12 = ɵɵnextContext(); return ctx_r12.searchText = $event; })("blur", function CustomSelectComponent_ng_template_10_Template_input_blur_3_listener($event) { ɵɵrestoreView(_r13); const ctx_r14 = ɵɵnextContext(); return ctx_r14.onBlur($event); });
     ɵɵelementEnd();
     ɵɵelementEnd();
     ɵɵelementEnd();
-    ɵɵtemplate(4, CustomSelectComponent_ul_7_li_4_Template, 2, 1, "li", 14);
+    ɵɵtemplate(4, CustomSelectComponent_ng_template_10_li_4_Template, 2, 2, "li", 17);
     ɵɵpipe(5, "selectFilter");
-    ɵɵelementStart(6, "li", 15);
-    ɵɵlistener("mousedown", function CustomSelectComponent_ul_7_Template_li_mousedown_6_listener() { ɵɵrestoreView(_r11); const ctx_r13 = ɵɵnextContext(); return ctx_r13.addItem(); })("click", function CustomSelectComponent_ul_7_Template_li_click_6_listener() { ɵɵrestoreView(_r11); const ctx_r14 = ɵɵnextContext(); return ctx_r14.addItem(); });
-    ɵɵelement(7, "span", 16);
+    ɵɵelementStart(6, "li", 18);
+    ɵɵlistener("mousedown", function CustomSelectComponent_ng_template_10_Template_li_mousedown_6_listener() { ɵɵrestoreView(_r13); const ctx_r15 = ɵɵnextContext(); return ctx_r15.addItem(); })("click", function CustomSelectComponent_ng_template_10_Template_li_click_6_listener() { ɵɵrestoreView(_r13); const ctx_r16 = ɵɵnextContext(); return ctx_r16.addItem(); });
+    ɵɵelement(7, "span", 19);
     ɵɵelementStart(8, "span");
-    ɵɵtext(9, "Adicionar novo item");
+    ɵɵtext(9);
     ɵɵelementEnd();
     ɵɵelementEnd();
     ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = ɵɵnextContext();
+    const ctx_r4 = ɵɵnextContext();
     ɵɵadvance(3);
-    ɵɵproperty("placeholder", ctx_r2.findPlaceHolder)("ngModel", ctx_r2.searchText);
+    ɵɵproperty("placeholder", ctx_r4.findPlaceHolder)("ngModel", ctx_r4.searchText);
     ɵɵadvance(1);
-    ɵɵproperty("ngForOf", ɵɵpipeBind3(5, 3, ctx_r2.items, ctx_r2.searchText, "text"));
+    ɵɵproperty("ngForOf", ɵɵpipeBind3(5, 4, ctx_r4.items, ctx_r4.searchText, "text"));
+    ɵɵadvance(5);
+    ɵɵtextInterpolate(ctx_r4.addItemLabel);
 } }
-const _c1$3 = function (a0) { return { "select-open": a0 }; };
-const _c2$1 = function () { return { standalone: true }; };
+const _c2$1 = function (a0) { return { "select-open": a0 }; };
+const _c3$1 = function () { return { standalone: true }; };
+const _c4 = function (a0, a1) { return { "fa-caret-down": a0, "fa-caret-up": a1 }; };
 class CustomSelectComponent {
     constructor() {
         this.disabled = false;
         this.items = [];
         this.allowTyping = false;
         this.allowRemove = false;
-        this.placeHolder = 'Selecione';
-        this.findPlaceHolder = 'Busque um item';
+        this.addItemLabel = 'Add New Item';
+        this.placeHolder = 'Select';
+        this.findPlaceHolder = 'Find item';
         this.searchText = '';
         this.onSelect = new EventEmitter();
         this.onUnSelect = new EventEmitter();
@@ -1163,8 +1170,20 @@ class CustomSelectComponent {
         if (target && target.relatedTarget && target.relatedTarget.classList.contains('search-input-item')) {
             return;
         }
+        this.setTriggerRect();
         this.opened = false;
     }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.setTriggerRect();
+        }, 300);
+    }
+    setTriggerRect() {
+        setTimeout(() => {
+            var _a;
+            this._triggerRect = (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.nativeElement.getBoundingClientRect();
+        });
+    }
     selectItem(item) {
         this.opened = false;
         this.selectedItem = item;
@@ -1180,6 +1199,7 @@ class CustomSelectComponent {
         this.onAddItem.next();
     }
     keyPress() {
+        this.setTriggerRect();
         if (this.allowTyping) {
             this.opened = false;
             this.edited = true;
@@ -1192,6 +1212,7 @@ class CustomSelectComponent {
         }
     }
     clicked() {
+        this.setTriggerRect();
         this.opened = true;
         this.searchText = '';
     }
@@ -1221,11 +1242,18 @@ class CustomSelectComponent {
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
     }
-    arrowClick() {
+    arrowClick(event) {
         var _a;
-        this.opened = true;
-        this.searchText = '';
-        (_a = this.input) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+        event.stopPropagation();
+        this.setTriggerRect();
+        if (this.opened) {
+            this.opened = false;
+        }
+        else {
+            this.opened = true;
+            this.searchText = '';
+            (_a = this.input) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
+        }
     }
     removeClick(event) {
         event.stopPropagation();
@@ -1246,41 +1274,49 @@ class CustomSelectComponent {
 }
 CustomSelectComponent.ɵfac = function CustomSelectComponent_Factory(t) { return new (t || CustomSelectComponent)(); };
 CustomSelectComponent.ɵcmp = ɵɵdefineComponent({ type: CustomSelectComponent, selectors: [["custom-select"]], viewQuery: function CustomSelectComponent_Query(rf, ctx) { if (rf & 1) {
-        ɵɵstaticViewQuery(_c0$4, true);
+        ɵɵviewQuery(_c0$4, true);
+        ɵɵviewQuery(_c1$3, true, ElementRef);
     } if (rf & 2) {
         var _t;
+        ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.trigger = _t.first);
         ɵɵqueryRefresh(_t = ɵɵloadQuery()) && (ctx.input = _t.first);
     } }, hostVars: 1, hostBindings: function CustomSelectComponent_HostBindings(rf, ctx) { if (rf & 1) {
         ɵɵlistener("blur", function CustomSelectComponent_blur_HostBindingHandler($event) { return ctx.onBlur($event.target); });
     } if (rf & 2) {
         ɵɵattribute("tabindex", ctx.tabindex);
-    } }, inputs: { disabled: "disabled", items: "items", allowTyping: "allowTyping", allowRemove: "allowRemove", placeHolder: "placeHolder", findPlaceHolder: "findPlaceHolder", searchText: "searchText" }, outputs: { onSelect: "onSelect", onUnSelect: "onUnSelect", onAddItem: "onAddItem" }, features: [ɵɵProvidersFeature([{
+    } }, inputs: { disabled: "disabled", items: "items", allowTyping: "allowTyping", allowRemove: "allowRemove", addItemLabel: "addItemLabel", placeHolder: "placeHolder", findPlaceHolder: "findPlaceHolder", searchText: "searchText" }, outputs: { onSelect: "onSelect", onUnSelect: "onUnSelect", onAddItem: "onAddItem" }, features: [ɵɵProvidersFeature([{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CustomSelectComponent),
                 multi: true
-            }])], decls: 8, vars: 10, consts: [["appearance", "fill", "autocomplete", "off", 1, "custom-select-component", 3, "ngClass"], ["matInput", "", "dndDropzone", "", "autocomplete", "off", 3, "placeholder", "ngModel", "ngModelOptions", "disabled", "focus", "blur", "ngModelChange", "keyup", "click", "dndDrop"], ["input", ""], ["title", "Remover", "class", "remove-icon", 3, "click", 4, "ngIf"], [1, "open-icon", 3, "click"], [1, "fa", "fa-caret-down"], [1, "custom-select-component"], ["class", "ul-ac", 4, "ngIf"], ["title", "Remover", 1, "remove-icon", 3, "click"], [1, "fa", "fa-times"], [1, "ul-ac"], [1, "li-search", "search-input-item"], ["appearance", "fill", 1, "apipass-input-text", "search-input-item"], ["matInput", "", "aria-autocomplete", "none", "autocomplete", "off", 1, "search-input-item", 3, "placeholder", "ngModel", "ngModelChange", "blur"], ["class", "clickable", 3, "click", "mousedown", 4, "ngFor", "ngForOf"], [1, "li-add", 3, "mousedown", "click"], [1, "fa", "fa-plus-circle"], [1, "clickable", 3, "click", "mousedown"]], template: function CustomSelectComponent_Template(rf, ctx) { if (rf & 1) {
-        ɵɵelementStart(0, "mat-form-field", 0);
-        ɵɵelementStart(1, "input", 1, 2);
-        ɵɵlistener("focus", function CustomSelectComponent_Template_input_focus_1_listener() { return ctx.opened = true; })("blur", function CustomSelectComponent_Template_input_blur_1_listener($event) { return ctx.onBlur($event); })("ngModelChange", function CustomSelectComponent_Template_input_ngModelChange_1_listener($event) { return ctx.value = $event; })("keyup", function CustomSelectComponent_Template_input_keyup_1_listener() { return ctx.keyPress(); })("click", function CustomSelectComponent_Template_input_click_1_listener() { return ctx.clicked(); })("dndDrop", function CustomSelectComponent_Template_input_dndDrop_1_listener($event) { return ctx.onDrop($event); });
+            }])], decls: 11, vars: 16, consts: [[1, "custom-select-input"], ["trigger", ""], ["cdkOverlayOrigin", "", "appearance", "fill", "autocomplete", "off", 1, "custom-select-component", 3, "ngClass"], ["origin", "cdkOverlayOrigin"], ["matInput", "", "dndDropzone", "", "autocomplete", "off", 3, "placeholder", "ngModel", "ngModelOptions", "disabled", "focus", "blur", "ngModelChange", "keyup", "click", "dndDrop"], ["input", ""], ["title", "Remover", "class", "remove-icon", 3, "click", 4, "ngIf"], [1, "open-icon", 3, "click"], [1, "fas", 3, "ngClass"], [1, "custom-select-component"], ["cdkConnectedOverlay", "", 3, "cdkConnectedOverlayOrigin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayMinWidth"], ["title", "Remover", 1, "remove-icon", 3, "click"], [1, "fa", "fa-times"], [1, "ul-ac"], [1, "li-search", "search-input-item"], ["appearance", "fill", 1, "apipass-input-text", "search-input-item"], ["matInput", "", "aria-autocomplete", "none", "autocomplete", "off", 1, "search-input-item", 3, "placeholder", "ngModel", "ngModelChange", "blur"], ["class", "clickable", 3, "click", "mousedown", 4, "ngFor", "ngForOf"], [1, "li-add", 3, "mousedown", "click"], [1, "fa", "fa-plus-circle"], [1, "clickable", 3, "click", "mousedown"]], template: function CustomSelectComponent_Template(rf, ctx) { if (rf & 1) {
+        ɵɵelementStart(0, "div", 0, 1);
+        ɵɵelementStart(2, "mat-form-field", 2, 3);
+        ɵɵelementStart(4, "input", 4, 5);
+        ɵɵlistener("focus", function CustomSelectComponent_Template_input_focus_4_listener() { return ctx.opened = true; })("blur", function CustomSelectComponent_Template_input_blur_4_listener($event) { return ctx.onBlur($event); })("ngModelChange", function CustomSelectComponent_Template_input_ngModelChange_4_listener($event) { return ctx.value = $event; })("keyup", function CustomSelectComponent_Template_input_keyup_4_listener() { return ctx.keyPress(); })("click", function CustomSelectComponent_Template_input_click_4_listener() { return ctx.clicked(); })("dndDrop", function CustomSelectComponent_Template_input_dndDrop_4_listener($event) { return ctx.onDrop($event); });
         ɵɵelementEnd();
-        ɵɵtemplate(3, CustomSelectComponent_span_3_Template, 2, 0, "span", 3);
-        ɵɵelementStart(4, "span", 4);
-        ɵɵlistener("click", function CustomSelectComponent_Template_span_click_4_listener() { return ctx.arrowClick(); });
-        ɵɵelement(5, "i", 5);
+        ɵɵtemplate(6, CustomSelectComponent_span_6_Template, 2, 0, "span", 6);
+        ɵɵelementStart(7, "span", 7);
+        ɵɵlistener("click", function CustomSelectComponent_Template_span_click_7_listener($event) { return ctx.arrowClick($event); });
+        ɵɵelement(8, "i", 8);
         ɵɵelementEnd();
         ɵɵelementEnd();
-        ɵɵelementStart(6, "div", 6);
-        ɵɵtemplate(7, CustomSelectComponent_ul_7_Template, 10, 7, "ul", 7);
+        ɵɵelementEnd();
+        ɵɵelementStart(9, "div", 9);
+        ɵɵtemplate(10, CustomSelectComponent_ng_template_10_Template, 10, 8, "ng-template", 10);
         ɵɵelementEnd();
     } if (rf & 2) {
-        ɵɵproperty("ngClass", ɵɵpureFunction1(7, _c1$3, ctx.opened));
-        ɵɵadvance(1);
-        ɵɵproperty("placeholder", ctx.placeHolder)("ngModel", ctx.value)("ngModelOptions", ɵɵpureFunction0(9, _c2$1))("disabled", ctx.disabled);
+        const _r1 = ɵɵreference(3);
+        ɵɵadvance(2);
+        ɵɵproperty("ngClass", ɵɵpureFunction1(10, _c2$1, ctx.opened));
+        ɵɵadvance(2);
+        ɵɵproperty("placeholder", ctx.placeHolder)("ngModel", ctx.value)("ngModelOptions", ɵɵpureFunction0(12, _c3$1))("disabled", ctx.disabled);
         ɵɵadvance(2);
         ɵɵproperty("ngIf", ctx.allowRemove);
-        ɵɵadvance(4);
-        ɵɵproperty("ngIf", ctx.opened && (ctx.value && ctx.value.length !== 0 || ctx.items));
-    } }, directives: [MatFormField, NgClass, MatInput, DefaultValueAccessor, DndDropzoneDirective, NgControlStatus, NgModel, NgIf, NgForOf], pipes: [SelectFilterPipe], styles: ["[_ngcontent-%COMP%]:root{--color-body-light:#fff;--color-fonts-tertiary:#777;--color-inputs-background:#fff;--color-inputs-border:#ddd;--color-primary:#222d57;--color-primary-active:#29376a;--color-primary-hover:#18203d;--color-red:red;--color-secondary:#d3d921;--color-secondary-active:#dce13f;--color-secondary-hover:#b3b81c;--color-tertiary:#efefef;--color-tertiary-active:#f1f1f1;--color-tertiary-hover:#cbcbcb;--color_components_light:#fff;--color_disabled:#e0e0e0;--color_graph_error:#eb5757;--color_graph_error_hover:#c91717;--color_graph_primary:#1643ef;--color_graph_primary_hover:#0a2692;--color_icon_remove:var(--color-red);--color_icon_success:#070;--limit-plan-color:#ff6c00}@font-face{font-display:swap;font-family:PT Sans;font-style:italic;font-weight:400;src:local(\"PT Sans Italic\"),local(\"PTSans-Italic\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizYRExUiTo99u79D0e0ysmIEDQ.woff2) format(\"woff2\");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-display:swap;font-family:PT Sans;font-style:italic;font-weight:400;src:local(\"PT Sans Italic\"),local(\"PTSans-Italic\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizYRExUiTo99u79D0e0w8mIEDQ.woff2) format(\"woff2\");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-display:swap;font-family:PT Sans;font-style:italic;font-weight:400;src:local(\"PT Sans Italic\"),local(\"PTSans-Italic\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizYRExUiTo99u79D0e0ycmIEDQ.woff2) format(\"woff2\");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:PT Sans;font-style:italic;font-weight:400;src:local(\"PT Sans Italic\"),local(\"PTSans-Italic\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizYRExUiTo99u79D0e0x8mI.woff2) format(\"woff2\");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:PT Sans;font-style:italic;font-weight:700;src:local(\"PT Sans Bold Italic\"),local(\"PTSans-BoldItalic\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizdRExUiTo99u79D0e8fOydIhUdwzM.woff2) format(\"woff2\");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-display:swap;font-family:PT Sans;font-style:italic;font-weight:700;src:local(\"PT Sans Bold Italic\"),local(\"PTSans-BoldItalic\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizdRExUiTo99u79D0e8fOydKxUdwzM.woff2) format(\"woff2\");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-display:swap;font-family:PT Sans;font-style:italic;font-weight:700;src:local(\"PT Sans Bold Italic\"),local(\"PTSans-BoldItalic\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizdRExUiTo99u79D0e8fOydIRUdwzM.woff2) format(\"woff2\");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:PT Sans;font-style:italic;font-weight:700;src:local(\"PT Sans Bold Italic\"),local(\"PTSans-BoldItalic\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizdRExUiTo99u79D0e8fOydLxUd.woff2) format(\"woff2\");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:PT Sans;font-style:normal;font-weight:400;src:local(\"PT Sans\"),local(\"PTSans-Regular\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0-ExdGM.woff2) format(\"woff2\");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-display:swap;font-family:PT Sans;font-style:normal;font-weight:400;src:local(\"PT Sans\"),local(\"PTSans-Regular\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0aExdGM.woff2) format(\"woff2\");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-display:swap;font-family:PT Sans;font-style:normal;font-weight:400;src:local(\"PT Sans\"),local(\"PTSans-Regular\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0yExdGM.woff2) format(\"woff2\");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:PT Sans;font-style:normal;font-weight:400;src:local(\"PT Sans\"),local(\"PTSans-Regular\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizaRExUiTo99u79D0KExQ.woff2) format(\"woff2\");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-display:swap;font-family:PT Sans;font-style:normal;font-weight:700;src:local(\"PT Sans Bold\"),local(\"PTSans-Bold\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizfRExUiTo99u79B_mh0OOtLQ0Z.woff2) format(\"woff2\");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-display:swap;font-family:PT Sans;font-style:normal;font-weight:700;src:local(\"PT Sans Bold\"),local(\"PTSans-Bold\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizfRExUiTo99u79B_mh0OqtLQ0Z.woff2) format(\"woff2\");unicode-range:u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-display:swap;font-family:PT Sans;font-style:normal;font-weight:700;src:local(\"PT Sans Bold\"),local(\"PTSans-Bold\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizfRExUiTo99u79B_mh0OCtLQ0Z.woff2) format(\"woff2\");unicode-range:u+0100-024f,u+0259,u+1e??,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:PT Sans;font-style:normal;font-weight:700;src:local(\"PT Sans Bold\"),local(\"PTSans-Bold\"),url(https://fonts.gstatic.com/s/ptsans/v11/jizfRExUiTo99u79B_mh0O6tLQ.woff2) format(\"woff2\");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}.text-primary[_ngcontent-%COMP%]{color:var(--color-primary)!important}.text-secondary[_ngcontent-%COMP%]{color:var(--color-secondary)!important}.text-tertiary[_ngcontent-%COMP%]{color:var(--color-fonts-tertiary)!important}.text-weight-bold[_ngcontent-%COMP%]{font-weight:700!important}.text-weight-normal[_ngcontent-%COMP%]{font-weight:400!important}.mat-form-field-underline[_ngcontent-%COMP%], .mat-input-underline[_ngcontent-%COMP%]{display:none}.mat-form-field-appearance-fill[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]{align-items:center!important;background:var(--color-inputs-background)!important;border:1px solid var(--color-inputs-border)!important;border-radius:6px!important;display:flex!important}.mat-form-field-infix[_ngcontent-%COMP%]{align-items:center!important;border-top:none!important;padding:0!important}.mat-form-field-infix[_ngcontent-%COMP%], .mat-select-arrow-wrapper[_ngcontent-%COMP%]{display:flex!important}.mat-icon-button[_ngcontent-%COMP%]{width:auto!important}.no-border[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]{border:none!important}.no-border[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{padding:1px}.mat-form-field-label-wrapper[_ngcontent-%COMP%]{top:-10px}.mat-form-field-should-float[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%]{font-size:14px}.placeholder-primary[_ngcontent-%COMP%]   .mat-focused[_ngcontent-%COMP%]   .mat-form-field-placeholder[_ngcontent-%COMP%], .placeholder-primary[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%], .placeholder-primary[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%], .placeholder-primary[_ngcontent-%COMP%]   .mat-form-field-placeholder[_ngcontent-%COMP%], .placeholder-primary[_ngcontent-%COMP%]     .mat-focused .mat-form-field-placeholder, .placeholder-primary[_ngcontent-%COMP%]     .mat-form-field-placeholder{color:var(--color-primary)!important}.placeholder-primary[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]   [_ngcontent-%COMP%]::placeholder{color:var(--color-primary)!important}.placeholder-bold[_ngcontent-%COMP%]   .mat-focused[_ngcontent-%COMP%]   .mat-form-field-placeholder[_ngcontent-%COMP%], .placeholder-bold[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%], .placeholder-bold[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%]   label[_ngcontent-%COMP%], .placeholder-bold[_ngcontent-%COMP%]   .mat-form-field-placeholder[_ngcontent-%COMP%], .placeholder-bold[_ngcontent-%COMP%]     .mat-focused .mat-form-field-placeholder, .placeholder-bold[_ngcontent-%COMP%]     .mat-form-field-placeholder{font-weight:700!important}.placeholder-bold[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]   [_ngcontent-%COMP%]::placeholder{font-weight:700!important}.apipass-input-text[_ngcontent-%COMP%]{width:100%}.apipass-input-text[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]{padding:10px!important}.apipass-date-filter[_ngcontent-%COMP%]   .mat-form-field-wrapper[_ngcontent-%COMP%], .apipass-input-text[_ngcontent-%COMP%]   .mat-form-field-wrapper[_ngcontent-%COMP%], .apipass-search-input-text[_ngcontent-%COMP%]   .mat-form-field-wrapper[_ngcontent-%COMP%], .apipass-select[_ngcontent-%COMP%]   .mat-form-field-wrapper[_ngcontent-%COMP%], .custom-select-component[_ngcontent-%COMP%]   .mat-form-field-wrapper[_ngcontent-%COMP%]{padding:0!important}.apipass-date-filter[_ngcontent-%COMP%]   .mat-icon-button[_ngcontent-%COMP%], .apipass-input-text[_ngcontent-%COMP%]   .mat-icon-button[_ngcontent-%COMP%], .apipass-search-input-text[_ngcontent-%COMP%]   .mat-icon-button[_ngcontent-%COMP%], .apipass-select[_ngcontent-%COMP%]   .mat-icon-button[_ngcontent-%COMP%], .custom-select-component[_ngcontent-%COMP%]   .mat-icon-button[_ngcontent-%COMP%]{height:auto!important;width:auto!important}.apipass-date-filter.label-input[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%], .apipass-input-text.label-input[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%], .apipass-search-input-text.label-input[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%], .apipass-select.label-input[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%], .custom-select-component.label-input[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%]{padding-top:0;top:auto!important}.apipass-date-filter.label-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], .apipass-input-text.label-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], .apipass-search-input-text.label-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], .apipass-select.label-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], .custom-select-component.label-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{padding-bottom:5px!important;padding-top:10px!important}.apipass-date-filter.mat-form-field-should-float[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%], .apipass-input-text.mat-form-field-should-float[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%], .apipass-search-input-text.mat-form-field-should-float[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%], .apipass-select.mat-form-field-should-float[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%], .custom-select-component.mat-form-field-should-float[_ngcontent-%COMP%]   .mat-form-field-label-wrapper[_ngcontent-%COMP%]{margin-top:-10px!important;padding-top:0!important}.apipass-search-input-text[_ngcontent-%COMP%]{width:100%}.apipass-search-input-text.small-text[_ngcontent-%COMP%]{font-size:12px}.apipass-search-input-text[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]{border-left:none!important;border-radius:0!important;border-right:none!important;border-top:none!important;padding:2px 5px 2px 2px!important}.apipass-search-input-text[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%]{margin-top:-5px!important}.custom-select-component[_ngcontent-%COMP%]{width:100%}.custom-select-component[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]{padding:1px 10px!important}.apipass-select[_ngcontent-%COMP%]{width:100%}.apipass-select[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]{padding:10px 5px 10px 10px!important}.apipass-select.label-input[_ngcontent-%COMP%]   .mat-form-field-infix[_ngcontent-%COMP%]{padding-bottom:7px!important;padding-top:7px!important}.apipass-date-filter[_ngcontent-%COMP%]{width:100%}.apipass-date-filter[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]{padding:7px 10px!important}.apipass-date-filter[_ngcontent-%COMP%]   .mat-form-field-suffix[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]{color:#777;cursor:pointer}.apipass-date-filter[_ngcontent-%COMP%]   .mat-form-field-wrapper[_ngcontent-%COMP%]{padding-bottom:0!important}.custom-select-component[_ngcontent-%COMP%]{cursor:pointer}.custom-select-component[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]{background:#fff!important;height:37px}.custom-select-component[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]{background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;margin-top:-1px;padding:0;position:absolute;width:calc(100% - 30px);z-index:7!important}.custom-select-component[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]{cursor:pointer;font-size:12px;overflow:hidden;padding:10px;text-align:left;text-overflow:ellipsis;white-space:nowrap}.custom-select-component[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:hover{background:#bbbcbc}.custom-select-component[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   .li-add[_ngcontent-%COMP%]{border-top:1px solid #d3d3d3}.custom-select-component[_ngcontent-%COMP%]   .ul-ac[_ngcontent-%COMP%]   .li-add[_ngcontent-%COMP%]   .fa[_ngcontent-%COMP%]{color:#ff8f17;padding-right:5px}.custom-select-component[_ngcontent-%COMP%]   .selected[_ngcontent-%COMP%]{background-color:#898a8a!important}.custom-select-component[_ngcontent-%COMP%]   .selected[_ngcontent-%COMP%]   .fa[_ngcontent-%COMP%]{color:#fff!important}.custom-select-component[_ngcontent-%COMP%]   .remove-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{color:red;margin-right:10px}.custom-select-component[_ngcontent-%COMP%]   .open-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%]{color:rgba(0,0,0,.54)}.custom-select-component[_ngcontent-%COMP%]   .li-search[_ngcontent-%COMP%]{border-bottom:1px solid #ccc!important;cursor:default!important}.custom-select-component[_ngcontent-%COMP%]   .li-search[_ngcontent-%COMP%]:hover{background:#fff!important}.select-open[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]{border-radius:6px 6px 0 0!important}"] });
+        ɵɵadvance(2);
+        ɵɵproperty("ngClass", ɵɵpureFunction2(13, _c4, !ctx.opened, ctx.opened));
+        ɵɵadvance(2);
+        ɵɵproperty("cdkConnectedOverlayOrigin", _r1)("cdkConnectedOverlayOpen", ctx.opened && (ctx.value && ctx.value.length !== 0 || (ctx.items == null ? null : ctx.items.length) > 0))("cdkConnectedOverlayMinWidth", ctx._triggerRect == null ? null : ctx._triggerRect.width);
+    } }, directives: [MatFormField, CdkOverlayOrigin, NgClass, MatInput, DefaultValueAccessor, DndDropzoneDirective, NgControlStatus, NgModel, NgIf, CdkConnectedOverlay, NgForOf], pipes: [SelectFilterPipe], styles: ["{cursor:pointer}  input{background:#fff!important;height:37px}  .ul-ac{background:#fff;border:1px solid #ccc;box-sizing:border-box;list-style:none;margin-top:-1px;padding:0;position:relative;width:100%}  .ul-ac li{cursor:pointer;font-size:12px;overflow:hidden;padding:10px;text-align:left;text-overflow:ellipsis;white-space:nowrap}  .ul-ac li:hover{background:#bbbcbc}  .ul-ac li .mat-form-field-flex{height:37px!important}  .ul-ac li .mat-form-field-flex input{height:auto}  .ul-ac .li-add{border-top:1px solid #d3d3d3}  .ul-ac .li-add .fa{color:#ff8f17;padding-right:5px}  .selected{background-color:#898a8a!important}  .selected .fa{color:#fff!important}  .remove-icon i{color:red;margin-right:10px}  .open-icon{cursor:pointer}  .open-icon i{color:rgba(0,0,0,.54)}  .li-search{border-bottom:1px solid #ccc!important;cursor:default!important}  .li-search:hover{background:#fff!important}.select-open[_ngcontent-%COMP%]   .mat-form-field-flex[_ngcontent-%COMP%]{border-radius:6px 6px 0 0!important}"] });
 /*@__PURE__*/ (function () { ɵsetClassMetadata(CustomSelectComponent, [{
         type: Component,
         args: [{
@@ -1301,6 +1337,8 @@ CustomSelectComponent.ɵcmp = ɵɵdefineComponent({ type: CustomSelectComponent,
             type: Input
         }], allowRemove: [{
             type: Input
+        }], addItemLabel: [{
+            type: Input
         }], placeHolder: [{
             type: Input
         }], findPlaceHolder: [{
@@ -1313,9 +1351,12 @@ CustomSelectComponent.ɵcmp = ɵɵdefineComponent({ type: CustomSelectComponent,
             type: Output
         }], onAddItem: [{
             type: Output
+        }], trigger: [{
+            type: ViewChild,
+            args: ['trigger']
         }], input: [{
             type: ViewChild,
-            args: ['input', { static: true }]
+            args: ['input', { read: ElementRef }]
         }], tabindex: [{
             type: HostBinding,
             args: ['attr.tabindex']
@@ -2024,6 +2065,7 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
             MatTooltipModule,
             DndModule,
             ButtonsModule,
+            OverlayModule,
         ]] });
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && ɵɵsetNgModuleScope(InputsModule, { declarations: [MatSelectInfiniteScrollDirective,
         SelectBoxComponent,
@@ -2051,7 +2093,8 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
         IconsModule,
         MatTooltipModule,
         DndModule,
-        ButtonsModule], exports: [SelectBoxComponent,
+        ButtonsModule,
+        OverlayModule], exports: [SelectBoxComponent,
         SelectEnumComponent,
         InputTextComponent,
         InputNumberComponent,
@@ -2083,6 +2126,7 @@ InputsModule.ɵinj = ɵɵdefineInjector({ factory: function InputsModule_Factory
                     MatTooltipModule,
                     DndModule,
                     ButtonsModule,
+                    OverlayModule,
                 ],
                 declarations: [
                     MatSelectInfiniteScrollDirective,