@klippa/ngx-enhancy-forms 20.1.0 → 20.1.1

package/fesm2022/klippa-ngx-enhancy-forms.mjs

@@ -1421,6 +1421,7 @@ class SelectComponent extends ValueAccessorBase {
     ngAfterViewInit() {
         this.addPrefix();
         this.addTail();
+        this.createSizeObservers();
         this.updateTailPosition();
         this.elRef.nativeElement.querySelector('input').addEventListener('keydown', this.keyListener);
     }
@@ -1440,6 +1441,25 @@ class SelectComponent extends ValueAccessorBase {
             container.insertBefore(newNode, container.children[0]);
         }
     }
+    createSizeObservers() {
+        const ngInput = this.elRef.nativeElement.querySelector('.ng-select');
+        const arrowWrapper = this.elRef.nativeElement.querySelector('.ng-arrow-wrapper');
+        const prefixElement = this.elRef.nativeElement.querySelector('.prefix-tpl');
+        const elementsToObserve = [];
+        if (ngInput) {
+            elementsToObserve.push(ngInput);
+        }
+        if (arrowWrapper) {
+            elementsToObserve.push(arrowWrapper);
+        }
+        if (prefixElement) {
+            elementsToObserve.push(prefixElement);
+        }
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateTailPosition();
+        });
+        elementsToObserve.forEach(el => this.resizeObserver.observe(el));
+    }
     updateTailPosition() {
         if (this.tailRef) {
             let offset = 0;
@@ -1650,6 +1670,7 @@ class SelectComponent extends ValueAccessorBase {
     ngOnDestroy() {
         super.ngOnDestroy();
         this.elRef.nativeElement?.querySelector('input')?.removeEventListener('keydown', this.keyListener);
+        this.resizeObserver?.disconnect();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectComponent, deps: [{ token: FormElementComponent, host: true, optional: true }, { token: i2.ControlContainer, host: true, optional: true }, { token: SELECT_TRANSLATIONS, optional: true }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SelectComponent, isStandalone: false, selector: "klp-form-select", inputs: { placeholder: "placeholder", prefix: "prefix", orientation: "orientation", options: "options", multiple: "multiple", multipleDisplayedAsAmount: "multipleDisplayedAsAmount", clearable: "clearable", truncateOptions: "truncateOptions", withSeparatingLine: "withSeparatingLine", searchable: "searchable", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", dropdownPosition: "dropdownPosition", dropdownAlignment: "dropdownAlignment", customSearchFn: "customSearchFn", footerElement: "footerElement", size: "size", prefixTpl: "prefixTpl", suffixTpl: "suffixTpl" }, outputs: { onSearch: "onSearch", onEndReached: "onEndReached", onOpened: "onOpened", onClosed: "onClosed", onBlur: "onBlur", onClear: "onClear", onEnterKey: "onEnterKey" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }], queries: [{ propertyName: "customOptionTpl", first: true, predicate: KlpSelectOptionTemplateDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "ngSelect", first: true, predicate: ["ngSelect"], descendants: true }, { propertyName: "tailRef", first: true, predicate: ["tailRef"], descendants: true }, { propertyName: "tailMockRef", first: true, predicate: ["tailMockRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"componentContainer\"\n\t\t [class.verticalOrientation]=\"orientation === 'vertical'\"\n\t\t [ngClass]=\"{'input-sm': size === 'small', 'input-lg': size === 'large', 'grow': multiple,  noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight, disabled: disabled}\"\n>\n\t@if (prefixTpl) {\n\t\t<div class=\"prefix-tpl\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"prefixTpl\"></ng-container>\n\t\t</div>\n\t}\n\n\t<div class=\"inputContainer\" [class.grow]=\"multiple\">\n\t\t<ng-select\n\t\t\t#ngSelect\n\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\tbindLabel=\"name\"\n\t\t\tbindValue=\"id\"\n\t\t\t[items]=\"options\"\n\t\t\t[clearable]=\"clearable\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t[ngClass]=\"{showErrors: isInErrorState(), truncateOptions: truncateOptions, nonTruncatedOptions: !truncateOptions, withSeparatingLine: withSeparatingLine, hasCustomOptionTpl: !!customOptionTpl, 'grow': multiple, disabled: disabled}\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t\t(clear)=\"onClear.emit()\"\n\t\t\t(search)=\"searchQueryChanged($event.term)\"\n\t\t\t[searchable]=\"searchable\"\n\t\t\t[dropdownPosition]=\"dropdownPositionToUse\"\n\t\t\t[searchFn]=\"customSearchFn\"\n\t\t\t[selectOnTab]=\"true\"\n\t\t\t[virtualScroll]=\"true\"\n\t\t\t(scroll)=\"onScroll($event.end)\"\n\t\t\t(open)=\"onOpen()\"\n\t\t\t(close)=\"onClose()\"\n\t\t\t(focus)=\"onFocus()\"\n\t\t>\n\t\t\t<ng-template let-item=\"item\" ng-option-tmp>\n\t\t\t\t@if (customOptionTpl) {\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"customOptionTpl\" [ngTemplateOutletContext]=\"{item: item}\"></ng-container>\n\t\t\t\t}\n\t\t\t\t@if (!customOptionTpl) {\n\t\t\t\t\t<div [attr.data-cy]=\"item.id\">\n\t\t\t\t\t\t{{ item.name }}\n\t\t\t\t\t\t@if (item.description) {\n\t\t\t\t\t\t\t<div class=\"dropdown-item-description\">\n\t\t\t\t\t\t\t\t{{ item.description }}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</ng-template>\n\t\t\t@if (multiple && multipleDisplayedAsAmount && innerValue?.length > 1) {\n\t\t\t\t<ng-template ng-multi-label-tmp>\n\t\t\t\t\t<div class=\"ng-value\">\n\t\t\t\t\t\t<span class=\"ng-value-label\">{{ getTranslation('amountSelected', innerValue?.length) }}</span>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t\t@if (footerElement) {\n\t\t\t\t<ng-template ng-footer-tmp>\n\t\t\t\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t\t\t\t</ng-template>\n\t\t\t}\n\t\t</ng-select>\n\n\t\t<div class=\"tail\" #tailRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t\t<!-- I need this mock to reserve the space. I cant use the normal tail because that opens the dropdown from ng-select -->\n\t\t<!-- I have no idea how to avoid that -->\n\t\t<div class=\"tailMock\" #tailMockRef>\n\t\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t</div>\n\t</div>\n\n\t@if (suffixTpl) {\n\t\t<div class=\"suffix\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"suffixTpl\"></ng-container>\n\t\t</div>\n\t}\n</div>\n", styles: [":host{display:block;position:relative}.componentContainer::-webkit-input-placeholder{color:#98a2b3}.componentContainer:-moz-placeholder{color:#98a2b3}.componentContainer::-moz-placeholder{color:#98a2b3}.componentContainer:-ms-input-placeholder{color:#98a2b3}.componentContainer{display:block;background:#fff;border:1px solid #D0D5DD;border-radius:8px;box-shadow:none;height:40px;width:100%;padding:.5rem .75rem;font-size:16px;font-weight:400;line-height:24px;color:#101828}.componentContainer:focus,.componentContainer:focus-within{outline:1px solid #00AC42;box-shadow:none;border-color:#00ac42}.componentContainer.input-sm{padding:.375rem .5rem;font-size:14px;line-height:20px;height:32px}.componentContainer.input-sm.grow{min-height:32px}.componentContainer.input-lg{padding:.625rem .75rem;height:44px}.componentContainer.input-lg.grow{min-height:44px}.componentContainer.grow{height:auto;min-height:40px}.componentContainer:hover{border-color:#98a2b3}.componentContainer.error{border-color:#dc3545;background-color:#f6cdd1}.componentContainer.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}.componentContainer:placeholder-shown{text-overflow:ellipsis}.componentContainer.disabled{background-color:#f2f4f7;border-color:#f2f4f7;cursor:not-allowed}.componentContainer{display:flex;flex-direction:row}.componentContainer.noBorderLeft{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.componentContainer.noBorderRight{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.componentContainer .prefix-tpl,.componentContainer .suffix{display:flex;align-items:center;flex-shrink:0}ng-select.ng-select.showErrors::ng-deep .ng-select-container{border-color:#ff8000}.inputContainer{width:100%}.inputContainer.grow{height:auto;display:flex;flex-direction:row}:host ::ng-deep ng-select.ng-select{height:100%;width:100%}:host ::ng-deep ng-select.ng-select .ng-select-container{outline:none;border:none;flex:1 1 auto;min-width:0;width:auto;height:100%;font-size:inherit;line-height:inherit;color:inherit;background:none}:host ::ng-deep ng-select.ng-select .ng-select-container.disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container :disabled{cursor:not-allowed}:host ::ng-deep ng-select.ng-select .ng-select-container{display:flex}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M15 12.5L10 7.5L5 12.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container,:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container:hover{background-color:#f2f4f7;border-color:#f2f4f7}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-placeholder,:host ::ng-deep .ng-select:not(.ng-select-multiple) .ng-value{width:0px;flex-grow:1;overflow:hidden;text-overflow:ellipsis}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{width:0px;max-width:0;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-value{flex-direction:row-reverse}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{white-space:initial}:host ::ng-deep .ng-select .ng-select-container{display:flex;gap:.4rem;flex-direction:row;background-color:#fff;align-items:center;background-clip:padding-box;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;box-sizing:border-box;outline:none;overflow:visible;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px #0000000f}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{height:100%;align-items:center;padding-left:10px;overflow:hidden}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#98a2b3;max-width:100%}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container :has(input:focus) .ng-placeholder{top:initial!important;position:absolute!important}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container:not(:has(input:focus)):not(.ng-has-value) .ng-input{position:absolute}:host ::ng-deep .ng-select.ng-select-multiple>.ng-select-container .ng-value-container{gap:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:1em;background-color:#fff;border:1px solid #D0D5DD;border-radius:6px;display:flex;align-items:center;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:0 5px;overflow:hidden;text-overflow:ellipsis;line-height:22px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{position:relative;color:transparent;width:20px;height:20px;padding:0 10px 0 0}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:after{position:absolute;left:0;content:\"\";display:inline-block;width:20px;height:20px;background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%2398A2B3\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left:hover:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"20\" height=\"20\" rx=\"3\" fill=\"%23F2F4F7\"/><path d=\"M13.5 6.5L6.5 13.5M6.5 6.5L13.5 13.5\" stroke=\"%23667085\" stroke-width=\"1.66667\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-left:3px;position:static}:host ::ng-deep .ng-select .ng-clear-wrapper{position:relative;width:24px;height:24px}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear{display:block;color:transparent}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:after{position:absolute;left:0;content:\"\";display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat}:host ::ng-deep .ng-select .ng-clear-wrapper:hover .ng-clear:after{background-image:url('data:image/svg+xml;utf8,<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"24\" height=\"24\" rx=\"4\" fill=\"%23F2F4F7\"/><path d=\"M17 7L7 17M7 7L17 17\" stroke=\"%23475467\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#dc3545}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{position:relative;width:20px}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{position:relative;display:block}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow:after{position:absolute;content:\"\";display:inline-block;width:20px;height:20px;margin-left:10px;background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%23475467\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>');background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%)}:host ::ng-deep .ng-select.ng-select-disabled .ng-arrow-wrapper .ng-arrow:after{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"%2398a2b3\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>')}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #D0D5DD;box-shadow:0 12px 16px -4px #10182814,0 4px 6px -2px #10182808;padding-top:6px;padding-bottom:6px}:host ::ng-deep .ng-dropdown-panel .scrollable-content.calculatingWidths{width:initial}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-radius:8px;border-top-color:#e6e6e6;margin-top:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-radius:8px;border-bottom-color:#e6e6e6;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:#0000008a;cursor:pointer}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:#000000de;padding:1px 6px;display:flex;border-radius:6px;box-sizing:content-box}:host ::ng-deep .ng-select:not(.hasCustomOptionTpl) .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{white-space:nowrap;min-width:100%;cursor:pointer}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:block}:host .ng-select.truncateOptions ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option div{overflow:hidden;text-overflow:ellipsis}:host .ng-select.nonTruncatedOptions ::ng-deep .ng-dropdown-panel{visibility:hidden}:host .ng-select.nonTruncatedOptions.verticalOrientation{overflow:initial}:host .ng-select.withSeparatingLine ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{border-bottom:1px solid #e3e3e3}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{font-weight:500}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked>div{color:#006912;background-color:#c3ebca}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected>div{color:#006912;background-color:#e6f7e9}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked>div{background-color:#f2f4f7;color:#101828}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#98a2b3;padding:8px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-right:5px;font-size:80%;font-weight:400}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option>div{color:#101828;padding:8px 10px;border-radius:6px;flex-grow:1}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}:host ::ng-deep .ng-select.grow{height:auto}:host ::ng-deep .ng-select.grow .ng-select-container{height:auto;align-items:center;flex-wrap:wrap}:host ::ng-deep .componentContainer .ng-input{height:100%}:host ::ng-deep .componentContainer .ng-input>input{font:inherit;color:inherit;line-height:inherit}.verticalOrientation{transform:translateY(100%) rotate(-90deg);transform-origin:top left}.verticalOrientation ::ng-deep ng-dropdown-panel.ng-select-bottom{transform:rotate(90deg) translate(100%);transform-origin:top right;border-top-color:#3ed778;border-bottom-right-radius:2px;border-bottom-left-radius:0;border-top-right-radius:2px}.tail{position:absolute;top:10px;z-index:2;background:transparent}.tailMock{opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i4.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "outsideClickEvent", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "deselectOnClick", "clearSearchOnAdd", "compareWith", "keyDownFn", "bindLabel", "bindValue", "appearance", "isOpen", "items"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "itemsChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["ngSelect"] }, { kind: "directive", type: i4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i4.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i4.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }] }); }