@spicainternational/ngx-sds-components 2.35.0 → 2.36.0

package/esm2020/src/lib/ellipsis/directives/ellipsis.directive.mjs

@@ -0,0 +1,51 @@
+import { Directive, HostListener, Input } from '@angular/core';
+import * as i0 from "@angular/core";
+/*
+ * Parent must have a fixed width for this directive to work properly.
+ * Ellipsis will not appear without a parent width.
+ *
+ * tooltipText: @Input overrides the element's innerHtml with the provided
+ *  string variable in the title, used to prevent HTML tags from appearing
+ *  in the mouseover title. This will override text from an Input node.
+ */
+export class SdsEllipsisDirective {
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    ngAfterViewInit() {
+        this.element = this.elementRef.nativeElement;
+        this.renderer.setStyle(this.element, 'display', 'block');
+        this.renderer.setStyle(this.element, 'overflow', 'hidden');
+        this.renderer.setStyle(this.element, 'textOverflow', 'ellipsis');
+        this.renderer.setStyle(this.element, 'whiteSpace', 'nowrap');
+    }
+    enter() {
+        if (this.element && this.element.offsetWidth < this.element.scrollWidth) {
+            // this.renderer.setStyle(this.element, 'cursor', 'pointer');
+            if (this.tooltipText !== undefined && this.tooltipText.length > 0) {
+                this.element.title = this.tooltipText;
+                return;
+            }
+            else if (this.element.nodeName === 'INPUT') {
+                this.element.title = this.elementRef?.nativeElement?.value;
+                return;
+            }
+            this.element.title = this.element.innerHTML;
+        }
+    }
+}
+SdsEllipsisDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsEllipsisDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+SdsEllipsisDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.1", type: SdsEllipsisDirective, selector: "[sdsEllipsis]", inputs: { tooltipText: "tooltipText" }, host: { listeners: { "mouseenter": "enter()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsEllipsisDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[sdsEllipsis]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tooltipText: [{
+                type: Input
+            }], enter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxsaXBzaXMuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZWxsaXBzaXMvZGlyZWN0aXZlcy9lbGxpcHNpcy5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQWMsWUFBWSxFQUFFLEtBQUssRUFBYSxNQUFNLGVBQWUsQ0FBQzs7QUFFckc7Ozs7Ozs7R0FPRztBQUlILE1BQU0sT0FBTyxvQkFBb0I7SUFLN0IsWUFDWSxVQUFzQixFQUN0QixRQUFtQjtRQURuQixlQUFVLEdBQVYsVUFBVSxDQUFZO1FBQ3RCLGFBQVEsR0FBUixRQUFRLENBQVc7SUFDNUIsQ0FBQztJQUVHLGVBQWU7UUFDbEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztRQUM3QyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLFNBQVMsRUFBRSxPQUFPLENBQUMsQ0FBQztRQUN6RCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLFVBQVUsRUFBRSxRQUFRLENBQUMsQ0FBQztRQUMzRCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLGNBQWMsRUFBRSxVQUFVLENBQUMsQ0FBQztRQUNqRSxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLFlBQVksRUFBRSxRQUFRLENBQUMsQ0FBQztJQUNqRSxDQUFDO0lBRWtDLEtBQUs7UUFDcEMsSUFBSSxJQUFJLENBQUMsT0FBTyxJQUFJLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsV0FBVyxFQUFFO1lBQ3JFLDZEQUE2RDtZQUU3RCxJQUFJLElBQUksQ0FBQyxXQUFXLEtBQUssU0FBUyxJQUFJLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxHQUFHLENBQUMsRUFBRTtnQkFDL0QsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQztnQkFDdEMsT0FBTzthQUNWO2lCQUFNLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLEtBQUssT0FBTyxFQUFFO2dCQUMxQyxJQUFJLENBQUMsT0FBTyxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsVUFBVSxFQUFFLGFBQWEsRUFBRSxLQUFLLENBQUM7Z0JBQzNELE9BQU87YUFDVjtZQUNELElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDO1NBQy9DO0lBQ0wsQ0FBQzs7aUhBL0JRLG9CQUFvQjtxR0FBcEIsb0JBQW9COzJGQUFwQixvQkFBb0I7a0JBSGhDLFNBQVM7bUJBQUM7b0JBQ1AsUUFBUSxFQUFFLGVBQWU7aUJBQzVCO3lIQUVtQixXQUFXO3NCQUExQixLQUFLO2dCQWlCNkIsS0FBSztzQkFBdkMsWUFBWTt1QkFBQyxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIElucHV0LCBSZW5kZXJlcjIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbi8qXHJcbiAqIFBhcmVudCBtdXN0IGhhdmUgYSBmaXhlZCB3aWR0aCBmb3IgdGhpcyBkaXJlY3RpdmUgdG8gd29yayBwcm9wZXJseS5cclxuICogRWxsaXBzaXMgd2lsbCBub3QgYXBwZWFyIHdpdGhvdXQgYSBwYXJlbnQgd2lkdGguXHJcbiAqXHJcbiAqIHRvb2x0aXBUZXh0OiBASW5wdXQgb3ZlcnJpZGVzIHRoZSBlbGVtZW50J3MgaW5uZXJIdG1sIHdpdGggdGhlIHByb3ZpZGVkXHJcbiAqICBzdHJpbmcgdmFyaWFibGUgaW4gdGhlIHRpdGxlLCB1c2VkIHRvIHByZXZlbnQgSFRNTCB0YWdzIGZyb20gYXBwZWFyaW5nXHJcbiAqICBpbiB0aGUgbW91c2VvdmVyIHRpdGxlLiBUaGlzIHdpbGwgb3ZlcnJpZGUgdGV4dCBmcm9tIGFuIElucHV0IG5vZGUuXHJcbiAqL1xyXG5ARGlyZWN0aXZlKHtcclxuICAgIHNlbGVjdG9yOiAnW3Nkc0VsbGlwc2lzXScsXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZHNFbGxpcHNpc0RpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xyXG4gICAgQElucHV0KCkgcHVibGljIHRvb2x0aXBUZXh0Pzogc3RyaW5nO1xyXG5cclxuICAgIHByaXZhdGUgZWxlbWVudD86IEhUTUxFbGVtZW50O1xyXG5cclxuICAgIHB1YmxpYyBjb25zdHJ1Y3RvcihcclxuICAgICAgICBwcml2YXRlIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYsXHJcbiAgICAgICAgcHJpdmF0ZSByZW5kZXJlcjogUmVuZGVyZXIyXHJcbiAgICApIHt9XHJcblxyXG4gICAgcHVibGljIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcclxuICAgICAgICB0aGlzLmVsZW1lbnQgPSB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcclxuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWxlbWVudCwgJ2Rpc3BsYXknLCAnYmxvY2snKTtcclxuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWxlbWVudCwgJ292ZXJmbG93JywgJ2hpZGRlbicpO1xyXG4gICAgICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5lbGVtZW50LCAndGV4dE92ZXJmbG93JywgJ2VsbGlwc2lzJyk7XHJcbiAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsZW1lbnQsICd3aGl0ZVNwYWNlJywgJ25vd3JhcCcpO1xyXG4gICAgfVxyXG5cclxuICAgIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInKSBwdWJsaWMgZW50ZXIoKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKHRoaXMuZWxlbWVudCAmJiB0aGlzLmVsZW1lbnQub2Zmc2V0V2lkdGggPCB0aGlzLmVsZW1lbnQuc2Nyb2xsV2lkdGgpIHtcclxuICAgICAgICAgICAgLy8gdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0aGlzLmVsZW1lbnQsICdjdXJzb3InLCAncG9pbnRlcicpO1xyXG5cclxuICAgICAgICAgICAgaWYgKHRoaXMudG9vbHRpcFRleHQgIT09IHVuZGVmaW5lZCAmJiB0aGlzLnRvb2x0aXBUZXh0Lmxlbmd0aCA+IDApIHtcclxuICAgICAgICAgICAgICAgIHRoaXMuZWxlbWVudC50aXRsZSA9IHRoaXMudG9vbHRpcFRleHQ7XHJcbiAgICAgICAgICAgICAgICByZXR1cm47XHJcbiAgICAgICAgICAgIH0gZWxzZSBpZiAodGhpcy5lbGVtZW50Lm5vZGVOYW1lID09PSAnSU5QVVQnKSB7XHJcbiAgICAgICAgICAgICAgICB0aGlzLmVsZW1lbnQudGl0bGUgPSB0aGlzLmVsZW1lbnRSZWY/Lm5hdGl2ZUVsZW1lbnQ/LnZhbHVlO1xyXG4gICAgICAgICAgICAgICAgcmV0dXJuO1xyXG4gICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIHRoaXMuZWxlbWVudC50aXRsZSA9IHRoaXMuZWxlbWVudC5pbm5lckhUTUw7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59XHJcbiJdfQ==

package/esm2020/src/lib/ellipsis/ellipsis.module.mjs

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SdsEllipsisDirective } from './directives/ellipsis.directive';
+import * as i0 from "@angular/core";
+export class SdsEllipsisModule {
+}
+SdsEllipsisModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsEllipsisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SdsEllipsisModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsEllipsisModule, declarations: [SdsEllipsisDirective], imports: [CommonModule], exports: [SdsEllipsisDirective] });
+SdsEllipsisModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsEllipsisModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SdsEllipsisModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        SdsEllipsisDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        SdsEllipsisDirective
+                    ]
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWxsaXBzaXMubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZWxsaXBzaXMvZWxsaXBzaXMubW9kdWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxvQkFBb0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDOztBQWV2RSxNQUFNLE9BQU8saUJBQWlCOzs4R0FBakIsaUJBQWlCOytHQUFqQixpQkFBaUIsaUJBVDFCLG9CQUFvQixhQUdwQixZQUFZLGFBR1osb0JBQW9COytHQUdYLGlCQUFpQixZQVBuQjtZQUNQLFlBQVk7U0FDYjsyRkFLVSxpQkFBaUI7a0JBWDdCLFFBQVE7bUJBQUM7b0JBQ1IsWUFBWSxFQUFFO3dCQUNaLG9CQUFvQjtxQkFDckI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7cUJBQ2I7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLG9CQUFvQjtxQkFDckI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBTZHNFbGxpcHNpc0RpcmVjdGl2ZSB9IGZyb20gJy4vZGlyZWN0aXZlcy9lbGxpcHNpcy5kaXJlY3RpdmUnO1xyXG5cclxuXHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgU2RzRWxsaXBzaXNEaXJlY3RpdmVcclxuICBdLFxyXG4gIGltcG9ydHM6IFtcclxuICAgIENvbW1vbk1vZHVsZVxyXG4gIF0sXHJcbiAgZXhwb3J0czogW1xyXG4gICAgU2RzRWxsaXBzaXNEaXJlY3RpdmVcclxuICBdIFxyXG59KVxyXG5leHBvcnQgY2xhc3MgU2RzRWxsaXBzaXNNb2R1bGUgeyB9XHJcbiJdfQ==

package/esm2020/src/lib/ellipsis/public-api.mjs

@@ -0,0 +1,3 @@
+export * from './ellipsis.module';
+export * from './directives/ellipsis.directive';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zZHMtY29tcG9uZW50cy9zcmMvbGliL2VsbGlwc2lzL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGlDQUFpQyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9lbGxpcHNpcy5tb2R1bGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2RpcmVjdGl2ZXMvZWxsaXBzaXMuZGlyZWN0aXZlJzsiXX0=

package/esm2020/src/lib/ellipsis/spicainternational-ngx-sds-components-src-lib-ellipsis.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './public-api';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3BpY2FpbnRlcm5hdGlvbmFsLW5neC1zZHMtY29tcG9uZW50cy1zcmMtbGliLWVsbGlwc2lzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LXNkcy1jb21wb25lbnRzL3NyYy9saWIvZWxsaXBzaXMvc3BpY2FpbnRlcm5hdGlvbmFsLW5neC1zZHMtY29tcG9uZW50cy1zcmMtbGliLWVsbGlwc2lzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOztHQUVHO0FBRUgsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEdlbmVyYXRlZCBidW5kbGUgaW5kZXguIERvIG5vdCBlZGl0LlxuICovXG5cbmV4cG9ydCAqIGZyb20gJy4vcHVibGljLWFwaSc7XG4iXX0=

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

@@ -835,10 +835,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 \r\n    class=\"datepicker bg-white sds-no-print\"\r\n    role=\"group\"\r\n    aria-label=\"Date picker\"\r\n    [style.width]=\"width\"\r\n>\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-left\r\n                border-right \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=\"pl-2 ml-1 mr-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                    <button\r\n                        class=\"dropdown-item border-0\"\r\n                        [class.selected] = \"range === selectedDateRange\"\r\n                        (click)=\"changDateRange(range)\"\r\n                    > {{range.name}}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </dx-popover>\r\n\r\n\r\n    <button\r\n        *ngIf=\"showPreviousAndNextButtons\"\r\n        class=\"btn btn-white border border-right-0 pr-2\"\r\n        [class.rounded-left] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n        [class.border-left-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-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n        [class.border-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n        [class.rounded-right] = \"!showPreviousAndNextButtons\"\r\n        [class.border-right] = \"!showPreviousAndNextButtons\"\r\n        [disabled]=\"disabled\"\r\n        type=\"button\"\r\n        (click)=\"showDatepicker = !showDatepicker\"\r\n    >\r\n    <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\r\n\r\n\r\n    </button>\r\n\r\n    <button\r\n        *ngIf=\"showPreviousAndNextButtons\"\r\n        class=\"btn btn-white border rounded-right border-left-0 pl-2\"\r\n        type=\"button\"\r\n        [disabled]=\"isMaximumLimit || disabled\"\r\n        (click)=\"goToNextDate()\"\r\n    >\r\n        <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n    </button>\r\n</div>\r\n\r\n<div class=\"sds-print-only h-100\">\r\n    <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\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 ml-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\r\n<ng-template #mainDisplayTemplate>\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 h-100 \">\r\n        <div \r\n            *ngIf=\"translations?.printLabel\"\r\n            class=\"sds-print-only\"\r\n        >\r\n            {{translations.printLabel}}\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</ng-template>\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}::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"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], 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 \r\n    class=\"datepicker bg-white sds-no-print\"\r\n    role=\"group\"\r\n    aria-label=\"Date picker\"\r\n    [style.width]=\"width\"\r\n>\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-left\r\n                border-right \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=\"pl-2 ml-1 mr-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                    <button\r\n                        class=\"dropdown-item border-0\"\r\n                        [class.selected] = \"range === selectedDateRange\"\r\n                        (click)=\"changDateRange(range)\"\r\n                    > {{range.name}}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </dx-popover>\r\n\r\n\r\n    <button\r\n        *ngIf=\"showPreviousAndNextButtons\"\r\n        class=\"btn btn-white border border-right-0 pr-2\"\r\n        [class.rounded-left] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n        [class.border-left-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-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n        [class.border-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n        [class.rounded-right] = \"!showPreviousAndNextButtons\"\r\n        [class.border-right] = \"!showPreviousAndNextButtons\"\r\n        [disabled]=\"disabled\"\r\n        type=\"button\"\r\n        (click)=\"showDatepicker = !showDatepicker\"\r\n    >\r\n    <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\r\n\r\n\r\n    </button>\r\n\r\n    <button\r\n        *ngIf=\"showPreviousAndNextButtons\"\r\n        class=\"btn btn-white border rounded-right border-left-0 pl-2\"\r\n        type=\"button\"\r\n        [disabled]=\"isMaximumLimit || disabled\"\r\n        (click)=\"goToNextDate()\"\r\n    >\r\n        <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n    </button>\r\n</div>\r\n\r\n<div class=\"sds-print-only h-100\">\r\n    <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\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 ml-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\r\n<ng-template #mainDisplayTemplate>\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 h-100 \">\r\n        <div \r\n            *ngIf=\"translations?.printLabel\"\r\n            class=\"sds-print-only sds-datepicker-print-label\"\r\n        >\r\n            {{translations.printLabel}}\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</ng-template>\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}::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"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], 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 \r\n    class=\"datepicker bg-white sds-no-print\"\r\n    role=\"group\"\r\n    aria-label=\"Date picker\"\r\n    [style.width]=\"width\"\r\n>\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-left\r\n                border-right \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=\"pl-2 ml-1 mr-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                    <button\r\n                        class=\"dropdown-item border-0\"\r\n                        [class.selected] = \"range === selectedDateRange\"\r\n                        (click)=\"changDateRange(range)\"\r\n                    > {{range.name}}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </dx-popover>\r\n\r\n\r\n    <button\r\n        *ngIf=\"showPreviousAndNextButtons\"\r\n        class=\"btn btn-white border border-right-0 pr-2\"\r\n        [class.rounded-left] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n        [class.border-left-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-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n        [class.border-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n        [class.rounded-right] = \"!showPreviousAndNextButtons\"\r\n        [class.border-right] = \"!showPreviousAndNextButtons\"\r\n        [disabled]=\"disabled\"\r\n        type=\"button\"\r\n        (click)=\"showDatepicker = !showDatepicker\"\r\n    >\r\n    <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\r\n\r\n\r\n    </button>\r\n\r\n    <button\r\n        *ngIf=\"showPreviousAndNextButtons\"\r\n        class=\"btn btn-white border rounded-right border-left-0 pl-2\"\r\n        type=\"button\"\r\n        [disabled]=\"isMaximumLimit || disabled\"\r\n        (click)=\"goToNextDate()\"\r\n    >\r\n        <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n    </button>\r\n</div>\r\n\r\n<div class=\"sds-print-only h-100\">\r\n    <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\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 ml-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\r\n<ng-template #mainDisplayTemplate>\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 h-100 \">\r\n        <div \r\n            *ngIf=\"translations?.printLabel\"\r\n            class=\"sds-print-only\"\r\n        >\r\n            {{translations.printLabel}}\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</ng-template>\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}::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 \r\n    class=\"datepicker bg-white sds-no-print\"\r\n    role=\"group\"\r\n    aria-label=\"Date picker\"\r\n    [style.width]=\"width\"\r\n>\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-left\r\n                border-right \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=\"pl-2 ml-1 mr-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                    <button\r\n                        class=\"dropdown-item border-0\"\r\n                        [class.selected] = \"range === selectedDateRange\"\r\n                        (click)=\"changDateRange(range)\"\r\n                    > {{range.name}}\r\n                    </button>\r\n                </div>\r\n            </div>\r\n        </dx-popover>\r\n\r\n\r\n    <button\r\n        *ngIf=\"showPreviousAndNextButtons\"\r\n        class=\"btn btn-white border border-right-0 pr-2\"\r\n        [class.rounded-left] = \"!dateRangeDefinitions || dateRangeDefinitions.length === 0\"\r\n        [class.border-left-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-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n        [class.border-left] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n        [class.rounded-right] = \"!showPreviousAndNextButtons\"\r\n        [class.border-right] = \"!showPreviousAndNextButtons\"\r\n        [disabled]=\"disabled\"\r\n        type=\"button\"\r\n        (click)=\"showDatepicker = !showDatepicker\"\r\n    >\r\n    <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\r\n\r\n\r\n    </button>\r\n\r\n    <button\r\n        *ngIf=\"showPreviousAndNextButtons\"\r\n        class=\"btn btn-white border rounded-right border-left-0 pl-2\"\r\n        type=\"button\"\r\n        [disabled]=\"isMaximumLimit || disabled\"\r\n        (click)=\"goToNextDate()\"\r\n    >\r\n        <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n    </button>\r\n</div>\r\n\r\n<div class=\"sds-print-only h-100\">\r\n    <ng-container [ngTemplateOutlet]=\"mainDisplayTemplate\"></ng-container>\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 ml-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\r\n<ng-template #mainDisplayTemplate>\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 h-100 \">\r\n        <div \r\n            *ngIf=\"translations?.printLabel\"\r\n            class=\"sds-print-only sds-datepicker-print-label\"\r\n        >\r\n            {{translations.printLabel}}\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</ng-template>\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}::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']