@spicainternational/ngx-sds-components 7.3.1 → 7.4.0

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

@@ -68,4 +68,4 @@ export class PeriodPickerDynamicDateRangeDefinitionGenerator {
         return ranges;
     }
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1waWNrZXIubW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRlLXBpY2tlci9kYXRlLXBpY2tlci5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8scUJBQXFCO0lBQWxDO1FBQ0ksV0FBTSxHQUFXLEVBQUUsQ0FBQztJQUN4QixDQUFDO0NBQUE7QUFFRCxNQUFNLE9BQU8sK0JBQStCO0lBU3hDLFlBQ0ksSUFBWSxFQUNaLE9BQTRCLE9BQU8sRUFDbkMsMEJBQW1FLEVBQ25FLFFBQWUsRUFDZixNQUFhO1FBYmpCLFNBQUksR0FBVyxFQUFFLENBQUM7UUFDbEIsU0FBSSxHQUF3QixPQUFPLENBQUM7UUFjaEMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFDakIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFDakIsSUFBSSxDQUFDLDBCQUEwQixHQUFHLDBCQUEwQixDQUFDO1FBQzdELElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO0lBQ3pCLENBQUM7Q0FDSjtBQUVELE1BQU0sT0FBTyxzQ0FBc0M7SUFJL0MsWUFBWSxTQUFnQyxFQUFFLFFBQWdCO1FBQzFELElBQUksQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDO1FBQzNCLElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO0lBQzdCLENBQUM7Q0FDSjtBQUVELE1BQU0sT0FBTyxxQkFBcUI7SUFLOUIsWUFBWSxJQUFZLEVBQUUsUUFBZSxFQUFFLE1BQWE7UUFDcEQsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFDakIsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7UUFDekIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7SUFDekIsQ0FBQztDQUNKO0FBRUQsTUFBTSxPQUFPLCtDQUErQztJQUV4RCxNQUFNLENBQUMscUJBQXFCLENBQUMsZ0JBQXdCLEVBQUUsaUJBQXlCLEVBQUUsYUFBcUI7UUFDbkcsTUFBTSxNQUFNLEdBQXNDLEVBQUUsQ0FBQztRQUVyRCxJQUFJLGdCQUFnQixFQUFFO1lBQ2xCLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSwrQkFBK0IsQ0FBQyxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsRUFBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUE7U0FDL0c7UUFFRCxJQUFJLGFBQWEsRUFBRTtZQUNmLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSwrQkFBK0IsQ0FBQyxhQUFhLEVBQUUsU0FBUyxFQUFFLEVBQUMsU0FBUyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsQ0FBQyxFQUFDLENBQUMsQ0FBQyxDQUFBO1NBQzVHO1FBRUQsSUFBSSxpQkFBaUIsRUFBRTtZQUNuQixNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksK0JBQStCLENBQUMsaUJBQWlCLEVBQUUsU0FBUyxFQUFFLEVBQUMsU0FBUyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUE7U0FDakg7UUFFRCxPQUFPLE1BQU0sQ0FBQztJQUNsQixDQUFDO0lBRUQsTUFBTSxDQUFDLG9CQUFvQixDQUFDLGVBQXVCLEVBQUUsZ0JBQXdCLEVBQUUsWUFBb0I7UUFDL0YsTUFBTSxNQUFNLEdBQXNDLEVBQUUsQ0FBQztRQUVyRCxJQUFJLGVBQWUsRUFBRTtZQUNqQixNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksK0JBQStCLENBQUMsZUFBZSxFQUFFLFNBQVMsRUFBRSxFQUFDLFNBQVMsRUFBRSxHQUFHLEVBQUUsUUFBUSxFQUFFLENBQUMsRUFBQyxDQUFDLENBQUMsQ0FBQTtTQUM5RztRQUVELElBQUksWUFBWSxFQUFFO1lBQ2QsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLCtCQUErQixDQUFDLFlBQVksRUFBRSxTQUFTLEVBQUUsRUFBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUE7U0FDM0c7UUFFRCxJQUFJLGdCQUFnQixFQUFFO1lBQ2xCLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSwrQkFBK0IsQ0FBQyxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsRUFBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUMsRUFBQyxDQUFDLENBQUMsQ0FBQTtTQUNoSDtRQUVELE9BQU8sTUFBTSxDQUFDO0lBQ2xCLENBQUM7SUFFRCxNQUFNLENBQUMsbUJBQW1CLENBQUMsY0FBc0IsRUFBRSxlQUF1QixFQUFFLFdBQW1CO1FBQzNGLE1BQU0sTUFBTSxHQUFzQyxFQUFFLENBQUM7UUFFckQsSUFBSSxjQUFjLEVBQUU7WUFDaEIsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLCtCQUErQixDQUFDLGNBQWMsRUFBRSxTQUFTLEVBQUUsRUFBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUE7U0FDN0c7UUFFRCxJQUFJLFdBQVcsRUFBRTtZQUNiLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSwrQkFBK0IsQ0FBQyxXQUFXLEVBQUUsU0FBUyxFQUFFLEVBQUMsU0FBUyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsQ0FBQyxFQUFDLENBQUMsQ0FBQyxDQUFBO1NBQzFHO1FBRUQsSUFBSSxlQUFlLEVBQUU7WUFDakIsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLCtCQUErQixDQUFDLGVBQWUsRUFBRSxTQUFTLEVBQUUsRUFBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUMsRUFBQyxDQUFDLENBQUMsQ0FBQTtTQUMvRztRQUVELE9BQU8sTUFBTSxDQUFDO0lBQ2xCLENBQUM7Q0FFSiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjbGFzcyBEYXRlUmFuZ2VUcmFuc2xhdGlvbnMge1xyXG4gICAgY3VzdG9tOiBzdHJpbmcgPSAnJztcclxufVxyXG5cclxuZXhwb3J0IGNsYXNzIFBlcmlvZFBpY2tlckRhdGVSYW5nZURlZmluaXRpb24ge1xyXG4gICAgbmFtZTogc3RyaW5nID0gJyc7XHJcbiAgICB0eXBlOiAnZHluYW1pYycgfCAnZml4ZWQnID0gJ2ZpeGVkJztcclxuXHJcbiAgICBkeW5hbWljRGF0ZVJhbmdlRGVmaW5pdGlvbj86IFBlcmlvZFBpY2tlckRhdGVSYW5nZUR5bmFtaWNEZWZpbml0aW9uO1xyXG5cclxuICAgIGRhdGVGcm9tPzogRGF0ZTtcclxuICAgIGRhdGVUbz86IERhdGU7XHJcblxyXG4gICAgY29uc3RydWN0b3IoXHJcbiAgICAgICAgbmFtZTogc3RyaW5nLFxyXG4gICAgICAgIHR5cGU6ICdkeW5hbWljJyB8ICdmaXhlZCcgPSAnZml4ZWQnLFxyXG4gICAgICAgIGR5bmFtaWNEYXRlUmFuZ2VEZWZpbml0aW9uPzogUGVyaW9kUGlja2VyRGF0ZVJhbmdlRHluYW1pY0RlZmluaXRpb24sXHJcbiAgICAgICAgZGF0ZUZyb20/OiBEYXRlLFxyXG4gICAgICAgIGRhdGVUbz86IERhdGVcclxuICAgICkge1xyXG4gICAgICAgIHRoaXMubmFtZSA9IG5hbWU7XHJcbiAgICAgICAgdGhpcy50eXBlID0gdHlwZTtcclxuICAgICAgICB0aGlzLmR5bmFtaWNEYXRlUmFuZ2VEZWZpbml0aW9uID0gZHluYW1pY0RhdGVSYW5nZURlZmluaXRpb247XHJcbiAgICAgICAgdGhpcy5kYXRlRnJvbSA9IGRhdGVGcm9tO1xyXG4gICAgICAgIHRoaXMuZGF0ZVRvID0gZGF0ZVRvO1xyXG4gICAgfVxyXG59XHJcblxyXG5leHBvcnQgY2xhc3MgUGVyaW9kUGlja2VyRGF0ZVJhbmdlRHluYW1pY0RlZmluaXRpb24ge1xyXG4gICAgZGltZW5zaW9uOiAnZCcgfCAndycgfCAnbScgfCAneSc7XHJcbiAgICBtb2RpZmllcjogbnVtYmVyO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKGRpbWVuc2lvbjogJ2QnIHwgJ3cnIHwgJ20nIHwgJ3knLCBtb2RpZmllcjogbnVtYmVyKSB7XHJcbiAgICAgICAgdGhpcy5kaW1lbnNpb24gPSBkaW1lbnNpb247XHJcbiAgICAgICAgdGhpcy5tb2RpZmllciA9IG1vZGlmaWVyO1xyXG4gICAgfVxyXG59XHJcblxyXG5leHBvcnQgY2xhc3MgUGVyaW9kUGlja2VyRGF0ZVJhbmdlIHtcclxuICAgIG5hbWU6IHN0cmluZztcclxuICAgIGRhdGVGcm9tPzogRGF0ZTtcclxuICAgIGRhdGVUbz86IERhdGU7XHJcblxyXG4gICAgY29uc3RydWN0b3IobmFtZTogc3RyaW5nLCBkYXRlRnJvbT86IERhdGUsIGRhdGVUbz86IERhdGUpIHtcclxuICAgICAgICB0aGlzLm5hbWUgPSBuYW1lO1xyXG4gICAgICAgIHRoaXMuZGF0ZUZyb20gPSBkYXRlRnJvbTtcclxuICAgICAgICB0aGlzLmRhdGVUbyA9IGRhdGVUbztcclxuICAgIH1cclxufVxyXG5cclxuZXhwb3J0IGNsYXNzIFBlcmlvZFBpY2tlckR5bmFtaWNEYXRlUmFuZ2VEZWZpbml0aW9uR2VuZXJhdG9yIHtcclxuXHJcbiAgICBzdGF0aWMgZ2VuZXJhdGVNb250aGx5UmFuZ2VzKGN1cnJlbnRNb250aFRleHQ6IHN0cmluZywgcHJldmlvdXNNb250aFRleHQ6IHN0cmluZywgbmV4dE1vbnRoVGV4dDogc3RyaW5nKTogUGVyaW9kUGlja2VyRGF0ZVJhbmdlRGVmaW5pdGlvbltdIHtcclxuICAgICAgICBjb25zdCByYW5nZXM6IFBlcmlvZFBpY2tlckRhdGVSYW5nZURlZmluaXRpb25bXSA9IFtdO1xyXG5cclxuICAgICAgICBpZiAoY3VycmVudE1vbnRoVGV4dCkge1xyXG4gICAgICAgICAgICByYW5nZXMucHVzaChuZXcgUGVyaW9kUGlja2VyRGF0ZVJhbmdlRGVmaW5pdGlvbihjdXJyZW50TW9udGhUZXh0LCAnZHluYW1pYycsIHtkaW1lbnNpb246ICdtJywgbW9kaWZpZXI6IDB9KSlcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGlmIChuZXh0TW9udGhUZXh0KSB7XHJcbiAgICAgICAgICAgIHJhbmdlcy5wdXNoKG5ldyBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uKG5leHRNb250aFRleHQsICdkeW5hbWljJywge2RpbWVuc2lvbjogJ20nLCBtb2RpZmllcjogMX0pKVxyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgaWYgKHByZXZpb3VzTW9udGhUZXh0KSB7XHJcbiAgICAgICAgICAgIHJhbmdlcy5wdXNoKG5ldyBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uKHByZXZpb3VzTW9udGhUZXh0LCAnZHluYW1pYycsIHtkaW1lbnNpb246ICdtJywgbW9kaWZpZXI6IC0xfSkpXHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICByZXR1cm4gcmFuZ2VzO1xyXG4gICAgfVxyXG5cclxuICAgIHN0YXRpYyBnZW5lcmF0ZVdlZWtseVJhbmdlcyhjdXJyZW50V2Vla1RleHQ6IHN0cmluZywgcHJldmlvdXNXZWVrVGV4dDogc3RyaW5nLCBuZXh0V2Vla1RleHQ6IHN0cmluZyk6IFBlcmlvZFBpY2tlckRhdGVSYW5nZURlZmluaXRpb25bXSB7XHJcbiAgICAgICAgY29uc3QgcmFuZ2VzOiBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uW10gPSBbXTtcclxuXHJcbiAgICAgICAgaWYgKGN1cnJlbnRXZWVrVGV4dCkge1xyXG4gICAgICAgICAgICByYW5nZXMucHVzaChuZXcgUGVyaW9kUGlja2VyRGF0ZVJhbmdlRGVmaW5pdGlvbihjdXJyZW50V2Vla1RleHQsICdkeW5hbWljJywge2RpbWVuc2lvbjogJ3cnLCBtb2RpZmllcjogMH0pKVxyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgaWYgKG5leHRXZWVrVGV4dCkge1xyXG4gICAgICAgICAgICByYW5nZXMucHVzaChuZXcgUGVyaW9kUGlja2VyRGF0ZVJhbmdlRGVmaW5pdGlvbihuZXh0V2Vla1RleHQsICdkeW5hbWljJywge2RpbWVuc2lvbjogJ3cnLCBtb2RpZmllcjogMX0pKVxyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgaWYgKHByZXZpb3VzV2Vla1RleHQpIHtcclxuICAgICAgICAgICAgcmFuZ2VzLnB1c2gobmV3IFBlcmlvZFBpY2tlckRhdGVSYW5nZURlZmluaXRpb24ocHJldmlvdXNXZWVrVGV4dCwgJ2R5bmFtaWMnLCB7ZGltZW5zaW9uOiAndycsIG1vZGlmaWVyOiAtMX0pKVxyXG4gICAgICAgIH1cclxuICAgICAgICBcclxuICAgICAgICByZXR1cm4gcmFuZ2VzO1xyXG4gICAgfSAgICBcclxuXHJcbiAgICBzdGF0aWMgZ2VuZXJhdGVEYWlseVJhbmdlcyhjdXJyZW50RGF5VGV4dDogc3RyaW5nLCBwcmV2aW91c0RheVRleHQ6IHN0cmluZywgbmV4dERheVRleHQ6IHN0cmluZyk6IFBlcmlvZFBpY2tlckRhdGVSYW5nZURlZmluaXRpb25bXSB7XHJcbiAgICAgICAgY29uc3QgcmFuZ2VzOiBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uW10gPSBbXTtcclxuXHJcbiAgICAgICAgaWYgKGN1cnJlbnREYXlUZXh0KSB7XHJcbiAgICAgICAgICAgIHJhbmdlcy5wdXNoKG5ldyBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uKGN1cnJlbnREYXlUZXh0LCAnZHluYW1pYycsIHtkaW1lbnNpb246ICdkJywgbW9kaWZpZXI6IDB9KSlcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGlmIChuZXh0RGF5VGV4dCkge1xyXG4gICAgICAgICAgICByYW5nZXMucHVzaChuZXcgUGVyaW9kUGlja2VyRGF0ZVJhbmdlRGVmaW5pdGlvbihuZXh0RGF5VGV4dCwgJ2R5bmFtaWMnLCB7ZGltZW5zaW9uOiAnZCcsIG1vZGlmaWVyOiAxfSkpXHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICBpZiAocHJldmlvdXNEYXlUZXh0KSB7XHJcbiAgICAgICAgICAgIHJhbmdlcy5wdXNoKG5ldyBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uKHByZXZpb3VzRGF5VGV4dCwgJ2R5bmFtaWMnLCB7ZGltZW5zaW9uOiAnZCcsIG1vZGlmaWVyOiAtMX0pKVxyXG4gICAgICAgIH1cclxuICAgICAgICBcclxuICAgICAgICByZXR1cm4gcmFuZ2VzO1xyXG4gICAgfSAgICBcclxuXHJcbn1cclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgUGVyaW9kUGlja2VyVHJhbnNsYXRpb25zIHtcclxuICAgIGNhbmNlbDogc3RyaW5nO1xyXG4gICAgYXBwbHk6IHN0cmluZztcclxuICAgIGN1c3RvbTogc3RyaW5nO1xyXG5cclxuICAgIHByaW50TGFiZWw/OiBzdHJpbmc7XHJcbn1cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0ZS1waWNrZXIubW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9kYXRlLXBpY2tlci9kYXRlLXBpY2tlci5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLE9BQU8scUJBQXFCO0lBQWxDO1FBQ0ksV0FBTSxHQUFXLEVBQUUsQ0FBQztJQUN4QixDQUFDO0NBQUE7QUFFRCxNQUFNLE9BQU8sK0JBQStCO0lBU3hDLFlBQ0ksSUFBWSxFQUNaLE9BQTRCLE9BQU8sRUFDbkMsMEJBQW1FLEVBQ25FLFFBQWUsRUFDZixNQUFhO1FBYmpCLFNBQUksR0FBVyxFQUFFLENBQUM7UUFDbEIsU0FBSSxHQUF3QixPQUFPLENBQUM7UUFjaEMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFDakIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFDakIsSUFBSSxDQUFDLDBCQUEwQixHQUFHLDBCQUEwQixDQUFDO1FBQzdELElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxNQUFNLEdBQUcsTUFBTSxDQUFDO0lBQ3pCLENBQUM7Q0FDSjtBQUVELE1BQU0sT0FBTyxzQ0FBc0M7SUFJL0MsWUFBWSxTQUFnQyxFQUFFLFFBQWdCO1FBQzFELElBQUksQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDO1FBQzNCLElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO0lBQzdCLENBQUM7Q0FDSjtBQUVELE1BQU0sT0FBTyxxQkFBcUI7SUFLOUIsWUFBWSxJQUFZLEVBQUUsUUFBZSxFQUFFLE1BQWE7UUFDcEQsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFDakIsSUFBSSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7UUFDekIsSUFBSSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUM7SUFDekIsQ0FBQztDQUNKO0FBRUQsTUFBTSxPQUFPLCtDQUErQztJQUV4RCxNQUFNLENBQUMscUJBQXFCLENBQUMsZ0JBQXdCLEVBQUUsaUJBQXlCLEVBQUUsYUFBcUI7UUFDbkcsTUFBTSxNQUFNLEdBQXNDLEVBQUUsQ0FBQztRQUVyRCxJQUFJLGdCQUFnQixFQUFFO1lBQ2xCLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSwrQkFBK0IsQ0FBQyxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsRUFBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUE7U0FDL0c7UUFFRCxJQUFJLGFBQWEsRUFBRTtZQUNmLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSwrQkFBK0IsQ0FBQyxhQUFhLEVBQUUsU0FBUyxFQUFFLEVBQUMsU0FBUyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsQ0FBQyxFQUFDLENBQUMsQ0FBQyxDQUFBO1NBQzVHO1FBRUQsSUFBSSxpQkFBaUIsRUFBRTtZQUNuQixNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksK0JBQStCLENBQUMsaUJBQWlCLEVBQUUsU0FBUyxFQUFFLEVBQUMsU0FBUyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUE7U0FDakg7UUFFRCxPQUFPLE1BQU0sQ0FBQztJQUNsQixDQUFDO0lBRUQsTUFBTSxDQUFDLG9CQUFvQixDQUFDLGVBQXVCLEVBQUUsZ0JBQXdCLEVBQUUsWUFBb0I7UUFDL0YsTUFBTSxNQUFNLEdBQXNDLEVBQUUsQ0FBQztRQUVyRCxJQUFJLGVBQWUsRUFBRTtZQUNqQixNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksK0JBQStCLENBQUMsZUFBZSxFQUFFLFNBQVMsRUFBRSxFQUFDLFNBQVMsRUFBRSxHQUFHLEVBQUUsUUFBUSxFQUFFLENBQUMsRUFBQyxDQUFDLENBQUMsQ0FBQTtTQUM5RztRQUVELElBQUksWUFBWSxFQUFFO1lBQ2QsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLCtCQUErQixDQUFDLFlBQVksRUFBRSxTQUFTLEVBQUUsRUFBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUE7U0FDM0c7UUFFRCxJQUFJLGdCQUFnQixFQUFFO1lBQ2xCLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSwrQkFBK0IsQ0FBQyxnQkFBZ0IsRUFBRSxTQUFTLEVBQUUsRUFBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUMsRUFBQyxDQUFDLENBQUMsQ0FBQTtTQUNoSDtRQUVELE9BQU8sTUFBTSxDQUFDO0lBQ2xCLENBQUM7SUFFRCxNQUFNLENBQUMsbUJBQW1CLENBQUMsY0FBc0IsRUFBRSxlQUF1QixFQUFFLFdBQW1CO1FBQzNGLE1BQU0sTUFBTSxHQUFzQyxFQUFFLENBQUM7UUFFckQsSUFBSSxjQUFjLEVBQUU7WUFDaEIsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLCtCQUErQixDQUFDLGNBQWMsRUFBRSxTQUFTLEVBQUUsRUFBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLEVBQUMsQ0FBQyxDQUFDLENBQUE7U0FDN0c7UUFFRCxJQUFJLFdBQVcsRUFBRTtZQUNiLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSwrQkFBK0IsQ0FBQyxXQUFXLEVBQUUsU0FBUyxFQUFFLEVBQUMsU0FBUyxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsQ0FBQyxFQUFDLENBQUMsQ0FBQyxDQUFBO1NBQzFHO1FBRUQsSUFBSSxlQUFlLEVBQUU7WUFDakIsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLCtCQUErQixDQUFDLGVBQWUsRUFBRSxTQUFTLEVBQUUsRUFBQyxTQUFTLEVBQUUsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUMsRUFBQyxDQUFDLENBQUMsQ0FBQTtTQUMvRztRQUVELE9BQU8sTUFBTSxDQUFDO0lBQ2xCLENBQUM7Q0FFSiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBjbGFzcyBEYXRlUmFuZ2VUcmFuc2xhdGlvbnMge1xyXG4gICAgY3VzdG9tOiBzdHJpbmcgPSAnJztcclxufVxyXG5cclxuZXhwb3J0IGNsYXNzIFBlcmlvZFBpY2tlckRhdGVSYW5nZURlZmluaXRpb24ge1xyXG4gICAgbmFtZTogc3RyaW5nID0gJyc7XHJcbiAgICB0eXBlOiAnZHluYW1pYycgfCAnZml4ZWQnID0gJ2ZpeGVkJztcclxuXHJcbiAgICBkeW5hbWljRGF0ZVJhbmdlRGVmaW5pdGlvbj86IFBlcmlvZFBpY2tlckRhdGVSYW5nZUR5bmFtaWNEZWZpbml0aW9uO1xyXG5cclxuICAgIGRhdGVGcm9tPzogRGF0ZTtcclxuICAgIGRhdGVUbz86IERhdGU7XHJcblxyXG4gICAgY29uc3RydWN0b3IoXHJcbiAgICAgICAgbmFtZTogc3RyaW5nLFxyXG4gICAgICAgIHR5cGU6ICdkeW5hbWljJyB8ICdmaXhlZCcgPSAnZml4ZWQnLFxyXG4gICAgICAgIGR5bmFtaWNEYXRlUmFuZ2VEZWZpbml0aW9uPzogUGVyaW9kUGlja2VyRGF0ZVJhbmdlRHluYW1pY0RlZmluaXRpb24sXHJcbiAgICAgICAgZGF0ZUZyb20/OiBEYXRlLFxyXG4gICAgICAgIGRhdGVUbz86IERhdGVcclxuICAgICkge1xyXG4gICAgICAgIHRoaXMubmFtZSA9IG5hbWU7XHJcbiAgICAgICAgdGhpcy50eXBlID0gdHlwZTtcclxuICAgICAgICB0aGlzLmR5bmFtaWNEYXRlUmFuZ2VEZWZpbml0aW9uID0gZHluYW1pY0RhdGVSYW5nZURlZmluaXRpb247XHJcbiAgICAgICAgdGhpcy5kYXRlRnJvbSA9IGRhdGVGcm9tO1xyXG4gICAgICAgIHRoaXMuZGF0ZVRvID0gZGF0ZVRvO1xyXG4gICAgfVxyXG59XHJcblxyXG5leHBvcnQgY2xhc3MgUGVyaW9kUGlja2VyRGF0ZVJhbmdlRHluYW1pY0RlZmluaXRpb24ge1xyXG4gICAgZGltZW5zaW9uOiAnZCcgfCAndycgfCAnbScgfCAneSc7XHJcbiAgICBtb2RpZmllcjogbnVtYmVyO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKGRpbWVuc2lvbjogJ2QnIHwgJ3cnIHwgJ20nIHwgJ3knLCBtb2RpZmllcjogbnVtYmVyKSB7XHJcbiAgICAgICAgdGhpcy5kaW1lbnNpb24gPSBkaW1lbnNpb247XHJcbiAgICAgICAgdGhpcy5tb2RpZmllciA9IG1vZGlmaWVyO1xyXG4gICAgfVxyXG59XHJcblxyXG5leHBvcnQgY2xhc3MgUGVyaW9kUGlja2VyRGF0ZVJhbmdlIHtcclxuICAgIG5hbWU6IHN0cmluZztcclxuICAgIGRhdGVGcm9tPzogRGF0ZTtcclxuICAgIGRhdGVUbz86IERhdGU7XHJcblxyXG4gICAgY29uc3RydWN0b3IobmFtZTogc3RyaW5nLCBkYXRlRnJvbT86IERhdGUsIGRhdGVUbz86IERhdGUpIHtcclxuICAgICAgICB0aGlzLm5hbWUgPSBuYW1lO1xyXG4gICAgICAgIHRoaXMuZGF0ZUZyb20gPSBkYXRlRnJvbTtcclxuICAgICAgICB0aGlzLmRhdGVUbyA9IGRhdGVUbztcclxuICAgIH1cclxufVxyXG5cclxuZXhwb3J0IGNsYXNzIFBlcmlvZFBpY2tlckR5bmFtaWNEYXRlUmFuZ2VEZWZpbml0aW9uR2VuZXJhdG9yIHtcclxuXHJcbiAgICBzdGF0aWMgZ2VuZXJhdGVNb250aGx5UmFuZ2VzKGN1cnJlbnRNb250aFRleHQ6IHN0cmluZywgcHJldmlvdXNNb250aFRleHQ6IHN0cmluZywgbmV4dE1vbnRoVGV4dDogc3RyaW5nKTogUGVyaW9kUGlja2VyRGF0ZVJhbmdlRGVmaW5pdGlvbltdIHtcclxuICAgICAgICBjb25zdCByYW5nZXM6IFBlcmlvZFBpY2tlckRhdGVSYW5nZURlZmluaXRpb25bXSA9IFtdO1xyXG5cclxuICAgICAgICBpZiAoY3VycmVudE1vbnRoVGV4dCkge1xyXG4gICAgICAgICAgICByYW5nZXMucHVzaChuZXcgUGVyaW9kUGlja2VyRGF0ZVJhbmdlRGVmaW5pdGlvbihjdXJyZW50TW9udGhUZXh0LCAnZHluYW1pYycsIHtkaW1lbnNpb246ICdtJywgbW9kaWZpZXI6IDB9KSlcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGlmIChuZXh0TW9udGhUZXh0KSB7XHJcbiAgICAgICAgICAgIHJhbmdlcy5wdXNoKG5ldyBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uKG5leHRNb250aFRleHQsICdkeW5hbWljJywge2RpbWVuc2lvbjogJ20nLCBtb2RpZmllcjogMX0pKVxyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgaWYgKHByZXZpb3VzTW9udGhUZXh0KSB7XHJcbiAgICAgICAgICAgIHJhbmdlcy5wdXNoKG5ldyBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uKHByZXZpb3VzTW9udGhUZXh0LCAnZHluYW1pYycsIHtkaW1lbnNpb246ICdtJywgbW9kaWZpZXI6IC0xfSkpXHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICByZXR1cm4gcmFuZ2VzO1xyXG4gICAgfVxyXG5cclxuICAgIHN0YXRpYyBnZW5lcmF0ZVdlZWtseVJhbmdlcyhjdXJyZW50V2Vla1RleHQ6IHN0cmluZywgcHJldmlvdXNXZWVrVGV4dDogc3RyaW5nLCBuZXh0V2Vla1RleHQ6IHN0cmluZyk6IFBlcmlvZFBpY2tlckRhdGVSYW5nZURlZmluaXRpb25bXSB7XHJcbiAgICAgICAgY29uc3QgcmFuZ2VzOiBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uW10gPSBbXTtcclxuXHJcbiAgICAgICAgaWYgKGN1cnJlbnRXZWVrVGV4dCkge1xyXG4gICAgICAgICAgICByYW5nZXMucHVzaChuZXcgUGVyaW9kUGlja2VyRGF0ZVJhbmdlRGVmaW5pdGlvbihjdXJyZW50V2Vla1RleHQsICdkeW5hbWljJywge2RpbWVuc2lvbjogJ3cnLCBtb2RpZmllcjogMH0pKVxyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgaWYgKG5leHRXZWVrVGV4dCkge1xyXG4gICAgICAgICAgICByYW5nZXMucHVzaChuZXcgUGVyaW9kUGlja2VyRGF0ZVJhbmdlRGVmaW5pdGlvbihuZXh0V2Vla1RleHQsICdkeW5hbWljJywge2RpbWVuc2lvbjogJ3cnLCBtb2RpZmllcjogMX0pKVxyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgaWYgKHByZXZpb3VzV2Vla1RleHQpIHtcclxuICAgICAgICAgICAgcmFuZ2VzLnB1c2gobmV3IFBlcmlvZFBpY2tlckRhdGVSYW5nZURlZmluaXRpb24ocHJldmlvdXNXZWVrVGV4dCwgJ2R5bmFtaWMnLCB7ZGltZW5zaW9uOiAndycsIG1vZGlmaWVyOiAtMX0pKVxyXG4gICAgICAgIH1cclxuICAgICAgICBcclxuICAgICAgICByZXR1cm4gcmFuZ2VzO1xyXG4gICAgfSAgICBcclxuXHJcbiAgICBzdGF0aWMgZ2VuZXJhdGVEYWlseVJhbmdlcyhjdXJyZW50RGF5VGV4dDogc3RyaW5nLCBwcmV2aW91c0RheVRleHQ6IHN0cmluZywgbmV4dERheVRleHQ6IHN0cmluZyk6IFBlcmlvZFBpY2tlckRhdGVSYW5nZURlZmluaXRpb25bXSB7XHJcbiAgICAgICAgY29uc3QgcmFuZ2VzOiBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uW10gPSBbXTtcclxuXHJcbiAgICAgICAgaWYgKGN1cnJlbnREYXlUZXh0KSB7XHJcbiAgICAgICAgICAgIHJhbmdlcy5wdXNoKG5ldyBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uKGN1cnJlbnREYXlUZXh0LCAnZHluYW1pYycsIHtkaW1lbnNpb246ICdkJywgbW9kaWZpZXI6IDB9KSlcclxuICAgICAgICB9XHJcblxyXG4gICAgICAgIGlmIChuZXh0RGF5VGV4dCkge1xyXG4gICAgICAgICAgICByYW5nZXMucHVzaChuZXcgUGVyaW9kUGlja2VyRGF0ZVJhbmdlRGVmaW5pdGlvbihuZXh0RGF5VGV4dCwgJ2R5bmFtaWMnLCB7ZGltZW5zaW9uOiAnZCcsIG1vZGlmaWVyOiAxfSkpXHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICBpZiAocHJldmlvdXNEYXlUZXh0KSB7XHJcbiAgICAgICAgICAgIHJhbmdlcy5wdXNoKG5ldyBQZXJpb2RQaWNrZXJEYXRlUmFuZ2VEZWZpbml0aW9uKHByZXZpb3VzRGF5VGV4dCwgJ2R5bmFtaWMnLCB7ZGltZW5zaW9uOiAnZCcsIG1vZGlmaWVyOiAtMX0pKVxyXG4gICAgICAgIH1cclxuICAgICAgICBcclxuICAgICAgICByZXR1cm4gcmFuZ2VzO1xyXG4gICAgfSAgICBcclxuXHJcbn1cclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgUGVyaW9kUGlja2VyVHJhbnNsYXRpb25zIHtcclxuICAgIGNhbmNlbDogc3RyaW5nO1xyXG4gICAgYXBwbHk6IHN0cmluZztcclxuICAgIGN1c3RvbTogc3RyaW5nO1xyXG5cclxuICAgIHByaW50TGFiZWw/OiBzdHJpbmc7XHJcblxyXG4gICAgcHJlc2V0cz86IHN0cmluZztcclxufVxyXG4iXX0=

package/esm2020/src/lib/message/message.component.mjs

@@ -27,10 +27,10 @@ export class SdsMessageComponent {
     }
 }
 SdsMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsMessageComponent, selector: "sds-message", inputs: { icon: "icon", text: "text", showCloseButton: "showCloseButton", showLearnMoreLink: "showLearnMoreLink", learnMoreLinkText: "learnMoreLinkText", learnMoreLinkUrl: "learnMoreLinkUrl", showAction: "showAction", actionText: "actionText", style: "style" }, outputs: { close: "close", actionClick: "actionClick" }, queries: [{ propertyName: "customContent", first: true, predicate: ["customContent"], descendants: true }], ngImport: i0, template: "<div \r\n    *ngIf=\"showMessage\"\r\n    class=\"px-3 py-2 d-flex rounded\"\r\n    [class.sds-message-default] = \"style == 'default'\"\r\n    [class.sds-message-success] = \"style == 'success'\"\r\n    [class.sds-message-danger] = \"style == 'danger'\"\r\n    [class.sds-message-warning] = \"style == 'warning'\"\r\n    [class.sds-message-info] = \"style == 'info'\"\r\n    >\r\n\r\n    <fa-icon \r\n        *ngIf=\"icon\"\r\n        [icon]=\"icon\"\r\n        class=\"me-2\"\r\n        >\r\n    </fa-icon>\r\n\r\n    <div class=\"flex-grow-1\">\r\n        <div *ngIf=\"!customContent\">\r\n            <span>\r\n                {{text}}\r\n            </span>\r\n\r\n            <span \r\n                *ngIf=\"showAction\"\r\n            >\r\n                <a \r\n                    class=\"link-primary sds-cursor-pointer ml-2 \"\r\n                    (click)=\"onActionButtonClick()\"\r\n                    >\r\n                    {{actionText}}\r\n                </a>\r\n            </span>\r\n\r\n            <span \r\n                *ngIf=\"showLearnMoreLink\"\r\n            >\r\n                <a \r\n                    class=\"\"\r\n                    [href]=\"learnMoreLinkUrl\"\r\n                    target=\"_learnmore\"\r\n                    >\r\n                    {{learnMoreLinkText}}\r\n                </a>\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"customContent\" >\r\n            <ng-content select=\"customContent\"></ng-content>\r\n        </ng-container> \r\n    </div>\r\n\r\n    <div *ngIf=\"showCloseButton\">\r\n        <button \r\n            type=\"button\" \r\n            class=\"btn-close ml-2\" \r\n            aria-label=\"Close\"\r\n            (click)=\"onCloseButtonClick()\"\r\n        >\r\n        </button>\r\n    </div>\r\n\r\n</div>\r\n", styles: [".sds-message-default{color:var(--bs-gray-900);background-color:var(--bs-gray-300)}.sds-message-success{color:var(--bs-gray-100);background-color:var(--bs-success)}.sds-message-danger{color:var(--bs-gray-100);background-color:var(--bs-danger)}.sds-message-warning{color:var(--bs-gray-900);background-color:var(--bs-warning)}.sds-message-info{color:var(--bs-gray-900);background-color:var(--bs-info)}.btn-close{font-size:.75em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
+SdsMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsMessageComponent, selector: "sds-message", inputs: { icon: "icon", text: "text", showCloseButton: "showCloseButton", showLearnMoreLink: "showLearnMoreLink", learnMoreLinkText: "learnMoreLinkText", learnMoreLinkUrl: "learnMoreLinkUrl", showAction: "showAction", actionText: "actionText", style: "style" }, outputs: { close: "close", actionClick: "actionClick" }, queries: [{ propertyName: "customContent", first: true, predicate: ["customContent"], descendants: true }], ngImport: i0, template: "<div \r\n    *ngIf=\"showMessage\"\r\n    class=\"px-3 py-2 d-flex rounded\"\r\n    [class.sds-message-default] = \"style == 'default'\"\r\n    \r\n    [class.sds-message-success] = \"style == 'success'\"\r\n    [class.sds-message-success-subtle] = \"style == 'successSubtle'\"\r\n    \r\n    [class.sds-message-danger] = \"style == 'danger'\"\r\n    [class.sds-message-danger-subtle] = \"style == 'dangerSubtle'\"\r\n    \r\n    [class.sds-message-warning] = \"style == 'warning'\"\r\n    [class.sds-message-warning-subtle] = \"style == 'warningSubtle'\"\r\n\r\n    [class.sds-message-info] = \"style == 'info'\"\r\n    [class.sds-message-info-subtle] = \"style == 'infoSubtle'\"\r\n    >\r\n\r\n    <fa-icon \r\n        *ngIf=\"icon\"\r\n        [icon]=\"icon\"\r\n        class=\"me-2\"\r\n        >\r\n    </fa-icon>\r\n\r\n    <div class=\"flex-grow-1\">\r\n        <div *ngIf=\"!customContent\">\r\n            <span>\r\n                {{text}}\r\n            </span>\r\n\r\n            <span \r\n                *ngIf=\"showAction\"\r\n            >\r\n                <a \r\n                    class=\"link-primary sds-cursor-pointer ml-2 \"\r\n                    (click)=\"onActionButtonClick()\"\r\n                    >\r\n                    {{actionText}}\r\n                </a>\r\n            </span>\r\n\r\n            <span \r\n                *ngIf=\"showLearnMoreLink\"\r\n            >\r\n                <a \r\n                    class=\"\"\r\n                    [href]=\"learnMoreLinkUrl\"\r\n                    target=\"_learnmore\"\r\n                    >\r\n                    {{learnMoreLinkText}}\r\n                </a>\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"customContent\" >\r\n            <ng-content select=\"customContent\"></ng-content>\r\n        </ng-container> \r\n    </div>\r\n\r\n    <div *ngIf=\"showCloseButton\">\r\n        <button \r\n            type=\"button\" \r\n            class=\"btn-close ml-2\" \r\n            aria-label=\"Close\"\r\n            (click)=\"onCloseButtonClick()\"\r\n        >\r\n        </button>\r\n    </div>\r\n\r\n</div>\r\n", styles: [".sds-message-default{color:var(--bs-gray-900);background-color:var(--bs-gray-300)}.sds-message-success-subtle{color:var(--bs-gray-900);background-color:var(--bs-success-bg-subtle)}.sds-message-danger-subtle{color:var(--bs-gray-900);background-color:var(--bs-danger-bg-subtle)}.sds-message-warning-subtle{color:var(--bs-gray-900);background-color:var(--bs-warning-bg-subtle)}.sds-message-info-subtle{color:var(--bs-gray-900);background-color:var(--bs-info-bg-subtle)}.sds-message-success{color:var(--bs-gray-100);background-color:var(--bs-success)}.sds-message-danger{color:var(--bs-gray-100);background-color:var(--bs-danger)}.sds-message-warning{color:var(--bs-gray-900);background-color:var(--bs-warning)}.sds-message-info{color:var(--bs-gray-900);background-color:var(--bs-info)}.btn-close{font-size:.75em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-message', template: "<div \r\n    *ngIf=\"showMessage\"\r\n    class=\"px-3 py-2 d-flex rounded\"\r\n    [class.sds-message-default] = \"style == 'default'\"\r\n    [class.sds-message-success] = \"style == 'success'\"\r\n    [class.sds-message-danger] = \"style == 'danger'\"\r\n    [class.sds-message-warning] = \"style == 'warning'\"\r\n    [class.sds-message-info] = \"style == 'info'\"\r\n    >\r\n\r\n    <fa-icon \r\n        *ngIf=\"icon\"\r\n        [icon]=\"icon\"\r\n        class=\"me-2\"\r\n        >\r\n    </fa-icon>\r\n\r\n    <div class=\"flex-grow-1\">\r\n        <div *ngIf=\"!customContent\">\r\n            <span>\r\n                {{text}}\r\n            </span>\r\n\r\n            <span \r\n                *ngIf=\"showAction\"\r\n            >\r\n                <a \r\n                    class=\"link-primary sds-cursor-pointer ml-2 \"\r\n                    (click)=\"onActionButtonClick()\"\r\n                    >\r\n                    {{actionText}}\r\n                </a>\r\n            </span>\r\n\r\n            <span \r\n                *ngIf=\"showLearnMoreLink\"\r\n            >\r\n                <a \r\n                    class=\"\"\r\n                    [href]=\"learnMoreLinkUrl\"\r\n                    target=\"_learnmore\"\r\n                    >\r\n                    {{learnMoreLinkText}}\r\n                </a>\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"customContent\" >\r\n            <ng-content select=\"customContent\"></ng-content>\r\n        </ng-container> \r\n    </div>\r\n\r\n    <div *ngIf=\"showCloseButton\">\r\n        <button \r\n            type=\"button\" \r\n            class=\"btn-close ml-2\" \r\n            aria-label=\"Close\"\r\n            (click)=\"onCloseButtonClick()\"\r\n        >\r\n        </button>\r\n    </div>\r\n\r\n</div>\r\n", styles: [".sds-message-default{color:var(--bs-gray-900);background-color:var(--bs-gray-300)}.sds-message-success{color:var(--bs-gray-100);background-color:var(--bs-success)}.sds-message-danger{color:var(--bs-gray-100);background-color:var(--bs-danger)}.sds-message-warning{color:var(--bs-gray-900);background-color:var(--bs-warning)}.sds-message-info{color:var(--bs-gray-900);background-color:var(--bs-info)}.btn-close{font-size:.75em}\n"] }]
+            args: [{ selector: 'sds-message', template: "<div \r\n    *ngIf=\"showMessage\"\r\n    class=\"px-3 py-2 d-flex rounded\"\r\n    [class.sds-message-default] = \"style == 'default'\"\r\n    \r\n    [class.sds-message-success] = \"style == 'success'\"\r\n    [class.sds-message-success-subtle] = \"style == 'successSubtle'\"\r\n    \r\n    [class.sds-message-danger] = \"style == 'danger'\"\r\n    [class.sds-message-danger-subtle] = \"style == 'dangerSubtle'\"\r\n    \r\n    [class.sds-message-warning] = \"style == 'warning'\"\r\n    [class.sds-message-warning-subtle] = \"style == 'warningSubtle'\"\r\n\r\n    [class.sds-message-info] = \"style == 'info'\"\r\n    [class.sds-message-info-subtle] = \"style == 'infoSubtle'\"\r\n    >\r\n\r\n    <fa-icon \r\n        *ngIf=\"icon\"\r\n        [icon]=\"icon\"\r\n        class=\"me-2\"\r\n        >\r\n    </fa-icon>\r\n\r\n    <div class=\"flex-grow-1\">\r\n        <div *ngIf=\"!customContent\">\r\n            <span>\r\n                {{text}}\r\n            </span>\r\n\r\n            <span \r\n                *ngIf=\"showAction\"\r\n            >\r\n                <a \r\n                    class=\"link-primary sds-cursor-pointer ml-2 \"\r\n                    (click)=\"onActionButtonClick()\"\r\n                    >\r\n                    {{actionText}}\r\n                </a>\r\n            </span>\r\n\r\n            <span \r\n                *ngIf=\"showLearnMoreLink\"\r\n            >\r\n                <a \r\n                    class=\"\"\r\n                    [href]=\"learnMoreLinkUrl\"\r\n                    target=\"_learnmore\"\r\n                    >\r\n                    {{learnMoreLinkText}}\r\n                </a>\r\n            </span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"customContent\" >\r\n            <ng-content select=\"customContent\"></ng-content>\r\n        </ng-container> \r\n    </div>\r\n\r\n    <div *ngIf=\"showCloseButton\">\r\n        <button \r\n            type=\"button\" \r\n            class=\"btn-close ml-2\" \r\n            aria-label=\"Close\"\r\n            (click)=\"onCloseButtonClick()\"\r\n        >\r\n        </button>\r\n    </div>\r\n\r\n</div>\r\n", styles: [".sds-message-default{color:var(--bs-gray-900);background-color:var(--bs-gray-300)}.sds-message-success-subtle{color:var(--bs-gray-900);background-color:var(--bs-success-bg-subtle)}.sds-message-danger-subtle{color:var(--bs-gray-900);background-color:var(--bs-danger-bg-subtle)}.sds-message-warning-subtle{color:var(--bs-gray-900);background-color:var(--bs-warning-bg-subtle)}.sds-message-info-subtle{color:var(--bs-gray-900);background-color:var(--bs-info-bg-subtle)}.sds-message-success{color:var(--bs-gray-100);background-color:var(--bs-success)}.sds-message-danger{color:var(--bs-gray-100);background-color:var(--bs-danger)}.sds-message-warning{color:var(--bs-gray-900);background-color:var(--bs-warning)}.sds-message-info{color:var(--bs-gray-900);background-color:var(--bs-info)}.btn-close{font-size:.75em}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
                 type: Input
             }], text: [{
@@ -57,4 +57,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: ContentChild,
                 args: ['customContent']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9tZXNzYWdlL21lc3NhZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbWVzc2FnZS9tZXNzYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBUXpHLE1BQU0sT0FBTyxtQkFBbUI7SUF1QjVCO1FBcEJnQixTQUFJLEdBQVcsRUFBRSxDQUFDO1FBQ2xCLG9CQUFlLEdBQVksS0FBSyxDQUFDO1FBRWhDLFVBQUssR0FBdUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVoRCxzQkFBaUIsR0FBWSxLQUFLLENBQUM7UUFDbkMsc0JBQWlCLEdBQVcsWUFBWSxDQUFDO1FBQ3pDLHFCQUFnQixHQUFXLEVBQUUsQ0FBQztRQUU5QixlQUFVLEdBQVksS0FBSyxDQUFDO1FBQzVCLGVBQVUsR0FBVyxjQUFjLENBQUM7UUFDbkMsZ0JBQVcsR0FBdUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUd0RCxVQUFLLEdBQTBELFNBQVMsQ0FBQztRQUUxRCxrQkFBYSxHQUFlLEVBQUMsYUFBYSxFQUFFLFNBQVMsRUFBQyxDQUFDO1FBRS9FLGdCQUFXLEdBQVksSUFBSSxDQUFDO0lBRXBCLENBQUM7SUFFaEIsUUFBUSxLQUFVLENBQUM7SUFFWixrQkFBa0I7UUFDckIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDekIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRU0sbUJBQW1CO1FBQ3RCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDNUIsQ0FBQzs7aUhBbENRLG1CQUFtQjtxR0FBbkIsbUJBQW1CLDhkQ1JoQywyeURBK0RBOzRGRHZEYSxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0ksYUFBYTswRUFNUCxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsZUFBZTtzQkFBOUIsS0FBSztnQkFFVyxLQUFLO3NCQUFyQixNQUFNO2dCQUVTLGlCQUFpQjtzQkFBaEMsS0FBSztnQkFDVSxpQkFBaUI7c0JBQWhDLEtBQUs7Z0JBQ1UsZ0JBQWdCO3NCQUEvQixLQUFLO2dCQUVVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsVUFBVTtzQkFBekIsS0FBSztnQkFDVyxXQUFXO3NCQUEzQixNQUFNO2dCQUdTLEtBQUs7c0JBQXBCLEtBQUs7Z0JBRXlCLGFBQWE7c0JBQTNDLFlBQVk7dUJBQUMsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJY29uUHJvcCB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mb250YXdlc29tZS1zdmctY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLW1lc3NhZ2UnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL21lc3NhZ2UuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vbWVzc2FnZS5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzTWVzc2FnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIGljb24/OiBJY29uUHJvcDtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyB0ZXh0OiBzdHJpbmcgPSAnJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93Q2xvc2VCdXR0b246IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBAT3V0cHV0KCkgcHVibGljIGNsb3NlOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dMZWFybk1vcmVMaW5rOiBib29sZWFuID0gZmFsc2U7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgbGVhcm5Nb3JlTGlua1RleHQ6IHN0cmluZyA9ICdMZWFybiBtb3JlJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBsZWFybk1vcmVMaW5rVXJsOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2hvd0FjdGlvbjogYm9vbGVhbiA9IGZhbHNlO1xyXG4gICAgQElucHV0KCkgcHVibGljIGFjdGlvblRleHQ6IHN0cmluZyA9ICdBZGRyZXNzIHRoaXMnOyAgICBcclxuICAgIEBPdXRwdXQoKSBwdWJsaWMgYWN0aW9uQ2xpY2s6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIHN0eWxlOiAnZGVmYXVsdCcgfCAnZGFuZ2VyJyB8ICdzdWNjZXNzJyB8ICd3YXJuaW5nJyB8ICdpbmZvJyA9ICdkZWZhdWx0JztcclxuXHJcbiAgICBAQ29udGVudENoaWxkKCdjdXN0b21Db250ZW50JykgY3VzdG9tQ29udGVudDogRWxlbWVudFJlZiA9IHtuYXRpdmVFbGVtZW50OiB1bmRlZmluZWR9O1xyXG5cclxuICAgIHB1YmxpYyBzaG93TWVzc2FnZTogYm9vbGVhbiA9IHRydWU7XHJcblxyXG4gICAgY29uc3RydWN0b3IoKSB7fVxyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQge31cclxuXHJcbiAgICBwdWJsaWMgb25DbG9zZUJ1dHRvbkNsaWNrKCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuc2hvd01lc3NhZ2UgPSBmYWxzZTtcclxuICAgICAgICB0aGlzLmNsb3NlLmVtaXQoKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgb25BY3Rpb25CdXR0b25DbGljaygpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLmFjdGlvbkNsaWNrLmVtaXQoKTtcclxuICAgIH1cclxuXHJcbn1cclxuIiwiPGRpdiBcclxuICAgICpuZ0lmPVwic2hvd01lc3NhZ2VcIlxyXG4gICAgY2xhc3M9XCJweC0zIHB5LTIgZC1mbGV4IHJvdW5kZWRcIlxyXG4gICAgW2NsYXNzLnNkcy1tZXNzYWdlLWRlZmF1bHRdID0gXCJzdHlsZSA9PSAnZGVmYXVsdCdcIlxyXG4gICAgW2NsYXNzLnNkcy1tZXNzYWdlLXN1Y2Nlc3NdID0gXCJzdHlsZSA9PSAnc3VjY2VzcydcIlxyXG4gICAgW2NsYXNzLnNkcy1tZXNzYWdlLWRhbmdlcl0gPSBcInN0eWxlID09ICdkYW5nZXInXCJcclxuICAgIFtjbGFzcy5zZHMtbWVzc2FnZS13YXJuaW5nXSA9IFwic3R5bGUgPT0gJ3dhcm5pbmcnXCJcclxuICAgIFtjbGFzcy5zZHMtbWVzc2FnZS1pbmZvXSA9IFwic3R5bGUgPT0gJ2luZm8nXCJcclxuICAgID5cclxuXHJcbiAgICA8ZmEtaWNvbiBcclxuICAgICAgICAqbmdJZj1cImljb25cIlxyXG4gICAgICAgIFtpY29uXT1cImljb25cIlxyXG4gICAgICAgIGNsYXNzPVwibWUtMlwiXHJcbiAgICAgICAgPlxyXG4gICAgPC9mYS1pY29uPlxyXG5cclxuICAgIDxkaXYgY2xhc3M9XCJmbGV4LWdyb3ctMVwiPlxyXG4gICAgICAgIDxkaXYgKm5nSWY9XCIhY3VzdG9tQ29udGVudFwiPlxyXG4gICAgICAgICAgICA8c3Bhbj5cclxuICAgICAgICAgICAgICAgIHt7dGV4dH19XHJcbiAgICAgICAgICAgIDwvc3Bhbj5cclxuXHJcbiAgICAgICAgICAgIDxzcGFuIFxyXG4gICAgICAgICAgICAgICAgKm5nSWY9XCJzaG93QWN0aW9uXCJcclxuICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICAgICAgPGEgXHJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJsaW5rLXByaW1hcnkgc2RzLWN1cnNvci1wb2ludGVyIG1sLTIgXCJcclxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwib25BY3Rpb25CdXR0b25DbGljaygpXCJcclxuICAgICAgICAgICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICAgICAge3thY3Rpb25UZXh0fX1cclxuICAgICAgICAgICAgICAgIDwvYT5cclxuICAgICAgICAgICAgPC9zcGFuPlxyXG5cclxuICAgICAgICAgICAgPHNwYW4gXHJcbiAgICAgICAgICAgICAgICAqbmdJZj1cInNob3dMZWFybk1vcmVMaW5rXCJcclxuICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICAgICAgPGEgXHJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJcIlxyXG4gICAgICAgICAgICAgICAgICAgIFtocmVmXT1cImxlYXJuTW9yZUxpbmtVcmxcIlxyXG4gICAgICAgICAgICAgICAgICAgIHRhcmdldD1cIl9sZWFybm1vcmVcIlxyXG4gICAgICAgICAgICAgICAgICAgID5cclxuICAgICAgICAgICAgICAgICAgICB7e2xlYXJuTW9yZUxpbmtUZXh0fX1cclxuICAgICAgICAgICAgICAgIDwvYT5cclxuICAgICAgICAgICAgPC9zcGFuPlxyXG4gICAgICAgIDwvZGl2PlxyXG5cclxuICAgICAgICA8bmctY29udGFpbmVyICpuZ0lmPVwiY3VzdG9tQ29udGVudFwiID5cclxuICAgICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiY3VzdG9tQ29udGVudFwiPjwvbmctY29udGVudD5cclxuICAgICAgICA8L25nLWNvbnRhaW5lcj4gXHJcbiAgICA8L2Rpdj5cclxuXHJcbiAgICA8ZGl2ICpuZ0lmPVwic2hvd0Nsb3NlQnV0dG9uXCI+XHJcbiAgICAgICAgPGJ1dHRvbiBcclxuICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiIFxyXG4gICAgICAgICAgICBjbGFzcz1cImJ0bi1jbG9zZSBtbC0yXCIgXHJcbiAgICAgICAgICAgIGFyaWEtbGFiZWw9XCJDbG9zZVwiXHJcbiAgICAgICAgICAgIChjbGljayk9XCJvbkNsb3NlQnV0dG9uQ2xpY2soKVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgIDwvYnV0dG9uPlxyXG4gICAgPC9kaXY+XHJcblxyXG48L2Rpdj5cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVzc2FnZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi9tZXNzYWdlL21lc3NhZ2UuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvbWVzc2FnZS9tZXNzYWdlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFjLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBUXpHLE1BQU0sT0FBTyxtQkFBbUI7SUF1QjVCO1FBcEJnQixTQUFJLEdBQVcsRUFBRSxDQUFDO1FBQ2xCLG9CQUFlLEdBQVksS0FBSyxDQUFDO1FBRWhDLFVBQUssR0FBdUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUVoRCxzQkFBaUIsR0FBWSxLQUFLLENBQUM7UUFDbkMsc0JBQWlCLEdBQVcsWUFBWSxDQUFDO1FBQ3pDLHFCQUFnQixHQUFXLEVBQUUsQ0FBQztRQUU5QixlQUFVLEdBQVksS0FBSyxDQUFDO1FBQzVCLGVBQVUsR0FBVyxjQUFjLENBQUM7UUFDbkMsZ0JBQVcsR0FBdUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUd0RCxVQUFLLEdBQThILFNBQVMsQ0FBQztRQUU5SCxrQkFBYSxHQUFlLEVBQUMsYUFBYSxFQUFFLFNBQVMsRUFBQyxDQUFDO1FBRS9FLGdCQUFXLEdBQVksSUFBSSxDQUFDO0lBRXBCLENBQUM7SUFFaEIsUUFBUSxLQUFVLENBQUM7SUFFWixrQkFBa0I7UUFDckIsSUFBSSxDQUFDLFdBQVcsR0FBRyxLQUFLLENBQUM7UUFDekIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRU0sbUJBQW1CO1FBQ3RCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDNUIsQ0FBQzs7aUhBbENRLG1CQUFtQjtxR0FBbkIsbUJBQW1CLDhkQ1JoQyxtbUVBdUVBOzRGRC9EYSxtQkFBbUI7a0JBTC9CLFNBQVM7K0JBQ0ksYUFBYTswRUFNUCxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsZUFBZTtzQkFBOUIsS0FBSztnQkFFVyxLQUFLO3NCQUFyQixNQUFNO2dCQUVTLGlCQUFpQjtzQkFBaEMsS0FBSztnQkFDVSxpQkFBaUI7c0JBQWhDLEtBQUs7Z0JBQ1UsZ0JBQWdCO3NCQUEvQixLQUFLO2dCQUVVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsVUFBVTtzQkFBekIsS0FBSztnQkFDVyxXQUFXO3NCQUEzQixNQUFNO2dCQUdTLEtBQUs7c0JBQXBCLEtBQUs7Z0JBRXlCLGFBQWE7c0JBQTNDLFlBQVk7dUJBQUMsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQ29udGVudENoaWxkLCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJY29uUHJvcCB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mb250YXdlc29tZS1zdmctY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnc2RzLW1lc3NhZ2UnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL21lc3NhZ2UuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vbWVzc2FnZS5jb21wb25lbnQuc2NzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzTWVzc2FnZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIGljb24/OiBJY29uUHJvcDtcclxuICAgIEBJbnB1dCgpIHB1YmxpYyB0ZXh0OiBzdHJpbmcgPSAnJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBzaG93Q2xvc2VCdXR0b246IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBAT3V0cHV0KCkgcHVibGljIGNsb3NlOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIHNob3dMZWFybk1vcmVMaW5rOiBib29sZWFuID0gZmFsc2U7XHJcbiAgICBASW5wdXQoKSBwdWJsaWMgbGVhcm5Nb3JlTGlua1RleHQ6IHN0cmluZyA9ICdMZWFybiBtb3JlJztcclxuICAgIEBJbnB1dCgpIHB1YmxpYyBsZWFybk1vcmVMaW5rVXJsOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgICBASW5wdXQoKSBwdWJsaWMgc2hvd0FjdGlvbjogYm9vbGVhbiA9IGZhbHNlO1xyXG4gICAgQElucHV0KCkgcHVibGljIGFjdGlvblRleHQ6IHN0cmluZyA9ICdBZGRyZXNzIHRoaXMnOyAgICBcclxuICAgIEBPdXRwdXQoKSBwdWJsaWMgYWN0aW9uQ2xpY2s6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcblxyXG4gICAgQElucHV0KCkgcHVibGljIHN0eWxlOiAnZGVmYXVsdCcgfCAnZGFuZ2VyJyB8ICdkYW5nZXJTdWJ0bGUnIHwgJ3N1Y2Nlc3MnIHwgJ3N1Y2Nlc3NTdWJ0bGUnIHwgJ3dhcm5pbmcnIHwgJ3dhcm5pbmdTdWJ0bGUnIHwgJ2luZm8nIHwgJ2luZm9TdWJ0bGUnID0gJ2RlZmF1bHQnO1xyXG5cclxuICAgIEBDb250ZW50Q2hpbGQoJ2N1c3RvbUNvbnRlbnQnKSBjdXN0b21Db250ZW50OiBFbGVtZW50UmVmID0ge25hdGl2ZUVsZW1lbnQ6IHVuZGVmaW5lZH07XHJcblxyXG4gICAgcHVibGljIHNob3dNZXNzYWdlOiBib29sZWFuID0gdHJ1ZTtcclxuXHJcbiAgICBjb25zdHJ1Y3RvcigpIHt9XHJcblxyXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxyXG5cclxuICAgIHB1YmxpYyBvbkNsb3NlQnV0dG9uQ2xpY2soKTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5zaG93TWVzc2FnZSA9IGZhbHNlO1xyXG4gICAgICAgIHRoaXMuY2xvc2UuZW1pdCgpO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBvbkFjdGlvbkJ1dHRvbkNsaWNrKCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuYWN0aW9uQ2xpY2suZW1pdCgpO1xyXG4gICAgfVxyXG5cclxufVxyXG4iLCI8ZGl2IFxyXG4gICAgKm5nSWY9XCJzaG93TWVzc2FnZVwiXHJcbiAgICBjbGFzcz1cInB4LTMgcHktMiBkLWZsZXggcm91bmRlZFwiXHJcbiAgICBbY2xhc3Muc2RzLW1lc3NhZ2UtZGVmYXVsdF0gPSBcInN0eWxlID09ICdkZWZhdWx0J1wiXHJcbiAgICBcclxuICAgIFtjbGFzcy5zZHMtbWVzc2FnZS1zdWNjZXNzXSA9IFwic3R5bGUgPT0gJ3N1Y2Nlc3MnXCJcclxuICAgIFtjbGFzcy5zZHMtbWVzc2FnZS1zdWNjZXNzLXN1YnRsZV0gPSBcInN0eWxlID09ICdzdWNjZXNzU3VidGxlJ1wiXHJcbiAgICBcclxuICAgIFtjbGFzcy5zZHMtbWVzc2FnZS1kYW5nZXJdID0gXCJzdHlsZSA9PSAnZGFuZ2VyJ1wiXHJcbiAgICBbY2xhc3Muc2RzLW1lc3NhZ2UtZGFuZ2VyLXN1YnRsZV0gPSBcInN0eWxlID09ICdkYW5nZXJTdWJ0bGUnXCJcclxuICAgIFxyXG4gICAgW2NsYXNzLnNkcy1tZXNzYWdlLXdhcm5pbmddID0gXCJzdHlsZSA9PSAnd2FybmluZydcIlxyXG4gICAgW2NsYXNzLnNkcy1tZXNzYWdlLXdhcm5pbmctc3VidGxlXSA9IFwic3R5bGUgPT0gJ3dhcm5pbmdTdWJ0bGUnXCJcclxuXHJcbiAgICBbY2xhc3Muc2RzLW1lc3NhZ2UtaW5mb10gPSBcInN0eWxlID09ICdpbmZvJ1wiXHJcbiAgICBbY2xhc3Muc2RzLW1lc3NhZ2UtaW5mby1zdWJ0bGVdID0gXCJzdHlsZSA9PSAnaW5mb1N1YnRsZSdcIlxyXG4gICAgPlxyXG5cclxuICAgIDxmYS1pY29uIFxyXG4gICAgICAgICpuZ0lmPVwiaWNvblwiXHJcbiAgICAgICAgW2ljb25dPVwiaWNvblwiXHJcbiAgICAgICAgY2xhc3M9XCJtZS0yXCJcclxuICAgICAgICA+XHJcbiAgICA8L2ZhLWljb24+XHJcblxyXG4gICAgPGRpdiBjbGFzcz1cImZsZXgtZ3Jvdy0xXCI+XHJcbiAgICAgICAgPGRpdiAqbmdJZj1cIiFjdXN0b21Db250ZW50XCI+XHJcbiAgICAgICAgICAgIDxzcGFuPlxyXG4gICAgICAgICAgICAgICAge3t0ZXh0fX1cclxuICAgICAgICAgICAgPC9zcGFuPlxyXG5cclxuICAgICAgICAgICAgPHNwYW4gXHJcbiAgICAgICAgICAgICAgICAqbmdJZj1cInNob3dBY3Rpb25cIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICA8YSBcclxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cImxpbmstcHJpbWFyeSBzZHMtY3Vyc29yLXBvaW50ZXIgbWwtMiBcIlxyXG4gICAgICAgICAgICAgICAgICAgIChjbGljayk9XCJvbkFjdGlvbkJ1dHRvbkNsaWNrKClcIlxyXG4gICAgICAgICAgICAgICAgICAgID5cclxuICAgICAgICAgICAgICAgICAgICB7e2FjdGlvblRleHR9fVxyXG4gICAgICAgICAgICAgICAgPC9hPlxyXG4gICAgICAgICAgICA8L3NwYW4+XHJcblxyXG4gICAgICAgICAgICA8c3BhbiBcclxuICAgICAgICAgICAgICAgICpuZ0lmPVwic2hvd0xlYXJuTW9yZUxpbmtcIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICA8YSBcclxuICAgICAgICAgICAgICAgICAgICBjbGFzcz1cIlwiXHJcbiAgICAgICAgICAgICAgICAgICAgW2hyZWZdPVwibGVhcm5Nb3JlTGlua1VybFwiXHJcbiAgICAgICAgICAgICAgICAgICAgdGFyZ2V0PVwiX2xlYXJubW9yZVwiXHJcbiAgICAgICAgICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICAgICAgICAgIHt7bGVhcm5Nb3JlTGlua1RleHR9fVxyXG4gICAgICAgICAgICAgICAgPC9hPlxyXG4gICAgICAgICAgICA8L3NwYW4+XHJcbiAgICAgICAgPC9kaXY+XHJcblxyXG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJjdXN0b21Db250ZW50XCIgPlxyXG4gICAgICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJjdXN0b21Db250ZW50XCI+PC9uZy1jb250ZW50PlxyXG4gICAgICAgIDwvbmctY29udGFpbmVyPiBcclxuICAgIDwvZGl2PlxyXG5cclxuICAgIDxkaXYgKm5nSWY9XCJzaG93Q2xvc2VCdXR0b25cIj5cclxuICAgICAgICA8YnV0dG9uIFxyXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCIgXHJcbiAgICAgICAgICAgIGNsYXNzPVwiYnRuLWNsb3NlIG1sLTJcIiBcclxuICAgICAgICAgICAgYXJpYS1sYWJlbD1cIkNsb3NlXCJcclxuICAgICAgICAgICAgKGNsaWNrKT1cIm9uQ2xvc2VCdXR0b25DbGljaygpXCJcclxuICAgICAgICA+XHJcbiAgICAgICAgPC9idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuXHJcbjwvZGl2PlxyXG4iXX0=

package/esm2020/src/lib/table-actions/table-actions.component.mjs

@@ -1,15 +1,17 @@
 import { Component, HostBinding, Input } from '@angular/core';
 import { faEllipsis } from '@fortawesome/pro-regular-svg-icons';
 import * as i0 from "@angular/core";
-import * as i1 from "@fortawesome/angular-fontawesome";
-import * as i2 from "devextreme-angular";
-import * as i3 from "devextreme-angular/ui/nested";
+import * as i1 from "@angular/common";
+import * as i2 from "@fortawesome/angular-fontawesome";
+import * as i3 from "devextreme-angular";
+import * as i4 from "devextreme-angular/ui/nested";
 export class SdsTableActionsComponent {
     constructor() {
         this.dropdownIcon = faEllipsis;
         // @Input() showShadow: boolean = false;
         this.dropDownAutoClose = 'true';
         this.dropdownMinWidth = '10rem';
+        this.hideActionsDropdown = false;
         this.showDropdown = false;
     }
     ngOnInit() { }
@@ -21,18 +23,20 @@ export class SdsTableActionsComponent {
     }
 }
 SdsTableActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsTableActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsTableActionsComponent, selector: "sds-table-actions", inputs: { dropdownIcon: "dropdownIcon", dropDownAutoClose: "dropDownAutoClose", dropdownMinWidth: "dropdownMinWidth" }, host: { properties: { "class.actions-dropdown-open": "this.showDropdown" } }, ngImport: i0, template: "<div class=\"sds-actions-container me-2\">\r\n    <div class=\"btn-group sds-actions-wrapper\">\r\n        <ng-content select=\"quickActions\"></ng-content>\r\n\r\n        <button\r\n            #dropdownButton\r\n            class=\"sds-actions-dropdown-button sds-btn-table\"\r\n            type=\"button\"\r\n            (click)=\"toggleDropdownMenu()\"\r\n        >\r\n            <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n            </fa-icon>\r\n        </button>\r\n\r\n        <dx-popover\r\n            [target]=\"dropdownButton\"\r\n            [(visible)]=\"showDropdown\"\r\n            [minWidth]=\"dropdownMinWidth\"\r\n            [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n        >\r\n            <dxo-position\r\n                my=\"right top\"\r\n                at=\"right bottom\"\r\n                [of]=\"dropdownButton\"\r\n            >\r\n                <dxo-offset [y]=\"-7\"></dxo-offset>\r\n            </dxo-position>\r\n\r\n            <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n                <ng-content></ng-content>\r\n            </ul>\r\n        </dx-popover>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: 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"] }, { kind: "component", type: i3.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i3.DxoOffsetComponent, selector: "dxo-offset", inputs: ["x", "y"] }] });
+SdsTableActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsTableActionsComponent, selector: "sds-table-actions", inputs: { dropdownIcon: "dropdownIcon", dropDownAutoClose: "dropDownAutoClose", dropdownMinWidth: "dropdownMinWidth", hideActionsDropdown: "hideActionsDropdown" }, host: { properties: { "class.actions-dropdown-open": "this.showDropdown" } }, ngImport: i0, template: "<div class=\"sds-actions-container me-2\">\r\n    <div class=\"btn-group sds-actions-wrapper\">\r\n        <ng-content select=\"quickActions\"></ng-content>\r\n\r\n        <ng-container *ngIf=\"!hideActionsDropdown\">\r\n            \r\n            <button\r\n                #dropdownButton\r\n                class=\"sds-actions-dropdown-button sds-btn-table\"\r\n                type=\"button\"\r\n                (click)=\"toggleDropdownMenu()\"\r\n            >\r\n                <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n                </fa-icon>\r\n            </button>\r\n\r\n            <dx-popover\r\n                [target]=\"dropdownButton\"\r\n                [(visible)]=\"showDropdown\"\r\n                [minWidth]=\"dropdownMinWidth\"\r\n                [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n            >\r\n                <dxo-position\r\n                    my=\"right top\"\r\n                    at=\"right bottom\"\r\n                    [of]=\"dropdownButton\"\r\n                >\r\n                    <dxo-offset [y]=\"-7\"></dxo-offset>\r\n                </dxo-position>\r\n\r\n                <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n                    <ng-content></ng-content>\r\n                </ul>\r\n            </dx-popover>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i3.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i4.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i4.DxoOffsetComponent, selector: "dxo-offset", inputs: ["x", "y"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTableActionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-table-actions', template: "<div class=\"sds-actions-container me-2\">\r\n    <div class=\"btn-group sds-actions-wrapper\">\r\n        <ng-content select=\"quickActions\"></ng-content>\r\n\r\n        <button\r\n            #dropdownButton\r\n            class=\"sds-actions-dropdown-button sds-btn-table\"\r\n            type=\"button\"\r\n            (click)=\"toggleDropdownMenu()\"\r\n        >\r\n            <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n            </fa-icon>\r\n        </button>\r\n\r\n        <dx-popover\r\n            [target]=\"dropdownButton\"\r\n            [(visible)]=\"showDropdown\"\r\n            [minWidth]=\"dropdownMinWidth\"\r\n            [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n        >\r\n            <dxo-position\r\n                my=\"right top\"\r\n                at=\"right bottom\"\r\n                [of]=\"dropdownButton\"\r\n            >\r\n                <dxo-offset [y]=\"-7\"></dxo-offset>\r\n            </dxo-position>\r\n\r\n            <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n                <ng-content></ng-content>\r\n            </ul>\r\n        </dx-popover>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"] }]
+            args: [{ selector: 'sds-table-actions', template: "<div class=\"sds-actions-container me-2\">\r\n    <div class=\"btn-group sds-actions-wrapper\">\r\n        <ng-content select=\"quickActions\"></ng-content>\r\n\r\n        <ng-container *ngIf=\"!hideActionsDropdown\">\r\n            \r\n            <button\r\n                #dropdownButton\r\n                class=\"sds-actions-dropdown-button sds-btn-table\"\r\n                type=\"button\"\r\n                (click)=\"toggleDropdownMenu()\"\r\n            >\r\n                <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n                </fa-icon>\r\n            </button>\r\n\r\n            <dx-popover\r\n                [target]=\"dropdownButton\"\r\n                [(visible)]=\"showDropdown\"\r\n                [minWidth]=\"dropdownMinWidth\"\r\n                [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n            >\r\n                <dxo-position\r\n                    my=\"right top\"\r\n                    at=\"right bottom\"\r\n                    [of]=\"dropdownButton\"\r\n                >\r\n                    <dxo-offset [y]=\"-7\"></dxo-offset>\r\n                </dxo-position>\r\n\r\n                <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n                    <ng-content></ng-content>\r\n                </ul>\r\n            </dx-popover>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { dropdownIcon: [{
                 type: Input
             }], dropDownAutoClose: [{
                 type: Input
             }], dropdownMinWidth: [{
                 type: Input
+            }], hideActionsDropdown: [{
+                type: Input
             }], showDropdown: [{
                 type: HostBinding,
                 args: ['class.actions-dropdown-open']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtYWN0aW9ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi90YWJsZS1hY3Rpb25zL3RhYmxlLWFjdGlvbnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvdGFibGUtYWN0aW9ucy90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsV0FBVyxFQUFFLEtBQUssRUFBMEQsTUFBTSxlQUFlLENBQUM7QUFFbEksT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLG9DQUFvQyxDQUFDOzs7OztBQVFoRSxNQUFNLE9BQU8sd0JBQXdCO0lBU2pDO1FBUFMsaUJBQVksR0FBYSxVQUFVLENBQUM7UUFDN0Msd0NBQXdDO1FBQy9CLHNCQUFpQixHQUE0QyxNQUFNLENBQUM7UUFDcEUscUJBQWdCLEdBQVcsT0FBTyxDQUFDO1FBRVUsaUJBQVksR0FBWSxLQUFLLENBQUM7SUFJakYsQ0FBQztJQUVKLFFBQVEsS0FBVSxDQUFDO0lBRVQsa0JBQWtCO1FBQ3hCLElBQUksQ0FBQyxZQUFZLEdBQUcsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDO0lBQzNDLENBQUM7SUFFUyxpQkFBaUI7UUFDdkIsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7SUFDOUIsQ0FBQzs7c0hBckJRLHdCQUF3QjswR0FBeEIsd0JBQXdCLCtQQ1ZyQyxzckNBa0NBOzRGRHhCYSx3QkFBd0I7a0JBTHBDLFNBQVM7K0JBQ0ksbUJBQW1COzBFQU1wQixZQUFZO3NCQUFwQixLQUFLO2dCQUVHLGlCQUFpQjtzQkFBekIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBRWdELFlBQVk7c0JBQWpFLFdBQVc7dUJBQUMsNkJBQTZCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBIb3N0QmluZGluZywgSW5wdXQsIE9uQ2hhbmdlcywgT25Jbml0LCBSZW5kZXJlcjIsIFNpbXBsZUNoYW5nZXMsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJY29uUHJvcCB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mb250YXdlc29tZS1zdmctY29yZSc7XHJcbmltcG9ydCB7IGZhRWxsaXBzaXMgfSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXJlZ3VsYXItc3ZnLWljb25zJztcclxuaW1wb3J0IHsgSGlkaW5nRXZlbnQgfSBmcm9tICdkZXZleHRyZW1lL3VpL3BvcG92ZXInO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3Nkcy10YWJsZS1hY3Rpb25zJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL3RhYmxlLWFjdGlvbnMuY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc1RhYmxlQWN0aW9uc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gICAgQElucHV0KCkgZHJvcGRvd25JY29uOiBJY29uUHJvcCA9IGZhRWxsaXBzaXM7XHJcbiAgICAvLyBASW5wdXQoKSBzaG93U2hhZG93OiBib29sZWFuID0gZmFsc2U7XHJcbiAgICBASW5wdXQoKSBkcm9wRG93bkF1dG9DbG9zZTogJ3RydWUnIHwgJ2ZhbHNlJyB8ICdpbnNpZGUnIHwgJ291dHNpZGUnID0gJ3RydWUnO1xyXG4gICAgQElucHV0KCkgZHJvcGRvd25NaW5XaWR0aDogc3RyaW5nID0gJzEwcmVtJztcclxuXHJcbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLmFjdGlvbnMtZHJvcGRvd24tb3BlbicpIHByb3RlY3RlZCBzaG93RHJvcGRvd246IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBjb25zdHJ1Y3RvcihcclxuXHJcbiAgICApIHt9XHJcblxyXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxyXG5cclxuICAgIHByb3RlY3RlZCB0b2dnbGVEcm9wZG93bk1lbnUoKTogdm9pZCB7XHJcbiAgICAgICAgdGhpcy5zaG93RHJvcGRvd24gPSAhdGhpcy5zaG93RHJvcGRvd247XHJcbiAgICB9XHJcblxyXG4gICAgcHJvdGVjdGVkIGNsb3NlRHJvcGRvd25NZW51KCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuc2hvd0Ryb3Bkb3duID0gZmFsc2U7XHJcbiAgICB9XHJcblxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJzZHMtYWN0aW9ucy1jb250YWluZXIgbWUtMlwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImJ0bi1ncm91cCBzZHMtYWN0aW9ucy13cmFwcGVyXCI+XHJcbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwicXVpY2tBY3Rpb25zXCI+PC9uZy1jb250ZW50PlxyXG5cclxuICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICNkcm9wZG93bkJ1dHRvblxyXG4gICAgICAgICAgICBjbGFzcz1cInNkcy1hY3Rpb25zLWRyb3Bkb3duLWJ1dHRvbiBzZHMtYnRuLXRhYmxlXCJcclxuICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVEcm9wZG93bk1lbnUoKVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJkcm9wZG93bkljb25cIiBbZml4ZWRXaWR0aF09XCJ0cnVlXCIgW3NpemVdPVwiJ3NtJ1wiPlxyXG4gICAgICAgICAgICA8L2ZhLWljb24+XHJcbiAgICAgICAgPC9idXR0b24+XHJcblxyXG4gICAgICAgIDxkeC1wb3BvdmVyXHJcbiAgICAgICAgICAgIFt0YXJnZXRdPVwiZHJvcGRvd25CdXR0b25cIlxyXG4gICAgICAgICAgICBbKHZpc2libGUpXT1cInNob3dEcm9wZG93blwiXHJcbiAgICAgICAgICAgIFttaW5XaWR0aF09XCJkcm9wZG93bk1pbldpZHRoXCJcclxuICAgICAgICAgICAgW3dyYXBwZXJBdHRyXT1cInsgY2xhc3M6ICdzZHMtYWN0aW9ucy1kcm9wZG93bicgfVwiXHJcbiAgICAgICAgPlxyXG4gICAgICAgICAgICA8ZHhvLXBvc2l0aW9uXHJcbiAgICAgICAgICAgICAgICBteT1cInJpZ2h0IHRvcFwiXHJcbiAgICAgICAgICAgICAgICBhdD1cInJpZ2h0IGJvdHRvbVwiXHJcbiAgICAgICAgICAgICAgICBbb2ZdPVwiZHJvcGRvd25CdXR0b25cIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICA8ZHhvLW9mZnNldCBbeV09XCItN1wiPjwvZHhvLW9mZnNldD5cclxuICAgICAgICAgICAgPC9keG8tcG9zaXRpb24+XHJcblxyXG4gICAgICAgICAgICA8dWwgY2xhc3M9XCJzZHMtdGFibGUtZHJvcGRvd24tbWVudVwiIChjbGljayk9XCJjbG9zZURyb3Bkb3duTWVudSgpXCI+XHJcbiAgICAgICAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbiAgICAgICAgICAgIDwvdWw+XHJcbiAgICAgICAgPC9keC1wb3BvdmVyPlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtYWN0aW9ucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc2RzLWNvbXBvbmVudHMvc3JjL2xpYi90YWJsZS1hY3Rpb25zL3RhYmxlLWFjdGlvbnMuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvdGFibGUtYWN0aW9ucy90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBb0IsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7QUFFeEYsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLG9DQUFvQyxDQUFDOzs7Ozs7QUFRaEUsTUFBTSxPQUFPLHdCQUF3QjtJQVdqQztRQVRTLGlCQUFZLEdBQWEsVUFBVSxDQUFDO1FBQzdDLHdDQUF3QztRQUMvQixzQkFBaUIsR0FBNEMsTUFBTSxDQUFDO1FBQ3BFLHFCQUFnQixHQUFXLE9BQU8sQ0FBQztRQUNuQyx3QkFBbUIsR0FBWSxLQUFLLENBQUM7UUFFUSxpQkFBWSxHQUFZLEtBQUssQ0FBQztJQUtqRixDQUFDO0lBRUosUUFBUSxLQUFVLENBQUM7SUFJVCxrQkFBa0I7UUFDeEIsSUFBSSxDQUFDLFlBQVksR0FBRyxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUM7SUFDM0MsQ0FBQztJQUVTLGlCQUFpQjtRQUN2QixJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztJQUM5QixDQUFDOztzSEF6QlEsd0JBQXdCOzBHQUF4Qix3QkFBd0IsMlNDVnJDLGs0Q0FxQ0E7NEZEM0JhLHdCQUF3QjtrQkFMcEMsU0FBUzsrQkFDSSxtQkFBbUI7MEVBTXBCLFlBQVk7c0JBQXBCLEtBQUs7Z0JBRUcsaUJBQWlCO3NCQUF6QixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxtQkFBbUI7c0JBQTNCLEtBQUs7Z0JBRWdELFlBQVk7c0JBQWpFLFdBQVc7dUJBQUMsNkJBQTZCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJDb250ZW50SW5pdCwgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBJY29uUHJvcCB9IGZyb20gJ0Bmb3J0YXdlc29tZS9mb250YXdlc29tZS1zdmctY29yZSc7XHJcbmltcG9ydCB7IGZhRWxsaXBzaXMgfSBmcm9tICdAZm9ydGF3ZXNvbWUvcHJvLXJlZ3VsYXItc3ZnLWljb25zJztcclxuaW1wb3J0IHsgSGlkaW5nRXZlbnQgfSBmcm9tICdkZXZleHRyZW1lL3VpL3BvcG92ZXInO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ3Nkcy10YWJsZS1hY3Rpb25zJyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi90YWJsZS1hY3Rpb25zLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL3RhYmxlLWFjdGlvbnMuY29tcG9uZW50LnNjc3MnXSxcclxufSlcclxuZXhwb3J0IGNsYXNzIFNkc1RhYmxlQWN0aW9uc0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcblxyXG4gICAgQElucHV0KCkgZHJvcGRvd25JY29uOiBJY29uUHJvcCA9IGZhRWxsaXBzaXM7XHJcbiAgICAvLyBASW5wdXQoKSBzaG93U2hhZG93OiBib29sZWFuID0gZmFsc2U7XHJcbiAgICBASW5wdXQoKSBkcm9wRG93bkF1dG9DbG9zZTogJ3RydWUnIHwgJ2ZhbHNlJyB8ICdpbnNpZGUnIHwgJ291dHNpZGUnID0gJ3RydWUnO1xyXG4gICAgQElucHV0KCkgZHJvcGRvd25NaW5XaWR0aDogc3RyaW5nID0gJzEwcmVtJztcclxuICAgIEBJbnB1dCgpIGhpZGVBY3Rpb25zRHJvcGRvd246IGJvb2xlYW4gPSBmYWxzZTtcclxuXHJcbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLmFjdGlvbnMtZHJvcGRvd24tb3BlbicpIHByb3RlY3RlZCBzaG93RHJvcGRvd246IGJvb2xlYW4gPSBmYWxzZTtcclxuICAgIFxyXG5cclxuICAgIGNvbnN0cnVjdG9yKFxyXG5cclxuICAgICkge31cclxuXHJcbiAgICBuZ09uSW5pdCgpOiB2b2lkIHt9XHJcblxyXG5cclxuICAgXHJcbiAgICBwcm90ZWN0ZWQgdG9nZ2xlRHJvcGRvd25NZW51KCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuc2hvd0Ryb3Bkb3duID0gIXRoaXMuc2hvd0Ryb3Bkb3duO1xyXG4gICAgfVxyXG5cclxuICAgIHByb3RlY3RlZCBjbG9zZURyb3Bkb3duTWVudSgpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLnNob3dEcm9wZG93biA9IGZhbHNlO1xyXG4gICAgfVxyXG5cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwic2RzLWFjdGlvbnMtY29udGFpbmVyIG1lLTJcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJidG4tZ3JvdXAgc2RzLWFjdGlvbnMtd3JhcHBlclwiPlxyXG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInF1aWNrQWN0aW9uc1wiPjwvbmctY29udGVudD5cclxuXHJcbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFoaWRlQWN0aW9uc0Ryb3Bkb3duXCI+XHJcbiAgICAgICAgICAgIFxyXG4gICAgICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICAgICAjZHJvcGRvd25CdXR0b25cclxuICAgICAgICAgICAgICAgIGNsYXNzPVwic2RzLWFjdGlvbnMtZHJvcGRvd24tYnV0dG9uIHNkcy1idG4tdGFibGVcIlxyXG4gICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwidG9nZ2xlRHJvcGRvd25NZW51KClcIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJkcm9wZG93bkljb25cIiBbZml4ZWRXaWR0aF09XCJ0cnVlXCIgW3NpemVdPVwiJ3NtJ1wiPlxyXG4gICAgICAgICAgICAgICAgPC9mYS1pY29uPlxyXG4gICAgICAgICAgICA8L2J1dHRvbj5cclxuXHJcbiAgICAgICAgICAgIDxkeC1wb3BvdmVyXHJcbiAgICAgICAgICAgICAgICBbdGFyZ2V0XT1cImRyb3Bkb3duQnV0dG9uXCJcclxuICAgICAgICAgICAgICAgIFsodmlzaWJsZSldPVwic2hvd0Ryb3Bkb3duXCJcclxuICAgICAgICAgICAgICAgIFttaW5XaWR0aF09XCJkcm9wZG93bk1pbldpZHRoXCJcclxuICAgICAgICAgICAgICAgIFt3cmFwcGVyQXR0cl09XCJ7IGNsYXNzOiAnc2RzLWFjdGlvbnMtZHJvcGRvd24nIH1cIlxyXG4gICAgICAgICAgICA+XHJcbiAgICAgICAgICAgICAgICA8ZHhvLXBvc2l0aW9uXHJcbiAgICAgICAgICAgICAgICAgICAgbXk9XCJyaWdodCB0b3BcIlxyXG4gICAgICAgICAgICAgICAgICAgIGF0PVwicmlnaHQgYm90dG9tXCJcclxuICAgICAgICAgICAgICAgICAgICBbb2ZdPVwiZHJvcGRvd25CdXR0b25cIlxyXG4gICAgICAgICAgICAgICAgPlxyXG4gICAgICAgICAgICAgICAgICAgIDxkeG8tb2Zmc2V0IFt5XT1cIi03XCI+PC9keG8tb2Zmc2V0PlxyXG4gICAgICAgICAgICAgICAgPC9keG8tcG9zaXRpb24+XHJcblxyXG4gICAgICAgICAgICAgICAgPHVsIGNsYXNzPVwic2RzLXRhYmxlLWRyb3Bkb3duLW1lbnVcIiAoY2xpY2spPVwiY2xvc2VEcm9wZG93bk1lbnUoKVwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cclxuICAgICAgICAgICAgICAgIDwvdWw+XHJcbiAgICAgICAgICAgIDwvZHgtcG9wb3Zlcj5cclxuICAgICAgICA8L25nLWNvbnRhaW5lcj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19

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

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