@wizco/fenixds-ngx 17.0.17 → 17.0.19

package/fesm2022/wizco-fenixds-ngx.mjs

@@ -875,6 +875,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+class UserAvatarComponent {
+    /** Nome do usuário */
+    userName = "";
+    /** Url da imagem opcional */
+    userAvatar = "";
+    /** Tamanho do componente  */
+    size = 'md';
+    /** Theme mudança de cores do componente  */
+    theme = 'secondary';
+    /** solid tipo com bg predominant  */
+    solid = false;
+    /**
+    * @ignore
+    */
+    userNameLetters = "";
+    constructor() { }
+    /** Mudança de parâmetros dinâmicos */
+    ngOnChanges() {
+        this._prepareNameLetters();
+    }
+    /** Retorne o nome abreviado */
+    _prepareNameLetters() {
+        let capitalizeLetters = "";
+        if (this.userName) {
+            capitalizeLetters = this.userName.charAt(0);
+            let _arrUserName = this.userName.split(' ');
+            if (_arrUserName.length > 1) {
+                capitalizeLetters += _arrUserName[_arrUserName.length - 1].charAt(0);
+            }
+        }
+        this.userNameLetters = capitalizeLetters.toUpperCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: UserAvatarComponent, isStandalone: true, selector: "wco-avatar", inputs: { userName: ["name", "userName"], userAvatar: ["image", "userAvatar"], size: "size", theme: "theme", solid: "solid" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  [class]=\"\r\n    'wco-user-avatar wco-user-avatar__size--' + size + ' wco-user-avatar__theme--' + theme + ' ' + (solid ? 'wco-user-solid' : '') \"\r\n  [title]=\"userName\" >\r\n  <span>{{userNameLetters}}</span>\r\n  <img *ngIf=\"userAvatar\" [src]=\"userAvatar\" [alt]=\"userName\" />\r\n</div>\r\n", styles: [".wco-user-avatar{--wco-user-avatar-bg: var(--wco-color-secondary-50);--wco-user-avatar-color: var(--wco-color-secondary-500);overflow:hidden;position:relative;border-radius:50%;background:var(--wco-user-avatar-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--wco-user-avatar-color, #576ff7);width:var(--wco-size-xy-user-photo, 48px);height:var(--wco-size-xy-user-photo, 48px)}.wco-user-avatar.wco-user-avatar__size--xs{--wco-size-xy-user-photo: 24px;--wco-size-user-photo: 11px}.wco-user-avatar.wco-user-avatar__size--sm{--wco-size-xy-user-photo: 32px;--wco-size-user-photo: 14px}.wco-user-avatar.wco-user-avatar__size--md{--wco-size-xy-user-photo: 48px;--wco-size-user-photo: 16px}.wco-user-avatar.wco-user-avatar__size--lg{--wco-size-xy-user-photo: 56px;--wco-size-user-photo: 18px}.wco-user-avatar.wco-user-avatar__size--xl{--wco-size-xy-user-photo: 90px;--wco-size-user-photo: 20px}.wco-user-avatar .wco-user-avatar__theme--primary{--wco-user-avatar-color: var(--wco-color-primary-500);--wco-user-avatar-bg: var(--wco-color-primary-50)}.wco-user-avatar .wco-user-avatar__theme--secondary{--wco-user-avatar-color: var(--wco-color-secondary-500);--wco-user-avatar-bg: var(--wco-color-secondary-50)}.wco-user-avatar .wco-user-avatar__theme--light{--wco-user-avatar-color: var(--wco-color-neutral-100);--wco-user-avatar-bg: var(--wco-color-neutral-900)}.wco-user-avatar .wco-user-avatar__theme--dark{--wco-user-avatar-color: var(--wco-color-neutral-700);--wco-user-avatar-bg: var(--wco-color-neutral-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--primary{--wco-user-avatar-bg: var(--wco-color-primary-500);--wco-user-avatar-color: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--secondary{--wco-user-avatar-bg: var(--wco-color-secondary-500);--wco-user-avatar-color: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--light{--wco-user-avatar-bg: var(--wco-color-neutral-100);--wco-user-avatar-color: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--dark{--wco-user-avatar-bg: var(--wco-color-neutral-700);--wco-user-avatar-color: var(--wco-color-neutral-50)}.wco-user-avatar span,.wco-user-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0;margin:0;display:block}.wco-user-avatar img{width:var(--wco-size-xy-user-photo);height:var(--wco-size-xy-user-photo);object-fit:cover}.wco-user-avatar span{font-family:var(--wco-font-family, \"Roboto\", sans-serif);width:var(--wco-size-xy-user-photo);text-align:center;font-weight:700;font-size:var(--wco-size-user-photo, 18px);color:var(--wco-user-avatar-color, #ffffff);letter-spacing:.4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wco-avatar', standalone: true, encapsulation: ViewEncapsulation.None, imports: [CommonModule], template: "<div\r\n  [class]=\"\r\n    'wco-user-avatar wco-user-avatar__size--' + size + ' wco-user-avatar__theme--' + theme + ' ' + (solid ? 'wco-user-solid' : '') \"\r\n  [title]=\"userName\" >\r\n  <span>{{userNameLetters}}</span>\r\n  <img *ngIf=\"userAvatar\" [src]=\"userAvatar\" [alt]=\"userName\" />\r\n</div>\r\n", styles: [".wco-user-avatar{--wco-user-avatar-bg: var(--wco-color-secondary-50);--wco-user-avatar-color: var(--wco-color-secondary-500);overflow:hidden;position:relative;border-radius:50%;background:var(--wco-user-avatar-bg);display:flex;align-items:center;justify-content:center;border:1px solid var(--wco-user-avatar-color, #576ff7);width:var(--wco-size-xy-user-photo, 48px);height:var(--wco-size-xy-user-photo, 48px)}.wco-user-avatar.wco-user-avatar__size--xs{--wco-size-xy-user-photo: 24px;--wco-size-user-photo: 11px}.wco-user-avatar.wco-user-avatar__size--sm{--wco-size-xy-user-photo: 32px;--wco-size-user-photo: 14px}.wco-user-avatar.wco-user-avatar__size--md{--wco-size-xy-user-photo: 48px;--wco-size-user-photo: 16px}.wco-user-avatar.wco-user-avatar__size--lg{--wco-size-xy-user-photo: 56px;--wco-size-user-photo: 18px}.wco-user-avatar.wco-user-avatar__size--xl{--wco-size-xy-user-photo: 90px;--wco-size-user-photo: 20px}.wco-user-avatar .wco-user-avatar__theme--primary{--wco-user-avatar-color: var(--wco-color-primary-500);--wco-user-avatar-bg: var(--wco-color-primary-50)}.wco-user-avatar .wco-user-avatar__theme--secondary{--wco-user-avatar-color: var(--wco-color-secondary-500);--wco-user-avatar-bg: var(--wco-color-secondary-50)}.wco-user-avatar .wco-user-avatar__theme--light{--wco-user-avatar-color: var(--wco-color-neutral-100);--wco-user-avatar-bg: var(--wco-color-neutral-900)}.wco-user-avatar .wco-user-avatar__theme--dark{--wco-user-avatar-color: var(--wco-color-neutral-700);--wco-user-avatar-bg: var(--wco-color-neutral-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--primary{--wco-user-avatar-bg: var(--wco-color-primary-500);--wco-user-avatar-color: var(--wco-color-primary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--secondary{--wco-user-avatar-bg: var(--wco-color-secondary-500);--wco-user-avatar-color: var(--wco-color-secondary-50)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--light{--wco-user-avatar-bg: var(--wco-color-neutral-100);--wco-user-avatar-color: var(--wco-color-neutral-900)}.wco-user-avatar.wco-user-solid.wco-user-avatar__theme--dark{--wco-user-avatar-bg: var(--wco-color-neutral-700);--wco-user-avatar-color: var(--wco-color-neutral-50)}.wco-user-avatar span,.wco-user-avatar img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0;margin:0;display:block}.wco-user-avatar img{width:var(--wco-size-xy-user-photo);height:var(--wco-size-xy-user-photo);object-fit:cover}.wco-user-avatar span{font-family:var(--wco-font-family, \"Roboto\", sans-serif);width:var(--wco-size-xy-user-photo);text-align:center;font-weight:700;font-size:var(--wco-size-user-photo, 18px);color:var(--wco-user-avatar-color, #ffffff);letter-spacing:.4px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { userName: [{
+                type: Input,
+                args: ['name']
+            }], userAvatar: [{
+                type: Input,
+                args: ['image']
+            }], size: [{
+                type: Input,
+                args: ['size']
+            }], theme: [{
+                type: Input,
+                args: ['theme']
+            }], solid: [{
+                type: Input,
+                args: ['solid']
+            }] } });
+
 class SmartSelectOptionComponent {
     el;
     sanitizer;
@@ -1028,30 +1083,38 @@ class SmartSelectComponent {
         }
         const oldValue = this.formValue;
         if (this.multiSelect) {
-            if (this.formValue?.includes(option.value)) {
-                this.formValue = this.formValue.filter((item) => item !== option.value);
-                this.autocompleteControl.setValue(this.formValue);
-                this.renderBoxOptions();
-                return;
+            if (typeof option.value === 'object') {
+                const list = this.compareMultiValuesArray(option);
+                const hasValueOption = list.some((item) => item.selected);
+                if (hasValueOption) {
+                    this.formValue = list
+                        .filter((item) => !item.selected)
+                        .map((item) => item.item);
+                }
+                else {
+                    this.formValue = [...(this.formValue || []), option.value];
+                }
             }
-            // is Array []
-            if (!!this.formValue === false) {
-                this.formValue = [];
-                this.autocompleteControl.setValue(this.formValue);
+            else {
+                const index = this.formValue?.indexOf(option.value);
+                if (index !== undefined && index > -1) {
+                    this.formValue?.splice(index, 1);
+                }
+                else {
+                    this.formValue = [...(this.formValue || []), option.value];
+                }
             }
-            this.formValue = [...this.formValue, option.value];
             this.autocompleteControl.setValue(this.formValue);
         }
         else {
             this.formValue = option.value;
             this.autocompleteControl.setValue(option.value);
-        }
-        if (!this.multiSelect) {
             this.showList = false;
         }
         if (oldValue !== this.formValue) {
             this.onChange.emit({ type: 'updateValue', value: this.formValue });
         }
+        this.renderBoxOptions();
     }
     // Show label span
     get selectedLabel() {
@@ -1061,23 +1124,70 @@ class SmartSelectComponent {
     }
     // show label multi select
     get selectedLabelMulti() {
-        const selectedOptions = this.options?.filter((option) => this.formValue?.includes(option.value));
+        const selectedOptions = this.options?.filter((option) => {
+            if (typeof option.value === 'object') {
+                return this.compareValueArray(option);
+            }
+            else {
+                return this.formValue?.includes(option.value);
+            }
+        });
         if (!selectedOptions?.length) {
             return [];
         }
         if (!this.showMaxSelectedLabel) {
             return selectedOptions;
         }
-        if (this.showMaxSelectedLabel && selectedOptions.length > this.showMaxSelectedLabel) {
+        if (this.showMaxSelectedLabel &&
+            selectedOptions.length > this.showMaxSelectedLabel) {
             return selectedOptions.slice(0, this.showMaxSelectedLabel);
         }
         return selectedOptions;
     }
+    valueToArray(options) {
+        const keys = Object.keys(options);
+        const value = [];
+        keys.forEach((key) => {
+            if (options[key] &&
+                options[key] !== '' &&
+                typeof options[key] !== 'object' &&
+                typeof options[key] !== 'function' &&
+                typeof options[key] !== 'boolean') {
+                value.push(options[key]);
+            }
+        });
+        return value;
+    }
+    compareValueArray(option, value = this.formValue) {
+        if (option && option.value) {
+            const valuesItems = this.valueToArray(option.value);
+            return value.some((item) => {
+                const itemArray = this.valueToArray(item);
+                return itemArray.every((itemValue) => valuesItems.includes(itemValue));
+            });
+        }
+        return [];
+    }
+    compareMultiValuesArray(option, value = this.formValue) {
+        if (option && option.value) {
+            const valuesItems = this.valueToArray(option.value);
+            const formValueArray = value.map((item, index) => {
+                const itemArray = this.valueToArray(item);
+                return {
+                    index,
+                    item,
+                    selected: itemArray.some((itemValue) => valuesItems.includes(itemValue)),
+                };
+            });
+            // Remove duplicate items
+            const uniqueFormValueArray = Array.from(new Set(formValueArray.map((item) => JSON.stringify(item)))).map((item) => JSON.parse(item));
+            return uniqueFormValueArray;
+        }
+        return [];
+    }
     get selectedLabelMultiCount() {
         const show = this.showMaxSelectedLabel || 0;
         const selectedOptions = this.options?.filter((option) => this.formValue?.includes(option.value));
-        console.log('selectedOptions', selectedOptions);
-        console.log('show', show);
         if (!selectedOptions?.length) {
             return 0;
         }
@@ -1123,7 +1233,18 @@ class SmartSelectComponent {
     }
     selectedValue(option) {
         if (this.multiSelect) {
-            return this.formValue?.includes(option.value);
+            if (typeof option.value === 'object') {
+                if (option && option.value) {
+                    const valuesItems = this.valueToArray(option.value);
+                    return this.formValue.some((item) => {
+                        const itemArray = this.valueToArray(item);
+                        return itemArray.every((itemValue) => valuesItems.includes(itemValue));
+                    });
+                }
+            }
+            else {
+                return this.formValue?.includes(option.value);
+            }
         }
         return option.value === this.formValue;
     }
@@ -1167,7 +1288,7 @@ class SmartSelectComponent {
                 useExisting: SmartSelectComponent,
                 multi: true,
             },
-        ], queries: [{ propertyName: "options", predicate: SmartSelectOptionComponent }], ngImport: i0, template: "<div\n  class=\"wco-smartSelect\"\n  [ngClass]=\"{\n    'wco-smartSelect--open': showList,\n    'wco-smartSelect--isMobile': isMobile,\n}\"\n  (resize)=\"onResize()\"\n  (mouseleave)=\"onFocusOut()\"\n>\n  <div class=\"form-field\">\n    <input\n      *ngIf=\"!multiSelect\"\n      class=\"form-field__input\"\n      [ngClass]=\"{\n        'form-field--error':\n          autocompleteControl.invalid && autocompleteControl.touched\n      }\"\n      [disabled]=\"autocompleteControl.disabled\"\n      id=\"{{ inputId ? inputId : '' }}\"\n      name=\"{{ inputName ? inputName : '' }}\"\n      (click)=\"onFocusIn(true)\"\n      (focusin)=\"onFocusIn()\"\n      (keyup.escape)=\"onFocusOut()\"\n      (keypress)=\"onKeyPress($event)\"\n      [placeholder]=\"placeholder\"\n      type=\"text\"\n      [value]=\"selectedLabel\"\n      aria-label=\"Selecione uma op\u00E7\u00E3o\"\n    />\n    <div\n      *ngIf=\"multiSelect\"\n      class=\"form-field__input readonly multiSelect\"\n      [ngClass]=\"{\n                'form-field--error': autocompleteControl.invalid && autocompleteControl.touched,\n                'form-field--disabled': autocompleteControl.disabled,\n            }\"\n      (click)=\"onFocusIn(true)\"\n      (focusin)=\"onFocusIn()\"\n      (keyup.escape)=\"onFocusOut()\"\n    >\n      <ng-container *ngIf=\"!selectedLabelMulti.length\">\n        <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"selectedLabelMulti.length\">\n        <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n          {{optionSelected.label}} \n          <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n            <span class=\"material-icons\">close</span>\n          </span>\n        </span>\n          <span class=\"wco-smart-select-item\"  *ngIf=\"selectedLabelMultiCount >= 1\">\n            +{{selectedLabelMultiCount}} \n          </span>\n      </ng-container>\n  </div>\n    <label>{{ label }}</label>\n    <span class=\"material-icons\">{{ IconMaterial }}</span>\n  </div>\n  <div\n    class=\"wco-smartSelect--box\"\n    [ngClass]=\"{\n      'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n    }\"\n  >\n    <div class=\"wco-smartSelect--isMobile-close\">\n      <button\n        (click)=\"closeList()\"\n        class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n      >\n        fechar\n      </button>\n    </div>\n    <ul>\n      <li\n        tabindex=\"0\"\n        class=\"wco-smart-selected-filter\"\n        *ngIf=\"showList && showSearch\"\n      >\n        <input\n          placeholder=\"buscar\"\n          (keyup)=\"onFilter($event)\"\n          aria-label=\"Search through site content\"\n          type=\"text\"\n        />\n      </li>\n      <li\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        [tabindex]=\"i + 1\"\n        [ngClass]=\"{\n            'wco-smart-selected': selectedValue(option),\n            'wc-smart-select-disabled-option': option.disabled,\n            'wc-smart-select-view-only-option': option.viewOnly,\n        }\"\n        (click)=\"onSelect(option)\"\n      >\n        <span class=\"wco-smart-select-label-prefix\">\n          <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n            <span class=\"material-icons-outlined\">\n              {{\n                selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n              }}\n            </span>\n          </ng-container>\n          <ng-container *ngIf=\"typePrefix === 'radio'\">\n            <span class=\"material-icons-outlined\">\n              {{\n                selectedValue(option)\n                  ? \"radio_button_checked\"\n                  : \"radio_button_unchecked\"\n              }}\n            </span>\n          </ng-container>\n          <ng-container\n            *ngIf=\"\n              !!option.iconPrefix &&\n              typePrefix !== 'radio' &&\n              typePrefix !== 'checkbox'\n            \"\n          >\n            <span class=\"material-icons-outlined\">\n              {{ option.iconPrefix }}\n            </span>\n          </ng-container>\n        </span>\n        <span\n          class=\"wco-smart-select-label\"\n          [innerHTML]=\"option.htmlLabel\"\n        ></span>\n      </li>\n      <li *ngIf=\"!filteredOptions.length\">\n        <p class=\"display-body\">{{ textEmpty }}</p>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:8px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:transparent}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none;border-bottom:1px solid #ccc;border-radius:var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0 0}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "options", predicate: SmartSelectOptionComponent }], ngImport: i0, template: "<div\n  class=\"wco-smartSelect\"\n  [ngClass]=\"{\n    'wco-smartSelect--open': showList,\n    'wco-smartSelect--isMobile': isMobile,\n}\"\n  (resize)=\"onResize()\"\n  (mouseleave)=\"onFocusOut()\"\n>\n  <div class=\"form-field\">\n    <input\n      *ngIf=\"!multiSelect\"\n      class=\"form-field__input\"\n      [ngClass]=\"{\n        'form-field--error':\n          autocompleteControl.invalid && autocompleteControl.touched\n      }\"\n      [disabled]=\"autocompleteControl.disabled\"\n      id=\"{{ inputId ? inputId : '' }}\"\n      name=\"{{ inputName ? inputName : '' }}\"\n      (click)=\"onFocusIn(true)\"\n      (focusin)=\"onFocusIn()\"\n      (keyup.escape)=\"onFocusOut()\"\n      (keypress)=\"onKeyPress($event)\"\n      [placeholder]=\"placeholder\"\n      type=\"text\"\n      [value]=\"selectedLabel\"\n      aria-label=\"Selecione uma op\u00E7\u00E3o\"\n    />\n    <div\n      *ngIf=\"multiSelect\"\n      class=\"form-field__input readonly multiSelect\"\n      [ngClass]=\"{\n                'form-field--error': autocompleteControl.invalid && autocompleteControl.touched,\n                'form-field--disabled': autocompleteControl.disabled,\n            }\"\n      (click)=\"onFocusIn(true)\"\n      (focusin)=\"onFocusIn()\"\n      (keyup.escape)=\"onFocusOut()\"\n    >\n    <ng-container *ngIf=\"!selectedLabelMulti.length\">\n        <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"selectedLabelMulti.length\">\n        <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n          {{optionSelected.label}} \n          <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n            <span class=\"material-icons\">close</span>\n          </span>\n        </span>\n          <span class=\"wco-smart-select-item\"  *ngIf=\"selectedLabelMultiCount >= 1\">\n            +{{selectedLabelMultiCount}} \n          </span>\n      </ng-container>\n  </div>\n    <label>{{ label }}</label>\n    <span class=\"material-icons\">{{ IconMaterial }}</span>\n  </div>\n  <div\n    class=\"wco-smartSelect--box\"\n    [ngClass]=\"{\n      'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n    }\"\n  >\n    <div class=\"wco-smartSelect--isMobile-close\">\n      <button\n        (click)=\"closeList()\"\n        class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n      >\n        fechar\n      </button>\n    </div>\n    <ul>\n      <li\n        tabindex=\"0\"\n        class=\"wco-smart-selected-filter\"\n        *ngIf=\"showList && showSearch\"\n      >\n        <input\n          placeholder=\"buscar\"\n          (keyup)=\"onFilter($event)\"\n          aria-label=\"Search through site content\"\n          type=\"text\"\n        />\n      </li>\n      <li\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        [tabindex]=\"i + 1\"\n        [ngClass]=\"{\n            'wco-smart-selected': selectedValue(option),\n            'wc-smart-select-disabled-option': option.disabled,\n            'wc-smart-select-view-only-option': option.viewOnly,\n        }\"\n        (click)=\"onSelect(option)\"\n      >\n        <span class=\"wco-smart-select-label-prefix\">\n          <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n            <span class=\"material-icons-outlined\">\n              {{\n                selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n              }}\n            </span>\n          </ng-container>\n          <ng-container *ngIf=\"typePrefix === 'radio'\">\n            <span class=\"material-icons-outlined\">\n              {{\n                selectedValue(option)\n                  ? \"radio_button_checked\"\n                  : \"radio_button_unchecked\"\n              }}\n            </span>\n          </ng-container>\n          <ng-container\n            *ngIf=\"\n              !!option.iconPrefix &&\n              typePrefix !== 'radio' &&\n              typePrefix !== 'checkbox'\n            \"\n          >\n            <span class=\"material-icons-outlined\">\n              {{ option.iconPrefix }}\n            </span>\n          </ng-container>\n        </span>\n        <span\n          class=\"wco-smart-select-label\"\n          [innerHTML]=\"option.htmlLabel\"\n        ></span>\n      </li>\n      <li *ngIf=\"!filteredOptions.length\">\n        <p class=\"display-body\">{{ textEmpty }}</p>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:8px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:transparent}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none;border-bottom:1px solid #ccc;border-radius:var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0 0}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartSelectComponent, decorators: [{
             type: Component,
@@ -1182,7 +1303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: SmartSelectComponent,
                             multi: true,
                         },
-                    ], template: "<div\n  class=\"wco-smartSelect\"\n  [ngClass]=\"{\n    'wco-smartSelect--open': showList,\n    'wco-smartSelect--isMobile': isMobile,\n}\"\n  (resize)=\"onResize()\"\n  (mouseleave)=\"onFocusOut()\"\n>\n  <div class=\"form-field\">\n    <input\n      *ngIf=\"!multiSelect\"\n      class=\"form-field__input\"\n      [ngClass]=\"{\n        'form-field--error':\n          autocompleteControl.invalid && autocompleteControl.touched\n      }\"\n      [disabled]=\"autocompleteControl.disabled\"\n      id=\"{{ inputId ? inputId : '' }}\"\n      name=\"{{ inputName ? inputName : '' }}\"\n      (click)=\"onFocusIn(true)\"\n      (focusin)=\"onFocusIn()\"\n      (keyup.escape)=\"onFocusOut()\"\n      (keypress)=\"onKeyPress($event)\"\n      [placeholder]=\"placeholder\"\n      type=\"text\"\n      [value]=\"selectedLabel\"\n      aria-label=\"Selecione uma op\u00E7\u00E3o\"\n    />\n    <div\n      *ngIf=\"multiSelect\"\n      class=\"form-field__input readonly multiSelect\"\n      [ngClass]=\"{\n                'form-field--error': autocompleteControl.invalid && autocompleteControl.touched,\n                'form-field--disabled': autocompleteControl.disabled,\n            }\"\n      (click)=\"onFocusIn(true)\"\n      (focusin)=\"onFocusIn()\"\n      (keyup.escape)=\"onFocusOut()\"\n    >\n      <ng-container *ngIf=\"!selectedLabelMulti.length\">\n        <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"selectedLabelMulti.length\">\n        <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n          {{optionSelected.label}} \n          <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n            <span class=\"material-icons\">close</span>\n          </span>\n        </span>\n          <span class=\"wco-smart-select-item\"  *ngIf=\"selectedLabelMultiCount >= 1\">\n            +{{selectedLabelMultiCount}} \n          </span>\n      </ng-container>\n  </div>\n    <label>{{ label }}</label>\n    <span class=\"material-icons\">{{ IconMaterial }}</span>\n  </div>\n  <div\n    class=\"wco-smartSelect--box\"\n    [ngClass]=\"{\n      'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n    }\"\n  >\n    <div class=\"wco-smartSelect--isMobile-close\">\n      <button\n        (click)=\"closeList()\"\n        class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n      >\n        fechar\n      </button>\n    </div>\n    <ul>\n      <li\n        tabindex=\"0\"\n        class=\"wco-smart-selected-filter\"\n        *ngIf=\"showList && showSearch\"\n      >\n        <input\n          placeholder=\"buscar\"\n          (keyup)=\"onFilter($event)\"\n          aria-label=\"Search through site content\"\n          type=\"text\"\n        />\n      </li>\n      <li\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        [tabindex]=\"i + 1\"\n        [ngClass]=\"{\n            'wco-smart-selected': selectedValue(option),\n            'wc-smart-select-disabled-option': option.disabled,\n            'wc-smart-select-view-only-option': option.viewOnly,\n        }\"\n        (click)=\"onSelect(option)\"\n      >\n        <span class=\"wco-smart-select-label-prefix\">\n          <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n            <span class=\"material-icons-outlined\">\n              {{\n                selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n              }}\n            </span>\n          </ng-container>\n          <ng-container *ngIf=\"typePrefix === 'radio'\">\n            <span class=\"material-icons-outlined\">\n              {{\n                selectedValue(option)\n                  ? \"radio_button_checked\"\n                  : \"radio_button_unchecked\"\n              }}\n            </span>\n          </ng-container>\n          <ng-container\n            *ngIf=\"\n              !!option.iconPrefix &&\n              typePrefix !== 'radio' &&\n              typePrefix !== 'checkbox'\n            \"\n          >\n            <span class=\"material-icons-outlined\">\n              {{ option.iconPrefix }}\n            </span>\n          </ng-container>\n        </span>\n        <span\n          class=\"wco-smart-select-label\"\n          [innerHTML]=\"option.htmlLabel\"\n        ></span>\n      </li>\n      <li *ngIf=\"!filteredOptions.length\">\n        <p class=\"display-body\">{{ textEmpty }}</p>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:8px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:transparent}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none;border-bottom:1px solid #ccc;border-radius:var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0 0}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"] }]
+                    ], template: "<div\n  class=\"wco-smartSelect\"\n  [ngClass]=\"{\n    'wco-smartSelect--open': showList,\n    'wco-smartSelect--isMobile': isMobile,\n}\"\n  (resize)=\"onResize()\"\n  (mouseleave)=\"onFocusOut()\"\n>\n  <div class=\"form-field\">\n    <input\n      *ngIf=\"!multiSelect\"\n      class=\"form-field__input\"\n      [ngClass]=\"{\n        'form-field--error':\n          autocompleteControl.invalid && autocompleteControl.touched\n      }\"\n      [disabled]=\"autocompleteControl.disabled\"\n      id=\"{{ inputId ? inputId : '' }}\"\n      name=\"{{ inputName ? inputName : '' }}\"\n      (click)=\"onFocusIn(true)\"\n      (focusin)=\"onFocusIn()\"\n      (keyup.escape)=\"onFocusOut()\"\n      (keypress)=\"onKeyPress($event)\"\n      [placeholder]=\"placeholder\"\n      type=\"text\"\n      [value]=\"selectedLabel\"\n      aria-label=\"Selecione uma op\u00E7\u00E3o\"\n    />\n    <div\n      *ngIf=\"multiSelect\"\n      class=\"form-field__input readonly multiSelect\"\n      [ngClass]=\"{\n                'form-field--error': autocompleteControl.invalid && autocompleteControl.touched,\n                'form-field--disabled': autocompleteControl.disabled,\n            }\"\n      (click)=\"onFocusIn(true)\"\n      (focusin)=\"onFocusIn()\"\n      (keyup.escape)=\"onFocusOut()\"\n    >\n    <ng-container *ngIf=\"!selectedLabelMulti.length\">\n        <span class=\"wco-smart-select-placeholder\">{{ placeholder || 'Selecione uma op\u00E7\u00E3o' }}</span>\n      </ng-container>\n      <ng-container *ngIf=\"selectedLabelMulti.length\">\n        <span *ngFor=\"let optionSelected of selectedLabelMulti\" class=\"wco-smart-select-item\">\n          {{optionSelected.label}} \n          <span class=\"wco-smart-select-remove\" (click)=\"removeItem(optionSelected)\">\n            <span class=\"material-icons\">close</span>\n          </span>\n        </span>\n          <span class=\"wco-smart-select-item\"  *ngIf=\"selectedLabelMultiCount >= 1\">\n            +{{selectedLabelMultiCount}} \n          </span>\n      </ng-container>\n  </div>\n    <label>{{ label }}</label>\n    <span class=\"material-icons\">{{ IconMaterial }}</span>\n  </div>\n  <div\n    class=\"wco-smartSelect--box\"\n    [ngClass]=\"{\n      'wco-smartSelect--box--open': showList && !autocompleteControl.disabled\n    }\"\n  >\n    <div class=\"wco-smartSelect--isMobile-close\">\n      <button\n        (click)=\"closeList()\"\n        class=\"btn btn-sm btn-primary btn-outline mb-nano\"\n      >\n        fechar\n      </button>\n    </div>\n    <ul>\n      <li\n        tabindex=\"0\"\n        class=\"wco-smart-selected-filter\"\n        *ngIf=\"showList && showSearch\"\n      >\n        <input\n          placeholder=\"buscar\"\n          (keyup)=\"onFilter($event)\"\n          aria-label=\"Search through site content\"\n          type=\"text\"\n        />\n      </li>\n      <li\n        *ngFor=\"let option of filteredOptions; let i = index\"\n        [tabindex]=\"i + 1\"\n        [ngClass]=\"{\n            'wco-smart-selected': selectedValue(option),\n            'wc-smart-select-disabled-option': option.disabled,\n            'wc-smart-select-view-only-option': option.viewOnly,\n        }\"\n        (click)=\"onSelect(option)\"\n      >\n        <span class=\"wco-smart-select-label-prefix\">\n          <ng-container *ngIf=\"typePrefix === 'checkbox'\">\n            <span class=\"material-icons-outlined\">\n              {{\n                selectedValue(option) ? \"check_box\" : \"check_box_outline_blank\"\n              }}\n            </span>\n          </ng-container>\n          <ng-container *ngIf=\"typePrefix === 'radio'\">\n            <span class=\"material-icons-outlined\">\n              {{\n                selectedValue(option)\n                  ? \"radio_button_checked\"\n                  : \"radio_button_unchecked\"\n              }}\n            </span>\n          </ng-container>\n          <ng-container\n            *ngIf=\"\n              !!option.iconPrefix &&\n              typePrefix !== 'radio' &&\n              typePrefix !== 'checkbox'\n            \"\n          >\n            <span class=\"material-icons-outlined\">\n              {{ option.iconPrefix }}\n            </span>\n          </ng-container>\n        </span>\n        <span\n          class=\"wco-smart-select-label\"\n          [innerHTML]=\"option.htmlLabel\"\n        ></span>\n      </li>\n      <li *ngIf=\"!filteredOptions.length\">\n        <p class=\"display-body\">{{ textEmpty }}</p>\n      </li>\n    </ul>\n  </div>\n</div>\n", styles: [".wco-smartSelect{width:100%;position:relative;display:inline-block;--wco-smart-select-box-height: 0px;--wco-smart-select-box-max-height: 300px;--wco-smart-select-box-radius: 8px;--wco-smart-select-box-shadow: var(--wco-shadow-level-1, 0 2px 4px rgba(0, 0, 0, .2));--wco-smart-select-box-default-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-default-color-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-box-default-padding: var(--wco-spacing-nano) var(--wco-spacing-xxxs);--wco-smart-select-box-hover-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-hover-color-bg: var(--wco-color-neutral-300, #bdbdbd);--wco-smart-select-box-selected-color-label: var(--wco-color-neutral-900, #000);--wco-smart-select-box-selected-color-bg: var(--wco-color-primary-100, #819ed3);--wco-smart-select-option-disabled-bg: var(--wco-color-neutral-100, #e0e0e0);--wco-smart-select-option-disabled-color: var(--wco-color-neutral-500, #9e9e9e);--wco-smart-select-box-option-height: 48px}.wco-smartSelect--open{--wco-smart-select-box-height: auto }.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--isMobile-close{display:flex;padding:var(--wco-spacing-nano);align-items:center;justify-content:flex-end}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box{position:fixed;bottom:0;left:0;width:100%}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open{padding:0}.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open ul,.wco-smartSelect.wco-smartSelect--isMobile .wco-smartSelect--box.wco-smartSelect--box--open input{border-radius:0}.wco-smartSelect .wco-smartSelect--isMobile-close{display:none}.wco-smartSelect input{cursor:pointer}.wco-smartSelect .form-field__input.multiSelect{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--wco-spacing-nano);padding-right:var(--wco-spacing-sm)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-placeholder{opacity:.5}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item{display:inline-flex;align-items:center;justify-content:center;padding:var(--wco-spacing-quark) var(--wco-spacing-xxs);border-radius:var(--wco-smart-select-box-radius);background-color:var(--wco-smart-select-box-default-color-bg);position:relative}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item:hover>span{width:calc(var(--wco-spacing-xxs) - 2px)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span{position:absolute;right:0;top:50%;transform:translateY(-50%);border-radius:0 var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;height:100%;width:0px;transition:width .1s linear,margin .1s linear;overflow:hidden;z-index:1}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span>span{font-size:var(--wco-font-size-xxxs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;color:var(--wco-smart-select-box-default-color-label)}.wco-smartSelect .form-field__input.multiSelect .wco-smart-select-item>span:hover{color:var(--wco-smart-select-box-hover-color-label);background-color:var(--wco-smart-select-box-hover-color-bg)}.wco-smartSelect .wco-smartSelect--box{position:absolute;left:-12px;width:calc(100% + 24px);z-index:999;display:grid;grid-template-columns:1fr;grid-template-rows:var(--wco-smart-select-box-height, 0px);max-height:var(--wco-smart-select-box-max-height);transition:all .4s ease-in-out,padding 0ms linear;padding:0;opacity:0;visibility:hidden;pointer-events:none}.wco-smartSelect .wco-smartSelect--box.wco-smartSelect--box--open{pointer-events:all;padding:var(--wco-spacing-nano) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs) var(--wco-spacing-xxxs);animation:introSmartSelectBox .4s ease-in-out .1s forwards}@keyframes introSmartSelectBox{0%{opacity:0;visibility:hidden;transform:translateY(-10px)}to{opacity:1;visibility:visible;transform:translateY(0)}}.wco-smartSelect .wco-smartSelect--box ul{border-top:none;border-radius:var(--wco-smart-select-box-radius);box-shadow:var(--wco-smart-select-box-shadow);background-color:var(--wco-smart-select-box-default-color-bg);overflow-y:auto;overflow-x:hidden;max-height:var(--wco-smart-select-box-max-height)}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:8px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:transparent}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-thumb{border-radius:99px;background-color:var(--wco-color-neutral-500, #9e9e9e)}.wco-smartSelect .wco-smartSelect--box ul li{color:var(--wco-smart-select-box-default-color-label);padding:var(--wco-smart-select-box-default-padding);display:grid;width:100%;align-items:center;justify-content:flex-start;grid-template-columns:auto 1fr auto;gap:var(--wco-spacing-xxxs);font-family:var(--wco-font-family);font-size:var(--wco-font-size-xs);font-weight:400;line-height:var(--wco-font-lineheight-500);letter-spacing:.4px;min-height:var(--wco-smart-select-box-option-height)}.wco-smartSelect .wco-smartSelect--box ul li .wco-smart-select-label-prefix{display:inline-flex;align-items:center}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter{padding:0;align-items:stretch;display:flex}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input{width:100%;height:auto;padding:var(--wco-smart-select-box-default-padding);border:none;border-bottom:1px solid #ccc;border-radius:var(--wco-smart-select-box-radius) var(--wco-smart-select-box-radius) 0 0}.wco-smartSelect .wco-smartSelect--box ul li.wco-smart-selected-filter input:focus{outline:none}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter){cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);cursor:pointer}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):focus,.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter):active{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label)}.wco-smartSelect .wco-smartSelect--box ul li:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-selected{background-color:var(--wco-smart-select-box-selected-color-bg);color:var(--wco-smart-select-box-selected-color-label);font-weight:600}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option{background-color:var(--wco-smart-select-option-disabled-bg);color:var(--wco-smart-select-option-disabled-color);cursor:not-allowed}.wco-smartSelect .wco-smartSelect--box ul li.wc-smart-select-disabled-option .wco-smart-select-remove{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
                 type: ContentChildren,
                 args: [SmartSelectOptionComponent]
@@ -1218,5 +1339,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MsgBoxFeedbackComponent, PaginationComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, TabsComponent, UploadComponent };
+export { MsgBoxFeedbackComponent, PaginationComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, TabsComponent, UploadComponent, UserAvatarComponent };
 //# sourceMappingURL=wizco-fenixds-ngx.mjs.map