@spicainternational/ngx-sds-components 9.1.0 → 9.2.0-beta.0

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

@@ -50,7 +50,7 @@ class SdsColorPickerComponent {
         this.showDropdown = !this.showDropdown;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsColorPickerComponent, isStandalone: true, selector: "sds-color-picker", inputs: { colors: "colors", disabled: "disabled", selectedColor: "selectedColor", defaultColor: "defaultColor", style: "style", showCaret: "showCaret", shape: "shape" }, outputs: { selectedColorChange: "selectedColorChange", selectedColorIndexChange: "selectedColorIndexChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n    *ngIf=\"style === 'inline'\"\n    class=\"color-tiles-container-inline\"\n    [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\n>\n    <div\n        *ngFor=\"let color of colors; index as i\"\n        [style.background-color]=\"color\"\n        [style.border-color]=\"color\"\n        class=\"color-tile\"\n        [class.selected]=\"selectedColor === color\"\n        (click)=\"selectColorByIndex(i)\"\n    >\n        <fa-icon\n            *ngIf=\"selectedColor === color\"\n            [icon]=\"['fas', 'check']\"\n        >\n        </fa-icon>\n    </div>\n</div>\n\n<ng-container *ngIf=\"style === 'dropdown'\">\n\n    <button\n        #popoverTarget\n        type=\"button\"\n        class=\"btn d-flex align-items-center\"\n        [class.dropdown-toggle]=\"showCaret\"\n        [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\n        aria-controls=\"dropdown-basic\"\n        (click)=\"toggleDropdown()\"\n        (keydown)=\"onKeyDown($event)\"\n    >\n\n        <div\n            class=\"color-tile color-tile-dropdown\"\n            [style.background-color]=\"selectedColor || defaultColor\"\n            [class.undefined-color]=\"!(selectedColor || defaultColor)\"\n        >\n        </div>\n    </button>\n\n    <dx-popover\n        [target]=\"popoverTarget\"\n        position=\"bottom\"\n        [(visible)]=\"showDropdown\"\n    >\n        <div\n            class=\"color-tiles-container-square\"\n            [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\n            [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\n        >\n            <div\n                *ngFor=\"let color of colors; index as i\"\n                [style.background-color]=\"color\"\n                class=\"color-tile color-tile-popover sds-btn-reactive\"\n                (click)=\"selectColorByIndex(i)\"\n            >\n            <fa-icon\n                *ngIf=\"selectedColor === color || !selectedColor && defaultColor === color\"\n                [icon]=\"checkIcon\"\n            >\n            </fa-icon>\n\n            </div>\n        </div>\n    </dx-popover>\n</ng-container>", styles: [".color-tiles-container-inline{display:flex;gap:.5rem;color:#fff}.color-tiles-container-square{display:grid;gap:1rem;color:#fff}.color-tile{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:var(--sds-cp-radius);cursor:pointer}.color-tile.color-tile-popover:hover{filter:brightness(90%)}.color-tile fa-icon{line-height:1rem}.color-tile.undefined-color{border-color:gray;border-style:solid;border-width:1px}.btn:focus-visible{outline:0;box-shadow:0 0 0 .2rem #3b8fc240}.btn:active{border-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsColorPickerComponent, isStandalone: true, selector: "sds-color-picker", inputs: { colors: "colors", disabled: "disabled", selectedColor: "selectedColor", defaultColor: "defaultColor", style: "style", showCaret: "showCaret", shape: "shape" }, outputs: { selectedColorChange: "selectedColorChange", selectedColorIndexChange: "selectedColorIndexChange" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n    *ngIf=\"style === 'inline'\"\r\n    class=\"color-tiles-container-inline\"\r\n    [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n>\r\n    <div\r\n        *ngFor=\"let color of colors; index as i\"\r\n        [style.background-color]=\"color\"\r\n        [style.border-color]=\"color\"\r\n        class=\"color-tile\"\r\n        [class.selected]=\"selectedColor === color\"\r\n        (click)=\"selectColorByIndex(i)\"\r\n    >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color\"\r\n            [icon]=\"['fas', 'check']\"\r\n        >\r\n        </fa-icon>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"style === 'dropdown'\">\r\n\r\n    <button\r\n        #popoverTarget\r\n        type=\"button\"\r\n        class=\"btn d-flex align-items-center\"\r\n        [class.dropdown-toggle]=\"showCaret\"\r\n        [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n        aria-controls=\"dropdown-basic\"\r\n        (click)=\"toggleDropdown()\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n    >\r\n\r\n        <div\r\n            class=\"color-tile color-tile-dropdown\"\r\n            [style.background-color]=\"selectedColor || defaultColor\"\r\n            [class.undefined-color]=\"!(selectedColor || defaultColor)\"\r\n        >\r\n        </div>\r\n    </button>\r\n\r\n    <dx-popover\r\n        [target]=\"popoverTarget\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDropdown\"\r\n    >\r\n        <div\r\n            class=\"color-tiles-container-square\"\r\n            [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\r\n            [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n        >\r\n            <div\r\n                *ngFor=\"let color of colors; index as i\"\r\n                [style.background-color]=\"color\"\r\n                class=\"color-tile color-tile-popover sds-btn-reactive\"\r\n                (click)=\"selectColorByIndex(i)\"\r\n            >\r\n            <fa-icon\r\n                *ngIf=\"selectedColor === color || !selectedColor && defaultColor === color\"\r\n                [icon]=\"checkIcon\"\r\n            >\r\n            </fa-icon>\r\n\r\n            </div>\r\n        </div>\r\n    </dx-popover>\r\n</ng-container>", styles: [".color-tiles-container-inline{display:flex;gap:.5rem;color:#fff}.color-tiles-container-square{display:grid;gap:1rem;color:#fff}.color-tile{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:var(--sds-cp-radius);cursor:pointer}.color-tile.color-tile-popover:hover{filter:brightness(90%)}.color-tile fa-icon{line-height:1rem}.color-tile.undefined-color{border-color:gray;border-style:solid;border-width:1px}.btn:focus-visible{outline:0;box-shadow:0 0 0 .2rem #3b8fc240}.btn:active{border-color:transparent}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsColorPickerComponent, decorators: [{
             type: Component,
@@ -60,7 +60,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         FontAwesomeModule,
                         DxPopoverModule,
                         NgStyle,
-                    ], template: "<div\n    *ngIf=\"style === 'inline'\"\n    class=\"color-tiles-container-inline\"\n    [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\n>\n    <div\n        *ngFor=\"let color of colors; index as i\"\n        [style.background-color]=\"color\"\n        [style.border-color]=\"color\"\n        class=\"color-tile\"\n        [class.selected]=\"selectedColor === color\"\n        (click)=\"selectColorByIndex(i)\"\n    >\n        <fa-icon\n            *ngIf=\"selectedColor === color\"\n            [icon]=\"['fas', 'check']\"\n        >\n        </fa-icon>\n    </div>\n</div>\n\n<ng-container *ngIf=\"style === 'dropdown'\">\n\n    <button\n        #popoverTarget\n        type=\"button\"\n        class=\"btn d-flex align-items-center\"\n        [class.dropdown-toggle]=\"showCaret\"\n        [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\n        aria-controls=\"dropdown-basic\"\n        (click)=\"toggleDropdown()\"\n        (keydown)=\"onKeyDown($event)\"\n    >\n\n        <div\n            class=\"color-tile color-tile-dropdown\"\n            [style.background-color]=\"selectedColor || defaultColor\"\n            [class.undefined-color]=\"!(selectedColor || defaultColor)\"\n        >\n        </div>\n    </button>\n\n    <dx-popover\n        [target]=\"popoverTarget\"\n        position=\"bottom\"\n        [(visible)]=\"showDropdown\"\n    >\n        <div\n            class=\"color-tiles-container-square\"\n            [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\n            [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\n        >\n            <div\n                *ngFor=\"let color of colors; index as i\"\n                [style.background-color]=\"color\"\n                class=\"color-tile color-tile-popover sds-btn-reactive\"\n                (click)=\"selectColorByIndex(i)\"\n            >\n            <fa-icon\n                *ngIf=\"selectedColor === color || !selectedColor && defaultColor === color\"\n                [icon]=\"checkIcon\"\n            >\n            </fa-icon>\n\n            </div>\n        </div>\n    </dx-popover>\n</ng-container>", styles: [".color-tiles-container-inline{display:flex;gap:.5rem;color:#fff}.color-tiles-container-square{display:grid;gap:1rem;color:#fff}.color-tile{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:var(--sds-cp-radius);cursor:pointer}.color-tile.color-tile-popover:hover{filter:brightness(90%)}.color-tile fa-icon{line-height:1rem}.color-tile.undefined-color{border-color:gray;border-style:solid;border-width:1px}.btn:focus-visible{outline:0;box-shadow:0 0 0 .2rem #3b8fc240}.btn:active{border-color:transparent}\n"] }]
+                    ], template: "<div\r\n    *ngIf=\"style === 'inline'\"\r\n    class=\"color-tiles-container-inline\"\r\n    [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n>\r\n    <div\r\n        *ngFor=\"let color of colors; index as i\"\r\n        [style.background-color]=\"color\"\r\n        [style.border-color]=\"color\"\r\n        class=\"color-tile\"\r\n        [class.selected]=\"selectedColor === color\"\r\n        (click)=\"selectColorByIndex(i)\"\r\n    >\r\n        <fa-icon\r\n            *ngIf=\"selectedColor === color\"\r\n            [icon]=\"['fas', 'check']\"\r\n        >\r\n        </fa-icon>\r\n    </div>\r\n</div>\r\n\r\n<ng-container *ngIf=\"style === 'dropdown'\">\r\n\r\n    <button\r\n        #popoverTarget\r\n        type=\"button\"\r\n        class=\"btn d-flex align-items-center\"\r\n        [class.dropdown-toggle]=\"showCaret\"\r\n        [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n        aria-controls=\"dropdown-basic\"\r\n        (click)=\"toggleDropdown()\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n    >\r\n\r\n        <div\r\n            class=\"color-tile color-tile-dropdown\"\r\n            [style.background-color]=\"selectedColor || defaultColor\"\r\n            [class.undefined-color]=\"!(selectedColor || defaultColor)\"\r\n        >\r\n        </div>\r\n    </button>\r\n\r\n    <dx-popover\r\n        [target]=\"popoverTarget\"\r\n        position=\"bottom\"\r\n        [(visible)]=\"showDropdown\"\r\n    >\r\n        <div\r\n            class=\"color-tiles-container-square\"\r\n            [ngStyle]=\"{ 'grid-template-columns': dropdownGridTemplateColumns}\"\r\n            [style.--sds-cp-radius]=\"shape === 'square' ? squareRadius : circleRadius\"\r\n        >\r\n            <div\r\n                *ngFor=\"let color of colors; index as i\"\r\n                [style.background-color]=\"color\"\r\n                class=\"color-tile color-tile-popover sds-btn-reactive\"\r\n                (click)=\"selectColorByIndex(i)\"\r\n            >\r\n            <fa-icon\r\n                *ngIf=\"selectedColor === color || !selectedColor && defaultColor === color\"\r\n                [icon]=\"checkIcon\"\r\n            >\r\n            </fa-icon>\r\n\r\n            </div>\r\n        </div>\r\n    </dx-popover>\r\n</ng-container>", styles: [".color-tiles-container-inline{display:flex;gap:.5rem;color:#fff}.color-tiles-container-square{display:grid;gap:1rem;color:#fff}.color-tile{height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;border-radius:var(--sds-cp-radius);cursor:pointer}.color-tile.color-tile-popover:hover{filter:brightness(90%)}.color-tile fa-icon{line-height:1rem}.color-tile.undefined-color{border-color:gray;border-style:solid;border-width:1px}.btn:focus-visible{outline:0;box-shadow:0 0 0 .2rem #3b8fc240}.btn:active{border-color:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { colors: [{
                 type: Input
             }], disabled: [{

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

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

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

@@ -915,7 +915,7 @@ class SdsDatePickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdsDatePickerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsDatePickerComponent, isStandalone: true, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", singleDayFormatFn: "singleDayFormatFn", dateRangeFormatFn: "dateRangeFormatFn", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons", width: "width", dropdownWrapperClass: "dropdownWrapperClass", dropdownWrapperId: "dropdownWrapperId", getPreviousDateCallback: "getPreviousDateCallback", getNextDateCallback: "getNextDateCallback", getPreviousRangeCallback: "getPreviousRangeCallback", getNextRangeCallback: "getNextRangeCallback", useCustomDisplayContent: "useCustomDisplayContent", displayPredefinedDateRangeName: "displayPredefinedDateRangeName", style: "style", compactStyleDisplay: "compactStyleDisplay", dateInputDisplayFormat: "dateInputDisplayFormat", componentAriaLabel: "componentAriaLabel", openDateRangeDefinitionsAriaLabel: "openDateRangeDefinitionsAriaLabel", nextPeriodAriaLabel: "nextPeriodAriaLabel", previousPeriodAriaLabel: "previousPeriodAriaLabel", lockBeforeDate: "lockBeforeDate", lockBeforeDateHint: "lockBeforeDateHint", previousButtonDisabled: "previousButtonDisabled", nextButtonDisabled: "nextButtonDisabled" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange", predefinedRangeSelected: "predefinedRangeSelected", calendarVisibleChange: "calendarVisibleChange" }, queries: [{ propertyName: "displayContent", first: true, predicate: ["display"], descendants: true }], viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "selectedDateEndBox", first: true, predicate: ["selectedDateEndBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "_selectedDateRangeButton", first: true, predicate: ["selectedDateRangeButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\n    <div\n        class=\"datepicker d-inline-flex bg-white sds-no-print\"\n        role=\"group\"\n        [attr.aria-label]=\"componentAriaLabel\"\n        [style.width]=\"width\"\n    >\n\n        <ng-container *ngIf=\"style == 'classic'\">\n            <div\n                class=\"btn-group\"\n                role=\"group\"\n            >\n                <button\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n                    id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n                    type=\"button\"\n                    class=\"\n                        btn btn-white\n                        border\n                        rounded-start\n                        border-end\n                        p-0\n                        sds-fw-400\"\n                    [disabled]=\"disabled\"\n                    [style.width]=\"dateRangeDefinitionsWidth\"\n                    (click)=\"toggleDateRangeSelectorVisibility()\"\n                >\n                    <div class=\"d-flex align-items-center\">\n                        <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\n                            {{selectedDateRange.name}}\n                        </div>\n                        <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\n                        [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\n                            <span class=\"dropdown-toggle\"></span>\n                        </button>\n                    </div>\n\n                </button>\n\n                <dx-popover\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n                    [id]=\"elementUUID + '_predefined_periods_dropdown'\"\n                    target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n                    position=\"bottom\"\n                    [(visible)]=\"showPredefinedOptionsSelector\"\n                    [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\n                    [minWidth]=\"dateRangeDefinitionsWidth\"\n\n                >\n                    <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\n                        <div *ngFor=\"let range of dateRanges\">\n                            <div\n                                role=\"button\"\n                                tabindex=\"0\"\n                                class=\"predefined-date-range px-3 py-2 w-100\"\n                                [class.selected]=\"range === selectedDateRange\"\n                                (click)=\"changDateRange(range)\"\n                                (keydown)=\"onRangeKeyReleased($event, range)\"\n                            >\n                            {{range.name}}\n                            </div>\n                        </div>\n                    </div>\n                </dx-popover>\n            </div>\n        </ng-container>\n\n\n        <button\n            *ngIf=\"showPreviousAndNextButtons\"\n            class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\n            [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\n            [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\n            type=\"button\"\n            [attr.aria-label]=\"previousPeriodAriaLabel\"\n            [disabled]=\"isMinimumLimit || disabled || previousButtonDisabled\"\n            (click)=\"goToPreviousDate()\"\n        >\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\n\n        </button>\n\n        <button\n            #selectedDateRangeButton\n            id=\"pickerDropdown{{ randomIdReference }}\"\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\n            [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n            [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n            [class.rounded-end] = \"!showPreviousAndNextButtons\"\n            [class.border-end] = \"!showPreviousAndNextButtons\"\n            [disabled]=\"disabled\"\n            type=\"button\"\n            (click)=\"showDatepicker = !showDatepicker\"\n        >\n\n            <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n            <div *ngIf=\"!useCustomDisplayContent\"\n                class=\"d-flex justify-content-center align-items-center\">\n                <!-- <div class=\"mx-1\">\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n                </div> -->\n                <div class=\"mx-1 text-truncate\">\n                    <span>{{selectedDateRangeName}}</span>\n                    <span>{{selectedDateRangeTextSegment1}}</span>\n                    <fa-icon\n                        *ngIf=\"selectedDateRangeTextSegment2\"\n                        class=\"mx-2\"\n                        [icon]=\"toIcon\"\n                        size=\"sm\"\n                    ></fa-icon>\n                    <span>{{selectedDateRangeTextSegment2}}</span>\n                </div>\n            </div>\n        </button>\n\n        <button\n            *ngIf=\"showPreviousAndNextButtons\"\n            class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\n            type=\"button\"\n            [attr.aria-label]=\"nextPeriodAriaLabel\"\n            [disabled]=\"isMaximumLimit || disabled || nextButtonDisabled\"\n            (click)=\"goToNextDate()\"\n        >\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\n        </button>\n    </div>\n\n    <div class=\"sds-print-only h-100\">\n\n        <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n        <div *ngIf=\"!useCustomDisplayContent\"\n            class=\"d-flex justify-content-center align-items-center\">\n            <!-- <div class=\"mx-1\">\n                <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n            </div> -->\n            <div class=\"mx-1 text-truncate\">\n                <span>{{selectedDateRangeTextSegment1}}</span>\n                <fa-icon\n                    *ngIf=\"selectedDateRangeTextSegment2\"\n                    class=\"mx-2\"\n                    [icon]=\"toIcon\"\n                    size=\"sm\"\n                ></fa-icon>\n                <span>{{selectedDateRangeTextSegment2}}</span>\n            </div>\n        </div>\n    </div>\n\n<dx-popover\n    target=\"#pickerDropdown{{ randomIdReference }}\"\n    position=\"bottom\"\n    [(visible)]=\"showDatepicker\"\n    (onHiding)=\"onHiddenCalendarPopover()\"\n    (onShowing)=\"onShowingCalendarPopover()\"\n    class=\"m-0 p-0\"\n    [wrapperAttr]=\"{\n        class: 'sds-datepicker-popover sds-dx-popup-no-arrow ' + dropdownWrapperClass,\n        id: dropdownWrapperId\n    }\"\n>\n    <dxo-animation>\n        <dxo-show\n            type=\"pop\"\n            [from]=\"{ scale: 0.9 }\"\n            [to]=\"{ scale: 1 }\"\n        ></dxo-show>\n        <dxo-hide\n            type=\"fade\"\n            [from]=\"1\"\n            [to]=\"0\"\n        ></dxo-hide>\n    </dxo-animation>\n    <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\n        <dx-scroll-view>\n            <div class=\"d-flex flex-row\">\n\n                <div\n                    *ngIf=\"style == 'compact' && dateRanges.length > 1\"\n                    class=\"compact-mode-date-ranges-container d-flex flex-column p-3 bg-gray-100\"\n                    style=\"border-right: 1px solid var(--bs-gray-200)\"\n                    >\n                    <div\n                        *ngIf=\"translations.presets\" class=\"px-3 py-2\">\n                        <label>{{ translations.presets }}</label>\n                    </div>\n                    <div *ngFor=\"let range of dateRanges\">\n                        <div\n                            class=\"predefined-date-range px-3 py-2 w-100\"\n                            [class.selected]=\"range === selectedDateRange\"\n                            (click)=\"changDateRange(range)\"\n                        >\n                        {{range.name}}\n                        </div>\n                    </div>\n                </div>\n\n\n                <div id=\"datepickercomponent\">\n                    <div\n                        *ngIf=\"this.selectionKind == 'period'\"\n                        id=\"date-inputs\"\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\n                    >\n                        <div class=\"d-flex justify-content-between align-items-center\">\n                            <dx-date-box\n                                #selectedDateStartBox\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\n                                [class.activeInput]=\"selectedDateFocus\"\n                                [showClearButton]=\"false\"\n                                [showDropDownButton]=\"false\"\n                                [useMaskBehavior]=\"true\"\n                                [displayFormat]=\"dateInputDisplayFormat\"\n                                type=\"date\"\n                                [min]=\"minDate || minDateDefault\"\n                                [max]=\"maxDate || maxDateDefault\"\n                                [isValid]=\"isValid\"\n                                [validationError]=\"validationError\"\n                                [disabled]=\"disabled\"\n                                [value]=\"selectedDateStart\"\n                                (onValueChanged)=\"onStartDateChange($event)\"\n                                (onFocusIn)=\"onStartDateFocus()\"\n                            >\n                            </dx-date-box>\n                        </div>\n\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\n                        </div>\n\n                        <div class=\"d-flex justify-content-center align-items-center\">\n                            <dx-date-box\n                                #selectedDateEndBox\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\n                                [class.activeInput]=\"!selectedDateFocus\"\n                                [showClearButton]=\"false\"\n                                [showDropDownButton]=\"false\"\n                                [useMaskBehavior]=\"true\"\n                                [displayFormat]=\"dateInputDisplayFormat\"\n                                type=\"date\"\n                                [min]=\"minDate || minDateDefault\"\n                                [max]=\"maxDate || maxDateDefault\"\n                                [isValid]=\"isValid\"\n                                [validationError]=\"validationError\"\n                                [disabled]=\"disabled\"\n                                [value]=\"selectedDateEnd\"\n                                (onValueChanged)=\"onEndDateChange($event)\"\n                                (onFocusIn)=\"onEndDateFocus()\"\n                            >\n                            </dx-date-box>\n                        </div>\n                    </div>\n\n                    <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\n                        <div\n                            *ngIf=\"this.selectionKind == 'single'\"\n                            id=\"date-inputs\"\n                            class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\n                        >\n                            <div class=\"d-flex justify-content-center align-items-center\">\n                                <dx-date-box\n                                    #singleDatePickerBox\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\n                                    [class.activeInput]=\"true\"\n                                    [showClearButton]=\"false\"\n                                    [showDropDownButton]=\"false\"\n                                    [useMaskBehavior]=\"true\"\n                                    [displayFormat]=\"dateInputDisplayFormat\"\n                                    type=\"date\"\n                                    [min]=\"minDate || minDateDefault\"\n                                    [max]=\"maxDate || maxDateDefault\"\n                                    [isValid]=\"isValid\"\n                                    [validationError]=\"validationError\"\n                                    [disabled]=\"disabled\"\n                                    [(value)]=\"selectedDateInternal\"\n                                >\n                                </dx-date-box>\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\n                            </div>\n                        </div>\n\n                        <div\n                            class=\"d-flex justify-content-center align-items-center\"\n                            (click)=\"selectEndDate($event)\">\n\n                            <dx-calendar\n                                #calendar\n                                [min]=\"minDate || minDateDefault\"\n                                [max]=\"maxDate || maxDateDefault\"\n                                [disabledDates]=\"isDateDisabled\"\n                                [isValid]=\"isValid\"\n                                [validationError]=\"validationError\"\n                                [disabled]=\"disabled\"\n                                [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\n                                (onValueChanged)=\"onDateChange($event)\"\n                                [firstDayOfWeek]=\"firstDayOfWeek\"\n                            >\n                                <div\n                                    *dxTemplate=\"let cellData of 'cell'\"\n                                    [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\n                                    [style.line-height.px]=\"23\"\n\n                                >\n\n                                <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\n                                    <ng-template #thenLockBlock>\n                                        <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\"  class=\"locked-day position-absolute-x\"></fa-icon>\n                                    </ng-template>\n                                    <ng-template #elseDefaultBlock>\n                                        {{ cellData.text }}\n                                    </ng-template>\n                                </div>\n                            </dx-calendar>\n                        </div>\n                    </div>\n\n                    <div\n                        *ngIf=\"this.selectionKind == 'period'\"\n                        class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\n                    >\n                        <button\n                            class=\"sds-btn-secondary sds-fw-400\"\n                            [disabled]=\"disabled\"\n                            (click)=\"showDatepicker = false\"\n                            type=\"button\"\n                        >\n                            {{ translations.cancel}}\n                        </button>\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\n                        <button\n                            class=\"sds-btn-primary ms-1 sds-fw-400\"\n                            [disabled]=\"disabled\"\n                            (click)=\"applyPeriodPicker()\"\n                            type=\"button\"\n                        >\n                            {{ translations.apply}}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </dx-scroll-view>\n    </div>\n</dx-popover>\n<!-- </div> -->\n\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content .compact-mode-date-ranges-container{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i3.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "ngmodule", type: DxTemplateModule }, { kind: "ngmodule", type: DxoAnimationModule }, { kind: "ngmodule", type: DxoShowModule }, { kind: "ngmodule", type: DxoHideModule }, { kind: "ngmodule", type: DxoPositionModule }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i6.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "ngmodule", type: DxDateBoxModule }, { kind: "component", type: i7.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", "isDirty", "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", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "ngmodule", type: DxCalendarModule }, { kind: "component", type: i7.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "selectionMode", "selectWeekOnClick", "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", "isDirtyChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "selectionModeChange", "selectWeekOnClickChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }, { kind: "pipe", type: SdsDateComparePipe, name: "sdsDateCompare" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: SdsDatePickerComponent, isStandalone: true, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", singleDayFormatFn: "singleDayFormatFn", dateRangeFormatFn: "dateRangeFormatFn", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons", width: "width", dropdownWrapperClass: "dropdownWrapperClass", dropdownWrapperId: "dropdownWrapperId", getPreviousDateCallback: "getPreviousDateCallback", getNextDateCallback: "getNextDateCallback", getPreviousRangeCallback: "getPreviousRangeCallback", getNextRangeCallback: "getNextRangeCallback", useCustomDisplayContent: "useCustomDisplayContent", displayPredefinedDateRangeName: "displayPredefinedDateRangeName", style: "style", compactStyleDisplay: "compactStyleDisplay", dateInputDisplayFormat: "dateInputDisplayFormat", componentAriaLabel: "componentAriaLabel", openDateRangeDefinitionsAriaLabel: "openDateRangeDefinitionsAriaLabel", nextPeriodAriaLabel: "nextPeriodAriaLabel", previousPeriodAriaLabel: "previousPeriodAriaLabel", lockBeforeDate: "lockBeforeDate", lockBeforeDateHint: "lockBeforeDateHint", previousButtonDisabled: "previousButtonDisabled", nextButtonDisabled: "nextButtonDisabled" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange", predefinedRangeSelected: "predefinedRangeSelected", calendarVisibleChange: "calendarVisibleChange" }, queries: [{ propertyName: "displayContent", first: true, predicate: ["display"], descendants: true }], viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "selectedDateEndBox", first: true, predicate: ["selectedDateEndBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "_selectedDateRangeButton", first: true, predicate: ["selectedDateRangeButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div\r\n        class=\"datepicker d-inline-flex bg-white sds-no-print\"\r\n        role=\"group\"\r\n        [attr.aria-label]=\"componentAriaLabel\"\r\n        [style.width]=\"width\"\r\n    >\r\n\r\n        <ng-container *ngIf=\"style == 'classic'\">\r\n            <div\r\n                class=\"btn-group\"\r\n                role=\"group\"\r\n            >\r\n                <button\r\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                    id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                    type=\"button\"\r\n                    class=\"\r\n                        btn btn-white\r\n                        border\r\n                        rounded-start\r\n                        border-end\r\n                        p-0\r\n                        sds-fw-400\"\r\n                    [disabled]=\"disabled\"\r\n                    [style.width]=\"dateRangeDefinitionsWidth\"\r\n                    (click)=\"toggleDateRangeSelectorVisibility()\"\r\n                >\r\n                    <div class=\"d-flex align-items-center\">\r\n                        <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n                            {{selectedDateRange.name}}\r\n                        </div>\r\n                        <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n                        [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n                            <span class=\"dropdown-toggle\"></span>\r\n                        </button>\r\n                    </div>\r\n\r\n                </button>\r\n\r\n                <dx-popover\r\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                    [id]=\"elementUUID + '_predefined_periods_dropdown'\"\r\n                    target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                    position=\"bottom\"\r\n                    [(visible)]=\"showPredefinedOptionsSelector\"\r\n                    [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\r\n                    [minWidth]=\"dateRangeDefinitionsWidth\"\r\n\r\n                >\r\n                    <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\r\n                        <div *ngFor=\"let range of dateRanges\">\r\n                            <div\r\n                                role=\"button\"\r\n                                tabindex=\"0\"\r\n                                class=\"predefined-date-range px-3 py-2 w-100\"\r\n                                [class.selected]=\"range === selectedDateRange\"\r\n                                (click)=\"changDateRange(range)\"\r\n                                (keydown)=\"onRangeKeyReleased($event, range)\"\r\n                            >\r\n                            {{range.name}}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </dx-popover>\r\n            </div>\r\n        </ng-container>\r\n\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n            [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n            [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"previousPeriodAriaLabel\"\r\n            [disabled]=\"isMinimumLimit || disabled || previousButtonDisabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            #selectedDateRangeButton\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\r\n            [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n            [class.border-end] = \"!showPreviousAndNextButtons\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker = !showDatepicker\"\r\n        >\r\n\r\n            <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n            <div *ngIf=\"!useCustomDisplayContent\"\r\n                class=\"d-flex justify-content-center align-items-center\">\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeName}}</span>\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"nextPeriodAriaLabel\"\r\n            [disabled]=\"isMaximumLimit || disabled || nextButtonDisabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <div class=\"sds-print-only h-100\">\r\n\r\n        <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n        <div *ngIf=\"!useCustomDisplayContent\"\r\n            class=\"d-flex justify-content-center align-items-center\">\r\n            <!-- <div class=\"mx-1\">\r\n                <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n            </div> -->\r\n            <div class=\"mx-1 text-truncate\">\r\n                <span>{{selectedDateRangeTextSegment1}}</span>\r\n                <fa-icon\r\n                    *ngIf=\"selectedDateRangeTextSegment2\"\r\n                    class=\"mx-2\"\r\n                    [icon]=\"toIcon\"\r\n                    size=\"sm\"\r\n                ></fa-icon>\r\n                <span>{{selectedDateRangeTextSegment2}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n<dx-popover\r\n    target=\"#pickerDropdown{{ randomIdReference }}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDatepicker\"\r\n    (onHiding)=\"onHiddenCalendarPopover()\"\r\n    (onShowing)=\"onShowingCalendarPopover()\"\r\n    class=\"m-0 p-0\"\r\n    [wrapperAttr]=\"{\r\n        class: 'sds-datepicker-popover sds-dx-popup-no-arrow ' + dropdownWrapperClass,\r\n        id: dropdownWrapperId\r\n    }\"\r\n>\r\n    <dxo-animation>\r\n        <dxo-show\r\n            type=\"pop\"\r\n            [from]=\"{ scale: 0.9 }\"\r\n            [to]=\"{ scale: 1 }\"\r\n        ></dxo-show>\r\n        <dxo-hide\r\n            type=\"fade\"\r\n            [from]=\"1\"\r\n            [to]=\"0\"\r\n        ></dxo-hide>\r\n    </dxo-animation>\r\n    <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n        <dx-scroll-view>\r\n            <div class=\"d-flex flex-row\">\r\n\r\n                <div\r\n                    *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n                    class=\"compact-mode-date-ranges-container d-flex flex-column p-3 bg-gray-100\"\r\n                    style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n                    >\r\n                    <div\r\n                        *ngIf=\"translations.presets\" class=\"px-3 py-2\">\r\n                        <label>{{ translations.presets }}</label>\r\n                    </div>\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <div\r\n                            class=\"predefined-date-range px-3 py-2 w-100\"\r\n                            [class.selected]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        >\r\n                        {{range.name}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                [displayFormat]=\"dateInputDisplayFormat\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [value]=\"selectedDateStart\"\r\n                                (onValueChanged)=\"onStartDateChange($event)\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                [displayFormat]=\"dateInputDisplayFormat\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [value]=\"selectedDateEnd\"\r\n                                (onValueChanged)=\"onEndDateChange($event)\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\r\n                        <div\r\n                            *ngIf=\"this.selectionKind == 'single'\"\r\n                            id=\"date-inputs\"\r\n                            class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\r\n                        >\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <dx-date-box\r\n                                    #singleDatePickerBox\r\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                    [class.activeInput]=\"true\"\r\n                                    [showClearButton]=\"false\"\r\n                                    [showDropDownButton]=\"false\"\r\n                                    [useMaskBehavior]=\"true\"\r\n                                    [displayFormat]=\"dateInputDisplayFormat\"\r\n                                    type=\"date\"\r\n                                    [min]=\"minDate || minDateDefault\"\r\n                                    [max]=\"maxDate || maxDateDefault\"\r\n                                    [isValid]=\"isValid\"\r\n                                    [validationError]=\"validationError\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [(value)]=\"selectedDateInternal\"\r\n                                >\r\n                                </dx-date-box>\r\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div\r\n                            class=\"d-flex justify-content-center align-items-center\"\r\n                            (click)=\"selectEndDate($event)\">\r\n\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"isDateDisabled\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                                (onValueChanged)=\"onDateChange($event)\"\r\n                                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                            >\r\n                                <div\r\n                                    *dxTemplate=\"let cellData of 'cell'\"\r\n                                    [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                                    [style.line-height.px]=\"23\"\r\n\r\n                                >\r\n\r\n                                <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\r\n                                    <ng-template #thenLockBlock>\r\n                                        <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\"  class=\"locked-day position-absolute-x\"></fa-icon>\r\n                                    </ng-template>\r\n                                    <ng-template #elseDefaultBlock>\r\n                                        {{ cellData.text }}\r\n                                    </ng-template>\r\n                                </div>\r\n                            </dx-calendar>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\r\n                    >\r\n                        <button\r\n                            class=\"sds-btn-secondary sds-fw-400\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\r\n                        <button\r\n                            class=\"sds-btn-primary ms-1 sds-fw-400\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </div>\r\n</dx-popover>\r\n<!-- </div> -->\r\n\r\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content .compact-mode-date-ranges-container{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: DxPopoverModule }, { kind: "component", type: i3.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "deferRendering", "disabled", "enableBodyScroll", "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", "deferRenderingChange", "disabledChange", "enableBodyScrollChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i4.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i4.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i4.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "directive", type: i5.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "ngmodule", type: DxTemplateModule }, { kind: "ngmodule", type: DxoAnimationModule }, { kind: "ngmodule", type: DxoShowModule }, { kind: "ngmodule", type: DxoHideModule }, { kind: "ngmodule", type: DxoPositionModule }, { kind: "ngmodule", type: DxScrollViewModule }, { kind: "component", type: i6.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "ngmodule", type: DxDateBoxModule }, { kind: "component", type: i7.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", "isDirty", "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", "isDirtyChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "ngmodule", type: DxCalendarModule }, { kind: "component", type: i7.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isDirty", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "selectionMode", "selectWeekOnClick", "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", "isDirtyChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "selectionModeChange", "selectWeekOnClickChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }, { kind: "pipe", type: SdsDateComparePipe, name: "sdsDateCompare" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
             type: Component,
@@ -934,7 +934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                         DxScrollViewModule,
                         DxDateBoxModule,
                         DxCalendarModule,
-                    ], template: "<!-- <div id=\"datepickerbuttons\"> -->\n    <div\n        class=\"datepicker d-inline-flex bg-white sds-no-print\"\n        role=\"group\"\n        [attr.aria-label]=\"componentAriaLabel\"\n        [style.width]=\"width\"\n    >\n\n        <ng-container *ngIf=\"style == 'classic'\">\n            <div\n                class=\"btn-group\"\n                role=\"group\"\n            >\n                <button\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n                    id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n                    type=\"button\"\n                    class=\"\n                        btn btn-white\n                        border\n                        rounded-start\n                        border-end\n                        p-0\n                        sds-fw-400\"\n                    [disabled]=\"disabled\"\n                    [style.width]=\"dateRangeDefinitionsWidth\"\n                    (click)=\"toggleDateRangeSelectorVisibility()\"\n                >\n                    <div class=\"d-flex align-items-center\">\n                        <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\n                            {{selectedDateRange.name}}\n                        </div>\n                        <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\n                        [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\n                            <span class=\"dropdown-toggle\"></span>\n                        </button>\n                    </div>\n\n                </button>\n\n                <dx-popover\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\n                    [id]=\"elementUUID + '_predefined_periods_dropdown'\"\n                    target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\n                    position=\"bottom\"\n                    [(visible)]=\"showPredefinedOptionsSelector\"\n                    [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\n                    [minWidth]=\"dateRangeDefinitionsWidth\"\n\n                >\n                    <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\n                        <div *ngFor=\"let range of dateRanges\">\n                            <div\n                                role=\"button\"\n                                tabindex=\"0\"\n                                class=\"predefined-date-range px-3 py-2 w-100\"\n                                [class.selected]=\"range === selectedDateRange\"\n                                (click)=\"changDateRange(range)\"\n                                (keydown)=\"onRangeKeyReleased($event, range)\"\n                            >\n                            {{range.name}}\n                            </div>\n                        </div>\n                    </div>\n                </dx-popover>\n            </div>\n        </ng-container>\n\n\n        <button\n            *ngIf=\"showPreviousAndNextButtons\"\n            class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\n            [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\n            [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\n            type=\"button\"\n            [attr.aria-label]=\"previousPeriodAriaLabel\"\n            [disabled]=\"isMinimumLimit || disabled || previousButtonDisabled\"\n            (click)=\"goToPreviousDate()\"\n        >\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\n\n        </button>\n\n        <button\n            #selectedDateRangeButton\n            id=\"pickerDropdown{{ randomIdReference }}\"\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\n            [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n            [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\n            [class.rounded-end] = \"!showPreviousAndNextButtons\"\n            [class.border-end] = \"!showPreviousAndNextButtons\"\n            [disabled]=\"disabled\"\n            type=\"button\"\n            (click)=\"showDatepicker = !showDatepicker\"\n        >\n\n            <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n            <div *ngIf=\"!useCustomDisplayContent\"\n                class=\"d-flex justify-content-center align-items-center\">\n                <!-- <div class=\"mx-1\">\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n                </div> -->\n                <div class=\"mx-1 text-truncate\">\n                    <span>{{selectedDateRangeName}}</span>\n                    <span>{{selectedDateRangeTextSegment1}}</span>\n                    <fa-icon\n                        *ngIf=\"selectedDateRangeTextSegment2\"\n                        class=\"mx-2\"\n                        [icon]=\"toIcon\"\n                        size=\"sm\"\n                    ></fa-icon>\n                    <span>{{selectedDateRangeTextSegment2}}</span>\n                </div>\n            </div>\n        </button>\n\n        <button\n            *ngIf=\"showPreviousAndNextButtons\"\n            class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\n            type=\"button\"\n            [attr.aria-label]=\"nextPeriodAriaLabel\"\n            [disabled]=\"isMaximumLimit || disabled || nextButtonDisabled\"\n            (click)=\"goToNextDate()\"\n        >\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\n        </button>\n    </div>\n\n    <div class=\"sds-print-only h-100\">\n\n        <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\n        <div *ngIf=\"!useCustomDisplayContent\"\n            class=\"d-flex justify-content-center align-items-center\">\n            <!-- <div class=\"mx-1\">\n                <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\n            </div> -->\n            <div class=\"mx-1 text-truncate\">\n                <span>{{selectedDateRangeTextSegment1}}</span>\n                <fa-icon\n                    *ngIf=\"selectedDateRangeTextSegment2\"\n                    class=\"mx-2\"\n                    [icon]=\"toIcon\"\n                    size=\"sm\"\n                ></fa-icon>\n                <span>{{selectedDateRangeTextSegment2}}</span>\n            </div>\n        </div>\n    </div>\n\n<dx-popover\n    target=\"#pickerDropdown{{ randomIdReference }}\"\n    position=\"bottom\"\n    [(visible)]=\"showDatepicker\"\n    (onHiding)=\"onHiddenCalendarPopover()\"\n    (onShowing)=\"onShowingCalendarPopover()\"\n    class=\"m-0 p-0\"\n    [wrapperAttr]=\"{\n        class: 'sds-datepicker-popover sds-dx-popup-no-arrow ' + dropdownWrapperClass,\n        id: dropdownWrapperId\n    }\"\n>\n    <dxo-animation>\n        <dxo-show\n            type=\"pop\"\n            [from]=\"{ scale: 0.9 }\"\n            [to]=\"{ scale: 1 }\"\n        ></dxo-show>\n        <dxo-hide\n            type=\"fade\"\n            [from]=\"1\"\n            [to]=\"0\"\n        ></dxo-hide>\n    </dxo-animation>\n    <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\n        <dx-scroll-view>\n            <div class=\"d-flex flex-row\">\n\n                <div\n                    *ngIf=\"style == 'compact' && dateRanges.length > 1\"\n                    class=\"compact-mode-date-ranges-container d-flex flex-column p-3 bg-gray-100\"\n                    style=\"border-right: 1px solid var(--bs-gray-200)\"\n                    >\n                    <div\n                        *ngIf=\"translations.presets\" class=\"px-3 py-2\">\n                        <label>{{ translations.presets }}</label>\n                    </div>\n                    <div *ngFor=\"let range of dateRanges\">\n                        <div\n                            class=\"predefined-date-range px-3 py-2 w-100\"\n                            [class.selected]=\"range === selectedDateRange\"\n                            (click)=\"changDateRange(range)\"\n                        >\n                        {{range.name}}\n                        </div>\n                    </div>\n                </div>\n\n\n                <div id=\"datepickercomponent\">\n                    <div\n                        *ngIf=\"this.selectionKind == 'period'\"\n                        id=\"date-inputs\"\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\n                    >\n                        <div class=\"d-flex justify-content-between align-items-center\">\n                            <dx-date-box\n                                #selectedDateStartBox\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\n                                [class.activeInput]=\"selectedDateFocus\"\n                                [showClearButton]=\"false\"\n                                [showDropDownButton]=\"false\"\n                                [useMaskBehavior]=\"true\"\n                                [displayFormat]=\"dateInputDisplayFormat\"\n                                type=\"date\"\n                                [min]=\"minDate || minDateDefault\"\n                                [max]=\"maxDate || maxDateDefault\"\n                                [isValid]=\"isValid\"\n                                [validationError]=\"validationError\"\n                                [disabled]=\"disabled\"\n                                [value]=\"selectedDateStart\"\n                                (onValueChanged)=\"onStartDateChange($event)\"\n                                (onFocusIn)=\"onStartDateFocus()\"\n                            >\n                            </dx-date-box>\n                        </div>\n\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\n                        </div>\n\n                        <div class=\"d-flex justify-content-center align-items-center\">\n                            <dx-date-box\n                                #selectedDateEndBox\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\n                                [class.activeInput]=\"!selectedDateFocus\"\n                                [showClearButton]=\"false\"\n                                [showDropDownButton]=\"false\"\n                                [useMaskBehavior]=\"true\"\n                                [displayFormat]=\"dateInputDisplayFormat\"\n                                type=\"date\"\n                                [min]=\"minDate || minDateDefault\"\n                                [max]=\"maxDate || maxDateDefault\"\n                                [isValid]=\"isValid\"\n                                [validationError]=\"validationError\"\n                                [disabled]=\"disabled\"\n                                [value]=\"selectedDateEnd\"\n                                (onValueChanged)=\"onEndDateChange($event)\"\n                                (onFocusIn)=\"onEndDateFocus()\"\n                            >\n                            </dx-date-box>\n                        </div>\n                    </div>\n\n                    <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\n                        <div\n                            *ngIf=\"this.selectionKind == 'single'\"\n                            id=\"date-inputs\"\n                            class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\n                        >\n                            <div class=\"d-flex justify-content-center align-items-center\">\n                                <dx-date-box\n                                    #singleDatePickerBox\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\n                                    [class.activeInput]=\"true\"\n                                    [showClearButton]=\"false\"\n                                    [showDropDownButton]=\"false\"\n                                    [useMaskBehavior]=\"true\"\n                                    [displayFormat]=\"dateInputDisplayFormat\"\n                                    type=\"date\"\n                                    [min]=\"minDate || minDateDefault\"\n                                    [max]=\"maxDate || maxDateDefault\"\n                                    [isValid]=\"isValid\"\n                                    [validationError]=\"validationError\"\n                                    [disabled]=\"disabled\"\n                                    [(value)]=\"selectedDateInternal\"\n                                >\n                                </dx-date-box>\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\n                            </div>\n                        </div>\n\n                        <div\n                            class=\"d-flex justify-content-center align-items-center\"\n                            (click)=\"selectEndDate($event)\">\n\n                            <dx-calendar\n                                #calendar\n                                [min]=\"minDate || minDateDefault\"\n                                [max]=\"maxDate || maxDateDefault\"\n                                [disabledDates]=\"isDateDisabled\"\n                                [isValid]=\"isValid\"\n                                [validationError]=\"validationError\"\n                                [disabled]=\"disabled\"\n                                [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\n                                (onValueChanged)=\"onDateChange($event)\"\n                                [firstDayOfWeek]=\"firstDayOfWeek\"\n                            >\n                                <div\n                                    *dxTemplate=\"let cellData of 'cell'\"\n                                    [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\n                                    [style.line-height.px]=\"23\"\n\n                                >\n\n                                <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\n                                    <ng-template #thenLockBlock>\n                                        <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\"  class=\"locked-day position-absolute-x\"></fa-icon>\n                                    </ng-template>\n                                    <ng-template #elseDefaultBlock>\n                                        {{ cellData.text }}\n                                    </ng-template>\n                                </div>\n                            </dx-calendar>\n                        </div>\n                    </div>\n\n                    <div\n                        *ngIf=\"this.selectionKind == 'period'\"\n                        class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\n                    >\n                        <button\n                            class=\"sds-btn-secondary sds-fw-400\"\n                            [disabled]=\"disabled\"\n                            (click)=\"showDatepicker = false\"\n                            type=\"button\"\n                        >\n                            {{ translations.cancel}}\n                        </button>\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\n                        <button\n                            class=\"sds-btn-primary ms-1 sds-fw-400\"\n                            [disabled]=\"disabled\"\n                            (click)=\"applyPeriodPicker()\"\n                            type=\"button\"\n                        >\n                            {{ translations.apply}}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </dx-scroll-view>\n    </div>\n</dx-popover>\n<!-- </div> -->\n\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content .compact-mode-date-ranges-container{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"] }]
+                    ], template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n    <div\r\n        class=\"datepicker d-inline-flex bg-white sds-no-print\"\r\n        role=\"group\"\r\n        [attr.aria-label]=\"componentAriaLabel\"\r\n        [style.width]=\"width\"\r\n    >\r\n\r\n        <ng-container *ngIf=\"style == 'classic'\">\r\n            <div\r\n                class=\"btn-group\"\r\n                role=\"group\"\r\n            >\r\n                <button\r\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                    id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                    type=\"button\"\r\n                    class=\"\r\n                        btn btn-white\r\n                        border\r\n                        rounded-start\r\n                        border-end\r\n                        p-0\r\n                        sds-fw-400\"\r\n                    [disabled]=\"disabled\"\r\n                    [style.width]=\"dateRangeDefinitionsWidth\"\r\n                    (click)=\"toggleDateRangeSelectorVisibility()\"\r\n                >\r\n                    <div class=\"d-flex align-items-center\">\r\n                        <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n                            {{selectedDateRange.name}}\r\n                        </div>\r\n                        <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n                        [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n                            <span class=\"dropdown-toggle\"></span>\r\n                        </button>\r\n                    </div>\r\n\r\n                </button>\r\n\r\n                <dx-popover\r\n                    *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n                    [id]=\"elementUUID + '_predefined_periods_dropdown'\"\r\n                    target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n                    position=\"bottom\"\r\n                    [(visible)]=\"showPredefinedOptionsSelector\"\r\n                    [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\r\n                    [minWidth]=\"dateRangeDefinitionsWidth\"\r\n\r\n                >\r\n                    <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\r\n                        <div *ngFor=\"let range of dateRanges\">\r\n                            <div\r\n                                role=\"button\"\r\n                                tabindex=\"0\"\r\n                                class=\"predefined-date-range px-3 py-2 w-100\"\r\n                                [class.selected]=\"range === selectedDateRange\"\r\n                                (click)=\"changDateRange(range)\"\r\n                                (keydown)=\"onRangeKeyReleased($event, range)\"\r\n                            >\r\n                            {{range.name}}\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </dx-popover>\r\n            </div>\r\n        </ng-container>\r\n\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n            [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n            [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"previousPeriodAriaLabel\"\r\n            [disabled]=\"isMinimumLimit || disabled || previousButtonDisabled\"\r\n            (click)=\"goToPreviousDate()\"\r\n        >\r\n            <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n        </button>\r\n\r\n        <button\r\n            #selectedDateRangeButton\r\n            id=\"pickerDropdown{{ randomIdReference }}\"\r\n            class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\r\n            [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n            [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n            [class.border-end] = \"!showPreviousAndNextButtons\"\r\n            [disabled]=\"disabled\"\r\n            type=\"button\"\r\n            (click)=\"showDatepicker = !showDatepicker\"\r\n        >\r\n\r\n            <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n            <div *ngIf=\"!useCustomDisplayContent\"\r\n                class=\"d-flex justify-content-center align-items-center\">\r\n                <!-- <div class=\"mx-1\">\r\n                    <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n                </div> -->\r\n                <div class=\"mx-1 text-truncate\">\r\n                    <span>{{selectedDateRangeName}}</span>\r\n                    <span>{{selectedDateRangeTextSegment1}}</span>\r\n                    <fa-icon\r\n                        *ngIf=\"selectedDateRangeTextSegment2\"\r\n                        class=\"mx-2\"\r\n                        [icon]=\"toIcon\"\r\n                        size=\"sm\"\r\n                    ></fa-icon>\r\n                    <span>{{selectedDateRangeTextSegment2}}</span>\r\n                </div>\r\n            </div>\r\n        </button>\r\n\r\n        <button\r\n            *ngIf=\"showPreviousAndNextButtons\"\r\n            class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\r\n            type=\"button\"\r\n            [attr.aria-label]=\"nextPeriodAriaLabel\"\r\n            [disabled]=\"isMaximumLimit || disabled || nextButtonDisabled\"\r\n            (click)=\"goToNextDate()\"\r\n        >\r\n            <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n        </button>\r\n    </div>\r\n\r\n    <div class=\"sds-print-only h-100\">\r\n\r\n        <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n        <div *ngIf=\"!useCustomDisplayContent\"\r\n            class=\"d-flex justify-content-center align-items-center\">\r\n            <!-- <div class=\"mx-1\">\r\n                <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n            </div> -->\r\n            <div class=\"mx-1 text-truncate\">\r\n                <span>{{selectedDateRangeTextSegment1}}</span>\r\n                <fa-icon\r\n                    *ngIf=\"selectedDateRangeTextSegment2\"\r\n                    class=\"mx-2\"\r\n                    [icon]=\"toIcon\"\r\n                    size=\"sm\"\r\n                ></fa-icon>\r\n                <span>{{selectedDateRangeTextSegment2}}</span>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n<dx-popover\r\n    target=\"#pickerDropdown{{ randomIdReference }}\"\r\n    position=\"bottom\"\r\n    [(visible)]=\"showDatepicker\"\r\n    (onHiding)=\"onHiddenCalendarPopover()\"\r\n    (onShowing)=\"onShowingCalendarPopover()\"\r\n    class=\"m-0 p-0\"\r\n    [wrapperAttr]=\"{\r\n        class: 'sds-datepicker-popover sds-dx-popup-no-arrow ' + dropdownWrapperClass,\r\n        id: dropdownWrapperId\r\n    }\"\r\n>\r\n    <dxo-animation>\r\n        <dxo-show\r\n            type=\"pop\"\r\n            [from]=\"{ scale: 0.9 }\"\r\n            [to]=\"{ scale: 1 }\"\r\n        ></dxo-show>\r\n        <dxo-hide\r\n            type=\"fade\"\r\n            [from]=\"1\"\r\n            [to]=\"0\"\r\n        ></dxo-hide>\r\n    </dxo-animation>\r\n    <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n        <dx-scroll-view>\r\n            <div class=\"d-flex flex-row\">\r\n\r\n                <div\r\n                    *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n                    class=\"compact-mode-date-ranges-container d-flex flex-column p-3 bg-gray-100\"\r\n                    style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n                    >\r\n                    <div\r\n                        *ngIf=\"translations.presets\" class=\"px-3 py-2\">\r\n                        <label>{{ translations.presets }}</label>\r\n                    </div>\r\n                    <div *ngFor=\"let range of dateRanges\">\r\n                        <div\r\n                            class=\"predefined-date-range px-3 py-2 w-100\"\r\n                            [class.selected]=\"range === selectedDateRange\"\r\n                            (click)=\"changDateRange(range)\"\r\n                        >\r\n                        {{range.name}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div id=\"datepickercomponent\">\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        id=\"date-inputs\"\r\n                        class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\r\n                    >\r\n                        <div class=\"d-flex justify-content-between align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateStartBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                [displayFormat]=\"dateInputDisplayFormat\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [value]=\"selectedDateStart\"\r\n                                (onValueChanged)=\"onStartDateChange($event)\"\r\n                                (onFocusIn)=\"onStartDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n                            <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n                        </div>\r\n\r\n                        <div class=\"d-flex justify-content-center align-items-center\">\r\n                            <dx-date-box\r\n                                #selectedDateEndBox\r\n                                class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n                                [class.activeInput]=\"!selectedDateFocus\"\r\n                                [showClearButton]=\"false\"\r\n                                [showDropDownButton]=\"false\"\r\n                                [useMaskBehavior]=\"true\"\r\n                                [displayFormat]=\"dateInputDisplayFormat\"\r\n                                type=\"date\"\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [value]=\"selectedDateEnd\"\r\n                                (onValueChanged)=\"onEndDateChange($event)\"\r\n                                (onFocusIn)=\"onEndDateFocus()\"\r\n                            >\r\n                            </dx-date-box>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\r\n                        <div\r\n                            *ngIf=\"this.selectionKind == 'single'\"\r\n                            id=\"date-inputs\"\r\n                            class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\r\n                        >\r\n                            <div class=\"d-flex justify-content-center align-items-center\">\r\n                                <dx-date-box\r\n                                    #singleDatePickerBox\r\n                                    class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n                                    [class.activeInput]=\"true\"\r\n                                    [showClearButton]=\"false\"\r\n                                    [showDropDownButton]=\"false\"\r\n                                    [useMaskBehavior]=\"true\"\r\n                                    [displayFormat]=\"dateInputDisplayFormat\"\r\n                                    type=\"date\"\r\n                                    [min]=\"minDate || minDateDefault\"\r\n                                    [max]=\"maxDate || maxDateDefault\"\r\n                                    [isValid]=\"isValid\"\r\n                                    [validationError]=\"validationError\"\r\n                                    [disabled]=\"disabled\"\r\n                                    [(value)]=\"selectedDateInternal\"\r\n                                >\r\n                                </dx-date-box>\r\n                                <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div\r\n                            class=\"d-flex justify-content-center align-items-center\"\r\n                            (click)=\"selectEndDate($event)\">\r\n\r\n                            <dx-calendar\r\n                                #calendar\r\n                                [min]=\"minDate || minDateDefault\"\r\n                                [max]=\"maxDate || maxDateDefault\"\r\n                                [disabledDates]=\"isDateDisabled\"\r\n                                [isValid]=\"isValid\"\r\n                                [validationError]=\"validationError\"\r\n                                [disabled]=\"disabled\"\r\n                                [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n                                (onValueChanged)=\"onDateChange($event)\"\r\n                                [firstDayOfWeek]=\"firstDayOfWeek\"\r\n                            >\r\n                                <div\r\n                                    *dxTemplate=\"let cellData of 'cell'\"\r\n                                    [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n                                    [style.line-height.px]=\"23\"\r\n\r\n                                >\r\n\r\n                                <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\r\n                                    <ng-template #thenLockBlock>\r\n                                        <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\"  class=\"locked-day position-absolute-x\"></fa-icon>\r\n                                    </ng-template>\r\n                                    <ng-template #elseDefaultBlock>\r\n                                        {{ cellData.text }}\r\n                                    </ng-template>\r\n                                </div>\r\n                            </dx-calendar>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <div\r\n                        *ngIf=\"this.selectionKind == 'period'\"\r\n                        class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\r\n                    >\r\n                        <button\r\n                            class=\"sds-btn-secondary sds-fw-400\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"showDatepicker = false\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.cancel}}\r\n                        </button>\r\n                        <!-- (click)=\"closeDatepickerPopup()\" -->\r\n                        <button\r\n                            class=\"sds-btn-primary ms-1 sds-fw-400\"\r\n                            [disabled]=\"disabled\"\r\n                            (click)=\"applyPeriodPicker()\"\r\n                            type=\"button\"\r\n                        >\r\n                            {{ translations.apply}}\r\n                        </button>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </dx-scroll-view>\r\n    </div>\r\n</dx-popover>\r\n<!-- </div> -->\r\n\r\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content .compact-mode-date-ranges-container{border-top-left-radius:6px;border-bottom-left-radius:6px}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }], propDecorators: { displayContent: [{
                 type: ContentChild,
                 args: ['display']