asksuite-citrus 0.2.1 → 0.3.1

package/fesm2022/asksuite-citrus.mjs

@@ -14,6 +14,8 @@ import { ScrollingModule } from '@angular/cdk/scrolling';
 import moment from 'moment';
 import * as i4$1 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
+import * as i1$3 from 'ngx-skeleton-loader';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 class ButtonComponent {
     constructor() {
@@ -529,6 +531,7 @@ class AutocompleteComponent {
         this.selectedOption = item;
         this.onChange(this.selectedOption);
         this.hideOptions();
+        this.change.detectChanges();
     }
     handleAutocompleteClick() {
         this.closed
@@ -583,6 +586,11 @@ class AutocompleteComponent {
         this.selectAllOptions(checked);
     }
     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 });
+            }
+        });
         const newValues = Object.keys(this.selectionForm.controls)
             .reduce((acc, curr) => {
             acc[curr] = selected;
@@ -623,20 +631,20 @@ class AutocompleteComponent {
     }
     // Control Value Accessor
     writeValue(obj) {
-        if (!obj || !obj.length) {
+        if (!obj || (Array.isArray(obj) && !obj.length) && this.selectAll) {
             this.selectAllOptions(this.selectAll);
             return;
         }
-        if (this.multiple) {
+        if (this.multiple && Array.isArray(obj)) {
             obj.forEach((item) => {
                 this.selectionForm.addControl(item[this.valueProp], this.formBuilder.control(true), { emitEvent: false });
             });
             this.selectionForm.updateValueAndValidity();
-            this.change.detectChanges();
         }
         else {
             this.selectedOption = obj;
         }
+        this.change.detectChanges();
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -648,11 +656,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                     *ngFor=\"let option of selectedOptions\"\n                     (action)=\"handleChipAction(option)\">\n            {{display(option)}}\n          </ask-chips>\n          <span class=\"expand\" *ngIf=\"multiple\" (click)=\"chipsCollapsed = !chipsCollapsed\">\n            {{chipsCollapsed ? 'Ver mais' : 'Ver menos'}}\n          </span>\n        </div>\n      </ng-container>\n      <span *ngIf=\"closed && !selectedOptions.length\">{{placeholder}}</span>\n    </ng-template>\n    <span class=\"btn-expand material-icons\"\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 *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: ["color"], 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 }], 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                     *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: ["color"], outputs: ["action"] }, { kind: "component", type: CheckboxComponent, selector: "ask-checkbox", inputs: ["value", "disabled"], outputs: ["valueChange", "change", "click", "focus"] }], 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                     *ngFor=\"let option of selectedOptions\"\n                     (action)=\"handleChipAction(option)\">\n            {{display(option)}}\n          </ask-chips>\n          <span class=\"expand\" *ngIf=\"multiple\" (click)=\"chipsCollapsed = !chipsCollapsed\">\n            {{chipsCollapsed ? 'Ver mais' : 'Ver menos'}}\n          </span>\n        </div>\n      </ng-container>\n      <span *ngIf=\"closed && !selectedOptions.length\">{{placeholder}}</span>\n    </ng-template>\n    <span class=\"btn-expand material-icons\"\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 *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=\"selectedOptions.length && closed\">\n        <div class=\"chip-list\" [class.-collapsed]=\"chipsCollapsed\">\n          <ask-chips [style.max-width]=\"chipsCollapsed ? '75%' : '100%'\"\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"] }]
         }], ctorParameters: function () { return [{ type: i1$1.FormBuilder }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { input: [{
                 type: ViewChild,
                 args: ["autocomplete"]
@@ -1036,6 +1044,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 type: Output
             }] } });
 
+class SkeletonComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.barsHeight = 100;
+    }
+    get barsCount() {
+        const height = this.elementRef.nativeElement.clientHeight;
+        return Math.round(height / this.barsHeight) || 1;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SkeletonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: SkeletonComponent, selector: "ask-skeleton", inputs: { barsHeight: "barsHeight" }, ngImport: i0, template: "<ngx-skeleton-loader\n  data-testid=\"skeleton-loader\"\n  class=\"skeleton-component\"\n  [count]=\"barsCount\"\n  appearance=\"line\"\n  animation=\"progress\"\n  [theme]=\"{\n    'border-radius': '5px',\n    height: barsHeight+'px',\n    margin: 0,\n    display: 'block',\n  }\"\n></ngx-skeleton-loader>\n", styles: [":host{display:block}.skeleton-component{display:flex;gap:10px;flex-direction:column;height:100%}\n"], dependencies: [{ kind: "component", type: i1$3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: SkeletonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ask-skeleton', template: "<ngx-skeleton-loader\n  data-testid=\"skeleton-loader\"\n  class=\"skeleton-component\"\n  [count]=\"barsCount\"\n  appearance=\"line\"\n  animation=\"progress\"\n  [theme]=\"{\n    'border-radius': '5px',\n    height: barsHeight+'px',\n    margin: 0,\n    display: 'block',\n  }\"\n></ngx-skeleton-loader>\n", styles: [":host{display:block}.skeleton-component{display:flex;gap:10px;flex-direction:column;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { barsHeight: [{
+                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,
@@ -1049,13 +1076,14 @@ class AsksuiteCitrusModule {
             ChipsComponent,
             CheckboxComponent,
             DatePickerComponent,
-            DatePickerCalendarComponent], imports: [CommonModule,
+            DatePickerCalendarComponent,
+            SkeletonComponent], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             CdkOverlayOrigin,
             CdkConnectedOverlay,
             OverlayModule,
-            ScrollingModule, i4$1.TranslateModule], exports: [ButtonComponent,
+            ScrollingModule, i4$1.TranslateModule, NgxSkeletonLoaderModule], exports: [ButtonComponent,
             InputComponent,
             SelectComponent,
             BoxComponent,
@@ -1066,13 +1094,15 @@ class AsksuiteCitrusModule {
             ChipsComponent,
             CheckboxComponent,
             DatePickerComponent,
-            DatePickerCalendarComponent] }); }
+            DatePickerCalendarComponent,
+            SkeletonComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AsksuiteCitrusModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             OverlayModule,
             ScrollingModule,
-            TranslateModule.forChild()] }); }
+            TranslateModule.forChild(),
+            NgxSkeletonLoaderModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: AsksuiteCitrusModule, decorators: [{
             type: NgModule,
@@ -1090,6 +1120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         CheckboxComponent,
                         DatePickerComponent,
                         DatePickerCalendarComponent,
+                        SkeletonComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -1099,7 +1130,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         CdkConnectedOverlay,
                         OverlayModule,
                         ScrollingModule,
-                        TranslateModule.forChild()
+                        TranslateModule.forChild(),
+                        NgxSkeletonLoaderModule,
                     ],
                     exports: [
                         ButtonComponent,
@@ -1113,8 +1145,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         ChipsComponent,
                         CheckboxComponent,
                         DatePickerComponent,
-                        DatePickerCalendarComponent
-                    ]
+                        DatePickerCalendarComponent,
+                        SkeletonComponent,
+                    ],
                 }]
         }] });
 
@@ -1126,5 +1159,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AskDropdownDirective, AsksuiteCitrusModule, AutocompleteComponent, AvatarComponent, AvatarStatus, BoxComponent, ButtonComponent, CheckboxComponent, ChipsComponent, DEFAULT_DATE_FORMAT, DatePickerCalendarComponent, DatePickerComponent, DropdownContainerComponent, InputComponent, PeriodLabel, SelectComponent, formatFrom, formatTo };
+export { AskDropdownDirective, AsksuiteCitrusModule, AutocompleteComponent, AvatarComponent, AvatarStatus, BoxComponent, ButtonComponent, CheckboxComponent, ChipsComponent, DEFAULT_DATE_FORMAT, DatePickerCalendarComponent, DatePickerComponent, DropdownContainerComponent, InputComponent, PeriodLabel, SelectComponent, SkeletonComponent, formatFrom, formatTo };
 //# sourceMappingURL=asksuite-citrus.mjs.map