@spicainternational/ngx-sds-components 5.13.0-beta.3 → 5.14.0

package/fesm2015/spicainternational-ngx-sds-components-src-lib-timer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-timer.mjs","sources":["../../../projects/ngx-sds-components/src/lib/timer/utils/timer.utils.ts","../../../projects/ngx-sds-components/src/lib/timer/services/timer.service.ts","../../../projects/ngx-sds-components/src/lib/timer/timer.module.ts","../../../projects/ngx-sds-components/src/lib/timer/spicainternational-ngx-sds-components-src-lib-timer.ts"],"sourcesContent":["/**\r\n * @public @function timeToNextFifteenMinutesInterval\r\n * @description\r\n * Function responsible for calc of time until next fifteen minutes interval. By fifteen minutes interval\r\n * we mean (e.g. 08:15, 08:30, 08:45,...)\r\n * @param { number } currentTimestampMs\r\n * @returns { number }\r\n */\r\nexport const timeToNextFifteenMinutesInterval = (currentTimestamp: number) => {\r\n    const timestampSeconds = currentTimestamp / 1000;\r\n\r\n    const numberOfSecondsIntoTheCurrentInterval = timestampSeconds % 900;\r\n\r\n    const numberOfSecondsToTheNextInterval = 900 - numberOfSecondsIntoTheCurrentInterval;\r\n    return numberOfSecondsToTheNextInterval;\r\n}\r\n\r\n/**\r\n * @public @function timeToNextFiveMinutesInterval\r\n * @description\r\n * Function responsible for calc of time until next five minutes interval. By five minutes interval\r\n * we mean (e.g. 08:05, 08:10, 08:15,...)\r\n * @param { number } currentTimestampMs\r\n * @returns { number }\r\n */\r\nexport const timeToNextFiveMinutesInterval = (currentTimestamp: number) => {\r\n    const timestampSeconds = currentTimestamp / 1000;\r\n\r\n    const numberOfSecondsIntoTheCurrentInterval = timestampSeconds % 300;\r\n\r\n    const numberOfSecondsToTheNextInterval = 300 - numberOfSecondsIntoTheCurrentInterval;\r\n    return numberOfSecondsToTheNextInterval;\r\n}\r\n\r\n/**\r\n * @public @function timeToNextHour\r\n * @description\r\n * Function responsible for calc of time until next hour\r\n * @param { number } currentTimestampMs\r\n * @returns { number }\r\n */\r\nexport const timeToNextHour = (currentTimestamp: number) => {\r\n    const timestampSeconds = currentTimestamp / 1000;\r\n\r\n    const numberOfSecondsIntoTheCurrentHour = timestampSeconds % 3600;\r\n\r\n    const numberOfSecondsToTheNextHour = 3600 - numberOfSecondsIntoTheCurrentHour;\r\n    return numberOfSecondsToTheNextHour;\r\n  };\r\n\r\n  /**\r\n   * @public @function timeToNextHalfHour\r\n   * @description\r\n   * Function responsible for calc of time until half hour\r\n   * @param { number } currentTimestampMs\r\n   * @returns { number }\r\n   */\r\nexport const timeToNextHalfHour = (currentTimestamp: number) => {\r\n    const timestampSeconds = currentTimestamp / 1000;\r\n\r\n    const numberOfSecondsIntoTheCurrentHalfHour = timestampSeconds % 1800;\r\n\r\n    const numberOfSecondsToTheNextHalfHour = 1800 - numberOfSecondsIntoTheCurrentHalfHour;\r\n    return numberOfSecondsToTheNextHalfHour;\r\n  };\r\n\r\n/**\r\n * @public @function timeToNextMinuteInterval\r\n * @description\r\n * Function responsible for calc of time until next minute interval. By minute interval\r\n * we mean (e.g. 08:00, 08:01, 08:02,...)\r\n * @param { number } currentTimestampMs\r\n * @returns { number }\r\n */\r\nexport const timeToNextMinuteInterval = (currentTimestamp: number) => {\r\n    const timestampSeconds = currentTimestamp / 1000;\r\n\r\n    const numberOfSecondsIntoTheCurrentInterval = timestampSeconds % 60;\r\n\r\n    const numberOfSecondsToTheNextInterval = 60 - numberOfSecondsIntoTheCurrentInterval;\r\n    return numberOfSecondsToTheNextInterval;\r\n}\r\n\r\n/**\r\n * @public @function timeToNextSecondInterval\r\n * @description\r\n * Function responsible for calc of time until next second interval. By second interval\r\n * we mean (e.g. 08:00:01, 08:00:01, 08:00:02,...)\r\n * @param { number } currentTimestampMs\r\n * @returns { number }\r\n */\r\nexport const timeToNextSecondInterval = (currentTimestamp: number) => {\r\n    const timestampSeconds = currentTimestamp;\r\n\r\n    const numberOfMilisecSecondsIntoTheCurrentInterval = timestampSeconds % 999;\r\n\r\n    const numberOfMilisecondsSecondsToTheNextInterval = 999 - numberOfMilisecSecondsIntoTheCurrentInterval;\r\n    return numberOfMilisecondsSecondsToTheNextInterval;\r\n}\r\n\r\n/**\r\n * @public @function timeToNextTenMinutesInterval\r\n * @description\r\n * Function responsible for calc of time until next ten minutes interval. By ten minutes interval\r\n * we mean (e.g. 08:10, 08:20, 08:30,...)\r\n * @param { number } currentTimestampMs\r\n * @returns { number }\r\n */\r\nexport const timeToNextTenMinutesInterval = (currentTimestamp: number) => {\r\n    const timestampSeconds = currentTimestamp / 1000;\r\n\r\n    const numberOfSecondsIntoTheCurrentInterval = timestampSeconds % 600;\r\n\r\n    const numberOfSecondsToTheNextInterval = 600 - numberOfSecondsIntoTheCurrentInterval;\r\n    return numberOfSecondsToTheNextInterval;\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { BehaviorSubject, Observable, Subscription, interval } from 'rxjs';\r\nimport { timeToNextFifteenMinutesInterval, timeToNextFiveMinutesInterval, timeToNextHalfHour, timeToNextHour, timeToNextMinuteInterval, timeToNextSecondInterval, timeToNextTenMinutesInterval } from '../utils';\r\nimport { debounceTime, skip } from 'rxjs/operators';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class TimerService {\r\n    /**\r\n     * @description\r\n     * Timer emitted every 15 minutes (e.g. 08:00, 08:15, 08:30, etc.)\r\n     */\r\n    public fifteenMinutesInterval$: Observable<void>;\r\n\r\n    /**\r\n     * @description\r\n     * Timer emitted every 5 minutes (e.g. 08:00, 08:05, 08:10, etc.)\r\n     */\r\n    public fiveMinutesInterval$: Observable<void>;\r\n\r\n    /**\r\n     * @description\r\n     * Timer that invokes each full hour\r\n     */\r\n    public fullHourInterval$: Observable<void>;\r\n\r\n    /**\r\n     * @description\r\n     * Timer emitted every 30 minutes at full and half hour (e.g. at 10:00, 10:30, 11:00, etc.)\r\n     */\r\n    public halfHourInterval$: Observable<void>;\r\n\r\n    /**\r\n     * @description\r\n     * Timer emitted every minute (e.g. 08:00, 08:01, 08:02, etc.)\r\n     */\r\n    public minuteInterval$: Observable<void>;\r\n\r\n    /**\r\n     * @description\r\n     * Timer emitted every second\r\n     */\r\n    public secondsInterval$: Observable<void>;\r\n\r\n    /**\r\n     * @description\r\n     * Timer emitted every 10 minutes (e.g. 08:00, 08:10, 08:20, etc.)\r\n     */\r\n    public tenMinutesInterval$: Observable<void>;\r\n\r\n    /**\r\n     * @description\r\n     * Source for fifteen minute interval\r\n     */\r\n    private _fifteenMinutesInterval: BehaviorSubject<void> = new BehaviorSubject<void>(undefined)\r\n\r\n    /**\r\n     * @description\r\n     * Source for five minute interval\r\n     */\r\n    private _fiveMinutesInterval: BehaviorSubject<void> = new BehaviorSubject<void>(undefined)\r\n\r\n    /**\r\n     * @description\r\n     * Source for half hour interval\r\n     */\r\n    private _fullHourInterval: BehaviorSubject<void> = new BehaviorSubject<void>(\r\n    undefined\r\n    );\r\n\r\n    /**\r\n     * @description\r\n     * Source for half hour interval\r\n     */\r\n    private _halfHourInterval: BehaviorSubject<void> = new BehaviorSubject<void>(\r\n    undefined\r\n    );\r\n\r\n    /**\r\n     * @description\r\n     * Source for minute interval\r\n     */\r\n    private _minuteInterval: BehaviorSubject<void> = new BehaviorSubject<void>(undefined)\r\n\r\n    /**\r\n     * @description\r\n     * Source for secong interval\r\n     */\r\n    private _secondsInterval: BehaviorSubject<void> = new BehaviorSubject<void>(undefined);\r\n\r\n    /**\r\n     * @description\r\n     * Source for ten minutes interval\r\n     */\r\n    private _tenMinutesInterval: BehaviorSubject<void> = new BehaviorSubject<void>(undefined)\r\n\r\n    private _subscriptions: Subscription[] = [];\r\n\r\nconstructor() {\r\n    this.fifteenMinutesInterval$ = this._fifteenMinutesInterval.asObservable().pipe(skip(1));\r\n    this.fiveMinutesInterval$ = this._fiveMinutesInterval.asObservable().pipe(skip(1));\r\n    this.fullHourInterval$ = this._fullHourInterval.asObservable().pipe(skip(1));\r\n    this.halfHourInterval$ = this._halfHourInterval.asObservable().pipe(skip(1));\r\n    this.minuteInterval$ = this._minuteInterval.asObservable().pipe().pipe(skip(1));\r\n    this.secondsInterval$ = this._secondsInterval.asObservable().pipe(skip(1));\r\n    this.tenMinutesInterval$ = this._tenMinutesInterval.asObservable().pipe(skip(1));\r\n\r\n    const timeOffsetToFullSecond = timeToNextSecondInterval(new Date().getTime())\r\n\r\n    // This observable will invoke each second while app is running\r\n    const ticksSubscription: Subscription = interval(1000).pipe(debounceTime(timeOffsetToFullSecond)).subscribe(\r\n        intervalTick => {\r\n            const now = new Date().getTime();\r\n\r\n        const timeRemainingToNextMinuteInterval = timeToNextMinuteInterval(now);\r\n\r\n        const timeRemaingingToNextFiveMinutesInterval = timeToNextFiveMinutesInterval(now);\r\n\r\n        const timeRemainingToNextTenMinutesInterval = timeToNextTenMinutesInterval(now);\r\n\r\n        const timeRemainingToNextFifteenMinutesInterval = timeToNextFifteenMinutesInterval(now);\r\n\r\n        const timeRemainingToNextFullHour = timeToNextHour(\r\n            now\r\n        );\r\n\r\n        const timeRemainingToNextHalfHour = timeToNextHalfHour(\r\n            now\r\n        );\r\n\r\n        this._secondsInterval.next();\r\n\r\n        // Check if its minute tick\r\n        if (timeRemainingToNextMinuteInterval > 59) {\r\n            this._minuteInterval.next();\r\n        }\r\n\r\n        // Check if its five minute interval tick\r\n        if (timeRemaingingToNextFiveMinutesInterval > 299) {\r\n            this._fiveMinutesInterval.next();\r\n        }\r\n\r\n        // Check if its ten minute interval\r\n        if (timeRemainingToNextTenMinutesInterval > 599) {\r\n            this._tenMinutesInterval.next();\r\n        }\r\n\r\n        // Check if its fifteen minute interval\r\n        if (timeRemainingToNextFifteenMinutesInterval > 899) {\r\n            this._fifteenMinutesInterval.next();\r\n        }\r\n\r\n        // Check if its half hour tick\r\n        if (timeRemainingToNextHalfHour > 1799) {\r\n            this._halfHourInterval.next();\r\n        }\r\n\r\n        // Check if its full hour tick\r\n        if (timeRemainingToNextFullHour > 3599) {\r\n            this._fullHourInterval.next();\r\n        }\r\n\r\n        // Define any additional intervals that might be needed\r\n        }\r\n    );\r\n\r\n    this._subscriptions.push(ticksSubscription);\r\n}\r\n}\r\n","import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { TimerService } from './services';\r\n\r\n@NgModule({\r\n  declarations: [],\r\n  imports: [\r\n    CommonModule\r\n  ]\r\n})\r\nexport class SdsTimerModule {\r\n    static forRoot(): ModuleWithProviders<SdsTimerModule> {\r\n        return {\r\n            ngModule: SdsTimerModule,\r\n            providers: [TimerService]\r\n        }\r\n    }\r\n\r\n    constructor(@Optional() @SkipSelf() parentModule: SdsTimerModule) {\r\n        if (parentModule) {\r\n          throw new Error(\r\n            'TimerModule is already loaded. Import it in the AppModule only'\r\n          );\r\n        }\r\n      }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/spicainternational-ngx-sds-components.mjs

@@ -3,12 +3,15 @@ export * from '@spicainternational/ngx-sds-components/src/lib/avatar';
 export * from '@spicainternational/ngx-sds-components/src/lib/badge';
 export * from '@spicainternational/ngx-sds-components/src/lib/callout';
 export * from '@spicainternational/ngx-sds-components/src/lib/color-picker';
+export * from '@spicainternational/ngx-sds-components/src/lib/ellipsis';
 export * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';
 export * from '@spicainternational/ngx-sds-components/src/lib/date-picker';
 export * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
 export * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';
 export * from '@spicainternational/ngx-sds-components/src/lib/duration-box';
 export * from '@spicainternational/ngx-sds-components/src/lib/highlight-text';
+export * from '@spicainternational/ngx-sds-components/src/lib/intersection';
+export * from '@spicainternational/ngx-sds-components/src/lib/keyboard-shortcut';
 export * from '@spicainternational/ngx-sds-components/src/lib/layout';
 export * from '@spicainternational/ngx-sds-components/src/lib/message';
 export * from '@spicainternational/ngx-sds-components/src/lib/modal';
@@ -19,6 +22,7 @@ export * from '@spicainternational/ngx-sds-components/src/lib/quick-info';
 export * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';
 export * from '@spicainternational/ngx-sds-components/src/lib/side-bar';
 export * from '@spicainternational/ngx-sds-components/src/lib/static-value';
+export * from '@spicainternational/ngx-sds-components/src/lib/timer';
 export * from '@spicainternational/ngx-sds-components/src/lib/tooltip';
 
 /*

package/fesm2015/spicainternational-ngx-sds-components.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/badge';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/highlight-text';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/message';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/static-value';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}
+{"version":3,"file":"spicainternational-ngx-sds-components.mjs","sources":["../../../projects/ngx-sds-components/src/public-api.ts","../../../projects/ngx-sds-components/src/spicainternational-ngx-sds-components.ts"],"sourcesContent":["/*\r\n * Public API Surface of ngx-sds-components\r\n */\r\n\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/app-switcher';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/avatar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/badge';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/callout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/color-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/ellipsis';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/expansion-panel';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-picker';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/date-pipes';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-pipe';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/duration-box';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/highlight-text';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/intersection';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/keyboard-shortcut';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/layout';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/message';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/modal';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/navigation';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/page-header';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/pane';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/quick-info';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/segmented-control';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/side-bar';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/static-value';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/timer';\r\nexport * from '@spicainternational/ngx-sds-components/src/lib/tooltip';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEG;;ACFH;;AAEG"}

package/fesm2020/spicainternational-ngx-sds-components-src-lib-color-picker.mjs

@@ -8,16 +8,18 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i2 from 'devextreme-angular/ui/popover';
 import { DxPopoverModule } from 'devextreme-angular/ui/popover';
 
-// import { library } from '@fortawesome/fontawesome-svg-core';
-// import { faCheck } from '@fortawesome/pro-solid-svg-icons';
 class SdsColorPickerComponent {
     constructor() {
         this.colors = [];
         this.disabled = false;
         this.style = 'inline';
+        this.showCaret = true;
+        this.shape = 'circle';
         this.showDropdown = false;
         this.checkIcon = faCheck;
         this.gridSize = 1;
+        this.circleRadius = '100%';
+        this.squareRadius = '10%';
         this.selectedColorChange = new EventEmitter();
         this.elementUUID = `sds-cp-${Math.ceil(Math.random() * 1000000)}`;
         // library.add(faCheck);
@@ -39,31 +41,9 @@ class SdsColorPickerComponent {
     onKeyDown($event) {
         if ($event.key === 'ArrowUp' || $event.key === 'ArrowDown') {
             $event.preventDefault();
-            // const modifier = $event.key === 'ArrowUp' ? -this.gridSize : this.gridSize;
-            // const color = this.selectedColor || this.defaultColor;
-            // if (color) {
-            //     const colorIndex = this.colors.indexOf(color);
-            //     let nextColorIndex = (colorIndex + modifier) % this.colors.length;
-            //     if (nextColorIndex < 0) {
-            //         nextColorIndex = this.colors.length + modifier;
-            //     }
-            //     this.selectedColor = this.colors[nextColorIndex];
-            //     console.log(nextColorIndex);
-            // }            
         }
         if ($event.key === 'ArrowLeft' || $event.key === 'ArrowRight') {
             $event.preventDefault();
-            // const modifier = $event.key === 'ArrowLeft' ? -1 : 1;
-            // const color = this.selectedColor || this.defaultColor;
-            // if (color) {
-            //     const colorIndex = this.colors.indexOf(color);
-            //     let nextColorIndex = (colorIndex + modifier) % this.colors.length;
-            //     if (nextColorIndex < 0) {
-            //         nextColorIndex = this.colors.length + modifier;
-            //     }
-            //     this.selectedColor = this.colors[nextColorIndex];
-            //     console.log(nextColorIndex);
-            // }            
         }
     }
     toggleDropdown() {
@@ -71,10 +51,10 @@ class SdsColorPickerComponent {
     }
 }
 SdsColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsColorPickerComponent, selector: "sds-color-picker", inputs: { colors: "colors", disabled: "disabled", selectedColor: "selectedColor", defaultColor: "defaultColor", style: "style" }, outputs: { selectedColorChange: "selectedColorChange" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    *ngIf=\"style === 'inline'\"\r\n    class=\"color-tiles-container-inline\"\r\n>\r\n    <div\r\n        *ngFor=\"let color of colors\"\r\n        [style.background-color]=\"color\"\r\n        [style.border-color]=\"color\"\r\n        class=\"color-tile\"\r\n        [class.selected]=\"selectedColor === color\"\r\n        (click)=\"selectColor(color)\"\r\n    >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color\"\r\n            [icon]=\"['fas', 'check']\"\r\n        >\r\n        </fa-icon>\r\n    </div>\r\n</div>\r\n\r\n\r\n<button\r\n    *ngIf=\"style !== 'inline'\"\r\n    [id]=\"elementUUID\"\r\n    type=\"button\"\r\n    class=\"btn d-flex align-items-center\"\r\n    \r\n    [class.dropdown-toggle]=\"style === 'input'\"\r\n    [class.border]=\"style === 'input'\"\r\n    \r\n    [class.p-1]=\"style == 'plain'\"\r\n    [class.rounded-circle]=\"style == 'plain'\"\r\n    \r\n    aria-controls=\"dropdown-basic\"\r\n    (click)=\"toggleDropdown()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n>\r\n\r\n    <div\r\n        class=\"color-tile color-tile-dropdown\"\r\n        [class.color-tile-dropdown]=\"style === 'input'\"\r\n        [style.background-color]=\"selectedColor || defaultColor\"\r\n        [class.undefined-color]=\"!(selectedColor || defaultColor)\"\r\n    >\r\n    </div>\r\n    <div \r\n        *ngIf=\"style === 'input'\"\r\n        class=\"caret ms-1\">\r\n    </div>\r\n</button>\r\n\r\n<dx-popover\r\n    target=\"#{{elementUUID}}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDropdown\"\r\n>\r\n    <div\r\n        class=\"color-tiles-container-square\"\r\n        [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\r\n    >\r\n        <div\r\n            *ngFor=\"let color of colors\"\r\n            [style.background-color]=\"color\"\r\n            class=\"color-tile color-tile-popover rounded-circle\"\r\n            (click)=\"selectColor(color)\"\r\n        >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color || !selectedColor && defaultColor === color\"\r\n            [icon]=\"checkIcon\"\r\n        >\r\n        </fa-icon>\r\n\r\n        </div>\r\n    </div>\r\n</dx-popover>", styles: [".color-tiles-container-inline{display:flex;gap:.25rem;color:#fff}.color-tiles-container-square{display:grid;grid-gap:.5rem;gap:.5rem;color:#fff}.color-tile{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:100%;cursor:pointer}.color-tile.color-tile-dropdown{height:1.5rem;width:1.5rem}.color-tile.color-tile-popover:hover{filter:brightness(90%)}.color-tile fa-icon{line-height:1rem}.color-tile.undefined-color{border-color:gray;border-style:solid;border-width:1px}.btn:focus-visible{outline:0;box-shadow:0 0 0 .2rem #3b8fc240}.btn:active{border-color:transparent}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+SdsColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsColorPickerComponent, selector: "sds-color-picker", inputs: { colors: "colors", disabled: "disabled", selectedColor: "selectedColor", defaultColor: "defaultColor", style: "style", showCaret: "showCaret", shape: "shape" }, outputs: { selectedColorChange: "selectedColorChange" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    *ngIf=\"style === 'inline'\"\r\n    class=\"color-tiles-container-inline\"\r\n    [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n>\r\n    <div\r\n        *ngFor=\"let color of colors\"\r\n        [style.background-color]=\"color\"\r\n        [style.border-color]=\"color\"\r\n        class=\"color-tile\"\r\n        [class.selected]=\"selectedColor === color\"\r\n        (click)=\"selectColor(color)\"\r\n    >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color\"\r\n            [icon]=\"['fas', 'check']\"\r\n        >\r\n        </fa-icon>\r\n    </div>\r\n</div>\r\n\r\n\r\n<button\r\n    *ngIf=\"style === 'dropdown'\"\r\n    [id]=\"elementUUID\"\r\n    type=\"button\"\r\n    class=\"btn d-flex align-items-center\"\r\n    [class.dropdown-toggle]=\"showCaret\"\r\n    [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n    aria-controls=\"dropdown-basic\"\r\n    (click)=\"toggleDropdown()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n>\r\n\r\n    <div\r\n        class=\"color-tile color-tile-dropdown\"\r\n        [style.background-color]=\"selectedColor || defaultColor\"\r\n        [class.undefined-color]=\"!(selectedColor || defaultColor)\"\r\n    >\r\n    </div>\r\n</button>\r\n\r\n<dx-popover\r\n    target=\"#{{elementUUID}}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDropdown\"\r\n>\r\n    <div\r\n        class=\"color-tiles-container-square\"\r\n        [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\r\n        [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n    >\r\n        <div\r\n            *ngFor=\"let color of colors\"\r\n            [style.background-color]=\"color\"\r\n            class=\"color-tile color-tile-popover\"\r\n            (click)=\"selectColor(color)\"\r\n        >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color || !selectedColor && defaultColor === color\"\r\n            [icon]=\"checkIcon\"\r\n        >\r\n        </fa-icon>\r\n\r\n        </div>\r\n    </div>\r\n</dx-popover>", styles: [".color-tiles-container-inline{display:flex;gap:.5rem;color:#fff}.color-tiles-container-square{display:grid;grid-gap:1rem;gap:1rem;color:#fff}.color-tile{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:var(--sds-cp-radius);cursor:pointer}.color-tile.color-tile-popover:hover{filter:brightness(90%)}.color-tile fa-icon{line-height:1rem}.color-tile.undefined-color{border-color:gray;border-style:solid;border-width:1px}.btn:focus-visible{outline:0;box-shadow:0 0 0 .2rem #3b8fc240}.btn:active{border-color:transparent}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-color-picker', template: "<div\r\n    *ngIf=\"style === 'inline'\"\r\n    class=\"color-tiles-container-inline\"\r\n>\r\n    <div\r\n        *ngFor=\"let color of colors\"\r\n        [style.background-color]=\"color\"\r\n        [style.border-color]=\"color\"\r\n        class=\"color-tile\"\r\n        [class.selected]=\"selectedColor === color\"\r\n        (click)=\"selectColor(color)\"\r\n    >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color\"\r\n            [icon]=\"['fas', 'check']\"\r\n        >\r\n        </fa-icon>\r\n    </div>\r\n</div>\r\n\r\n\r\n<button\r\n    *ngIf=\"style !== 'inline'\"\r\n    [id]=\"elementUUID\"\r\n    type=\"button\"\r\n    class=\"btn d-flex align-items-center\"\r\n    \r\n    [class.dropdown-toggle]=\"style === 'input'\"\r\n    [class.border]=\"style === 'input'\"\r\n    \r\n    [class.p-1]=\"style == 'plain'\"\r\n    [class.rounded-circle]=\"style == 'plain'\"\r\n    \r\n    aria-controls=\"dropdown-basic\"\r\n    (click)=\"toggleDropdown()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n>\r\n\r\n    <div\r\n        class=\"color-tile color-tile-dropdown\"\r\n        [class.color-tile-dropdown]=\"style === 'input'\"\r\n        [style.background-color]=\"selectedColor || defaultColor\"\r\n        [class.undefined-color]=\"!(selectedColor || defaultColor)\"\r\n    >\r\n    </div>\r\n    <div \r\n        *ngIf=\"style === 'input'\"\r\n        class=\"caret ms-1\">\r\n    </div>\r\n</button>\r\n\r\n<dx-popover\r\n    target=\"#{{elementUUID}}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDropdown\"\r\n>\r\n    <div\r\n        class=\"color-tiles-container-square\"\r\n        [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\r\n    >\r\n        <div\r\n            *ngFor=\"let color of colors\"\r\n            [style.background-color]=\"color\"\r\n            class=\"color-tile color-tile-popover rounded-circle\"\r\n            (click)=\"selectColor(color)\"\r\n        >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color || !selectedColor && defaultColor === color\"\r\n            [icon]=\"checkIcon\"\r\n        >\r\n        </fa-icon>\r\n\r\n        </div>\r\n    </div>\r\n</dx-popover>", styles: [".color-tiles-container-inline{display:flex;gap:.25rem;color:#fff}.color-tiles-container-square{display:grid;grid-gap:.5rem;gap:.5rem;color:#fff}.color-tile{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:100%;cursor:pointer}.color-tile.color-tile-dropdown{height:1.5rem;width:1.5rem}.color-tile.color-tile-popover:hover{filter:brightness(90%)}.color-tile fa-icon{line-height:1rem}.color-tile.undefined-color{border-color:gray;border-style:solid;border-width:1px}.btn:focus-visible{outline:0;box-shadow:0 0 0 .2rem #3b8fc240}.btn:active{border-color:transparent}\n"] }]
+            args: [{ selector: 'sds-color-picker', template: "<div\r\n    *ngIf=\"style === 'inline'\"\r\n    class=\"color-tiles-container-inline\"\r\n    [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n>\r\n    <div\r\n        *ngFor=\"let color of colors\"\r\n        [style.background-color]=\"color\"\r\n        [style.border-color]=\"color\"\r\n        class=\"color-tile\"\r\n        [class.selected]=\"selectedColor === color\"\r\n        (click)=\"selectColor(color)\"\r\n    >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color\"\r\n            [icon]=\"['fas', 'check']\"\r\n        >\r\n        </fa-icon>\r\n    </div>\r\n</div>\r\n\r\n\r\n<button\r\n    *ngIf=\"style === 'dropdown'\"\r\n    [id]=\"elementUUID\"\r\n    type=\"button\"\r\n    class=\"btn d-flex align-items-center\"\r\n    [class.dropdown-toggle]=\"showCaret\"\r\n    [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n    aria-controls=\"dropdown-basic\"\r\n    (click)=\"toggleDropdown()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n>\r\n\r\n    <div\r\n        class=\"color-tile color-tile-dropdown\"\r\n        [style.background-color]=\"selectedColor || defaultColor\"\r\n        [class.undefined-color]=\"!(selectedColor || defaultColor)\"\r\n    >\r\n    </div>\r\n</button>\r\n\r\n<dx-popover\r\n    target=\"#{{elementUUID}}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDropdown\"\r\n>\r\n    <div\r\n        class=\"color-tiles-container-square\"\r\n        [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\r\n        [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n    >\r\n        <div\r\n            *ngFor=\"let color of colors\"\r\n            [style.background-color]=\"color\"\r\n            class=\"color-tile color-tile-popover\"\r\n            (click)=\"selectColor(color)\"\r\n        >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color || !selectedColor && defaultColor === color\"\r\n            [icon]=\"checkIcon\"\r\n        >\r\n        </fa-icon>\r\n\r\n        </div>\r\n    </div>\r\n</dx-popover>", styles: [".color-tiles-container-inline{display:flex;gap:.5rem;color:#fff}.color-tiles-container-square{display:grid;grid-gap:1rem;gap:1rem;color:#fff}.color-tile{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:var(--sds-cp-radius);cursor:pointer}.color-tile.color-tile-popover:hover{filter:brightness(90%)}.color-tile fa-icon{line-height:1rem}.color-tile.undefined-color{border-color:gray;border-style:solid;border-width:1px}.btn:focus-visible{outline:0;box-shadow:0 0 0 .2rem #3b8fc240}.btn:active{border-color:transparent}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { colors: [{
                 type: Input
             }], disabled: [{
@@ -87,6 +67,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Output
             }], style: [{
                 type: Input
+            }], showCaret: [{
+                type: Input
+            }], shape: [{
+                type: Input
             }] } });
 
 const components = [SdsColorPickerComponent];

package/fesm2020/spicainternational-ngx-sds-components-src-lib-color-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-color-picker.mjs","sources":["../../../projects/ngx-sds-components/src/lib/color-picker/color-picker.component.ts","../../../projects/ngx-sds-components/src/lib/color-picker/color-picker.component.html","../../../projects/ngx-sds-components/src/lib/color-picker/color-picker.module.ts","../../../projects/ngx-sds-components/src/lib/color-picker/spicainternational-ngx-sds-components-src-lib-color-picker.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\r\nimport { faCheck } from '@fortawesome/pro-solid-svg-icons';\r\n// import { library } from '@fortawesome/fontawesome-svg-core';\r\n// import { faCheck } from '@fortawesome/pro-solid-svg-icons';\r\n\r\n@Component({\r\n    selector: 'sds-color-picker',\r\n    templateUrl: './color-picker.component.html',\r\n    styleUrls: ['./color-picker.component.scss'],\r\n})\r\nexport class SdsColorPickerComponent implements OnInit, OnChanges {\r\n    @Input() colors: Array<string> = [];\r\n    @Input() disabled: boolean = false;\r\n    @Input() selectedColor?: string;\r\n    @Input() defaultColor?: string;\r\n    @Output() selectedColorChange: EventEmitter<string>;\r\n    @Input() style: 'inline' | 'plain' | 'input' = 'inline'\r\n\r\n    // public checkIcon = faCheck;\r\n    public dropdownGridTemplateColumns?: string;\r\n    public showDropdown = false;\r\n    public elementUUID; // = 'sds-cp-' + crypto.randomUUID();\r\n\r\n    public checkIcon = faCheck;\r\n\r\n    private gridSize = 1;\r\n\r\n    constructor() {\r\n        this.selectedColorChange = new EventEmitter<string>();\r\n        this.elementUUID = `sds-cp-${Math.ceil(Math.random() * 1000000)}`;  \r\n\r\n        // library.add(faCheck);\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['colors']) {\r\n            this.gridSize = Math.ceil(Math.sqrt(this.colors.length));\r\n            this.dropdownGridTemplateColumns = `repeat(${this.gridSize}, 1fr)`;\r\n        }\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public selectColor(color: string): void {\r\n        if (!this.disabled) {\r\n            this.selectedColor = color;\r\n            this.selectedColorChange.emit(color);\r\n            this.showDropdown = false;\r\n        }\r\n    }\r\n\r\n    public onKeyDown($event: KeyboardEvent) {\r\n\r\n        if ($event.key === 'ArrowUp' || $event.key === 'ArrowDown') {\r\n            $event.preventDefault();\r\n            // const modifier = $event.key === 'ArrowUp' ? -this.gridSize : this.gridSize;\r\n            // const color = this.selectedColor || this.defaultColor;\r\n            // if (color) {\r\n            //     const colorIndex = this.colors.indexOf(color);\r\n            //     let nextColorIndex = (colorIndex + modifier) % this.colors.length;\r\n            //     if (nextColorIndex < 0) {\r\n            //         nextColorIndex = this.colors.length + modifier;\r\n            //     }\r\n            //     this.selectedColor = this.colors[nextColorIndex];\r\n\r\n            //     console.log(nextColorIndex);\r\n            // }            \r\n        }\r\n\r\n        if ($event.key === 'ArrowLeft' || $event.key === 'ArrowRight') {\r\n            $event.preventDefault();\r\n            // const modifier = $event.key === 'ArrowLeft' ? -1 : 1;\r\n            // const color = this.selectedColor || this.defaultColor;\r\n            // if (color) {\r\n            //     const colorIndex = this.colors.indexOf(color);\r\n            //     let nextColorIndex = (colorIndex + modifier) % this.colors.length;\r\n            //     if (nextColorIndex < 0) {\r\n            //         nextColorIndex = this.colors.length + modifier;\r\n            //     }\r\n            //     this.selectedColor = this.colors[nextColorIndex];\r\n\r\n            //     console.log(nextColorIndex);\r\n            // }            \r\n        }        \r\n    }\r\n\r\n    \r\n    public toggleDropdown(){\r\n        this.showDropdown = !this.showDropdown;\r\n\r\n    }\r\n}\r\n","<div\r\n    *ngIf=\"style === 'inline'\"\r\n    class=\"color-tiles-container-inline\"\r\n>\r\n    <div\r\n        *ngFor=\"let color of colors\"\r\n        [style.background-color]=\"color\"\r\n        [style.border-color]=\"color\"\r\n        class=\"color-tile\"\r\n        [class.selected]=\"selectedColor === color\"\r\n        (click)=\"selectColor(color)\"\r\n    >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color\"\r\n            [icon]=\"['fas', 'check']\"\r\n        >\r\n        </fa-icon>\r\n    </div>\r\n</div>\r\n\r\n\r\n<button\r\n    *ngIf=\"style !== 'inline'\"\r\n    [id]=\"elementUUID\"\r\n    type=\"button\"\r\n    class=\"btn d-flex align-items-center\"\r\n    \r\n    [class.dropdown-toggle]=\"style === 'input'\"\r\n    [class.border]=\"style === 'input'\"\r\n    \r\n    [class.p-1]=\"style == 'plain'\"\r\n    [class.rounded-circle]=\"style == 'plain'\"\r\n    \r\n    aria-controls=\"dropdown-basic\"\r\n    (click)=\"toggleDropdown()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n>\r\n\r\n    <div\r\n        class=\"color-tile color-tile-dropdown\"\r\n        [class.color-tile-dropdown]=\"style === 'input'\"\r\n        [style.background-color]=\"selectedColor || defaultColor\"\r\n        [class.undefined-color]=\"!(selectedColor || defaultColor)\"\r\n    >\r\n    </div>\r\n    <div \r\n        *ngIf=\"style === 'input'\"\r\n        class=\"caret ms-1\">\r\n    </div>\r\n</button>\r\n\r\n<dx-popover\r\n    target=\"#{{elementUUID}}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDropdown\"\r\n>\r\n    <div\r\n        class=\"color-tiles-container-square\"\r\n        [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\r\n    >\r\n        <div\r\n            *ngFor=\"let color of colors\"\r\n            [style.background-color]=\"color\"\r\n            class=\"color-tile color-tile-popover rounded-circle\"\r\n            (click)=\"selectColor(color)\"\r\n        >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color || !selectedColor && defaultColor === color\"\r\n            [icon]=\"checkIcon\"\r\n        >\r\n        </fa-icon>\r\n\r\n        </div>\r\n    </div>\r\n</dx-popover>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsColorPickerComponent } from './color-picker.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\n\r\n\r\nconst components = [SdsColorPickerComponent];\r\n@NgModule({\r\n  declarations: [\r\n    ...components\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    FontAwesomeModule,\r\n    DxPopoverModule,\r\n  ],\r\n  exports: [\r\n      ...components\r\n  ]\r\n})\r\nexport class SdsColorPickerModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"spicainternational-ngx-sds-components-src-lib-color-picker.mjs","sources":["../../../projects/ngx-sds-components/src/lib/color-picker/color-picker.component.ts","../../../projects/ngx-sds-components/src/lib/color-picker/color-picker.component.html","../../../projects/ngx-sds-components/src/lib/color-picker/color-picker.module.ts","../../../projects/ngx-sds-components/src/lib/color-picker/spicainternational-ngx-sds-components-src-lib-color-picker.ts"],"sourcesContent":["import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';\r\nimport { faCheck } from '@fortawesome/pro-solid-svg-icons';\r\n\r\n@Component({\r\n    selector: 'sds-color-picker',\r\n    templateUrl: './color-picker.component.html',\r\n    styleUrls: ['./color-picker.component.scss'],\r\n})\r\nexport class SdsColorPickerComponent implements OnInit, OnChanges {\r\n    @Input() colors: Array<string> = [];\r\n    @Input() disabled: boolean = false;\r\n    @Input() selectedColor?: string;\r\n    @Input() defaultColor?: string;\r\n    @Output() selectedColorChange: EventEmitter<string>;\r\n    @Input() style: 'inline' | 'dropdown' = 'inline'\r\n    @Input() showCaret: boolean = true;\r\n    @Input() shape: 'circle' | 'square' = 'circle';\r\n\r\n    // public checkIcon = faCheck;\r\n    public dropdownGridTemplateColumns?: string;\r\n    public showDropdown = false;\r\n    public elementUUID; // = 'sds-cp-' + crypto.randomUUID();\r\n\r\n    public checkIcon = faCheck;\r\n\r\n    private gridSize = 1;\r\n\r\n    public circleRadius = '100%';\r\n    public squareRadius = '10%';\r\n\r\n    constructor() {\r\n        this.selectedColorChange = new EventEmitter<string>();\r\n        this.elementUUID = `sds-cp-${Math.ceil(Math.random() * 1000000)}`;  \r\n\r\n        // library.add(faCheck);\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if (changes['colors']) {\r\n            this.gridSize = Math.ceil(Math.sqrt(this.colors.length));\r\n            this.dropdownGridTemplateColumns = `repeat(${this.gridSize}, 1fr)`;\r\n        }\r\n    }\r\n\r\n    ngOnInit(): void {}\r\n\r\n    public selectColor(color: string): void {\r\n        if (!this.disabled) {\r\n            this.selectedColor = color;\r\n            this.selectedColorChange.emit(color);\r\n            this.showDropdown = false;\r\n        }\r\n    }\r\n\r\n    public onKeyDown($event: KeyboardEvent) {\r\n\r\n        if ($event.key === 'ArrowUp' || $event.key === 'ArrowDown') {\r\n            $event.preventDefault();       \r\n        }\r\n\r\n        if ($event.key === 'ArrowLeft' || $event.key === 'ArrowRight') {\r\n            $event.preventDefault();        \r\n        }        \r\n    }\r\n\r\n    \r\n    public toggleDropdown(){\r\n        this.showDropdown = !this.showDropdown;\r\n\r\n    }\r\n}\r\n","<div\r\n    *ngIf=\"style === 'inline'\"\r\n    class=\"color-tiles-container-inline\"\r\n    [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n>\r\n    <div\r\n        *ngFor=\"let color of colors\"\r\n        [style.background-color]=\"color\"\r\n        [style.border-color]=\"color\"\r\n        class=\"color-tile\"\r\n        [class.selected]=\"selectedColor === color\"\r\n        (click)=\"selectColor(color)\"\r\n    >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color\"\r\n            [icon]=\"['fas', 'check']\"\r\n        >\r\n        </fa-icon>\r\n    </div>\r\n</div>\r\n\r\n\r\n<button\r\n    *ngIf=\"style === 'dropdown'\"\r\n    [id]=\"elementUUID\"\r\n    type=\"button\"\r\n    class=\"btn d-flex align-items-center\"\r\n    [class.dropdown-toggle]=\"showCaret\"\r\n    [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n    aria-controls=\"dropdown-basic\"\r\n    (click)=\"toggleDropdown()\"\r\n    (keydown)=\"onKeyDown($event)\"\r\n>\r\n\r\n    <div\r\n        class=\"color-tile color-tile-dropdown\"\r\n        [style.background-color]=\"selectedColor || defaultColor\"\r\n        [class.undefined-color]=\"!(selectedColor || defaultColor)\"\r\n    >\r\n    </div>\r\n</button>\r\n\r\n<dx-popover\r\n    target=\"#{{elementUUID}}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDropdown\"\r\n>\r\n    <div\r\n        class=\"color-tiles-container-square\"\r\n        [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\r\n        [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n    >\r\n        <div\r\n            *ngFor=\"let color of colors\"\r\n            [style.background-color]=\"color\"\r\n            class=\"color-tile color-tile-popover\"\r\n            (click)=\"selectColor(color)\"\r\n        >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color || !selectedColor && defaultColor === color\"\r\n            [icon]=\"checkIcon\"\r\n        >\r\n        </fa-icon>\r\n\r\n        </div>\r\n    </div>\r\n</dx-popover>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsColorPickerComponent } from './color-picker.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\n\r\n\r\nconst components = [SdsColorPickerComponent];\r\n@NgModule({\r\n  declarations: [\r\n    ...components\r\n  ],\r\n  imports: [\r\n    CommonModule,\r\n    FontAwesomeModule,\r\n    DxPopoverModule,\r\n  ],\r\n  exports: [\r\n      ...components\r\n  ]\r\n})\r\nexport class SdsColorPickerModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs

@@ -828,10 +828,10 @@ class SdsDatePickerComponent {
     }
 }
 SdsDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdsDatePickerService }], target: i0.ɵɵFactoryTarget.Component });
-SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons", width: "width", dropdownWrapperClass: "dropdownWrapperClass", dropdownWrapperId: "dropdownWrapperId", getPreviousDateCallback: "getPreviousDateCallback", getNextDateCallback: "getNextDateCallback", getPreviousRangeCallback: "getPreviousRangeCallback", getNextRangeCallback: "getNextRangeCallback", useCustomDisplayContent: "useCustomDisplayContent" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, queries: [{ propertyName: "displayContent", first: true, predicate: ["display"], descendants: true }], viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "selectedDateEndBox", first: true, predicate: ["selectedDateEndBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "_selectedDateRangeButton", first: true, predicate: ["selectedDateRangeButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div \r\n        class=\"datepicker d-inline-flex bg-white\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n        [style.width]=\"width\"\r\n    >\r\n        <!-- <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        > -->\r\n            <button\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-start\r\n                    border-end\r\n                    p-0\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n            <div class=\"d-flex align-items-center\">\r\n                <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n                    {{selectedDateRange.name}}\r\n                </div>\r\n                <button class=\"btn btn-light date-range-dropdown-button\">\r\n                    <span class=\"dropdown-toggle\"></span>\r\n                </button>\r\n\r\n            </div>\r\n                \r\n            </button>\r\n\r\n            <dx-popover\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n                [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover' }\"\r\n                [minWidth]=\"dateRangeDefinitionsWidth\"\r\n                \r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <div\r\n                            class=\"predefined-date-range px-3 py-2 w-100\"\r\n                            [class.selected]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > \r\n                        {{range.name}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        <!-- </div> -->\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2\"\r\n            [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n            [class.border-start-0] = \"dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            #selectedDateRangeButton\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period\"\r\n            [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n            [class.border-end] = \"!showPreviousAndNextButtons\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker = !showDatepicker\"\r\n        >\r\n        <!-- (click)=\"showDatepicker ? showDatepicker = false : openDatepickerPopup()\" -->\r\n        <!-- (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\" -->\r\n            <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n            <div *ngIf=\"!useCustomDisplayContent\" \r\n                class=\"d-flex justify-content-center align-items-center\">\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-end border-start-0 ps-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <dx-popover\r\n        target=\"#pickerDropdown{{ randomIdReference }}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDatepicker\"\r\n        (onHiding)=\"onHiddenCalendarPopover()\"\r\n        (onShowing)=\"onShowingCalendarPopover()\"\r\n        class=\"m-0 p-0\"\r\n        [wrapperAttr]=\"{ \r\n            class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n            id: dropdownWrapperId\r\n        }\"\r\n    >\r\n        <dxo-animation>\r\n            <dxo-show\r\n                type=\"pop\"\r\n                [from]=\"{ scale: 0.9 }\"\r\n                [to]=\"{ scale: 1 }\"\r\n            ></dxo-show>\r\n            <dxo-hide\r\n                type=\"fade\"\r\n                [from]=\"1\"\r\n                [to]=\"0\"\r\n            ></dxo-hide>\r\n        </dxo-animation>\r\n        <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n            <dx-scroll-view>\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateStart\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateEnd\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"bg-white px-4 py-3\">\r\n                        <div\r\n                            *ngIf=\"this.selectionKind == 'single'\"\r\n                            id=\"date-inputs\"\r\n                            class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                        >\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <dx-date-box\r\n                                    #singleDatePickerBox\r\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                    [class.activeInput]=\"true\"\r\n                                    [showClearButton]=\"false\"\r\n                                    [showDropDownButton]=\"false\"\r\n                                    [useMaskBehavior]=\"true\"\r\n                                    displayFormat=\"shortdate\"\r\n                                    type=\"date\"\r\n                                    [min]=\"minDate || minDateDefault\"\r\n                                    [max]=\"maxDate || maxDateDefault\"\r\n                                    [isValid]=\"isValid\"\r\n                                    [validationError]=\"validationError\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [(value)]=\"selectedDateInternal\"\r\n                                >\r\n                                </dx-date-box>\r\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div \r\n                            class=\"d-flex justify-content-center align-items-center\" \r\n                            (click)=\"selectEndDate($event)\">\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"disabledDates\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                                (onValueChanged)=\"onDateChange($event)\"\r\n                                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                            >\r\n                                <div\r\n                                    *dxTemplate=\"let cellData of 'cell'\"\r\n                                    [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                                >\r\n                                    {{ cellData.text }}\r\n                                </div>\r\n                            </dx-calendar>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\r\n                        <button\r\n                            class=\"btn btn-primary ms-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n<!-- </div> -->", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:#ced4da!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:#dee2e6}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { type: i2.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons", width: "width", dropdownWrapperClass: "dropdownWrapperClass", dropdownWrapperId: "dropdownWrapperId", getPreviousDateCallback: "getPreviousDateCallback", getNextDateCallback: "getNextDateCallback", getPreviousRangeCallback: "getPreviousRangeCallback", getNextRangeCallback: "getNextRangeCallback", useCustomDisplayContent: "useCustomDisplayContent" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, queries: [{ propertyName: "displayContent", first: true, predicate: ["display"], descendants: true }], viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "selectedDateEndBox", first: true, predicate: ["selectedDateEndBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "_selectedDateRangeButton", first: true, predicate: ["selectedDateRangeButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div \r\n        class=\"datepicker d-inline-flex bg-white sds-no-print\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n        [style.width]=\"width\"\r\n    >\r\n        <!-- <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        > -->\r\n            <button\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-start\r\n                    border-end\r\n                    p-0\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n            <div class=\"d-flex align-items-center\">\r\n                <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n                    {{selectedDateRange.name}}\r\n                </div>\r\n                <button class=\"btn btn-light date-range-dropdown-button\">\r\n                    <span class=\"dropdown-toggle\"></span>\r\n                </button>\r\n\r\n        </div>\r\n            \r\n        </button>\r\n\r\n            <dx-popover\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n                [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover' }\"\r\n                [minWidth]=\"dateRangeDefinitionsWidth\"\r\n                \r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <div\r\n                            class=\"predefined-date-range px-3 py-2 w-100\"\r\n                            [class.selected]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > \r\n                        {{range.name}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        <!-- </div> -->\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2\"\r\n            [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n            [class.border-start-0] = \"dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n    </button>\r\n\r\n        <button\r\n            #selectedDateRangeButton\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period\"\r\n            [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n            [class.border-end] = \"!showPreviousAndNextButtons\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker = !showDatepicker\"\r\n        >\r\n            <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\r\n        <!-- (click)=\"showDatepicker ? showDatepicker = false : openDatepickerPopup()\" -->\r\n        <!-- (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\" -->\r\n            \r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-end border-start-0 ps-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <div class=\"sds-print-only h-100\">\r\n        <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\r\n    </div>\r\n\r\n<dx-popover\r\n    target=\"#pickerDropdown{{ randomIdReference }}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDatepicker\"\r\n    (onHiding)=\"onHiddenCalendarPopover()\"\r\n    (onShowing)=\"onShowingCalendarPopover()\"\r\n    class=\"m-0 p-0\"\r\n    [wrapperAttr]=\"{ \r\n        class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n        id: dropdownWrapperId\r\n    }\"\r\n>\r\n    <dxo-animation>\r\n        <dxo-show\r\n            type=\"pop\"\r\n            [from]=\"{ scale: 0.9 }\"\r\n            [to]=\"{ scale: 1 }\"\r\n        ></dxo-show>\r\n        <dxo-hide\r\n            type=\"fade\"\r\n            [from]=\"1\"\r\n            [to]=\"0\"\r\n        ></dxo-hide>\r\n    </dxo-animation>\r\n    <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n        <dx-scroll-view>\r\n            <div id=\"datepickercomponent\">\r\n                <div\r\n                    *ngIf=\"this.selectionKind == 'period'\"\r\n                    id=\"date-inputs\"\r\n                    class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n                >\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                        <dx-date-box\r\n                            #selectedDateStartBox\r\n                            class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                            [class.activeInput]=\"selectedDateFocus\"\r\n                            [showClearButton]=\"false\"\r\n                            [showDropDownButton]=\"false\"\r\n                            [useMaskBehavior]=\"true\"\r\n                            displayFormat=\"shortdate\"\r\n                            type=\"date\"\r\n                            [min]=\"minDate || minDateDefault\"\r\n                            [max]=\"maxDate || maxDateDefault\"\r\n                            [isValid]=\"isValid\"\r\n                            [validationError]=\"validationError\"\r\n                            [disabled]=\"disabled\"\r\n                            [(value)]=\"selectedDateStart\"\r\n                            (onFocusIn)=\"onStartDateFocus()\"\r\n                        >\r\n                        </dx-date-box>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                        <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                        <dx-date-box\r\n                            #selectedDateEndBox\r\n                            class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                            [class.activeInput]=\"!selectedDateFocus\"\r\n                            [showClearButton]=\"false\"\r\n                            [showDropDownButton]=\"false\"\r\n                            [useMaskBehavior]=\"true\"\r\n                            displayFormat=\"shortdate\"\r\n                            type=\"date\"\r\n                            [min]=\"minDate || minDateDefault\"\r\n                            [max]=\"maxDate || maxDateDefault\"\r\n                            [isValid]=\"isValid\"\r\n                            [validationError]=\"validationError\"\r\n                            [disabled]=\"disabled\"\r\n                            [(value)]=\"selectedDateEnd\"\r\n                            (onFocusIn)=\"onEndDateFocus()\"\r\n                        >\r\n                        </dx-date-box>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"bg-white px-4 py-3\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'single'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #singleDatePickerBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                [class.activeInput]=\"true\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateInternal\"\r\n                            >\r\n                            </dx-date-box>\r\n                            <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div \r\n                        class=\"d-flex justify-content-center align-items-center\" \r\n                        (click)=\"selectEndDate($event)\">\r\n                        <dx-calendar\r\n                            #calendar\r\n                            [min]=\"minDate || minDateDefault\"\r\n                            [max]=\"maxDate || maxDateDefault\"\r\n                            [disabledDates]=\"disabledDates\"\r\n                            [isValid]=\"isValid\"\r\n                            [validationError]=\"validationError\"\r\n                            [disabled]=\"disabled\"\r\n                            [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                            (onValueChanged)=\"onDateChange($event)\"\r\n                            [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                        >\r\n                            <div\r\n                                *dxTemplate=\"let cellData of 'cell'\"\r\n                                [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                            >\r\n                                {{ cellData.text }}\r\n                            </div>\r\n                        </dx-calendar>\r\n                    </div>\r\n                </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\r\n                        <button\r\n                            class=\"btn btn-primary ms-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n<!-- </div> -->\r\n\r\n\r\n<ng-template #mainDisplayTemplate>\r\n    <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n    <div *ngIf=\"!useCustomDisplayContent\" \r\n        class=\"d-flex justify-content-center align-items-center\">\r\n        <!-- <div class=\"mx-1\">\r\n            <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n        </div> -->\r\n        <div class=\"mx-1 text-truncate\">\r\n            <span>{{selectedDateRangeTextSegment1}}</span>\r\n            <fa-icon\r\n                *ngIf=\"selectedDateRangeTextSegment2\"\r\n                class=\"mx-2\"\r\n                [icon]=\"toIcon\"\r\n                size=\"sm\"\r\n            ></fa-icon>\r\n            <span>{{selectedDateRangeTextSegment2}}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:#ced4da!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:#dee2e6}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { type: i2.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div \r\n        class=\"datepicker d-inline-flex bg-white\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n        [style.width]=\"width\"\r\n    >\r\n        <!-- <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        > -->\r\n            <button\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-start\r\n                    border-end\r\n                    p-0\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n            <div class=\"d-flex align-items-center\">\r\n                <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n                    {{selectedDateRange.name}}\r\n                </div>\r\n                <button class=\"btn btn-light date-range-dropdown-button\">\r\n                    <span class=\"dropdown-toggle\"></span>\r\n                </button>\r\n\r\n            </div>\r\n                \r\n            </button>\r\n\r\n            <dx-popover\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n                [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover' }\"\r\n                [minWidth]=\"dateRangeDefinitionsWidth\"\r\n                \r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <div\r\n                            class=\"predefined-date-range px-3 py-2 w-100\"\r\n                            [class.selected]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > \r\n                        {{range.name}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        <!-- </div> -->\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2\"\r\n            [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n            [class.border-start-0] = \"dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            #selectedDateRangeButton\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period\"\r\n            [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n            [class.border-end] = \"!showPreviousAndNextButtons\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker = !showDatepicker\"\r\n        >\r\n        <!-- (click)=\"showDatepicker ? showDatepicker = false : openDatepickerPopup()\" -->\r\n        <!-- (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\" -->\r\n            <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n            <div *ngIf=\"!useCustomDisplayContent\" \r\n                class=\"d-flex justify-content-center align-items-center\">\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-end border-start-0 ps-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <dx-popover\r\n        target=\"#pickerDropdown{{ randomIdReference }}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDatepicker\"\r\n        (onHiding)=\"onHiddenCalendarPopover()\"\r\n        (onShowing)=\"onShowingCalendarPopover()\"\r\n        class=\"m-0 p-0\"\r\n        [wrapperAttr]=\"{ \r\n            class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n            id: dropdownWrapperId\r\n        }\"\r\n    >\r\n        <dxo-animation>\r\n            <dxo-show\r\n                type=\"pop\"\r\n                [from]=\"{ scale: 0.9 }\"\r\n                [to]=\"{ scale: 1 }\"\r\n            ></dxo-show>\r\n            <dxo-hide\r\n                type=\"fade\"\r\n                [from]=\"1\"\r\n                [to]=\"0\"\r\n            ></dxo-hide>\r\n        </dxo-animation>\r\n        <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n            <dx-scroll-view>\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateStart\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateEnd\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"bg-white px-4 py-3\">\r\n                        <div\r\n                            *ngIf=\"this.selectionKind == 'single'\"\r\n                            id=\"date-inputs\"\r\n                            class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                        >\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <dx-date-box\r\n                                    #singleDatePickerBox\r\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                    [class.activeInput]=\"true\"\r\n                                    [showClearButton]=\"false\"\r\n                                    [showDropDownButton]=\"false\"\r\n                                    [useMaskBehavior]=\"true\"\r\n                                    displayFormat=\"shortdate\"\r\n                                    type=\"date\"\r\n                                    [min]=\"minDate || minDateDefault\"\r\n                                    [max]=\"maxDate || maxDateDefault\"\r\n                                    [isValid]=\"isValid\"\r\n                                    [validationError]=\"validationError\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [(value)]=\"selectedDateInternal\"\r\n                                >\r\n                                </dx-date-box>\r\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div \r\n                            class=\"d-flex justify-content-center align-items-center\" \r\n                            (click)=\"selectEndDate($event)\">\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"disabledDates\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                                (onValueChanged)=\"onDateChange($event)\"\r\n                                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                            >\r\n                                <div\r\n                                    *dxTemplate=\"let cellData of 'cell'\"\r\n                                    [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                                >\r\n                                    {{ cellData.text }}\r\n                                </div>\r\n                            </dx-calendar>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\r\n                        <button\r\n                            class=\"btn btn-primary ms-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n<!-- </div> -->", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:#ced4da!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:#dee2e6}\n"] }]
+            args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div \r\n        class=\"datepicker d-inline-flex bg-white sds-no-print\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n        [style.width]=\"width\"\r\n    >\r\n        <!-- <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        > -->\r\n            <button\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-start\r\n                    border-end\r\n                    p-0\"\r\n                [disabled]=\"disabled\"\r\n                [style.width]=\"dateRangeDefinitionsWidth\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n            <div class=\"d-flex align-items-center\">\r\n                <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n                    {{selectedDateRange.name}}\r\n                </div>\r\n                <button class=\"btn btn-light date-range-dropdown-button\">\r\n                    <span class=\"dropdown-toggle\"></span>\r\n                </button>\r\n\r\n        </div>\r\n            \r\n        </button>\r\n\r\n            <dx-popover\r\n                *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n                [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover' }\"\r\n                [minWidth]=\"dateRangeDefinitionsWidth\"\r\n                \r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <div\r\n                            class=\"predefined-date-range px-3 py-2 w-100\"\r\n                            [class.selected]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > \r\n                        {{range.name}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        <!-- </div> -->\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2\"\r\n            [class.rounded-start] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n            [class.border-start-0] = \"dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n    </button>\r\n\r\n        <button\r\n            #selectedDateRangeButton\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period\"\r\n            [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n            [class.border-end] = \"!showPreviousAndNextButtons\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker = !showDatepicker\"\r\n        >\r\n            <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\r\n        <!-- (click)=\"showDatepicker ? showDatepicker = false : openDatepickerPopup()\" -->\r\n        <!-- (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\" -->\r\n            \r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-end border-start-0 ps-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <div class=\"sds-print-only h-100\">\r\n        <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\r\n    </div>\r\n\r\n<dx-popover\r\n    target=\"#pickerDropdown{{ randomIdReference }}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDatepicker\"\r\n    (onHiding)=\"onHiddenCalendarPopover()\"\r\n    (onShowing)=\"onShowingCalendarPopover()\"\r\n    class=\"m-0 p-0\"\r\n    [wrapperAttr]=\"{ \r\n        class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n        id: dropdownWrapperId\r\n    }\"\r\n>\r\n    <dxo-animation>\r\n        <dxo-show\r\n            type=\"pop\"\r\n            [from]=\"{ scale: 0.9 }\"\r\n            [to]=\"{ scale: 1 }\"\r\n        ></dxo-show>\r\n        <dxo-hide\r\n            type=\"fade\"\r\n            [from]=\"1\"\r\n            [to]=\"0\"\r\n        ></dxo-hide>\r\n    </dxo-animation>\r\n    <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n        <dx-scroll-view>\r\n            <div id=\"datepickercomponent\">\r\n                <div\r\n                    *ngIf=\"this.selectionKind == 'period'\"\r\n                    id=\"date-inputs\"\r\n                    class=\"d-flex flex-wrap justify-content-center align-items-center px-4 py-3\"\r\n                >\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                        <dx-date-box\r\n                            #selectedDateStartBox\r\n                            class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                            [class.activeInput]=\"selectedDateFocus\"\r\n                            [showClearButton]=\"false\"\r\n                            [showDropDownButton]=\"false\"\r\n                            [useMaskBehavior]=\"true\"\r\n                            displayFormat=\"shortdate\"\r\n                            type=\"date\"\r\n                            [min]=\"minDate || minDateDefault\"\r\n                            [max]=\"maxDate || maxDateDefault\"\r\n                            [isValid]=\"isValid\"\r\n                            [validationError]=\"validationError\"\r\n                            [disabled]=\"disabled\"\r\n                            [(value)]=\"selectedDateStart\"\r\n                            (onFocusIn)=\"onStartDateFocus()\"\r\n                        >\r\n                        </dx-date-box>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                        <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                        <dx-date-box\r\n                            #selectedDateEndBox\r\n                            class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                            [class.activeInput]=\"!selectedDateFocus\"\r\n                            [showClearButton]=\"false\"\r\n                            [showDropDownButton]=\"false\"\r\n                            [useMaskBehavior]=\"true\"\r\n                            displayFormat=\"shortdate\"\r\n                            type=\"date\"\r\n                            [min]=\"minDate || minDateDefault\"\r\n                            [max]=\"maxDate || maxDateDefault\"\r\n                            [isValid]=\"isValid\"\r\n                            [validationError]=\"validationError\"\r\n                            [disabled]=\"disabled\"\r\n                            [(value)]=\"selectedDateEnd\"\r\n                            (onFocusIn)=\"onEndDateFocus()\"\r\n                        >\r\n                        </dx-date-box>\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"bg-white px-4 py-3\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'single'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #singleDatePickerBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                [class.activeInput]=\"true\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateInternal\"\r\n                            >\r\n                            </dx-date-box>\r\n                            <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div \r\n                        class=\"d-flex justify-content-center align-items-center\" \r\n                        (click)=\"selectEndDate($event)\">\r\n                        <dx-calendar\r\n                            #calendar\r\n                            [min]=\"minDate || minDateDefault\"\r\n                            [max]=\"maxDate || maxDateDefault\"\r\n                            [disabledDates]=\"disabledDates\"\r\n                            [isValid]=\"isValid\"\r\n                            [validationError]=\"validationError\"\r\n                            [disabled]=\"disabled\"\r\n                            [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                            (onValueChanged)=\"onDateChange($event)\"\r\n                            [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                        >\r\n                            <div\r\n                                *dxTemplate=\"let cellData of 'cell'\"\r\n                                [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                            >\r\n                                {{ cellData.text }}\r\n                            </div>\r\n                        </dx-calendar>\r\n                    </div>\r\n                </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-4 py-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\r\n                        <button\r\n                            class=\"btn btn-primary ms-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n<!-- </div> -->\r\n\r\n\r\n<ng-template #mainDisplayTemplate>\r\n    <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n    <div *ngIf=\"!useCustomDisplayContent\" \r\n        class=\"d-flex justify-content-center align-items-center\">\r\n        <!-- <div class=\"mx-1\">\r\n            <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n        </div> -->\r\n        <div class=\"mx-1 text-truncate\">\r\n            <span>{{selectedDateRangeTextSegment1}}</span>\r\n            <fa-icon\r\n                *ngIf=\"selectedDateRangeTextSegment2\"\r\n                class=\"mx-2\"\r\n                [icon]=\"toIcon\"\r\n                size=\"sm\"\r\n            ></fa-icon>\r\n            <span>{{selectedDateRangeTextSegment2}}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:#ced4da!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:#dee2e6}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { displayContent: [{
                 type: ContentChild,
                 args: ['display']