asksuite-citrus 0.5.3 → 0.5.4

package/esm2022/lib/components/checkbox/checkbox.component.mjs

@@ -22,8 +22,9 @@ export class CheckboxComponent {
         this.focus.emit(event);
     }
     onModelChange(newValue) {
-        this.writeValue(newValue);
+        this.value = newValue;
         this.onChange(newValue);
+        this.valueChange.emit(newValue);
     }
     handleChange(event) {
         this.change.emit(event);
@@ -44,14 +45,13 @@ export class CheckboxComponent {
     }
     writeValue(value) {
         this.value = value;
-        this.valueChange.emit(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CheckboxComponent, selector: "ask-checkbox", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", click: "click", focus: "focus" }, providers: [valueAccessor], ngImport: i0, template: "<label class=\"ask-checkbox\">\n  <input type=\"checkbox\"\n         (click)=\"click.emit($event)\"\n         (focus)=\"handleFocus($event)\"\n         (change)=\"handleChange($event)\"\n         (touchend)=\"onTouch()\"\n         [disabled]=\"disabled\"\n         [ngModel]=\"value\"\n         (ngModelChange)=\"onModelChange($event)\"\n  />\n  <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}:host{max-width:100%}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CheckboxComponent, selector: "ask-checkbox", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", click: "click", focus: "focus" }, providers: [valueAccessor], ngImport: i0, template: "<label class=\"ask-checkbox\">\n  <input type=\"checkbox\"\n         (click)=\"click.emit($event)\"\n         (focus)=\"handleFocus($event)\"\n         (change)=\"handleChange($event)\"\n         (touchend)=\"onTouch()\"\n         [disabled]=\"disabled\"\n         [ngModel]=\"value\"\n         (ngModelChange)=\"onModelChange($event)\"\n  />\n  <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}:host{width:100%;height:100%;display:flex;flex-direction:row;align-items:center}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%;height:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ask-checkbox', providers: [valueAccessor], template: "<label class=\"ask-checkbox\">\n  <input type=\"checkbox\"\n         (click)=\"click.emit($event)\"\n         (focus)=\"handleFocus($event)\"\n         (change)=\"handleChange($event)\"\n         (touchend)=\"onTouch()\"\n         [disabled]=\"disabled\"\n         [ngModel]=\"value\"\n         (ngModelChange)=\"onModelChange($event)\"\n  />\n  <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}:host{max-width:100%}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'ask-checkbox', providers: [valueAccessor], template: "<label class=\"ask-checkbox\">\n  <input type=\"checkbox\"\n         (click)=\"click.emit($event)\"\n         (focus)=\"handleFocus($event)\"\n         (change)=\"handleChange($event)\"\n         (touchend)=\"onTouch()\"\n         [disabled]=\"disabled\"\n         [ngModel]=\"value\"\n         (ngModelChange)=\"onModelChange($event)\"\n  />\n  <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}:host{width:100%;height:100%;display:flex;flex-direction:row;align-items:center}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%;height:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -65,4 +65,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
             }], focus: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYXNrc3VpdGUtY2l0cnVzL3NyYy9saWIvY29tcG9uZW50cy9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hc2tzdWl0ZS1jaXRydXMvc3JjL2xpYi9jb21wb25lbnRzL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLFVBQVUsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFXLE1BQU0sZUFBZSxDQUFDO0FBQzNGLE9BQU8sRUFBdUIsaUJBQWlCLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBRXZFLE1BQU0sYUFBYSxHQUFhO0lBQzlCLE9BQU8sRUFBRSxpQkFBaUI7SUFDMUIsS0FBSyxFQUFFLElBQUk7SUFDWCxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGlCQUFpQixDQUFDO0NBQ2pELENBQUE7QUFRRCxNQUFNLE9BQU8saUJBQWlCO0lBTjlCO1FBUVcsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUV6QixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFDMUMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7UUFDbkMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFDdkMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFFakQsY0FBUyxHQUFHLEtBQUssQ0FBQztRQStCbEIsWUFBTyxHQUFHLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztLQVdwQjtJQXhDQyxXQUFXLENBQUMsS0FBaUI7UUFDM0IsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDdEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELGFBQWEsQ0FBQyxRQUFpQjtRQUM3QixJQUFJLENBQUMsVUFBVSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQzFCLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUVELFlBQVksQ0FBQyxLQUFZO1FBQ3ZCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzFCLENBQUM7SUFFRDs7S0FFQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELFFBQVEsQ0FBQyxDQUFNO0lBQ2YsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUlELGdCQUFnQixDQUFDLFVBQW1CO1FBQ2xDLElBQUksQ0FBQyxRQUFRLEdBQUcsVUFBVSxDQUFDO0lBQzdCLENBQUM7SUFFRCxVQUFVLENBQUMsS0FBYztRQUN2QixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztRQUNuQixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDcEMsQ0FBQzs4R0FqRFUsaUJBQWlCO2tHQUFqQixpQkFBaUIsb0xBRmpCLENBQUMsYUFBYSxDQUFDLDBCQ2I1QiwrYUFZQTs7MkZER2EsaUJBQWlCO2tCQU43QixTQUFTOytCQUNFLGNBQWMsYUFHYixDQUFDLGFBQWEsQ0FBQzs4QkFHakIsS0FBSztzQkFBYixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRUksV0FBVztzQkFBcEIsTUFBTTtnQkFDRyxNQUFNO3NCQUFmLE1BQU07Z0JBQ0csS0FBSztzQkFBZCxNQUFNO2dCQUNHLEtBQUs7c0JBQWQsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYsIElucHV0LCBPdXRwdXQsIFByb3ZpZGVyfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Q29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcblxuY29uc3QgdmFsdWVBY2Nlc3NvcjogUHJvdmlkZXIgPSB7XG4gIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICBtdWx0aTogdHJ1ZSxcbiAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ2hlY2tib3hDb21wb25lbnQpLFxufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhc2stY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2tib3guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGVja2JveC5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFt2YWx1ZUFjY2Vzc29yXVxufSlcbmV4cG9ydCBjbGFzcyBDaGVja2JveENvbXBvbmVudCBpbXBsZW1lbnRzIENvbnRyb2xWYWx1ZUFjY2Vzc29yIHtcbiAgQElucHV0KCkgdmFsdWU6IGJvb2xlYW4gfCB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG5cbiAgQE91dHB1dCgpIHZhbHVlQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuICBAT3V0cHV0KCkgY2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxFdmVudD4oKTtcbiAgQE91dHB1dCgpIGNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcjxNb3VzZUV2ZW50PigpO1xuICBAT3V0cHV0KCkgZm9jdXMgPSBuZXcgRXZlbnRFbWl0dGVyPEZvY3VzRXZlbnQ+KCk7XG5cbiAgaXNGb2N1c2VkID0gZmFsc2U7XG5cbiAgaGFuZGxlRm9jdXMoZXZlbnQ6IEZvY3VzRXZlbnQpIHtcbiAgICB0aGlzLmlzRm9jdXNlZCA9IHRydWU7XG4gICAgdGhpcy5mb2N1cy5lbWl0KGV2ZW50KTtcbiAgfVxuXG4gIG9uTW9kZWxDaGFuZ2UobmV3VmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLndyaXRlVmFsdWUobmV3VmFsdWUpO1xuICAgIHRoaXMub25DaGFuZ2UobmV3VmFsdWUpO1xuICB9XG5cbiAgaGFuZGxlQ2hhbmdlKGV2ZW50OiBFdmVudCkge1xuICAgIHRoaXMuY2hhbmdlLmVtaXQoZXZlbnQpO1xuICB9XG5cbiAgLypcbiAqIENvbnRyb2wgdmFsdWUgYWNjZXNzb3IgbWV0aG9kc1xuICovXG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgb25DaGFuZ2UoXzogYW55KTogdm9pZCB7XG4gIH1cblxuICByZWdpc3Rlck9uVG91Y2hlZChmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vblRvdWNoID0gZm47XG4gIH1cblxuICBvblRvdWNoID0gKCkgPT4ge307XG5cbiAgc2V0RGlzYWJsZWRTdGF0ZShpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGlzRGlzYWJsZWQ7XG4gIH1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xuICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcbiAgfVxuXG59XG4iLCI8bGFiZWwgY2xhc3M9XCJhc2stY2hlY2tib3hcIj5cbiAgPGlucHV0IHR5cGU9XCJjaGVja2JveFwiXG4gICAgICAgICAoY2xpY2spPVwiY2xpY2suZW1pdCgkZXZlbnQpXCJcbiAgICAgICAgIChmb2N1cyk9XCJoYW5kbGVGb2N1cygkZXZlbnQpXCJcbiAgICAgICAgIChjaGFuZ2UpPVwiaGFuZGxlQ2hhbmdlKCRldmVudClcIlxuICAgICAgICAgKHRvdWNoZW5kKT1cIm9uVG91Y2goKVwiXG4gICAgICAgICBbZGlzYWJsZWRdPVwiZGlzYWJsZWRcIlxuICAgICAgICAgW25nTW9kZWxdPVwidmFsdWVcIlxuICAgICAgICAgKG5nTW9kZWxDaGFuZ2UpPVwib25Nb2RlbENoYW5nZSgkZXZlbnQpXCJcbiAgLz5cbiAgPHNwYW4gI3RleHQgW3RpdGxlXT1cInRleHQuaW5uZXJUZXh0XCI+PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50Pjwvc3Bhbj5cbjwvbGFiZWw+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYXNrc3VpdGUtY2l0cnVzL3NyYy9saWIvY29tcG9uZW50cy9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hc2tzdWl0ZS1jaXRydXMvc3JjL2xpYi9jb21wb25lbnRzL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFHTCxTQUFTLEVBQ1QsWUFBWSxFQUNaLFVBQVUsRUFDVixLQUFLLEVBQ0wsTUFBTSxFQUVQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBdUIsaUJBQWlCLEVBQUMsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBRXZFLE1BQU0sYUFBYSxHQUFhO0lBQzlCLE9BQU8sRUFBRSxpQkFBaUI7SUFDMUIsS0FBSyxFQUFFLElBQUk7SUFDWCxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGlCQUFpQixDQUFDO0NBQ2pELENBQUE7QUFRRCxNQUFNLE9BQU8saUJBQWlCO0lBTjlCO1FBUVcsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUV6QixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7UUFDMUMsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFTLENBQUM7UUFDbkMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFDdkMsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFFakQsY0FBUyxHQUFHLEtBQUssQ0FBQztRQWdDbEIsWUFBTyxHQUFHLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztLQVVwQjtJQXhDQyxXQUFXLENBQUMsS0FBaUI7UUFDM0IsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7UUFDdEIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekIsQ0FBQztJQUVELGFBQWEsQ0FBQyxRQUFpQjtRQUM3QixJQUFJLENBQUMsS0FBSyxHQUFHLFFBQVEsQ0FBQztRQUN0QixJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3hCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ2xDLENBQUM7SUFFRCxZQUFZLENBQUMsS0FBWTtRQUN2QixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUMxQixDQUFDO0lBRUQ7O0tBRUM7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxRQUFRLENBQUMsQ0FBTTtJQUNmLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxPQUFPLEdBQUcsRUFBRSxDQUFDO0lBQ3BCLENBQUM7SUFJRCxnQkFBZ0IsQ0FBQyxVQUFtQjtRQUNsQyxJQUFJLENBQUMsUUFBUSxHQUFHLFVBQVUsQ0FBQztJQUM3QixDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQWM7UUFDdkIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7SUFDckIsQ0FBQzs4R0FqRFUsaUJBQWlCO2tHQUFqQixpQkFBaUIsb0xBRmpCLENBQUMsYUFBYSxDQUFDLDBCQ3RCNUIsK2FBWUE7OzJGRFlhLGlCQUFpQjtrQkFON0IsU0FBUzsrQkFDRSxjQUFjLGFBR2IsQ0FBQyxhQUFhLENBQUM7OEJBR2pCLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVJLFdBQVc7c0JBQXBCLE1BQU07Z0JBQ0csTUFBTTtzQkFBZixNQUFNO2dCQUNHLEtBQUs7c0JBQWQsTUFBTTtnQkFDRyxLQUFLO3NCQUFkLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBmb3J3YXJkUmVmLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBQcm92aWRlclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7Q29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SfSBmcm9tIFwiQGFuZ3VsYXIvZm9ybXNcIjtcblxuY29uc3QgdmFsdWVBY2Nlc3NvcjogUHJvdmlkZXIgPSB7XG4gIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICBtdWx0aTogdHJ1ZSxcbiAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQ2hlY2tib3hDb21wb25lbnQpLFxufVxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdhc2stY2hlY2tib3gnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2tib3guY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGVja2JveC5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFt2YWx1ZUFjY2Vzc29yXSxcbn0pXG5leHBvcnQgY2xhc3MgQ2hlY2tib3hDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIEBJbnB1dCgpIHZhbHVlOiBib29sZWFuIHwgdW5kZWZpbmVkO1xuICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcbiAgQE91dHB1dCgpIGNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8RXZlbnQ+KCk7XG4gIEBPdXRwdXQoKSBjbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcbiAgQE91dHB1dCgpIGZvY3VzID0gbmV3IEV2ZW50RW1pdHRlcjxGb2N1c0V2ZW50PigpO1xuXG4gIGlzRm9jdXNlZCA9IGZhbHNlO1xuXG4gIGhhbmRsZUZvY3VzKGV2ZW50OiBGb2N1c0V2ZW50KSB7XG4gICAgdGhpcy5pc0ZvY3VzZWQgPSB0cnVlO1xuICAgIHRoaXMuZm9jdXMuZW1pdChldmVudCk7XG4gIH1cblxuICBvbk1vZGVsQ2hhbmdlKG5ld1ZhbHVlOiBib29sZWFuKSB7XG4gICAgdGhpcy52YWx1ZSA9IG5ld1ZhbHVlO1xuICAgIHRoaXMub25DaGFuZ2UobmV3VmFsdWUpO1xuICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdChuZXdWYWx1ZSk7XG4gIH1cblxuICBoYW5kbGVDaGFuZ2UoZXZlbnQ6IEV2ZW50KSB7XG4gICAgdGhpcy5jaGFuZ2UuZW1pdChldmVudCk7XG4gIH1cblxuICAvKlxuICogQ29udHJvbCB2YWx1ZSBhY2Nlc3NvciBtZXRob2RzXG4gKi9cblxuICByZWdpc3Rlck9uQ2hhbmdlKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2hhbmdlID0gZm47XG4gIH1cblxuICBvbkNoYW5nZShfOiBhbnkpOiB2b2lkIHtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2ggPSBmbjtcbiAgfVxuXG4gIG9uVG91Y2ggPSAoKSA9PiB7fTtcblxuICBzZXREaXNhYmxlZFN0YXRlKGlzRGlzYWJsZWQ6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLmRpc2FibGVkID0gaXNEaXNhYmxlZDtcbiAgfVxuXG4gIHdyaXRlVmFsdWUodmFsdWU6IGJvb2xlYW4pOiB2b2lkIHtcbiAgICB0aGlzLnZhbHVlID0gdmFsdWU7XG4gIH1cblxufVxuIiwiPGxhYmVsIGNsYXNzPVwiYXNrLWNoZWNrYm94XCI+XG4gIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgKGNsaWNrKT1cImNsaWNrLmVtaXQoJGV2ZW50KVwiXG4gICAgICAgICAoZm9jdXMpPVwiaGFuZGxlRm9jdXMoJGV2ZW50KVwiXG4gICAgICAgICAoY2hhbmdlKT1cImhhbmRsZUNoYW5nZSgkZXZlbnQpXCJcbiAgICAgICAgICh0b3VjaGVuZCk9XCJvblRvdWNoKClcIlxuICAgICAgICAgW2Rpc2FibGVkXT1cImRpc2FibGVkXCJcbiAgICAgICAgIFtuZ01vZGVsXT1cInZhbHVlXCJcbiAgICAgICAgIChuZ01vZGVsQ2hhbmdlKT1cIm9uTW9kZWxDaGFuZ2UoJGV2ZW50KVwiXG4gIC8+XG4gIDxzcGFuICN0ZXh0IFt0aXRsZV09XCJ0ZXh0LmlubmVyVGV4dFwiPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L3NwYW4+XG48L2xhYmVsPlxuIl19

package/fesm2022/asksuite-citrus.mjs

@@ -8,12 +8,10 @@ import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$2 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
-import { startWith, tap, map, debounceTime } from 'rxjs';
-import * as i4 from '@angular/cdk/scrolling';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import moment from 'moment';
-import * as i4$1 from '@ngx-translate/core';
+import { debounceTime, startWith, tap, map } from 'rxjs';
+import * as i6 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
+import moment from 'moment';
 import * as i1$3 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -477,8 +475,9 @@ class CheckboxComponent {
         this.focus.emit(event);
     }
     onModelChange(newValue) {
-        this.writeValue(newValue);
+        this.value = newValue;
         this.onChange(newValue);
+        this.valueChange.emit(newValue);
     }
     handleChange(event) {
         this.change.emit(event);
@@ -499,14 +498,13 @@ class CheckboxComponent {
     }
     writeValue(value) {
         this.value = value;
-        this.valueChange.emit(this.value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CheckboxComponent, selector: "ask-checkbox", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", click: "click", focus: "focus" }, providers: [valueAccessor$1], ngImport: i0, template: "<label class=\"ask-checkbox\">\n  <input type=\"checkbox\"\n         (click)=\"click.emit($event)\"\n         (focus)=\"handleFocus($event)\"\n         (change)=\"handleChange($event)\"\n         (touchend)=\"onTouch()\"\n         [disabled]=\"disabled\"\n         [ngModel]=\"value\"\n         (ngModelChange)=\"onModelChange($event)\"\n  />\n  <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}:host{max-width:100%}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: CheckboxComponent, selector: "ask-checkbox", inputs: { value: "value", disabled: "disabled" }, outputs: { valueChange: "valueChange", change: "change", click: "click", focus: "focus" }, providers: [valueAccessor$1], ngImport: i0, template: "<label class=\"ask-checkbox\">\n  <input type=\"checkbox\"\n         (click)=\"click.emit($event)\"\n         (focus)=\"handleFocus($event)\"\n         (change)=\"handleChange($event)\"\n         (touchend)=\"onTouch()\"\n         [disabled]=\"disabled\"\n         [ngModel]=\"value\"\n         (ngModelChange)=\"onModelChange($event)\"\n  />\n  <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}:host{width:100%;height:100%;display:flex;flex-direction:row;align-items:center}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%;height:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ask-checkbox', providers: [valueAccessor$1], template: "<label class=\"ask-checkbox\">\n  <input type=\"checkbox\"\n         (click)=\"click.emit($event)\"\n         (focus)=\"handleFocus($event)\"\n         (change)=\"handleChange($event)\"\n         (touchend)=\"onTouch()\"\n         [disabled]=\"disabled\"\n         [ngModel]=\"value\"\n         (ngModelChange)=\"onModelChange($event)\"\n  />\n  <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}:host{max-width:100%}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'ask-checkbox', providers: [valueAccessor$1], template: "<label class=\"ask-checkbox\">\n  <input type=\"checkbox\"\n         (click)=\"click.emit($event)\"\n         (focus)=\"handleFocus($event)\"\n         (change)=\"handleChange($event)\"\n         (touchend)=\"onTouch()\"\n         [disabled]=\"disabled\"\n         [ngModel]=\"value\"\n         (ngModelChange)=\"onModelChange($event)\"\n  />\n  <span #text [title]=\"text.innerText\"><ng-content></ng-content></span>\n</label>\n", styles: ["@import\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css\";:root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}:host{width:100%;height:100%;display:flex;flex-direction:row;align-items:center}.ask-checkbox{display:flex;align-items:center;gap:10px;cursor:pointer;width:100%;height:100%}.ask-checkbox>input{-webkit-appearance:none;appearance:none;width:18px;height:18px;border:2px solid #FF5724;border-radius:3px;outline:none;transition:border-color .3s;position:relative;flex-shrink:0;cursor:pointer;color:transparent}.ask-checkbox>input:checked{background-color:#ff5724;color:#fff}.ask-checkbox>input:after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.ask-checkbox>input:after{content:\"\\f00c\";font-family:\"Font Awesome 5 Free\",serif;font-weight:900;font-size:12px}.ask-checkbox>input:disabled{border-color:#7b8794}.ask-checkbox>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -527,6 +525,17 @@ const valueAccessor = {
     useExisting: forwardRef(() => AutocompleteComponent),
 };
 class AutocompleteComponent {
+    set listViewport(value) {
+        if (value) {
+            const listEl = value.nativeElement;
+            const scrollThreshold = 50;
+            listEl.addEventListener('scroll', (event) => {
+                if ((listEl.scrollHeight - listEl.scrollTop - listEl.clientHeight) <= scrollThreshold) {
+                    this.getMoreItems();
+                }
+            });
+        }
+    }
     constructor(formBuilder, overlay, viewContainerRef, change) {
         this.formBuilder = formBuilder;
         this.overlay = overlay;
@@ -535,10 +544,22 @@ class AutocompleteComponent {
         this.inputControl = new FormControl("");
         this.filteredOptions = [];
         this.paginatedFilteredOptions = [];
+        this.selection = [];
         this.closed = true;
         this.chipsCollapsed = true;
         this.checkAllValue = false;
         this.disabled = false;
+        this.showChips = false;
+        this.showAllSelectionBtn = false;
+        this.showPlaceholder = false;
+        this.showExpandedSelectionActions = false;
+        this.showSelectAllCheckbox = false;
+        this.chipsContainerClasses = {
+            "-two": false,
+            "-three": false,
+            "-four": false,
+            "-many": false
+        };
         this._destroy = inject(DestroyRef);
         this.ITEMS_PER_PAGE = 40;
         this._pageNumber = 1;
@@ -547,37 +568,59 @@ class AutocompleteComponent {
         this.valueProp = '';
         this.options = [];
         this.placeholder = '';
-        this.emptyMessage = 'Nenhuma opção';
+        this.emptyMessage = 'NO_OPTIONS';
         this.selectAll = false;
         this.onChange = (_) => { };
         this.onTouched = () => { };
         this.selectionForm = formBuilder.group({});
     }
     ngAfterViewInit() {
+        this.checkAllValue = Object.keys(this.selectionForm.value).length === this.options.length
+            && this.options.every(value => this.selectionForm.value[value[this.valueProp]]);
         this.handleInputChange();
-        this.handleSelectionChange();
-        this.checkAllValue = this.selectAll;
+        this.listenSelectionChange();
     }
     handleInputChange() {
-        this.inputControl.valueChanges.pipe(takeUntilDestroyed(this._destroy), startWith(''), tap(() => {
+        this.inputControl.valueChanges.pipe(takeUntilDestroyed(this._destroy), debounceTime(300), startWith(''), tap(() => {
             this._pageNumber = 1;
             this._reachedEnd = false;
             this.paginatedFilteredOptions = [];
         }), map(value => this.filterFn ? this.filterFn(value || '') : [])).subscribe(items => {
             this.filteredOptions = items;
-            this.getMoreItems(0);
+            this.getMoreItems();
         });
     }
-    handleSelectionChange() {
+    listenSelectionChange() {
+        if (Object.keys(this.selectionForm.value).length) {
+            this.selection = this.options.filter(option => this.selectionForm.value[option[this.valueProp]]);
+            this.updateValidation();
+            this.change.detectChanges();
+        }
         this.selectionForm
             .valueChanges
-            .pipe(takeUntilDestroyed(this._destroy), debounceTime(100))
+            .pipe(takeUntilDestroyed(this._destroy))
             .subscribe((values) => {
             this.checkAllValue = Object.keys(values).every(value => values[value]);
-            this.onChange(this.options.filter(option => values[option[this.valueProp]]));
+            this.handleSelectionChange(values);
+            this.onChange(this.selection);
             this.onTouched();
         });
     }
+    handleSelectionChange(values) {
+        this.selection = this.options.filter(option => values[option[this.valueProp]]);
+        if (!this.chipsCollapsed) {
+            this.chipsCollapsed = this.selection.length < 2;
+        }
+        this.updateValidation();
+    }
+    updateChipsContainerClasses() {
+        this.chipsContainerClasses = {
+            "-two": this.selectedOptions.length === 2,
+            "-three": this.selectedOptions.length === 3,
+            "-four": this.selectedOptions.length === 4,
+            "-many": this.selectedOptions.length >= 5
+        };
+    }
     handleOptionSelected(item) {
         this.selectedOption = item;
         this.onChange(this.selectedOption);
@@ -585,9 +628,21 @@ class AutocompleteComponent {
         this.change.detectChanges();
     }
     handleAutocompleteClick() {
-        this.closed
-            ? this.showOptions()
-            : this.hideOptions();
+        if (!this.disabled) {
+            this.chipsCollapsed = true;
+            this.closed
+                ? this.showOptions()
+                : this.hideOptions();
+        }
+        this.updateValidation();
+        this.updateChipsContainerClasses();
+        this.change.detectChanges();
+    }
+    handleChipsListActionClick() {
+        this.chipsCollapsed = !this.chipsCollapsed;
+        this.updateValidation();
+        this.updateChipsContainerClasses();
+        this.change.detectChanges();
     }
     showOptions() {
         this.closed = false;
@@ -596,6 +651,9 @@ class AutocompleteComponent {
             this._portal = new TemplatePortal(this.overlayContent, this.viewContainerRef);
         }
         this._overlayRef?.attach(this._portal);
+        this.updateValidation();
+        if (this.paginatedFilteredOptions.length === 0)
+            this.getMoreItems();
     }
     getOverlayConfig(wrapper) {
         return this.overlay.create({
@@ -615,33 +673,34 @@ class AutocompleteComponent {
         this.chipsCollapsed = true;
         this._overlayRef?.detach();
         this.change.detectChanges();
+        this._pageNumber = 1;
+        this.paginatedFilteredOptions = [];
+        this.updateValidation();
+        this.change.detectChanges();
     }
     handleClick(event) {
         if (!this.closed
             && !this.input?.nativeElement.contains(event.target)
             && !this.list?.nativeElement.contains(event.target)) {
             this.hideOptions();
+            this.updateValidation();
+            this.change.detectChanges();
         }
     }
     get selectedOptions() {
         if (!this.multiple)
             return this.selectedOption ? [this.selectedOption] : [];
-        const selected = this.options
-            .filter(item => this.selectionForm.value[item[this.valueProp]]);
         return this.chipsCollapsed
-            ? selected.slice(0, 1)
-            : selected;
+            ? this.selection.slice(0, 1)
+            : this.selection;
     }
-    handleSelectAll(event) {
-        const checked = event.target.checked;
+    handleSelectAll(checked) {
         this.selectAllOptions(checked);
+        this.updateValidation();
+        this.change.detectChanges();
     }
     selectAllOptions(selected) {
-        this.options.forEach(option => {
-            if (this.selectionForm.value[option[this.valueProp]] === undefined) {
-                this.selectionForm.addControl(option[this.valueProp], this.formBuilder.control(selected), { emitEvent: false });
-            }
-        });
+        this.updateFormControls(this.options, this.selectionForm, this.formBuilder, this.valueProp, selected);
         const newValues = Object.keys(this.selectionForm.controls)
             .reduce((acc, curr) => {
             acc[curr] = selected;
@@ -649,7 +708,6 @@ class AutocompleteComponent {
         }, {});
         this.selectionForm.patchValue(newValues);
         this.selectionForm.updateValueAndValidity();
-        this.change.detectChanges();
     }
     handleChipAction(option) {
         if (this.multiple) {
@@ -658,43 +716,62 @@ class AutocompleteComponent {
         else {
             this.selectedOption = null;
         }
+        this.updateChipsContainerClasses();
+        this.updateValidation();
+        this.change.detectChanges();
     }
     display(option) {
         return this.displayFn && this.displayFn(option);
     }
-    getMoreItems(scrollIndex) {
-        if (!this._reachedEnd && (!this.paginatedFilteredOptions.length
-            || ((scrollIndex + 5) >= (this.ITEMS_PER_PAGE * (this._pageNumber - 1 || 1))))) {
-            const nextPageItems = this.filteredOptions.slice(this.ITEMS_PER_PAGE * (this._pageNumber - 1), this.ITEMS_PER_PAGE * this._pageNumber);
-            if (nextPageItems.length) {
-                nextPageItems.forEach(item => {
-                    if (!this.selectionForm.value[item[this.valueProp]]) {
-                        this.selectionForm.addControl(item[this.valueProp], this.formBuilder.control(this.checkAllValue));
-                    }
-                });
-                this.paginatedFilteredOptions = [...this.paginatedFilteredOptions, ...nextPageItems];
-                this._pageNumber += 1;
+    getMoreItems() {
+        const nextPageItems = this.filteredOptions.slice(this.ITEMS_PER_PAGE * (this._pageNumber - 1), this.ITEMS_PER_PAGE * this._pageNumber);
+        if (nextPageItems.length) {
+            this.updateFormControls(nextPageItems, this.selectionForm, this.formBuilder, this.valueProp, this.checkAllValue);
+            this.selectionForm.updateValueAndValidity();
+            this.paginatedFilteredOptions = [...this.paginatedFilteredOptions, ...nextPageItems];
+            this._pageNumber += 1;
+        }
+        else {
+            this._reachedEnd = true;
+        }
+        this.updateValidation();
+        this.change.detectChanges();
+    }
+    updateFormControls(items, form, fb, propValue, checked) {
+        items.forEach(item => {
+            if (form.value[item[propValue]] === undefined) {
+                form.addControl(item[propValue], fb.control(checked), { emitEvent: false });
             }
-            else {
-                this._reachedEnd = true;
+            else if (!form.value[item[propValue]]) {
+                form.get(item[propValue])?.setValue(checked, { emitEvent: false });
             }
-        }
+        });
+    }
+    updateValidation() {
+        this.showChips = Boolean(this.selectedOptions.length) && this.closed;
+        this.showAllSelectionBtn = this.multiple && Boolean(this.selection.length > 1) && this.chipsCollapsed;
+        this.showPlaceholder = this.closed && !this.selectedOptions.length;
+        this.showExpandedSelectionActions = this.multiple && !this.chipsCollapsed;
+        this.showSelectAllCheckbox = Boolean(this.paginatedFilteredOptions.length) && this.selectAll;
     }
     // Control Value Accessor
     writeValue(obj) {
-        if (!obj || (Array.isArray(obj) && !obj.length) && this.selectAll) {
+        this.selection = [];
+        if ((!obj || (Array.isArray(obj) && !obj.length)) && this.selectAll) {
             this.selectAllOptions(this.selectAll);
             return;
         }
         if (this.multiple && Array.isArray(obj)) {
-            obj.forEach((item) => {
-                this.selectionForm.addControl(item[this.valueProp], this.formBuilder.control(true), { emitEvent: false });
-            });
+            this.selectionForm.reset({}, { emitEvent: false });
+            this.updateFormControls(obj, this.selectionForm, this.formBuilder, this.valueProp, true);
             this.selectionForm.updateValueAndValidity();
         }
         else {
             this.selectedOption = obj;
         }
+        if (this.multiple && !this.selection.length) {
+            this.handleSelectionChange(obj);
+        }
         this.change.detectChanges();
     }
     registerOnChange(fn) {
@@ -707,11 +784,11 @@ class AutocompleteComponent {
         this.disabled = isDisabled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i1$1.FormBuilder }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AutocompleteComponent, selector: "ask-autocomplete", inputs: { filterFn: "filterFn", displayFn: "displayFn", multiple: "multiple", valueProp: "valueProp", options: "options", placeholder: "placeholder", emptyMessage: "emptyMessage", selectAll: "selectAll" }, host: { listeners: { "window:mousedown": "handleClick($event)" } }, providers: [valueAccessor], viewQueries: [{ propertyName: "input", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "overlayContent", first: true, predicate: ["overlayContent"], descendants: true }], ngImport: i0, template: "<div class=\"autocomplete-wrapper\"\n     [class.-closed]=\"closed\"\n     [class.-opened]=\"!closed\"\n     #wrapper\n>\n  <div class=\"autocomplete\" #autocomplete>\n    <input class=\"search-field\"\n           *ngIf=\"!closed; else selectionOrPlaceholder\"\n           [formControl]=\"inputControl\"\n           [placeholder]=\"placeholder\"/>\n    <ng-template #selectionOrPlaceholder>\n      <ng-container *ngIf=\"selectedOptions.length && closed\">\n        <div class=\"chip-list\" [class.-collapsed]=\"chipsCollapsed\">\n          <ask-chips [style.max-width]=\"chipsCollapsed ? '75%' : '100%'\"\n                     [showAction]=\"true\"\n                     *ngFor=\"let option of selectedOptions\"\n                     (action)=\"handleChipAction(option)\">\n            {{display(option)}}\n          </ask-chips>\n          <span class=\"expand\" data-testid=\"see-more\" *ngIf=\"multiple\" (click)=\"chipsCollapsed = !chipsCollapsed\">\n            {{chipsCollapsed ? 'Ver mais' : 'Ver menos'}}\n          </span>\n        </div>\n      </ng-container>\n      <span data-testid=\"placeholder\" *ngIf=\"closed && !selectedOptions.length\">{{placeholder}}</span>\n    </ng-template>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\"\n          (click)=\"!disabled && handleAutocompleteClick()\">{{closed ? \"expand_more\" : \"expand_less\"}}</span>\n  </div>\n</div>\n\n<ng-template #overlayContent>\n  <div #list class=\"menu-container\" [class.-multiple]=\"multiple\">\n    <ng-container *ngIf=\"!multiple; else multipleSelection\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"36\" class=\"list\" (scrolledIndexChange)=\"getMoreItems($event)\">\n        <ng-container *cdkVirtualFor=\"let option of paginatedFilteredOptions\">\n          <div class=\"option-item\"\n               [class.-highlighted]=\"selectedOption && selectedOption[valueProp] === option[valueProp]\"\n               (click)=\"handleOptionSelected(option)\">\n            <p class=\"text\">{{display(option)}}</p>\n          </div>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    </ng-container>\n    <ng-template #multipleSelection>\n      <div class=\"option-item\" *ngIf=\"paginatedFilteredOptions.length && selectAll\">\n        <ask-checkbox (change)=\"handleSelectAll($event)\" [(ngModel)]=\"checkAllValue\">Selecionar todas</ask-checkbox>\n      </div>\n      <form data-testid=\"options-form\" *ngIf=\"selectionForm.controls\" [formGroup]=\"selectionForm\">\n        <cdk-virtual-scroll-viewport [itemSize]=\"36\" class=\"list-box\" (scrolledIndexChange)=\"getMoreItems($event)\">\n          <ng-container *cdkVirtualFor=\"let option of paginatedFilteredOptions\">\n            <div class=\"option-item\">\n              <ask-checkbox [formControlName]=\"option[valueProp]\">{{display(option)}}</ask-checkbox>\n            </div>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      </form>\n    </ng-template>\n    <span class=\"empty\" *ngIf=\"!filteredOptions.length\">{{emptyMessage}}</span>\n  </div>\n</ng-template>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis,.option-item>.text,.option-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;align-items:end;justify-content:space-between}.autocomplete-wrapper.-opened{border-bottom-right-radius:0;border-bottom-left-radius:0}.autocomplete-wrapper.-closed{transition:all ease-in-out .3s;min-height:54px}.search-field{font-style:inherit;width:100%;border:none;height:100%}.search-field:focus{border:none;outline:none}.search-field::placeholder{opacity:.6}.option-item{display:flex;flex-direction:row;align-items:center;padding-left:16px;height:36px;width:100%}.option-item.-highlighted{background-color:#e4e7eb}.option-item:hover{cursor:pointer;background-color:#f5f7fa}.chip-list{overflow:hidden;display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:.5rem;flex:1}.chip-list.-collapsed{height:26px}.chip-list>.expand{color:#616e7c;text-decoration:underline;font-size:12px}.chip-list>.expand:hover{cursor:pointer}.btn-expand:hover{cursor:pointer}.btn-expand.-disabled{color:#7b8794}.list-box,.menu-container>.list{min-height:148px}.menu-container{width:100%;background:white;max-height:165px;overflow-y:auto;border:1px solid #CBD2D9;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top:none;padding:8px 0}.menu-container>.empty{text-align:center;display:inline-block;width:100%}.menu-container.-multiple{max-height:210px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ChipsComponent, selector: "ask-chips", inputs: ["appearance", "showAction", "size"], outputs: ["action"] }, { kind: "component", type: CheckboxComponent, selector: "ask-checkbox", inputs: ["value", "disabled"], outputs: ["valueChange", "change", "click", "focus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: AutocompleteComponent, selector: "ask-autocomplete", inputs: { filterFn: "filterFn", displayFn: "displayFn", multiple: "multiple", valueProp: "valueProp", options: "options", placeholder: "placeholder", emptyMessage: "emptyMessage", selectAll: "selectAll" }, host: { listeners: { "window:mousedown": "handleClick($event)" } }, providers: [valueAccessor], viewQueries: [{ propertyName: "input", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "list", first: true, predicate: ["list"], descendants: true }, { propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "overlayContent", first: true, predicate: ["overlayContent"], descendants: true }, { propertyName: "listViewport", first: true, predicate: ["listViewport"], descendants: true }], ngImport: i0, template: "<div class=\"autocomplete-wrapper\"\n     [class.-closed]=\"closed\"\n     [class.-opened]=\"!closed\"\n     #wrapper\n>\n  <div class=\"autocomplete\" #autocomplete>\n    <input class=\"search-field\"\n           *ngIf=\"!closed; else selectionOrPlaceholder\"\n           [formControl]=\"inputControl\"\n           [placeholder]=\"placeholder\"/>\n    <ng-template #selectionOrPlaceholder>\n      <ng-container *ngIf=\"showChips\">\n        <div class=\"chip-list\" [class.-collapsed]=\"chipsCollapsed\"\n             [ngClass]=\"chipsContainerClasses\">\n          <ask-chips [style.max-width]=\"chipsCollapsed ? '85%' : '100%'\"\n                     [showAction]=\"true\"\n                     *ngFor=\"let option of selectedOptions\"\n                     (action)=\"handleChipAction(option)\">\n            {{display(option)}}\n          </ask-chips>\n          <span class=\"expand\" data-testid=\"see-more\" *ngIf=\"showAllSelectionBtn\"\n                (click)=\"handleChipsListActionClick()\">\n            +{{selection.length - 1}}\n          </span>\n        </div>\n      </ng-container>\n      <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"closed && !selectedOptions.length\"\n            (click)=\"handleAutocompleteClick()\">{{placeholder}}</span>\n    </ng-template>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\"\n          (click)=\"handleAutocompleteClick()\"\n          *ngIf=\"chipsCollapsed\">\n      {{closed ? \"expand_more\" : \"expand_less\"}}\n    </span>\n  </div>\n  <div class=\"actions\" *ngIf=\"showExpandedSelectionActions\">\n    <span class=\"see-more\" data-testid=\"see-less\"\n          (click)=\"handleChipsListActionClick()\">\n        {{'SEE_LESS' | translate}}\n    </span>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\"\n          (click)=\"handleAutocompleteClick()\">\n      {{closed ? \"expand_more\" : \"expand_less\"}}\n    </span>\n  </div>\n</div>\n\n<ng-template #overlayContent>\n  <div #list class=\"menu-container\" [class.-multiple]=\"multiple\">\n    <ng-container *ngIf=\"!multiple; else multipleSelection\">\n      <div class=\"list\" #listViewport>\n        <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n          <div class=\"option-item\"\n               [class.-highlighted]=\"selectedOption && selectedOption[valueProp] === option[valueProp]\"\n               (click)=\"handleOptionSelected(option)\">\n            <p class=\"text\">{{display(option)}}</p>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n    <ng-template #multipleSelection>\n      <div class=\"option-item\" *ngIf=\"showSelectAllCheckbox\">\n        <ask-checkbox (valueChange)=\"handleSelectAll($event)\" [(ngModel)]=\"checkAllValue\">Selecionar todas</ask-checkbox>\n      </div>\n      <form data-testid=\"options-form\" *ngIf=\"selectionForm.controls\" [formGroup]=\"selectionForm\">\n        <div class=\"list-box\" #listViewport>\n          <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n            <div class=\"option-item\">\n              <ask-checkbox [formControlName]=\"option[valueProp]\">{{display(option)}}</ask-checkbox>\n            </div>\n          </ng-container>\n        </div>\n      </form>\n    </ng-template>\n    <span class=\"empty\" *ngIf=\"!filteredOptions.length\">{{emptyMessage | translate}}</span>\n  </div>\n</ng-template>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis,.option-item>.text,.option-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between}.autocomplete-wrapper>.actions{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.autocomplete-wrapper.-opened{border-bottom-right-radius:0;border-bottom-left-radius:0}.autocomplete-wrapper.-closed{transition:all ease-in-out .3s;min-height:54px}.search-field{font-style:inherit;width:100%;border:none;height:100%}.search-field:focus{border:none;outline:none}.search-field::placeholder{opacity:.6}.option-item{display:flex;flex-direction:row;align-items:center;padding-left:1rem;height:36px;width:100%}.option-item.-highlighted{background-color:#e4e7eb}.option-item:hover{cursor:pointer;background-color:#f5f7fa}.see-more,.chip-list>.expand{color:#616e7c;text-decoration:underline;font-size:.875rem;font-weight:500}.see-more:hover,.chip-list>.expand:hover{cursor:pointer}.chip-list{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:.5rem;flex:1;max-height:155px;transition:all ease-in-out .3s}.chip-list.-collapsed{height:31px;overflow:hidden;transition:none}.chip-list.-two{height:62px}.chip-list.-three{height:93px}.chip-list.-four{height:124px}.chip-list.-many{overflow-y:auto;height:155px}.btn-expand:hover{cursor:pointer}.btn-expand.-disabled{color:#7b8794}.empty-placeholder:hover{cursor:pointer}.list-box,.menu-container>.list{min-height:1rem;overflow-y:auto}.menu-container{width:100%;background:white;max-height:165px;overflow-y:auto;border:1px solid #CBD2D9;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top:none;padding:8px 0}.menu-container>.empty{text-align:center;display:inline-block;width:100%}.menu-container.-multiple{max-height:210px}\n"], dependencies: [{ 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: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChipsComponent, selector: "ask-chips", inputs: ["appearance", "showAction", "size"], outputs: ["action"] }, { kind: "component", type: CheckboxComponent, selector: "ask-checkbox", inputs: ["value", "disabled"], outputs: ["valueChange", "change", "click", "focus"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ask-autocomplete', providers: [valueAccessor], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"autocomplete-wrapper\"\n     [class.-closed]=\"closed\"\n     [class.-opened]=\"!closed\"\n     #wrapper\n>\n  <div class=\"autocomplete\" #autocomplete>\n    <input class=\"search-field\"\n           *ngIf=\"!closed; else selectionOrPlaceholder\"\n           [formControl]=\"inputControl\"\n           [placeholder]=\"placeholder\"/>\n    <ng-template #selectionOrPlaceholder>\n      <ng-container *ngIf=\"selectedOptions.length && closed\">\n        <div class=\"chip-list\" [class.-collapsed]=\"chipsCollapsed\">\n          <ask-chips [style.max-width]=\"chipsCollapsed ? '75%' : '100%'\"\n                     [showAction]=\"true\"\n                     *ngFor=\"let option of selectedOptions\"\n                     (action)=\"handleChipAction(option)\">\n            {{display(option)}}\n          </ask-chips>\n          <span class=\"expand\" data-testid=\"see-more\" *ngIf=\"multiple\" (click)=\"chipsCollapsed = !chipsCollapsed\">\n            {{chipsCollapsed ? 'Ver mais' : 'Ver menos'}}\n          </span>\n        </div>\n      </ng-container>\n      <span data-testid=\"placeholder\" *ngIf=\"closed && !selectedOptions.length\">{{placeholder}}</span>\n    </ng-template>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\"\n          (click)=\"!disabled && handleAutocompleteClick()\">{{closed ? \"expand_more\" : \"expand_less\"}}</span>\n  </div>\n</div>\n\n<ng-template #overlayContent>\n  <div #list class=\"menu-container\" [class.-multiple]=\"multiple\">\n    <ng-container *ngIf=\"!multiple; else multipleSelection\">\n      <cdk-virtual-scroll-viewport [itemSize]=\"36\" class=\"list\" (scrolledIndexChange)=\"getMoreItems($event)\">\n        <ng-container *cdkVirtualFor=\"let option of paginatedFilteredOptions\">\n          <div class=\"option-item\"\n               [class.-highlighted]=\"selectedOption && selectedOption[valueProp] === option[valueProp]\"\n               (click)=\"handleOptionSelected(option)\">\n            <p class=\"text\">{{display(option)}}</p>\n          </div>\n        </ng-container>\n      </cdk-virtual-scroll-viewport>\n    </ng-container>\n    <ng-template #multipleSelection>\n      <div class=\"option-item\" *ngIf=\"paginatedFilteredOptions.length && selectAll\">\n        <ask-checkbox (change)=\"handleSelectAll($event)\" [(ngModel)]=\"checkAllValue\">Selecionar todas</ask-checkbox>\n      </div>\n      <form data-testid=\"options-form\" *ngIf=\"selectionForm.controls\" [formGroup]=\"selectionForm\">\n        <cdk-virtual-scroll-viewport [itemSize]=\"36\" class=\"list-box\" (scrolledIndexChange)=\"getMoreItems($event)\">\n          <ng-container *cdkVirtualFor=\"let option of paginatedFilteredOptions\">\n            <div class=\"option-item\">\n              <ask-checkbox [formControlName]=\"option[valueProp]\">{{display(option)}}</ask-checkbox>\n            </div>\n          </ng-container>\n        </cdk-virtual-scroll-viewport>\n      </form>\n    </ng-template>\n    <span class=\"empty\" *ngIf=\"!filteredOptions.length\">{{emptyMessage}}</span>\n  </div>\n</ng-template>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis,.option-item>.text,.option-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;align-items:end;justify-content:space-between}.autocomplete-wrapper.-opened{border-bottom-right-radius:0;border-bottom-left-radius:0}.autocomplete-wrapper.-closed{transition:all ease-in-out .3s;min-height:54px}.search-field{font-style:inherit;width:100%;border:none;height:100%}.search-field:focus{border:none;outline:none}.search-field::placeholder{opacity:.6}.option-item{display:flex;flex-direction:row;align-items:center;padding-left:16px;height:36px;width:100%}.option-item.-highlighted{background-color:#e4e7eb}.option-item:hover{cursor:pointer;background-color:#f5f7fa}.chip-list{overflow:hidden;display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:.5rem;flex:1}.chip-list.-collapsed{height:26px}.chip-list>.expand{color:#616e7c;text-decoration:underline;font-size:12px}.chip-list>.expand:hover{cursor:pointer}.btn-expand:hover{cursor:pointer}.btn-expand.-disabled{color:#7b8794}.list-box,.menu-container>.list{min-height:148px}.menu-container{width:100%;background:white;max-height:165px;overflow-y:auto;border:1px solid #CBD2D9;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top:none;padding:8px 0}.menu-container>.empty{text-align:center;display:inline-block;width:100%}.menu-container.-multiple{max-height:210px}\n"] }]
+            args: [{ selector: 'ask-autocomplete', providers: [valueAccessor], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"autocomplete-wrapper\"\n     [class.-closed]=\"closed\"\n     [class.-opened]=\"!closed\"\n     #wrapper\n>\n  <div class=\"autocomplete\" #autocomplete>\n    <input class=\"search-field\"\n           *ngIf=\"!closed; else selectionOrPlaceholder\"\n           [formControl]=\"inputControl\"\n           [placeholder]=\"placeholder\"/>\n    <ng-template #selectionOrPlaceholder>\n      <ng-container *ngIf=\"showChips\">\n        <div class=\"chip-list\" [class.-collapsed]=\"chipsCollapsed\"\n             [ngClass]=\"chipsContainerClasses\">\n          <ask-chips [style.max-width]=\"chipsCollapsed ? '85%' : '100%'\"\n                     [showAction]=\"true\"\n                     *ngFor=\"let option of selectedOptions\"\n                     (action)=\"handleChipAction(option)\">\n            {{display(option)}}\n          </ask-chips>\n          <span class=\"expand\" data-testid=\"see-more\" *ngIf=\"showAllSelectionBtn\"\n                (click)=\"handleChipsListActionClick()\">\n            +{{selection.length - 1}}\n          </span>\n        </div>\n      </ng-container>\n      <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"closed && !selectedOptions.length\"\n            (click)=\"handleAutocompleteClick()\">{{placeholder}}</span>\n    </ng-template>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\"\n          (click)=\"handleAutocompleteClick()\"\n          *ngIf=\"chipsCollapsed\">\n      {{closed ? \"expand_more\" : \"expand_less\"}}\n    </span>\n  </div>\n  <div class=\"actions\" *ngIf=\"showExpandedSelectionActions\">\n    <span class=\"see-more\" data-testid=\"see-less\"\n          (click)=\"handleChipsListActionClick()\">\n        {{'SEE_LESS' | translate}}\n    </span>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\"\n          (click)=\"handleAutocompleteClick()\">\n      {{closed ? \"expand_more\" : \"expand_less\"}}\n    </span>\n  </div>\n</div>\n\n<ng-template #overlayContent>\n  <div #list class=\"menu-container\" [class.-multiple]=\"multiple\">\n    <ng-container *ngIf=\"!multiple; else multipleSelection\">\n      <div class=\"list\" #listViewport>\n        <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n          <div class=\"option-item\"\n               [class.-highlighted]=\"selectedOption && selectedOption[valueProp] === option[valueProp]\"\n               (click)=\"handleOptionSelected(option)\">\n            <p class=\"text\">{{display(option)}}</p>\n          </div>\n        </ng-container>\n      </div>\n    </ng-container>\n    <ng-template #multipleSelection>\n      <div class=\"option-item\" *ngIf=\"showSelectAllCheckbox\">\n        <ask-checkbox (valueChange)=\"handleSelectAll($event)\" [(ngModel)]=\"checkAllValue\">Selecionar todas</ask-checkbox>\n      </div>\n      <form data-testid=\"options-form\" *ngIf=\"selectionForm.controls\" [formGroup]=\"selectionForm\">\n        <div class=\"list-box\" #listViewport>\n          <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n            <div class=\"option-item\">\n              <ask-checkbox [formControlName]=\"option[valueProp]\">{{display(option)}}</ask-checkbox>\n            </div>\n          </ng-container>\n        </div>\n      </form>\n    </ng-template>\n    <span class=\"empty\" *ngIf=\"!filteredOptions.length\">{{emptyMessage | translate}}</span>\n  </div>\n</ng-template>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis,.option-item>.text,.option-item{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between}.autocomplete-wrapper>.actions{width:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}.autocomplete-wrapper.-opened{border-bottom-right-radius:0;border-bottom-left-radius:0}.autocomplete-wrapper.-closed{transition:all ease-in-out .3s;min-height:54px}.search-field{font-style:inherit;width:100%;border:none;height:100%}.search-field:focus{border:none;outline:none}.search-field::placeholder{opacity:.6}.option-item{display:flex;flex-direction:row;align-items:center;padding-left:1rem;height:36px;width:100%}.option-item.-highlighted{background-color:#e4e7eb}.option-item:hover{cursor:pointer;background-color:#f5f7fa}.see-more,.chip-list>.expand{color:#616e7c;text-decoration:underline;font-size:.875rem;font-weight:500}.see-more:hover,.chip-list>.expand:hover{cursor:pointer}.chip-list{display:flex;align-items:center;flex-direction:row;flex-wrap:wrap;gap:.5rem;flex:1;max-height:155px;transition:all ease-in-out .3s}.chip-list.-collapsed{height:31px;overflow:hidden;transition:none}.chip-list.-two{height:62px}.chip-list.-three{height:93px}.chip-list.-four{height:124px}.chip-list.-many{overflow-y:auto;height:155px}.btn-expand:hover{cursor:pointer}.btn-expand.-disabled{color:#7b8794}.empty-placeholder:hover{cursor:pointer}.list-box,.menu-container>.list{min-height:1rem;overflow-y:auto}.menu-container{width:100%;background:white;max-height:165px;overflow-y:auto;border:1px solid #CBD2D9;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top:none;padding:8px 0}.menu-container>.empty{text-align:center;display:inline-block;width:100%}.menu-container.-multiple{max-height:210px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ["autocomplete"]
@@ -724,6 +801,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
             }], overlayContent: [{
                 type: ViewChild,
                 args: ['overlayContent']
+            }], listViewport: [{
+                type: ViewChild,
+                args: ['listViewport']
             }], filterFn: [{
                 type: Input
             }], displayFn: [{
@@ -1087,7 +1167,7 @@ class DatePickerComponent {
         this.onTouch = fn;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerComponent, selector: "ask-date-picker", inputs: { date: "date", isRange: "isRange", periodsFilter: "periodsFilter" }, outputs: { dateChange: "dateChange", close: "close" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"date-picker-container\">\n  <main class=\"main-content\">\n    <div\n      class=\"periods-list\"\n      *ngIf=\"isRange\"\n      [ngClass]=\"{ 'show-divider': isCustomRange }\"\n    >\n      <button\n        *ngFor=\"let period of filteredPeriods\"\n        type=\"button\"\n        class=\"period\"\n        [ngClass]=\"{ 'selected': period.selected }\"\n        (click)=\"selectPeriod(period)\"\n      >\n        {{ period.label.toString() | translate }}\n      </button>\n    </div>\n\n    <ask-date-picker-calendar\n      *ngIf=\"!isRange || (isRange && isCustomRange)\"\n      [date]=\"date\"\n      (dateChange)=\"handleDateChange($event)\"\n      [isRange]=\"isRange\"\n    ></ask-date-picker-calendar>\n  </main>\n\n  <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n    <div class=\"date-display\">{{ dateDisplay }}</div>\n\n    <div class=\"button-tray\">\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'secondary'\"\n        (click)=\"handleCancelClick()\"\n      >\n        {{ 'CANCEL' | translate }}\n      </ask-button>\n\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'primary'\"\n        (click)=\"emitValue()\"\n      >\n        {{ 'APPLY' | translate }}\n      </ask-button>\n    </div>\n  </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"], dependencies: [{ 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: "component", type: ButtonComponent, selector: "ask-button", inputs: ["label", "size", "type", "rounded", "disabled", "labelSide", "loading"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "date"], outputs: ["dateChange"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerComponent, selector: "ask-date-picker", inputs: { date: "date", isRange: "isRange", periodsFilter: "periodsFilter" }, outputs: { dateChange: "dateChange", close: "close" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"date-picker-container\">\n  <main class=\"main-content\">\n    <div\n      class=\"periods-list\"\n      *ngIf=\"isRange\"\n      [ngClass]=\"{ 'show-divider': isCustomRange }\"\n    >\n      <button\n        *ngFor=\"let period of filteredPeriods\"\n        type=\"button\"\n        class=\"period\"\n        [ngClass]=\"{ 'selected': period.selected }\"\n        (click)=\"selectPeriod(period)\"\n      >\n        {{ period.label.toString() | translate }}\n      </button>\n    </div>\n\n    <ask-date-picker-calendar\n      *ngIf=\"!isRange || (isRange && isCustomRange)\"\n      [date]=\"date\"\n      (dateChange)=\"handleDateChange($event)\"\n      [isRange]=\"isRange\"\n    ></ask-date-picker-calendar>\n  </main>\n\n  <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n    <div class=\"date-display\">{{ dateDisplay }}</div>\n\n    <div class=\"button-tray\">\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'secondary'\"\n        (click)=\"handleCancelClick()\"\n      >\n        {{ 'CANCEL' | translate }}\n      </ask-button>\n\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'primary'\"\n        (click)=\"emitValue()\"\n      >\n        {{ 'APPLY' | translate }}\n      </ask-button>\n    </div>\n  </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"], dependencies: [{ 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: "component", type: ButtonComponent, selector: "ask-button", inputs: ["label", "size", "type", "rounded", "disabled", "labelSide", "loading"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "date"], outputs: ["dateChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
@@ -1205,8 +1285,7 @@ class AsksuiteCitrusModule {
             ReactiveFormsModule,
             CdkOverlayOrigin,
             CdkConnectedOverlay,
-            OverlayModule,
-            ScrollingModule, i4$1.TranslateModule, NgxSkeletonLoaderModule], exports: [ButtonComponent,
+            OverlayModule, i6.TranslateModule, NgxSkeletonLoaderModule], exports: [ButtonComponent,
             InputComponent,
             SelectComponent,
             BoxComponent,
@@ -1224,7 +1303,6 @@ class AsksuiteCitrusModule {
             FormsModule,
             ReactiveFormsModule,
             OverlayModule,
-            ScrollingModule,
             TranslateModule.forChild(),
             NgxSkeletonLoaderModule] }); }
 }
@@ -1255,7 +1333,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         CdkOverlayOrigin,
                         CdkConnectedOverlay,
                         OverlayModule,
-                        ScrollingModule,
                         TranslateModule.forChild(),
                         NgxSkeletonLoaderModule,
                     ],