@wizishop/angular-components 14.4.62 → 14.4.63

package/fesm2015/wizishop-angular-components.mjs

@@ -356,6 +356,7 @@ class SelectOptionDirective {
         this.selected = false;
         this.onClickEventPreventDefault = true;
         this.selectedChange = new EventEmitter();
+        this.multiple = false;
     }
     onClick(event) {
         this.onSelectOption();
@@ -401,6 +402,10 @@ class SelectOptionDirective {
         this.disabledByParent = isDisabled;
         this.changeDetectorRef.markForCheck();
     }
+    setMultiple(multiple) {
+        this.multiple = multiple;
+        this.changeDetectorRef.markForCheck();
+    }
 }
 SelectOptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectOptionDirective, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
 SelectOptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.7", type: SelectOptionDirective, selector: "[wacOption]", inputs: { disabled: "disabled", value: "value", selected: "selected", onClickEventPreventDefault: "onClickEventPreventDefault" }, outputs: { selectedChange: "selectedChange" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.wac-option-selected": "this.isOptionSelected", "class.wac-option-disabled": "this.isOptionDisabled", "style.cursor": "this.cursor" } }, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: SelectOptionDirective }], exportAs: ["wacOption"], ngImport: i0 });
@@ -435,11 +440,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Output
             }] } });
 
+const compareArrays = (a, b) => a.length === b.length && a.every((element, index) => element === b[index]);
+
 class ValueChangeService {
     constructor(changeDetectorRef) {
         this.changeDetectorRef = changeDetectorRef;
         this.valueChange$ = new Subject();
-        this.indexSelectedOption = null;
+        this.multiple = false;
+        this.indexSelectedOption = null; // todo update to array
         this.resetListeners$ = new Subject();
         this.indexOfMatchedOption = (option, index, letter) => {
             const textOption = option.getContentRef().nativeElement.textContent.trim().toLowerCase();
@@ -471,6 +479,7 @@ class ValueChangeService {
         this.optionChildren = optionChildren;
         this._value = value;
         this.indexSelectedOption = null;
+        this.handleMultipleSelection();
         this.handleInitialSelectedOption();
         this.handleSelectedOptionsEvent();
     }
@@ -489,6 +498,7 @@ class ValueChangeService {
         (_a = this.optionChildren) === null || _a === void 0 ? void 0 : _a.forEach((option) => option.setDisabledState(isDisabled));
     }
     selectNextOption() {
+        // TODO : Handle multiple selection
         if (this.indexSelectedOption + 1 >= this.optionChildren.length) {
             return;
         }
@@ -501,6 +511,7 @@ class ValueChangeService {
         this.value = this.optionChildren.get(this.indexSelectedOption).value;
     }
     selectPreviousOption() {
+        // TODO : Handle multiple selection
         if (!this.indexSelectedOption) {
             this.indexSelectedOption = null;
             this.assignValue(null);
@@ -510,6 +521,7 @@ class ValueChangeService {
         this.value = this.optionChildren.get(this.indexSelectedOption).value;
     }
     searchOptionByFirstLetter(letter) {
+        // TODO : Handle multiple selectiong
         const matchedOptionsIndex = this.optionChildren
             .map((option, index) => this.indexOfMatchedOption(option, index, letter))
             .filter(this.isNotNull);
@@ -523,11 +535,20 @@ class ValueChangeService {
         this.indexSelectedOption = isNaN(validOptionIndex) ? matchedOptionsIndex[0] : validOptionIndex;
         this.value = this.optionChildren.get(this.indexSelectedOption).value;
     }
+    setMultiple(value) {
+        this.multiple = value;
+    }
+    handleMultipleSelection() {
+        if (this.multiple) {
+            setTimeout(() => {
+                this.optionChildren.forEach((option) => option.setMultiple(true));
+            }, 0);
+        }
+    }
     handleInitialSelectedOption() {
         setTimeout(() => {
-            const selectedOption = this.getSelectedOptionComponent();
-            if (selectedOption && this.value !== selectedOption.value) { // avoid to emit event when there is an initial value (e.g. from ngModel)
-                this.value = selectedOption.value;
+            if (this.mustUpdateValueWithInitialSelectedOptionValues()) { // initial option value selected win against initial value or ngModel value
+                this.value = this.multiple ? this.getSelectedOptionsValues() : this.getSelectedOptionsValues()[0];
             }
             if (this.disabled) {
                 this.optionChildren.forEach((option) => option.setDisabledState(true));
@@ -535,9 +556,18 @@ class ValueChangeService {
             this.handleValueChange();
         }, 0);
     }
+    mustUpdateValueWithInitialSelectedOptionValues() {
+        if (!this.getSelectedOptionComponents().length) {
+            return false;
+        }
+        if (this.multiple && Array.isArray(this.value)) {
+            return !compareArrays(this.value, this.getSelectedOptionsValues());
+        }
+        return this.value !== this.getSelectedOptionsValues()[0];
+    }
     handleSelectedOptionsEvent() {
         this.optionSelectedChangeListeners().subscribe((value) => {
-            this.value = value;
+            this.value = this.multiple ? this.getSelectedOptionsValues() : value;
         });
     }
     updateSelectPlaceholder() {
@@ -545,11 +575,20 @@ class ValueChangeService {
             this.selectedOptionContent = null;
             return;
         }
-        const selectedOption = this.getSelectedOptionComponent();
-        this.selectedOptionContent = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.getContentRef().nativeElement.innerHTML) || undefined;
+        this.selectedOptionContent = this.getSelectedOptionsContent();
+    }
+    getSelectedOptionsContent() {
+        var _a;
+        if (this.multiple) {
+            return this.getSelectedOptionComponents().reduce((acc, option) => (acc ? acc + ', ' : '') + option.getContentRef().nativeElement.textContent.trim(), ''); // todo improve for multiple
+        }
+        return (_a = this.getSelectedOptionComponents()[0]) === null || _a === void 0 ? void 0 : _a.getContentRef().nativeElement.innerHTML;
+    }
+    getSelectedOptionComponents() {
+        return this.optionChildren.filter((option) => option.selected);
     }
-    getSelectedOptionComponent() {
-        return this.optionChildren.find((option) => option.selected);
+    getSelectedOptionsValues() {
+        return this.getSelectedOptionComponents().map((option) => option.value);
     }
     optionSelectedChangeListeners() {
         const selectedChange$ = this.optionChildren.map((option) => {
@@ -559,12 +598,21 @@ class ValueChangeService {
     }
     changeSelectedOption() {
         this.optionChildren.forEach((optionComponent, index) => {
-            optionComponent.setSelected(optionComponent.value === this.value);
+            optionComponent.setSelected(this.isSelectedValue(optionComponent.value));
             if (optionComponent.selected) {
                 this.indexSelectedOption = index;
             }
         });
     }
+    /**
+      * May not work with objects values
+    */
+    isSelectedValue(value2) {
+        if (Array.isArray(this.value)) {
+            return this.value.includes(value2);
+        }
+        return this.value === value2;
+    }
     ngOnDestroy() {
         this.resetListeners$.next();
         this.resetListeners$.complete();
@@ -580,6 +628,7 @@ class SelectDirective {
     constructor(valueChangeService) {
         this.valueChangeService = valueChangeService;
         this.valueChange = new EventEmitter();
+        this._multiple = false;
         this._disabled = false;
         this.tabIndex = 0;
         this.isDestroyed$ = new Subject();
@@ -613,6 +662,13 @@ class SelectDirective {
     get value() {
         return this._value;
     }
+    get multiple() {
+        return this._multiple;
+    }
+    set multiple(value) {
+        this._multiple = value;
+        this.valueChangeService.setMultiple(value);
+    }
     set disabled(disabled) {
         this._disabled = disabled;
         this.valueChangeService.setDisabledState(disabled);
@@ -686,7 +742,7 @@ class SelectDirective {
     }
 }
 SelectDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectDirective, deps: [{ token: ValueChangeService }], target: i0.ɵɵFactoryTarget.Directive });
-SelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.7", type: SelectDirective, selector: "[wacSelect]", inputs: { value: "value", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "this.tabindex", "class.wac-select-disabled": "this.isSelectDisabled" } }, providers: [
+SelectDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.7", type: SelectDirective, selector: "[wacSelect]", inputs: { value: "value", multiple: "multiple", disabled: "disabled", tabIndex: "tabIndex" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "this.tabindex", "class.wac-select-disabled": "this.isSelectDisabled" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: SelectDirective, multi: true },
         ValueChangeService
     ], queries: [{ propertyName: "optionChildren", predicate: OPTION_SELECTION_HANDLER, descendants: true }], exportAs: ["wacSelect"], ngImport: i0 });
@@ -716,6 +772,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], multiple: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], tabIndex: [{
@@ -4711,16 +4769,17 @@ class OptionComponent extends SelectOptionDirective {
         super(contentRef, changeDetectorRef);
         this.contentRef = contentRef;
         this.changeDetectorRef = changeDetectorRef;
+        this.checkBoxId = `wac-option-${crypto.randomUUID()}`;
     }
     getContentRef() {
         return this.contentOption;
     }
 }
 OptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: OptionComponent, selector: "wac-option", providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], viewQueries: [{ propertyName: "contentOption", first: true, predicate: ["contentWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n    (click)=\"onSelectOption()\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: OptionComponent, selector: "wac-option", providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], viewQueries: [{ propertyName: "contentOption", first: true, predicate: ["contentWrapper"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <wac-checkbox *ngIf=\"multiple\" [id]=\"checkBoxId\" [value]=\"selected\"></wac-checkbox>\n      <ng-content></ng-content>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "wac-checkbox", inputs: ["label", "value", "type", "alone", "checked", "hasInput", "inputPlaceholder", "id", "name", "whiteSpace", "disabled"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: OptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'wac-option', encapsulation: ViewEncapsulation.None, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n    (click)=\"onSelectOption()\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <ng-content></ng-content>\n    </div>\n</div>" }]
+            args: [{ selector: 'wac-option', encapsulation: ViewEncapsulation.None, providers: [{ provide: OPTION_SELECTION_HANDLER, useExisting: OptionComponent }], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    [ngClass]=\"{ 'disabled': disabled }\"\n    class=\"wac-option\"\n  >\n    <div [ngClass]=\"{ 'selected': !disabled && selected, 'disabled': disabled }\" #contentWrapper>\n      <wac-checkbox *ngIf=\"multiple\" [id]=\"checkBoxId\" [value]=\"selected\"></wac-checkbox>\n      <ng-content></ng-content>\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { contentOption: [{
                 type: ViewChild,
                 args: ['contentWrapper']
@@ -4912,13 +4971,13 @@ SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version:
 SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: SelectComponent, selector: "wac-select", inputs: { required: "required", keepPanelOpen: "keepPanelOpen", openPanel: "openPanel", enableSearch: "enableSearch" }, outputs: { openPanelChange: "openPanelChange" }, host: { properties: { "attr.role": "this.role" } }, providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true },
         ValueChangeService
-    ], queries: [{ propertyName: "customSearchTrigger", first: true, predicate: SelectSearchTriggerComponent, descendants: true }, { propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], viewQueries: [{ propertyName: "selectHeader", first: true, predicate: ["selectHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"!!label\" class=\"wac-select__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n\n<div\n  class=\"wac-select\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div #selectHeader class=\"wac-select__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "component", type: i4$1.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "customSearchTrigger", first: true, predicate: SelectSearchTriggerComponent, descendants: true }, { propertyName: "label", first: true, predicate: LabelComponent, descendants: true }], viewQueries: [{ propertyName: "selectHeader", first: true, predicate: ["selectHeader"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<p *ngIf=\"!!label\" class=\"wac-select__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n<div\n  class=\"wac-select\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div #selectHeader class=\"wac-select__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AutoHideDirective, selector: "[wzAutoHide]", inputs: ["triggerElement", "forceOn"], outputs: ["clickOutside"] }, { kind: "directive", type: ZindexToggleDirective, selector: "[zIndexToggle]", inputs: ["zIndexToggle"], outputs: ["onEventChange"] }, { kind: "component", type: i4$1.PerfectScrollbarComponent, selector: "perfect-scrollbar", inputs: ["disabled", "usePSClass", "autoPropagation", "scrollIndicators", "config"], outputs: ["psScrollY", "psScrollX", "psScrollUp", "psScrollDown", "psScrollLeft", "psScrollRight", "psYReachEnd", "psYReachStart", "psXReachEnd", "psXReachStart"], exportAs: ["ngxPerfectScrollbar"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'wac-select', providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true },
                         ValueChangeService
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<p *ngIf=\"!!label\" class=\"wac-select__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n\n<div\n  class=\"wac-select\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div #selectHeader class=\"wac-select__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>" }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<p *ngIf=\"!!label\" class=\"wac-select__label\">\n  <ng-content select=\"wac-label, .wac-label\" ></ng-content>\n</p>\n\n<div\n  class=\"wac-select\"\n  wzAutoHide\n  (clickOutside)=\"onClosePanel()\"\n  [triggerElement]=\"'wac-select__header__selection'\"\n  [zIndexToggle]=\"openPanel\"\n  >\n\n    <div #selectHeader class=\"wac-select__header\" [ngClass]=\"{ 'select-disabled' : disabled }\" (click)=\"!disabled && onTogglePanel()\" tabindex=\"0\">\n\n      <ng-container [ngTemplateOutlet]=\"openPanel ? openPanelTrigger : closePanelTrigger\" >\n\n        <ng-template #closePanelTrigger>\n          <ng-container [ngTemplateOutlet]=\"defaultTrigger\"></ng-container>\n        </ng-template>\n\n        <ng-template #openPanelTrigger>\n          <ng-content *ngIf=\"!!customSearchTrigger; else defaultTrigger\" select=\"wac-select-search-trigger\" ></ng-content>\n        </ng-template>\n\n        <ng-template #defaultTrigger>\n          <ng-content *ngIf=\"!selectedOptionContent\" select=\"wac-placeholder,[role=placeholder]\"></ng-content>\n          <div\n            class=\"wac-select__header__selection wac-option__placeholder\"\n            *ngIf=\"!!selectedOptionContent\"\n            [innerHtml]=\"selectedOptionContent\">\n          </div>\n        </ng-template>\n\n      </ng-container>\n\n      <span class=\"wac-select__header__chevron\"><i class=\"fas fa-chevron-down\"></i></span>\n\n    </div>\n\n\n    <div class=\"wac-select__content\" *ngIf=\"!disabled\" [ngClass]=\"{ hidden: !openPanel, open: openPanel }\">\n\n      <perfect-scrollbar [config]=\"{ suppressScrollX: true }\">\n        <ng-content\n          select=\"wac-option-call-to-action, wac-option, option, .option, [selectOption]\">\n        </ng-content>\n      </perfect-scrollbar>\n\n      <div *ngIf=\"!optionChildren?.length\" class=\"wac-select__content__empty\">\n        <span>{{'wac.datatable.noresult' | translate}}</span>\n      </div>\n\n    </div>\n</div>" }]
         }], ctorParameters: function () { return [{ type: ValueChangeService }]; }, propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']