asksuite-citrus 0.2.0 → 0.3.0

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

@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "ngx-skeleton-loader";
+export 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.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
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2tlbGV0b24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYXNrc3VpdGUtY2l0cnVzL3NyYy9saWIvY29tcG9uZW50cy9za2VsZXRvbi9za2VsZXRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hc2tzdWl0ZS1jaXRydXMvc3JjL2xpYi9jb21wb25lbnRzL3NrZWxldG9uL3NrZWxldG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFPN0QsTUFBTSxPQUFPLGlCQUFpQjtJQUc1QixZQUFvQixVQUFtQztRQUFuQyxlQUFVLEdBQVYsVUFBVSxDQUF5QjtRQUY5QyxlQUFVLEdBQUcsR0FBRyxDQUFDO0lBRWdDLENBQUM7SUFFM0QsSUFBYyxTQUFTO1FBQ3JCLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQztRQUMxRCxPQUFPLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDbkQsQ0FBQzs4R0FSVSxpQkFBaUI7a0dBQWpCLGlCQUFpQiwwRkNQOUIsc1RBYUE7OzJGRE5hLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDRSxjQUFjO2lHQUtmLFVBQVU7c0JBQWxCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2Fzay1za2VsZXRvbicsXG4gIHRlbXBsYXRlVXJsOiAnLi9za2VsZXRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NrZWxldG9uLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFNrZWxldG9uQ29tcG9uZW50IHtcbiAgQElucHV0KCkgYmFyc0hlaWdodCA9IDEwMDtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+KSB7fVxuXG4gIHByb3RlY3RlZCBnZXQgYmFyc0NvdW50KCk6IG51bWJlciB7XG4gICAgY29uc3QgaGVpZ2h0ID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY2xpZW50SGVpZ2h0O1xuICAgIHJldHVybiBNYXRoLnJvdW5kKGhlaWdodCAvIHRoaXMuYmFyc0hlaWdodCkgfHwgMTtcbiAgfVxufVxuIiwiPG5neC1za2VsZXRvbi1sb2FkZXJcbiAgZGF0YS10ZXN0aWQ9XCJza2VsZXRvbi1sb2FkZXJcIlxuICBjbGFzcz1cInNrZWxldG9uLWNvbXBvbmVudFwiXG4gIFtjb3VudF09XCJiYXJzQ291bnRcIlxuICBhcHBlYXJhbmNlPVwibGluZVwiXG4gIGFuaW1hdGlvbj1cInByb2dyZXNzXCJcbiAgW3RoZW1lXT1cIntcbiAgICAnYm9yZGVyLXJhZGl1cyc6ICc1cHgnLFxuICAgIGhlaWdodDogYmFyc0hlaWdodCsncHgnLFxuICAgIG1hcmdpbjogMCxcbiAgICBkaXNwbGF5OiAnYmxvY2snLFxuICB9XCJcbj48L25neC1za2VsZXRvbi1sb2FkZXI+XG4iXX0=

package/esm2022/public-api.mjs

@@ -14,6 +14,7 @@ export * from './lib/components/checkbox/checkbox.component';
 export * from './lib/components/chips/chips.component';
 export * from './lib/components/date-picker/date-picker.component';
 export * from './lib/components/date-picker/date-picker-calendar/date-picker-calendar.component';
+export * from './lib/components/skeleton/skeleton.component';
 // Directives
 export * from './lib/directives/ask-dropdown.directive';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2Fza3N1aXRlLWNpdHJ1cy9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsOEJBQThCLENBQUM7QUFFN0MsYUFBYTtBQUNiLGNBQWMsMENBQTBDLENBQUE7QUFDeEQsY0FBYyx3Q0FBd0MsQ0FBQTtBQUN0RCxjQUFjLDBDQUEwQyxDQUFBO0FBQ3hELGNBQWMsb0NBQW9DLENBQUE7QUFDbEQsY0FBYywwQ0FBMEMsQ0FBQTtBQUN4RCxjQUFjLGtFQUFrRSxDQUFBO0FBQ2hGLGNBQWMsc0RBQXNELENBQUE7QUFDcEUsY0FBYyw4Q0FBOEMsQ0FBQTtBQUM1RCxjQUFjLHdDQUF3QyxDQUFBO0FBQ3RELGNBQWMsb0RBQW9ELENBQUE7QUFDbEUsY0FBYyxrRkFBa0YsQ0FBQTtBQUVoRyxhQUFhO0FBQ2IsY0FBYyx5Q0FBeUMsQ0FBQSIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgYXNrc3VpdGUtY2l0cnVzXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9saWIvYXNrc3VpdGUtY2l0cnVzLm1vZHVsZSc7XG5cbi8vIENvbXBvbmVudHNcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2lucHV0L2lucHV0LmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvc2VsZWN0L3NlbGVjdC5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2JveC9ib3guY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9hdmF0YXIvYXZhdGFyLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvZHJvcGRvd24tY29udGFpbmVyL2Ryb3Bkb3duLWNvbnRhaW5lci5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2F1dG9jb21wbGV0ZS9hdXRvY29tcGxldGUuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2NoaXBzL2NoaXBzLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvZGF0ZS1waWNrZXIvZGF0ZS1waWNrZXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9kYXRlLXBpY2tlci9kYXRlLXBpY2tlci1jYWxlbmRhci9kYXRlLXBpY2tlci1jYWxlbmRhci5jb21wb25lbnQnXG5cbi8vIERpcmVjdGl2ZXNcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZXMvYXNrLWRyb3Bkb3duLmRpcmVjdGl2ZSdcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2Fza3N1aXRlLWNpdHJ1cy9zcmMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsOEJBQThCLENBQUM7QUFFN0MsYUFBYTtBQUNiLGNBQWMsMENBQTBDLENBQUE7QUFDeEQsY0FBYyx3Q0FBd0MsQ0FBQTtBQUN0RCxjQUFjLDBDQUEwQyxDQUFBO0FBQ3hELGNBQWMsb0NBQW9DLENBQUE7QUFDbEQsY0FBYywwQ0FBMEMsQ0FBQTtBQUN4RCxjQUFjLGtFQUFrRSxDQUFBO0FBQ2hGLGNBQWMsc0RBQXNELENBQUE7QUFDcEUsY0FBYyw4Q0FBOEMsQ0FBQTtBQUM1RCxjQUFjLHdDQUF3QyxDQUFBO0FBQ3RELGNBQWMsb0RBQW9ELENBQUE7QUFDbEUsY0FBYyxrRkFBa0YsQ0FBQTtBQUNoRyxjQUFjLDhDQUE4QyxDQUFBO0FBRTVELGFBQWE7QUFDYixjQUFjLHlDQUF5QyxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBhc2tzdWl0ZS1jaXRydXNcbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2xpYi9hc2tzdWl0ZS1jaXRydXMubW9kdWxlJztcblxuLy8gQ29tcG9uZW50c1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvaW5wdXQvaW5wdXQuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9zZWxlY3Qvc2VsZWN0LmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvYm94L2JveC5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2F2YXRhci9hdmF0YXIuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9kcm9wZG93bi1jb250YWluZXIvZHJvcGRvd24tY29udGFpbmVyLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvYXV0b2NvbXBsZXRlL2F1dG9jb21wbGV0ZS5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvY2hpcHMvY2hpcHMuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9kYXRlLXBpY2tlci9kYXRlLXBpY2tlci5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL2RhdGUtcGlja2VyL2RhdGUtcGlja2VyLWNhbGVuZGFyL2RhdGUtcGlja2VyLWNhbGVuZGFyLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvc2tlbGV0b24vc2tlbGV0b24uY29tcG9uZW50J1xuXG4vLyBEaXJlY3RpdmVzXG5leHBvcnQgKiBmcm9tICcuL2xpYi9kaXJlY3RpdmVzL2Fzay1kcm9wZG93bi5kaXJlY3RpdmUnXG4iXX0=

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() {
@@ -686,9 +688,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 args: ["window:mousedown", ['$event']]
             }] } });
 
-const asDate = (inMoment) => {
-    return inMoment.utc(true).toDate();
-};
+var PeriodLabel;
+(function (PeriodLabel) {
+    PeriodLabel["TODAY"] = "TODAY";
+    PeriodLabel["YESTERDAY"] = "YESTERDAY";
+    PeriodLabel["LAST_7_DAYS"] = "LAST_7_DAYS";
+    PeriodLabel["LAST_30_DAYS"] = "LAST_30_DAYS";
+    PeriodLabel["THIS_MONTH"] = "THIS_MONTH";
+    PeriodLabel["LAST_QUARTER"] = "LAST_QUARTER";
+    PeriodLabel["CUSTOM_PERIOD"] = "CUSTOM_PERIOD";
+})(PeriodLabel || (PeriodLabel = {}));
+const DEFAULT_DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ';
+const formatFrom = (from) => from.startOf('day').format(DEFAULT_DATE_FORMAT);
+const formatTo = (from) => from.endOf('day').format(DEFAULT_DATE_FORMAT);
 class DatePickerCalendarComponent {
     constructor() {
         this.isRange = false;
@@ -727,15 +739,15 @@ class DatePickerCalendarComponent {
     }
     isFirstSelectedDay(day) {
         if (this.isRange) {
-            return day.timestamp === this.innerDate.from?.timestamp;
+            return day.formatted === this.innerDate.from?.formatted;
         }
-        return this.innerDate.timestamp === day.timestamp;
+        return this.innerDate.formatted === day.formatted;
     }
     isLastSelectedDay(day) {
         if (this.isRange) {
-            return day.timestamp === (this.innerDate.to?.timestamp || this.innerDate.from?.timestamp);
+            return day.formatted === (this.innerDate.to?.formatted || this.innerDate.from?.formatted);
         }
-        return this.innerDate.timestamp === day.timestamp;
+        return this.innerDate.formatted === day.formatted;
     }
     ngOnInit() {
         this.assignInitialValues();
@@ -746,9 +758,9 @@ class DatePickerCalendarComponent {
             const receivedDate = this.date;
             if (receivedDate.from && receivedDate.to) {
                 this.innerDate = {
-                    from: this.getDayFromDate(receivedDate.from),
-                    to: this.getDayFromDate(receivedDate.to),
-                    label: receivedDate.label || 'CUSTOM_PERIOD'
+                    from: this.getDayFromString(receivedDate.from),
+                    to: this.getDayFromString(receivedDate.to),
+                    label: PeriodLabel[receivedDate.label || 'CUSTOM_PERIOD'].toString()
                 };
             }
             else {
@@ -759,7 +771,7 @@ class DatePickerCalendarComponent {
             this.displayDate = moment.unix(this.innerDate.from?.timestamp || (Date.now() / 1000));
         }
         else {
-            this.innerDate = this.getDayFromDate(this.date);
+            this.innerDate = this.getDayFromString(this.date);
             this.displayDate = moment.unix(this.innerDate.timestamp);
         }
         this.firstDayOfWeek = this.displayDate.clone().startOf('week').day();
@@ -828,14 +840,15 @@ class DatePickerCalendarComponent {
             timestamp: day.unix(),
             day: day.format('D'),
             month: day.month(),
-            weekDay: day.day()
+            weekDay: day.day(),
+            formatted: day.format(DEFAULT_DATE_FORMAT),
         };
     }
-    getDayFromDate(date) {
-        return this.getDayFromMoment(moment(date).utc(false));
+    getDayFromString(date) {
+        return this.getDayFromMoment(moment(date));
     }
     getDateFromDay(day) {
-        return moment.unix(day.timestamp).startOf('day').toDate();
+        return moment.unix(day.timestamp).startOf('day').format(DEFAULT_DATE_FORMAT);
     }
     incrementMonth(amount) {
         this.displayDate.add(amount, 'month');
@@ -878,17 +891,17 @@ class DatePickerCalendarComponent {
     }
     emitRange(range) {
         const newRange = {};
-        newRange.label = 'CUSTOM_PERIOD';
+        newRange.label = PeriodLabel.CUSTOM_PERIOD;
         if (range.from) {
             newRange.from = this.getDateFromDay(range.from);
             if (range.to)
-                newRange.to = asDate(moment.unix(range.to.timestamp).endOf('day'));
+                newRange.to = formatTo(moment.unix(range.to.timestamp));
         }
         this.dateChange.emit(newRange);
     }
     handleSingleSelect(momentDate) {
         this.innerDate = this.getDayFromMoment(momentDate);
-        this.dateChange.emit(asDate(momentDate));
+        this.dateChange.emit(momentDate.format(DEFAULT_DATE_FORMAT));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: { isRange: "isRange", date: "date" }, outputs: { dateChange: "dateChange" }, ngImport: i0, template: "<div class=\"date-picker-calendar-container\">\n  <header class=\"month-selector\">\n    <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(-1)\">\n      <span class=\"material-icons icon\">chevron_left</span>\n    </button>\n\n    <span class=\"month-year-display\" data-testid=\"month-year-display\">{{ month }} {{ year }}</span>\n\n    <button type=\"button\" class=\"selector-button\" (click)=\"incrementMonth(1)\">\n      <span class=\"material-icons icon\">chevron_right</span>\n    </button>\n  </header>\n\n  <main class=\"calendar\">\n    <div class=\"week-days-header\">\n      <span class=\"week-day\" *ngFor=\"let weekDay of weekDays\">{{ weekDay.name }}</span>\n    </div>\n\n    <div class=\"days-block\" data-testid=\"days-block\">\n      <span\n        *ngFor=\"let day of days\"\n        (click)=\"selectDate(day.timestamp)\"\n        [ngClass]=\"{\n          'day': true,\n          'another-month': monthNumber != day.month,\n          'selected': isDaySelected(day),\n          'first': isFirstSelectedDay(day),\n          'last': isLastSelectedDay(day),\n        }\"\n      >\n        {{ day.day }}\n      </span>\n    </div>\n  </main>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.date-picker-calendar-container{display:flex;flex-direction:column;padding:16px;width:320px;-webkit-user-select:none;user-select:none}.month-selector{display:flex;align-items:center;justify-content:space-between;padding:4px;background-color:var(--secondary-background);border-radius:4px;text-transform:capitalize}.month-selector>.month-year-display{font-size:.75rem;color:var(--font-color-100);font-weight:500}.selector-button{display:flex;align-items:center;justify-content:center;width:20px;height:20px;background-color:var(--primary-background);box-shadow:0 1px 2px #2a304229;outline:none;border:none;border-radius:4px;cursor:pointer}.selector-button>.icon{color:var(--font-color-100);font-size:18px}.calendar{display:flex;flex-direction:column;padding:16px 32px}.week-days-header{display:grid;grid-template-rows:auto;grid-template-columns:repeat(7,auto);place-items:center;padding-bottom:8px;border-bottom:1px solid #E4E7EB}.week-days-header>.week-day{display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1rem;width:100%;color:var(--font-color-100)}.days-block{display:grid;grid-template-rows:repeat(6,auto);grid-template-columns:repeat(7,auto);place-items:center;row-gap:4px;color:var(--font-color-200);padding-top:4px}.days-block>.day{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.75rem;line-height:1rem;width:100%;height:31px;border-radius:99999px;transition:.2s background-color,.2s color,.2s font-weight}.days-block>.day.another-month{color:var(--font-color-300)}.days-block>.day.selected,.days-block>.day:hover{color:#ff5724;background-color:#ff57241a;cursor:pointer}.days-block>.day.selected{border-radius:0;font-weight:500}.days-block>.day.selected.first{border-top-left-radius:99999px;border-bottom-left-radius:99999px}.days-block>.day.selected.last{border-top-right-radius:99999px;border-bottom-right-radius:99999px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
@@ -904,71 +917,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                 type: Output
             }] } });
 
+const VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    multi: true,
+    useExisting: forwardRef(() => DatePickerComponent),
+};
 class DatePickerComponent {
     constructor() {
         this.periods = [
-            { label: 'TODAY', getRange: () => ({ from: asDate(moment().startOf('day')), to: asDate(moment().endOf('day')) }), selected: false },
-            { label: 'YESTERDAY', getRange: () => ({ from: asDate(moment().subtract(1, 'day').startOf('day')), to: asDate(moment().subtract(1, 'day').endOf('day')) }), selected: false },
-            { label: 'LAST_7_DAYS', getRange: () => ({ from: asDate(moment().subtract(1, 'week').startOf('day')), to: asDate(moment().endOf('day')) }), selected: false },
-            { label: 'LAST_30_DAYS', getRange: () => ({ from: asDate(moment().subtract(30, 'days').startOf('day')), to: asDate(moment().endOf('day')) }), selected: false },
-            { label: 'THIS_MONTH', getRange: () => ({ from: asDate(moment().startOf('month')), to: asDate(moment().endOf('month')) }), selected: false },
-            { label: 'LAST_QUARTER', getRange: () => ({ from: asDate(moment().subtract(3, 'months').startOf('day')), to: asDate(moment().endOf('month')) }), selected: false },
-            { label: 'CUSTOM_PERIOD', getRange: () => ({}), isCustomRange: true, selected: false },
+            { label: PeriodLabel.TODAY, getRange: () => ({ from: formatFrom(moment()), to: formatTo(moment()) }), selected: false },
+            { label: PeriodLabel.YESTERDAY, getRange: () => ({ from: formatFrom(moment().subtract(1, 'day')), to: formatTo(moment().subtract(1, 'day')) }), selected: false },
+            { label: PeriodLabel.LAST_7_DAYS, getRange: () => ({ from: formatFrom(moment().subtract(1, 'week')), to: formatTo(moment()) }), selected: false },
+            { label: PeriodLabel.LAST_30_DAYS, getRange: () => ({ from: formatFrom(moment().subtract(30, 'days')), to: formatTo(moment()) }), selected: false },
+            { label: PeriodLabel.THIS_MONTH, getRange: () => ({ from: formatFrom(moment().startOf('month')), to: formatTo(moment().endOf('month')) }), selected: false },
+            { label: PeriodLabel.LAST_QUARTER, getRange: () => ({ from: formatFrom(moment().subtract(3, 'months')), to: formatTo(moment().endOf('month')) }), selected: false },
+            { label: PeriodLabel.CUSTOM_PERIOD, getRange: () => ({}), isCustomRange: true, selected: false },
         ];
-        this.date = new Date();
+        this.date = moment().format();
         this.isRange = false;
         this.dateChange = new EventEmitter();
         this.close = new EventEmitter();
         this.isCustomRange = false;
+        this.onChange = (value) => { };
+        this.onTouch = () => { };
     }
     get from() {
-        if (this.date instanceof Date) {
+        if (!this.isRange) {
             return;
         }
         return this.date.from;
     }
     get to() {
-        if (this.date instanceof Date) {
+        if (!this.isRange) {
             return;
         }
         return this.date.to;
     }
     get dateDisplay() {
-        const from = this.from ? moment(this.from).utc(false).format('L') : '';
-        const to = this.to ? moment(this.to).utc(false).format('L') : '';
+        const from = this.from ? moment(this.from).format('L') : '';
+        const to = this.to ? moment(this.to).format('L') : '';
         return `${from} ${to ? '- ' + to : ''}`;
     }
     ngOnInit() {
     }
     selectPeriod(period) {
-        this.periods.forEach(period => period.selected = false);
+        this.periods.forEach((period) => period.selected = false);
         this.date = period.getRange();
         this.date.label = period.label;
         this.isCustomRange = period.isCustomRange || false;
         period.selected = true;
         if (!this.isCustomRange) {
-            this.writeValue();
+            this.emitValue();
         }
     }
     handleDateChange(value) {
         this.date = value;
         if (!this.isRange) {
-            this.writeValue();
+            this.emitValue();
         }
     }
-    writeValue() {
+    emitValue() {
         this.dateChange.emit(this.date);
+        this.onChange(this.date);
         this.close.emit();
     }
     handleCancelClick() {
         this.close.emit();
     }
+    getPeriodOrDefault(periodName, defaultPeriodName = PeriodLabel.TODAY) {
+        return this.periods.find(p => p.label === periodName) ||
+            this.periods.find(p => p.label === defaultPeriodName);
+    }
+    checkPeriodShouldBeSelectedByValue() {
+        if (!this.isRange) {
+            return;
+        }
+        this.periods.forEach((period) => period.selected = false);
+        const period = this.periods.find(p => p.label === this.date?.label);
+        if (!period) {
+            return;
+        }
+        period.selected = true;
+        this.isCustomRange = period.isCustomRange || false;
+    }
+    writeValue(value) {
+        if (this.isRange) {
+            const valueRange = value;
+            if (valueRange.label && valueRange.label !== PeriodLabel.CUSTOM_PERIOD) {
+                const period = this.getPeriodOrDefault(valueRange.label)?.getRange() || {};
+                this.date = { ...period, label: valueRange.label };
+            }
+            else if (valueRange.from && valueRange.to) {
+                this.date = { from: valueRange.from, to: valueRange.to, label: PeriodLabel.CUSTOM_PERIOD };
+            }
+            this.checkPeriodShouldBeSelectedByValue();
+        }
+        else {
+            this.date = value;
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouch = fn;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerComponent, selector: "ask-date-picker", inputs: { date: "date", isRange: "isRange" }, outputs: { dateChange: "dateChange", close: "close" }, ngImport: i0, template: "<div class=\"date-picker-container\">\n  <main class=\"main-content\">\n    <div\n      class=\"periods-list\"\n      *ngIf=\"isRange\"\n      [ngClass]=\"{ 'show-divider': isCustomRange }\"\n    >\n      <button\n        *ngFor=\"let period of periods\"\n        type=\"button\"\n        class=\"period\"\n        [ngClass]=\"{ 'selected': period.selected }\"\n        (click)=\"selectPeriod(period)\"\n      >\n        {{ period.label | translate }}\n      </button>\n    </div>\n\n    <ask-date-picker-calendar\n      *ngIf=\"!isRange || (isRange && isCustomRange)\"\n      [date]=\"date\"\n      (dateChange)=\"handleDateChange($event)\"\n      [isRange]=\"isRange\"\n    ></ask-date-picker-calendar>\n  </main>\n\n  <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n    <div class=\"date-display\">{{ dateDisplay }}</div>\n\n    <div class=\"button-tray\">\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'secondary'\"\n        (click)=\"handleCancelClick()\"\n      >\n        {{ 'CANCEL' | translate }}\n      </ask-button>\n\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'primary'\"\n        (click)=\"writeValue()\"\n      >\n        {{ 'APPLY' | translate }}\n      </ask-button>\n    </div>\n  </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ask-button", inputs: ["label", "size", "type", "rounded", "disabled", "labelSide"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "date"], outputs: ["dateChange"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.6", type: DatePickerComponent, selector: "ask-date-picker", inputs: { date: "date", isRange: "isRange" }, outputs: { dateChange: "dateChange", close: "close" }, providers: [VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"date-picker-container\">\n  <main class=\"main-content\">\n    <div\n      class=\"periods-list\"\n      *ngIf=\"isRange\"\n      [ngClass]=\"{ 'show-divider': isCustomRange }\"\n    >\n      <button\n        *ngFor=\"let period of periods\"\n        type=\"button\"\n        class=\"period\"\n        [ngClass]=\"{ 'selected': period.selected }\"\n        (click)=\"selectPeriod(period)\"\n      >\n        {{ period.label.toString() | translate }}\n      </button>\n    </div>\n\n    <ask-date-picker-calendar\n      *ngIf=\"!isRange || (isRange && isCustomRange)\"\n      [date]=\"date\"\n      (dateChange)=\"handleDateChange($event)\"\n      [isRange]=\"isRange\"\n    ></ask-date-picker-calendar>\n  </main>\n\n  <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n    <div class=\"date-display\">{{ dateDisplay }}</div>\n\n    <div class=\"button-tray\">\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'secondary'\"\n        (click)=\"handleCancelClick()\"\n      >\n        {{ 'CANCEL' | translate }}\n      </ask-button>\n\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'primary'\"\n        (click)=\"emitValue()\"\n      >\n        {{ 'APPLY' | translate }}\n      </ask-button>\n    </div>\n  </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ask-button", inputs: ["label", "size", "type", "rounded", "disabled", "labelSide"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DatePickerCalendarComponent, selector: "ask-date-picker-calendar", inputs: ["isRange", "date"], outputs: ["dateChange"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ask-date-picker', template: "<div class=\"date-picker-container\">\n  <main class=\"main-content\">\n    <div\n      class=\"periods-list\"\n      *ngIf=\"isRange\"\n      [ngClass]=\"{ 'show-divider': isCustomRange }\"\n    >\n      <button\n        *ngFor=\"let period of periods\"\n        type=\"button\"\n        class=\"period\"\n        [ngClass]=\"{ 'selected': period.selected }\"\n        (click)=\"selectPeriod(period)\"\n      >\n        {{ period.label | translate }}\n      </button>\n    </div>\n\n    <ask-date-picker-calendar\n      *ngIf=\"!isRange || (isRange && isCustomRange)\"\n      [date]=\"date\"\n      (dateChange)=\"handleDateChange($event)\"\n      [isRange]=\"isRange\"\n    ></ask-date-picker-calendar>\n  </main>\n\n  <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n    <div class=\"date-display\">{{ dateDisplay }}</div>\n\n    <div class=\"button-tray\">\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'secondary'\"\n        (click)=\"handleCancelClick()\"\n      >\n        {{ 'CANCEL' | translate }}\n      </ask-button>\n\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'primary'\"\n        (click)=\"writeValue()\"\n      >\n        {{ 'APPLY' | translate }}\n      </ask-button>\n    </div>\n  </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"] }]
+            args: [{ selector: 'ask-date-picker', providers: [VALUE_ACCESSOR], template: "<div class=\"date-picker-container\">\n  <main class=\"main-content\">\n    <div\n      class=\"periods-list\"\n      *ngIf=\"isRange\"\n      [ngClass]=\"{ 'show-divider': isCustomRange }\"\n    >\n      <button\n        *ngFor=\"let period of periods\"\n        type=\"button\"\n        class=\"period\"\n        [ngClass]=\"{ 'selected': period.selected }\"\n        (click)=\"selectPeriod(period)\"\n      >\n        {{ period.label.toString() | translate }}\n      </button>\n    </div>\n\n    <ask-date-picker-calendar\n      *ngIf=\"!isRange || (isRange && isCustomRange)\"\n      [date]=\"date\"\n      (dateChange)=\"handleDateChange($event)\"\n      [isRange]=\"isRange\"\n    ></ask-date-picker-calendar>\n  </main>\n\n  <footer class=\"footer\" *ngIf=\"isCustomRange && isRange\">\n    <div class=\"date-display\">{{ dateDisplay }}</div>\n\n    <div class=\"button-tray\">\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'secondary'\"\n        (click)=\"handleCancelClick()\"\n      >\n        {{ 'CANCEL' | translate }}\n      </ask-button>\n\n      <ask-button\n        [size]=\"'xsmall'\"\n        [type]=\"'primary'\"\n        (click)=\"emitValue()\"\n      >\n        {{ 'APPLY' | translate }}\n      </ask-button>\n    </div>\n  </footer>\n</div>\n", styles: [":root{--asksuite-orange: #FF5724;--white: #FFF;--grey-50: #F5F7FA;--grey-100: #E4E7EB;--grey-200: #CBD2D9;--grey-300: #9AA5B1;--grey-400: #7B8794;--grey-500: #616E7C;--grey-600: #52606D;--grey-700: #3E4C59;--grey-800: #2A3042;--grey-900: #1F2933;--yellow-50: #FFF8E2;--yellow-200: #FFECB3;--success-green: #4BAF50;--warning-yellow: #FFC107;--error-red: #E8453E;--shadow: rgba(42, 48, 66, .1607843137);--lightblue-tag: #CDF9F3;--lavender-tag: #D4DAF3;--green-tag: #CEEEAA;--pink-tag: #FBC5FF;--orange-tag: #FED5C9;--purple-tag: #DDBFE5;--yellow-tag: #FFE0B2;--blue-tag: #B2E5FD;--brown-tag: #EFC89C;--whatsapp-green: #68B35D;--facebook-blue: #0084FF;--instagram-pink: #D53E91;--google-blue: #345DC8;--telegram-blue: #34AADF;--telephone-yellow: #FECB00;--primary-background: #FFF;--secondary-background: #EFF3F8;--hover-background: #F5F7FA;--divider-background: #E4E7EB;--font-color-100: #2A3042;--font-color-200: #616E7C;--font-color-300: #9AA5B1}:root{--font-default: $font-default;--font-code: $font-code}:root{--font-xs: $font-xs;--font-sm: $font-sm;--font-md: $font-md;--font-lg: $font-lg;--font-xl: $font-xl;--font-xxl: $font-xxl}:root{--font-weight-regular: $font-weight-regular;--font-weight-medium: $font-weight-medium}:root{--radii-px: $radii-px;--radii-xs: $radii-xs;--radii-sm: $radii-sm;--radii-md: $radii-md;--radii-lg: $radii-lg;--radii-full: $radii-full}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:\"liga\";-webkit-font-smoothing:antialiased}*{box-sizing:border-box}*,button,select,textarea{font-family:Inter,sans-serif;font-weight:400}input{font-size:1rem}.date-picker-container{display:flex;flex-direction:column}.main-content{display:flex}.periods-list{display:flex;flex-direction:column;justify-content:start;gap:4px;padding:8px 0}.periods-list.show-divider{border-right:1px solid var(--divider-background)}.periods-list>.period{padding:8px 16px;color:var(--font-color-200);background:none;border:none;outline:none;cursor:pointer;transition:color .2s,background-color .2s;text-align:start}.periods-list>.period:hover,.periods-list>.period.selected{background-color:var(--hover-background)}.periods-list>.period:active,.periods-list>.period.selected{color:#ff5724}.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-top:1px solid var(--divider-background)}.footer>.button-tray{display:flex;gap:16px}.date-display{display:flex;font-size:.875rem;color:var(--font-color-200);gap:4px}.date-display>.date{width:79px}\n"] }]
         }], propDecorators: { date: [{
                 type: Input
             }], isRange: [{
@@ -979,6 +1038,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,
@@ -992,13 +1070,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,
@@ -1009,13 +1088,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,
@@ -1033,6 +1114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         CheckboxComponent,
                         DatePickerComponent,
                         DatePickerCalendarComponent,
+                        SkeletonComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -1042,7 +1124,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         CdkConnectedOverlay,
                         OverlayModule,
                         ScrollingModule,
-                        TranslateModule.forChild()
+                        TranslateModule.forChild(),
+                        NgxSkeletonLoaderModule,
                     ],
                     exports: [
                         ButtonComponent,
@@ -1056,8 +1139,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.6", ngImpor
                         ChipsComponent,
                         CheckboxComponent,
                         DatePickerComponent,
-                        DatePickerCalendarComponent
-                    ]
+                        DatePickerCalendarComponent,
+                        SkeletonComponent,
+                    ],
                 }]
         }] });
 
@@ -1069,5 +1153,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, DatePickerCalendarComponent, DatePickerComponent, DropdownContainerComponent, InputComponent, SelectComponent, asDate };
+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