@spicainternational/ngx-sds-components 7.1.0 → 7.2.0

package/esm2020/src/lib/date-picker/date-picker.module.mjs

@@ -8,6 +8,7 @@ import { DxCalendarModule } from 'devextreme-angular';
 import { SdsDatePickerComponent } from './date-picker.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { A11yModule } from '@angular/cdk/a11y';
+import { SdsDatePipesModule } from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
 import * as i0 from "@angular/core";
 const components = [
     SdsDatePickerComponent
@@ -25,7 +26,8 @@ SdsDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         DxDropDownButtonModule,
         DxDropDownBoxModule,
         DxSelectBoxModule,
-        DxListModule], exports: [SdsDatePickerComponent] });
+        DxListModule,
+        SdsDatePipesModule], exports: [SdsDatePickerComponent] });
 SdsDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerModule, imports: [A11yModule,
         CommonModule,
         FontAwesomeModule,
@@ -36,7 +38,8 @@ SdsDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         DxDropDownButtonModule,
         DxDropDownBoxModule,
         DxSelectBoxModule,
-        DxListModule] });
+        DxListModule,
+        SdsDatePipesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
@@ -54,11 +57,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DxDropDownButtonModule,
                         DxDropDownBoxModule,
                         DxSelectBoxModule,
-                        DxListModule
+                        DxListModule,
+                        SdsDatePipesModule
                     ],
                     exports: [
                         ...components
                     ]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1waWNrZXIubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZGF0ZS1waWNrZXIvZGF0ZS1waWNrZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRS9DLE9BQU8sRUFBRSxlQUFlLEVBQUUsbUJBQW1CLEVBQUUsc0JBQXNCLEVBQUUsWUFBWSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDbkksT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBRXRELG9FQUFvRTtBQUNwRSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUNqRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNyRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7O0FBRy9DLE1BQU0sVUFBVSxHQUFHO0lBQ2Ysc0JBQXNCO0NBQ3pCLENBQUE7QUEwQkQsTUFBTSxPQUFPLG1CQUFtQjs7aUhBQW5CLG1CQUFtQjtrSEFBbkIsbUJBQW1CLGlCQTNCNUIsc0JBQXNCLGFBUXRCLFVBQVU7UUFDVixZQUFZO1FBRVosaUJBQWlCO1FBRWpCLGVBQWU7UUFDZixlQUFlO1FBQ2Ysa0JBQWtCO1FBQ2xCLGdCQUFnQjtRQUVoQixzQkFBc0I7UUFDdEIsbUJBQW1CO1FBQ25CLGlCQUFpQjtRQUNqQixZQUFZLGFBckJaLHNCQUFzQjtrSEEyQmIsbUJBQW1CLFlBbkI1QixVQUFVO1FBQ1YsWUFBWTtRQUVaLGlCQUFpQjtRQUVqQixlQUFlO1FBQ2YsZUFBZTtRQUNmLGtCQUFrQjtRQUNsQixnQkFBZ0I7UUFFaEIsc0JBQXNCO1FBQ3RCLG1CQUFtQjtRQUNuQixpQkFBaUI7UUFDakIsWUFBWTs0RkFNSCxtQkFBbUI7a0JBeEIvQixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDVixHQUFHLFVBQVU7cUJBQ2hCO29CQUNELE9BQU8sRUFBRTt3QkFDUCxVQUFVO3dCQUNWLFlBQVk7d0JBRVosaUJBQWlCO3dCQUVqQixlQUFlO3dCQUNmLGVBQWU7d0JBQ2Ysa0JBQWtCO3dCQUNsQixnQkFBZ0I7d0JBRWhCLHNCQUFzQjt3QkFDdEIsbUJBQW1CO3dCQUNuQixpQkFBaUI7d0JBQ2pCLFlBQVk7cUJBQ2I7b0JBQ0QsT0FBTyxFQUFFO3dCQUNMLEdBQUcsVUFBVTtxQkFDaEI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5cclxuaW1wb3J0IHsgRHhEYXRlQm94TW9kdWxlLCBEeERyb3BEb3duQm94TW9kdWxlLCBEeERyb3BEb3duQnV0dG9uTW9kdWxlLCBEeExpc3RNb2R1bGUsIER4U2VsZWN0Qm94TW9kdWxlIH0gZnJvbSAnZGV2ZXh0cmVtZS1hbmd1bGFyJztcclxuaW1wb3J0IHsgRHhQb3BvdmVyTW9kdWxlIH0gZnJvbSAnZGV2ZXh0cmVtZS1hbmd1bGFyJztcclxuaW1wb3J0IHsgRHhTY3JvbGxWaWV3TW9kdWxlIH0gZnJvbSAnZGV2ZXh0cmVtZS1hbmd1bGFyJztcclxuaW1wb3J0IHsgRHhDYWxlbmRhck1vZHVsZSB9IGZyb20gJ2RldmV4dHJlbWUtYW5ndWxhcic7XHJcblxyXG4vLyBpbXBvcnQgeyBEeERhdGVCb3hNb2R1bGUgfSBmcm9tICdkZXZleHRyZW1lLWFuZ3VsYXIvdWkvZGF0ZS1ib3gnO1xyXG5pbXBvcnQgeyBTZHNEYXRlUGlja2VyQ29tcG9uZW50IH0gZnJvbSAnLi9kYXRlLXBpY2tlci5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBGb250QXdlc29tZU1vZHVsZSB9IGZyb20gJ0Bmb3J0YXdlc29tZS9hbmd1bGFyLWZvbnRhd2Vzb21lJztcclxuaW1wb3J0IHsgQTExeU1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9hMTF5JztcclxuXHJcblxyXG5jb25zdCBjb21wb25lbnRzID0gW1xyXG4gICAgU2RzRGF0ZVBpY2tlckNvbXBvbmVudFxyXG5dXHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgICAuLi5jb21wb25lbnRzXHJcbiAgXSxcclxuICBpbXBvcnRzOiBbXHJcbiAgICBBMTF5TW9kdWxlLFxyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG5cclxuICAgIEZvbnRBd2Vzb21lTW9kdWxlLFxyXG5cclxuICAgIER4RGF0ZUJveE1vZHVsZSxcclxuICAgIER4UG9wb3Zlck1vZHVsZSxcclxuICAgIER4U2Nyb2xsVmlld01vZHVsZSxcclxuICAgIER4Q2FsZW5kYXJNb2R1bGUsXHJcblxyXG4gICAgRHhEcm9wRG93bkJ1dHRvbk1vZHVsZSxcclxuICAgIER4RHJvcERvd25Cb3hNb2R1bGUsXHJcbiAgICBEeFNlbGVjdEJveE1vZHVsZSxcclxuICAgIER4TGlzdE1vZHVsZVxyXG4gIF0sXHJcbiAgZXhwb3J0czogW1xyXG4gICAgICAuLi5jb21wb25lbnRzXHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzRGF0ZVBpY2tlck1vZHVsZSB7IH1cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1waWNrZXIubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZGF0ZS1waWNrZXIvZGF0ZS1waWNrZXIubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRS9DLE9BQU8sRUFBRSxlQUFlLEVBQUUsbUJBQW1CLEVBQUUsc0JBQXNCLEVBQUUsWUFBWSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDbkksT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3hELE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBRXRELG9FQUFvRTtBQUNwRSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUNqRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNyRSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDL0MsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sMkRBQTJELENBQUM7O0FBRy9GLE1BQU0sVUFBVSxHQUFHO0lBQ2Ysc0JBQXNCO0NBQ3pCLENBQUE7QUE0QkQsTUFBTSxPQUFPLG1CQUFtQjs7aUhBQW5CLG1CQUFtQjtrSEFBbkIsbUJBQW1CLGlCQTdCNUIsc0JBQXNCLGFBUXRCLFVBQVU7UUFDVixZQUFZO1FBRVosaUJBQWlCO1FBRWpCLGVBQWU7UUFDZixlQUFlO1FBQ2Ysa0JBQWtCO1FBQ2xCLGdCQUFnQjtRQUVoQixzQkFBc0I7UUFDdEIsbUJBQW1CO1FBQ25CLGlCQUFpQjtRQUNqQixZQUFZO1FBRVosa0JBQWtCLGFBdkJsQixzQkFBc0I7a0hBNkJiLG1CQUFtQixZQXJCNUIsVUFBVTtRQUNWLFlBQVk7UUFFWixpQkFBaUI7UUFFakIsZUFBZTtRQUNmLGVBQWU7UUFDZixrQkFBa0I7UUFDbEIsZ0JBQWdCO1FBRWhCLHNCQUFzQjtRQUN0QixtQkFBbUI7UUFDbkIsaUJBQWlCO1FBQ2pCLFlBQVk7UUFFWixrQkFBa0I7NEZBTVQsbUJBQW1CO2tCQTFCL0IsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1YsR0FBRyxVQUFVO3FCQUNoQjtvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsVUFBVTt3QkFDVixZQUFZO3dCQUVaLGlCQUFpQjt3QkFFakIsZUFBZTt3QkFDZixlQUFlO3dCQUNmLGtCQUFrQjt3QkFDbEIsZ0JBQWdCO3dCQUVoQixzQkFBc0I7d0JBQ3RCLG1CQUFtQjt3QkFDbkIsaUJBQWlCO3dCQUNqQixZQUFZO3dCQUVaLGtCQUFrQjtxQkFDbkI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNMLEdBQUcsVUFBVTtxQkFDaEI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5cclxuaW1wb3J0IHsgRHhEYXRlQm94TW9kdWxlLCBEeERyb3BEb3duQm94TW9kdWxlLCBEeERyb3BEb3duQnV0dG9uTW9kdWxlLCBEeExpc3RNb2R1bGUsIER4U2VsZWN0Qm94TW9kdWxlIH0gZnJvbSAnZGV2ZXh0cmVtZS1hbmd1bGFyJztcclxuaW1wb3J0IHsgRHhQb3BvdmVyTW9kdWxlIH0gZnJvbSAnZGV2ZXh0cmVtZS1hbmd1bGFyJztcclxuaW1wb3J0IHsgRHhTY3JvbGxWaWV3TW9kdWxlIH0gZnJvbSAnZGV2ZXh0cmVtZS1hbmd1bGFyJztcclxuaW1wb3J0IHsgRHhDYWxlbmRhck1vZHVsZSB9IGZyb20gJ2RldmV4dHJlbWUtYW5ndWxhcic7XHJcblxyXG4vLyBpbXBvcnQgeyBEeERhdGVCb3hNb2R1bGUgfSBmcm9tICdkZXZleHRyZW1lLWFuZ3VsYXIvdWkvZGF0ZS1ib3gnO1xyXG5pbXBvcnQgeyBTZHNEYXRlUGlja2VyQ29tcG9uZW50IH0gZnJvbSAnLi9kYXRlLXBpY2tlci5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBGb250QXdlc29tZU1vZHVsZSB9IGZyb20gJ0Bmb3J0YXdlc29tZS9hbmd1bGFyLWZvbnRhd2Vzb21lJztcclxuaW1wb3J0IHsgQTExeU1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9hMTF5JztcclxuaW1wb3J0IHsgU2RzRGF0ZVBpcGVzTW9kdWxlIH0gZnJvbSAnQHNwaWNhaW50ZXJuYXRpb25hbC9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRlLXBpcGVzJztcclxuXHJcblxyXG5jb25zdCBjb21wb25lbnRzID0gW1xyXG4gICAgU2RzRGF0ZVBpY2tlckNvbXBvbmVudFxyXG5dXHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgICAuLi5jb21wb25lbnRzXHJcbiAgXSxcclxuICBpbXBvcnRzOiBbXHJcbiAgICBBMTF5TW9kdWxlLFxyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG5cclxuICAgIEZvbnRBd2Vzb21lTW9kdWxlLFxyXG5cclxuICAgIER4RGF0ZUJveE1vZHVsZSxcclxuICAgIER4UG9wb3Zlck1vZHVsZSxcclxuICAgIER4U2Nyb2xsVmlld01vZHVsZSxcclxuICAgIER4Q2FsZW5kYXJNb2R1bGUsXHJcblxyXG4gICAgRHhEcm9wRG93bkJ1dHRvbk1vZHVsZSxcclxuICAgIER4RHJvcERvd25Cb3hNb2R1bGUsXHJcbiAgICBEeFNlbGVjdEJveE1vZHVsZSxcclxuICAgIER4TGlzdE1vZHVsZSxcclxuXHJcbiAgICBTZHNEYXRlUGlwZXNNb2R1bGVcclxuICBdLFxyXG4gIGV4cG9ydHM6IFtcclxuICAgICAgLi4uY29tcG9uZW50c1xyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc0RhdGVQaWNrZXJNb2R1bGUgeyB9XHJcbiJdfQ==

package/esm2020/src/lib/date-pipes/date-compare.pipe.mjs

@@ -0,0 +1,31 @@
+import { Pipe } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SdsDateComparePipe {
+    transform(date1, date2, operator) {
+        const d1 = new Date(date1);
+        const d2 = new Date(date2);
+        switch (operator) {
+            case 'gt':
+                return d1 > d2;
+            case 'lt':
+                return d1 < d2;
+            case 'eq':
+                return d1.getTime() === d2.getTime();
+            case 'gte':
+                return d1 >= d2;
+            case 'lte':
+                return d1 <= d2;
+            default:
+                return false;
+        }
+    }
+}
+SdsDateComparePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDateComparePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SdsDateComparePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsDateComparePipe, name: "sdsDateCompare" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDateComparePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'sdsDateCompare',
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1jb21wYXJlLnBpcGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRlLXBpcGVzL2RhdGUtY29tcGFyZS5waXBlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxJQUFJLEVBQWlCLE1BQU0sZUFBZSxDQUFDOztBQUtwRCxNQUFNLE9BQU8sa0JBQWtCO0lBQzNCLFNBQVMsQ0FDTCxLQUE2QixFQUM3QixLQUE2QixFQUM3QixRQUE0QztRQUU1QyxNQUFNLEVBQUUsR0FBRyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMzQixNQUFNLEVBQUUsR0FBRyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUUzQixRQUFRLFFBQVEsRUFBRTtZQUNkLEtBQUssSUFBSTtnQkFDTCxPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUM7WUFDbkIsS0FBSyxJQUFJO2dCQUNMLE9BQU8sRUFBRSxHQUFHLEVBQUUsQ0FBQztZQUNuQixLQUFLLElBQUk7Z0JBQ0wsT0FBTyxFQUFFLENBQUMsT0FBTyxFQUFFLEtBQUssRUFBRSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ3pDLEtBQUssS0FBSztnQkFDTixPQUFPLEVBQUUsSUFBSSxFQUFFLENBQUM7WUFDcEIsS0FBSyxLQUFLO2dCQUNOLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQztZQUNwQjtnQkFDSSxPQUFPLEtBQUssQ0FBQztTQUNwQjtJQUNMLENBQUM7O2dIQXZCUSxrQkFBa0I7OEdBQWxCLGtCQUFrQjs0RkFBbEIsa0JBQWtCO2tCQUg5QixJQUFJO21CQUFDO29CQUNGLElBQUksRUFBRSxnQkFBZ0I7aUJBQ3pCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQFBpcGUoe1xyXG4gICAgbmFtZTogJ3Nkc0RhdGVDb21wYXJlJyxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc0RhdGVDb21wYXJlUGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xyXG4gICAgdHJhbnNmb3JtKFxyXG4gICAgICAgIGRhdGUxOiBEYXRlIHwgc3RyaW5nIHwgbnVtYmVyLFxyXG4gICAgICAgIGRhdGUyOiBEYXRlIHwgc3RyaW5nIHwgbnVtYmVyLFxyXG4gICAgICAgIG9wZXJhdG9yOiAnZ3QnIHwgJ2x0JyB8ICdlcScgfCAnZ3RlJyB8ICdsdGUnXHJcbiAgICApOiBib29sZWFuIHtcclxuICAgICAgICBjb25zdCBkMSA9IG5ldyBEYXRlKGRhdGUxKTtcclxuICAgICAgICBjb25zdCBkMiA9IG5ldyBEYXRlKGRhdGUyKTtcclxuXHJcbiAgICAgICAgc3dpdGNoIChvcGVyYXRvcikge1xyXG4gICAgICAgICAgICBjYXNlICdndCc6XHJcbiAgICAgICAgICAgICAgICByZXR1cm4gZDEgPiBkMjtcclxuICAgICAgICAgICAgY2FzZSAnbHQnOlxyXG4gICAgICAgICAgICAgICAgcmV0dXJuIGQxIDwgZDI7XHJcbiAgICAgICAgICAgIGNhc2UgJ2VxJzpcclxuICAgICAgICAgICAgICAgIHJldHVybiBkMS5nZXRUaW1lKCkgPT09IGQyLmdldFRpbWUoKTtcclxuICAgICAgICAgICAgY2FzZSAnZ3RlJzpcclxuICAgICAgICAgICAgICAgIHJldHVybiBkMSA+PSBkMjtcclxuICAgICAgICAgICAgY2FzZSAnbHRlJzpcclxuICAgICAgICAgICAgICAgIHJldHVybiBkMSA8PSBkMjtcclxuICAgICAgICAgICAgZGVmYXVsdDpcclxuICAgICAgICAgICAgICAgIHJldHVybiBmYWxzZTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcbn1cclxuIl19

package/esm2020/src/lib/date-pipes/date-pipes.module.mjs

@@ -3,12 +3,24 @@ import { CommonModule } from '@angular/common';
 import { SdsDatePeriodFormatPipe } from './date-period-format.pipe';
 import { SdsDateFormatPipe } from './date-format.pipe';
 import { DateTimeRangeFormatPipe } from './date-time-range-format.pipe';
+import { SdsDateComparePipe } from './date-compare.pipe';
 import * as i0 from "@angular/core";
-const pipes = [SdsDatePeriodFormatPipe, SdsDateFormatPipe, DateTimeRangeFormatPipe];
+const pipes = [
+    SdsDatePeriodFormatPipe,
+    SdsDateFormatPipe,
+    DateTimeRangeFormatPipe,
+    SdsDateComparePipe
+];
 export class SdsDatePipesModule {
 }
 SdsDatePipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SdsDatePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, declarations: [SdsDatePeriodFormatPipe, SdsDateFormatPipe, DateTimeRangeFormatPipe], imports: [CommonModule], exports: [SdsDatePeriodFormatPipe, SdsDateFormatPipe, DateTimeRangeFormatPipe] });
+SdsDatePipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, declarations: [SdsDatePeriodFormatPipe,
+        SdsDateFormatPipe,
+        DateTimeRangeFormatPipe,
+        SdsDateComparePipe], imports: [CommonModule], exports: [SdsDatePeriodFormatPipe,
+        SdsDateFormatPipe,
+        DateTimeRangeFormatPipe,
+        SdsDateComparePipe] });
 SdsDatePipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePipesModule, decorators: [{
             type: NgModule,
@@ -24,4 +36,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1waXBlcy5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRlLXBpcGVzL2RhdGUtcGlwZXMubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLCtCQUErQixDQUFDOztBQUd4RSxNQUFNLEtBQUssR0FBRyxDQUFDLHVCQUF1QixFQUFFLGlCQUFpQixFQUFFLHVCQUF1QixDQUFDLENBQUM7QUFhcEYsTUFBTSxPQUFPLGtCQUFrQjs7Z0hBQWxCLGtCQUFrQjtpSEFBbEIsa0JBQWtCLGlCQWJoQix1QkFBdUIsRUFBRSxpQkFBaUIsRUFBRSx1QkFBdUIsYUFPOUUsWUFBWSxhQVBELHVCQUF1QixFQUFFLGlCQUFpQixFQUFFLHVCQUF1QjtpSEFhckUsa0JBQWtCLFlBTjNCLFlBQVk7NEZBTUgsa0JBQWtCO2tCQVg5QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixHQUFHLEtBQUs7cUJBQ1Q7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7cUJBQ2I7b0JBQ0QsT0FBTyxFQUFDO3dCQUNKLEdBQUcsS0FBSztxQkFDWDtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IFNkc0RhdGVQZXJpb2RGb3JtYXRQaXBlIH0gZnJvbSAnLi9kYXRlLXBlcmlvZC1mb3JtYXQucGlwZSc7XHJcbmltcG9ydCB7IFNkc0RhdGVGb3JtYXRQaXBlIH0gZnJvbSAnLi9kYXRlLWZvcm1hdC5waXBlJztcclxuaW1wb3J0IHsgRGF0ZVRpbWVSYW5nZUZvcm1hdFBpcGUgfSBmcm9tICcuL2RhdGUtdGltZS1yYW5nZS1mb3JtYXQucGlwZSc7XHJcblxyXG5cclxuY29uc3QgcGlwZXMgPSBbU2RzRGF0ZVBlcmlvZEZvcm1hdFBpcGUsIFNkc0RhdGVGb3JtYXRQaXBlLCBEYXRlVGltZVJhbmdlRm9ybWF0UGlwZV07XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgLi4ucGlwZXNcclxuICBdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZSxcclxuICBdLFxyXG4gIGV4cG9ydHM6W1xyXG4gICAgICAuLi5waXBlc1xyXG4gIF1cclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc0RhdGVQaXBlc01vZHVsZSB7IH1cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1waXBlcy5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRlLXBpcGVzL2RhdGUtcGlwZXMubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ3BFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ3hFLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDOztBQUd6RCxNQUFNLEtBQUssR0FBRztJQUNWLHVCQUF1QjtJQUN2QixpQkFBaUI7SUFDakIsdUJBQXVCO0lBQ3ZCLGtCQUFrQjtDQUNyQixDQUFDO0FBYUYsTUFBTSxPQUFPLGtCQUFrQjs7Z0hBQWxCLGtCQUFrQjtpSEFBbEIsa0JBQWtCLGlCQWpCM0IsdUJBQXVCO1FBQ3ZCLGlCQUFpQjtRQUNqQix1QkFBdUI7UUFDdkIsa0JBQWtCLGFBUWxCLFlBQVksYUFYWix1QkFBdUI7UUFDdkIsaUJBQWlCO1FBQ2pCLHVCQUF1QjtRQUN2QixrQkFBa0I7aUhBY1Qsa0JBQWtCLFlBTjNCLFlBQVk7NEZBTUgsa0JBQWtCO2tCQVg5QixRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixHQUFHLEtBQUs7cUJBQ1Q7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7cUJBQ2I7b0JBQ0QsT0FBTyxFQUFDO3dCQUNKLEdBQUcsS0FBSztxQkFDWDtpQkFDRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IFNkc0RhdGVQZXJpb2RGb3JtYXRQaXBlIH0gZnJvbSAnLi9kYXRlLXBlcmlvZC1mb3JtYXQucGlwZSc7XHJcbmltcG9ydCB7IFNkc0RhdGVGb3JtYXRQaXBlIH0gZnJvbSAnLi9kYXRlLWZvcm1hdC5waXBlJztcclxuaW1wb3J0IHsgRGF0ZVRpbWVSYW5nZUZvcm1hdFBpcGUgfSBmcm9tICcuL2RhdGUtdGltZS1yYW5nZS1mb3JtYXQucGlwZSc7XHJcbmltcG9ydCB7IFNkc0RhdGVDb21wYXJlUGlwZSB9IGZyb20gJy4vZGF0ZS1jb21wYXJlLnBpcGUnO1xyXG5cclxuXHJcbmNvbnN0IHBpcGVzID0gW1xyXG4gICAgU2RzRGF0ZVBlcmlvZEZvcm1hdFBpcGUsIFxyXG4gICAgU2RzRGF0ZUZvcm1hdFBpcGUsIFxyXG4gICAgRGF0ZVRpbWVSYW5nZUZvcm1hdFBpcGUsXHJcbiAgICBTZHNEYXRlQ29tcGFyZVBpcGVcclxuXTtcclxuXHJcbkBOZ01vZHVsZSh7XHJcbiAgZGVjbGFyYXRpb25zOiBbXHJcbiAgICAuLi5waXBlc1xyXG4gIF0sXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQ29tbW9uTW9kdWxlLFxyXG4gIF0sXHJcbiAgZXhwb3J0czpbXHJcbiAgICAgIC4uLnBpcGVzXHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzRGF0ZVBpcGVzTW9kdWxlIHsgfVxyXG4iXX0=

package/esm2020/src/lib/date-pipes/public-api.mjs

@@ -3,4 +3,5 @@ export * from './date-period-format.pipe';
 export * from './date-format.pipe';
 export * from './date-time-range-format.pipe';
 export * from './date-time-formats.constants';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2RhdGUtcGlwZXMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsK0JBQStCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2RhdGUtcGlwZXMubW9kdWxlJztcclxuZXhwb3J0ICogZnJvbSAnLi9kYXRlLXBlcmlvZC1mb3JtYXQucGlwZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vZGF0ZS1mb3JtYXQucGlwZSc7XHJcbmV4cG9ydCAqIGZyb20gJy4vZGF0ZS10aW1lLXJhbmdlLWZvcm1hdC5waXBlJztcclxuZXhwb3J0ICogZnJvbSAnLi9kYXRlLXRpbWUtZm9ybWF0cy5jb25zdGFudHMnOyJdfQ==
+export * from './date-compare.pipe';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2RhdGUtcGlwZXMvcHVibGljLWFwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyxvQkFBb0IsQ0FBQztBQUNuQyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyxxQkFBcUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vZGF0ZS1waXBlcy5tb2R1bGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2RhdGUtcGVyaW9kLWZvcm1hdC5waXBlJztcclxuZXhwb3J0ICogZnJvbSAnLi9kYXRlLWZvcm1hdC5waXBlJztcclxuZXhwb3J0ICogZnJvbSAnLi9kYXRlLXRpbWUtcmFuZ2UtZm9ybWF0LnBpcGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2RhdGUtdGltZS1mb3JtYXRzLmNvbnN0YW50cyc7XHJcbmV4cG9ydCAqIGZyb20gJy4vZGF0ZS1jb21wYXJlLnBpcGUnOyJdfQ==

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

@@ -5,8 +5,8 @@ import { CommonModule } from '@angular/common';
 import * as i5 from 'devextreme-angular';
 import { DxDateBoxModule, DxPopoverModule, DxScrollViewModule, DxCalendarModule, DxDropDownButtonModule, DxDropDownBoxModule, DxSelectBoxModule, DxListModule } from 'devextreme-angular';
 import { locale } from 'devextreme/localization';
-import { isSameDay, startOfMonth, endOfMonth, isSameMonth, add, startOfDay, differenceInMonths, differenceInDays, startOfYear, addYears, endOfYear, addMonths, startOfWeek, addWeeks, endOfWeek, addDays, isAfter, isBefore, isSameYear } from 'date-fns';
-import { faAngleLeft, faAngleRight, faCalendar } from '@fortawesome/pro-regular-svg-icons';
+import { isSameDay, startOfMonth, endOfMonth, isSameMonth, add, startOfDay, differenceInMonths, differenceInDays, startOfYear, addYears, endOfYear, addMonths, startOfWeek, addWeeks, endOfWeek, addDays, isBefore, isAfter, isSameYear } from 'date-fns';
+import { faAngleLeft, faAngleRight, faCalendar, faLock } from '@fortawesome/pro-regular-svg-icons';
 import { faArrowRight } from '@fortawesome/pro-light-svg-icons';
 import * as i2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
@@ -14,6 +14,8 @@ import * as i4 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i6 from 'devextreme-angular/ui/nested';
 import * as i7 from 'devextreme-angular/core';
+import * as i8 from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
+import { SdsDatePipesModule } from '@spicainternational/ngx-sds-components/src/lib/date-pipes';
 
 class DateRangeTranslations {
     constructor() {
@@ -172,6 +174,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+// import { faLock } from '@fortawesome/pro-solid-svg-icons';
 class SdsDatePickerComponent {
     // public methods
     constructor(changeRef, datePickerService) {
@@ -233,12 +236,12 @@ class SdsDatePickerComponent {
          * Previous period button aria-label. Defaults to 'Previous period'
          */
         this.previousPeriodAriaLabel = 'Previous period';
-        // #endregion ARIA inputs
         // public properties
         this.previousPeriodIcon = faAngleLeft;
         this.nextPeriodIcon = faAngleRight;
         this.calendarIcon = faCalendar;
         this.toIcon = faArrowRight;
+        this.lockIcon = faLock;
         this.predefinedDateRanges = [];
         this.predefinedDateRangesGeneratedDate = undefined;
         this.dateRanges = [];
@@ -264,6 +267,12 @@ class SdsDatePickerComponent {
         this.calendar = undefined;
         this._selectedDateRangeButton = undefined;
         this.randomIdReference = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
+        this.isDateDisabled = (args) => {
+            if (this.lockBeforeDate && isBefore(args.date, this.lockBeforeDate)) {
+                return true;
+            }
+            return this.disabledDates.some((day) => isSameDay(args.date, day));
+        };
         this.dateRangeDefinitions = [];
         this.minDateDefault = new Date(1900, 1, 1);
         this.maxDateDefault = add(startOfDay(new Date()), { years: 50 });
@@ -653,7 +662,7 @@ class SdsDatePickerComponent {
             if (isAfter(calendarDate, startOfDay(selectedDateStartAsDate)) &&
                 isBefore(calendarDate, startOfDay(selectedDateEndAsDate)) &&
                 !this.disabledDates.some((day) => isSameDay(calendarDate, day))) {
-                css += ' bg-secondary text-dark rounded-0';
+                css += ' bg-primary-light text-dark rounded-0';
             }
             else {
                 if (isSameDay(calendarDate, selectedDateStartAsDate)) {
@@ -891,10 +900,10 @@ class SdsDatePickerComponent {
     }
 }
 SdsDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdsDatePickerService }], target: i0.ɵɵFactoryTarget.Component });
-SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", singleDayFormatFn: "singleDayFormatFn", dateRangeFormatFn: "dateRangeFormatFn", 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", displayPredefinedDateRangeName: "displayPredefinedDateRangeName", style: "style", compactStyleDisplay: "compactStyleDisplay", dateInputDisplayFormat: "dateInputDisplayFormat", componentAriaLabel: "componentAriaLabel", openDateRangeDefinitionsAriaLabel: "openDateRangeDefinitionsAriaLabel", nextPeriodAriaLabel: "nextPeriodAriaLabel", previousPeriodAriaLabel: "previousPeriodAriaLabel" }, 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        [attr.aria-label]=\"componentAriaLabel\"\r\n        [style.width]=\"width\"\r\n    >\r\n\r\n        <ng-container *ngIf=\"style == 'classic'\">\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                    type=\"button\"\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                        sds-fw-400\"\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 type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n                        [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n                            <span class=\"dropdown-toggle\"></span>\r\n                        </button>\r\n                    </div>\r\n\r\n                </button>\r\n\r\n                <dx-popover\r\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                    [id]=\"elementUUID + '_predefined_periods_dropdown'\"\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'\" cdkTrapFocus>\r\n                        <div *ngFor=\"let range of dateRanges\">\r\n                            <div\r\n                                role=\"button\"\r\n                                tabindex=\"0\"\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                                (keydown)=\"onRangeKeyReleased($event, 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        </ng-container>\r\n\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n            [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n            [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"previousPeriodAriaLabel\"\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 sds-fw-400\"\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\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>{{selectedDateRangeName}}</span>\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 sds-fw-400\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"nextPeriodAriaLabel\"\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\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    </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 class=\"d-flex flex-row\">\r\n\r\n            <div\r\n                *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n                class=\"d-flex flex-column p-3 bg-gray-100\"\r\n                style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n                >\r\n                <div class=\"px-3 py-2\">\r\n                    <label>Presets</label>\r\n                </div>\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\r\n\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]=\"dateInputDisplayFormat\"\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                            (onValueChanged)=\"onStartDateChange($event)\"\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]=\"dateInputDisplayFormat\"\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                            (onValueChanged)=\"onEndDateChange($event)\"\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]=\"dateInputDisplayFormat\"\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\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                                [style.line-height.px]=\"23\"\r\n\r\n                            >\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 sds-fw-400\"\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 sds-fw-400\"\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\r\n            </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n<!-- </div> -->\r\n\r\n", 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:var(--bs-gray-400)!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:var(--bs-gray-300)}\n"], dependencies: [{ kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i5.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"] }, { kind: "component", type: i6.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i6.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i6.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "directive", type: i7.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.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"] }, { kind: "component", type: i5.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"] }, { kind: "component", type: i5.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", singleDayFormatFn: "singleDayFormatFn", dateRangeFormatFn: "dateRangeFormatFn", 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", displayPredefinedDateRangeName: "displayPredefinedDateRangeName", style: "style", compactStyleDisplay: "compactStyleDisplay", dateInputDisplayFormat: "dateInputDisplayFormat", componentAriaLabel: "componentAriaLabel", openDateRangeDefinitionsAriaLabel: "openDateRangeDefinitionsAriaLabel", nextPeriodAriaLabel: "nextPeriodAriaLabel", previousPeriodAriaLabel: "previousPeriodAriaLabel", lockBeforeDate: "lockBeforeDate", lockBeforeDateHint: "lockBeforeDateHint" }, 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        [attr.aria-label]=\"componentAriaLabel\"\r\n        [style.width]=\"width\"\r\n    >\r\n\r\n        <ng-container *ngIf=\"style == 'classic'\">\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                    type=\"button\"\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                        sds-fw-400\"\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 type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n                        [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n                            <span class=\"dropdown-toggle\"></span>\r\n                        </button>\r\n                    </div>\r\n\r\n                </button>\r\n\r\n                <dx-popover\r\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                    [id]=\"elementUUID + '_predefined_periods_dropdown'\"\r\n                    target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                    position=\"bottom\"\r\n                    [(visible)]=\"showPredefinedOptionsSelector\"\r\n                    [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\r\n                    [minWidth]=\"dateRangeDefinitionsWidth\"\r\n\r\n                >\r\n                    <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\r\n                        <div *ngFor=\"let range of dateRanges\">\r\n                            <div\r\n                                role=\"button\"\r\n                                tabindex=\"0\"\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                                (keydown)=\"onRangeKeyReleased($event, 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        </ng-container>\r\n\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n            [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n            [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"previousPeriodAriaLabel\"\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 sds-fw-400\"\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\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>{{selectedDateRangeName}}</span>\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 sds-fw-400\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"nextPeriodAriaLabel\"\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\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    </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 class=\"d-flex flex-row\">\r\n\r\n                <div\r\n                    *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n                    class=\"d-flex flex-column p-3 bg-gray-100\"\r\n                    style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n                    >\r\n                    <div class=\"px-3 py-2\">\r\n                        <label>Presets</label>\r\n                    </div>\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\r\n\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-3 pt-3 pb-2\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-between 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]=\"dateInputDisplayFormat\"\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                                (onValueChanged)=\"onStartDateChange($event)\"\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]=\"dateInputDisplayFormat\"\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                                (onValueChanged)=\"onEndDateChange($event)\"\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 mx-2 px-2 py-2 date-picker-date-selection\">\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\"\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]=\"dateInputDisplayFormat\"\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\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"isDateDisabled\"\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                                    [style.line-height.px]=\"23\"\r\n\r\n                                >\r\n\r\n                                <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\r\n                                    <ng-template #thenLockBlock>\r\n                                        <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\"  class=\"locked-day position-absolute-x\"></fa-icon>\r\n                                    </ng-template>\r\n                                    <ng-template #elseDefaultBlock>\r\n                                        {{ cellData.text }}\r\n                                    </ng-template>\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-3 pt-2 pb-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary sds-fw-400\"\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 sds-fw-400\"\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            </div>\r\n        </dx-scroll-view>\r\n    </div>\r\n</dx-popover>\r\n<!-- </div> -->\r\n\r\n", 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:var(--bs-gray-400)!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:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"], dependencies: [{ kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i5.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"] }, { kind: "component", type: i6.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i6.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i6.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "directive", type: i7.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.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"] }, { kind: "component", type: i5.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"] }, { kind: "component", type: i5.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"] }, { kind: "pipe", type: i8.SdsDateComparePipe, name: "sdsDateCompare" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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 sds-no-print\"\r\n        role=\"group\"\r\n        [attr.aria-label]=\"componentAriaLabel\"\r\n        [style.width]=\"width\"\r\n    >\r\n\r\n        <ng-container *ngIf=\"style == 'classic'\">\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                    type=\"button\"\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                        sds-fw-400\"\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 type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n                        [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n                            <span class=\"dropdown-toggle\"></span>\r\n                        </button>\r\n                    </div>\r\n\r\n                </button>\r\n\r\n                <dx-popover\r\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                    [id]=\"elementUUID + '_predefined_periods_dropdown'\"\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'\" cdkTrapFocus>\r\n                        <div *ngFor=\"let range of dateRanges\">\r\n                            <div\r\n                                role=\"button\"\r\n                                tabindex=\"0\"\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                                (keydown)=\"onRangeKeyReleased($event, 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        </ng-container>\r\n\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n            [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n            [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"previousPeriodAriaLabel\"\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 sds-fw-400\"\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\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>{{selectedDateRangeName}}</span>\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 sds-fw-400\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"nextPeriodAriaLabel\"\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\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    </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 class=\"d-flex flex-row\">\r\n\r\n            <div\r\n                *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n                class=\"d-flex flex-column p-3 bg-gray-100\"\r\n                style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n                >\r\n                <div class=\"px-3 py-2\">\r\n                    <label>Presets</label>\r\n                </div>\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\r\n\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]=\"dateInputDisplayFormat\"\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                            (onValueChanged)=\"onStartDateChange($event)\"\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]=\"dateInputDisplayFormat\"\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                            (onValueChanged)=\"onEndDateChange($event)\"\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]=\"dateInputDisplayFormat\"\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\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                                [style.line-height.px]=\"23\"\r\n\r\n                            >\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 sds-fw-400\"\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 sds-fw-400\"\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\r\n            </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n<!-- </div> -->\r\n\r\n", 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:var(--bs-gray-400)!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:var(--bs-gray-300)}\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        [attr.aria-label]=\"componentAriaLabel\"\r\n        [style.width]=\"width\"\r\n    >\r\n\r\n        <ng-container *ngIf=\"style == 'classic'\">\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                    type=\"button\"\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                        sds-fw-400\"\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 type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n                        [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n                            <span class=\"dropdown-toggle\"></span>\r\n                        </button>\r\n                    </div>\r\n\r\n                </button>\r\n\r\n                <dx-popover\r\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                    [id]=\"elementUUID + '_predefined_periods_dropdown'\"\r\n                    target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                    position=\"bottom\"\r\n                    [(visible)]=\"showPredefinedOptionsSelector\"\r\n                    [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\r\n                    [minWidth]=\"dateRangeDefinitionsWidth\"\r\n\r\n                >\r\n                    <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\r\n                        <div *ngFor=\"let range of dateRanges\">\r\n                            <div\r\n                                role=\"button\"\r\n                                tabindex=\"0\"\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                                (keydown)=\"onRangeKeyReleased($event, 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        </ng-container>\r\n\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n            [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n            [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"previousPeriodAriaLabel\"\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 sds-fw-400\"\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\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>{{selectedDateRangeName}}</span>\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 sds-fw-400\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"nextPeriodAriaLabel\"\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\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    </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 class=\"d-flex flex-row\">\r\n\r\n                <div\r\n                    *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n                    class=\"d-flex flex-column p-3 bg-gray-100\"\r\n                    style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n                    >\r\n                    <div class=\"px-3 py-2\">\r\n                        <label>Presets</label>\r\n                    </div>\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\r\n\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-3 pt-3 pb-2\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-between 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]=\"dateInputDisplayFormat\"\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                                (onValueChanged)=\"onStartDateChange($event)\"\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]=\"dateInputDisplayFormat\"\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                                (onValueChanged)=\"onEndDateChange($event)\"\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 mx-2 px-2 py-2 date-picker-date-selection\">\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\"\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]=\"dateInputDisplayFormat\"\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\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"isDateDisabled\"\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                                    [style.line-height.px]=\"23\"\r\n\r\n                                >\r\n\r\n                                <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\r\n                                    <ng-template #thenLockBlock>\r\n                                        <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\"  class=\"locked-day position-absolute-x\"></fa-icon>\r\n                                    </ng-template>\r\n                                    <ng-template #elseDefaultBlock>\r\n                                        {{ cellData.text }}\r\n                                    </ng-template>\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-3 pt-2 pb-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary sds-fw-400\"\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 sds-fw-400\"\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            </div>\r\n        </dx-scroll-view>\r\n    </div>\r\n</dx-popover>\r\n<!-- </div> -->\r\n\r\n", 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:var(--bs-gray-400)!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:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { displayContent: [{
                 type: ContentChild,
                 args: ['display']
@@ -978,6 +987,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }], previousPeriodAriaLabel: [{
                 type: Input
+            }], lockBeforeDate: [{
+                type: Input
+            }], lockBeforeDateHint: [{
+                type: Input
             }], singleDatePickerBox: [{
                 type: ViewChild,
                 args: ['singleDatePickerBox', { static: false }]
@@ -1011,7 +1024,8 @@ SdsDatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", ver
         DxDropDownButtonModule,
         DxDropDownBoxModule,
         DxSelectBoxModule,
-        DxListModule], exports: [SdsDatePickerComponent] });
+        DxListModule,
+        SdsDatePipesModule], exports: [SdsDatePickerComponent] });
 SdsDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerModule, imports: [A11yModule,
         CommonModule,
         FontAwesomeModule,
@@ -1022,7 +1036,8 @@ SdsDatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ver
         DxDropDownButtonModule,
         DxDropDownBoxModule,
         DxSelectBoxModule,
-        DxListModule] });
+        DxListModule,
+        SdsDatePipesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerModule, decorators: [{
             type: NgModule,
             args: [{
@@ -1040,7 +1055,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         DxDropDownButtonModule,
                         DxDropDownBoxModule,
                         DxSelectBoxModule,
-                        DxListModule
+                        DxListModule,
+                        SdsDatePipesModule
                     ],
                     exports: [
                         ...components