npm - @spicainternational/ngx-sds-components - Versions diffs - 5.20.0 → 5.21.0 - Mend

@spicainternational/ngx-sds-components 5.20.0 → 5.21.0

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

Files changed (18) hide show

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

@@ -17,10 +17,10 @@ class SdsTooltipComponent {
     ngOnInit() { }
 }
 SdsTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SdsTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsTooltipComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"sds-tooltip\"\r\n    [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme, tooltipClass]\"\r\n    [class.sds-tooltip-visible]=\"visible\"\r\n    [style.left.px]=\"left\"\r\n    [style.top.px]=\"top\"\r\n    >\r\n    <fa-icon class=\"sds-tooltip-icon\"\r\n        *ngIf=\"tooltipIcon\" \r\n        [icon]=\"tooltipIcon\">\r\n    </fa-icon>\r\n\r\n    <small class=\"sds-tooltip-text\">\r\n        {{ tooltip }}\r\n    </small>\r\n\r\n</div>\r\n", styles: [".sds-tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;max-width:15rem;z-index:1070;opacity:0}.sds-tooltip fa-icon{margin-right:.25rem}.sds-tooltip:before{content:\"\";width:0;height:0;position:absolute}.sds-tooltip-visible{opacity:1;transition:opacity .3s}.sds-tooltip-light{background-color:#e9ecef;color:#000}.sds-tooltip-light:before{border:5px solid #E9ECEF}.sds-tooltip-dark{background-color:#000;color:#fff}.sds-tooltip-dark:before{border:5px solid black}.sds-tooltip-danger{background-color:#cc5252;color:#fff}.sds-tooltip-danger:before{border:5px solid #cc5252}.sds-tooltip-success{background-color:#29ba60;color:#fff}.sds-tooltip-success:before{border:5px solid #29ba60}.sds-tooltip-warning{background-color:#ffc107;color:#212529}.sds-tooltip-warning:before{border:5px solid #ffc107}.sds-tooltip-info{background-color:#56ace0;color:#fff}.sds-tooltip-info:before{border:5px solid #56ace0}.sds-tooltip-below{transform:translate(-50%);margin-top:.5rem}.sds-tooltip-below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-4px}.sds-tooltip-above{transform:translate(-50%,calc(-100% - .5rem));margin-bottom:.5rem}.sds-tooltip-above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-4px}.sds-tooltip-left{transform:translate(calc(-100% - .5rem),-50%)}.sds-tooltip-left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-4px;top:calc(50% - 5px)}.sds-tooltip-right{transform:translateY(-50%);margin-left:.5rem}.sds-tooltip-right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-4px;top:calc(50% - 5px)}.sds-tooltip-dynamic{margin-left:20px}.sds-tooltip-dynamic:before{display:none}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+SdsTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SdsTooltipComponent, selector: "ng-component", ngImport: i0, template: "<div class=\"sds-tooltip\"\r\n    [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme, tooltipClass]\"\r\n    [class.sds-tooltip-visible]=\"visible\"\r\n    [style.left.px]=\"left\"\r\n    [style.top.px]=\"top\"\r\n    >\r\n    <fa-icon class=\"sds-tooltip-icon\"\r\n        *ngIf=\"tooltipIcon\" \r\n        [icon]=\"tooltipIcon\">\r\n    </fa-icon>\r\n\r\n    <small class=\"sds-tooltip-text\">\r\n        {{ tooltip }}\r\n    </small>\r\n\r\n</div>\r\n", styles: [".sds-tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;max-width:15rem;z-index:1070;opacity:0}.sds-tooltip fa-icon{margin-right:.25rem}.sds-tooltip-visible{opacity:1;transition:opacity .3s}.sds-tooltip-light{background-color:#e9ecef;color:#000}.sds-tooltip-dark{background-color:#000;color:#fff}.sds-tooltip-danger{background-color:#cc5252;color:#fff}.sds-tooltip-success{background-color:#29ba60;color:#fff}.sds-tooltip-warning{background-color:#ffc107;color:#212529}.sds-tooltip-info{background-color:#56ace0;color:#fff}.sds-tooltip-classic{background-color:#fff;color:#000;border:1px solid gray}.sds-tooltip-below{transform:translate(-50%);margin-top:.5rem}.sds-tooltip-above{transform:translate(-50%,calc(-100% - .5rem));margin-bottom:.5rem}.sds-tooltip-left{transform:translate(calc(-100% - .5rem),-50%)}.sds-tooltip-right{transform:translateY(-50%);margin-left:.5rem}.sds-tooltip-dynamic{margin-left:20px}\n"], components: [{ type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsTooltipComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div class=\"sds-tooltip\"\r\n    [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme, tooltipClass]\"\r\n    [class.sds-tooltip-visible]=\"visible\"\r\n    [style.left.px]=\"left\"\r\n    [style.top.px]=\"top\"\r\n    >\r\n    <fa-icon class=\"sds-tooltip-icon\"\r\n        *ngIf=\"tooltipIcon\" \r\n        [icon]=\"tooltipIcon\">\r\n    </fa-icon>\r\n\r\n    <small class=\"sds-tooltip-text\">\r\n        {{ tooltip }}\r\n    </small>\r\n\r\n</div>\r\n", styles: [".sds-tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;max-width:15rem;z-index:1070;opacity:0}.sds-tooltip fa-icon{margin-right:.25rem}.sds-tooltip:before{content:\"\";width:0;height:0;position:absolute}.sds-tooltip-visible{opacity:1;transition:opacity .3s}.sds-tooltip-light{background-color:#e9ecef;color:#000}.sds-tooltip-light:before{border:5px solid #E9ECEF}.sds-tooltip-dark{background-color:#000;color:#fff}.sds-tooltip-dark:before{border:5px solid black}.sds-tooltip-danger{background-color:#cc5252;color:#fff}.sds-tooltip-danger:before{border:5px solid #cc5252}.sds-tooltip-success{background-color:#29ba60;color:#fff}.sds-tooltip-success:before{border:5px solid #29ba60}.sds-tooltip-warning{background-color:#ffc107;color:#212529}.sds-tooltip-warning:before{border:5px solid #ffc107}.sds-tooltip-info{background-color:#56ace0;color:#fff}.sds-tooltip-info:before{border:5px solid #56ace0}.sds-tooltip-below{transform:translate(-50%);margin-top:.5rem}.sds-tooltip-below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-4px}.sds-tooltip-above{transform:translate(-50%,calc(-100% - .5rem));margin-bottom:.5rem}.sds-tooltip-above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-4px}.sds-tooltip-left{transform:translate(calc(-100% - .5rem),-50%)}.sds-tooltip-left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-4px;top:calc(50% - 5px)}.sds-tooltip-right{transform:translateY(-50%);margin-left:.5rem}.sds-tooltip-right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-4px;top:calc(50% - 5px)}.sds-tooltip-dynamic{margin-left:20px}.sds-tooltip-dynamic:before{display:none}\n"] }]
+            args: [{ template: "<div class=\"sds-tooltip\"\r\n    [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme, tooltipClass]\"\r\n    [class.sds-tooltip-visible]=\"visible\"\r\n    [style.left.px]=\"left\"\r\n    [style.top.px]=\"top\"\r\n    >\r\n    <fa-icon class=\"sds-tooltip-icon\"\r\n        *ngIf=\"tooltipIcon\" \r\n        [icon]=\"tooltipIcon\">\r\n    </fa-icon>\r\n\r\n    <small class=\"sds-tooltip-text\">\r\n        {{ tooltip }}\r\n    </small>\r\n\r\n</div>\r\n", styles: [".sds-tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;padding:3px 6px;max-width:15rem;z-index:1070;opacity:0}.sds-tooltip fa-icon{margin-right:.25rem}.sds-tooltip-visible{opacity:1;transition:opacity .3s}.sds-tooltip-light{background-color:#e9ecef;color:#000}.sds-tooltip-dark{background-color:#000;color:#fff}.sds-tooltip-danger{background-color:#cc5252;color:#fff}.sds-tooltip-success{background-color:#29ba60;color:#fff}.sds-tooltip-warning{background-color:#ffc107;color:#212529}.sds-tooltip-info{background-color:#56ace0;color:#fff}.sds-tooltip-classic{background-color:#fff;color:#000;border:1px solid gray}.sds-tooltip-below{transform:translate(-50%);margin-top:.5rem}.sds-tooltip-above{transform:translate(-50%,calc(-100% - .5rem));margin-bottom:.5rem}.sds-tooltip-left{transform:translate(calc(-100% - .5rem),-50%)}.sds-tooltip-right{transform:translateY(-50%);margin-left:.5rem}.sds-tooltip-dynamic{margin-left:20px}\n"] }]
         }], ctorParameters: function () { return []; } });
 class TooltipDirective {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-tooltip.mjs","sources":["../../../projects/ngx-sds-components/src/lib/tooltip/components/tooltip.component.ts","../../../projects/ngx-sds-components/src/lib/tooltip/components/tooltip.component.html","../../../projects/ngx-sds-components/src/lib/tooltip/tooltip.directive.ts","../../../projects/ngx-sds-components/src/lib/tooltip/tooltip.module.ts","../../../projects/ngx-sds-components/src/lib/tooltip/spicainternational-ngx-sds-components-src-lib-tooltip.ts"],"sourcesContent":["import { Component, OnInit } from '@angular/core';\r\nimport { TooltipPosition, TooltipTheme } from '../tooltip.types';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\n\r\n@Component({\r\n templateUrl: './tooltip.component.html',\r\n styleUrls: ['./tooltip.component.scss'],\r\n})\r\nexport class SdsTooltipComponent implements OnInit {\r\n\r\n public tooltip: string = '';\r\n public left: number = 0;\r\n public top: number = 0;\r\n public visible: boolean = false;\r\n\r\n public tooltipIcon?: IconProp;\r\n public tooltipClass?: string;\r\n\r\n public position: TooltipPosition = 'above';\r\n public theme: TooltipTheme = 'dark';\r\n\r\n\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {}\r\n}\r\n","<div class=\"sds-tooltip\"\r\n [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme, tooltipClass]\"\r\n [class.sds-tooltip-visible]=\"visible\"\r\n [style.left.px]=\"left\"\r\n [style.top.px]=\"top\"\r\n >\r\n <fa-icon class=\"sds-tooltip-icon\"\r\n ngIf=\"tooltipIcon\" \r\n [icon]=\"tooltipIcon\">\r\n </fa-icon>\r\n\r\n <small class=\"sds-tooltip-text\">\r\n {{ tooltip }}\r\n </small>\r\n\r\n</div>\r\n","import {\r\n ApplicationRef,\r\n ComponentFactoryResolver,\r\n ComponentRef,\r\n Directive,\r\n ElementRef,\r\n EmbeddedViewRef,\r\n HostListener,\r\n Injector,\r\n Input,\r\n OnChanges,\r\n Renderer2,\r\n SimpleChanges,\r\n ViewContainerRef,\r\n} from '@angular/core';\r\nimport { SdsTooltipComponent } from './components/tooltip.component';\r\nimport { TooltipPosition, TooltipTheme } from './tooltip.types';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\n\r\n@Directive({\r\n selector: '[sdsTooltip]',\r\n})\r\nexport class TooltipDirective implements OnChanges {\r\n @Input() tooltip = '';\r\n @Input() tooltipClass = '';\r\n @Input() tooltipIcon?: IconProp;\r\n @Input() position: TooltipPosition = 'above';\r\n @Input() theme: TooltipTheme = 'dark';\r\n @Input() showDelay = 0;\r\n @Input() hideDelay = 0;\r\n\r\n private componentRef: ComponentRef<any> \| null = null;\r\n private showTimeout?: number;\r\n private hideTimeout?: number;\r\n private touchTimeout?: number;\r\n\r\n\r\n constructor(\r\n private elementRef: ElementRef,\r\n private appRef: ApplicationRef,\r\n private componentFactoryResolver: ComponentFactoryResolver,\r\n // private viewContainerRef: ViewContainerRef,\r\n private injector: Injector,\r\n // private renderer2: Renderer2\r\n ) {\r\n // this.renderer2.listen('window', 'scroll', (_) => {\r\n // console.log('scroll');\r\n // this.setHideTooltipTimeout();\r\n // });\r\n }\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['tooltip']) {\r\n if (this.componentRef !== null) {\r\n this.componentRef.instance.tooltip = this.tooltip;\r\n } \r\n }\r\n\r\n if (changes['tooltipIcon']) {\r\n if (this.componentRef !== null) {\r\n this.componentRef.instance.tooltipIcon = this.tooltipIcon;\r\n } \r\n } \r\n \r\n if (changes['tooltipClass']) {\r\n if (this.componentRef !== null) {\r\n this.componentRef.instance.tooltipClass = this.tooltipClass;\r\n } \r\n } \r\n }\r\n\r\n @HostListener('mouseenter')\r\n onMouseEnter(): void {\r\n this.initializeTooltip();\r\n }\r\n\r\n @HostListener('mouseleave')\r\n onMouseLeave(): void {\r\n this.setHideTooltipTimeout();\r\n }\r\n\r\n // @HostListener(\"window:scroll\", [])\r\n // onWindowScroll() {\r\n // console.log('scroll');\r\n // this.setHideTooltipTimeout();\r\n // }\r\n\r\n // @HostListener('window:scroll') onScroll(e: Event): void {\r\n // console.log((e.target as Element).scrollTop);\r\n // }\r\n\r\n // @HostListener('scroll') onScrollHost(e: Event): void {\r\n // console.log((e.target as Element).scrollTop);\r\n // }\r\n\r\n @HostListener('mousemove', ['$event'])\r\n onMouseMove($event: MouseEvent): void {\r\n if (this.componentRef !== null && this.position === 'dynamic') {\r\n this.componentRef.instance.left = $event.clientX;\r\n this.componentRef.instance.top = $event.clientY;\r\n this.componentRef.instance.tooltip = this.tooltip;\r\n this.componentRef.instance.tooltipIcon = this.tooltipIcon;\r\n this.componentRef.instance.tooltipClass = this.tooltipClass;\r\n }\r\n }\r\n\r\n @HostListener('touchstart', ['$event'])\r\n onTouchStart($event: TouchEvent): void {\r\n $event.preventDefault();\r\n window.clearTimeout(this.touchTimeout);\r\n this.touchTimeout = window.setTimeout(this.initializeTooltip.bind(this), 500);\r\n }\r\n\r\n @HostListener('touchend')\r\n onTouchEnd(): void {\r\n window.clearTimeout(this.touchTimeout);\r\n this.setHideTooltipTimeout();\r\n }\r\n\r\n private initializeTooltip() {\r\n if (this.componentRef === null) {\r\n window.clearInterval(this.hideDelay);\r\n\r\n if (this.tooltip) {\r\n const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SdsTooltipComponent);\r\n this.componentRef = componentFactory.create(this.injector);\r\n\r\n this.appRef.attachView(this.componentRef.hostView);\r\n const [tooltipDOMElement] = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes;\r\n\r\n this.setTooltipComponentProperties();\r\n\r\n document.body.appendChild(tooltipDOMElement);\r\n this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);\r\n }\r\n }\r\n }\r\n\r\n private setTooltipComponentProperties() {\r\n if (this.componentRef !== null) {\r\n this.componentRef.instance.tooltip = this.tooltip;\r\n this.componentRef.instance.tooltipIcon = this.tooltipIcon;\r\n this.componentRef.instance.tooltipClass = this.tooltipClass;\r\n this.componentRef.instance.position = this.position;\r\n this.componentRef.instance.theme = this.theme;\r\n\r\n const { left, right, top, bottom } = this.elementRef.nativeElement.getBoundingClientRect();\r\n\r\n switch (this.position) {\r\n case 'below': {\r\n this.componentRef.instance.left = Math.round((right - left) / 2 + left);\r\n this.componentRef.instance.top = Math.round(bottom);\r\n break;\r\n }\r\n case 'above': {\r\n this.componentRef.instance.left = Math.round((right - left) / 2 + left);\r\n this.componentRef.instance.top = Math.round(top);\r\n break;\r\n }\r\n case 'right': {\r\n this.componentRef.instance.left = Math.round(right);\r\n this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);\r\n break;\r\n }\r\n case 'left': {\r\n this.componentRef.instance.left = Math.round(left);\r\n this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);\r\n break;\r\n }\r\n default: {\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n private showTooltip() {\r\n if (this.tooltip && this.componentRef !== null) {\r\n this.componentRef.instance.visible = true;\r\n }\r\n }\r\n\r\n private setHideTooltipTimeout() {\r\n this.hideTimeout = window.setTimeout(this.destroy.bind(this), this.hideDelay);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.destroy();\r\n }\r\n\r\n destroy(): void {\r\n if (this.componentRef !== null) {\r\n window.clearInterval(this.showTimeout);\r\n window.clearInterval(this.hideDelay);\r\n this.appRef.detachView(this.componentRef.hostView);\r\n this.componentRef.destroy();\r\n this.componentRef = null;\r\n }\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsTooltipComponent } from '../tooltip/components/tooltip.component';\r\nimport { TooltipDirective } from './tooltip.directive';\r\nimport { TooltipPosition, TooltipTheme } from './tooltip.types';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n\r\n\r\n@NgModule({\r\n declarations: [\r\n SdsTooltipComponent,\r\n TooltipDirective\r\n ],\r\n imports: [\r\n CommonModule,\r\n FontAwesomeModule\r\n ],\r\n exports: [\r\n TooltipDirective\r\n ]\r\n})\r\nexport class SdsTooltipModule { }\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-tooltip.mjs","sources":["../../../projects/ngx-sds-components/src/lib/tooltip/components/tooltip.component.ts","../../../projects/ngx-sds-components/src/lib/tooltip/components/tooltip.component.html","../../../projects/ngx-sds-components/src/lib/tooltip/tooltip.directive.ts","../../../projects/ngx-sds-components/src/lib/tooltip/tooltip.module.ts","../../../projects/ngx-sds-components/src/lib/tooltip/spicainternational-ngx-sds-components-src-lib-tooltip.ts"],"sourcesContent":["import { Component, OnInit } from '@angular/core';\r\nimport { TooltipPosition, TooltipTheme } from '../tooltip.types';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\n\r\n@Component({\r\n templateUrl: './tooltip.component.html',\r\n styleUrls: ['./tooltip.component.scss'],\r\n})\r\nexport class SdsTooltipComponent implements OnInit {\r\n\r\n public tooltip: string = '';\r\n public left: number = 0;\r\n public top: number = 0;\r\n public visible: boolean = false;\r\n\r\n public tooltipIcon?: IconProp;\r\n public tooltipClass?: string;\r\n\r\n public position: TooltipPosition = 'above';\r\n public theme: TooltipTheme = 'dark';\r\n\r\n\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {}\r\n}\r\n","<div class=\"sds-tooltip\"\r\n [ngClass]=\"['sds-tooltip-' + position, 'sds-tooltip-' + theme, tooltipClass]\"\r\n [class.sds-tooltip-visible]=\"visible\"\r\n [style.left.px]=\"left\"\r\n [style.top.px]=\"top\"\r\n >\r\n <fa-icon class=\"sds-tooltip-icon\"\r\n ngIf=\"tooltipIcon\" \r\n [icon]=\"tooltipIcon\">\r\n </fa-icon>\r\n\r\n <small class=\"sds-tooltip-text\">\r\n {{ tooltip }}\r\n </small>\r\n\r\n</div>\r\n","import {\r\n ApplicationRef,\r\n ComponentFactoryResolver,\r\n ComponentRef,\r\n Directive,\r\n ElementRef,\r\n EmbeddedViewRef,\r\n HostListener,\r\n Injector,\r\n Input,\r\n OnChanges,\r\n Renderer2,\r\n SimpleChanges,\r\n ViewContainerRef,\r\n} from '@angular/core';\r\nimport { SdsTooltipComponent } from './components/tooltip.component';\r\nimport { TooltipPosition, TooltipTheme } from './tooltip.types';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\n\r\n@Directive({\r\n selector: '[sdsTooltip]',\r\n})\r\nexport class TooltipDirective implements OnChanges {\r\n @Input() tooltip = '';\r\n @Input() tooltipClass = '';\r\n @Input() tooltipIcon?: IconProp;\r\n @Input() position: TooltipPosition = 'above';\r\n @Input() theme: TooltipTheme = 'dark';\r\n @Input() showDelay = 0;\r\n @Input() hideDelay = 0;\r\n\r\n private componentRef: ComponentRef<any> \| null = null;\r\n private showTimeout?: number;\r\n private hideTimeout?: number;\r\n private touchTimeout?: number;\r\n\r\n\r\n constructor(\r\n private elementRef: ElementRef,\r\n private appRef: ApplicationRef,\r\n private componentFactoryResolver: ComponentFactoryResolver,\r\n // private viewContainerRef: ViewContainerRef,\r\n private injector: Injector,\r\n // private renderer2: Renderer2\r\n ) {\r\n // this.renderer2.listen('window', 'scroll', (_) => {\r\n // console.log('scroll');\r\n // this.setHideTooltipTimeout();\r\n // });\r\n }\r\n ngOnChanges(changes: SimpleChanges): void {\r\n if (changes['tooltip']) {\r\n if (this.componentRef !== null) {\r\n this.componentRef.instance.tooltip = this.tooltip;\r\n } \r\n }\r\n\r\n if (changes['tooltipIcon']) {\r\n if (this.componentRef !== null) {\r\n this.componentRef.instance.tooltipIcon = this.tooltipIcon;\r\n } \r\n } \r\n \r\n if (changes['tooltipClass']) {\r\n if (this.componentRef !== null) {\r\n this.componentRef.instance.tooltipClass = this.tooltipClass;\r\n } \r\n } \r\n }\r\n\r\n @HostListener('mouseenter')\r\n onMouseEnter(): void {\r\n this.initializeTooltip();\r\n }\r\n\r\n @HostListener('mouseleave')\r\n onMouseLeave(): void {\r\n this.setHideTooltipTimeout();\r\n }\r\n\r\n // @HostListener(\"window:scroll\", [])\r\n // onWindowScroll() {\r\n // console.log('scroll');\r\n // this.setHideTooltipTimeout();\r\n // }\r\n\r\n // @HostListener('window:scroll') onScroll(e: Event): void {\r\n // console.log((e.target as Element).scrollTop);\r\n // }\r\n\r\n // @HostListener('scroll') onScrollHost(e: Event): void {\r\n // console.log((e.target as Element).scrollTop);\r\n // }\r\n\r\n @HostListener('mousemove', ['$event'])\r\n onMouseMove($event: MouseEvent): void {\r\n if (this.componentRef !== null && this.position === 'dynamic') {\r\n this.componentRef.instance.left = $event.clientX;\r\n this.componentRef.instance.top = $event.clientY;\r\n this.componentRef.instance.tooltip = this.tooltip;\r\n this.componentRef.instance.tooltipIcon = this.tooltipIcon;\r\n this.componentRef.instance.tooltipClass = this.tooltipClass;\r\n }\r\n }\r\n\r\n @HostListener('touchstart', ['$event'])\r\n onTouchStart($event: TouchEvent): void {\r\n $event.preventDefault();\r\n window.clearTimeout(this.touchTimeout);\r\n this.touchTimeout = window.setTimeout(this.initializeTooltip.bind(this), 500);\r\n }\r\n\r\n @HostListener('touchend')\r\n onTouchEnd(): void {\r\n window.clearTimeout(this.touchTimeout);\r\n this.setHideTooltipTimeout();\r\n }\r\n\r\n private initializeTooltip() {\r\n if (this.componentRef === null) {\r\n window.clearInterval(this.hideDelay);\r\n\r\n if (this.tooltip) {\r\n const componentFactory = this.componentFactoryResolver.resolveComponentFactory(SdsTooltipComponent);\r\n this.componentRef = componentFactory.create(this.injector);\r\n\r\n this.appRef.attachView(this.componentRef.hostView);\r\n const [tooltipDOMElement] = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes;\r\n\r\n this.setTooltipComponentProperties();\r\n\r\n document.body.appendChild(tooltipDOMElement);\r\n this.showTimeout = window.setTimeout(this.showTooltip.bind(this), this.showDelay);\r\n }\r\n }\r\n }\r\n\r\n private setTooltipComponentProperties() {\r\n if (this.componentRef !== null) {\r\n this.componentRef.instance.tooltip = this.tooltip;\r\n this.componentRef.instance.tooltipIcon = this.tooltipIcon;\r\n this.componentRef.instance.tooltipClass = this.tooltipClass;\r\n this.componentRef.instance.position = this.position;\r\n this.componentRef.instance.theme = this.theme;\r\n\r\n const { left, right, top, bottom } = this.elementRef.nativeElement.getBoundingClientRect();\r\n\r\n switch (this.position) {\r\n case 'below': {\r\n this.componentRef.instance.left = Math.round((right - left) / 2 + left);\r\n this.componentRef.instance.top = Math.round(bottom);\r\n break;\r\n }\r\n case 'above': {\r\n this.componentRef.instance.left = Math.round((right - left) / 2 + left);\r\n this.componentRef.instance.top = Math.round(top);\r\n break;\r\n }\r\n case 'right': {\r\n this.componentRef.instance.left = Math.round(right);\r\n this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);\r\n break;\r\n }\r\n case 'left': {\r\n this.componentRef.instance.left = Math.round(left);\r\n this.componentRef.instance.top = Math.round(top + (bottom - top) / 2);\r\n break;\r\n }\r\n default: {\r\n break;\r\n }\r\n }\r\n }\r\n }\r\n\r\n private showTooltip() {\r\n if (this.tooltip && this.componentRef !== null) {\r\n this.componentRef.instance.visible = true;\r\n }\r\n }\r\n\r\n private setHideTooltipTimeout() {\r\n this.hideTimeout = window.setTimeout(this.destroy.bind(this), this.hideDelay);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.destroy();\r\n }\r\n\r\n destroy(): void {\r\n if (this.componentRef !== null) {\r\n window.clearInterval(this.showTimeout);\r\n window.clearInterval(this.hideDelay);\r\n this.appRef.detachView(this.componentRef.hostView);\r\n this.componentRef.destroy();\r\n this.componentRef = null;\r\n }\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsTooltipComponent } from '../tooltip/components/tooltip.component';\r\nimport { TooltipDirective } from './tooltip.directive';\r\nimport { TooltipPosition, TooltipTheme } from './tooltip.types';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n\r\n\r\n@NgModule({\r\n declarations: [\r\n SdsTooltipComponent,\r\n TooltipDirective\r\n ],\r\n imports: [\r\n CommonModule,\r\n FontAwesomeModule\r\n ],\r\n exports: [\r\n TooltipDirective\r\n ]\r\n})\r\nexport class SdsTooltipModule { }\r\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public-api';\n"],"names":[],"mappings":"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"}

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

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