npm - @spicainternational/ngx-sds-components - Versions diffs - 2.10.0 → 2.10.1 - Mend

@spicainternational/ngx-sds-components 2.10.0 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/fesm2015/spicainternational-ngx-sds-components-src-lib-avatar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-avatar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar.module.ts","../../../projects/ngx-sds-components/src/lib/avatar/spicainternational-ngx-sds-components-src-lib-avatar.ts"],"sourcesContent":["import {\r\n AfterViewInit,\r\n Component,\r\n Input,\r\n OnChanges,\r\n OnInit,\r\n SimpleChanges,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-avatar',\r\n templateUrl: './avatar.component.html',\r\n styleUrls: ['./avatar.component.scss'],\r\n})\r\nexport class SdsAvatarComponent implements AfterViewInit, OnChanges {\r\n @Input() text: string = '';\r\n @Input() colorKey: string = '';\r\n @Input() pictureUri: string = '';\r\n @Input() showHint: boolean = false;\r\n @Input() borderStyle: 'solid' \| 'dashed' \| 'dotted' \| 'none' = 'none';\r\n @Input() borderColor?: string;\r\n @Input() initialsText?: string;\r\n @Input() cursor?: string;\r\n\r\n public isPictureReady: boolean = false;\r\n public initials: string = '';\r\n\r\n constructor() {}\r\n\r\n ngAfterViewInit() {\r\n this.loadUserPicture();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges) {\r\n if (\r\n changes['text'] &&\r\n changes['text'].currentValue != changes['text'].previousValue &&\r\n this.initialsText == undefined\r\n ) {\r\n this.extractInitials();\r\n }\r\n\r\n if (\r\n changes['pictureUri'] &&\r\n changes['pictureUri'].currentValue !=\r\n changes['pictureUri'].previousValue\r\n ) {\r\n this.loadUserPicture();\r\n }\r\n\r\n if (changes['initialsText'] && this.initialsText) {\r\n this.initials = this.initialsText;\r\n }\r\n }\r\n\r\n public setColorClass(): string {\r\n if (this.colorKey) {\r\n return 'color' + this.getColorIndex(this.colorKey);\r\n }\r\n return 'color18';\r\n }\r\n\r\n private extractInitials(): void {\r\n this.initials = '';\r\n if (this.text) {\r\n const initialsFromText = this.text\r\n .trim()\r\n .toUpperCase()\r\n .split(' ')\r\n .map((n) => n[0])\r\n .filter(x => !!x);\r\n\r\n if (initialsFromText.length > 0) {\r\n this.initials = initialsFromText[0];\r\n if (initialsFromText.length > 1) {\r\n this.initials = `${this.initials}${initialsFromText[initialsFromText.length - 1]}`\r\n }\r\n }\r\n }\r\n }\r\n\r\n private getColorIndex(s: string): number {\r\n const length = 10;\r\n if (!s) {\r\n return 0;\r\n }\r\n let sumOfChars = s\r\n .split('')\r\n .map((x) => x.charCodeAt(0))\r\n .reduce((a, b) => a + b, 0);\r\n return sumOfChars % length;\r\n }\r\n\r\n public loadUserPicture() {\r\n if (this.pictureUri && this.pictureUri !== '') {\r\n this.isPictureReady = true;\r\n } else {\r\n this.isPictureReady = false;\r\n }\r\n }\r\n}\r\n","<div\r\n class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n [class.hasPicture]=\"isPictureReady\"\r\n [ngClass]=\"setColorClass()\"\r\n [title]=\"showHint ? text : ''\"\r\n [style.border-style]=\"borderStyle.toString()\"\r\n [style.border-color]=\"borderColor\"\r\n [style.cursor]=\"cursor ? cursor : 'default'\"\r\n>\r\n <span \r\n ngIf=\"!isPictureReady\" \r\n class=\"initials\"\r\n >\r\n {{ initials }}\r\n </span>\r\n\r\n <img \r\n ngIf=\"isPictureReady\" \r\n [src]=\"pictureUri\"\r\n alt=\"\" />\r\n</div>\r\n","import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { AvatarModel } from './avatar-group.model';\r\n\r\n@Component({\r\n selector: 'sds-avatar-group',\r\n templateUrl: './avatar-group.component.html',\r\n styleUrls: ['./avatar-group.component.scss'],\r\n})\r\nexport class SdsAvatarGroupComponent implements OnInit, OnChanges {\r\n\r\n @Input() public stacked: boolean = false;\r\n @Input() public maxCount?: number;\r\n @Input() public fontSize: number = 2;\r\n @Input() public borderColor?: string;\r\n @Input() public data: Array<AvatarModel> = [];\r\n @Input() public dropdownContents: 'all' \| 'overflow' = 'all';\r\n\r\n public overflow: Array<AvatarModel> = [];\r\n public inflow: Array<AvatarModel> = [];\r\n\r\n public overflowCountDisplay: string = '';\r\n public overFlowBorderStyle: 'solid' \| 'none' = 'none';\r\n\r\n public overflowElementUUID = 'sds-ag-' + crypto.randomUUID();\r\n public showDropdown = false;\r\n\r\n constructor() {}\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['data'] \|\| changes['maxCount']){\r\n if (this.maxCount && this.data) {\r\n this.overflow = [...this.data];\r\n this.inflow = this.overflow.splice(0, this.maxCount);\r\n console.log(this.overflow.length);\r\n this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;\r\n this.overFlowBorderStyle = this.data.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';\r\n } else {\r\n this.inflow = [...this.data];\r\n }\r\n }\r\n }\r\n\r\n ngOnInit(): void {}\r\n\r\n public onOverflowClicked() {\r\n this.showDropdown = true;\r\n }\r\n\r\n}\r\n","<div class=\"d-flex avatar-group-container\">\r\n <sds-avatar ngFor=\"let avatar of inflow\"\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n [showHint]=\"true\"\r\n [style.font-size.rem]=\"fontSize\"\r\n [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n >\r\n </sds-avatar>\r\n\r\n <sds-avatar\r\n ngIf=\"overflow.length > 0\"\r\n [id]=\"overflowElementUUID\"\r\n class=\"overflow\"\r\n [initialsText]=\"overflowCountDisplay\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"overFlowBorderStyle\"\r\n cursor=\"pointer\"\r\n [style.font-size.rem]=\"fontSize\"\r\n\r\n placement=\"bottom\"\r\n container=\"body\"\r\n triggers=\"\"\r\n (click)=\"onOverflowClicked()\"\r\n >\r\n </sds-avatar>\r\n\r\n <dx-popover\r\n target=\"#{{overflowElementUUID}}\"\r\n [(visible)]=\"showDropdown\"\r\n >\r\n <dx-scroll-view\r\n showScrollbar=\"always\">\r\n <div class=\"overflow-avatars-container rounded\">\r\n <div ngFor=\"let avatar of (dropdownContents === 'all' ? data : overflow)\"\r\n class=\"d-flex align-items-center pl-3 py-2 pr-5 my-2 overflow-avatar-container\" >\r\n <sds-avatar\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n borderColor=\"transparent\"\r\n [style.font-size.rem]=\"1.8\"\r\n >\r\n </sds-avatar>\r\n <div class=\"ml-3\">{{avatar.text}}</div>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </dx-popover>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\n\r\nimport { SdsAvatarComponent } from './avatar.component';\r\nimport { SdsAvatarGroupComponent } from './avatar-group.component';\r\n\r\n\r\nconst components = [\r\n SdsAvatarComponent,\r\n SdsAvatarGroupComponent\r\n];\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule,\r\n DxPopoverModule,\r\n DxScrollViewModule\r\n\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsAvatarModule { }\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i1.SdsAvatarComponent","i4"],"mappings":"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"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-avatar.mjs","sources":["../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.ts","../../../projects/ngx-sds-components/src/lib/avatar/avatar-group.component.html","../../../projects/ngx-sds-components/src/lib/avatar/avatar.module.ts","../../../projects/ngx-sds-components/src/lib/avatar/spicainternational-ngx-sds-components-src-lib-avatar.ts"],"sourcesContent":["import {\r\n AfterViewInit,\r\n Component,\r\n Input,\r\n OnChanges,\r\n OnInit,\r\n SimpleChanges,\r\n} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'sds-avatar',\r\n templateUrl: './avatar.component.html',\r\n styleUrls: ['./avatar.component.scss'],\r\n})\r\nexport class SdsAvatarComponent implements AfterViewInit, OnChanges {\r\n @Input() text: string = '';\r\n @Input() colorKey: string = '';\r\n @Input() pictureUri: string = '';\r\n @Input() showHint: boolean = false;\r\n @Input() borderStyle: 'solid' \| 'dashed' \| 'dotted' \| 'none' = 'none';\r\n @Input() borderColor?: string;\r\n @Input() initialsText?: string;\r\n @Input() cursor?: string;\r\n\r\n public isPictureReady: boolean = false;\r\n public initials: string = '';\r\n\r\n constructor() {}\r\n\r\n ngAfterViewInit() {\r\n this.loadUserPicture();\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges) {\r\n if (\r\n changes['text'] &&\r\n changes['text'].currentValue != changes['text'].previousValue &&\r\n this.initialsText == undefined\r\n ) {\r\n this.extractInitials();\r\n }\r\n\r\n if (\r\n changes['pictureUri'] &&\r\n changes['pictureUri'].currentValue !=\r\n changes['pictureUri'].previousValue\r\n ) {\r\n this.loadUserPicture();\r\n }\r\n\r\n if (changes['initialsText'] && this.initialsText) {\r\n this.initials = this.initialsText;\r\n }\r\n }\r\n\r\n public setColorClass(): string {\r\n if (this.colorKey) {\r\n return 'color' + this.getColorIndex(this.colorKey);\r\n }\r\n return 'color18';\r\n }\r\n\r\n private extractInitials(): void {\r\n this.initials = '';\r\n if (this.text) {\r\n const initialsFromText = this.text\r\n .trim()\r\n .toUpperCase()\r\n .split(' ')\r\n .map((n) => n[0])\r\n .filter(x => !!x);\r\n\r\n if (initialsFromText.length > 0) {\r\n this.initials = initialsFromText[0];\r\n if (initialsFromText.length > 1) {\r\n this.initials = `${this.initials}${initialsFromText[initialsFromText.length - 1]}`\r\n }\r\n }\r\n }\r\n }\r\n\r\n private getColorIndex(s: string): number {\r\n const length = 10;\r\n if (!s) {\r\n return 0;\r\n }\r\n let sumOfChars = s\r\n .split('')\r\n .map((x) => x.charCodeAt(0))\r\n .reduce((a, b) => a + b, 0);\r\n return sumOfChars % length;\r\n }\r\n\r\n public loadUserPicture() {\r\n if (this.pictureUri && this.pictureUri !== '') {\r\n this.isPictureReady = true;\r\n } else {\r\n this.isPictureReady = false;\r\n }\r\n }\r\n}\r\n","<div\r\n class=\"avatar circle d-flex justify-content-center align-items-center\"\r\n [class.hasPicture]=\"isPictureReady\"\r\n [ngClass]=\"setColorClass()\"\r\n [title]=\"showHint ? text : ''\"\r\n [style.border-style]=\"borderStyle.toString()\"\r\n [style.border-color]=\"borderColor\"\r\n [style.cursor]=\"cursor ? cursor : 'default'\"\r\n>\r\n <span \r\n ngIf=\"!isPictureReady\" \r\n class=\"initials\"\r\n >\r\n {{ initials }}\r\n </span>\r\n\r\n <img \r\n ngIf=\"isPictureReady\" \r\n [src]=\"pictureUri\"\r\n alt=\"\" />\r\n</div>\r\n","import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { AvatarModel } from './avatar-group.model';\r\n\r\n@Component({\r\n selector: 'sds-avatar-group',\r\n templateUrl: './avatar-group.component.html',\r\n styleUrls: ['./avatar-group.component.scss'],\r\n})\r\nexport class SdsAvatarGroupComponent implements OnInit, OnChanges {\r\n\r\n @Input() public stacked: boolean = false;\r\n @Input() public maxCount?: number;\r\n @Input() public fontSize: number = 2;\r\n @Input() public borderColor?: string;\r\n @Input() public data: Array<AvatarModel> = [];\r\n @Input() public dropdownContents: 'all' \| 'overflow' = 'all';\r\n\r\n public overflow: Array<AvatarModel> = [];\r\n public inflow: Array<AvatarModel> = [];\r\n\r\n public overflowCountDisplay: string = '';\r\n public overFlowBorderStyle: 'solid' \| 'none' = 'none';\r\n\r\n public overflowElementUUID = 'sds-ag-' + crypto.randomUUID();\r\n public showDropdown = false;\r\n\r\n constructor() {}\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['data'] \|\| changes['maxCount']){\r\n if (this.maxCount && this.data) {\r\n this.overflow = [...this.data];\r\n this.inflow = this.overflow.splice(0, this.maxCount);\r\n console.log(this.overflow.length);\r\n this.overflowCountDisplay = `+${Math.min(99, this.overflow.length)}`;\r\n this.overFlowBorderStyle = this.data.filter(x => x.borderStyle).length > 0 ? 'solid' : 'none';\r\n } else {\r\n this.inflow = [...this.data];\r\n }\r\n }\r\n }\r\n\r\n ngOnInit(): void {}\r\n\r\n public onOverflowClicked() {\r\n this.showDropdown = true;\r\n }\r\n\r\n}\r\n","<div class=\"d-flex avatar-group-container\">\r\n <sds-avatar ngFor=\"let avatar of inflow\"\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n [showHint]=\"true\"\r\n [style.font-size.rem]=\"fontSize\"\r\n [style.margin-right.rem]=\"stacked ? fontSize/-3 : fontSize/15\"\r\n >\r\n </sds-avatar>\r\n\r\n <sds-avatar\r\n ngIf=\"overflow.length > 0\"\r\n [id]=\"overflowElementUUID\"\r\n class=\"overflow\"\r\n [initialsText]=\"overflowCountDisplay\"\r\n [borderColor]=\"borderColor\"\r\n [borderStyle]=\"overFlowBorderStyle\"\r\n cursor=\"pointer\"\r\n [style.font-size.rem]=\"fontSize\"\r\n\r\n placement=\"bottom\"\r\n container=\"body\"\r\n triggers=\"\"\r\n (click)=\"onOverflowClicked()\"\r\n >\r\n </sds-avatar>\r\n\r\n <dx-popover\r\n target=\"#{{overflowElementUUID}}\"\r\n [(visible)]=\"showDropdown\"\r\n >\r\n <dx-scroll-view\r\n showScrollbar=\"always\">\r\n <div class=\"overflow-avatars-container rounded\">\r\n <div ngFor=\"let avatar of (dropdownContents === 'all' ? data : overflow)\"\r\n class=\"d-flex align-items-center pl-3 py-2 pr-5 my-2 overflow-avatar-container\" >\r\n <sds-avatar\r\n [text]=\"avatar.text\"\r\n [colorKey]=\"avatar.colorKey\"\r\n [borderStyle]=\"avatar.borderStyle ? avatar.borderStyle : 'none'\"\r\n [pictureUri]=\"avatar.pictureUri ?? ''\"\r\n borderColor=\"transparent\"\r\n [style.font-size.rem]=\"1.8\"\r\n >\r\n </sds-avatar>\r\n <div class=\"ml-3\">{{avatar.text}}</div>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </dx-popover>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\n\r\nimport { DxPopoverModule } from 'devextreme-angular/ui/popover';\r\nimport { DxScrollViewModule } from 'devextreme-angular/ui/scroll-view';\r\n\r\nimport { SdsAvatarComponent } from './avatar.component';\r\nimport { SdsAvatarGroupComponent } from './avatar-group.component';\r\n\r\n\r\nconst components = [\r\n SdsAvatarComponent,\r\n SdsAvatarGroupComponent\r\n];\r\n@NgModule({\r\n declarations: [\r\n ...components\r\n ],\r\n imports: [\r\n CommonModule,\r\n DxPopoverModule,\r\n DxScrollViewModule\r\n\r\n ],\r\n exports: [\r\n ...components\r\n ]\r\n})\r\nexport class SdsAvatarModule { }\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":["i1.SdsAvatarComponent","i4"],"mappings":"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"}

package/fesm2015/spicainternational-ngx-sds-components-src-lib-color-picker.mjs CHANGED Viewed

@@ -33,7 +33,7 @@ class SdsColorPickerComponent {
     }
 }
 SdsColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsColorPickerComponent, selector: "sds-color-picker", inputs: { colors: "colors", disabled: "disabled", selectedColor: "selectedColor", defaultColor: "defaultColor", style: "style" }, outputs: { selectedColorChange: "selectedColorChange" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    *ngIf=\"style === 'inline'\"\r\n    class=\"color-tiles-container-inline\"\r\n>\r\n    <div\r\n        *ngFor=\"let color of colors\"\r\n        [style.background-color]=\"color\"\r\n        class=\"color-tile\"\r\n        (click)=\"selectColor(color)\"\r\n    >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color\"\r\n            [icon]=\"checkIcon\"\r\n        >\r\n        </fa-icon>\r\n    </div>\r\n</div>\r\n\r\n<div\r\n    *ngIf=\"style === 'dropdown'\"\r\n    [id]=\"elementUUID\"\r\n    class=\"btn-group\"\r\n>\r\n    <button\r\n        type=\"button\"\r\n        class=\"btn dropdown-toggle d-flex align-items-center\"\r\n        aria-controls=\"dropdown-basic\"\r\n        (click)=\"showDropdown = true\"\r\n    >\r\n        <div\r\n            class=\"color-tile\"\r\n            [style.background-color]=\"selectedColor || defaultColor\"\r\n            [class.undefined-color]=\"!(selectedColor || defaultColor)\"\r\n        >\r\n        </div>\r\n        <div class=\"caret\"></div>\r\n    </button>\r\n\r\n    <dx-popover\r\n        target=\"#{{elementUUID}}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDropdown\"\r\n    >\r\n        <div\r\n            class=\"color-tiles-container-square\"\r\n            [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\r\n        >\r\n            <div\r\n                *ngFor=\"let color of colors\"\r\n                [style.background-color]=\"color\"\r\n                class=\"color-tile rounded-circle\"\r\n                (click)=\"selectColor(color)\"\r\n            >\r\n                <fa-icon\r\n                    *ngIf=\"selectedColor === color\"\r\n                    [icon]=\"checkIcon\"\r\n                >\r\n                </fa-icon>\r\n            </div>\r\n        </div>\r\n    </dx-popover>\r\n</div>", styles: [".color-tiles-container-inline{display:flex;gap:.25rem;color:#fff}.color-tiles-container-square{display:grid;grid-gap:.5rem;gap:.5rem;color:#fff}.color-tile{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:100%;cursor:pointer}.color-tile fa-icon{line-height:1rem}.color-tile.undefined-color{border-color:gray;border-style:solid;border-width:1px}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "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", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+SdsColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsColorPickerComponent, selector: "sds-color-picker", inputs: { colors: "colors", disabled: "disabled", selectedColor: "selectedColor", defaultColor: "defaultColor", style: "style" }, outputs: { selectedColorChange: "selectedColorChange" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    *ngIf=\"style === 'inline'\"\r\n    class=\"color-tiles-container-inline\"\r\n>\r\n    <div\r\n        *ngFor=\"let color of colors\"\r\n        [style.background-color]=\"color\"\r\n        class=\"color-tile\"\r\n        (click)=\"selectColor(color)\"\r\n    >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color\"\r\n            [icon]=\"checkIcon\"\r\n        >\r\n        </fa-icon>\r\n    </div>\r\n</div>\r\n\r\n<div\r\n    *ngIf=\"style === 'dropdown'\"\r\n    [id]=\"elementUUID\"\r\n    class=\"btn-group\"\r\n>\r\n    <button\r\n        type=\"button\"\r\n        class=\"btn dropdown-toggle d-flex align-items-center\"\r\n        aria-controls=\"dropdown-basic\"\r\n        (click)=\"showDropdown = true\"\r\n    >\r\n        <div\r\n            class=\"color-tile\"\r\n            [style.background-color]=\"selectedColor || defaultColor\"\r\n            [class.undefined-color]=\"!(selectedColor || defaultColor)\"\r\n        >\r\n        </div>\r\n        <div class=\"caret\"></div>\r\n    </button>\r\n\r\n    <dx-popover\r\n        target=\"#{{elementUUID}}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDropdown\"\r\n    >\r\n        <div\r\n            class=\"color-tiles-container-square\"\r\n            [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\r\n        >\r\n            <div\r\n                *ngFor=\"let color of colors\"\r\n                [style.background-color]=\"color\"\r\n                class=\"color-tile rounded-circle\"\r\n                (click)=\"selectColor(color)\"\r\n            >\r\n                <fa-icon\r\n                    *ngIf=\"selectedColor === color\"\r\n                    [icon]=\"checkIcon\"\r\n                >\r\n                </fa-icon>\r\n            </div>\r\n        </div>\r\n    </dx-popover>\r\n</div>", styles: [".color-tiles-container-inline{display:flex;gap:.25rem;color:#fff}.color-tiles-container-square{display:grid;grid-gap:.5rem;gap:.5rem;color:#fff}.color-tile{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:100%;cursor:pointer}.color-tile fa-icon{line-height:1rem}.color-tile.undefined-color{border-color:gray;border-style:solid;border-width:1px}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'sds-color-picker', template: "<div\r\n    *ngIf=\"style === 'inline'\"\r\n    class=\"color-tiles-container-inline\"\r\n>\r\n    <div\r\n        *ngFor=\"let color of colors\"\r\n        [style.background-color]=\"color\"\r\n        class=\"color-tile\"\r\n        (click)=\"selectColor(color)\"\r\n    >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color\"\r\n            [icon]=\"checkIcon\"\r\n        >\r\n        </fa-icon>\r\n    </div>\r\n</div>\r\n\r\n<div\r\n    *ngIf=\"style === 'dropdown'\"\r\n    [id]=\"elementUUID\"\r\n    class=\"btn-group\"\r\n>\r\n    <button\r\n        type=\"button\"\r\n        class=\"btn dropdown-toggle d-flex align-items-center\"\r\n        aria-controls=\"dropdown-basic\"\r\n        (click)=\"showDropdown = true\"\r\n    >\r\n        <div\r\n            class=\"color-tile\"\r\n            [style.background-color]=\"selectedColor || defaultColor\"\r\n            [class.undefined-color]=\"!(selectedColor || defaultColor)\"\r\n        >\r\n        </div>\r\n        <div class=\"caret\"></div>\r\n    </button>\r\n\r\n    <dx-popover\r\n        target=\"#{{elementUUID}}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDropdown\"\r\n    >\r\n        <div\r\n            class=\"color-tiles-container-square\"\r\n            [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\r\n        >\r\n            <div\r\n                *ngFor=\"let color of colors\"\r\n                [style.background-color]=\"color\"\r\n                class=\"color-tile rounded-circle\"\r\n                (click)=\"selectColor(color)\"\r\n            >\r\n                <fa-icon\r\n                    *ngIf=\"selectedColor === color\"\r\n                    [icon]=\"checkIcon\"\r\n                >\r\n                </fa-icon>\r\n            </div>\r\n        </div>\r\n    </dx-popover>\r\n</div>", styles: [".color-tiles-container-inline{display:flex;gap:.25rem;color:#fff}.color-tiles-container-square{display:grid;grid-gap:.5rem;gap:.5rem;color:#fff}.color-tile{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:100%;cursor:pointer}.color-tile fa-icon{line-height:1rem}.color-tile.undefined-color{border-color:gray;border-style:solid;border-width:1px}\n"] }]

package/fesm2015/spicainternational-ngx-sds-components-src-lib-color-picker.mjs.map CHANGED Viewed

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

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

@@ -73,7 +73,7 @@ class SdsDatePickerService {
         }
         return [dateStart, dateEnd];
     }
-    getPredefinedDateRanges(dateRangeDefinitions, referenceDay) {
+    getPredefinedDateRanges(dateRangeDefinitions, referenceDay, firstDayOfWeek) {
         let predefinedDateRanges = new Array();
         referenceDay = startOfDay(referenceDay);
         dateRangeDefinitions.forEach((definition) => {
@@ -95,8 +95,8 @@ class SdsDatePickerService {
                             dateTo = addDays(referenceDay, dateRangeDefinition.modifier);
                             break;
                         case 'w':
-                            dateFrom = startOfWeek(addWeeks(referenceDay, dateRangeDefinition.modifier));
-                            dateTo = endOfWeek(addWeeks(referenceDay, dateRangeDefinition.modifier));
+                            dateFrom = startOfWeek(addWeeks(referenceDay, dateRangeDefinition.modifier), { weekStartsOn: firstDayOfWeek });
+                            dateTo = endOfWeek(addWeeks(referenceDay, dateRangeDefinition.modifier), { weekStartsOn: firstDayOfWeek });
                             break;
                         case 'm':
                             dateFrom = startOfMonth(addMonths(referenceDay, dateRangeDefinition.modifier));
@@ -149,6 +149,7 @@ class SdsDatePickerComponent {
         this.occupiedDays = [];
         this.applyText = 'close';
         this.cancelText = 'close';
+        this.firstDayOfWeek = 1;
         // public properties
         this.previousPeriodIcon = faAngleLeft;
         this.nextPeriodIcon = faAngleRight;
@@ -179,6 +180,7 @@ class SdsDatePickerComponent {
             return (data.view === 'month' &&
                 this.occupiedDays.some((date) => isSameDay(date, data.date)));
         };
+        this.dateRangeDefinitions = [];
         this.minDateDefault = new Date(1900, 1, 1);
         this.maxDateDefault = add(startOfDay(new Date()), { years: 50 });
         this.showDatepicker = false;
@@ -221,7 +223,6 @@ class SdsDatePickerComponent {
             this.dateEndOld = this.selectedDateEnd;
         }
         if (changes['selectedDate']) {
-            console.log('selectedDate changed');
             const value = changes['selectedDate'].currentValue;
             this.selectedDateInternal = startOfDay(value);
             if (this.selectionKind == 'single') {
@@ -294,6 +295,9 @@ class SdsDatePickerComponent {
                 }
             }
         }
+        if (changes['firstDayOfWeek']) {
+            this.generateDateRanges(true);
+        }
     }
     get selectedDateStartFocus() {
         return this.selectedDateFocus;
@@ -383,6 +387,8 @@ class SdsDatePickerComponent {
             });
         }
         else {
+            this.dateStartOld = this.selectedDateStart;
+            this.dateEndOld = this.selectedDateEnd;
             this.isSettingNotPreprocessedDate = true;
             setTimeout(() => {
                 var _a;
@@ -422,10 +428,10 @@ class SdsDatePickerComponent {
             else {
                 const dateStartNew = new Date(this.selectedDateStart);
                 const dateEndNew = new Date(this.selectedDateEnd);
-                const startDateChanged = this.dateStartOld instanceof Date &&
-                    !isSameDay(this.dateStartOld, dateStartNew);
-                const endDateChanged = this.dateEndOld instanceof Date &&
-                    !isSameDay(this.dateEndOld, dateEndNew);
+                const startDateChanged = (this.dateStartOld instanceof Date && !isSameDay(this.dateStartOld, dateStartNew)) ||
+                    (typeof this.dateStartOld === 'string' && this.dateStartOld === '');
+                const endDateChanged = (this.dateEndOld instanceof Date && !isSameDay(this.dateEndOld, dateEndNew)) ||
+                    (typeof this.dateEndOld === 'string' && this.dateEndOld === '');
                 if (startDateChanged) {
                     this.dateStartOld = new Date(this.selectedDateStart);
                     this.selectedDateStartChange.emit(this.selectedDateStart);
@@ -478,19 +484,21 @@ class SdsDatePickerComponent {
         this.setSelectedDate(range[0], range[1]);
     }
     getCellCssClass(date) {
-        const calendarDate = date;
+        const calendarDate = new Date(date);
         let css = '';
         if (this.selectionKind == 'period') {
-            if (isAfter(calendarDate, startOfDay(this.selectedDateStart)) &&
-                isBefore(calendarDate, startOfDay(this.selectedDateEnd)) &&
+            const selectedDateStartAsDate = new Date(this.selectedDateStart);
+            const selectedDateEndAsDate = new Date(this.selectedDateEnd);
+            if (isAfter(calendarDate, startOfDay(selectedDateStartAsDate)) &&
+                isBefore(calendarDate, startOfDay(selectedDateEndAsDate)) &&
                 !this.occupiedDays.some((day) => isSameDay(calendarDate, day))) {
                 css += ' bg-secondary text-dark rounded-0';
             }
             else {
-                if (isSameDay(calendarDate, this.selectedDateStart)) {
+                if (isSameDay(calendarDate, selectedDateStartAsDate)) {
                     css += ' bg-primary text-white rounded-left';
                 }
-                if (isSameDay(calendarDate, this.selectedDateEnd)) {
+                if (isSameDay(calendarDate, selectedDateEndAsDate)) {
                     css += ' bg-primary text-white rounded-right';
                 }
             }
@@ -516,7 +524,6 @@ class SdsDatePickerComponent {
         this.showPredefinedOptionsSelector = false;
         this.selectedDateRange = range;
         if (range === this.customDateRange) {
-            console.log('open popup');
             this.openDatepickerPopup();
         }
         else {
@@ -605,7 +612,7 @@ class SdsDatePickerComponent {
             !isSameDay(this.predefinedDateRangesGeneratedDate, today)) {
             this.predefinedDateRangesGeneratedDate = today;
             this.predefinedDateRanges =
-                this.datePickerService.getPredefinedDateRanges(this.dateRangeDefinitions, today);
+                this.datePickerService.getPredefinedDateRanges(this.dateRangeDefinitions, today, this.firstDayOfWeek);
             this.dateRanges = [...this.predefinedDateRanges];
             this.dateRanges.push(this.customDateRange);
         }
@@ -617,10 +624,10 @@ class SdsDatePickerComponent {
     }
 }
 SdsDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdsDatePickerService }], target: i0.ɵɵFactoryTarget.Component });
-SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", fixedWidth: "fixedWidth", occupiedDays: "occupiedDays", applyText: "applyText", cancelText: "cancelText", translations: "translations" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, host: { listeners: { "document:keyup": "onKeyupHandler($event)" } }, viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"datepickerbuttons\">\r\n    <div\r\n        class=\"d-flex\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n    >\r\n        <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        >\r\n            <button\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-left\r\n                    border-right-0 border-color-muted\r\n                    dropdown-toggle\r\n                    preselect-options-fixed-width\r\n                    text-truncate\"\r\n                [disabled]=\"disabled\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n                {{selectedDateRange.name}}\r\n            </button>\r\n\r\n            <dx-popover\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <button\r\n                            class=\"dropdown-item\"\r\n                            [class.font-weight-500]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > {{range.name}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        </div>\r\n\r\n        <button\r\n            class=\"btn btn-white border rounded-0 border-right-0 border-color-muted pr-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border rounded-0 border-left-0 border-right-0 border-color-muted text-truncate px-0\"\r\n            [class.w-100]=\"!!!fixedWidth\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n            [style.width.px]=\"fixedWidth\"\r\n        >\r\n            <div\r\n                *ngIf=\"true || this.selectionKind == 'period'\"\r\n                class=\"d-flex justify-content-center align-items-center\"\r\n            >\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            class=\"btn btn-white border rounded-right border-left-0 border-color-muted pl-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <dx-popover\r\n        target=\"#pickerDropdown{{ randomIdReference }}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDatepicker\"\r\n        (onHiding)=\"closeDatepickerPopup()\"\r\n        class=\"m-0 p-0\"\r\n    >\r\n        <dxo-animation>\r\n            <dxo-show\r\n                type=\"pop\"\r\n                [from]=\"{ scale: 0.9 }\"\r\n                [to]=\"{ scale: 1 }\"\r\n            ></dxo-show>\r\n            <dxo-hide\r\n                type=\"fade\"\r\n                [from]=\"1\"\r\n                [to]=\"0\"\r\n            ></dxo-hide>\r\n        </dxo-animation>\r\n        <div *dxTemplate=\"let data of 'content'\">\r\n            <dx-scroll-view>\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateStart\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateEnd\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'single'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #singleDatePickerBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input datepicker-input-large\"\r\n                                [class.activeInput]=\"true\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateInternal\"\r\n                                (onValueChanged)=\"closeDatepickerPopup()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                        <dx-calendar\r\n                            #calendar\r\n                            [min]=\"minDate || minDateDefault\"\r\n                            [max]=\"maxDate || maxDateDefault\"\r\n                            [disabledDates]=\"disabledDates\"\r\n                            [isValid]=\"isValid\"\r\n                            [validationError]=\"validationError\"\r\n                            [disabled]=\"disabled\"\r\n                            [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                            (onValueChanged)=\"onDateChange($event)\"\r\n                        >\r\n                            <div\r\n                                *dxTemplate=\"let cellData of 'cell'\"\r\n                                [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                            >\r\n                                {{ cellData.text }}\r\n                            </div>\r\n                        </dx-calendar>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center mt-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary btn-sm\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"closeDatepickerPopup()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <button\r\n                            class=\"btn btn-primary btn-sm mx-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n</div>", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickerbuttons .rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "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", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { type: i2.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "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", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "showTodayButton", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationStatus", "value", "visible", "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", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationStatusChange", "valueChange", "visibleChange", "widthChange", "zoomLevelChange", "onBlur"] }], directives: [{ type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", fixedWidth: "fixedWidth", occupiedDays: "occupiedDays", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, host: { listeners: { "document:keyup": "onKeyupHandler($event)" } }, viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"datepickerbuttons\">\r\n    <div\r\n        class=\"d-flex\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n    >\r\n        <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        >\r\n            <button\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-left\r\n                    border-right-0 border-color-muted\r\n                    dropdown-toggle\r\n                    preselect-options-fixed-width\r\n                    text-truncate\"\r\n                [disabled]=\"disabled\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n                {{selectedDateRange.name}}\r\n            </button>\r\n\r\n            <dx-popover\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <button\r\n                            class=\"dropdown-item\"\r\n                            [class.font-weight-500]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > {{range.name}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        </div>\r\n\r\n        <button\r\n            class=\"btn btn-white border rounded-0 border-right-0 border-color-muted pr-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border rounded-0 border-left-0 border-right-0 border-color-muted text-truncate px-0\"\r\n            [class.w-100]=\"!!!fixedWidth\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n            [style.width.px]=\"fixedWidth\"\r\n        >\r\n            <div\r\n                *ngIf=\"true || this.selectionKind == 'period'\"\r\n                class=\"d-flex justify-content-center align-items-center\"\r\n            >\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            class=\"btn btn-white border rounded-right border-left-0 border-color-muted pl-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <dx-popover\r\n        target=\"#pickerDropdown{{ randomIdReference }}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDatepicker\"\r\n        (onHiding)=\"closeDatepickerPopup()\"\r\n        class=\"m-0 p-0\"\r\n    >\r\n        <dxo-animation>\r\n            <dxo-show\r\n                type=\"pop\"\r\n                [from]=\"{ scale: 0.9 }\"\r\n                [to]=\"{ scale: 1 }\"\r\n            ></dxo-show>\r\n            <dxo-hide\r\n                type=\"fade\"\r\n                [from]=\"1\"\r\n                [to]=\"0\"\r\n            ></dxo-hide>\r\n        </dxo-animation>\r\n        <div *dxTemplate=\"let data of 'content'\">\r\n            <dx-scroll-view>\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateStart\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateEnd\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'single'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #singleDatePickerBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input datepicker-input-large\"\r\n                                [class.activeInput]=\"true\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateInternal\"\r\n                                (onValueChanged)=\"closeDatepickerPopup()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                        <dx-calendar\r\n                            #calendar\r\n                            [min]=\"minDate || minDateDefault\"\r\n                            [max]=\"maxDate || maxDateDefault\"\r\n                            [disabledDates]=\"disabledDates\"\r\n                            [isValid]=\"isValid\"\r\n                            [validationError]=\"validationError\"\r\n                            [disabled]=\"disabled\"\r\n                            [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                            (onValueChanged)=\"onDateChange($event)\"\r\n                            [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                        >\r\n                            <div\r\n                                *dxTemplate=\"let cellData of 'cell'\"\r\n                                [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                            >\r\n                                {{ cellData.text }}\r\n                            </div>\r\n                        </dx-calendar>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center mt-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary btn-sm\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"closeDatepickerPopup()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <button\r\n                            class=\"btn btn-primary btn-sm mx-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n</div>", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickerbuttons .rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"], components: [{ type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { type: i2.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { type: i2.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { type: i2.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }], directives: [{ type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"datepickerbuttons\">\r\n    <div\r\n        class=\"d-flex\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n    >\r\n        <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        >\r\n            <button\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-left\r\n                    border-right-0 border-color-muted\r\n                    dropdown-toggle\r\n                    preselect-options-fixed-width\r\n                    text-truncate\"\r\n                [disabled]=\"disabled\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n                {{selectedDateRange.name}}\r\n            </button>\r\n\r\n            <dx-popover\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <button\r\n                            class=\"dropdown-item\"\r\n                            [class.font-weight-500]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > {{range.name}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        </div>\r\n\r\n        <button\r\n            class=\"btn btn-white border rounded-0 border-right-0 border-color-muted pr-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border rounded-0 border-left-0 border-right-0 border-color-muted text-truncate px-0\"\r\n            [class.w-100]=\"!!!fixedWidth\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n            [style.width.px]=\"fixedWidth\"\r\n        >\r\n            <div\r\n                *ngIf=\"true || this.selectionKind == 'period'\"\r\n                class=\"d-flex justify-content-center align-items-center\"\r\n            >\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            class=\"btn btn-white border rounded-right border-left-0 border-color-muted pl-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <dx-popover\r\n        target=\"#pickerDropdown{{ randomIdReference }}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDatepicker\"\r\n        (onHiding)=\"closeDatepickerPopup()\"\r\n        class=\"m-0 p-0\"\r\n    >\r\n        <dxo-animation>\r\n            <dxo-show\r\n                type=\"pop\"\r\n                [from]=\"{ scale: 0.9 }\"\r\n                [to]=\"{ scale: 1 }\"\r\n            ></dxo-show>\r\n            <dxo-hide\r\n                type=\"fade\"\r\n                [from]=\"1\"\r\n                [to]=\"0\"\r\n            ></dxo-hide>\r\n        </dxo-animation>\r\n        <div *dxTemplate=\"let data of 'content'\">\r\n            <dx-scroll-view>\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateStart\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateEnd\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'single'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #singleDatePickerBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input datepicker-input-large\"\r\n                                [class.activeInput]=\"true\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateInternal\"\r\n                                (onValueChanged)=\"closeDatepickerPopup()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                        <dx-calendar\r\n                            #calendar\r\n                            [min]=\"minDate || minDateDefault\"\r\n                            [max]=\"maxDate || maxDateDefault\"\r\n                            [disabledDates]=\"disabledDates\"\r\n                            [isValid]=\"isValid\"\r\n                            [validationError]=\"validationError\"\r\n                            [disabled]=\"disabled\"\r\n                            [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                            (onValueChanged)=\"onDateChange($event)\"\r\n                        >\r\n                            <div\r\n                                *dxTemplate=\"let cellData of 'cell'\"\r\n                                [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                            >\r\n                                {{ cellData.text }}\r\n                            </div>\r\n                        </dx-calendar>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center mt-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary btn-sm\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"closeDatepickerPopup()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <button\r\n                            class=\"btn btn-primary btn-sm mx-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n</div>", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickerbuttons .rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"] }]
+            args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"datepickerbuttons\">\r\n    <div\r\n        class=\"d-flex\"\r\n        role=\"group\"\r\n        aria-label=\"Date picker\"\r\n    >\r\n        <div\r\n            class=\"btn-group\"\r\n            role=\"group\"\r\n        >\r\n            <button\r\n                id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                class=\"\r\n                    btn btn-white\r\n                    border\r\n                    rounded-left\r\n                    border-right-0 border-color-muted\r\n                    dropdown-toggle\r\n                    preselect-options-fixed-width\r\n                    text-truncate\"\r\n                [disabled]=\"disabled\"\r\n                (click)=\"toggleDateRangeSelectorVisibility()\"\r\n            >\r\n                {{selectedDateRange.name}}\r\n            </button>\r\n\r\n            <dx-popover\r\n                target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                position=\"bottom\"\r\n                [(visible)]=\"showPredefinedOptionsSelector\"\r\n            >\r\n                <div *dxTemplate=\"let data of 'content'\">\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <button\r\n                            class=\"dropdown-item\"\r\n                            [class.font-weight-500]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        > {{range.name}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-popover>\r\n        </div>\r\n\r\n        <button\r\n            class=\"btn btn-white border rounded-0 border-right-0 border-color-muted pr-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMinimumLimit || disabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border rounded-0 border-left-0 border-right-0 border-color-muted text-truncate px-0\"\r\n            [class.w-100]=\"!!!fixedWidth\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker ? closeDatepickerPopup() : openDatepickerPopup()\"\r\n            [style.width.px]=\"fixedWidth\"\r\n        >\r\n            <div\r\n                *ngIf=\"true || this.selectionKind == 'period'\"\r\n                class=\"d-flex justify-content-center align-items-center\"\r\n            >\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            class=\"btn btn-white border rounded-right border-left-0 border-color-muted pl-2\"\r\n            type=\"button\"\r\n            [disabled]=\"isMaximumLimit || disabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <dx-popover\r\n        target=\"#pickerDropdown{{ randomIdReference }}\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDatepicker\"\r\n        (onHiding)=\"closeDatepickerPopup()\"\r\n        class=\"m-0 p-0\"\r\n    >\r\n        <dxo-animation>\r\n            <dxo-show\r\n                type=\"pop\"\r\n                [from]=\"{ scale: 0.9 }\"\r\n                [to]=\"{ scale: 1 }\"\r\n            ></dxo-show>\r\n            <dxo-hide\r\n                type=\"fade\"\r\n                [from]=\"1\"\r\n                [to]=\"0\"\r\n            ></dxo-hide>\r\n        </dxo-animation>\r\n        <div *dxTemplate=\"let data of 'content'\">\r\n            <dx-scroll-view>\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateStart\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateEnd\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'single'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center p-2 mb-3\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #singleDatePickerBox\r\n                                class=\"border p-1 m-0 text-center rounded-pill datepicker-input datepicker-input-large\"\r\n                                [class.activeInput]=\"true\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                displayFormat=\"shortdate\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [(value)]=\"selectedDateInternal\"\r\n                                (onValueChanged)=\"closeDatepickerPopup()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"d-flex justify-content-center align-items-center\">\r\n                        <dx-calendar\r\n                            #calendar\r\n                            [min]=\"minDate || minDateDefault\"\r\n                            [max]=\"maxDate || maxDateDefault\"\r\n                            [disabledDates]=\"disabledDates\"\r\n                            [isValid]=\"isValid\"\r\n                            [validationError]=\"validationError\"\r\n                            [disabled]=\"disabled\"\r\n                            [(value)]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                            (onValueChanged)=\"onDateChange($event)\"\r\n                            [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                        >\r\n                            <div\r\n                                *dxTemplate=\"let cellData of 'cell'\"\r\n                                [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                            >\r\n                                {{ cellData.text }}\r\n                            </div>\r\n                        </dx-calendar>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center mt-3\"\r\n                    >\r\n                        <button\r\n                            class=\"btn btn-secondary btn-sm\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"closeDatepickerPopup()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <button\r\n                            class=\"btn btn-primary btn-sm mx-1\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </dx-scroll-view>\r\n        </div>\r\n    </dx-popover>\r\n</div>", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickerbuttons .rounded-left{border-top-left-radius:.25rem!important;border-bottom-left-radius:.25rem!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}#datepickerbuttons .rounded-right{border-top-right-radius:.25rem!important;border-bottom-right-radius:.25rem!important;border-top-left-radius:0!important;border-bottom-left-radius:0!important}#datepickerbuttons .border-color-muted{border-color:#ccc!important}#datepickerbuttons .preselect-options-fixed-width{width:150px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { selectionKind: [{
                 type: Input
             }], dateRangeDefinitions: [{
@@ -661,6 +668,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                 type: Input
             }], translations: [{
                 type: Input
+            }], firstDayOfWeek: [{
+                type: Input
             }], singleDatePickerBox: [{
                 type: ViewChild,
                 args: ['singleDatePickerBox', { static: false }]