asksuite-citrus 0.8.4 → 0.9.1

package/fesm2022/asksuite-citrus.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, forwardRef, ViewChild, HostListener, Directive, ChangeDetectionStrategy, inject, DestroyRef, HostBinding, Inject, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, forwardRef, ViewChild, HostListener, Directive, ChangeDetectionStrategy, inject, DestroyRef, HostBinding, Inject, InjectionToken, NgModule, Injector, Injectable } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/material/tooltip';
@@ -10,7 +10,7 @@ import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@angular/cdk/overlay';
 import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
-import { debounceTime, startWith, tap, map } from 'rxjs';
+import { debounceTime, tap, map } from 'rxjs';
 import * as i8 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import moment from 'moment';
@@ -683,6 +683,7 @@ class AutocompleteComponent {
             "-four": false,
             "-many": false
         };
+        this.optionsSelected = {};
         this._destroy = inject(DestroyRef);
         this.ITEMS_PER_PAGE = 40;
         this._pageNumber = 1;
@@ -696,16 +697,13 @@ class AutocompleteComponent {
         this.allOptionsSelectedText = null;
         this.onChange = (_) => { };
         this.onTouched = () => { };
-        this.selectionForm = formBuilder.group({});
     }
     ngAfterViewInit() {
-        this.checkAllValue = this.isAllOptionsSelected();
+        this.checkAllValue = this.isAllOptionsSelected;
         this.handleInputChange();
-        this.listenSelectionChange();
     }
-    isAllOptionsSelected() {
-        return Object.keys(this.selectionForm.value).length === this.options.length
-            && this.options.every(value => this.selectionForm.value[value[this.valueProp]]);
+    get isAllOptionsSelected() {
+        return this.selection.length === this.options.length;
     }
     ngOnChanges(changes) {
         if (changes['options']) {
@@ -713,12 +711,11 @@ class AutocompleteComponent {
             this._reachedEnd = false;
             this.paginatedFilteredOptions = [];
             this.filteredOptions = changes['options'].currentValue;
-            this.checkAllValue = this.selection.length === this.filteredOptions.length;
-            this.getMoreItems();
+            this.updateValidation();
         }
     }
     handleInputChange() {
-        this.inputControl.valueChanges.pipe(takeUntilDestroyed(this._destroy), debounceTime(300), startWith(''), tap(() => {
+        this.inputControl.valueChanges.pipe(takeUntilDestroyed(this._destroy), debounceTime(300), tap(() => {
             this._pageNumber = 1;
             this._reachedEnd = false;
             this.paginatedFilteredOptions = [];
@@ -727,28 +724,14 @@ class AutocompleteComponent {
             this.getMoreItems();
         });
     }
-    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))
-            .subscribe((values) => {
-            this.handleSelectionChange(this.options.filter(option => values[option[this.valueProp]]));
-            this.onChange(this.selection);
-            this.onTouched();
-            this.checkAllValue = this.selection.length === this.options.length;
-        });
-    }
     handleSelectionChange(values) {
         this.selection = values;
+        this.checkAllValue = this.isAllOptionsSelected;
         if (!this.chipsCollapsed) {
             this.chipsCollapsed = this.selection.length < 2;
         }
         this.updateValidation();
+        this.change.detectChanges();
     }
     updateChipsContainerClasses() {
         this.chipsContainerClasses = {
@@ -822,7 +805,6 @@ class AutocompleteComponent {
             && !this.wrapper?.nativeElement.contains(event.target)
             && !this.list?.nativeElement.contains(event.target)) {
             this.hideOptions();
-            this.updateValidation();
             this.change.detectChanges();
         }
     }
@@ -835,22 +817,32 @@ class AutocompleteComponent {
     }
     handleSelectAll(checked) {
         this.selectAllOptions(checked);
+        this.selection = checked ? this.options : [];
+        this.onChange(this.selection);
+        this.updateValidation();
+        this.change.detectChanges();
+    }
+    valueChange(option, value) {
+        this.optionsSelected[option[this.valueProp]] = value;
+        this.selection = this.options.filter(o => this.optionsSelected[o[this.valueProp]]);
+        this.checkAllValue = this.selection.length === this.options.length;
+        this.onChange(this.selection);
+        this.onTouched();
+        this.updateChipsContainerClasses();
         this.updateValidation();
         this.change.detectChanges();
     }
     selectAllOptions(selected) {
-        this.updateFormControls(this.options, this.selectionForm, this.formBuilder, this.valueProp, selected);
-        const newValues = Object.keys(this.selectionForm.controls)
+        this.optionsSelected = this.options
             .reduce((acc, curr) => {
-            acc[curr] = selected;
+            acc[curr[this.valueProp]] = selected;
             return acc;
         }, {});
-        this.selectionForm.patchValue(newValues);
-        this.selectionForm.updateValueAndValidity();
     }
     handleChipAction(option) {
         if (this.multiple) {
-            this.selectionForm.get(option[this.valueProp])?.setValue(false);
+            this.optionsSelected[option[this.valueProp]] = false;
+            this.selection = this.selection.filter(selectedOption => selectedOption[this.valueProp] !== option[this.valueProp]);
         }
         else {
             this.selectedOption = null;
@@ -868,7 +860,6 @@ class AutocompleteComponent {
         const nextPageItems = sortedFilteredOptions
             .slice(this.ITEMS_PER_PAGE * (this._pageNumber - 1), this.ITEMS_PER_PAGE * this._pageNumber);
         if (nextPageItems.length) {
-            this.selectionForm.updateValueAndValidity();
             this.paginatedFilteredOptions = [...this.paginatedFilteredOptions, ...nextPageItems];
             this._pageNumber += 1;
         }
@@ -893,17 +884,8 @@ class AutocompleteComponent {
             }
         });
     }
-    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 if (!form.value[item[propValue]]) {
-                form.get(item[propValue])?.setValue(checked, { emitEvent: false });
-            }
-        });
-    }
     updateValidation() {
+        this.checkAllValue = this.isAllOptionsSelected;
         this.showChips = Boolean(this.selectedOptions.length) && this.closed && (!this.multiple || !this.checkAllValue || (this.checkAllValue && !Boolean(this.allOptionsSelectedText)));
         this.showAllSelectionBtn = this.multiple && Boolean(this.selection.length > 1) && this.chipsCollapsed;
         this.showPlaceholder = this.closed && (!this.selectedOptions.length || (this.checkAllValue && Boolean(this.allOptionsSelectedText) && this.multiple));
@@ -914,16 +896,14 @@ class AutocompleteComponent {
     writeValue(obj) {
         this.selection = [];
         if (this.multiple && Array.isArray(obj)) {
-            this.selectionForm.reset({}, { emitEvent: false });
-            this.updateFormControls(obj, this.selectionForm, this.formBuilder, this.valueProp, true);
-            this.selectionForm.updateValueAndValidity();
+            this.optionsSelected = {};
+            obj.forEach(option => this.optionsSelected[option[this.valueProp]] = true);
         }
         else {
             this.selectedOption = obj;
         }
-        if (this.multiple && !this.selection.length) {
+        if (this.multiple) {
             this.handleSelectionChange(obj);
-            this.checkAllValue = this.selection.length === this.options.length;
         }
         this.change.detectChanges();
     }
@@ -937,11 +917,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$3.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", allOptionsSelectedText: "allOptionsSelectedText" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"autocomplete-wrapper\"\n     [class.-closed]=\"closed\"\n     [class.-opened]=\"!closed\"\n     #wrapper\n     (click)=\"handleAutocompleteClick()\"\n>\n  <div class=\"autocomplete\" #autocomplete>\n    <input class=\"search-field\"\n           askAutofocus\n           *ngIf=\"!closed; else selectionOrPlaceholder\"\n           (click)=\"$event.stopPropagation()\"\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%' : '95%'\"\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($event)\">\n            +{{selection.length - 1}}\n          </span>\n        </div>\n      </ng-container>\n      <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"showPlaceholder\">\n        {{(checkAllValue && allOptionsSelectedText) ? allOptionsSelectedText : placeholder}}\n      </span>\n    </ng-template>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\"\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($event)\">\n        {{'SEE_LESS' | translate}}\n    </span>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\">\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\" askScroll [askScrollThreshold]=\"50\">\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 askScroll [askScrollThreshold]=\"50\"\n            *ngIf=\"selectionForm.controls\"\n            [formGroup]=\"selectionForm\"\n            (scrollEnd)=\"getMoreItems()\"\n            data-testid=\"options-form\"\n            class=\"options-form\"\n            [class.-select-all]=\"showSelectAllCheckbox\">\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      </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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.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}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper:hover{cursor:pointer}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.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;max-width:100%}.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{font-size:.875rem}.empty-placeholder:hover{cursor:pointer}.list-box,.menu-container>.list,.options-form{min-height:1rem;overflow-y:scroll;max-height:100%}.list-box.-select-all,.menu-container>.-select-all.list,.-select-all.options-form{max-height:80%}.menu-container{width:100%;background:white;max-height:165px;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:228px}\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: "directive", type: AutofocusDirective, selector: "[askAutofocus]" }, { kind: "directive", type: ScrollDirective, selector: "[askScroll]", inputs: ["askScrollThreshold"], outputs: ["scrollEnd"] }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], 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", allOptionsSelectedText: "allOptionsSelectedText" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"autocomplete-wrapper\"\n     [class.-closed]=\"closed\"\n     [class.-opened]=\"!closed\"\n     #wrapper\n     (click)=\"handleAutocompleteClick()\"\n>\n  <div class=\"autocomplete\" #autocomplete>\n    <input class=\"search-field\"\n           askAutofocus\n           *ngIf=\"!closed; else selectionOrPlaceholder\"\n           (click)=\"$event.stopPropagation()\"\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%' : '95%'\"\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($event)\">\n            +{{selection.length - 1}}\n          </span>\n        </div>\n      </ng-container>\n      <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"showPlaceholder\">\n        {{(checkAllValue && allOptionsSelectedText) ? allOptionsSelectedText : placeholder}}\n      </span>\n    </ng-template>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\"\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($event)\">\n        {{'SEE_LESS' | translate}}\n    </span>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\">\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\" askScroll [askScrollThreshold]=\"50\">\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      <div askScroll [askScrollThreshold]=\"50\"\n          (scrollEnd)=\"getMoreItems()\"\n          data-testid=\"options-form\"\n          class=\"options-form\"\n          [class.-select-all]=\"showSelectAllCheckbox\">\n          <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n            <div class=\"option-item\">\n              <ask-checkbox [value]=\"optionsSelected[option[valueProp]]\" (valueChange)=\"valueChange(option, $event)\">\n                {{display(option)}}</ask-checkbox>\n            </div>\n          </ng-container>\n      </div>\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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.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}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper:hover{cursor:pointer}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.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;max-width:100%}.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{font-size:.875rem}.empty-placeholder:hover{cursor:pointer}.list-box,.menu-container>.list,.options-form{min-height:1rem;overflow-y:scroll;max-height:100%}.list-box.-select-all,.menu-container>.-select-all.list,.-select-all.options-form{max-height:80%}.menu-container{width:100%;background:white;max-height:165px;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:228px}\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.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.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: "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: "directive", type: AutofocusDirective, selector: "[askAutofocus]" }, { kind: "directive", type: ScrollDirective, selector: "[askScroll]", inputs: ["askScrollThreshold"], outputs: ["scrollEnd"] }, { kind: "pipe", type: i8.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     (click)=\"handleAutocompleteClick()\"\n>\n  <div class=\"autocomplete\" #autocomplete>\n    <input class=\"search-field\"\n           askAutofocus\n           *ngIf=\"!closed; else selectionOrPlaceholder\"\n           (click)=\"$event.stopPropagation()\"\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%' : '95%'\"\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($event)\">\n            +{{selection.length - 1}}\n          </span>\n        </div>\n      </ng-container>\n      <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"showPlaceholder\">\n        {{(checkAllValue && allOptionsSelectedText) ? allOptionsSelectedText : placeholder}}\n      </span>\n    </ng-template>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\"\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($event)\">\n        {{'SEE_LESS' | translate}}\n    </span>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\">\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\" askScroll [askScrollThreshold]=\"50\">\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 askScroll [askScrollThreshold]=\"50\"\n            *ngIf=\"selectionForm.controls\"\n            [formGroup]=\"selectionForm\"\n            (scrollEnd)=\"getMoreItems()\"\n            data-testid=\"options-form\"\n            class=\"options-form\"\n            [class.-select-all]=\"showSelectAllCheckbox\">\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      </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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.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}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper:hover{cursor:pointer}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.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;max-width:100%}.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{font-size:.875rem}.empty-placeholder:hover{cursor:pointer}.list-box,.menu-container>.list,.options-form{min-height:1rem;overflow-y:scroll;max-height:100%}.list-box.-select-all,.menu-container>.-select-all.list,.-select-all.options-form{max-height:80%}.menu-container{width:100%;background:white;max-height:165px;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:228px}\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     (click)=\"handleAutocompleteClick()\"\n>\n  <div class=\"autocomplete\" #autocomplete>\n    <input class=\"search-field\"\n           askAutofocus\n           *ngIf=\"!closed; else selectionOrPlaceholder\"\n           (click)=\"$event.stopPropagation()\"\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%' : '95%'\"\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($event)\">\n            +{{selection.length - 1}}\n          </span>\n        </div>\n      </ng-container>\n      <span class=\"empty-placeholder\" data-testid=\"placeholder\" *ngIf=\"showPlaceholder\">\n        {{(checkAllValue && allOptionsSelectedText) ? allOptionsSelectedText : placeholder}}\n      </span>\n    </ng-template>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\"\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($event)\">\n        {{'SEE_LESS' | translate}}\n    </span>\n    <span class=\"btn-expand material-icons\"\n          data-testid=\"btn-expand\"\n          [class.-disabled]=\"disabled\">\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\" askScroll [askScrollThreshold]=\"50\">\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      <div askScroll [askScrollThreshold]=\"50\"\n          (scrollEnd)=\"getMoreItems()\"\n          data-testid=\"options-form\"\n          class=\"options-form\"\n          [class.-select-all]=\"showSelectAllCheckbox\">\n          <ng-container *ngFor=\"let option of paginatedFilteredOptions\">\n            <div class=\"option-item\">\n              <ask-checkbox [value]=\"optionsSelected[option[valueProp]]\" (valueChange)=\"valueChange(option, $event)\">\n                {{display(option)}}</ask-checkbox>\n            </div>\n          </ng-container>\n      </div>\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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.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}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}.autocomplete-wrapper{position:relative;border:1px solid #CBD2D9;border-radius:4px;padding:16px}.autocomplete-wrapper:hover{cursor:pointer}.autocomplete-wrapper>.autocomplete{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.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;max-width:100%}.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{font-size:.875rem}.empty-placeholder:hover{cursor:pointer}.list-box,.menu-container>.list,.options-form{min-height:1rem;overflow-y:scroll;max-height:100%}.list-box.-select-all,.menu-container>.-select-all.list,.-select-all.options-form{max-height:80%}.menu-container{width:100%;background:white;max-height:165px;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:228px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i1$3.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ["autocomplete"]
@@ -1503,6 +1483,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 type: Input
             }] } });
 
+const ASK_TOAST_CONFIG = new InjectionToken('Default toast options');
+
+class ToastRef {
+    constructor(overlay) {
+        this.overlay = overlay;
+    }
+    close() {
+        this.overlay.dispose();
+    }
+    getPosition() {
+        return this.overlay.overlayElement.getBoundingClientRect();
+    }
+}
+
+class ToastComponent {
+    constructor(data, ref) {
+        this.data = data;
+        this.ref = ref;
+        this.message = '';
+        this.icon = 'check_small';
+        this.config = {
+            timeout: 5000,
+        };
+        this.color = 'var(--success-green)';
+        this.fontColor = 'var(--white)';
+        this.isClosing = false;
+        this.TYPES = {
+            success: { color: 'var(--success-green)', icon: 'check_small', fontColor: 'var(--white)' },
+            warning: { color: 'var(--warning-yellow)', icon: 'warning', fontColor: 'var(--grey-800)' },
+            danger: { color: 'var(--error-red)', icon: 'error', fontColor: 'var(--white)' },
+            info: { color: 'var(--facebook-blue)', icon: 'info', fontColor: 'var(--white)' },
+        };
+        this.message = data.message;
+        this.type = data.type;
+        this.config = {
+            ...this.config,
+            ...data.config
+        };
+    }
+    set type(type) {
+        this.icon = this.TYPES[type].icon;
+        this.fontColor = this.TYPES[type].fontColor;
+        this.color = this.TYPES[type].color;
+    }
+    ngOnInit() {
+        if (this.config?.timeout) {
+            this.timeoutRef = setTimeout(() => this.close(), this.config.timeout);
+        }
+    }
+    ngOnDestroy() {
+        clearTimeout(this.timeoutRef);
+    }
+    close() {
+        this.isClosing = true;
+        setTimeout(() => this.ref.close(), 250);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ToastComponent, deps: [{ token: ASK_TOAST_CONFIG }, { token: ToastRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: ToastComponent, selector: "ask-toast", inputs: { type: "type" }, host: { properties: { "style.background-color": "this.color", "style.color": "this.fontColor", "class.closing": "this.isClosing" } }, ngImport: i0, template: "<span class=\"material-icons icon\">\n  {{ icon }}\n</span>\n\n<p class=\"message\">\n  {{ message }}\n</p>\n\n<button type=\"button\" class=\"close-icon\" (click)=\"close()\">\n  <span class=\"material-icons icon\" [style.color]=\"fontColor\">close</span>\n</button>\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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.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}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}:host{position:relative;display:flex;align-items:center;gap:8px;flex-direction:row;width:220px;padding:16px;border-radius:4px;box-shadow:0 0 6px #2a304229;animation:toastIn .2s ease-out 0s 1 normal forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}:host.closing{animation:toastOut .2s ease-out 0s 1 normal forwards}:host>.icon{width:24px;height:24px;-webkit-user-select:none;user-select:none}:host>.message{font-size:1rem}.close-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:14px;height:14px;border:none;outline:none;background:none;cursor:pointer;top:4px;right:4px}.close-icon>.icon{font-size:16px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ask-toast', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"material-icons icon\">\n  {{ icon }}\n</span>\n\n<p class=\"message\">\n  {{ message }}\n</p>\n\n<button type=\"button\" class=\"close-icon\" (click)=\"close()\">\n  <span class=\"material-icons icon\" [style.color]=\"fontColor\">close</span>\n</button>\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}.scale-in-center{animation:scale-in-center .3s ease-in-out both}@keyframes scale-in-center{0%{transform:scale(0);opacity:1}to{transform:scale(1);opacity:1}}.scale-out-center{animation:scale-out-center .3s ease-in-out both}@keyframes scale-out-center{0%{transform:scale(1);opacity:1}to{transform:scale(0);opacity:1}}.ask-tooltip{background-color:#7b8794;color:#fff;padding:4px;border-radius:8px;position:relative}.ask-tooltip>div{text-align:center!important}.ask-tooltip:after{position:absolute;content:\"\";width:10px;height:10px;background-color:inherit}.ask-tooltip.-above{margin-bottom:4px}.ask-tooltip.-above:after{bottom:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-below{margin-top:4px}.ask-tooltip.-below:after{top:-5px;left:50%;transform:translate(-50%) rotate(45deg)}.ask-tooltip.-after,.ask-tooltip.-right{margin-left:4px}.ask-tooltip.-after:after,.ask-tooltip.-right:after{left:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.ask-tooltip.-before,.ask-tooltip.-left{margin-right:4px}.ask-tooltip.-before:after,.ask-tooltip.-left:after{right:-5px;top:50%;transform:translateY(-50%) rotate(45deg)}.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}.ask-badge{position:relative}.ask-badge>.badge{position:absolute;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color);color:#fff;font-size:12px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:50%;box-shadow:0 2px 6px -1px #00000080}.ask-badge>.badge.-primary{--bg-color: var(--asksuite-orange)}.ask-badge>.badge.-secondary{--bg-color: var(--grey-800)}.ask-badge>.badge.-top{top:-10px}.ask-badge>.badge.-bottom{bottom:-10px}.ask-badge>.badge.-left{left:-10px}.ask-badge>.badge.-right{right:-10px}.ask-badge>.badge.-small{width:18px;height:18px;font-size:10px}.ask-badge>.badge.-regular{width:22px;height:22px;font-size:11px}.ask-badge>.badge.-large{width:28px;height:28px;font-size:12px}.ask-dropdown-top-right{margin-left:8px}.ask-dropdown-top-left{margin-right:8px}.ask-dropdown-bottom-right,.ask-dropdown-bottom-left{margin-top:8px}:host{position:relative;display:flex;align-items:center;gap:8px;flex-direction:row;width:220px;padding:16px;border-radius:4px;box-shadow:0 0 6px #2a304229;animation:toastIn .2s ease-out 0s 1 normal forwards}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}:host.closing{animation:toastOut .2s ease-out 0s 1 normal forwards}:host>.icon{width:24px;height:24px;-webkit-user-select:none;user-select:none}:host>.message{font-size:1rem}.close-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:14px;height:14px;border:none;outline:none;background:none;cursor:pointer;top:4px;right:4px}.close-icon>.icon{font-size:16px}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ASK_TOAST_CONFIG]
+                }] }, { type: ToastRef }]; }, propDecorators: { color: [{
+                type: HostBinding,
+                args: ['style.background-color']
+            }], fontColor: [{
+                type: HostBinding,
+                args: ['style.color']
+            }], isClosing: [{
+                type: HostBinding,
+                args: ['class.closing']
+            }], type: [{
+                type: Input
+            }] } });
+
 class AsksuiteCitrusModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AsksuiteCitrusModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.6", ngImport: i0, type: AsksuiteCitrusModule, declarations: [ButtonComponent,
@@ -1523,7 +1581,8 @@ class AsksuiteCitrusModule {
             BadgeDirective,
             AutofocusDirective,
             ScrollDirective,
-            AskTooltipDirective], imports: [CommonModule,
+            AskTooltipDirective,
+            ToastComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             CdkOverlayOrigin,
@@ -1577,7 +1636,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         BadgeDirective,
                         AutofocusDirective,
                         ScrollDirective,
-                        AskTooltipDirective
+                        AskTooltipDirective,
+                        ToastComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -1608,11 +1668,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         BadgeDirective,
                         AutofocusDirective,
                         ScrollDirective,
-                        AskTooltipDirective
+                        AskTooltipDirective,
                     ],
                 }]
         }] });
 
+class ToastService {
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+        this.TOP_MARGIN = 72;
+        this.GAP = 8;
+    }
+    success(message, config) {
+        this.pop('success', message, config);
+    }
+    info(message, config) {
+        this.pop('info', message, config);
+    }
+    danger(message, config) {
+        this.pop('danger', message, config);
+    }
+    warning(message, config) {
+        this.pop('warning', message, config);
+    }
+    pop(type, message, config) {
+        if (this.lastToast && !this.lastToast?.overlay.overlayElement) {
+            this.lastToast = undefined;
+        }
+        const positionStrategy = this.getPositionStrategy();
+        const overlayRef = this.overlay.create({
+            positionStrategy,
+        });
+        const toastRef = new ToastRef(overlayRef);
+        const injector = this.createInjector({ type, message, config }, toastRef);
+        const toastPortal = new ComponentPortal(ToastComponent, null, injector);
+        overlayRef.attach(toastPortal);
+        this.lastToast = toastRef;
+    }
+    createInjector(data, toastRef) {
+        return Injector.create({
+            parent: this.injector,
+            providers: [
+                { provide: ASK_TOAST_CONFIG, useValue: data },
+                { provide: ToastRef, useValue: toastRef },
+            ]
+        });
+    }
+    getPositionStrategy() {
+        return this.overlay.position().global().top(this.getTopOffset()).centerHorizontally();
+    }
+    getTopOffset() {
+        const offset = this.lastToast ?
+            this.lastToast.getPosition().bottom + this.GAP :
+            this.TOP_MARGIN;
+        return `${offset}px`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ToastService, deps: [{ token: i1$3.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ToastService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.Overlay }, { type: i0.Injector }]; } });
+
 /*
  * Public API Surface of asksuite-citrus
  */
@@ -1621,5 +1742,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AskDropdownDirective, AskTooltipDirective, AsksuiteCitrusModule, AutocompleteComponent, AutofocusDirective, AvatarComponent, AvatarStatus, BadgeDirective, BoxComponent, ButtonComponent, CheckboxComponent, ChipsComponent, DEFAULT_DATE_FORMAT, DatePickerCalendarComponent, DatePickerComponent, DropdownContainerComponent, InputComponent, PeriodLabel, ScrollDirective, SelectComponent, SkeletonComponent, SpinnerDirective, formatFrom, formatTo };
+export { ASK_TOAST_CONFIG, AskDropdownDirective, AskTooltipDirective, AsksuiteCitrusModule, AutocompleteComponent, AutofocusDirective, AvatarComponent, AvatarStatus, BadgeDirective, BoxComponent, ButtonComponent, CheckboxComponent, ChipsComponent, DEFAULT_DATE_FORMAT, DatePickerCalendarComponent, DatePickerComponent, DropdownContainerComponent, InputComponent, PeriodLabel, ScrollDirective, SelectComponent, SkeletonComponent, SpinnerDirective, ToastService, formatFrom, formatTo };
 //# sourceMappingURL=asksuite-citrus.mjs.map