@wizco/fenixds-ngx 17.6.0 → 17.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/smart-select/smart-select.component.mjs +41 -17
- package/fesm2022/wizco-fenixds-ngx.mjs +40 -16
- package/fesm2022/wizco-fenixds-ngx.mjs.map +1 -1
- package/lib/smart-select/smart-select.component.d.ts +3 -1
- package/lib/smart-select/smart-select.component.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1022,6 +1022,7 @@ class SmartSelectComponent {
|
|
|
1022
1022
|
typePrefix = null;
|
|
1023
1023
|
/* Confirmação de o campo é obrigatório */
|
|
1024
1024
|
required = false;
|
|
1025
|
+
limitView;
|
|
1025
1026
|
formControlName;
|
|
1026
1027
|
isMobile = window.innerWidth <= 768;
|
|
1027
1028
|
formValue;
|
|
@@ -1293,28 +1294,49 @@ class SmartSelectComponent {
|
|
|
1293
1294
|
}
|
|
1294
1295
|
return option.value === this.formValue;
|
|
1295
1296
|
}
|
|
1297
|
+
loadMore() {
|
|
1298
|
+
this.limitView = this.options?.length;
|
|
1299
|
+
this.renderBoxOptions();
|
|
1300
|
+
}
|
|
1296
1301
|
renderBoxOptions(filterValue = null) {
|
|
1297
1302
|
if (!this.options || !this.options.length) {
|
|
1298
1303
|
return;
|
|
1299
1304
|
}
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1305
|
+
let valueLimit = this.options.length;
|
|
1306
|
+
if (filterValue && filterValue.length > 3) {
|
|
1307
|
+
valueLimit = this.options.length;
|
|
1308
|
+
}
|
|
1309
|
+
else if (this.limitView) {
|
|
1310
|
+
valueLimit = this.limitView;
|
|
1311
|
+
}
|
|
1312
|
+
if (!filterValue) {
|
|
1313
|
+
this.filteredOptions = this.options
|
|
1314
|
+
?.map((option) => ({
|
|
1303
1315
|
value: option.value,
|
|
1304
1316
|
iconPrefix: option.iconPrefix,
|
|
1305
1317
|
htmlLabel: option.safeHtmlContent || option.label,
|
|
1306
1318
|
disabled: option.disabled,
|
|
1307
1319
|
viewOnly: option.viewOnly,
|
|
1308
|
-
}
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1320
|
+
}))
|
|
1321
|
+
.slice(0, valueLimit || 100);
|
|
1322
|
+
}
|
|
1323
|
+
else {
|
|
1324
|
+
this.limitView = this.options?.length;
|
|
1325
|
+
this.filteredOptions = this.options
|
|
1326
|
+
?.map((option) => ({
|
|
1327
|
+
value: option.value,
|
|
1328
|
+
iconPrefix: option.iconPrefix,
|
|
1329
|
+
htmlLabel: option.safeHtmlContent || option.label,
|
|
1330
|
+
disabled: option.disabled,
|
|
1331
|
+
viewOnly: option.viewOnly,
|
|
1332
|
+
}))
|
|
1333
|
+
.filter((option) => {
|
|
1334
|
+
const normalizedFilter = this.normalizeText(filterValue);
|
|
1335
|
+
const normalizedLabel = this.normalizeText(option.htmlLabel?.toString() || '');
|
|
1336
|
+
return normalizedLabel.includes(normalizedFilter);
|
|
1337
|
+
})
|
|
1338
|
+
.slice(0, valueLimit || 100);
|
|
1339
|
+
}
|
|
1318
1340
|
}
|
|
1319
1341
|
normalizeText(text) {
|
|
1320
1342
|
return text
|
|
@@ -1322,7 +1344,7 @@ class SmartSelectComponent {
|
|
|
1322
1344
|
.toLowerCase();
|
|
1323
1345
|
}
|
|
1324
1346
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SmartSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1325
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: SmartSelectComponent, isStandalone: true, selector: "wco-smart-select", inputs: { inputId: "inputId", inputName: "inputName", IconMaterial: "IconMaterial", placeholder: "placeholder", label: "label", showError: "showError", showSearch: "showSearch", placeholderSearch: "placeholderSearch", textEmpty: "textEmpty", multiSelect: "multiSelect", showMaxSelectedLabel: "showMaxSelectedLabel", typePrefix: "typePrefix", required: "required", formControlName: "formControlName" }, outputs: { onChange: "onChange" }, providers: [
|
|
1347
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: SmartSelectComponent, isStandalone: true, selector: "wco-smart-select", inputs: { inputId: "inputId", inputName: "inputName", IconMaterial: "IconMaterial", placeholder: "placeholder", label: "label", showError: "showError", showSearch: "showSearch", placeholderSearch: "placeholderSearch", textEmpty: "textEmpty", multiSelect: "multiSelect", showMaxSelectedLabel: "showMaxSelectedLabel", typePrefix: "typePrefix", required: "required", limitView: "limitView", formControlName: "formControlName" }, outputs: { onChange: "onChange" }, providers: [
|
|
1326
1348
|
{
|
|
1327
1349
|
provide: NG_VALUE_ACCESSOR,
|
|
1328
1350
|
useExisting: forwardRef(() => SmartSelectComponent),
|
|
@@ -1333,7 +1355,7 @@ class SmartSelectComponent {
|
|
|
1333
1355
|
useExisting: SmartSelectComponent,
|
|
1334
1356
|
multi: true,
|
|
1335
1357
|
},
|
|
1336
|
-
], 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\" [ngClass]=\"{'form--error': hasError}\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\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]=\"{'form-field--error': hasError, 'form-field--disabled': autocompleteControl.disabled }\"\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 wco-smart-select--arrow\">{{ 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]=\"placeholderSearch\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Pesquisar\"\n [attr.autofocus]=\"true\"\n [attr.tabindex]=\"0\"\n class=\"wco-smartSelect--search\"\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:has(.wco-smartSelect--search:focus) .form-field input::placeholder{opacity:1}.wco-smartSelect:has(.wco-smartSelect--search:focus) .form-field input+label{color:var(--wco-input-color-label);top:0;transform:translateY(-50%) translate(-10px) scale(.9)!important}.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-smart-select--arrow{pointer-events:none;color:var(--wco-color-primary-600)}.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:has(input) li:first-child{position:sticky;top:0;background-color:var(--wco-smart-select-box-default-color-bg);z-index:1}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:4px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:#ffffff75}.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;border-radius:var(--wco-smart-select-box-radius) 0 0 0;border-bottom:1px solid #ccc;box-shadow:4px 0 1px var(--wco-smart-select-box-default-color-bg);overflow:hidden}.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}.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 });
|
|
1358
|
+
], 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\" [ngClass]=\"{'form--error': hasError}\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\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]=\"{'form-field--error': hasError, 'form-field--disabled': autocompleteControl.disabled }\"\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 wco-smart-select--arrow\">{{ 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]=\"placeholderSearch\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Pesquisar\"\n [attr.autofocus]=\"true\"\n [attr.tabindex]=\"0\"\n class=\"wco-smartSelect--search\"\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 <li (click)=\"loadMore()\" class=\"wco-smart-select-load-more\" *ngIf=\"limitView && options && limitView > 0 && limitView !== options?.length\">\n <p class=\"display-body\">Carregar mais</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:has(.wco-smartSelect--search:focus) .form-field input::placeholder{opacity:1}.wco-smartSelect:has(.wco-smartSelect--search:focus) .form-field input+label{color:var(--wco-input-color-label);top:0;transform:translateY(-50%) translate(-10px) scale(.9)!important}.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-smart-select--arrow{pointer-events:none;color:var(--wco-color-primary-600)}.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:has(input) li:first-child{position:sticky;top:0;background-color:var(--wco-smart-select-box-default-color-bg);z-index:1}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:4px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:#ffffff75}.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;border-radius:var(--wco-smart-select-box-radius) 0 0 0;border-bottom:1px solid #ccc;box-shadow:4px 0 1px var(--wco-smart-select-box-default-color-bg);overflow:hidden}.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}.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:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-select-load-more{cursor:pointer;justify-content:center;grid-template-columns:1fr;background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);font-weight:600}.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-select-load-more:hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-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-select-load-more p{text-align:center;color:var(--wco-smart-select-box-hover-color-label)}.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 });
|
|
1337
1359
|
}
|
|
1338
1360
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SmartSelectComponent, decorators: [{
|
|
1339
1361
|
type: Component,
|
|
@@ -1348,7 +1370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
|
|
|
1348
1370
|
useExisting: SmartSelectComponent,
|
|
1349
1371
|
multi: true,
|
|
1350
1372
|
},
|
|
1351
|
-
], 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\" [ngClass]=\"{'form--error': hasError}\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\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]=\"{'form-field--error': hasError, 'form-field--disabled': autocompleteControl.disabled }\"\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 wco-smart-select--arrow\">{{ 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]=\"placeholderSearch\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Pesquisar\"\n [attr.autofocus]=\"true\"\n [attr.tabindex]=\"0\"\n class=\"wco-smartSelect--search\"\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:has(.wco-smartSelect--search:focus) .form-field input::placeholder{opacity:1}.wco-smartSelect:has(.wco-smartSelect--search:focus) .form-field input+label{color:var(--wco-input-color-label);top:0;transform:translateY(-50%) translate(-10px) scale(.9)!important}.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-smart-select--arrow{pointer-events:none;color:var(--wco-color-primary-600)}.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:has(input) li:first-child{position:sticky;top:0;background-color:var(--wco-smart-select-box-default-color-bg);z-index:1}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:4px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:#ffffff75}.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;border-radius:var(--wco-smart-select-box-radius) 0 0 0;border-bottom:1px solid #ccc;box-shadow:4px 0 1px var(--wco-smart-select-box-default-color-bg);overflow:hidden}.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}.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"] }]
|
|
1373
|
+
], 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\" [ngClass]=\"{'form--error': hasError}\">\n <input\n *ngIf=\"!multiSelect\"\n class=\"form-field__input\"\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]=\"{'form-field--error': hasError, 'form-field--disabled': autocompleteControl.disabled }\"\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 wco-smart-select--arrow\">{{ 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]=\"placeholderSearch\"\n (keyup)=\"onFilter($event)\"\n aria-label=\"Pesquisar\"\n [attr.autofocus]=\"true\"\n [attr.tabindex]=\"0\"\n class=\"wco-smartSelect--search\"\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 <li (click)=\"loadMore()\" class=\"wco-smart-select-load-more\" *ngIf=\"limitView && options && limitView > 0 && limitView !== options?.length\">\n <p class=\"display-body\">Carregar mais</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:has(.wco-smartSelect--search:focus) .form-field input::placeholder{opacity:1}.wco-smartSelect:has(.wco-smartSelect--search:focus) .form-field input+label{color:var(--wco-input-color-label);top:0;transform:translateY(-50%) translate(-10px) scale(.9)!important}.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-smart-select--arrow{pointer-events:none;color:var(--wco-color-primary-600)}.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:has(input) li:first-child{position:sticky;top:0;background-color:var(--wco-smart-select-box-default-color-bg);z-index:1}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar{width:4px}.wco-smartSelect .wco-smartSelect--box ul::-webkit-scrollbar-track{background-color:#ffffff75}.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;border-radius:var(--wco-smart-select-box-radius) 0 0 0;border-bottom:1px solid #ccc;box-shadow:4px 0 1px var(--wco-smart-select-box-default-color-bg);overflow:hidden}.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}.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:not(.wc-smart-select-view-only-option):not(.wc-smart-select-disabled-option):not(.wco-smart-selected-filter).wco-smart-select-load-more{cursor:pointer;justify-content:center;grid-template-columns:1fr;background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-color-label);font-weight:600}.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-select-load-more:hover{background-color:var(--wco-smart-select-box-hover-color-bg);color:var(--wco-smart-select-box-hover-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-select-load-more p{text-align:center;color:var(--wco-smart-select-box-hover-color-label)}.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"] }]
|
|
1352
1374
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{
|
|
1353
1375
|
type: ContentChildren,
|
|
1354
1376
|
args: [SmartSelectOptionComponent]
|
|
@@ -1380,6 +1402,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
|
|
|
1380
1402
|
type: Input
|
|
1381
1403
|
}], required: [{
|
|
1382
1404
|
type: Input
|
|
1405
|
+
}], limitView: [{
|
|
1406
|
+
type: Input
|
|
1383
1407
|
}], formControlName: [{
|
|
1384
1408
|
type: Input
|
|
1385
1409
|
}] } });
|