@wizco/fenixds-ngx 17.2.1 → 17.3.2

package/fesm2022/wizco-fenixds-ngx.mjs

@@ -1002,6 +1002,8 @@ class SmartSelectComponent {
     showMaxSelectedLabel = 0;
     /* Tipos pré definidos de checkbox, radio ou null */
     typePrefix = null;
+    /* Confirmação de o campo é obrigatório */
+    required = false;
     isMobile = window.innerWidth <= 768;
     formValue;
     isFocused = false;
@@ -1283,7 +1285,7 @@ class SmartSelectComponent {
             .toLowerCase();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SmartSelectComponent, isStandalone: true, selector: "wco-smart-select", inputs: { inputId: "inputId", inputName: "inputName", IconMaterial: "IconMaterial", placeholder: "placeholder", label: "label", showSearch: "showSearch", textEmpty: "textEmpty", multiSelect: "multiSelect", showMaxSelectedLabel: "showMaxSelectedLabel", typePrefix: "typePrefix" }, outputs: { onChange: "onChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SmartSelectComponent, isStandalone: true, selector: "wco-smart-select", inputs: { inputId: "inputId", inputName: "inputName", IconMaterial: "IconMaterial", placeholder: "placeholder", label: "label", showSearch: "showSearch", textEmpty: "textEmpty", multiSelect: "multiSelect", showMaxSelectedLabel: "showMaxSelectedLabel", typePrefix: "typePrefix", required: "required" }, outputs: { onChange: "onChange" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SmartSelectComponent),
@@ -1294,7 +1296,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: [":host{width:100%}.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      [required]=\"required\"\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      [class.required]=\"required\"\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: [":host{width:100%}.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,
@@ -1309,7 +1311,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: [":host{width:100%}.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      [required]=\"required\"\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      [class.required]=\"required\"\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: [":host{width:100%}.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]
@@ -1335,6 +1337,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], typePrefix: [{
                 type: Input
+            }], required: [{
+                type: Input
             }] } });
 
 class TimelineComponent {
@@ -1560,6 +1564,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
+class WcoModalAlertComponent {
+    set show(value) {
+        this.changeValues(value, 'show');
+    }
+    set showIcon(value) {
+        this.changeValues(value, 'showIcon');
+    }
+    set title(value) {
+        this.changeValues(value, 'title');
+    }
+    set message(value) {
+        this.changeValues(value, 'message');
+    }
+    set materialIcon(value) {
+        this.changeValues(value, 'materialIcon');
+    }
+    set type(value) {
+        this.changeValues(value, 'type');
+    }
+    set hideClose(value) {
+        this.changeValues(value, 'hideClose');
+    }
+    set actions(value) {
+        this.changeValues(value, 'actions');
+    }
+    id = 'wco-modal-alert-' + Math.random().toString(36).substring(7);
+    config = {
+        show: false,
+        showIcon: true,
+        title: '',
+        message: '',
+        actions: [],
+        hideClose: false,
+    };
+    ngOnChanges(event) {
+        if (event['config']?.currentValue['show'] !== undefined) {
+            this.eventModal();
+        }
+    }
+    getButtonClass(action) {
+        const classeColor = action.color === 'primary'
+            ? 'btn-primary'
+            : action.color === 'secondary'
+                ? 'btn-secondary'
+                : 'btn-neutral';
+        const classeOutline = action.outline ? 'btn-outline' : '';
+        const extraClasse = action.extraClasse ? action.extraClasse : '';
+        return `wco-btn btn-full ${classeColor} ${classeOutline} ${extraClasse}`;
+    }
+    get iconMaterial() {
+        const { type = 'info' } = this.config;
+        switch (type) {
+            case 'error':
+                return { icon: 'error_outline', color: 'error' };
+            case 'warning':
+                return { icon: 'warning_amber', color: 'warning' };
+            case 'success':
+                return { icon: 'check_circle_outline', color: 'success' };
+            case 'loading':
+                return { icon: 'spinner', color: 'loading' };
+            default:
+                return { icon: 'info', color: 'info' };
+        }
+    }
+    changeValues(valueUpdate, name) {
+        this.config = {
+            ...this.config,
+            [name]: valueUpdate,
+        };
+        this.eventModal();
+    }
+    modalClose() {
+        const element = document.getElementById(this.id);
+        if (element) {
+            element.close();
+        }
+    }
+    eventModal() {
+        const show = this.config.show;
+        const element = document.getElementById(this.id);
+        if (show && element) {
+            if (this.config.hideClose) {
+                element.addEventListener('keydown', (event) => {
+                    const key = event.key;
+                    if (key === 'Escape') {
+                        event.preventDefault();
+                    }
+                });
+            }
+            element.showModal();
+            this.config.show = false;
+        }
+        else {
+            this.modalClose();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WcoModalAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WcoModalAlertComponent, isStandalone: true, selector: "wco-modal-alert", inputs: { show: "show", showIcon: "showIcon", title: "title", message: "message", materialIcon: "materialIcon", type: "type", hideClose: "hideClose", actions: "actions", id: ["setId", "id"], config: "config" }, usesOnChanges: true, ngImport: i0, template: "<dialog class=\"wco-modal\" [id]=\"id\" role=\"dialog\" aria-modal=\"true\">\n  <main>\n    <ng-container *ngIf=\"!config.hideClose\">\n      <button class=\"wco-modal--close\" (click)=\"modalClose()\">\n        <span class=\"material-icons\">close</span>\n      </button>\n    </ng-container>\n    <div [class]=\"'wco-modalConfirm ' + iconMaterial.color\">\n      <ng-container *ngIf=\"config.showIcon\">\n        <span class=\"wco-modalConfirm--icon\">\n          <ng-container *ngIf=\"config.type !== 'loading'\">\n          <span class=\"material-icons-round\">\n              <ng-container *ngIf=\"config.materialIcon; else iconTemplate\">\n                {{config.materialIcon}}\n              </ng-container>\n              <ng-template #iconTemplate>\n                {{ iconMaterial.icon}}\n              </ng-template>\n            </span>\n          </ng-container>\n          <ng-container *ngIf=\"config.type === 'loading'\">\n            <svg class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--wco-modal-color-type)\" stroke-width=\"6\"\n                stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n            </svg>\n          </ng-container>\n        </span>\n      </ng-container>\n      <ng-container *ngIf=\"config.title\">\n        <h3 class=\"wco-modalConfirm--title\">{{config.title}}</h3>\n      </ng-container>\n      <p class=\"wco-modalConfirm--message\" *ngIf=\"config.message\">{{config.message}}</p>\n      <div class=\"wco-modalConfirm--actions\" [class.modalConfirm--actions-size]=\"config.actions.length === 1\"\n        *ngIf=\"config.actions && config.actions.length > 0\">\n        <button type=\"button\" [class]=\"getButtonClass(action)\" (click)=\"action.action()\"\n          *ngFor=\"let action of config.actions; let index = index\">\n          <span class=\"material-icons-round\" *ngIf=\"action.materialIconLeft\">{{action.materialIconLeft}}</span>\n          {{action.text}}\n          <span class=\"material-icons-round\" *ngIf=\"action.materialIconRight\">{{action.materialIconRight}}</span>\n        </button>\n      </div>\n    </div>\n  </main>\n</dialog>", styles: [".wco-modalConfirm{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;--color-type: var(--wco-color-neutral-900)}.wco-modalConfirm.info{--wco-modal-color-type: var(--wco-color-info-600)}.wco-modalConfirm.success{--wco-modal-color-type: var(--wco-color-success-600)}.wco-modalConfirm.warning{--wco-modal-color-type: var(--wco-color-warning-600)}.wco-modalConfirm.error{--wco-modal-color-type: var(--wco-color-danger-600)}.wco-modalConfirm.loading{--wco-modal-color-type: var(--wco-color-primary-600)}.wco-modalConfirm--title{font-size:var(--wco-font-size-lg);line-height:150%;letter-spacing:.4px;font-weight:700;color:var(--wco-color-neutral-900)}.wco-modalConfirm--icon{margin-bottom:var(--wco-spacing-md)}.wco-modalConfirm--icon span{font-size:var(--wco-spacing-xxl);color:var(--wco-modal-color-type)}.wco-modalConfirm--icon .spinner{width:93px}@media screen and (max-width: 768px){.wco-modalConfirm--icon .spinner{width:55px}}.wco-modalConfirm--message{font-size:var(--wco-font-size-xs);line-height:150%;letter-spacing:.4px;font-weight:400;color:var(--wco-color-neutral-700);text-wrap:pretty;margin-top:var(--wco-spacing-nano)}.wco-modalConfirm--actions{display:flex;justify-content:center;align-items:center;gap:var(--wco-spacing-xs);margin-top:var(--wco-spacing-md);width:100%}.wco-modalConfirm--actions.modalConfirm--actions-size{max-width:275px}@media screen and (max-width: 768px){.wco-modalConfirm--actions{flex-direction:column}}.spinner{animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}.loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WcoModalAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'wco-modal-alert', standalone: true, imports: [CommonModule], template: "<dialog class=\"wco-modal\" [id]=\"id\" role=\"dialog\" aria-modal=\"true\">\n  <main>\n    <ng-container *ngIf=\"!config.hideClose\">\n      <button class=\"wco-modal--close\" (click)=\"modalClose()\">\n        <span class=\"material-icons\">close</span>\n      </button>\n    </ng-container>\n    <div [class]=\"'wco-modalConfirm ' + iconMaterial.color\">\n      <ng-container *ngIf=\"config.showIcon\">\n        <span class=\"wco-modalConfirm--icon\">\n          <ng-container *ngIf=\"config.type !== 'loading'\">\n          <span class=\"material-icons-round\">\n              <ng-container *ngIf=\"config.materialIcon; else iconTemplate\">\n                {{config.materialIcon}}\n              </ng-container>\n              <ng-template #iconTemplate>\n                {{ iconMaterial.icon}}\n              </ng-template>\n            </span>\n          </ng-container>\n          <ng-container *ngIf=\"config.type === 'loading'\">\n            <svg class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--wco-modal-color-type)\" stroke-width=\"6\"\n                stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n            </svg>\n          </ng-container>\n        </span>\n      </ng-container>\n      <ng-container *ngIf=\"config.title\">\n        <h3 class=\"wco-modalConfirm--title\">{{config.title}}</h3>\n      </ng-container>\n      <p class=\"wco-modalConfirm--message\" *ngIf=\"config.message\">{{config.message}}</p>\n      <div class=\"wco-modalConfirm--actions\" [class.modalConfirm--actions-size]=\"config.actions.length === 1\"\n        *ngIf=\"config.actions && config.actions.length > 0\">\n        <button type=\"button\" [class]=\"getButtonClass(action)\" (click)=\"action.action()\"\n          *ngFor=\"let action of config.actions; let index = index\">\n          <span class=\"material-icons-round\" *ngIf=\"action.materialIconLeft\">{{action.materialIconLeft}}</span>\n          {{action.text}}\n          <span class=\"material-icons-round\" *ngIf=\"action.materialIconRight\">{{action.materialIconRight}}</span>\n        </button>\n      </div>\n    </div>\n  </main>\n</dialog>", styles: [".wco-modalConfirm{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;--color-type: var(--wco-color-neutral-900)}.wco-modalConfirm.info{--wco-modal-color-type: var(--wco-color-info-600)}.wco-modalConfirm.success{--wco-modal-color-type: var(--wco-color-success-600)}.wco-modalConfirm.warning{--wco-modal-color-type: var(--wco-color-warning-600)}.wco-modalConfirm.error{--wco-modal-color-type: var(--wco-color-danger-600)}.wco-modalConfirm.loading{--wco-modal-color-type: var(--wco-color-primary-600)}.wco-modalConfirm--title{font-size:var(--wco-font-size-lg);line-height:150%;letter-spacing:.4px;font-weight:700;color:var(--wco-color-neutral-900)}.wco-modalConfirm--icon{margin-bottom:var(--wco-spacing-md)}.wco-modalConfirm--icon span{font-size:var(--wco-spacing-xxl);color:var(--wco-modal-color-type)}.wco-modalConfirm--icon .spinner{width:93px}@media screen and (max-width: 768px){.wco-modalConfirm--icon .spinner{width:55px}}.wco-modalConfirm--message{font-size:var(--wco-font-size-xs);line-height:150%;letter-spacing:.4px;font-weight:400;color:var(--wco-color-neutral-700);text-wrap:pretty;margin-top:var(--wco-spacing-nano)}.wco-modalConfirm--actions{display:flex;justify-content:center;align-items:center;gap:var(--wco-spacing-xs);margin-top:var(--wco-spacing-md);width:100%}.wco-modalConfirm--actions.modalConfirm--actions-size{max-width:275px}@media screen and (max-width: 768px){.wco-modalConfirm--actions{flex-direction:column}}.spinner{animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}.loading-icon{stroke-dasharray:187;stroke-dashoffset:12px;transform-origin:center;animation:dash 1.4s ease-in-out infinite}@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}\n"] }]
+        }], propDecorators: { show: [{
+                type: Input
+            }], showIcon: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], materialIcon: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], hideClose: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], id: [{
+                type: Input,
+                args: [{ alias: 'setId' }]
+            }], config: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of ngx-fenixds
  */
@@ -1568,5 +1697,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent };
+export { MsgBoxFeedbackComponent, PaginationComponent, PreviewFileComponent, SmartSelectComponent, SmartSelectOptionComponent, StepComponent, StepperComponent, TabsComponent, TimelineComponent, UploadComponent, UserAvatarComponent, WcoModalAlertComponent };
 //# sourceMappingURL=wizco-fenixds-ngx.mjs.map