@spicainternational/ngx-sds-components 5.5.0 → 5.6.0

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

@@ -13,35 +13,42 @@ export class SdsDateFormatPipe {
      * @publicApi
      */
     transform(date, locales, options) {
+        if (date === null) {
+            return '';
+        }
+        const formatDate = new Date(date);
+        if (formatDate.toString() == 'Invalid Date') {
+            return '';
+        }
         if (options === 'time') {
-            return date.toLocaleTimeString(locales, {
+            return formatDate.toLocaleTimeString(locales, {
                 hour: 'numeric',
                 minute: '2-digit'
             });
         }
         else if (options === 'date') {
-            return date.toLocaleDateString(locales, {
+            return formatDate.toLocaleDateString(locales, {
                 day: 'numeric',
                 month: 'numeric',
                 year: 'numeric'
             });
         }
         else if (options === 'date-medium') {
-            return date.toLocaleDateString(locales, {
+            return formatDate.toLocaleDateString(locales, {
                 day: '2-digit',
                 month: '2-digit',
                 year: 'numeric'
             });
         }
         else if (options === 'date-long') {
-            return date.toLocaleDateString(locales, {
+            return formatDate.toLocaleDateString(locales, {
                 day: '2-digit',
                 month: 'short',
                 year: 'numeric'
             });
         }
         else if (options === 'date-time') {
-            return date.toLocaleDateString(locales, {
+            return formatDate.toLocaleDateString(locales, {
                 weekday: 'short',
                 day: 'numeric',
                 month: 'short',
@@ -51,7 +58,7 @@ export class SdsDateFormatPipe {
             });
         }
         else {
-            return date.toLocaleDateString(locales, options);
+            return formatDate.toLocaleDateString(locales, options);
         }
     }
 }
@@ -63,4 +70,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                     name: 'sdsDateFormat',
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1mb3JtYXQucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2RhdGUtcGlwZXMvZGF0ZS1mb3JtYXQucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQzs7QUFLcEQsTUFBTSxPQUFPLGlCQUFpQjtJQUUxQjs7Ozs7Ozs7OztPQVVHO0lBQ0ksU0FBUyxDQUNaLElBQVUsRUFDVixPQUErQixFQUMvQixPQUFrRztRQUlsRyxJQUFJLE9BQU8sS0FBSyxNQUFNLEVBQUM7WUFDbkIsT0FBTyxJQUFJLENBQUMsa0JBQWtCLENBQUMsT0FBTyxFQUFFO2dCQUNwQyxJQUFJLEVBQUUsU0FBUztnQkFDZixNQUFNLEVBQUUsU0FBUzthQUNwQixDQUFDLENBQUM7U0FDTjthQUFPLElBQUksT0FBTyxLQUFLLE1BQU0sRUFBQztZQUMzQixPQUFPLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxPQUFPLEVBQUU7Z0JBQ3BDLEdBQUcsRUFBRSxTQUFTO2dCQUNkLEtBQUssRUFBRSxTQUFTO2dCQUNoQixJQUFJLEVBQUMsU0FBUzthQUNqQixDQUFDLENBQUM7U0FDTjthQUFPLElBQUksT0FBTyxLQUFLLGFBQWEsRUFBQztZQUNsQyxPQUFPLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxPQUFPLEVBQUU7Z0JBQ3BDLEdBQUcsRUFBRSxTQUFTO2dCQUNkLEtBQUssRUFBRSxTQUFTO2dCQUNoQixJQUFJLEVBQUMsU0FBUzthQUNqQixDQUFDLENBQUM7U0FDTjthQUFPLElBQUksT0FBTyxLQUFLLFdBQVcsRUFBQztZQUNoQyxPQUFPLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxPQUFPLEVBQUU7Z0JBQ3BDLEdBQUcsRUFBRSxTQUFTO2dCQUNkLEtBQUssRUFBRSxPQUFPO2dCQUNkLElBQUksRUFBQyxTQUFTO2FBQ2pCLENBQUMsQ0FBQztTQUNOO2FBQU8sSUFBSSxPQUFPLEtBQUssV0FBVyxFQUFDO1lBQ2hDLE9BQU8sSUFBSSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sRUFBRTtnQkFDcEMsT0FBTyxFQUFFLE9BQU87Z0JBQ2hCLEdBQUcsRUFBRSxTQUFTO2dCQUNkLEtBQUssRUFBRSxPQUFPO2dCQUNkLElBQUksRUFBQyxTQUFTO2dCQUNkLElBQUksRUFBRSxTQUFTO2dCQUNmLE1BQU0sRUFBRSxTQUFTO2FBQ3BCLENBQUMsQ0FBQztTQUNOO2FBQU07WUFDSCxPQUFPLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxPQUFPLEVBQUUsT0FBaUQsQ0FBQyxDQUFDO1NBQzlGO0lBQ0wsQ0FBQzs7OEdBdkRRLGlCQUFpQjs0R0FBakIsaUJBQWlCOzJGQUFqQixpQkFBaUI7a0JBSDdCLElBQUk7bUJBQUM7b0JBQ0YsSUFBSSxFQUFFLGVBQWU7aUJBQ3hCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgUGlwZSwgUGlwZVRyYW5zZm9ybSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQFBpcGUoe1xyXG4gICAgbmFtZTogJ3Nkc0RhdGVGb3JtYXQnLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzRGF0ZUZvcm1hdFBpcGUgaW1wbGVtZW50cyBQaXBlVHJhbnNmb3JtIHtcclxuXHJcbiAgICAvKipcclxuICAgICAqIEZvcm1hdHMgZGF0ZSBpbiBnaXZlbiBsb2NhbGUuXHJcbiAgICAgKlxyXG4gICAgICogQHBhcmFtIGRhdGUgRGF0ZSB0byBiZSBmb3JtYXR0ZWQuXHJcbiAgICAgKiBAcGFyYW0gbG9jYWxlIEEgbG9jYWxlIGNvZGUgZm9yIHRoZSBsb2NhbGUgZm9ybWF0IHJ1bGVzIHRvIHVzZS5cclxuICAgICAqIEBwYXJhbSBvcHRpb25zIEFuIG9wdGlvbmFsIEludGwuRGF0ZVRpbWVGb3JtYXRPcHRpb25zIHBhcmFtZXRlciB0aGF0IGNhbiBiZSB1c2VkIHRvIGZpbmUtdHVuZSB0aGUgb3V0cHV0LlxyXG4gICAgICogQHJldHVybnMgQSBzdHJpbmcgd2l0aCBmb3JtYXR0ZWQgZGF0ZVxyXG4gICAgICogQHNlZSBbSW50bCBkb2NzXShodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZy9lbi1VUy9kb2NzL1dlYi9KYXZhU2NyaXB0L1JlZmVyZW5jZS9HbG9iYWxfT2JqZWN0cy9JbnRsKVxyXG4gICAgICpcclxuICAgICAqIEBwdWJsaWNBcGlcclxuICAgICAqL1xyXG4gICAgcHVibGljIHRyYW5zZm9ybShcclxuICAgICAgICBkYXRlOiBEYXRlLFxyXG4gICAgICAgIGxvY2FsZXM6IHN0cmluZyB8IEFycmF5PHN0cmluZz4sXHJcbiAgICAgICAgb3B0aW9ucz86IEludGwuRGF0ZVRpbWVGb3JtYXRPcHRpb25zIHwgJ3RpbWUnIHwgJ2RhdGUnIHwgJ2RhdGUtbWVkaXVtJyB8ICdkYXRlLWxvbmcnIHwgJ2RhdGUtdGltZSdcclxuICAgICk6IHN0cmluZyB7XHJcblxyXG5cclxuICAgICAgICBpZiAob3B0aW9ucyA9PT0gJ3RpbWUnKXtcclxuICAgICAgICAgICAgcmV0dXJuIGRhdGUudG9Mb2NhbGVUaW1lU3RyaW5nKGxvY2FsZXMsIHtcclxuICAgICAgICAgICAgICAgIGhvdXI6ICdudW1lcmljJyxcclxuICAgICAgICAgICAgICAgIG1pbnV0ZTogJzItZGlnaXQnXHJcbiAgICAgICAgICAgIH0pOyAgICBcclxuICAgICAgICB9IGVsc2UgIGlmIChvcHRpb25zID09PSAnZGF0ZScpe1xyXG4gICAgICAgICAgICByZXR1cm4gZGF0ZS50b0xvY2FsZURhdGVTdHJpbmcobG9jYWxlcywge1xyXG4gICAgICAgICAgICAgICAgZGF5OiAnbnVtZXJpYycsIFxyXG4gICAgICAgICAgICAgICAgbW9udGg6ICdudW1lcmljJywgXHJcbiAgICAgICAgICAgICAgICB5ZWFyOidudW1lcmljJ1xyXG4gICAgICAgICAgICB9KTsgICAgXHJcbiAgICAgICAgfSBlbHNlICBpZiAob3B0aW9ucyA9PT0gJ2RhdGUtbWVkaXVtJyl7XHJcbiAgICAgICAgICAgIHJldHVybiBkYXRlLnRvTG9jYWxlRGF0ZVN0cmluZyhsb2NhbGVzLCB7XHJcbiAgICAgICAgICAgICAgICBkYXk6ICcyLWRpZ2l0JywgXHJcbiAgICAgICAgICAgICAgICBtb250aDogJzItZGlnaXQnLCBcclxuICAgICAgICAgICAgICAgIHllYXI6J251bWVyaWMnXHJcbiAgICAgICAgICAgIH0pOyAgICBcclxuICAgICAgICB9IGVsc2UgIGlmIChvcHRpb25zID09PSAnZGF0ZS1sb25nJyl7XHJcbiAgICAgICAgICAgIHJldHVybiBkYXRlLnRvTG9jYWxlRGF0ZVN0cmluZyhsb2NhbGVzLCB7XHJcbiAgICAgICAgICAgICAgICBkYXk6ICcyLWRpZ2l0JywgXHJcbiAgICAgICAgICAgICAgICBtb250aDogJ3Nob3J0JywgXHJcbiAgICAgICAgICAgICAgICB5ZWFyOidudW1lcmljJ1xyXG4gICAgICAgICAgICB9KTsgICAgXHJcbiAgICAgICAgfSBlbHNlICBpZiAob3B0aW9ucyA9PT0gJ2RhdGUtdGltZScpe1xyXG4gICAgICAgICAgICByZXR1cm4gZGF0ZS50b0xvY2FsZURhdGVTdHJpbmcobG9jYWxlcywge1xyXG4gICAgICAgICAgICAgICAgd2Vla2RheTogJ3Nob3J0JywgXHJcbiAgICAgICAgICAgICAgICBkYXk6ICdudW1lcmljJywgXHJcbiAgICAgICAgICAgICAgICBtb250aDogJ3Nob3J0JywgXHJcbiAgICAgICAgICAgICAgICB5ZWFyOidudW1lcmljJywgXHJcbiAgICAgICAgICAgICAgICBob3VyOiAnbnVtZXJpYycsXHJcbiAgICAgICAgICAgICAgICBtaW51dGU6ICcyLWRpZ2l0J1xyXG4gICAgICAgICAgICB9KTsgICAgXHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgcmV0dXJuIGRhdGUudG9Mb2NhbGVEYXRlU3RyaW5nKGxvY2FsZXMsIG9wdGlvbnMgYXMgSW50bC5EYXRlVGltZUZvcm1hdE9wdGlvbnMgfCB1bmRlZmluZWQpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxufVxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1mb3JtYXQucGlwZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2RhdGUtcGlwZXMvZGF0ZS1mb3JtYXQucGlwZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFpQixNQUFNLGVBQWUsQ0FBQzs7QUFLcEQsTUFBTSxPQUFPLGlCQUFpQjtJQUUxQjs7Ozs7Ozs7OztPQVVHO0lBQ0ksU0FBUyxDQUNaLElBQTRCLEVBQzVCLE9BQStCLEVBQy9CLE9BQWtHO1FBRWxHLElBQUksSUFBSSxLQUFLLElBQUksRUFBRTtZQUNmLE9BQU8sRUFBRSxDQUFBO1NBQ1o7UUFFRCxNQUFNLFVBQVUsR0FBRyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNsQyxJQUFJLFVBQVUsQ0FBQyxRQUFRLEVBQUUsSUFBSSxjQUFjLEVBQUU7WUFDekMsT0FBTyxFQUFFLENBQUE7U0FDWjtRQUVELElBQUksT0FBTyxLQUFLLE1BQU0sRUFBQztZQUNuQixPQUFPLFVBQVUsQ0FBQyxrQkFBa0IsQ0FBQyxPQUFPLEVBQUU7Z0JBQzFDLElBQUksRUFBRSxTQUFTO2dCQUNmLE1BQU0sRUFBRSxTQUFTO2FBQ3BCLENBQUMsQ0FBQztTQUNOO2FBQU8sSUFBSSxPQUFPLEtBQUssTUFBTSxFQUFDO1lBQzNCLE9BQU8sVUFBVSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sRUFBRTtnQkFDMUMsR0FBRyxFQUFFLFNBQVM7Z0JBQ2QsS0FBSyxFQUFFLFNBQVM7Z0JBQ2hCLElBQUksRUFBQyxTQUFTO2FBQ2pCLENBQUMsQ0FBQztTQUNOO2FBQU8sSUFBSSxPQUFPLEtBQUssYUFBYSxFQUFDO1lBQ2xDLE9BQU8sVUFBVSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sRUFBRTtnQkFDMUMsR0FBRyxFQUFFLFNBQVM7Z0JBQ2QsS0FBSyxFQUFFLFNBQVM7Z0JBQ2hCLElBQUksRUFBQyxTQUFTO2FBQ2pCLENBQUMsQ0FBQztTQUNOO2FBQU8sSUFBSSxPQUFPLEtBQUssV0FBVyxFQUFDO1lBQ2hDLE9BQU8sVUFBVSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sRUFBRTtnQkFDMUMsR0FBRyxFQUFFLFNBQVM7Z0JBQ2QsS0FBSyxFQUFFLE9BQU87Z0JBQ2QsSUFBSSxFQUFDLFNBQVM7YUFDakIsQ0FBQyxDQUFDO1NBQ047YUFBTyxJQUFJLE9BQU8sS0FBSyxXQUFXLEVBQUM7WUFDaEMsT0FBTyxVQUFVLENBQUMsa0JBQWtCLENBQUMsT0FBTyxFQUFFO2dCQUMxQyxPQUFPLEVBQUUsT0FBTztnQkFDaEIsR0FBRyxFQUFFLFNBQVM7Z0JBQ2QsS0FBSyxFQUFFLE9BQU87Z0JBQ2QsSUFBSSxFQUFDLFNBQVM7Z0JBQ2QsSUFBSSxFQUFFLFNBQVM7Z0JBQ2YsTUFBTSxFQUFFLFNBQVM7YUFDcEIsQ0FBQyxDQUFDO1NBQ047YUFBTTtZQUNILE9BQU8sVUFBVSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sRUFBRSxPQUFpRCxDQUFDLENBQUM7U0FDcEc7SUFDTCxDQUFDOzs4R0E5RFEsaUJBQWlCOzRHQUFqQixpQkFBaUI7MkZBQWpCLGlCQUFpQjtrQkFIN0IsSUFBSTttQkFBQztvQkFDRixJQUFJLEVBQUUsZUFBZTtpQkFDeEIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQaXBlLCBQaXBlVHJhbnNmb3JtIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AUGlwZSh7XHJcbiAgICBuYW1lOiAnc2RzRGF0ZUZvcm1hdCcsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZHNEYXRlRm9ybWF0UGlwZSBpbXBsZW1lbnRzIFBpcGVUcmFuc2Zvcm0ge1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogRm9ybWF0cyBkYXRlIGluIGdpdmVuIGxvY2FsZS5cclxuICAgICAqXHJcbiAgICAgKiBAcGFyYW0gZGF0ZSBEYXRlIHRvIGJlIGZvcm1hdHRlZC5cclxuICAgICAqIEBwYXJhbSBsb2NhbGUgQSBsb2NhbGUgY29kZSBmb3IgdGhlIGxvY2FsZSBmb3JtYXQgcnVsZXMgdG8gdXNlLlxyXG4gICAgICogQHBhcmFtIG9wdGlvbnMgQW4gb3B0aW9uYWwgSW50bC5EYXRlVGltZUZvcm1hdE9wdGlvbnMgcGFyYW1ldGVyIHRoYXQgY2FuIGJlIHVzZWQgdG8gZmluZS10dW5lIHRoZSBvdXRwdXQuXHJcbiAgICAgKiBAcmV0dXJucyBBIHN0cmluZyB3aXRoIGZvcm1hdHRlZCBkYXRlXHJcbiAgICAgKiBAc2VlIFtJbnRsIGRvY3NdKGh0dHBzOi8vZGV2ZWxvcGVyLm1vemlsbGEub3JnL2VuLVVTL2RvY3MvV2ViL0phdmFTY3JpcHQvUmVmZXJlbmNlL0dsb2JhbF9PYmplY3RzL0ludGwpXHJcbiAgICAgKlxyXG4gICAgICogQHB1YmxpY0FwaVxyXG4gICAgICovXHJcbiAgICBwdWJsaWMgdHJhbnNmb3JtKFxyXG4gICAgICAgIGRhdGU6IERhdGUgfCBudW1iZXIgfCBzdHJpbmcsXHJcbiAgICAgICAgbG9jYWxlczogc3RyaW5nIHwgQXJyYXk8c3RyaW5nPixcclxuICAgICAgICBvcHRpb25zPzogSW50bC5EYXRlVGltZUZvcm1hdE9wdGlvbnMgfCAndGltZScgfCAnZGF0ZScgfCAnZGF0ZS1tZWRpdW0nIHwgJ2RhdGUtbG9uZycgfCAnZGF0ZS10aW1lJ1xyXG4gICAgKTogc3RyaW5nIHtcclxuICAgICAgICBpZiAoZGF0ZSA9PT0gbnVsbCkge1xyXG4gICAgICAgICAgICByZXR1cm4gJydcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGNvbnN0IGZvcm1hdERhdGUgPSBuZXcgRGF0ZShkYXRlKTtcclxuICAgICAgICBpZiAoZm9ybWF0RGF0ZS50b1N0cmluZygpID09ICdJbnZhbGlkIERhdGUnKSB7XHJcbiAgICAgICAgICAgIHJldHVybiAnJ1xyXG4gICAgICAgIH0gICAgICAgIFxyXG5cclxuICAgICAgICBpZiAob3B0aW9ucyA9PT0gJ3RpbWUnKXtcclxuICAgICAgICAgICAgcmV0dXJuIGZvcm1hdERhdGUudG9Mb2NhbGVUaW1lU3RyaW5nKGxvY2FsZXMsIHtcclxuICAgICAgICAgICAgICAgIGhvdXI6ICdudW1lcmljJyxcclxuICAgICAgICAgICAgICAgIG1pbnV0ZTogJzItZGlnaXQnXHJcbiAgICAgICAgICAgIH0pOyAgICBcclxuICAgICAgICB9IGVsc2UgIGlmIChvcHRpb25zID09PSAnZGF0ZScpe1xyXG4gICAgICAgICAgICByZXR1cm4gZm9ybWF0RGF0ZS50b0xvY2FsZURhdGVTdHJpbmcobG9jYWxlcywge1xyXG4gICAgICAgICAgICAgICAgZGF5OiAnbnVtZXJpYycsIFxyXG4gICAgICAgICAgICAgICAgbW9udGg6ICdudW1lcmljJywgXHJcbiAgICAgICAgICAgICAgICB5ZWFyOidudW1lcmljJ1xyXG4gICAgICAgICAgICB9KTsgICAgXHJcbiAgICAgICAgfSBlbHNlICBpZiAob3B0aW9ucyA9PT0gJ2RhdGUtbWVkaXVtJyl7XHJcbiAgICAgICAgICAgIHJldHVybiBmb3JtYXREYXRlLnRvTG9jYWxlRGF0ZVN0cmluZyhsb2NhbGVzLCB7XHJcbiAgICAgICAgICAgICAgICBkYXk6ICcyLWRpZ2l0JywgXHJcbiAgICAgICAgICAgICAgICBtb250aDogJzItZGlnaXQnLCBcclxuICAgICAgICAgICAgICAgIHllYXI6J251bWVyaWMnXHJcbiAgICAgICAgICAgIH0pOyAgICBcclxuICAgICAgICB9IGVsc2UgIGlmIChvcHRpb25zID09PSAnZGF0ZS1sb25nJyl7XHJcbiAgICAgICAgICAgIHJldHVybiBmb3JtYXREYXRlLnRvTG9jYWxlRGF0ZVN0cmluZyhsb2NhbGVzLCB7XHJcbiAgICAgICAgICAgICAgICBkYXk6ICcyLWRpZ2l0JywgXHJcbiAgICAgICAgICAgICAgICBtb250aDogJ3Nob3J0JywgXHJcbiAgICAgICAgICAgICAgICB5ZWFyOidudW1lcmljJ1xyXG4gICAgICAgICAgICB9KTsgICAgXHJcbiAgICAgICAgfSBlbHNlICBpZiAob3B0aW9ucyA9PT0gJ2RhdGUtdGltZScpe1xyXG4gICAgICAgICAgICByZXR1cm4gZm9ybWF0RGF0ZS50b0xvY2FsZURhdGVTdHJpbmcobG9jYWxlcywge1xyXG4gICAgICAgICAgICAgICAgd2Vla2RheTogJ3Nob3J0JywgXHJcbiAgICAgICAgICAgICAgICBkYXk6ICdudW1lcmljJywgXHJcbiAgICAgICAgICAgICAgICBtb250aDogJ3Nob3J0JywgXHJcbiAgICAgICAgICAgICAgICB5ZWFyOidudW1lcmljJywgXHJcbiAgICAgICAgICAgICAgICBob3VyOiAnbnVtZXJpYycsXHJcbiAgICAgICAgICAgICAgICBtaW51dGU6ICcyLWRpZ2l0J1xyXG4gICAgICAgICAgICB9KTsgICAgXHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgcmV0dXJuIGZvcm1hdERhdGUudG9Mb2NhbGVEYXRlU3RyaW5nKGxvY2FsZXMsIG9wdGlvbnMgYXMgSW50bC5EYXRlVGltZUZvcm1hdE9wdGlvbnMgfCB1bmRlZmluZWQpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxufVxyXG4iXX0=

package/esm2020/src/lib/modal/dialog/dialog.component.mjs

@@ -13,6 +13,7 @@ export class SdsDialogComponent {
         this.secondaryButtonClass = 'btn-secondary';
         this.showHeader = true;
         this.showCloseButton = true;
+        this.showPrimaryButton = true;
         this.showSecondaryButton = true;
     }
     ngOnInit() { }
@@ -47,10 +48,10 @@ export class SdsDialogComponent {
     }
 }
 SdsDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDialogComponent, selector: "sds-dialog", inputs: { title: "title", closeText: "closeText", size: "size", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText", primaryButtonClass: "primaryButtonClass", secondaryButtonClass: "secondaryButtonClass", showHeader: "showHeader", showCloseButton: "showCloseButton", showSecondaryButton: "showSecondaryButton" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<sds-modal\r\n    #modal\r\n    [modalTitle]=\"title\"\r\n    [size]=\"size\"\r\n    [showCloseButton]=\"showCloseButton\"\r\n    [showHeader]=\"showHeader\"\r\n    [translations]=\"{ close: closeText}\"\r\n    (closeClick)=\"onCloseClick()\"\r\n>\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-container #footer ngProjectAs='footer'>\r\n        <button\r\n            *ngIf=\"showSecondaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"secondaryButtonClass\"\r\n            (click)=\"onSecondaryClick()\"\r\n        >{{secondaryButtonText}}</button>\r\n        <button\r\n            class=\"btn\"\r\n            [class]=\"primaryButtonClass\"\r\n            (click)=\"onPrimaryClick()\"\r\n        >{{primaryButtonText}}</button>\r\n    </ng-container>\r\n</sds-modal>", styles: [""], components: [{ type: i1.SdsModalComponent, selector: "sds-modal", inputs: ["modalTitle", "showHeader", "showFooter", "size", "modalDialogId", "showCloseButton", "translations", "isScrollable"], outputs: ["modalOpen", "modalClose", "closeClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDialogComponent, selector: "sds-dialog", inputs: { title: "title", closeText: "closeText", size: "size", primaryButtonText: "primaryButtonText", secondaryButtonText: "secondaryButtonText", primaryButtonClass: "primaryButtonClass", secondaryButtonClass: "secondaryButtonClass", showHeader: "showHeader", showCloseButton: "showCloseButton", showPrimaryButton: "showPrimaryButton", showSecondaryButton: "showSecondaryButton" }, viewQueries: [{ propertyName: "_modal", first: true, predicate: ["modal"], descendants: true, static: true }], ngImport: i0, template: "<sds-modal\r\n    #modal\r\n    [modalTitle]=\"title\"\r\n    [size]=\"size\"\r\n    [showCloseButton]=\"showCloseButton\"\r\n    [showHeader]=\"showHeader\"\r\n    [translations]=\"{ close: closeText}\"\r\n    (closeClick)=\"onCloseClick()\"\r\n>\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-container #footer ngProjectAs='footer'>\r\n        <button\r\n            *ngIf=\"showSecondaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"secondaryButtonClass\"\r\n            (click)=\"onSecondaryClick()\"\r\n        >{{secondaryButtonText}}</button>\r\n        <button\r\n            *ngIf=\"showPrimaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"primaryButtonClass\"\r\n            (click)=\"onPrimaryClick()\"\r\n        >{{primaryButtonText}}</button>\r\n    </ng-container>\r\n</sds-modal>\r\n", styles: [""], components: [{ type: i1.SdsModalComponent, selector: "sds-modal", inputs: ["modalTitle", "showHeader", "showFooter", "size", "modalDialogId", "showCloseButton", "translations", "isScrollable"], outputs: ["modalOpen", "modalClose", "closeClick"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-dialog', template: "<sds-modal\r\n    #modal\r\n    [modalTitle]=\"title\"\r\n    [size]=\"size\"\r\n    [showCloseButton]=\"showCloseButton\"\r\n    [showHeader]=\"showHeader\"\r\n    [translations]=\"{ close: closeText}\"\r\n    (closeClick)=\"onCloseClick()\"\r\n>\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-container #footer ngProjectAs='footer'>\r\n        <button\r\n            *ngIf=\"showSecondaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"secondaryButtonClass\"\r\n            (click)=\"onSecondaryClick()\"\r\n        >{{secondaryButtonText}}</button>\r\n        <button\r\n            class=\"btn\"\r\n            [class]=\"primaryButtonClass\"\r\n            (click)=\"onPrimaryClick()\"\r\n        >{{primaryButtonText}}</button>\r\n    </ng-container>\r\n</sds-modal>", styles: [""] }]
+            args: [{ selector: 'sds-dialog', template: "<sds-modal\r\n    #modal\r\n    [modalTitle]=\"title\"\r\n    [size]=\"size\"\r\n    [showCloseButton]=\"showCloseButton\"\r\n    [showHeader]=\"showHeader\"\r\n    [translations]=\"{ close: closeText}\"\r\n    (closeClick)=\"onCloseClick()\"\r\n>\r\n    <div>\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    <ng-container #footer ngProjectAs='footer'>\r\n        <button\r\n            *ngIf=\"showSecondaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"secondaryButtonClass\"\r\n            (click)=\"onSecondaryClick()\"\r\n        >{{secondaryButtonText}}</button>\r\n        <button\r\n            *ngIf=\"showPrimaryButton\"\r\n            class=\"btn\"\r\n            [class]=\"primaryButtonClass\"\r\n            (click)=\"onPrimaryClick()\"\r\n        >{{primaryButtonText}}</button>\r\n    </ng-container>\r\n</sds-modal>\r\n", styles: [""] }]
         }], ctorParameters: function () { return []; }, propDecorators: { title: [{
                 type: Input
             }], closeText: [{
@@ -69,10 +70,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], showCloseButton: [{
                 type: Input
+            }], showPrimaryButton: [{
+                type: Input
             }], showSecondaryButton: [{
                 type: Input
             }], _modal: [{
                 type: ViewChild,
                 args: ['modal', { static: true }]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL21vZGFsL2RpYWxvZy9kaWFsb2cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvZGlhbG9nL2RpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFnQixLQUFLLEVBQTRDLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVVwSCxNQUFNLE9BQU8sa0JBQWtCO0lBb0IzQjtRQW5CZ0IsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixjQUFTLEdBQVksT0FBTyxDQUFDO1FBQzdCLFNBQUksR0FBOEIsSUFBSSxDQUFDO1FBRXZDLHNCQUFpQixHQUFXLElBQUksQ0FBQztRQUNqQyx3QkFBbUIsR0FBVyxRQUFRLENBQUM7UUFFdkMsdUJBQWtCLEdBQVcsYUFBYSxDQUFDO1FBQzNDLHlCQUFvQixHQUFXLGVBQWUsQ0FBQztRQUUvQyxlQUFVLEdBQVksSUFBSSxDQUFDO1FBQzNCLG9CQUFlLEdBQVksSUFBSSxDQUFDO1FBQ2hDLHdCQUFtQixHQUFZLElBQUksQ0FBQztJQU9yQyxDQUFDO0lBRWhCLFFBQVEsS0FBVSxDQUFDO0lBRVosSUFBSSxDQUFDLFFBQW1ELEVBQUUsSUFBVTtRQUN2RSxJQUFJLENBQUMsU0FBUyxHQUFHLFFBQVEsQ0FBQztRQUMxQixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQztRQUUxQixJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksU0FBUyxFQUFFO1lBQzFCLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUM7U0FDdEI7SUFDTCxDQUFDO0lBRU8sS0FBSztRQUNULElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxTQUFTLEVBQUU7WUFDMUIsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsQ0FBQztTQUN2QjtJQUNMLENBQUM7SUFFTSxnQkFBZ0I7UUFDbkIsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxTQUFTLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUNuRDtRQUNELElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRU0sY0FBYztRQUNqQixJQUFJLElBQUksQ0FBQyxTQUFTLEVBQUU7WUFDaEIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxTQUFTLEVBQUUsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1NBQ2pEO1FBQ0QsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFFTSxZQUFZO1FBQ2YsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUMvQztJQUNMLENBQUM7OytHQXpEUSxrQkFBa0I7bUdBQWxCLGtCQUFrQix5ZkNWL0Isb3pCQTBCWTsyRkRoQkMsa0JBQWtCO2tCQUw5QixTQUFTOytCQUNJLFlBQVk7MEVBS04sS0FBSztzQkFBcEIsS0FBSztnQkFDVSxTQUFTO3NCQUF4QixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBRVUsaUJBQWlCO3NCQUFoQyxLQUFLO2dCQUNVLG1CQUFtQjtzQkFBbEMsS0FBSztnQkFFVSxrQkFBa0I7c0JBQWpDLEtBQUs7Z0JBQ1Usb0JBQW9CO3NCQUFuQyxLQUFLO2dCQUVVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsZUFBZTtzQkFBOUIsS0FBSztnQkFDVSxtQkFBbUI7c0JBQWxDLEtBQUs7Z0JBRXdDLE1BQU07c0JBQW5ELFNBQVM7dUJBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcywgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFNkc01vZGFsQ29tcG9uZW50IH0gZnJvbSAnLi4vbW9kYWwuY29tcG9uZW50JztcclxuXHJcbnR5cGUgbW9kYWxCdXR0b24gPSAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICdjbG9zZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLWRpYWxvZycsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vZGlhbG9nLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2RpYWxvZy5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzRGlhbG9nQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyB0aXRsZTogc3RyaW5nID0gJyc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgY2xvc2VUZXh0Pzogc3RyaW5nID0gJ2Nsb3NlJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaXplOiAnc20nIHwgJ21kJyB8ICdsZycgfCAneGwnID0gJ21kJztcclxuICAgIFxyXG4gICAgQElucHV0KCkgcHVibGljIHByaW1hcnlCdXR0b25UZXh0OiBzdHJpbmcgPSAnT2snO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNlY29uZGFyeUJ1dHRvblRleHQ6IHN0cmluZyA9ICdDYW5jZWwnO1xyXG5cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBwcmltYXJ5QnV0dG9uQ2xhc3M6IHN0cmluZyA9ICdidG4tcHJpbWFyeSc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2Vjb25kYXJ5QnV0dG9uQ2xhc3M6IHN0cmluZyA9ICdidG4tc2Vjb25kYXJ5JzsgICAgXHJcbiAgICBcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93SGVhZGVyOiBib29sZWFuID0gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93Q2xvc2VCdXR0b246IGJvb2xlYW4gPSB0cnVlO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dTZWNvbmRhcnlCdXR0b246IGJvb2xlYW4gPSB0cnVlO1xyXG5cclxuICAgIEBWaWV3Q2hpbGQoJ21vZGFsJywgeyBzdGF0aWM6IHRydWUgfSkgcHJpdmF0ZSBfbW9kYWw6IFNkc01vZGFsQ29tcG9uZW50IHwgdW5kZWZpbmVkO1xyXG5cclxuICAgIHByaXZhdGUgX2NhbGxiYWNrPzogRnVuY3Rpb247XHJcbiAgICBwcml2YXRlIF9jYWxsYmFja0RhdGE6IGFueTtcclxuXHJcbiAgICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxyXG5cclxuICAgIHB1YmxpYyBvcGVuKGNhbGxiYWNrPzogKGJ1dHRvbjogbW9kYWxCdXR0b24sIGRhdGE6IGFueSkgPT4gdm9pZCwgZGF0YT86IGFueSk6IHZvaWR7XHJcbiAgICAgICAgdGhpcy5fY2FsbGJhY2sgPSBjYWxsYmFjaztcclxuICAgICAgICB0aGlzLl9jYWxsYmFja0RhdGEgPSBkYXRhO1xyXG5cclxuICAgICAgICBpZiAodGhpcy5fbW9kYWwgIT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX21vZGFsLm9wZW4oKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSBjbG9zZSgpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5fbW9kYWwgIT0gdW5kZWZpbmVkKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX21vZGFsLmNsb3NlKCk7XHJcbiAgICAgICAgfSAgICAgICAgXHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9uU2Vjb25kYXJ5Q2xpY2soKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuX2NhbGxiYWNrKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX2NhbGxiYWNrKCdzZWNvbmRhcnknLCB0aGlzLl9jYWxsYmFja0RhdGEpO1xyXG4gICAgICAgIH1cclxuICAgICAgICB0aGlzLmNsb3NlKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIG9uUHJpbWFyeUNsaWNrKCk6IHZvaWQge1xyXG4gICAgICAgIGlmICh0aGlzLl9jYWxsYmFjaykge1xyXG4gICAgICAgICAgICB0aGlzLl9jYWxsYmFjaygncHJpbWFyeScsIHRoaXMuX2NhbGxiYWNrRGF0YSk7XHJcbiAgICAgICAgfVxyXG4gICAgICAgIHRoaXMuY2xvc2UoKTtcclxuICAgIH0gICAgXHJcblxyXG4gICAgcHVibGljIG9uQ2xvc2VDbGljaygpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5fY2FsbGJhY2spIHtcclxuICAgICAgICAgICAgdGhpcy5fY2FsbGJhY2soJ2Nsb3NlJywgdGhpcy5fY2FsbGJhY2tEYXRhKTtcclxuICAgICAgICB9XHJcbiAgICB9XHJcblxyXG59XHJcblxyXG5cclxuXHJcbiIsIjxzZHMtbW9kYWxcclxuICAgICNtb2RhbFxyXG4gICAgW21vZGFsVGl0bGVdPVwidGl0bGVcIlxyXG4gICAgW3NpemVdPVwic2l6ZVwiXHJcbiAgICBbc2hvd0Nsb3NlQnV0dG9uXT1cInNob3dDbG9zZUJ1dHRvblwiXHJcbiAgICBbc2hvd0hlYWRlcl09XCJzaG93SGVhZGVyXCJcclxuICAgIFt0cmFuc2xhdGlvbnNdPVwieyBjbG9zZTogY2xvc2VUZXh0fVwiXHJcbiAgICAoY2xvc2VDbGljayk9XCJvbkNsb3NlQ2xpY2soKVwiXHJcbj5cclxuICAgIDxkaXY+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcblxyXG4gICAgPG5nLWNvbnRhaW5lciAjZm9vdGVyIG5nUHJvamVjdEFzPSdmb290ZXInPlxyXG4gICAgICAgIDxidXR0b25cclxuICAgICAgICAgICAgKm5nSWY9XCJzaG93U2Vjb25kYXJ5QnV0dG9uXCJcclxuICAgICAgICAgICAgY2xhc3M9XCJidG5cIlxyXG4gICAgICAgICAgICBbY2xhc3NdPVwic2Vjb25kYXJ5QnV0dG9uQ2xhc3NcIlxyXG4gICAgICAgICAgICAoY2xpY2spPVwib25TZWNvbmRhcnlDbGljaygpXCJcclxuICAgICAgICA+e3tzZWNvbmRhcnlCdXR0b25UZXh0fX08L2J1dHRvbj5cclxuICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgIGNsYXNzPVwiYnRuXCJcclxuICAgICAgICAgICAgW2NsYXNzXT1cInByaW1hcnlCdXR0b25DbGFzc1wiXHJcbiAgICAgICAgICAgIChjbGljayk9XCJvblByaW1hcnlDbGljaygpXCJcclxuICAgICAgICA+e3twcmltYXJ5QnV0dG9uVGV4dH19PC9idXR0b24+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuPC9zZHMtbW9kYWw+Il19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL21vZGFsL2RpYWxvZy9kaWFsb2cuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbW9kYWwvZGlhbG9nL2RpYWxvZy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFnQixLQUFLLEVBQTRDLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVVwSCxNQUFNLE9BQU8sa0JBQWtCO0lBcUIzQjtRQXBCZ0IsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUNuQixjQUFTLEdBQVksT0FBTyxDQUFDO1FBQzdCLFNBQUksR0FBOEIsSUFBSSxDQUFDO1FBRXZDLHNCQUFpQixHQUFXLElBQUksQ0FBQztRQUNqQyx3QkFBbUIsR0FBVyxRQUFRLENBQUM7UUFFdkMsdUJBQWtCLEdBQVcsYUFBYSxDQUFDO1FBQzNDLHlCQUFvQixHQUFXLGVBQWUsQ0FBQztRQUUvQyxlQUFVLEdBQVksSUFBSSxDQUFDO1FBQzNCLG9CQUFlLEdBQVksSUFBSSxDQUFDO1FBQ2hDLHNCQUFpQixHQUFZLElBQUksQ0FBQztRQUNsQyx3QkFBbUIsR0FBWSxJQUFJLENBQUM7SUFPckMsQ0FBQztJQUVoQixRQUFRLEtBQVUsQ0FBQztJQUVaLElBQUksQ0FBQyxRQUFtRCxFQUFFLElBQVU7UUFDdkUsSUFBSSxDQUFDLFNBQVMsR0FBRyxRQUFRLENBQUM7UUFDMUIsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFFMUIsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLFNBQVMsRUFBRTtZQUMxQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ3RCO0lBQ0wsQ0FBQztJQUVPLEtBQUs7UUFDVCxJQUFJLElBQUksQ0FBQyxNQUFNLElBQUksU0FBUyxFQUFFO1lBQzFCLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLENBQUM7U0FDdkI7SUFDTCxDQUFDO0lBRU0sZ0JBQWdCO1FBQ25CLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNoQixJQUFJLENBQUMsU0FBUyxDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDbkQ7UUFDRCxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVNLGNBQWM7UUFDakIsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2hCLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxFQUFFLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUNqRDtRQUNELElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUNqQixDQUFDO0lBRU0sWUFBWTtRQUNmLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRTtZQUNoQixJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7U0FDL0M7SUFDTCxDQUFDOzsrR0ExRFEsa0JBQWtCO21HQUFsQixrQkFBa0IsaWlCQ1YvQixtMkJBNEJBOzJGRGxCYSxrQkFBa0I7a0JBTDlCLFNBQVM7K0JBQ0ksWUFBWTswRUFLTixLQUFLO3NCQUFwQixLQUFLO2dCQUNVLFNBQVM7c0JBQXhCLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFFVSxpQkFBaUI7c0JBQWhDLEtBQUs7Z0JBQ1UsbUJBQW1CO3NCQUFsQyxLQUFLO2dCQUVVLGtCQUFrQjtzQkFBakMsS0FBSztnQkFDVSxvQkFBb0I7c0JBQW5DLEtBQUs7Z0JBRVUsVUFBVTtzQkFBekIsS0FBSztnQkFDVSxlQUFlO3NCQUE5QixLQUFLO2dCQUNVLGlCQUFpQjtzQkFBaEMsS0FBSztnQkFDVSxtQkFBbUI7c0JBQWxDLEtBQUs7Z0JBRXdDLE1BQU07c0JBQW5ELFNBQVM7dUJBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25DaGFuZ2VzLCBPbkluaXQsIE91dHB1dCwgU2ltcGxlQ2hhbmdlcywgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IFNkc01vZGFsQ29tcG9uZW50IH0gZnJvbSAnLi4vbW9kYWwuY29tcG9uZW50JztcclxuXHJcbnR5cGUgbW9kYWxCdXR0b24gPSAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICdjbG9zZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLWRpYWxvZycsXHJcbiAgICB0ZW1wbGF0ZVVybDogJy4vZGlhbG9nLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2RpYWxvZy5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzRGlhbG9nQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyB0aXRsZTogc3RyaW5nID0gJyc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgY2xvc2VUZXh0Pzogc3RyaW5nID0gJ2Nsb3NlJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaXplOiAnc20nIHwgJ21kJyB8ICdsZycgfCAneGwnID0gJ21kJztcclxuXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgcHJpbWFyeUJ1dHRvblRleHQ6IHN0cmluZyA9ICdPayc7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2Vjb25kYXJ5QnV0dG9uVGV4dDogc3RyaW5nID0gJ0NhbmNlbCc7XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIHByaW1hcnlCdXR0b25DbGFzczogc3RyaW5nID0gJ2J0bi1wcmltYXJ5JztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzZWNvbmRhcnlCdXR0b25DbGFzczogc3RyaW5nID0gJ2J0bi1zZWNvbmRhcnknO1xyXG5cclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93SGVhZGVyOiBib29sZWFuID0gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93Q2xvc2VCdXR0b246IGJvb2xlYW4gPSB0cnVlO1xyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dQcmltYXJ5QnV0dG9uOiBib29sZWFuID0gdHJ1ZTtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93U2Vjb25kYXJ5QnV0dG9uOiBib29sZWFuID0gdHJ1ZTtcclxuXHJcbiAgICBAVmlld0NoaWxkKCdtb2RhbCcsIHsgc3RhdGljOiB0cnVlIH0pIHByaXZhdGUgX21vZGFsOiBTZHNNb2RhbENvbXBvbmVudCB8IHVuZGVmaW5lZDtcclxuXHJcbiAgICBwcml2YXRlIF9jYWxsYmFjaz86IEZ1bmN0aW9uO1xyXG4gICAgcHJpdmF0ZSBfY2FsbGJhY2tEYXRhOiBhbnk7XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7fVxyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgICBwdWJsaWMgb3BlbihjYWxsYmFjaz86IChidXR0b246IG1vZGFsQnV0dG9uLCBkYXRhOiBhbnkpID0+IHZvaWQsIGRhdGE/OiBhbnkpOiB2b2lke1xyXG4gICAgICAgIHRoaXMuX2NhbGxiYWNrID0gY2FsbGJhY2s7XHJcbiAgICAgICAgdGhpcy5fY2FsbGJhY2tEYXRhID0gZGF0YTtcclxuXHJcbiAgICAgICAgaWYgKHRoaXMuX21vZGFsICE9IHVuZGVmaW5lZCkge1xyXG4gICAgICAgICAgICB0aGlzLl9tb2RhbC5vcGVuKCk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgY2xvc2UoKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuX21vZGFsICE9IHVuZGVmaW5lZCkge1xyXG4gICAgICAgICAgICB0aGlzLl9tb2RhbC5jbG9zZSgpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb25TZWNvbmRhcnlDbGljaygpOiB2b2lkIHtcclxuICAgICAgICBpZiAodGhpcy5fY2FsbGJhY2spIHtcclxuICAgICAgICAgICAgdGhpcy5fY2FsbGJhY2soJ3NlY29uZGFyeScsIHRoaXMuX2NhbGxiYWNrRGF0YSk7XHJcbiAgICAgICAgfVxyXG4gICAgICAgIHRoaXMuY2xvc2UoKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb25QcmltYXJ5Q2xpY2soKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuX2NhbGxiYWNrKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX2NhbGxiYWNrKCdwcmltYXJ5JywgdGhpcy5fY2FsbGJhY2tEYXRhKTtcclxuICAgICAgICB9XHJcbiAgICAgICAgdGhpcy5jbG9zZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBvbkNsb3NlQ2xpY2soKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuX2NhbGxiYWNrKSB7XHJcbiAgICAgICAgICAgIHRoaXMuX2NhbGxiYWNrKCdjbG9zZScsIHRoaXMuX2NhbGxiYWNrRGF0YSk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxufVxyXG5cclxuXHJcblxyXG4iLCI8c2RzLW1vZGFsXHJcbiAgICAjbW9kYWxcclxuICAgIFttb2RhbFRpdGxlXT1cInRpdGxlXCJcclxuICAgIFtzaXplXT1cInNpemVcIlxyXG4gICAgW3Nob3dDbG9zZUJ1dHRvbl09XCJzaG93Q2xvc2VCdXR0b25cIlxyXG4gICAgW3Nob3dIZWFkZXJdPVwic2hvd0hlYWRlclwiXHJcbiAgICBbdHJhbnNsYXRpb25zXT1cInsgY2xvc2U6IGNsb3NlVGV4dH1cIlxyXG4gICAgKGNsb3NlQ2xpY2spPVwib25DbG9zZUNsaWNrKClcIlxyXG4+XHJcbiAgICA8ZGl2PlxyXG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxuZy1jb250YWluZXIgI2Zvb3RlciBuZ1Byb2plY3RBcz0nZm9vdGVyJz5cclxuICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICpuZ0lmPVwic2hvd1NlY29uZGFyeUJ1dHRvblwiXHJcbiAgICAgICAgICAgIGNsYXNzPVwiYnRuXCJcclxuICAgICAgICAgICAgW2NsYXNzXT1cInNlY29uZGFyeUJ1dHRvbkNsYXNzXCJcclxuICAgICAgICAgICAgKGNsaWNrKT1cIm9uU2Vjb25kYXJ5Q2xpY2soKVwiXHJcbiAgICAgICAgPnt7c2Vjb25kYXJ5QnV0dG9uVGV4dH19PC9idXR0b24+XHJcbiAgICAgICAgPGJ1dHRvblxyXG4gICAgICAgICAgICAqbmdJZj1cInNob3dQcmltYXJ5QnV0dG9uXCJcclxuICAgICAgICAgICAgY2xhc3M9XCJidG5cIlxyXG4gICAgICAgICAgICBbY2xhc3NdPVwicHJpbWFyeUJ1dHRvbkNsYXNzXCJcclxuICAgICAgICAgICAgKGNsaWNrKT1cIm9uUHJpbWFyeUNsaWNrKClcIlxyXG4gICAgICAgID57e3ByaW1hcnlCdXR0b25UZXh0fX08L2J1dHRvbj5cclxuICAgIDwvbmctY29udGFpbmVyPlxyXG48L3Nkcy1tb2RhbD5cclxuIl19

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

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