@wizco/fenixds-ngx 17.3.5 → 17.4.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/msg-box-feedback/msg-box-feedback.component.mjs +32 -25
- package/esm2022/lib/smart-select/smart-select.component.mjs +32 -16
- package/fesm2022/wizco-fenixds-ngx.mjs +62 -39
- package/fesm2022/wizco-fenixds-ngx.mjs.map +1 -1
- package/lib/msg-box-feedback/msg-box-feedback.component.d.ts +2 -1
- package/lib/msg-box-feedback/msg-box-feedback.component.d.ts.map +1 -1
- package/lib/smart-select/smart-select.component.d.ts +7 -5
- package/lib/smart-select/smart-select.component.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -544,45 +544,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
544
544
|
|
|
545
545
|
class MsgBoxFeedbackComponent {
|
|
546
546
|
/*
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
547
|
+
* Sombra do componente
|
|
548
|
+
* @param {boolean} shadow
|
|
549
|
+
* @default true
|
|
550
|
+
* @example true | false
|
|
551
|
+
*/
|
|
552
552
|
shadow = false;
|
|
553
553
|
/*
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
554
|
+
* Modo do componente
|
|
555
|
+
* @param {MsgBoxFeedbackTypes['mode']} mode
|
|
556
|
+
* @default 'fit'
|
|
557
|
+
* @example 'fit' | 'full'
|
|
558
|
+
*/
|
|
559
559
|
mode = 'fit';
|
|
560
560
|
/*
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
561
|
+
* Título do componente
|
|
562
|
+
* @param {MsgBoxFeedbackTypes['title']} title
|
|
563
|
+
*/
|
|
564
564
|
title;
|
|
565
565
|
/*
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
566
|
+
* Mensagem do componente
|
|
567
|
+
* @param {MsgBoxFeedbackTypes['message']} message
|
|
568
|
+
*/
|
|
569
569
|
message;
|
|
570
570
|
/*
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
571
|
+
* Tipo do componente
|
|
572
|
+
* @param {MsgBoxFeedbackTypes['type']} type
|
|
573
|
+
*/
|
|
574
574
|
type = 'error';
|
|
575
575
|
/*
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
576
|
+
* Remover botão de fechar
|
|
577
|
+
* @param {boolean} hideClose
|
|
578
|
+
*/
|
|
579
|
+
hideClose = false;
|
|
580
|
+
/*
|
|
581
|
+
* Evento emitido ao fechar o componente
|
|
582
|
+
* @param {EventEmitter<any>}
|
|
583
|
+
*/
|
|
579
584
|
onClose = new EventEmitter();
|
|
580
585
|
constructor() { }
|
|
581
586
|
close() {
|
|
582
587
|
this.onClose.emit(true);
|
|
583
588
|
}
|
|
584
589
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MsgBoxFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
585
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MsgBoxFeedbackComponent, isStandalone: true, selector: "wco-msg-box-feedback", inputs: { shadow: "shadow", mode: "mode", title: "title", message: "message", type: "type" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n @fadeSlideInOut>\n <
|
|
590
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MsgBoxFeedbackComponent, isStandalone: true, selector: "wco-msg-box-feedback", inputs: { shadow: "shadow", mode: "mode", title: "title", message: "message", type: "type", hideClose: "hideClose" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n @fadeSlideInOut>\n <div class=\"box-feedback--icon\" *ngIf=\"type !== 'loading'\">\n <span *ngIf=\"type === 'error'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">error</span>\n <span *ngIf=\"type === 'warning'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">warning</span>\n <span *ngIf=\"type === 'info'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">info</span>\n <span *ngIf=\"type === 'success'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">check_circle</span>\n </div>\n <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n <div class=\"box-feedback--content\">\n <div class=\"box-feedback--header\"> \n <h6 class=\"display-6 bold\">\n {{ title }}\n </h6>\n <a class=\"btn-close\" (click)=\"close()\" *ngIf=\"!hideClose\" >\n <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n </svg>\n </a>\n </div>\n <p class=\"display-p\">{{ message }}</p>\n </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-sm);border:4px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback .box-feedback--icon,div.box-feedback svg{margin:0 10px 0 0;flex:0 0 20px}div.box-feedback .box-feedback--icon path,div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .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)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
586
591
|
trigger('fadeSlideInOut', [
|
|
587
592
|
transition(':enter', [
|
|
588
593
|
style({ opacity: 0, transform: 'translateY(10px)' }),
|
|
@@ -606,7 +611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
606
611
|
animate('500ms', style({ opacity: 0, transform: 'translateY(10px)' })),
|
|
607
612
|
]),
|
|
608
613
|
]),
|
|
609
|
-
], template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n @fadeSlideInOut>\n <
|
|
614
|
+
], template: "<div \n [ngClass]=\"'box-feedback box-feedback-' + type + ' mode-' + mode\"\n [className]=\"shadow ? 'mode-shadow' : ''\"\n @fadeSlideInOut>\n <div class=\"box-feedback--icon\" *ngIf=\"type !== 'loading'\">\n <span *ngIf=\"type === 'error'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">error</span>\n <span *ngIf=\"type === 'warning'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">warning</span>\n <span *ngIf=\"type === 'info'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">info</span>\n <span *ngIf=\"type === 'success'\" class=\"material-icons\" style=\"color: var(--box-feedback-icon-color);\">check_circle</span>\n </div>\n <svg *ngIf=\"type === 'loading'\" class=\"spinner\" viewBox=\"0 0 66 66\" xmlns=\"http://www.w3.org/2000/svg\">\n <circle class=\"loading-icon\" fill=\"none\" stroke=\"var(--box-feedback-icon-color)\" stroke-width=\"6\"\n stroke-linecap=\"round\" cx=\"33\" cy=\"33\" r=\"30\"></circle>\n </svg>\n <div class=\"box-feedback--content\">\n <div class=\"box-feedback--header\"> \n <h6 class=\"display-6 bold\">\n {{ title }}\n </h6>\n <a class=\"btn-close\" (click)=\"close()\" *ngIf=\"!hideClose\" >\n <svg viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M11.25 0.758431C10.925 0.433431 10.4 0.433431 10.075 0.758431L5.99998 4.8251L1.92498 0.750098C1.59998 0.425098 1.07498 0.425098 0.749976 0.750098C0.424976 1.0751 0.424976 1.6001 0.749976 1.9251L4.82498 6.0001L0.749976 10.0751C0.424976 10.4001 0.424976 10.9251 0.749976 11.2501C1.07498 11.5751 1.59998 11.5751 1.92498 11.2501L5.99998 7.1751L10.075 11.2501C10.4 11.5751 10.925 11.5751 11.25 11.2501C11.575 10.9251 11.575 10.4001 11.25 10.0751L7.17497 6.0001L11.25 1.9251C11.5666 1.60843 11.5666 1.0751 11.25 0.758431Z\" />\n </svg>\n </a>\n </div>\n <p class=\"display-p\">{{ message }}</p>\n </div>\n</div>\n", styles: ["wco-msg-box-feedback{display:block;width:100%;max-width:100%}div.box-feedback{align-content:initial;align-items:flex-start;background:var(--box-feedback-bg);border-radius:var(--wco-radius-sm);border:4px solid var(--box-feedback-border);display:inline-flex;padding:var(--wco-spacing-xxxs, 8px);position:relative;box-sizing:border-box;min-width:274px;min-height:84px;max-width:580px;width:auto}div.box-feedback.mode-full{width:100%;min-width:100%;max-width:100%}div.box-feedback.mode-shadow{box-shadow:var(--wco-shadow-level-1)}div.box-feedback .box-feedback--content{width:100%;display:block}div.box-feedback .box-feedback--header{display:flex;align-items:flex-start;justify-content:space-between;width:100%}div.box-feedback a.btn-close{cursor:pointer}div.box-feedback a.btn-close svg{width:12px;margin:0}div.box-feedback a.btn-close svg path{fill:var(--wco-color-neutral-700)}div.box-feedback .box-feedback--icon,div.box-feedback svg{margin:0 10px 0 0;flex:0 0 20px}div.box-feedback .box-feedback--icon path,div.box-feedback svg path{fill:var(--box-feedback-icon-color)}div.box-feedback h6{color:var(--box-feedback-title);line-height:1.2;text-wrap:pretty}div.box-feedback p{color:var(--box-feedback-text);text-wrap:pretty;line-height:1.1;margin-top:var(--wco-spacing-nano, 8px)}div.box-feedback .spinner{width:20px;height:20px;animation:rotator 1.4s linear infinite}@keyframes rotator{0%{transform:rotate(0)}to{transform:rotate(270deg)}}div.box-feedback .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)}}div.box-feedback.box-feedback-error{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-danger-500);--box-feedback-icon-color: var(--wco-color-danger-600);--box-feedback-title: var(--wco-color-danger-600)}div.box-feedback.box-feedback-success{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-success-500);--box-feedback-icon-color: var(--wco-color-success-600);--box-feedback-title: var(--wco-color-success-600)}div.box-feedback.box-feedback-warning{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-warning-500);--box-feedback-icon-color: var(--wco-color-warning-600);--box-feedback-title: var(--wco-color-warning-600)}div.box-feedback.box-feedback-info{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-info-500);--box-feedback-icon-color: var(--wco-color-info-600);--box-feedback-title: var(--wco-color-info-600)}div.box-feedback.box-feedback-loading{--box-feedback-text: var(--wco-color-neutral-700);--box-feedback-bg: var(--wco-color-neutral-50);--box-feedback-border: var(--wco-color-secondary-500);--box-feedback-icon-color: var(--wco-color-secondary-600);--box-feedback-title: var(--wco-color-secondary-600)}\n"] }]
|
|
610
615
|
}], ctorParameters: function () { return []; }, propDecorators: { shadow: [{
|
|
611
616
|
type: Input
|
|
612
617
|
}], mode: [{
|
|
@@ -617,6 +622,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
617
622
|
type: Input
|
|
618
623
|
}], type: [{
|
|
619
624
|
type: Input
|
|
625
|
+
}], hideClose: [{
|
|
626
|
+
type: Input
|
|
620
627
|
}], onClose: [{
|
|
621
628
|
type: Output
|
|
622
629
|
}] } });
|
|
@@ -1000,7 +1007,11 @@ class SmartSelectComponent {
|
|
|
1000
1007
|
placeholder = 'Selecione uma opção';
|
|
1001
1008
|
/* Label do select */
|
|
1002
1009
|
label = ' ';
|
|
1010
|
+
/* Força visualização do erro */
|
|
1011
|
+
showError = false;
|
|
1012
|
+
/* Mostrar campos de busca */
|
|
1003
1013
|
showSearch = false;
|
|
1014
|
+
placeholderSearch = 'Buscar';
|
|
1004
1015
|
/* Texto exibido quando não há resultados */
|
|
1005
1016
|
textEmpty = 'Não há resultados para a busca';
|
|
1006
1017
|
/* habilitar opção de multiplas seleções */
|
|
@@ -1011,6 +1022,7 @@ class SmartSelectComponent {
|
|
|
1011
1022
|
typePrefix = null;
|
|
1012
1023
|
/* Confirmação de o campo é obrigatório */
|
|
1013
1024
|
required = false;
|
|
1025
|
+
formControlName;
|
|
1014
1026
|
isMobile = window.innerWidth <= 768;
|
|
1015
1027
|
formValue;
|
|
1016
1028
|
isFocused = false;
|
|
@@ -1027,28 +1039,33 @@ class SmartSelectComponent {
|
|
|
1027
1039
|
/// estados do control
|
|
1028
1040
|
ngOnInit() { }
|
|
1029
1041
|
writeValue(obj) {
|
|
1042
|
+
if (this.autocompleteControl.value === obj) {
|
|
1043
|
+
return;
|
|
1044
|
+
}
|
|
1030
1045
|
this.formValue = obj;
|
|
1031
1046
|
this.autocompleteControl.setValue(obj);
|
|
1047
|
+
this.renderBoxOptions();
|
|
1032
1048
|
}
|
|
1033
1049
|
registerOnChange(fn) {
|
|
1034
|
-
this.
|
|
1035
|
-
|
|
1050
|
+
this.onChange.subscribe((event) => {
|
|
1051
|
+
if (event.type === 'updateValue') {
|
|
1052
|
+
fn(event.value);
|
|
1053
|
+
}
|
|
1036
1054
|
});
|
|
1037
1055
|
}
|
|
1038
1056
|
registerOnTouched(fn) {
|
|
1039
1057
|
this.onTouched = fn;
|
|
1040
1058
|
}
|
|
1059
|
+
get hasError() {
|
|
1060
|
+
return this.showError
|
|
1061
|
+
? this.showError
|
|
1062
|
+
: this.autocompleteControl.invalid &&
|
|
1063
|
+
this.autocompleteControl.touched &&
|
|
1064
|
+
!this.showList;
|
|
1065
|
+
}
|
|
1041
1066
|
validate(_control) {
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
return null;
|
|
1045
|
-
}
|
|
1046
|
-
return { required: true };
|
|
1047
|
-
}
|
|
1048
|
-
if (this.formValue) {
|
|
1049
|
-
return null;
|
|
1050
|
-
}
|
|
1051
|
-
return { required: true };
|
|
1067
|
+
this.autocompleteControl = _control || new FormControl();
|
|
1068
|
+
return _control.validator;
|
|
1052
1069
|
}
|
|
1053
1070
|
setDisabledState(isDisabled) {
|
|
1054
1071
|
if (isDisabled) {
|
|
@@ -1292,7 +1309,7 @@ class SmartSelectComponent {
|
|
|
1292
1309
|
.toLowerCase();
|
|
1293
1310
|
}
|
|
1294
1311
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1295
|
-
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: [
|
|
1312
|
+
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", showError: "showError", showSearch: "showSearch", placeholderSearch: "placeholderSearch", textEmpty: "textEmpty", multiSelect: "multiSelect", showMaxSelectedLabel: "showMaxSelectedLabel", typePrefix: "typePrefix", required: "required", formControlName: "formControlName" }, outputs: { onChange: "onChange" }, providers: [
|
|
1296
1313
|
{
|
|
1297
1314
|
provide: NG_VALUE_ACCESSOR,
|
|
1298
1315
|
useExisting: forwardRef(() => SmartSelectComponent),
|
|
@@ -1303,7 +1320,7 @@ class SmartSelectComponent {
|
|
|
1303
1320
|
useExisting: SmartSelectComponent,
|
|
1304
1321
|
multi: true,
|
|
1305
1322
|
},
|
|
1306
|
-
], 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 });
|
|
1323
|
+
], 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=\"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-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::-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 });
|
|
1307
1324
|
}
|
|
1308
1325
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SmartSelectComponent, decorators: [{
|
|
1309
1326
|
type: Component,
|
|
@@ -1318,7 +1335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1318
1335
|
useExisting: SmartSelectComponent,
|
|
1319
1336
|
multi: true,
|
|
1320
1337
|
},
|
|
1321
|
-
], 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"] }]
|
|
1338
|
+
], 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=\"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-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::-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"] }]
|
|
1322
1339
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { options: [{
|
|
1323
1340
|
type: ContentChildren,
|
|
1324
1341
|
args: [SmartSelectOptionComponent]
|
|
@@ -1334,8 +1351,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1334
1351
|
type: Input
|
|
1335
1352
|
}], label: [{
|
|
1336
1353
|
type: Input
|
|
1354
|
+
}], showError: [{
|
|
1355
|
+
type: Input
|
|
1337
1356
|
}], showSearch: [{
|
|
1338
1357
|
type: Input
|
|
1358
|
+
}], placeholderSearch: [{
|
|
1359
|
+
type: Input
|
|
1339
1360
|
}], textEmpty: [{
|
|
1340
1361
|
type: Input
|
|
1341
1362
|
}], multiSelect: [{
|
|
@@ -1346,6 +1367,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1346
1367
|
type: Input
|
|
1347
1368
|
}], required: [{
|
|
1348
1369
|
type: Input
|
|
1370
|
+
}], formControlName: [{
|
|
1371
|
+
type: Input
|
|
1349
1372
|
}] } });
|
|
1350
1373
|
|
|
1351
1374
|
class TimelineComponent {
|