@spicainternational/ngx-sds-components 7.3.1 → 7.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/esm2020/src/lib/date-picker/date-picker.component.mjs +4 -3
  2. package/esm2020/src/lib/date-picker/date-picker.model.mjs +1 -1
  3. package/esm2020/src/lib/message/message.component.mjs +3 -3
  4. package/esm2020/src/lib/table-actions/table-actions.component.mjs +10 -6
  5. package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +3 -2
  6. package/fesm2015/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
  7. package/fesm2015/spicainternational-ngx-sds-components-src-lib-message.mjs +2 -2
  8. package/fesm2015/spicainternational-ngx-sds-components-src-lib-message.mjs.map +1 -1
  9. package/fesm2015/spicainternational-ngx-sds-components-src-lib-table-actions.mjs +9 -5
  10. package/fesm2015/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map +1 -1
  11. package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs +3 -2
  12. package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs.map +1 -1
  13. package/fesm2020/spicainternational-ngx-sds-components-src-lib-message.mjs +2 -2
  14. package/fesm2020/spicainternational-ngx-sds-components-src-lib-message.mjs.map +1 -1
  15. package/fesm2020/spicainternational-ngx-sds-components-src-lib-table-actions.mjs +9 -5
  16. package/fesm2020/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map +1 -1
  17. package/package.json +1 -1
  18. package/src/lib/date-picker/date-picker.model.d.ts +1 -0
  19. package/src/lib/message/message.component.d.ts +1 -1
  20. package/src/lib/table-actions/table-actions.component.d.ts +2 -1
package/fesm2015/spicainternational-ngx-sds-components-src-lib-message.mjs CHANGED
@@ -30,10 +30,10 @@ class SdsMessageComponent {
30
30
  }
31
31
  }
32
32
  SdsMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
33
- SdsMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsMessageComponent, selector: "sds-message", inputs: { icon: "icon", text: "text", showCloseButton: "showCloseButton", showLearnMoreLink: "showLearnMoreLink", learnMoreLinkText: "learnMoreLinkText", learnMoreLinkUrl: "learnMoreLinkUrl", showAction: "showAction", actionText: "actionText", style: "style" }, outputs: { close: "close", actionClick: "actionClick" }, queries: [{ propertyName: "customContent", first: true, predicate: ["customContent"], descendants: true }], ngImport: i0, template: "<div \r\n *ngIf=\"showMessage\"\r\n class=\"px-3 py-2 d-flex rounded\"\r\n [class.sds-message-default] = \"style == 'default'\"\r\n [class.sds-message-success] = \"style == 'success'\"\r\n [class.sds-message-danger] = \"style == 'danger'\"\r\n [class.sds-message-warning] = \"style == 'warning'\"\r\n [class.sds-message-info] = \"style == 'info'\"\r\n >\r\n\r\n <fa-icon \r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n class=\"me-2\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"flex-grow-1\">\r\n <div *ngIf=\"!customContent\">\r\n <span>\r\n {{text}}\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showAction\"\r\n >\r\n <a \r\n class=\"link-primary sds-cursor-pointer ml-2 \"\r\n (click)=\"onActionButtonClick()\"\r\n >\r\n {{actionText}}\r\n </a>\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showLearnMoreLink\"\r\n >\r\n <a \r\n class=\"\"\r\n [href]=\"learnMoreLinkUrl\"\r\n target=\"_learnmore\"\r\n >\r\n {{learnMoreLinkText}}\r\n </a>\r\n </span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"customContent\" >\r\n <ng-content select=\"customContent\"></ng-content>\r\n </ng-container> \r\n </div>\r\n\r\n <div *ngIf=\"showCloseButton\">\r\n <button \r\n type=\"button\" \r\n class=\"btn-close ml-2\" \r\n aria-label=\"Close\"\r\n (click)=\"onCloseButtonClick()\"\r\n >\r\n </button>\r\n </div>\r\n\r\n</div>\r\n", styles: [".sds-message-default{color:var(--bs-gray-900);background-color:var(--bs-gray-300)}.sds-message-success{color:var(--bs-gray-100);background-color:var(--bs-success)}.sds-message-danger{color:var(--bs-gray-100);background-color:var(--bs-danger)}.sds-message-warning{color:var(--bs-gray-900);background-color:var(--bs-warning)}.sds-message-info{color:var(--bs-gray-900);background-color:var(--bs-info)}.btn-close{font-size:.75em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
33
+ SdsMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsMessageComponent, selector: "sds-message", inputs: { icon: "icon", text: "text", showCloseButton: "showCloseButton", showLearnMoreLink: "showLearnMoreLink", learnMoreLinkText: "learnMoreLinkText", learnMoreLinkUrl: "learnMoreLinkUrl", showAction: "showAction", actionText: "actionText", style: "style" }, outputs: { close: "close", actionClick: "actionClick" }, queries: [{ propertyName: "customContent", first: true, predicate: ["customContent"], descendants: true }], ngImport: i0, template: "<div \r\n *ngIf=\"showMessage\"\r\n class=\"px-3 py-2 d-flex rounded\"\r\n [class.sds-message-default] = \"style == 'default'\"\r\n \r\n [class.sds-message-success] = \"style == 'success'\"\r\n [class.sds-message-success-subtle] = \"style == 'successSubtle'\"\r\n \r\n [class.sds-message-danger] = \"style == 'danger'\"\r\n [class.sds-message-danger-subtle] = \"style == 'dangerSubtle'\"\r\n \r\n [class.sds-message-warning] = \"style == 'warning'\"\r\n [class.sds-message-warning-subtle] = \"style == 'warningSubtle'\"\r\n\r\n [class.sds-message-info] = \"style == 'info'\"\r\n [class.sds-message-info-subtle] = \"style == 'infoSubtle'\"\r\n >\r\n\r\n <fa-icon \r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n class=\"me-2\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"flex-grow-1\">\r\n <div *ngIf=\"!customContent\">\r\n <span>\r\n {{text}}\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showAction\"\r\n >\r\n <a \r\n class=\"link-primary sds-cursor-pointer ml-2 \"\r\n (click)=\"onActionButtonClick()\"\r\n >\r\n {{actionText}}\r\n </a>\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showLearnMoreLink\"\r\n >\r\n <a \r\n class=\"\"\r\n [href]=\"learnMoreLinkUrl\"\r\n target=\"_learnmore\"\r\n >\r\n {{learnMoreLinkText}}\r\n </a>\r\n </span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"customContent\" >\r\n <ng-content select=\"customContent\"></ng-content>\r\n </ng-container> \r\n </div>\r\n\r\n <div *ngIf=\"showCloseButton\">\r\n <button \r\n type=\"button\" \r\n class=\"btn-close ml-2\" \r\n aria-label=\"Close\"\r\n (click)=\"onCloseButtonClick()\"\r\n >\r\n </button>\r\n </div>\r\n\r\n</div>\r\n", styles: [".sds-message-default{color:var(--bs-gray-900);background-color:var(--bs-gray-300)}.sds-message-success-subtle{color:var(--bs-gray-900);background-color:var(--bs-success-bg-subtle)}.sds-message-danger-subtle{color:var(--bs-gray-900);background-color:var(--bs-danger-bg-subtle)}.sds-message-warning-subtle{color:var(--bs-gray-900);background-color:var(--bs-warning-bg-subtle)}.sds-message-info-subtle{color:var(--bs-gray-900);background-color:var(--bs-info-bg-subtle)}.sds-message-success{color:var(--bs-gray-100);background-color:var(--bs-success)}.sds-message-danger{color:var(--bs-gray-100);background-color:var(--bs-danger)}.sds-message-warning{color:var(--bs-gray-900);background-color:var(--bs-warning)}.sds-message-info{color:var(--bs-gray-900);background-color:var(--bs-info)}.btn-close{font-size:.75em}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
34
34
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsMessageComponent, decorators: [{
35
35
  type: Component,
36
- args: [{ selector: 'sds-message', template: "<div \r\n *ngIf=\"showMessage\"\r\n class=\"px-3 py-2 d-flex rounded\"\r\n [class.sds-message-default] = \"style == 'default'\"\r\n [class.sds-message-success] = \"style == 'success'\"\r\n [class.sds-message-danger] = \"style == 'danger'\"\r\n [class.sds-message-warning] = \"style == 'warning'\"\r\n [class.sds-message-info] = \"style == 'info'\"\r\n >\r\n\r\n <fa-icon \r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n class=\"me-2\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"flex-grow-1\">\r\n <div *ngIf=\"!customContent\">\r\n <span>\r\n {{text}}\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showAction\"\r\n >\r\n <a \r\n class=\"link-primary sds-cursor-pointer ml-2 \"\r\n (click)=\"onActionButtonClick()\"\r\n >\r\n {{actionText}}\r\n </a>\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showLearnMoreLink\"\r\n >\r\n <a \r\n class=\"\"\r\n [href]=\"learnMoreLinkUrl\"\r\n target=\"_learnmore\"\r\n >\r\n {{learnMoreLinkText}}\r\n </a>\r\n </span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"customContent\" >\r\n <ng-content select=\"customContent\"></ng-content>\r\n </ng-container> \r\n </div>\r\n\r\n <div *ngIf=\"showCloseButton\">\r\n <button \r\n type=\"button\" \r\n class=\"btn-close ml-2\" \r\n aria-label=\"Close\"\r\n (click)=\"onCloseButtonClick()\"\r\n >\r\n </button>\r\n </div>\r\n\r\n</div>\r\n", styles: [".sds-message-default{color:var(--bs-gray-900);background-color:var(--bs-gray-300)}.sds-message-success{color:var(--bs-gray-100);background-color:var(--bs-success)}.sds-message-danger{color:var(--bs-gray-100);background-color:var(--bs-danger)}.sds-message-warning{color:var(--bs-gray-900);background-color:var(--bs-warning)}.sds-message-info{color:var(--bs-gray-900);background-color:var(--bs-info)}.btn-close{font-size:.75em}\n"] }]
36
+ args: [{ selector: 'sds-message', template: "<div \r\n *ngIf=\"showMessage\"\r\n class=\"px-3 py-2 d-flex rounded\"\r\n [class.sds-message-default] = \"style == 'default'\"\r\n \r\n [class.sds-message-success] = \"style == 'success'\"\r\n [class.sds-message-success-subtle] = \"style == 'successSubtle'\"\r\n \r\n [class.sds-message-danger] = \"style == 'danger'\"\r\n [class.sds-message-danger-subtle] = \"style == 'dangerSubtle'\"\r\n \r\n [class.sds-message-warning] = \"style == 'warning'\"\r\n [class.sds-message-warning-subtle] = \"style == 'warningSubtle'\"\r\n\r\n [class.sds-message-info] = \"style == 'info'\"\r\n [class.sds-message-info-subtle] = \"style == 'infoSubtle'\"\r\n >\r\n\r\n <fa-icon \r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n class=\"me-2\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"flex-grow-1\">\r\n <div *ngIf=\"!customContent\">\r\n <span>\r\n {{text}}\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showAction\"\r\n >\r\n <a \r\n class=\"link-primary sds-cursor-pointer ml-2 \"\r\n (click)=\"onActionButtonClick()\"\r\n >\r\n {{actionText}}\r\n </a>\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showLearnMoreLink\"\r\n >\r\n <a \r\n class=\"\"\r\n [href]=\"learnMoreLinkUrl\"\r\n target=\"_learnmore\"\r\n >\r\n {{learnMoreLinkText}}\r\n </a>\r\n </span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"customContent\" >\r\n <ng-content select=\"customContent\"></ng-content>\r\n </ng-container> \r\n </div>\r\n\r\n <div *ngIf=\"showCloseButton\">\r\n <button \r\n type=\"button\" \r\n class=\"btn-close ml-2\" \r\n aria-label=\"Close\"\r\n (click)=\"onCloseButtonClick()\"\r\n >\r\n </button>\r\n </div>\r\n\r\n</div>\r\n", styles: [".sds-message-default{color:var(--bs-gray-900);background-color:var(--bs-gray-300)}.sds-message-success-subtle{color:var(--bs-gray-900);background-color:var(--bs-success-bg-subtle)}.sds-message-danger-subtle{color:var(--bs-gray-900);background-color:var(--bs-danger-bg-subtle)}.sds-message-warning-subtle{color:var(--bs-gray-900);background-color:var(--bs-warning-bg-subtle)}.sds-message-info-subtle{color:var(--bs-gray-900);background-color:var(--bs-info-bg-subtle)}.sds-message-success{color:var(--bs-gray-100);background-color:var(--bs-success)}.sds-message-danger{color:var(--bs-gray-100);background-color:var(--bs-danger)}.sds-message-warning{color:var(--bs-gray-900);background-color:var(--bs-warning)}.sds-message-info{color:var(--bs-gray-900);background-color:var(--bs-info)}.btn-close{font-size:.75em}\n"] }]
37
37
  }], ctorParameters: function () { return []; }, propDecorators: { icon: [{
38
38
  type: Input
39
39
  }], text: [{
package/fesm2015/spicainternational-ngx-sds-components-src-lib-message.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-message.mjs","sources":["../../../projects/ngx-sds-components/src/lib/message/message.component.ts","../../../projects/ngx-sds-components/src/lib/message/message.component.html","../../../projects/ngx-sds-components/src/lib/message/message.module.ts","../../../projects/ngx-sds-components/src/lib/message/spicainternational-ngx-sds-components-src-lib-message.ts"],"sourcesContent":["import { Component, ContentChild, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\n\r\n@Component({\r\n selector: 'sds-message',\r\n templateUrl: './message.component.html',\r\n styleUrls: ['./message.component.scss'],\r\n})\r\nexport class SdsMessageComponent implements OnInit {\r\n\r\n @Input() public icon?: IconProp;\r\n @Input() public text: string = '';\r\n @Input() public showCloseButton: boolean = false;\r\n\r\n @Output() public close: EventEmitter<void> = new EventEmitter();\r\n\r\n @Input() public showLearnMoreLink: boolean = false;\r\n @Input() public learnMoreLinkText: string = 'Learn more';\r\n @Input() public learnMoreLinkUrl: string = '';\r\n\r\n @Input() public showAction: boolean = false;\r\n @Input() public actionText: string = 'Address this'; \r\n @Output() public actionClick: EventEmitter<void> = new EventEmitter();\r\n\r\n\r\n @Input() public style: 'default' | 'danger' | 'success' | 'warning' | 'info' = 'default';\r\n\r\n @ContentChild('customContent') customContent: ElementRef = {nativeElement: undefined};\r\n\r\n public showMessage: boolean = true;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {}\r\n\r\n public onCloseButtonClick(): void {\r\n this.showMessage = false;\r\n this.close.emit();\r\n }\r\n\r\n public onActionButtonClick(): void {\r\n this.actionClick.emit();\r\n }\r\n\r\n}\r\n","<div \r\n *ngIf=\"showMessage\"\r\n class=\"px-3 py-2 d-flex rounded\"\r\n [class.sds-message-default] = \"style == 'default'\"\r\n [class.sds-message-success] = \"style == 'success'\"\r\n [class.sds-message-danger] = \"style == 'danger'\"\r\n [class.sds-message-warning] = \"style == 'warning'\"\r\n [class.sds-message-info] = \"style == 'info'\"\r\n >\r\n\r\n <fa-icon \r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n class=\"me-2\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"flex-grow-1\">\r\n <div *ngIf=\"!customContent\">\r\n <span>\r\n {{text}}\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showAction\"\r\n >\r\n <a \r\n class=\"link-primary sds-cursor-pointer ml-2 \"\r\n (click)=\"onActionButtonClick()\"\r\n >\r\n {{actionText}}\r\n </a>\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showLearnMoreLink\"\r\n >\r\n <a \r\n class=\"\"\r\n [href]=\"learnMoreLinkUrl\"\r\n target=\"_learnmore\"\r\n >\r\n {{learnMoreLinkText}}\r\n </a>\r\n </span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"customContent\" >\r\n <ng-content select=\"customContent\"></ng-content>\r\n </ng-container> \r\n </div>\r\n\r\n <div *ngIf=\"showCloseButton\">\r\n <button \r\n type=\"button\" \r\n class=\"btn-close ml-2\" \r\n aria-label=\"Close\"\r\n (click)=\"onCloseButtonClick()\"\r\n >\r\n </button>\r\n </div>\r\n\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsMessageComponent } from './message.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n@NgModule({\r\n declarations: [\r\n SdsMessageComponent\r\n ],\r\n imports: [\r\n CommonModule,\r\n FontAwesomeModule\r\n ],\r\n exports: [\r\n SdsMessageComponent\r\n ]\r\n})\r\nexport class SdsMessageModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-message.mjs","sources":["../../../projects/ngx-sds-components/src/lib/message/message.component.ts","../../../projects/ngx-sds-components/src/lib/message/message.component.html","../../../projects/ngx-sds-components/src/lib/message/message.module.ts","../../../projects/ngx-sds-components/src/lib/message/spicainternational-ngx-sds-components-src-lib-message.ts"],"sourcesContent":["import { Component, ContentChild, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\n\r\n@Component({\r\n selector: 'sds-message',\r\n templateUrl: './message.component.html',\r\n styleUrls: ['./message.component.scss'],\r\n})\r\nexport class SdsMessageComponent implements OnInit {\r\n\r\n @Input() public icon?: IconProp;\r\n @Input() public text: string = '';\r\n @Input() public showCloseButton: boolean = false;\r\n\r\n @Output() public close: EventEmitter<void> = new EventEmitter();\r\n\r\n @Input() public showLearnMoreLink: boolean = false;\r\n @Input() public learnMoreLinkText: string = 'Learn more';\r\n @Input() public learnMoreLinkUrl: string = '';\r\n\r\n @Input() public showAction: boolean = false;\r\n @Input() public actionText: string = 'Address this'; \r\n @Output() public actionClick: EventEmitter<void> = new EventEmitter();\r\n\r\n\r\n @Input() public style: 'default' | 'danger' | 'dangerSubtle' | 'success' | 'successSubtle' | 'warning' | 'warningSubtle' | 'info' | 'infoSubtle' = 'default';\r\n\r\n @ContentChild('customContent') customContent: ElementRef = {nativeElement: undefined};\r\n\r\n public showMessage: boolean = true;\r\n\r\n constructor() {}\r\n\r\n ngOnInit(): void {}\r\n\r\n public onCloseButtonClick(): void {\r\n this.showMessage = false;\r\n this.close.emit();\r\n }\r\n\r\n public onActionButtonClick(): void {\r\n this.actionClick.emit();\r\n }\r\n\r\n}\r\n","<div \r\n *ngIf=\"showMessage\"\r\n class=\"px-3 py-2 d-flex rounded\"\r\n [class.sds-message-default] = \"style == 'default'\"\r\n \r\n [class.sds-message-success] = \"style == 'success'\"\r\n [class.sds-message-success-subtle] = \"style == 'successSubtle'\"\r\n \r\n [class.sds-message-danger] = \"style == 'danger'\"\r\n [class.sds-message-danger-subtle] = \"style == 'dangerSubtle'\"\r\n \r\n [class.sds-message-warning] = \"style == 'warning'\"\r\n [class.sds-message-warning-subtle] = \"style == 'warningSubtle'\"\r\n\r\n [class.sds-message-info] = \"style == 'info'\"\r\n [class.sds-message-info-subtle] = \"style == 'infoSubtle'\"\r\n >\r\n\r\n <fa-icon \r\n *ngIf=\"icon\"\r\n [icon]=\"icon\"\r\n class=\"me-2\"\r\n >\r\n </fa-icon>\r\n\r\n <div class=\"flex-grow-1\">\r\n <div *ngIf=\"!customContent\">\r\n <span>\r\n {{text}}\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showAction\"\r\n >\r\n <a \r\n class=\"link-primary sds-cursor-pointer ml-2 \"\r\n (click)=\"onActionButtonClick()\"\r\n >\r\n {{actionText}}\r\n </a>\r\n </span>\r\n\r\n <span \r\n *ngIf=\"showLearnMoreLink\"\r\n >\r\n <a \r\n class=\"\"\r\n [href]=\"learnMoreLinkUrl\"\r\n target=\"_learnmore\"\r\n >\r\n {{learnMoreLinkText}}\r\n </a>\r\n </span>\r\n </div>\r\n\r\n <ng-container *ngIf=\"customContent\" >\r\n <ng-content select=\"customContent\"></ng-content>\r\n </ng-container> \r\n </div>\r\n\r\n <div *ngIf=\"showCloseButton\">\r\n <button \r\n type=\"button\" \r\n class=\"btn-close ml-2\" \r\n aria-label=\"Close\"\r\n (click)=\"onCloseButtonClick()\"\r\n >\r\n </button>\r\n </div>\r\n\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsMessageComponent } from './message.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\n\r\n@NgModule({\r\n declarations: [\r\n SdsMessageComponent\r\n ],\r\n imports: [\r\n CommonModule,\r\n FontAwesomeModule\r\n ],\r\n exports: [\r\n SdsMessageComponent\r\n ]\r\n})\r\nexport class SdsMessageModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2015/spicainternational-ngx-sds-components-src-lib-table-actions.mjs CHANGED
@@ -1,12 +1,13 @@
1
1
  import * as i0 from '@angular/core';
2
2
  import { Component, Input, HostBinding, NgModule } from '@angular/core';
3
+ import * as i1 from '@angular/common';
3
4
  import { CommonModule } from '@angular/common';
4
5
  import { faEllipsis } from '@fortawesome/pro-regular-svg-icons';
5
- import * as i1 from '@fortawesome/angular-fontawesome';
6
+ import * as i2 from '@fortawesome/angular-fontawesome';
6
7
  import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
7
- import * as i2 from 'devextreme-angular';
8
+ import * as i3 from 'devextreme-angular';
8
9
  import { DxPopoverModule } from 'devextreme-angular';
9
- import * as i3 from 'devextreme-angular/ui/nested';
10
+ import * as i4 from 'devextreme-angular/ui/nested';
10
11
 
11
12
  class SdsTableActionsComponent {
12
13
  constructor() {
@@ -14,6 +15,7 @@ class SdsTableActionsComponent {
14
15
  // @Input() showShadow: boolean = false;
15
16
  this.dropDownAutoClose = 'true';
16
17
  this.dropdownMinWidth = '10rem';
18
+ this.hideActionsDropdown = false;
17
19
  this.showDropdown = false;
18
20
  }
19
21
  ngOnInit() { }
@@ -25,16 +27,18 @@ class SdsTableActionsComponent {
25
27
  }
26
28
  }
27
29
  SdsTableActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTableActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
28
- SdsTableActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsTableActionsComponent, selector: "sds-table-actions", inputs: { dropdownIcon: "dropdownIcon", dropDownAutoClose: "dropDownAutoClose", dropdownMinWidth: "dropdownMinWidth" }, host: { properties: { "class.actions-dropdown-open": "this.showDropdown" } }, ngImport: i0, template: "<div class=\"sds-actions-container me-2\">\r\n <div class=\"btn-group sds-actions-wrapper\">\r\n <ng-content select=\"quickActions\"></ng-content>\r\n\r\n <button\r\n #dropdownButton\r\n class=\"sds-actions-dropdown-button sds-btn-table\"\r\n type=\"button\"\r\n (click)=\"toggleDropdownMenu()\"\r\n >\r\n <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n </fa-icon>\r\n </button>\r\n\r\n <dx-popover\r\n [target]=\"dropdownButton\"\r\n [(visible)]=\"showDropdown\"\r\n [minWidth]=\"dropdownMinWidth\"\r\n [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n >\r\n <dxo-position\r\n my=\"right top\"\r\n at=\"right bottom\"\r\n [of]=\"dropdownButton\"\r\n >\r\n <dxo-offset [y]=\"-7\"></dxo-offset>\r\n </dxo-position>\r\n\r\n <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n <ng-content></ng-content>\r\n </ul>\r\n </dx-popover>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i2.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i3.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i3.DxoOffsetComponent, selector: "dxo-offset", inputs: ["x", "y"] }] });
30
+ SdsTableActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsTableActionsComponent, selector: "sds-table-actions", inputs: { dropdownIcon: "dropdownIcon", dropDownAutoClose: "dropDownAutoClose", dropdownMinWidth: "dropdownMinWidth", hideActionsDropdown: "hideActionsDropdown" }, host: { properties: { "class.actions-dropdown-open": "this.showDropdown" } }, ngImport: i0, template: "<div class=\"sds-actions-container me-2\">\r\n <div class=\"btn-group sds-actions-wrapper\">\r\n <ng-content select=\"quickActions\"></ng-content>\r\n\r\n <ng-container *ngIf=\"!hideActionsDropdown\">\r\n \r\n <button\r\n #dropdownButton\r\n class=\"sds-actions-dropdown-button sds-btn-table\"\r\n type=\"button\"\r\n (click)=\"toggleDropdownMenu()\"\r\n >\r\n <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n </fa-icon>\r\n </button>\r\n\r\n <dx-popover\r\n [target]=\"dropdownButton\"\r\n [(visible)]=\"showDropdown\"\r\n [minWidth]=\"dropdownMinWidth\"\r\n [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n >\r\n <dxo-position\r\n my=\"right top\"\r\n at=\"right bottom\"\r\n [of]=\"dropdownButton\"\r\n >\r\n <dxo-offset [y]=\"-7\"></dxo-offset>\r\n </dxo-position>\r\n\r\n <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n <ng-content></ng-content>\r\n </ul>\r\n </dx-popover>\r\n </ng-container>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i3.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i4.DxoPositionComponent, selector: "dxo-position", inputs: ["at", "boundary", "boundaryOffset", "collision", "my", "of", "offset"] }, { kind: "component", type: i4.DxoOffsetComponent, selector: "dxo-offset", inputs: ["x", "y"] }] });
29
31
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsTableActionsComponent, decorators: [{
30
32
  type: Component,
31
- args: [{ selector: 'sds-table-actions', template: "<div class=\"sds-actions-container me-2\">\r\n <div class=\"btn-group sds-actions-wrapper\">\r\n <ng-content select=\"quickActions\"></ng-content>\r\n\r\n <button\r\n #dropdownButton\r\n class=\"sds-actions-dropdown-button sds-btn-table\"\r\n type=\"button\"\r\n (click)=\"toggleDropdownMenu()\"\r\n >\r\n <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n </fa-icon>\r\n </button>\r\n\r\n <dx-popover\r\n [target]=\"dropdownButton\"\r\n [(visible)]=\"showDropdown\"\r\n [minWidth]=\"dropdownMinWidth\"\r\n [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n >\r\n <dxo-position\r\n my=\"right top\"\r\n at=\"right bottom\"\r\n [of]=\"dropdownButton\"\r\n >\r\n <dxo-offset [y]=\"-7\"></dxo-offset>\r\n </dxo-position>\r\n\r\n <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n <ng-content></ng-content>\r\n </ul>\r\n </dx-popover>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"] }]
33
+ args: [{ selector: 'sds-table-actions', template: "<div class=\"sds-actions-container me-2\">\r\n <div class=\"btn-group sds-actions-wrapper\">\r\n <ng-content select=\"quickActions\"></ng-content>\r\n\r\n <ng-container *ngIf=\"!hideActionsDropdown\">\r\n \r\n <button\r\n #dropdownButton\r\n class=\"sds-actions-dropdown-button sds-btn-table\"\r\n type=\"button\"\r\n (click)=\"toggleDropdownMenu()\"\r\n >\r\n <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n </fa-icon>\r\n </button>\r\n\r\n <dx-popover\r\n [target]=\"dropdownButton\"\r\n [(visible)]=\"showDropdown\"\r\n [minWidth]=\"dropdownMinWidth\"\r\n [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n >\r\n <dxo-position\r\n my=\"right top\"\r\n at=\"right bottom\"\r\n [of]=\"dropdownButton\"\r\n >\r\n <dxo-offset [y]=\"-7\"></dxo-offset>\r\n </dxo-position>\r\n\r\n <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n <ng-content></ng-content>\r\n </ul>\r\n </dx-popover>\r\n </ng-container>\r\n </div>\r\n</div>\r\n", styles: ["::ng-deep .dx-datagrid-rowsview:has(sds-table-actions){overflow:visible}.sds-actions-dropdown-container{list-style:none}::ng-deep .sds-actions-dropdown .dx-popover-arrow{display:none}::ng-deep .sds-actions-dropdown .dx-popup-content{padding:0rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu{list-style:none;padding-left:0;margin-bottom:.25rem;margin-top:.25rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item{padding:.5rem 1rem;font-size:.9rem}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:hover{background-color:var(--bs-gray-200)}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-item:active{background-color:var(--bs-primary);color:#fff}::ng-deep .sds-actions-dropdown .sds-table-dropdown-menu .dropdown-divider{background-color:var(--bs-border-color-translucent);height:1px;margin-top:.25rem;margin-bottom:.25rem}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open),.sds-row:has(sds-table-actions.actions-dropdown-open){background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) td,.sds-row:has(sds-table-actions.actions-dropdown-open) td{background-color:var(--bs-gray-300)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-action-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{border-color:var(--bs-gray-500)!important}::ng-deep .dx-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button,.sds-row:has(sds-table-actions.actions-dropdown-open) sds-table-actions .sds-actions-dropdown-button{background-color:var(--bs-gray-200)!important}\n"] }]
32
34
  }], ctorParameters: function () { return []; }, propDecorators: { dropdownIcon: [{
33
35
  type: Input
34
36
  }], dropDownAutoClose: [{
35
37
  type: Input
36
38
  }], dropdownMinWidth: [{
37
39
  type: Input
40
+ }], hideActionsDropdown: [{
41
+ type: Input
38
42
  }], showDropdown: [{
39
43
  type: HostBinding,
40
44
  args: ['class.actions-dropdown-open']
package/fesm2015/spicainternational-ngx-sds-components-src-lib-table-actions.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-table-actions.mjs","sources":["../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.ts","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.html","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.module.ts","../../../projects/ngx-sds-components/src/lib/table-actions/spicainternational-ngx-sds-components-src-lib-table-actions.ts"],"sourcesContent":["import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, Renderer2, SimpleChanges, ViewChild } from '@angular/core';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\nimport { faEllipsis } from '@fortawesome/pro-regular-svg-icons';\r\nimport { HidingEvent } from 'devextreme/ui/popover';\r\n\r\n@Component({\r\n selector: 'sds-table-actions',\r\n templateUrl: './table-actions.component.html',\r\n styleUrls: ['./table-actions.component.scss'],\r\n})\r\nexport class SdsTableActionsComponent implements OnInit {\r\n\r\n @Input() dropdownIcon: IconProp = faEllipsis;\r\n // @Input() showShadow: boolean = false;\r\n @Input() dropDownAutoClose: 'true' | 'false' | 'inside' | 'outside' = 'true';\r\n @Input() dropdownMinWidth: string = '10rem';\r\n\r\n @HostBinding('class.actions-dropdown-open') protected showDropdown: boolean = false;\r\n\r\n constructor(\r\n\r\n ) {}\r\n\r\n ngOnInit(): void {}\r\n\r\n protected toggleDropdownMenu(): void {\r\n this.showDropdown = !this.showDropdown;\r\n }\r\n\r\n protected closeDropdownMenu(): void {\r\n this.showDropdown = false;\r\n }\r\n\r\n}\r\n","<div class=\"sds-actions-container me-2\">\r\n <div class=\"btn-group sds-actions-wrapper\">\r\n <ng-content select=\"quickActions\"></ng-content>\r\n\r\n <button\r\n #dropdownButton\r\n class=\"sds-actions-dropdown-button sds-btn-table\"\r\n type=\"button\"\r\n (click)=\"toggleDropdownMenu()\"\r\n >\r\n <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n </fa-icon>\r\n </button>\r\n\r\n <dx-popover\r\n [target]=\"dropdownButton\"\r\n [(visible)]=\"showDropdown\"\r\n [minWidth]=\"dropdownMinWidth\"\r\n [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n >\r\n <dxo-position\r\n my=\"right top\"\r\n at=\"right bottom\"\r\n [of]=\"dropdownButton\"\r\n >\r\n <dxo-offset [y]=\"-7\"></dxo-offset>\r\n </dxo-position>\r\n\r\n <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n <ng-content></ng-content>\r\n </ul>\r\n </dx-popover>\r\n </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsTableActionsComponent } from './table-actions.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { DxPopoverModule } from 'devextreme-angular';\r\n\r\n\r\n\r\n@NgModule({\r\n declarations: [\r\n SdsTableActionsComponent\r\n ],\r\n imports: [\r\n CommonModule,\r\n FontAwesomeModule,\r\n DxPopoverModule\r\n ],\r\n exports: [\r\n SdsTableActionsComponent\r\n ]\r\n})\r\nexport class SdsTableActionsModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"spicainternational-ngx-sds-components-src-lib-table-actions.mjs","sources":["../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.ts","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.component.html","../../../projects/ngx-sds-components/src/lib/table-actions/table-actions.module.ts","../../../projects/ngx-sds-components/src/lib/table-actions/spicainternational-ngx-sds-components-src-lib-table-actions.ts"],"sourcesContent":["import { AfterContentInit, Component, HostBinding, Input, OnInit } from '@angular/core';\r\nimport { IconProp } from '@fortawesome/fontawesome-svg-core';\r\nimport { faEllipsis } from '@fortawesome/pro-regular-svg-icons';\r\nimport { HidingEvent } from 'devextreme/ui/popover';\r\n\r\n@Component({\r\n selector: 'sds-table-actions',\r\n templateUrl: './table-actions.component.html',\r\n styleUrls: ['./table-actions.component.scss'],\r\n})\r\nexport class SdsTableActionsComponent implements OnInit {\r\n\r\n @Input() dropdownIcon: IconProp = faEllipsis;\r\n // @Input() showShadow: boolean = false;\r\n @Input() dropDownAutoClose: 'true' | 'false' | 'inside' | 'outside' = 'true';\r\n @Input() dropdownMinWidth: string = '10rem';\r\n @Input() hideActionsDropdown: boolean = false;\r\n\r\n @HostBinding('class.actions-dropdown-open') protected showDropdown: boolean = false;\r\n \r\n\r\n constructor(\r\n\r\n ) {}\r\n\r\n ngOnInit(): void {}\r\n\r\n\r\n \r\n protected toggleDropdownMenu(): void {\r\n this.showDropdown = !this.showDropdown;\r\n }\r\n\r\n protected closeDropdownMenu(): void {\r\n this.showDropdown = false;\r\n }\r\n\r\n}\r\n","<div class=\"sds-actions-container me-2\">\r\n <div class=\"btn-group sds-actions-wrapper\">\r\n <ng-content select=\"quickActions\"></ng-content>\r\n\r\n <ng-container *ngIf=\"!hideActionsDropdown\">\r\n \r\n <button\r\n #dropdownButton\r\n class=\"sds-actions-dropdown-button sds-btn-table\"\r\n type=\"button\"\r\n (click)=\"toggleDropdownMenu()\"\r\n >\r\n <fa-icon [icon]=\"dropdownIcon\" [fixedWidth]=\"true\" [size]=\"'sm'\">\r\n </fa-icon>\r\n </button>\r\n\r\n <dx-popover\r\n [target]=\"dropdownButton\"\r\n [(visible)]=\"showDropdown\"\r\n [minWidth]=\"dropdownMinWidth\"\r\n [wrapperAttr]=\"{ class: 'sds-actions-dropdown' }\"\r\n >\r\n <dxo-position\r\n my=\"right top\"\r\n at=\"right bottom\"\r\n [of]=\"dropdownButton\"\r\n >\r\n <dxo-offset [y]=\"-7\"></dxo-offset>\r\n </dxo-position>\r\n\r\n <ul class=\"sds-table-dropdown-menu\" (click)=\"closeDropdownMenu()\">\r\n <ng-content></ng-content>\r\n </ul>\r\n </dx-popover>\r\n </ng-container>\r\n </div>\r\n</div>\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdsTableActionsComponent } from './table-actions.component';\r\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\r\nimport { DxPopoverModule } from 'devextreme-angular';\r\n\r\n\r\n\r\n@NgModule({\r\n declarations: [\r\n SdsTableActionsComponent\r\n ],\r\n imports: [\r\n CommonModule,\r\n FontAwesomeModule,\r\n DxPopoverModule\r\n ],\r\n exports: [\r\n SdsTableActionsComponent\r\n ]\r\n})\r\nexport class SdsTableActionsModule { }\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
package/fesm2020/spicainternational-ngx-sds-components-src-lib-date-picker.mjs CHANGED
@@ -281,6 +281,7 @@ class SdsDatePickerComponent {
281
281
  cancel: 'Cancel',
282
282
  apply: 'Apply',
283
283
  custom: 'Custom',
284
+ presets: 'Presets',
284
285
  };
285
286
  this.customDateRange = new PeriodPickerDateRange(this.translations.custom, undefined, undefined);
286
287
  this.selectedDateRange = this.customDateRange;
@@ -893,10 +894,10 @@ class SdsDatePickerComponent {
893
894
  }
894
895
  }
895
896
  SdsDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: SdsDatePickerService }], target: i0.ɵɵFactoryTarget.Component });
896
- SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", singleDayFormatFn: "singleDayFormatFn", dateRangeFormatFn: "dateRangeFormatFn", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons", width: "width", dropdownWrapperClass: "dropdownWrapperClass", dropdownWrapperId: "dropdownWrapperId", getPreviousDateCallback: "getPreviousDateCallback", getNextDateCallback: "getNextDateCallback", getPreviousRangeCallback: "getPreviousRangeCallback", getNextRangeCallback: "getNextRangeCallback", useCustomDisplayContent: "useCustomDisplayContent", displayPredefinedDateRangeName: "displayPredefinedDateRangeName", style: "style", compactStyleDisplay: "compactStyleDisplay", dateInputDisplayFormat: "dateInputDisplayFormat", componentAriaLabel: "componentAriaLabel", openDateRangeDefinitionsAriaLabel: "openDateRangeDefinitionsAriaLabel", nextPeriodAriaLabel: "nextPeriodAriaLabel", previousPeriodAriaLabel: "previousPeriodAriaLabel", lockBeforeDate: "lockBeforeDate", lockBeforeDateHint: "lockBeforeDateHint" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, queries: [{ propertyName: "displayContent", first: true, predicate: ["display"], descendants: true }], viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "selectedDateEndBox", first: true, predicate: ["selectedDateEndBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "_selectedDateRangeButton", first: true, predicate: ["selectedDateRangeButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n <div\r\n class=\"datepicker d-inline-flex bg-white sds-no-print\"\r\n role=\"group\"\r\n [attr.aria-label]=\"componentAriaLabel\"\r\n [style.width]=\"width\"\r\n >\r\n\r\n <ng-container *ngIf=\"style == 'classic'\">\r\n <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n >\r\n <button\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n type=\"button\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-start\r\n border-end\r\n p-0\r\n sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n [style.width]=\"dateRangeDefinitionsWidth\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n {{selectedDateRange.name}}\r\n </div>\r\n <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n <span class=\"dropdown-toggle\"></span>\r\n </button>\r\n </div>\r\n\r\n </button>\r\n\r\n <dx-popover\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n [id]=\"elementUUID + '_predefined_periods_dropdown'\"\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\r\n [minWidth]=\"dateRangeDefinitionsWidth\"\r\n\r\n >\r\n <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n role=\"button\"\r\n tabindex=\"0\"\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n (keydown)=\"onRangeKeyReleased($event, range)\"\r\n >\r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n type=\"button\"\r\n [attr.aria-label]=\"previousPeriodAriaLabel\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n #selectedDateRangeButton\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\r\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker = !showDatepicker\"\r\n >\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\"\r\n class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeName}}</span>\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\r\n type=\"button\"\r\n [attr.aria-label]=\"nextPeriodAriaLabel\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"sds-print-only h-100\">\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\"\r\n class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n<dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"onHiddenCalendarPopover()\"\r\n (onShowing)=\"onShowingCalendarPopover()\"\r\n class=\"m-0 p-0\"\r\n [wrapperAttr]=\"{\r\n class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n id: dropdownWrapperId\r\n }\"\r\n>\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n <dx-scroll-view>\r\n <div class=\"d-flex flex-row\">\r\n\r\n <div\r\n *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n class=\"d-flex flex-column p-3 bg-gray-100\"\r\n style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n >\r\n <div class=\"px-3 py-2\">\r\n <label>Presets</label>\r\n </div>\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n >\r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\r\n >\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"selectedDateStart\"\r\n (onValueChanged)=\"onStartDateChange($event)\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"selectedDateEnd\"\r\n (onValueChanged)=\"onEndDateChange($event)\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n >\r\n </dx-date-box>\r\n <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"d-flex justify-content-center align-items-center\"\r\n (click)=\"selectEndDate($event)\">\r\n\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"isDateDisabled\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n >\r\n <div\r\n *dxTemplate=\"let cellData of 'cell'\"\r\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n [style.line-height.px]=\"23\"\r\n\r\n >\r\n\r\n <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\r\n <ng-template #thenLockBlock>\r\n <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\" class=\"locked-day position-absolute-x\"></fa-icon>\r\n </ng-template>\r\n <ng-template #elseDefaultBlock>\r\n {{ cellData.text }}\r\n </ng-template>\r\n </div>\r\n </dx-calendar>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n (click)=\"showDatepicker = false\"\r\n type=\"button\"\r\n >\r\n {{ translations.cancel}}\r\n </button>\r\n <!-- (click)=\"closeDatepickerPopup()\" -->\r\n <button\r\n class=\"btn btn-primary ms-1 sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n {{ translations.apply}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n</dx-popover>\r\n<!-- </div> -->\r\n\r\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"], dependencies: [{ kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i5.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i6.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i6.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "directive", type: i7.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i5.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i5.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }, { kind: "pipe", type: i8.SdsDateComparePipe, name: "sdsDateCompare" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
897
+ SdsDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SdsDatePickerComponent, selector: "sds-date-picker", inputs: { selectionKind: "selectionKind", dateRangeDefinitions: "dateRangeDefinitions", selectedDate: "selectedDate", selectedDateStart: "selectedDateStart", singleDayFormatFn: "singleDayFormatFn", dateRangeFormatFn: "dateRangeFormatFn", selectedDateEnd: "selectedDateEnd", minDate: "minDate", maxDate: "maxDate", locales: "locales", disabled: "disabled", validationError: "validationError", isValid: "isValid", disabledDates: "disabledDates", applyText: "applyText", cancelText: "cancelText", translations: "translations", firstDayOfWeek: "firstDayOfWeek", dateRangeDefinitionsWidth: "dateRangeDefinitionsWidth", showPreviousAndNextButtons: "showPreviousAndNextButtons", width: "width", dropdownWrapperClass: "dropdownWrapperClass", dropdownWrapperId: "dropdownWrapperId", getPreviousDateCallback: "getPreviousDateCallback", getNextDateCallback: "getNextDateCallback", getPreviousRangeCallback: "getPreviousRangeCallback", getNextRangeCallback: "getNextRangeCallback", useCustomDisplayContent: "useCustomDisplayContent", displayPredefinedDateRangeName: "displayPredefinedDateRangeName", style: "style", compactStyleDisplay: "compactStyleDisplay", dateInputDisplayFormat: "dateInputDisplayFormat", componentAriaLabel: "componentAriaLabel", openDateRangeDefinitionsAriaLabel: "openDateRangeDefinitionsAriaLabel", nextPeriodAriaLabel: "nextPeriodAriaLabel", previousPeriodAriaLabel: "previousPeriodAriaLabel", lockBeforeDate: "lockBeforeDate", lockBeforeDateHint: "lockBeforeDateHint" }, outputs: { selectedDateChange: "selectedDateChange", selectedDateStartChange: "selectedDateStartChange", selectedDateEndChange: "selectedDateEndChange", periodChange: "periodChange" }, queries: [{ propertyName: "displayContent", first: true, predicate: ["display"], descendants: true }], viewQueries: [{ propertyName: "singleDatePickerBox", first: true, predicate: ["singleDatePickerBox"], descendants: true }, { propertyName: "selectedDateStartBox", first: true, predicate: ["selectedDateStartBox"], descendants: true }, { propertyName: "selectedDateEndBox", first: true, predicate: ["selectedDateEndBox"], descendants: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "_selectedDateRangeButton", first: true, predicate: ["selectedDateRangeButton"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n <div\r\n class=\"datepicker d-inline-flex bg-white sds-no-print\"\r\n role=\"group\"\r\n [attr.aria-label]=\"componentAriaLabel\"\r\n [style.width]=\"width\"\r\n >\r\n\r\n <ng-container *ngIf=\"style == 'classic'\">\r\n <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n >\r\n <button\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n type=\"button\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-start\r\n border-end\r\n p-0\r\n sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n [style.width]=\"dateRangeDefinitionsWidth\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n {{selectedDateRange.name}}\r\n </div>\r\n <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n <span class=\"dropdown-toggle\"></span>\r\n </button>\r\n </div>\r\n\r\n </button>\r\n\r\n <dx-popover\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n [id]=\"elementUUID + '_predefined_periods_dropdown'\"\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\r\n [minWidth]=\"dateRangeDefinitionsWidth\"\r\n\r\n >\r\n <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n role=\"button\"\r\n tabindex=\"0\"\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n (keydown)=\"onRangeKeyReleased($event, range)\"\r\n >\r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n type=\"button\"\r\n [attr.aria-label]=\"previousPeriodAriaLabel\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n #selectedDateRangeButton\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\r\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker = !showDatepicker\"\r\n >\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\"\r\n class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeName}}</span>\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\r\n type=\"button\"\r\n [attr.aria-label]=\"nextPeriodAriaLabel\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"sds-print-only h-100\">\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\"\r\n class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n<dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"onHiddenCalendarPopover()\"\r\n (onShowing)=\"onShowingCalendarPopover()\"\r\n class=\"m-0 p-0\"\r\n [wrapperAttr]=\"{\r\n class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n id: dropdownWrapperId\r\n }\"\r\n>\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n <dx-scroll-view>\r\n <div class=\"d-flex flex-row\">\r\n\r\n <div\r\n *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n class=\"d-flex flex-column p-3 bg-gray-100\"\r\n style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n >\r\n <div\r\n *ngIf=\"translations.presets\" class=\"px-3 py-2\">\r\n <label>{{ translations.presets }}</label>\r\n </div>\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n >\r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\r\n >\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"selectedDateStart\"\r\n (onValueChanged)=\"onStartDateChange($event)\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"selectedDateEnd\"\r\n (onValueChanged)=\"onEndDateChange($event)\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n >\r\n </dx-date-box>\r\n <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"d-flex justify-content-center align-items-center\"\r\n (click)=\"selectEndDate($event)\">\r\n\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"isDateDisabled\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n >\r\n <div\r\n *dxTemplate=\"let cellData of 'cell'\"\r\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n [style.line-height.px]=\"23\"\r\n\r\n >\r\n\r\n <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\r\n <ng-template #thenLockBlock>\r\n <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\" class=\"locked-day position-absolute-x\"></fa-icon>\r\n </ng-template>\r\n <ng-template #elseDefaultBlock>\r\n {{ cellData.text }}\r\n </ng-template>\r\n </div>\r\n </dx-calendar>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n (click)=\"showDatepicker = false\"\r\n type=\"button\"\r\n >\r\n {{ translations.cancel}}\r\n </button>\r\n <!-- (click)=\"closeDatepickerPopup()\" -->\r\n <button\r\n class=\"btn btn-primary ms-1 sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n {{ translations.apply}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n</dx-popover>\r\n<!-- </div> -->\r\n\r\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"], dependencies: [{ kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i5.DxDateBoxComponent, selector: "dx-date-box", inputs: ["acceptCustomValue", "accessKey", "activeStateEnabled", "adaptivityEnabled", "applyButtonText", "applyValueMode", "buttons", "calendarOptions", "cancelButtonText", "dateOutOfRangeMessage", "dateSerializationFormat", "deferRendering", "disabled", "disabledDates", "displayFormat", "dropDownButtonTemplate", "dropDownOptions", "elementAttr", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "inputAttr", "interval", "invalidDateMessage", "isValid", "label", "labelMode", "max", "maxLength", "min", "name", "opened", "openOnFieldClick", "pickerType", "placeholder", "readOnly", "rtlEnabled", "showAnalogClock", "showClearButton", "showDropDownButton", "spellcheck", "stylingMode", "tabIndex", "text", "todayButtonText", "type", "useMaskBehavior", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "valueChangeEvent", "visible", "width"], outputs: ["onChange", "onClosed", "onContentReady", "onCopy", "onCut", "onDisposing", "onEnterKey", "onFocusIn", "onFocusOut", "onInitialized", "onInput", "onKeyDown", "onKeyUp", "onOpened", "onOptionChanged", "onPaste", "onValueChanged", "acceptCustomValueChange", "accessKeyChange", "activeStateEnabledChange", "adaptivityEnabledChange", "applyButtonTextChange", "applyValueModeChange", "buttonsChange", "calendarOptionsChange", "cancelButtonTextChange", "dateOutOfRangeMessageChange", "dateSerializationFormatChange", "deferRenderingChange", "disabledChange", "disabledDatesChange", "displayFormatChange", "dropDownButtonTemplateChange", "dropDownOptionsChange", "elementAttrChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "inputAttrChange", "intervalChange", "invalidDateMessageChange", "isValidChange", "labelChange", "labelModeChange", "maxChange", "maxLengthChange", "minChange", "nameChange", "openedChange", "openOnFieldClickChange", "pickerTypeChange", "placeholderChange", "readOnlyChange", "rtlEnabledChange", "showAnalogClockChange", "showClearButtonChange", "showDropDownButtonChange", "spellcheckChange", "stylingModeChange", "tabIndexChange", "textChange", "todayButtonTextChange", "typeChange", "useMaskBehaviorChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "valueChangeEventChange", "visibleChange", "widthChange", "onBlur"] }, { kind: "component", type: i6.DxoAnimationComponent, selector: "dxo-animation", inputs: ["hide", "show", "duration", "easing", "enabled", "maxPointCountSupported", "complete", "delay", "direction", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i6.DxoHideComponent, selector: "dxo-hide", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "component", type: i6.DxoShowComponent, selector: "dxo-show", inputs: ["complete", "delay", "direction", "duration", "easing", "from", "staggerDelay", "start", "to", "type"] }, { kind: "directive", type: i7.DxTemplateDirective, selector: "[dxTemplate]", inputs: ["dxTemplateOf"] }, { kind: "component", type: i5.DxPopoverComponent, selector: "dx-popover", inputs: ["animation", "closeOnOutsideClick", "container", "contentTemplate", "copyRootClassesToWrapper", "deferRendering", "disabled", "elementAttr", "height", "hideEvent", "hideOnOutsideClick", "hideOnParentScroll", "hint", "hoverStateEnabled", "maxHeight", "maxWidth", "minHeight", "minWidth", "position", "rtlEnabled", "shading", "shadingColor", "showCloseButton", "showEvent", "showTitle", "target", "title", "titleTemplate", "toolbarItems", "visible", "width", "wrapperAttr"], outputs: ["onContentReady", "onDisposing", "onHidden", "onHiding", "onInitialized", "onOptionChanged", "onShowing", "onShown", "onTitleRendered", "animationChange", "closeOnOutsideClickChange", "containerChange", "contentTemplateChange", "copyRootClassesToWrapperChange", "deferRenderingChange", "disabledChange", "elementAttrChange", "heightChange", "hideEventChange", "hideOnOutsideClickChange", "hideOnParentScrollChange", "hintChange", "hoverStateEnabledChange", "maxHeightChange", "maxWidthChange", "minHeightChange", "minWidthChange", "positionChange", "rtlEnabledChange", "shadingChange", "shadingColorChange", "showCloseButtonChange", "showEventChange", "showTitleChange", "targetChange", "titleChange", "titleTemplateChange", "toolbarItemsChange", "visibleChange", "widthChange", "wrapperAttrChange"] }, { kind: "component", type: i5.DxScrollViewComponent, selector: "dx-scroll-view", inputs: ["bounceEnabled", "direction", "disabled", "elementAttr", "height", "pulledDownText", "pullingDownText", "reachBottomText", "refreshingText", "rtlEnabled", "scrollByContent", "scrollByThumb", "showScrollbar", "useNative", "width"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onPullDown", "onReachBottom", "onScroll", "onUpdated", "bounceEnabledChange", "directionChange", "disabledChange", "elementAttrChange", "heightChange", "pulledDownTextChange", "pullingDownTextChange", "reachBottomTextChange", "refreshingTextChange", "rtlEnabledChange", "scrollByContentChange", "scrollByThumbChange", "showScrollbarChange", "useNativeChange", "widthChange"] }, { kind: "component", type: i5.DxCalendarComponent, selector: "dx-calendar", inputs: ["accessKey", "activeStateEnabled", "cellTemplate", "dateSerializationFormat", "disabled", "disabledDates", "elementAttr", "firstDayOfWeek", "focusStateEnabled", "height", "hint", "hoverStateEnabled", "isValid", "max", "maxZoomLevel", "min", "minZoomLevel", "name", "readOnly", "rtlEnabled", "showTodayButton", "showWeekNumbers", "tabIndex", "validationError", "validationErrors", "validationMessageMode", "validationMessagePosition", "validationStatus", "value", "visible", "weekNumberRule", "width", "zoomLevel"], outputs: ["onDisposing", "onInitialized", "onOptionChanged", "onValueChanged", "accessKeyChange", "activeStateEnabledChange", "cellTemplateChange", "dateSerializationFormatChange", "disabledChange", "disabledDatesChange", "elementAttrChange", "firstDayOfWeekChange", "focusStateEnabledChange", "heightChange", "hintChange", "hoverStateEnabledChange", "isValidChange", "maxChange", "maxZoomLevelChange", "minChange", "minZoomLevelChange", "nameChange", "readOnlyChange", "rtlEnabledChange", "showTodayButtonChange", "showWeekNumbersChange", "tabIndexChange", "validationErrorChange", "validationErrorsChange", "validationMessageModeChange", "validationMessagePositionChange", "validationStatusChange", "valueChange", "visibleChange", "weekNumberRuleChange", "widthChange", "zoomLevelChange", "onBlur"] }, { kind: "pipe", type: i8.SdsDateComparePipe, name: "sdsDateCompare" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
897
898
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SdsDatePickerComponent, decorators: [{
898
899
  type: Component,
899
- args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n <div\r\n class=\"datepicker d-inline-flex bg-white sds-no-print\"\r\n role=\"group\"\r\n [attr.aria-label]=\"componentAriaLabel\"\r\n [style.width]=\"width\"\r\n >\r\n\r\n <ng-container *ngIf=\"style == 'classic'\">\r\n <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n >\r\n <button\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n type=\"button\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-start\r\n border-end\r\n p-0\r\n sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n [style.width]=\"dateRangeDefinitionsWidth\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n {{selectedDateRange.name}}\r\n </div>\r\n <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n <span class=\"dropdown-toggle\"></span>\r\n </button>\r\n </div>\r\n\r\n </button>\r\n\r\n <dx-popover\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n [id]=\"elementUUID + '_predefined_periods_dropdown'\"\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\r\n [minWidth]=\"dateRangeDefinitionsWidth\"\r\n\r\n >\r\n <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n role=\"button\"\r\n tabindex=\"0\"\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n (keydown)=\"onRangeKeyReleased($event, range)\"\r\n >\r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n type=\"button\"\r\n [attr.aria-label]=\"previousPeriodAriaLabel\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n #selectedDateRangeButton\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\r\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker = !showDatepicker\"\r\n >\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\"\r\n class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeName}}</span>\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\r\n type=\"button\"\r\n [attr.aria-label]=\"nextPeriodAriaLabel\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"sds-print-only h-100\">\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\"\r\n class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n<dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"onHiddenCalendarPopover()\"\r\n (onShowing)=\"onShowingCalendarPopover()\"\r\n class=\"m-0 p-0\"\r\n [wrapperAttr]=\"{\r\n class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n id: dropdownWrapperId\r\n }\"\r\n>\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n <dx-scroll-view>\r\n <div class=\"d-flex flex-row\">\r\n\r\n <div\r\n *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n class=\"d-flex flex-column p-3 bg-gray-100\"\r\n style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n >\r\n <div class=\"px-3 py-2\">\r\n <label>Presets</label>\r\n </div>\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n >\r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\r\n >\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"selectedDateStart\"\r\n (onValueChanged)=\"onStartDateChange($event)\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"selectedDateEnd\"\r\n (onValueChanged)=\"onEndDateChange($event)\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n >\r\n </dx-date-box>\r\n <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"d-flex justify-content-center align-items-center\"\r\n (click)=\"selectEndDate($event)\">\r\n\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"isDateDisabled\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n >\r\n <div\r\n *dxTemplate=\"let cellData of 'cell'\"\r\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n [style.line-height.px]=\"23\"\r\n\r\n >\r\n\r\n <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\r\n <ng-template #thenLockBlock>\r\n <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\" class=\"locked-day position-absolute-x\"></fa-icon>\r\n </ng-template>\r\n <ng-template #elseDefaultBlock>\r\n {{ cellData.text }}\r\n </ng-template>\r\n </div>\r\n </dx-calendar>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n (click)=\"showDatepicker = false\"\r\n type=\"button\"\r\n >\r\n {{ translations.cancel}}\r\n </button>\r\n <!-- (click)=\"closeDatepickerPopup()\" -->\r\n <button\r\n class=\"btn btn-primary ms-1 sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n {{ translations.apply}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n</dx-popover>\r\n<!-- </div> -->\r\n\r\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"] }]
900
+ args: [{ selector: 'sds-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <div id=\"datepickerbuttons\"> -->\r\n <div\r\n class=\"datepicker d-inline-flex bg-white sds-no-print\"\r\n role=\"group\"\r\n [attr.aria-label]=\"componentAriaLabel\"\r\n [style.width]=\"width\"\r\n >\r\n\r\n <ng-container *ngIf=\"style == 'classic'\">\r\n <div\r\n class=\"btn-group\"\r\n role=\"group\"\r\n >\r\n <button\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n id=\"pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n type=\"button\"\r\n class=\"\r\n btn btn-white\r\n border\r\n rounded-start\r\n border-end\r\n p-0\r\n sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n [style.width]=\"dateRangeDefinitionsWidth\"\r\n (click)=\"toggleDateRangeSelectorVisibility()\"\r\n >\r\n <div class=\"d-flex align-items-center\">\r\n <div class=\"ps-2 ms-1 me-1 date-range-text text-truncate\">\r\n {{selectedDateRange.name}}\r\n </div>\r\n <button type=\"button\" class=\"btn btn-light date-range-dropdown-button sds-fw-400\" [attr.aria-label]=\"openDateRangeDefinitionsAriaLabel\"\r\n [attr.aria-controls]=\"elementUUID + '_predefined_periods_dropdown'\">\r\n <span class=\"dropdown-toggle\"></span>\r\n </button>\r\n </div>\r\n\r\n </button>\r\n\r\n <dx-popover\r\n *ngIf=\"dateRangeDefinitions && dateRangeDefinitions.length > 0\"\r\n [id]=\"elementUUID + '_predefined_periods_dropdown'\"\r\n target=\"#pickerPredefinedRangeDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showPredefinedOptionsSelector\"\r\n [wrapperAttr]=\"{ class: 'sds-datepicker-ranges-popover sds-dx-popup-no-arrow' }\"\r\n [minWidth]=\"dateRangeDefinitionsWidth\"\r\n\r\n >\r\n <div *dxTemplate=\"let data of 'content'\" cdkTrapFocus>\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n role=\"button\"\r\n tabindex=\"0\"\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n (keydown)=\"onRangeKeyReleased($event, range)\"\r\n >\r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n </dx-popover>\r\n </div>\r\n </ng-container>\r\n\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border border-end-0 pe-2 sds-fw-400\"\r\n [class.rounded-start] = \"style == 'compact' || (!dateRangeDefinitions || dateRangeDefinitions.length === 0)\"\r\n [class.border-start-0] = \"style == 'classic' && dateRangeDefinitions.length > 0\"\r\n type=\"button\"\r\n [attr.aria-label]=\"previousPeriodAriaLabel\"\r\n [disabled]=\"isMinimumLimit || disabled\"\r\n (click)=\"goToPreviousDate()\"\r\n >\r\n <fa-icon [icon]=\"previousPeriodIcon\"></fa-icon>\r\n\r\n </button>\r\n\r\n <button\r\n #selectedDateRangeButton\r\n id=\"pickerDropdown{{ randomIdReference }}\"\r\n class=\"btn btn-white border-top border-bottom text-truncate px-0 selected-period sds-fw-400\"\r\n [class.rounded-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.border-start] = \"(!dateRangeDefinitions || dateRangeDefinitions.length === 0) && !showPreviousAndNextButtons\"\r\n [class.rounded-end] = \"!showPreviousAndNextButtons\"\r\n [class.border-end] = \"!showPreviousAndNextButtons\"\r\n [disabled]=\"disabled\"\r\n type=\"button\"\r\n (click)=\"showDatepicker = !showDatepicker\"\r\n >\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\"\r\n class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeName}}</span>\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </button>\r\n\r\n <button\r\n *ngIf=\"showPreviousAndNextButtons\"\r\n class=\"btn btn-white border rounded-end border-start-0 ps-2 sds-fw-400\"\r\n type=\"button\"\r\n [attr.aria-label]=\"nextPeriodAriaLabel\"\r\n [disabled]=\"isMaximumLimit || disabled\"\r\n (click)=\"goToNextDate()\"\r\n >\r\n <fa-icon [icon]=\"nextPeriodIcon\"></fa-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"sds-print-only h-100\">\r\n\r\n <ng-content *ngIf=\"useCustomDisplayContent\" select=\"display\"></ng-content>\r\n <div *ngIf=\"!useCustomDisplayContent\"\r\n class=\"d-flex justify-content-center align-items-center\">\r\n <!-- <div class=\"mx-1\">\r\n <fa-icon [icon]=\"calendarIcon\" size=\"sm\"></fa-icon>\r\n </div> -->\r\n <div class=\"mx-1 text-truncate\">\r\n <span>{{selectedDateRangeTextSegment1}}</span>\r\n <fa-icon\r\n *ngIf=\"selectedDateRangeTextSegment2\"\r\n class=\"mx-2\"\r\n [icon]=\"toIcon\"\r\n size=\"sm\"\r\n ></fa-icon>\r\n <span>{{selectedDateRangeTextSegment2}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n<dx-popover\r\n target=\"#pickerDropdown{{ randomIdReference }}\"\r\n position=\"bottom\"\r\n [(visible)]=\"showDatepicker\"\r\n (onHiding)=\"onHiddenCalendarPopover()\"\r\n (onShowing)=\"onShowingCalendarPopover()\"\r\n class=\"m-0 p-0\"\r\n [wrapperAttr]=\"{\r\n class: 'sds-datepicker-popover ' + dropdownWrapperClass,\r\n id: dropdownWrapperId\r\n }\"\r\n>\r\n <dxo-animation>\r\n <dxo-show\r\n type=\"pop\"\r\n [from]=\"{ scale: 0.9 }\"\r\n [to]=\"{ scale: 1 }\"\r\n ></dxo-show>\r\n <dxo-hide\r\n type=\"fade\"\r\n [from]=\"1\"\r\n [to]=\"0\"\r\n ></dxo-hide>\r\n </dxo-animation>\r\n <div *dxTemplate=\"let data of 'content'\" (keydown)=\"onKeydown($event)\" tabindex=\"1\">\r\n <dx-scroll-view>\r\n <div class=\"d-flex flex-row\">\r\n\r\n <div\r\n *ngIf=\"style == 'compact' && dateRanges.length > 1\"\r\n class=\"d-flex flex-column p-3 bg-gray-100\"\r\n style=\"border-right: 1px solid var(--bs-gray-200)\"\r\n >\r\n <div\r\n *ngIf=\"translations.presets\" class=\"px-3 py-2\">\r\n <label>{{ translations.presets }}</label>\r\n </div>\r\n <div *ngFor=\"let range of dateRanges\">\r\n <div\r\n class=\"predefined-date-range px-3 py-2 w-100\"\r\n [class.selected]=\"range === selectedDateRange\"\r\n (click)=\"changDateRange(range)\"\r\n >\r\n {{range.name}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div id=\"datepickercomponent\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center px-3 pt-3 pb-2\"\r\n >\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <dx-date-box\r\n #selectedDateStartBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"selectedDateStart\"\r\n (onValueChanged)=\"onStartDateChange($event)\"\r\n (onFocusIn)=\"onStartDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center px-2\">\r\n <fa-icon [icon]=\"toIcon\"></fa-icon>\r\n </div>\r\n\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #selectedDateEndBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input\"\r\n [class.activeInput]=\"!selectedDateFocus\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"selectedDateEnd\"\r\n (onValueChanged)=\"onEndDateChange($event)\"\r\n (onFocusIn)=\"onEndDateFocus()\"\r\n >\r\n </dx-date-box>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bg-white mx-2 px-2 py-2 date-picker-date-selection\">\r\n <div\r\n *ngIf=\"this.selectionKind == 'single'\"\r\n id=\"date-inputs\"\r\n class=\"d-flex flex-wrap justify-content-center align-items-center p-2\"\r\n >\r\n <div class=\"d-flex justify-content-center align-items-center\">\r\n <dx-date-box\r\n #singleDatePickerBox\r\n class=\"border p-1 m-0 text-center rounded datepicker-input datepicker-input-large\"\r\n [class.activeInput]=\"true\"\r\n [showClearButton]=\"false\"\r\n [showDropDownButton]=\"false\"\r\n [useMaskBehavior]=\"true\"\r\n [displayFormat]=\"dateInputDisplayFormat\"\r\n type=\"date\"\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [(value)]=\"selectedDateInternal\"\r\n >\r\n </dx-date-box>\r\n <!-- (onValueChanged)=\" closeDatepickerPopup()\" -->\r\n </div>\r\n </div>\r\n\r\n <div\r\n class=\"d-flex justify-content-center align-items-center\"\r\n (click)=\"selectEndDate($event)\">\r\n\r\n <dx-calendar\r\n #calendar\r\n [min]=\"minDate || minDateDefault\"\r\n [max]=\"maxDate || maxDateDefault\"\r\n [disabledDates]=\"isDateDisabled\"\r\n [isValid]=\"isValid\"\r\n [validationError]=\"validationError\"\r\n [disabled]=\"disabled\"\r\n [value]=\"this.selectionKind == 'period' ? selectedDateCalendar : selectedDateInternal\"\r\n (onValueChanged)=\"onDateChange($event)\"\r\n [firstDayOfWeek]=\"firstDayOfWeek\"\r\n >\r\n <div\r\n *dxTemplate=\"let cellData of 'cell'\"\r\n [class]=\"'h-100 pt-1' + getCellCssClass(cellData.date)\"\r\n [style.line-height.px]=\"23\"\r\n\r\n >\r\n\r\n <div *ngIf=\"lockBeforeDate && (cellData.date | sdsDateCompare: lockBeforeDate : 'lte'); then thenLockBlock else elseDefaultBlock\"></div>\r\n <ng-template #thenLockBlock>\r\n <fa-icon [title]=\"lockBeforeDateHint\" [icon]=\"lockIcon\" class=\"locked-day position-absolute-x\"></fa-icon>\r\n </ng-template>\r\n <ng-template #elseDefaultBlock>\r\n {{ cellData.text }}\r\n </ng-template>\r\n </div>\r\n </dx-calendar>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"this.selectionKind == 'period'\"\r\n class=\"d-flex justify-content-end align-items-center px-3 pt-2 pb-3\"\r\n >\r\n <button\r\n class=\"btn btn-secondary sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n (click)=\"showDatepicker = false\"\r\n type=\"button\"\r\n >\r\n {{ translations.cancel}}\r\n </button>\r\n <!-- (click)=\"closeDatepickerPopup()\" -->\r\n <button\r\n class=\"btn btn-primary ms-1 sds-fw-400\"\r\n [disabled]=\"disabled\"\r\n (click)=\"applyPeriodPicker()\"\r\n type=\"button\"\r\n >\r\n {{ translations.apply}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </dx-scroll-view>\r\n </div>\r\n</dx-popover>\r\n<!-- </div> -->\r\n\r\n", styles: ["#datepickercomponent .datepicker-input{width:125px}#datepickercomponent .datepicker-input-large{width:250px!important}#datepickercomponent .datepicker-input.activeInput{border-color:#2886b1!important;border-width:2px!important}#datepickercomponent ::ng-deep .dx-calendar-cell{padding:inherit!important}#datepickercomponent ::ng-deep .dx-calendar-cell.dx-calendar-other-month{opacity:.5!important}#datepickercomponent .timebox-fixed-width{width:80px}#datepickercomponent ::ng-deep .text-center .dx-texteditor-input{text-align:center!important}#datepickercomponent ::ng-deep .p-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .p-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}#datepickercomponent ::ng-deep .px-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .px-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .py-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pb-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pt-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pl-5 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-0 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-1 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-2 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-3 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-4 .dx-texteditor-input,#datepickercomponent ::ng-deep .pr-5 .dx-texteditor-input{min-height:inherit!important;padding:inherit!important}.datepicker{display:inline-flex}.datepicker .border,.datepicker .border-bottom,.datepicker .border-top,.datepicker .border-left,.datepicker .border-right{border-color:var(--bs-gray-400)!important}.datepicker>button{border-radius:0;border-left:none;border-right:none}.datepicker .preselect-options-fixed-width{width:150px}.datepicker .selected-period{flex:1 1 auto}.datepicker .date-range-dropdown-button{box-shadow:none!important;border:1px solid white;flex:0;padding-top:.3rem!important;padding-bottom:.3rem!important}.datepicker .date-range-text{flex:1;min-width:0;text-align:start}.predefined-date-range{cursor:pointer;font-size:1rem;line-height:1.5rem;min-width:10rem;border-radius:2px}.predefined-date-range:hover{background-color:#0000000a}.predefined-date-range:active{color:#fff;background-color:#3b8fc2}.predefined-date-range.selected:not(:active){background-color:#e6e6e6}::ng-deep .sds-datepicker-popover.dx-popover-wrapper .dx-popup-content{padding:0}::ng-deep .sds-datepicker-ranges-popover .dx-popup-content{padding:.25rem;font-size:1rem}::ng-deep .sds-datepicker-ranges-popover .dropdown-item:focus{outline:none}::ng-deep .sds-datepicker-ranges-popover .dropdown-item .selected{background-color:var(--bs-gray-300)}::ng-deep .sds-datepicker-popover .date-picker-date-selection dx-calendar .dx-calendar-cell.dx-calendar-empty-cell:has(fa-icon.locked-day){background:initial!important}\n"] }]
900
901
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: SdsDatePickerService }]; }, propDecorators: { displayContent: [{
901
902
  type: ContentChild,
902
903
  args: ['display']