@alauda/ui 7.3.2-beta.3 → 7.3.2-beta.5

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.
@@ -3997,7 +3997,7 @@ class TimePickerPanelComponent extends CommonFormControl {
3997
3997
  useExisting: forwardRef(() => TimePickerPanelComponent),
3998
3998
  multi: true,
3999
3999
  },
4000
- ], viewQueries: [{ propertyName: "hourRef", first: true, predicate: ["hourRef"], descendants: true }, { propertyName: "minuteRef", first: true, predicate: ["minuteRef"], descendants: true }, { propertyName: "secondRef", first: true, predicate: ["secondRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"enabledColumns\"\n [class]=\"bem.block()\"\n [style.width.px]=\"totalWidth\"\n>\n <div [class]=\"bem.element('content')\">\n <div\n [class]=\"bem.element('column')\"\n #hourRef\n *ngIf=\"hourEnabled\"\n >\n <ul>\n <li\n *ngFor=\"let item of getControlTypeConfig(TimePickerControlType.Hour)\"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Hour),\n selected: matchValue(item, TimePickerControlType.Hour, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Hour)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div\n [class]=\"bem.element('column')\"\n #minuteRef\n *ngIf=\"minuteEnabled\"\n >\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Minute);\n trackBy: trackBy\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Minute),\n selected: matchValue(item, TimePickerControlType.Minute, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Minute)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div\n [class]=\"bem.element('column')\"\n #secondRef\n *ngIf=\"secondEnabled\"\n >\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Second)\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Second),\n selected: matchValue(item, TimePickerControlType.Second, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Second)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!footerTemplate; else customFooter\">\n <div [class]=\"bem.element('footer')\">\n <button\n aui-button=\"inline\"\n (click)=\"selectNow()\"\n [size]=\"ComponentSize.Small\"\n >\n {{ 'now' | auiI18n }}\n </button>\n <button\n aui-button=\"primary\"\n [size]=\"ComponentSize.Small\"\n (click)=\"$event.stopImmediatePropagation(); confirm.next()\"\n >\n {{ 'confirm' | auiI18n }}\n </button>\n </div>\n </ng-container>\n <ng-template #customFooter>\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n </ng-template>\n</div>\n", styles: [".aui-time-picker-panel{display:flex;flex-direction:column;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);overflow:hidden;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}:root .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-time-picker-panel ul,.aui-time-picker-panel li{border:none}.aui-time-picker-panel__content{display:flex;flex-direction:row;height:252px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:9px}.aui-time-picker-panel__column{flex:1;align-self:stretch;text-align:center;overflow:auto}.aui-time-picker-panel__column::-webkit-scrollbar{width:4px;height:4px}.aui-time-picker-panel__column::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-time-picker-panel__column::-webkit-scrollbar-corner{background-color:transparent}.aui-time-picker-panel__column ul{min-height:252px;list-style:none;padding:0;margin:0}.aui-time-picker-panel__column-strut{height:224px;width:1px;visibility:hidden}.aui-time-picker-panel__column+.aui-time-picker-panel__column{border-left:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__cell{flex:none;width:100%;height:28px;color:rgb(var(--aui-color-main-text));line-height:28px;cursor:pointer}.aui-time-picker-panel__cell:hover{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary))}.aui-time-picker-panel__cell.selected{background-color:rgb(var(--aui-color-p-7));color:rgb(var(--aui-color-primary));font-weight:var(--aui-font-weight-bold)}.aui-time-picker-panel__cell.disabled{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-disabled-text));cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: I18nPipe, name: "auiI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
4000
+ ], viewQueries: [{ propertyName: "hourRef", first: true, predicate: ["hourRef"], descendants: true }, { propertyName: "minuteRef", first: true, predicate: ["minuteRef"], descendants: true }, { propertyName: "secondRef", first: true, predicate: ["secondRef"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"enabledColumns\"\n [class]=\"bem.block()\"\n [style.width.px]=\"totalWidth\"\n>\n <div [class]=\"bem.element('content')\">\n <div\n [class]=\"bem.element('column')\"\n #hourRef\n *ngIf=\"hourEnabled\"\n >\n <ul>\n <li\n *ngFor=\"let item of getControlTypeConfig(TimePickerControlType.Hour)\"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Hour),\n selected: matchValue(item, TimePickerControlType.Hour, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Hour)\"\n >\n {{ item | number : '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div\n [class]=\"bem.element('column')\"\n #minuteRef\n *ngIf=\"minuteEnabled\"\n >\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Minute);\n trackBy: trackBy\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Minute),\n selected: matchValue(item, TimePickerControlType.Minute, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Minute)\"\n >\n {{ item | number : '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div\n [class]=\"bem.element('column')\"\n #secondRef\n *ngIf=\"secondEnabled\"\n >\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Second)\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Second),\n selected: matchValue(item, TimePickerControlType.Second, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Second)\"\n >\n {{ item | number : '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!footerTemplate; else customFooter\">\n <div [class]=\"bem.element('footer')\">\n <button\n aui-button=\"inline\"\n (click)=\"selectNow()\"\n [size]=\"ComponentSize.Small\"\n >\n {{ 'now' | auiI18n }}\n </button>\n <button\n aui-button=\"primary\"\n [size]=\"ComponentSize.Small\"\n (click)=\"$event.stopImmediatePropagation(); confirm.next()\"\n >\n {{ 'confirm' | auiI18n }}\n </button>\n </div>\n </ng-container>\n <ng-template #customFooter>\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n </ng-template>\n</div>\n", styles: [".aui-time-picker-panel{display:flex;flex-direction:column;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);overflow:hidden;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}:root .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-time-picker-panel ul,.aui-time-picker-panel li{border:none}.aui-time-picker-panel__content{display:flex;flex-direction:row;height:252px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:9px}.aui-time-picker-panel__column{flex:1;align-self:stretch;text-align:center;overflow:auto}.aui-time-picker-panel__column::-webkit-scrollbar{width:4px;height:4px}.aui-time-picker-panel__column::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-time-picker-panel__column::-webkit-scrollbar-corner{background-color:transparent}.aui-time-picker-panel__column ul{min-height:252px;list-style:none;padding:0;margin:0}.aui-time-picker-panel__column-strut{height:224px;width:1px;visibility:hidden}.aui-time-picker-panel__column+.aui-time-picker-panel__column{border-left:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__cell{flex:none;width:100%;height:28px;color:rgb(var(--aui-color-main-text));line-height:28px;cursor:pointer}.aui-time-picker-panel__cell:hover{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary))}.aui-time-picker-panel__cell.selected{background-color:rgb(var(--aui-color-p-7));color:rgb(var(--aui-color-primary));font-weight:var(--aui-font-weight-bold)}.aui-time-picker-panel__cell.disabled{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-disabled-text));cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: I18nPipe, name: "auiI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
4001
4001
  }
4002
4002
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: TimePickerPanelComponent, decorators: [{
4003
4003
  type: Component,
@@ -4015,7 +4015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
4015
4015
  NgTemplateOutlet,
4016
4016
  DecimalPipe,
4017
4017
  I18nPipe,
4018
- ], template: "<div\n *ngIf=\"enabledColumns\"\n [class]=\"bem.block()\"\n [style.width.px]=\"totalWidth\"\n>\n <div [class]=\"bem.element('content')\">\n <div\n [class]=\"bem.element('column')\"\n #hourRef\n *ngIf=\"hourEnabled\"\n >\n <ul>\n <li\n *ngFor=\"let item of getControlTypeConfig(TimePickerControlType.Hour)\"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Hour),\n selected: matchValue(item, TimePickerControlType.Hour, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Hour)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div\n [class]=\"bem.element('column')\"\n #minuteRef\n *ngIf=\"minuteEnabled\"\n >\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Minute);\n trackBy: trackBy\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Minute),\n selected: matchValue(item, TimePickerControlType.Minute, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Minute)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div\n [class]=\"bem.element('column')\"\n #secondRef\n *ngIf=\"secondEnabled\"\n >\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Second)\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Second),\n selected: matchValue(item, TimePickerControlType.Second, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Second)\"\n >\n {{ item | number: '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!footerTemplate; else customFooter\">\n <div [class]=\"bem.element('footer')\">\n <button\n aui-button=\"inline\"\n (click)=\"selectNow()\"\n [size]=\"ComponentSize.Small\"\n >\n {{ 'now' | auiI18n }}\n </button>\n <button\n aui-button=\"primary\"\n [size]=\"ComponentSize.Small\"\n (click)=\"$event.stopImmediatePropagation(); confirm.next()\"\n >\n {{ 'confirm' | auiI18n }}\n </button>\n </div>\n </ng-container>\n <ng-template #customFooter>\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n </ng-template>\n</div>\n", styles: [".aui-time-picker-panel{display:flex;flex-direction:column;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);overflow:hidden;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}:root .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-time-picker-panel ul,.aui-time-picker-panel li{border:none}.aui-time-picker-panel__content{display:flex;flex-direction:row;height:252px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:9px}.aui-time-picker-panel__column{flex:1;align-self:stretch;text-align:center;overflow:auto}.aui-time-picker-panel__column::-webkit-scrollbar{width:4px;height:4px}.aui-time-picker-panel__column::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-time-picker-panel__column::-webkit-scrollbar-corner{background-color:transparent}.aui-time-picker-panel__column ul{min-height:252px;list-style:none;padding:0;margin:0}.aui-time-picker-panel__column-strut{height:224px;width:1px;visibility:hidden}.aui-time-picker-panel__column+.aui-time-picker-panel__column{border-left:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__cell{flex:none;width:100%;height:28px;color:rgb(var(--aui-color-main-text));line-height:28px;cursor:pointer}.aui-time-picker-panel__cell:hover{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary))}.aui-time-picker-panel__cell.selected{background-color:rgb(var(--aui-color-p-7));color:rgb(var(--aui-color-primary));font-weight:var(--aui-font-weight-bold)}.aui-time-picker-panel__cell.disabled{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-disabled-text));cursor:not-allowed}\n"] }]
4018
+ ], template: "<div\n *ngIf=\"enabledColumns\"\n [class]=\"bem.block()\"\n [style.width.px]=\"totalWidth\"\n>\n <div [class]=\"bem.element('content')\">\n <div\n [class]=\"bem.element('column')\"\n #hourRef\n *ngIf=\"hourEnabled\"\n >\n <ul>\n <li\n *ngFor=\"let item of getControlTypeConfig(TimePickerControlType.Hour)\"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Hour),\n selected: matchValue(item, TimePickerControlType.Hour, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Hour)\"\n >\n {{ item | number : '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div\n [class]=\"bem.element('column')\"\n #minuteRef\n *ngIf=\"minuteEnabled\"\n >\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Minute);\n trackBy: trackBy\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Minute),\n selected: matchValue(item, TimePickerControlType.Minute, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Minute)\"\n >\n {{ item | number : '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n <div\n [class]=\"bem.element('column')\"\n #secondRef\n *ngIf=\"secondEnabled\"\n >\n <ul>\n <li\n *ngFor=\"\n let item of getControlTypeConfig(TimePickerControlType.Second)\n \"\n [class]=\"bem.element('cell')\"\n [style.height.px]=\"CONTROL_ITEM_HEIGHT\"\n [ngClass]=\"{\n disabled: isDisabled(item, TimePickerControlType.Second),\n selected: matchValue(item, TimePickerControlType.Second, model)\n }\"\n (click)=\"selectValue(item, TimePickerControlType.Second)\"\n >\n {{ item | number : '2.0-0' }}\n </li>\n </ul>\n <div [class]=\"bem.element('column-strut')\"></div>\n </div>\n </div>\n\n <ng-container *ngIf=\"!footerTemplate; else customFooter\">\n <div [class]=\"bem.element('footer')\">\n <button\n aui-button=\"inline\"\n (click)=\"selectNow()\"\n [size]=\"ComponentSize.Small\"\n >\n {{ 'now' | auiI18n }}\n </button>\n <button\n aui-button=\"primary\"\n [size]=\"ComponentSize.Small\"\n (click)=\"$event.stopImmediatePropagation(); confirm.next()\"\n >\n {{ 'confirm' | auiI18n }}\n </button>\n </div>\n </ng-container>\n <ng-template #customFooter>\n <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\n </ng-template>\n</div>\n", styles: [".aui-time-picker-panel{display:flex;flex-direction:column;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-m);overflow:hidden;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}:root .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-time-picker-panel{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-time-picker-panel ul,.aui-time-picker-panel li{border:none}.aui-time-picker-panel__content{display:flex;flex-direction:row;height:252px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__footer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:9px}.aui-time-picker-panel__column{flex:1;align-self:stretch;text-align:center;overflow:auto}.aui-time-picker-panel__column::-webkit-scrollbar{width:4px;height:4px}.aui-time-picker-panel__column::-webkit-scrollbar-thumb{border-radius:2px;background-color:rgba(var(--aui-color-n-1),.2)}.aui-time-picker-panel__column::-webkit-scrollbar-corner{background-color:transparent}.aui-time-picker-panel__column ul{min-height:252px;list-style:none;padding:0;margin:0}.aui-time-picker-panel__column-strut{height:224px;width:1px;visibility:hidden}.aui-time-picker-panel__column+.aui-time-picker-panel__column{border-left:1px solid rgb(var(--aui-color-n-8))}.aui-time-picker-panel__cell{flex:none;width:100%;height:28px;color:rgb(var(--aui-color-main-text));line-height:28px;cursor:pointer}.aui-time-picker-panel__cell:hover{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary))}.aui-time-picker-panel__cell.selected{background-color:rgb(var(--aui-color-p-7));color:rgb(var(--aui-color-primary));font-weight:var(--aui-font-weight-bold)}.aui-time-picker-panel__cell.disabled{background-color:rgb(var(--aui-color-n-8));color:rgb(var(--aui-color-disabled-text));cursor:not-allowed}\n"] }]
4019
4019
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { format: [{
4020
4020
  type: Input
4021
4021
  }], onMousedown: [{
@@ -5731,7 +5731,7 @@ class DateRangePickerPanelComponent extends CommonFormControl {
5731
5731
  useExisting: forwardRef(() => DateRangePickerPanelComponent),
5732
5732
  multi: true,
5733
5733
  },
5734
- ], usesInheritance: true, ngImport: i0, template: "<div [class]=\"bem.element('container')\">\n <div [class]=\"bem.element('header')\">\n <aui-calendar-header\n [dateNavRange]=\"leftDateRange\"\n [anchor]=\"leftAnchor\"\n (navRangeChange)=\"calendarRangeChange($event, Side.Left)\"\n (anchorChange)=\"leftAnchor = $event\"\n [maxAvail]=\"maxHeaderAvail\"\n [minAvail]=\"minDate\"\n ></aui-calendar-header>\n <aui-calendar-header\n [dateNavRange]=\"rightDateRange\"\n [anchor]=\"rightAnchor\"\n (navRangeChange)=\"calendarRangeChange($event, Side.Right)\"\n (anchorChange)=\"rightAnchor = $event\"\n [minAvail]=\"minHeaderAvail\"\n [maxAvail]=\"maxDate\"\n ></aui-calendar-header>\n </div>\n <div [class]=\"bem.element('body')\">\n <aui-picker-panel\n class=\"panel__wrapper\"\n [navRange]=\"leftDateRange\"\n [type]=\"DatePickerType.Day\"\n [anchor]=\"leftAnchor\"\n [matchDates]=\"matchValues\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabledDate]=\"getDateDisabledFn(Side.Left, rightAnchor)\"\n [weekStartDay]=\"weekStartDay\"\n (hovered)=\"hoverItem($event)\"\n (select)=\"selectPickerPanel($event, Side.Left)\"\n ></aui-picker-panel>\n <aui-picker-panel\n class=\"panel__wrapper\"\n [navRange]=\"rightDateRange\"\n [type]=\"DatePickerType.Day\"\n [anchor]=\"rightAnchor\"\n [weekStartDay]=\"weekStartDay\"\n [matchDates]=\"matchValues\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabledDate]=\"getDateDisabledFn(Side.Right, leftAnchor)\"\n (hovered)=\"hoverItem($event)\"\n (select)=\"selectPickerPanel($event, Side.Right)\"\n ></aui-picker-panel>\n </div>\n\n <aui-calendar-footer\n [class]=\"bem.element('footer')\"\n [clearable]=\"clearable\"\n [clearText]=\"clearText\"\n (clear)=\"clear.next()\"\n (confirm)=\"confirmValue(rangeValue)\"\n *ngIf=\"showFooter && showTime\"\n >\n <div\n [class]=\"bem.element('footer-content')\"\n *ngIf=\"showTime\"\n >\n <ng-container\n [ngTemplateOutlet]=\"datePlaceholder\"\n [ngTemplateOutletContext]=\"{\n placeholder: 'start_date' | auiI18n,\n value: rangeValue[0]\n }\"\n ></ng-container>\n <aui-time-picker\n [showIcon]=\"false\"\n [(ngModel)]=\"startTime\"\n size=\"small\"\n (ngModelChange)=\"timeChange($event)\"\n [disableHours]=\"leftDisabledTimeFn(rangeValue[0], 'hours')\"\n [disableMinutes]=\"leftDisabledTimeFn(rangeValue[0], 'minutes')\"\n [disableSeconds]=\"leftDisabledTimeFn(rangeValue[0], 'seconds')\"\n [placeholder]=\"'select_time' | auiI18n\"\n tooltipPosition=\"top start\"\n ></aui-time-picker>\n\n <span class=\"placeholder separator\">{{ 'to' | auiI18n }}</span>\n <ng-container\n [ngTemplateOutlet]=\"datePlaceholder\"\n [ngTemplateOutletContext]=\"{\n placeholder: 'end_date' | auiI18n,\n value: rangeValue[1]\n }\"\n ></ng-container>\n <aui-time-picker\n [showIcon]=\"false\"\n size=\"small\"\n [(ngModel)]=\"endTime\"\n [disableHours]=\"rightDisabledTimeFn(rangeValue[1], 'hours')\"\n [disableMinutes]=\"rightDisabledTimeFn(rangeValue[1], 'minutes')\"\n [disableSeconds]=\"rightDisabledTimeFn(rangeValue[1], 'seconds')\"\n (ngModelChange)=\"timeChange($event)\"\n [placeholder]=\"'select_time' | auiI18n\"\n tooltipPosition=\"top start\"\n ></aui-time-picker>\n </div>\n </aui-calendar-footer>\n</div>\n\n<ng-template\n #datePlaceholder\n let-placeholder=\"placeholder\"\n let-value=\"value\"\n>\n <span\n *ngIf=\"!value\"\n class=\"placeholder date-holder\"\n >{{ placeholder }}</span\n >\n <span\n *ngIf=\"value\"\n class=\"date-value date-holder\"\n >{{ value | date: FOOTER_DATE_FORMAT }}</span\n >\n</ng-template>\n", styles: [".aui-date-range-picker-panel__container{display:flex;flex-direction:column;width:524px;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-date-range-picker-panel__container .placeholder{color:rgb(var(--aui-color-placeholder-text))}.aui-date-range-picker-panel__container .placeholder.separator{margin-inline:12px}.aui-date-range-picker-panel__container .date-value{color:rgb(var(--aui-color-main-text))}.aui-date-range-picker-panel__container .date-holder{display:inline-block;margin-right:8px;width:82px}.aui-date-range-picker-panel__container .panel__wrapper{width:246px;display:flex;justify-content:center}.aui-date-range-picker-panel__header{display:flex;justify-content:space-between}.aui-date-range-picker-panel__header aui-calendar-header{flex:0 0 246px}.aui-date-range-picker-panel__body{display:flex;justify-content:space-between;margin:16px 0}.aui-date-range-picker-panel__footer .aui-time-picker{width:88px}.aui-date-range-picker-panel__footer-content{display:flex;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "aui-calendar-header", inputs: ["dateNavRange", "anchor", "maxAvail", "minAvail"], outputs: ["navRangeChange", "anchorChange"] }, { kind: "component", type: PickerPanelComponent, selector: "aui-picker-panel", inputs: ["navRange", "type", "anchor", "matchDates", "disabledDate", "weekStartDay", "minDate", "maxDate"], outputs: ["select", "hovered"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarFooterComponent, selector: "aui-calendar-footer", inputs: ["clearable", "clearText", "customAction"], outputs: ["confirm", "clear"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TimePickerComponent, selector: "aui-time-picker", inputs: ["format", "size", "placeholder", "clearable", "showIcon", "disableHours", "disableMinutes", "disableSeconds", "hourStep", "minuteStep", "secondStep", "footerTemplate"], outputs: ["open", "close"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: I18nPipe, name: "auiI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5734
+ ], usesInheritance: true, ngImport: i0, template: "<div [class]=\"bem.element('container')\">\n <div [class]=\"bem.element('header')\">\n <aui-calendar-header\n [dateNavRange]=\"leftDateRange\"\n [anchor]=\"leftAnchor\"\n (navRangeChange)=\"calendarRangeChange($event, Side.Left)\"\n (anchorChange)=\"leftAnchor = $event\"\n [maxAvail]=\"maxHeaderAvail\"\n [minAvail]=\"minDate\"\n ></aui-calendar-header>\n <aui-calendar-header\n [dateNavRange]=\"rightDateRange\"\n [anchor]=\"rightAnchor\"\n (navRangeChange)=\"calendarRangeChange($event, Side.Right)\"\n (anchorChange)=\"rightAnchor = $event\"\n [minAvail]=\"minHeaderAvail\"\n [maxAvail]=\"maxDate\"\n ></aui-calendar-header>\n </div>\n <div [class]=\"bem.element('body')\">\n <aui-picker-panel\n class=\"panel__wrapper\"\n [navRange]=\"leftDateRange\"\n [type]=\"DatePickerType.Day\"\n [anchor]=\"leftAnchor\"\n [matchDates]=\"matchValues\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabledDate]=\"getDateDisabledFn(Side.Left, rightAnchor)\"\n [weekStartDay]=\"weekStartDay\"\n (hovered)=\"hoverItem($event)\"\n (select)=\"selectPickerPanel($event, Side.Left)\"\n ></aui-picker-panel>\n <aui-picker-panel\n class=\"panel__wrapper\"\n [navRange]=\"rightDateRange\"\n [type]=\"DatePickerType.Day\"\n [anchor]=\"rightAnchor\"\n [weekStartDay]=\"weekStartDay\"\n [matchDates]=\"matchValues\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabledDate]=\"getDateDisabledFn(Side.Right, leftAnchor)\"\n (hovered)=\"hoverItem($event)\"\n (select)=\"selectPickerPanel($event, Side.Right)\"\n ></aui-picker-panel>\n </div>\n\n <aui-calendar-footer\n [class]=\"bem.element('footer')\"\n [clearable]=\"clearable\"\n [clearText]=\"clearText\"\n (clear)=\"clear.next()\"\n (confirm)=\"confirmValue(rangeValue)\"\n *ngIf=\"showFooter && showTime\"\n >\n <div\n [class]=\"bem.element('footer-content')\"\n *ngIf=\"showTime\"\n >\n <ng-container\n [ngTemplateOutlet]=\"datePlaceholder\"\n [ngTemplateOutletContext]=\"{\n placeholder: 'start_date' | auiI18n,\n value: rangeValue[0]\n }\"\n ></ng-container>\n <aui-time-picker\n [showIcon]=\"false\"\n [(ngModel)]=\"startTime\"\n size=\"small\"\n (ngModelChange)=\"timeChange($event)\"\n [disableHours]=\"leftDisabledTimeFn(rangeValue[0], 'hours')\"\n [disableMinutes]=\"leftDisabledTimeFn(rangeValue[0], 'minutes')\"\n [disableSeconds]=\"leftDisabledTimeFn(rangeValue[0], 'seconds')\"\n [placeholder]=\"'select_time' | auiI18n\"\n tooltipPosition=\"top start\"\n ></aui-time-picker>\n\n <span class=\"placeholder separator\">{{ 'to' | auiI18n }}</span>\n <ng-container\n [ngTemplateOutlet]=\"datePlaceholder\"\n [ngTemplateOutletContext]=\"{\n placeholder: 'end_date' | auiI18n,\n value: rangeValue[1]\n }\"\n ></ng-container>\n <aui-time-picker\n [showIcon]=\"false\"\n size=\"small\"\n [(ngModel)]=\"endTime\"\n [disableHours]=\"rightDisabledTimeFn(rangeValue[1], 'hours')\"\n [disableMinutes]=\"rightDisabledTimeFn(rangeValue[1], 'minutes')\"\n [disableSeconds]=\"rightDisabledTimeFn(rangeValue[1], 'seconds')\"\n (ngModelChange)=\"timeChange($event)\"\n [placeholder]=\"'select_time' | auiI18n\"\n tooltipPosition=\"top start\"\n ></aui-time-picker>\n </div>\n </aui-calendar-footer>\n</div>\n\n<ng-template\n #datePlaceholder\n let-placeholder=\"placeholder\"\n let-value=\"value\"\n>\n <span\n *ngIf=\"!value\"\n class=\"placeholder date-holder\"\n >{{ placeholder }}</span\n >\n <span\n *ngIf=\"value\"\n class=\"date-value date-holder\"\n >{{ value | date : FOOTER_DATE_FORMAT }}</span\n >\n</ng-template>\n", styles: [".aui-date-range-picker-panel__container{display:flex;flex-direction:column;width:524px;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-date-range-picker-panel__container .placeholder{color:rgb(var(--aui-color-placeholder-text))}.aui-date-range-picker-panel__container .placeholder.separator{margin-inline:12px}.aui-date-range-picker-panel__container .date-value{color:rgb(var(--aui-color-main-text))}.aui-date-range-picker-panel__container .date-holder{display:inline-block;margin-right:8px;width:82px}.aui-date-range-picker-panel__container .panel__wrapper{width:246px;display:flex;justify-content:center}.aui-date-range-picker-panel__header{display:flex;justify-content:space-between}.aui-date-range-picker-panel__header aui-calendar-header{flex:0 0 246px}.aui-date-range-picker-panel__body{display:flex;justify-content:space-between;margin:16px 0}.aui-date-range-picker-panel__footer .aui-time-picker{width:88px}.aui-date-range-picker-panel__footer-content{display:flex;align-items:center;height:100%}\n"], dependencies: [{ kind: "component", type: CalendarHeaderComponent, selector: "aui-calendar-header", inputs: ["dateNavRange", "anchor", "maxAvail", "minAvail"], outputs: ["navRangeChange", "anchorChange"] }, { kind: "component", type: PickerPanelComponent, selector: "aui-picker-panel", inputs: ["navRange", "type", "anchor", "matchDates", "disabledDate", "weekStartDay", "minDate", "maxDate"], outputs: ["select", "hovered"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarFooterComponent, selector: "aui-calendar-footer", inputs: ["clearable", "clearText", "customAction"], outputs: ["confirm", "clear"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TimePickerComponent, selector: "aui-time-picker", inputs: ["format", "size", "placeholder", "clearable", "showIcon", "disableHours", "disableMinutes", "disableSeconds", "hourStep", "minuteStep", "secondStep", "footerTemplate"], outputs: ["open", "close"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: I18nPipe, name: "auiI18n" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5735
5735
  }
5736
5736
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DateRangePickerPanelComponent, decorators: [{
5737
5737
  type: Component,
@@ -5751,7 +5751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
5751
5751
  FormsModule,
5752
5752
  DatePipe,
5753
5753
  I18nPipe,
5754
- ], template: "<div [class]=\"bem.element('container')\">\n <div [class]=\"bem.element('header')\">\n <aui-calendar-header\n [dateNavRange]=\"leftDateRange\"\n [anchor]=\"leftAnchor\"\n (navRangeChange)=\"calendarRangeChange($event, Side.Left)\"\n (anchorChange)=\"leftAnchor = $event\"\n [maxAvail]=\"maxHeaderAvail\"\n [minAvail]=\"minDate\"\n ></aui-calendar-header>\n <aui-calendar-header\n [dateNavRange]=\"rightDateRange\"\n [anchor]=\"rightAnchor\"\n (navRangeChange)=\"calendarRangeChange($event, Side.Right)\"\n (anchorChange)=\"rightAnchor = $event\"\n [minAvail]=\"minHeaderAvail\"\n [maxAvail]=\"maxDate\"\n ></aui-calendar-header>\n </div>\n <div [class]=\"bem.element('body')\">\n <aui-picker-panel\n class=\"panel__wrapper\"\n [navRange]=\"leftDateRange\"\n [type]=\"DatePickerType.Day\"\n [anchor]=\"leftAnchor\"\n [matchDates]=\"matchValues\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabledDate]=\"getDateDisabledFn(Side.Left, rightAnchor)\"\n [weekStartDay]=\"weekStartDay\"\n (hovered)=\"hoverItem($event)\"\n (select)=\"selectPickerPanel($event, Side.Left)\"\n ></aui-picker-panel>\n <aui-picker-panel\n class=\"panel__wrapper\"\n [navRange]=\"rightDateRange\"\n [type]=\"DatePickerType.Day\"\n [anchor]=\"rightAnchor\"\n [weekStartDay]=\"weekStartDay\"\n [matchDates]=\"matchValues\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabledDate]=\"getDateDisabledFn(Side.Right, leftAnchor)\"\n (hovered)=\"hoverItem($event)\"\n (select)=\"selectPickerPanel($event, Side.Right)\"\n ></aui-picker-panel>\n </div>\n\n <aui-calendar-footer\n [class]=\"bem.element('footer')\"\n [clearable]=\"clearable\"\n [clearText]=\"clearText\"\n (clear)=\"clear.next()\"\n (confirm)=\"confirmValue(rangeValue)\"\n *ngIf=\"showFooter && showTime\"\n >\n <div\n [class]=\"bem.element('footer-content')\"\n *ngIf=\"showTime\"\n >\n <ng-container\n [ngTemplateOutlet]=\"datePlaceholder\"\n [ngTemplateOutletContext]=\"{\n placeholder: 'start_date' | auiI18n,\n value: rangeValue[0]\n }\"\n ></ng-container>\n <aui-time-picker\n [showIcon]=\"false\"\n [(ngModel)]=\"startTime\"\n size=\"small\"\n (ngModelChange)=\"timeChange($event)\"\n [disableHours]=\"leftDisabledTimeFn(rangeValue[0], 'hours')\"\n [disableMinutes]=\"leftDisabledTimeFn(rangeValue[0], 'minutes')\"\n [disableSeconds]=\"leftDisabledTimeFn(rangeValue[0], 'seconds')\"\n [placeholder]=\"'select_time' | auiI18n\"\n tooltipPosition=\"top start\"\n ></aui-time-picker>\n\n <span class=\"placeholder separator\">{{ 'to' | auiI18n }}</span>\n <ng-container\n [ngTemplateOutlet]=\"datePlaceholder\"\n [ngTemplateOutletContext]=\"{\n placeholder: 'end_date' | auiI18n,\n value: rangeValue[1]\n }\"\n ></ng-container>\n <aui-time-picker\n [showIcon]=\"false\"\n size=\"small\"\n [(ngModel)]=\"endTime\"\n [disableHours]=\"rightDisabledTimeFn(rangeValue[1], 'hours')\"\n [disableMinutes]=\"rightDisabledTimeFn(rangeValue[1], 'minutes')\"\n [disableSeconds]=\"rightDisabledTimeFn(rangeValue[1], 'seconds')\"\n (ngModelChange)=\"timeChange($event)\"\n [placeholder]=\"'select_time' | auiI18n\"\n tooltipPosition=\"top start\"\n ></aui-time-picker>\n </div>\n </aui-calendar-footer>\n</div>\n\n<ng-template\n #datePlaceholder\n let-placeholder=\"placeholder\"\n let-value=\"value\"\n>\n <span\n *ngIf=\"!value\"\n class=\"placeholder date-holder\"\n >{{ placeholder }}</span\n >\n <span\n *ngIf=\"value\"\n class=\"date-value date-holder\"\n >{{ value | date: FOOTER_DATE_FORMAT }}</span\n >\n</ng-template>\n", styles: [".aui-date-range-picker-panel__container{display:flex;flex-direction:column;width:524px;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-date-range-picker-panel__container .placeholder{color:rgb(var(--aui-color-placeholder-text))}.aui-date-range-picker-panel__container .placeholder.separator{margin-inline:12px}.aui-date-range-picker-panel__container .date-value{color:rgb(var(--aui-color-main-text))}.aui-date-range-picker-panel__container .date-holder{display:inline-block;margin-right:8px;width:82px}.aui-date-range-picker-panel__container .panel__wrapper{width:246px;display:flex;justify-content:center}.aui-date-range-picker-panel__header{display:flex;justify-content:space-between}.aui-date-range-picker-panel__header aui-calendar-header{flex:0 0 246px}.aui-date-range-picker-panel__body{display:flex;justify-content:space-between;margin:16px 0}.aui-date-range-picker-panel__footer .aui-time-picker{width:88px}.aui-date-range-picker-panel__footer-content{display:flex;align-items:center;height:100%}\n"] }]
5754
+ ], template: "<div [class]=\"bem.element('container')\">\n <div [class]=\"bem.element('header')\">\n <aui-calendar-header\n [dateNavRange]=\"leftDateRange\"\n [anchor]=\"leftAnchor\"\n (navRangeChange)=\"calendarRangeChange($event, Side.Left)\"\n (anchorChange)=\"leftAnchor = $event\"\n [maxAvail]=\"maxHeaderAvail\"\n [minAvail]=\"minDate\"\n ></aui-calendar-header>\n <aui-calendar-header\n [dateNavRange]=\"rightDateRange\"\n [anchor]=\"rightAnchor\"\n (navRangeChange)=\"calendarRangeChange($event, Side.Right)\"\n (anchorChange)=\"rightAnchor = $event\"\n [minAvail]=\"minHeaderAvail\"\n [maxAvail]=\"maxDate\"\n ></aui-calendar-header>\n </div>\n <div [class]=\"bem.element('body')\">\n <aui-picker-panel\n class=\"panel__wrapper\"\n [navRange]=\"leftDateRange\"\n [type]=\"DatePickerType.Day\"\n [anchor]=\"leftAnchor\"\n [matchDates]=\"matchValues\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabledDate]=\"getDateDisabledFn(Side.Left, rightAnchor)\"\n [weekStartDay]=\"weekStartDay\"\n (hovered)=\"hoverItem($event)\"\n (select)=\"selectPickerPanel($event, Side.Left)\"\n ></aui-picker-panel>\n <aui-picker-panel\n class=\"panel__wrapper\"\n [navRange]=\"rightDateRange\"\n [type]=\"DatePickerType.Day\"\n [anchor]=\"rightAnchor\"\n [weekStartDay]=\"weekStartDay\"\n [matchDates]=\"matchValues\"\n [minDate]=\"minDate\"\n [maxDate]=\"maxDate\"\n [disabledDate]=\"getDateDisabledFn(Side.Right, leftAnchor)\"\n (hovered)=\"hoverItem($event)\"\n (select)=\"selectPickerPanel($event, Side.Right)\"\n ></aui-picker-panel>\n </div>\n\n <aui-calendar-footer\n [class]=\"bem.element('footer')\"\n [clearable]=\"clearable\"\n [clearText]=\"clearText\"\n (clear)=\"clear.next()\"\n (confirm)=\"confirmValue(rangeValue)\"\n *ngIf=\"showFooter && showTime\"\n >\n <div\n [class]=\"bem.element('footer-content')\"\n *ngIf=\"showTime\"\n >\n <ng-container\n [ngTemplateOutlet]=\"datePlaceholder\"\n [ngTemplateOutletContext]=\"{\n placeholder: 'start_date' | auiI18n,\n value: rangeValue[0]\n }\"\n ></ng-container>\n <aui-time-picker\n [showIcon]=\"false\"\n [(ngModel)]=\"startTime\"\n size=\"small\"\n (ngModelChange)=\"timeChange($event)\"\n [disableHours]=\"leftDisabledTimeFn(rangeValue[0], 'hours')\"\n [disableMinutes]=\"leftDisabledTimeFn(rangeValue[0], 'minutes')\"\n [disableSeconds]=\"leftDisabledTimeFn(rangeValue[0], 'seconds')\"\n [placeholder]=\"'select_time' | auiI18n\"\n tooltipPosition=\"top start\"\n ></aui-time-picker>\n\n <span class=\"placeholder separator\">{{ 'to' | auiI18n }}</span>\n <ng-container\n [ngTemplateOutlet]=\"datePlaceholder\"\n [ngTemplateOutletContext]=\"{\n placeholder: 'end_date' | auiI18n,\n value: rangeValue[1]\n }\"\n ></ng-container>\n <aui-time-picker\n [showIcon]=\"false\"\n size=\"small\"\n [(ngModel)]=\"endTime\"\n [disableHours]=\"rightDisabledTimeFn(rangeValue[1], 'hours')\"\n [disableMinutes]=\"rightDisabledTimeFn(rangeValue[1], 'minutes')\"\n [disableSeconds]=\"rightDisabledTimeFn(rangeValue[1], 'seconds')\"\n (ngModelChange)=\"timeChange($event)\"\n [placeholder]=\"'select_time' | auiI18n\"\n tooltipPosition=\"top start\"\n ></aui-time-picker>\n </div>\n </aui-calendar-footer>\n</div>\n\n<ng-template\n #datePlaceholder\n let-placeholder=\"placeholder\"\n let-value=\"value\"\n>\n <span\n *ngIf=\"!value\"\n class=\"placeholder date-holder\"\n >{{ placeholder }}</span\n >\n <span\n *ngIf=\"value\"\n class=\"date-value date-holder\"\n >{{ value | date : FOOTER_DATE_FORMAT }}</span\n >\n</ng-template>\n", styles: [".aui-date-range-picker-panel__container{display:flex;flex-direction:column;width:524px;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal)}.aui-date-range-picker-panel__container .placeholder{color:rgb(var(--aui-color-placeholder-text))}.aui-date-range-picker-panel__container .placeholder.separator{margin-inline:12px}.aui-date-range-picker-panel__container .date-value{color:rgb(var(--aui-color-main-text))}.aui-date-range-picker-panel__container .date-holder{display:inline-block;margin-right:8px;width:82px}.aui-date-range-picker-panel__container .panel__wrapper{width:246px;display:flex;justify-content:center}.aui-date-range-picker-panel__header{display:flex;justify-content:space-between}.aui-date-range-picker-panel__header aui-calendar-header{flex:0 0 246px}.aui-date-range-picker-panel__body{display:flex;justify-content:space-between;margin:16px 0}.aui-date-range-picker-panel__footer .aui-time-picker{width:88px}.aui-date-range-picker-panel__footer-content{display:flex;align-items:center;height:100%}\n"] }]
5755
5755
  }], propDecorators: { clearable: [{
5756
5756
  type: Input
5757
5757
  }], clearText: [{
@@ -6800,6 +6800,12 @@ class DrawerInternalComponent {
6800
6800
  get width() {
6801
6801
  return handlePixel(this.options.width || SIZE_MAPPER[this.options.size || DrawerSize.Medium]);
6802
6802
  }
6803
+ get context() {
6804
+ return {
6805
+ $implicit: this.options.contentParams,
6806
+ ...this.options.contentParams,
6807
+ };
6808
+ }
6803
6809
  isTemplateRef = isTemplateRef;
6804
6810
  constructor(injector) {
6805
6811
  this.injector = injector;
@@ -6881,7 +6887,7 @@ class DrawerInternalComponent {
6881
6887
  }
6882
6888
  }
6883
6889
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.3", ngImport: i0, type: DrawerInternalComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
6884
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: DrawerInternalComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "bodyPortalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }, { propertyName: "mask", first: true, predicate: ["mask"], descendants: true }], ngImport: i0, template: "<div\n #mask\n class=\"aui-drawer-mask\"\n *ngIf=\"options.mask\"\n [class.isOpen]=\"maskVisible$ | async\"\n (click)=\"maskClick()\"\n></div>\n<div\n [style.marginTop]=\"options.offsetY\"\n [ngClass]=\"drawerClasses\"\n [@showHide]=\"showHide$$ | async\"\n (@showHide.start)=\"onAnimation($event)\"\n (@showHide.done)=\"onAnimation($event)\"\n [style.width]=\"width\"\n>\n <div class=\"aui-drawer__content\">\n <div class=\"aui-drawer__body-wrapper\">\n <div class=\"aui-drawer__header\">\n <div class=\"aui-drawer__title\">\n <ng-container\n *ngIf=\"isTemplateRef(options.title); else normal\"\n [ngTemplateOutlet]=\"options.title\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n ></ng-container>\n <ng-template #normal>\n {{ options.title }}\n </ng-template>\n </div>\n <aui-icon\n *ngIf=\"options.showClose\"\n class=\"aui-drawer__close\"\n icon=\"xmark\"\n (click)=\"hide()\"\n ></aui-icon>\n </div>\n\n <div\n class=\"aui-drawer__body\"\n cdkScrollable\n >\n <ng-template cdkPortalOutlet></ng-template>\n <ng-container\n *ngIf=\"isTemplateRef(options.content)\"\n [ngTemplateOutlet]=\"options.content\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n >\n </ng-container>\n </div>\n\n <div\n *ngIf=\"options.footer\"\n class=\"aui-drawer__footer\"\n >\n <ng-container\n *ngIf=\"isTemplateRef(options.footer); else normal\"\n [ngTemplateOutlet]=\"options.footer\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n ></ng-container>\n <ng-template #normal>\n {{ options.footer }}\n </ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: ["@keyframes aui-fade-in{0%{opacity:0}to{opacity:1}}@keyframes aui-fade-out{0%{opacity:1}to{opacity:0}}@keyframes aui-zoom-in{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes aui-zoom-out{0%{transform:scale(1)}to{transform:scale(.2);opacity:0}}.aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0}:root .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}html[aui-theme-mode=light] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer-mask.isOpen{height:100%}.aui-drawer-mask-enter,.aui-drawer-mask-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.aui-drawer-mask-enter.aui-drawer-mask-enter-active,.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-play-state:running;pointer-events:none}.aui-drawer-mask-enter.aui-drawer-mask-enter-active{animation-name:aui-fade-in}.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-name:aui-fade-out}.aui-drawer-mask-enter{opacity:0;animation-timing-function:linear}.aui-drawer-mask-leave{animation-timing-function:linear}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}:root .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__header{padding:20px;display:flex;flex-shrink:0;justify-content:space-between}.aui-drawer__title{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);font-weight:var(--aui-font-weight-bolder);color:rgb(var(--aui-color-main-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{z-index:10;flex-shrink:0;margin-top:2px;margin-left:var(--aui-spacing-xl);display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);color:rgb(var(--aui-color-secondary-text));border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-drawer__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-drawer__body-wrapper{width:100%;height:100%;display:flex;flex-flow:column nowrap;position:relative;z-index:1}.aui-drawer__body{padding:0 20px;overflow:hidden;overflow-y:auto;height:100%}.aui-drawer__footer{padding:20px}.aui-drawer.hasDivider .aui-drawer__header{padding-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer.hasDivider .aui-drawer__body{padding:16px 20px}.aui-drawer.hasDivider .aui-drawer__footer{padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "directive", type: CdkScrollable$1, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
6890
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.3", type: DrawerInternalComponent, isStandalone: true, selector: "ng-component", viewQueries: [{ propertyName: "bodyPortalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }, { propertyName: "mask", first: true, predicate: ["mask"], descendants: true }], ngImport: i0, template: "<div\n #mask\n class=\"aui-drawer-mask\"\n *ngIf=\"options.mask\"\n [class.isOpen]=\"maskVisible$ | async\"\n (click)=\"maskClick()\"\n></div>\n<div\n [style.marginTop]=\"options.offsetY\"\n [ngClass]=\"drawerClasses\"\n [@showHide]=\"showHide$$ | async\"\n (@showHide.start)=\"onAnimation($event)\"\n (@showHide.done)=\"onAnimation($event)\"\n [style.width]=\"width\"\n>\n <div class=\"aui-drawer__content\">\n <div class=\"aui-drawer__body-wrapper\">\n <div class=\"aui-drawer__header\">\n <div class=\"aui-drawer__title\">\n <ng-container\n *ngIf=\"isTemplateRef(options.title); else normal\"\n [ngTemplateOutlet]=\"options.title\"\n [ngTemplateOutletContext]=\"context\"\n ></ng-container>\n <ng-template #normal>\n {{ options.title }}\n </ng-template>\n </div>\n <aui-icon\n *ngIf=\"options.showClose\"\n class=\"aui-drawer__close\"\n icon=\"xmark\"\n (click)=\"hide()\"\n ></aui-icon>\n </div>\n\n <div\n class=\"aui-drawer__body\"\n cdkScrollable\n >\n <ng-template cdkPortalOutlet></ng-template>\n <ng-container\n *ngIf=\"isTemplateRef(options.content)\"\n [ngTemplateOutlet]=\"options.content\"\n [ngTemplateOutletContext]=\"context\"\n >\n </ng-container>\n </div>\n\n <div\n *ngIf=\"options.footer\"\n class=\"aui-drawer__footer\"\n >\n <ng-container\n *ngIf=\"isTemplateRef(options.footer); else normal\"\n [ngTemplateOutlet]=\"options.footer\"\n [ngTemplateOutletContext]=\"context\"\n ></ng-container>\n <ng-template #normal>\n {{ options.footer }}\n </ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: ["@keyframes aui-fade-in{0%{opacity:0}to{opacity:1}}@keyframes aui-fade-out{0%{opacity:1}to{opacity:0}}@keyframes aui-zoom-in{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes aui-zoom-out{0%{transform:scale(1)}to{transform:scale(.2);opacity:0}}.aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0}:root .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}html[aui-theme-mode=light] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer-mask.isOpen{height:100%}.aui-drawer-mask-enter,.aui-drawer-mask-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.aui-drawer-mask-enter.aui-drawer-mask-enter-active,.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-play-state:running;pointer-events:none}.aui-drawer-mask-enter.aui-drawer-mask-enter-active{animation-name:aui-fade-in}.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-name:aui-fade-out}.aui-drawer-mask-enter{opacity:0;animation-timing-function:linear}.aui-drawer-mask-leave{animation-timing-function:linear}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}:root .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__header{padding:20px;display:flex;flex-shrink:0;justify-content:space-between}.aui-drawer__title{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);font-weight:var(--aui-font-weight-bolder);color:rgb(var(--aui-color-main-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{z-index:10;flex-shrink:0;margin-top:2px;margin-left:var(--aui-spacing-xl);display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);color:rgb(var(--aui-color-secondary-text));border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-drawer__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-drawer__body-wrapper{width:100%;height:100%;display:flex;flex-flow:column nowrap;position:relative;z-index:1}.aui-drawer__body{padding:0 20px;overflow:hidden;overflow-y:auto;height:100%}.aui-drawer__footer{padding:20px}.aui-drawer.hasDivider .aui-drawer__header{padding-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer.hasDivider .aui-drawer__body{padding:16px 20px}.aui-drawer.hasDivider .aui-drawer__footer{padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "directive", type: CdkScrollable$1, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
6885
6891
  trigger('showHide', [
6886
6892
  state('show', style({
6887
6893
  opacity: 1,
@@ -6928,7 +6934,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.3", ngImpor
6928
6934
  animate(`${duration} ${TimingFunction.easeInOut}`),
6929
6935
  ]),
6930
6936
  ]),
6931
- ], template: "<div\n #mask\n class=\"aui-drawer-mask\"\n *ngIf=\"options.mask\"\n [class.isOpen]=\"maskVisible$ | async\"\n (click)=\"maskClick()\"\n></div>\n<div\n [style.marginTop]=\"options.offsetY\"\n [ngClass]=\"drawerClasses\"\n [@showHide]=\"showHide$$ | async\"\n (@showHide.start)=\"onAnimation($event)\"\n (@showHide.done)=\"onAnimation($event)\"\n [style.width]=\"width\"\n>\n <div class=\"aui-drawer__content\">\n <div class=\"aui-drawer__body-wrapper\">\n <div class=\"aui-drawer__header\">\n <div class=\"aui-drawer__title\">\n <ng-container\n *ngIf=\"isTemplateRef(options.title); else normal\"\n [ngTemplateOutlet]=\"options.title\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n ></ng-container>\n <ng-template #normal>\n {{ options.title }}\n </ng-template>\n </div>\n <aui-icon\n *ngIf=\"options.showClose\"\n class=\"aui-drawer__close\"\n icon=\"xmark\"\n (click)=\"hide()\"\n ></aui-icon>\n </div>\n\n <div\n class=\"aui-drawer__body\"\n cdkScrollable\n >\n <ng-template cdkPortalOutlet></ng-template>\n <ng-container\n *ngIf=\"isTemplateRef(options.content)\"\n [ngTemplateOutlet]=\"options.content\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n >\n </ng-container>\n </div>\n\n <div\n *ngIf=\"options.footer\"\n class=\"aui-drawer__footer\"\n >\n <ng-container\n *ngIf=\"isTemplateRef(options.footer); else normal\"\n [ngTemplateOutlet]=\"options.footer\"\n [ngTemplateOutletContext]=\"options.contentParams\"\n ></ng-container>\n <ng-template #normal>\n {{ options.footer }}\n </ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: ["@keyframes aui-fade-in{0%{opacity:0}to{opacity:1}}@keyframes aui-fade-out{0%{opacity:1}to{opacity:0}}@keyframes aui-zoom-in{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes aui-zoom-out{0%{transform:scale(1)}to{transform:scale(.2);opacity:0}}.aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0}:root .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}html[aui-theme-mode=light] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer-mask.isOpen{height:100%}.aui-drawer-mask-enter,.aui-drawer-mask-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.aui-drawer-mask-enter.aui-drawer-mask-enter-active,.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-play-state:running;pointer-events:none}.aui-drawer-mask-enter.aui-drawer-mask-enter-active{animation-name:aui-fade-in}.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-name:aui-fade-out}.aui-drawer-mask-enter{opacity:0;animation-timing-function:linear}.aui-drawer-mask-leave{animation-timing-function:linear}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}:root .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__header{padding:20px;display:flex;flex-shrink:0;justify-content:space-between}.aui-drawer__title{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);font-weight:var(--aui-font-weight-bolder);color:rgb(var(--aui-color-main-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{z-index:10;flex-shrink:0;margin-top:2px;margin-left:var(--aui-spacing-xl);display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);color:rgb(var(--aui-color-secondary-text));border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-drawer__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-drawer__body-wrapper{width:100%;height:100%;display:flex;flex-flow:column nowrap;position:relative;z-index:1}.aui-drawer__body{padding:0 20px;overflow:hidden;overflow-y:auto;height:100%}.aui-drawer__footer{padding:20px}.aui-drawer.hasDivider .aui-drawer__header{padding-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer.hasDivider .aui-drawer__body{padding:16px 20px}.aui-drawer.hasDivider .aui-drawer__footer{padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}\n"] }]
6937
+ ], template: "<div\n #mask\n class=\"aui-drawer-mask\"\n *ngIf=\"options.mask\"\n [class.isOpen]=\"maskVisible$ | async\"\n (click)=\"maskClick()\"\n></div>\n<div\n [style.marginTop]=\"options.offsetY\"\n [ngClass]=\"drawerClasses\"\n [@showHide]=\"showHide$$ | async\"\n (@showHide.start)=\"onAnimation($event)\"\n (@showHide.done)=\"onAnimation($event)\"\n [style.width]=\"width\"\n>\n <div class=\"aui-drawer__content\">\n <div class=\"aui-drawer__body-wrapper\">\n <div class=\"aui-drawer__header\">\n <div class=\"aui-drawer__title\">\n <ng-container\n *ngIf=\"isTemplateRef(options.title); else normal\"\n [ngTemplateOutlet]=\"options.title\"\n [ngTemplateOutletContext]=\"context\"\n ></ng-container>\n <ng-template #normal>\n {{ options.title }}\n </ng-template>\n </div>\n <aui-icon\n *ngIf=\"options.showClose\"\n class=\"aui-drawer__close\"\n icon=\"xmark\"\n (click)=\"hide()\"\n ></aui-icon>\n </div>\n\n <div\n class=\"aui-drawer__body\"\n cdkScrollable\n >\n <ng-template cdkPortalOutlet></ng-template>\n <ng-container\n *ngIf=\"isTemplateRef(options.content)\"\n [ngTemplateOutlet]=\"options.content\"\n [ngTemplateOutletContext]=\"context\"\n >\n </ng-container>\n </div>\n\n <div\n *ngIf=\"options.footer\"\n class=\"aui-drawer__footer\"\n >\n <ng-container\n *ngIf=\"isTemplateRef(options.footer); else normal\"\n [ngTemplateOutlet]=\"options.footer\"\n [ngTemplateOutletContext]=\"context\"\n ></ng-container>\n <ng-template #normal>\n {{ options.footer }}\n </ng-template>\n </div>\n </div>\n </div>\n</div>\n", styles: ["@keyframes aui-fade-in{0%{opacity:0}to{opacity:1}}@keyframes aui-fade-out{0%{opacity:1}to{opacity:0}}@keyframes aui-zoom-in{0%{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}@keyframes aui-zoom-out{0%{transform:scale(1)}to{transform:scale(.2);opacity:0}}.aui-drawer-mask{position:absolute;top:0;left:0;width:100%;height:0}:root .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}html[aui-theme-mode=light] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer-mask{background-color:rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer-mask.isOpen{height:100%}.aui-drawer-mask-enter,.aui-drawer-mask-leave{animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.aui-drawer-mask-enter.aui-drawer-mask-enter-active,.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-play-state:running;pointer-events:none}.aui-drawer-mask-enter.aui-drawer-mask-enter-active{animation-name:aui-fade-in}.aui-drawer-mask-leave.aui-drawer-mask-leave-active{animation-name:aui-fade-out}.aui-drawer-mask-enter{opacity:0;animation-timing-function:linear}.aui-drawer-mask-leave{animation-timing-function:linear}.aui-drawer{position:fixed;top:0;bottom:0;right:0;z-index:9999;font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-drawer__content{background-color:rgb(var(--aui-color-n-10));position:absolute;height:100%;right:0;width:100%}:root .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-drawer__content{box-shadow:-2px 0 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-drawer__header{padding:20px;display:flex;flex-shrink:0;justify-content:space-between}.aui-drawer__title{flex:1;font-size:var(--aui-font-size-xxl);line-height:var(--aui-line-height-xxl);font-weight:var(--aui-font-weight-bolder);color:rgb(var(--aui-color-main-text));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.aui-drawer__close{z-index:10;flex-shrink:0;margin-top:2px;margin-left:var(--aui-spacing-xl);display:flex;justify-content:center;align-items:center;width:24px;height:24px;font-size:var(--aui-icon-size-l);color:rgb(var(--aui-color-secondary-text));border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-drawer__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-drawer__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-drawer__body-wrapper{width:100%;height:100%;display:flex;flex-flow:column nowrap;position:relative;z-index:1}.aui-drawer__body{padding:0 20px;overflow:hidden;overflow-y:auto;height:100%}.aui-drawer__footer{padding:20px}.aui-drawer.hasDivider .aui-drawer__header{padding-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-drawer.hasDivider .aui-drawer__body{padding:16px 20px}.aui-drawer.hasDivider .aui-drawer__footer{padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}\n"] }]
6932
6938
  }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { bodyPortalOutlet: [{
6933
6939
  type: ViewChild,
6934
6940
  args: [CdkPortalOutlet, { static: false }]
@@ -6967,6 +6973,14 @@ class DrawerRef {
6967
6973
  }
6968
6974
 
6969
6975
  const DRAWER_OVERLAY_CLASS = 'aui-drawer-overlay';
6976
+ const DEFAULT_OPTIONS = {
6977
+ size: DrawerSize.Medium,
6978
+ offsetY: '0',
6979
+ showClose: true,
6980
+ hideOnClickOutside: false,
6981
+ divider: true,
6982
+ disposeWhenHide: true,
6983
+ };
6970
6984
  class DrawerService {
6971
6985
  overlay;
6972
6986
  overlayRef;
@@ -6974,14 +6988,6 @@ class DrawerService {
6974
6988
  drawerRef;
6975
6989
  invisible$ = new Subject();
6976
6990
  drawerInternalComponentRef;
6977
- DEFAULT_OPTIONS = {
6978
- size: DrawerSize.Medium,
6979
- offsetY: '0',
6980
- showClose: true,
6981
- hideOnClickOutside: false,
6982
- divider: true,
6983
- disposeWhenHide: true,
6984
- };
6985
6991
  constructor(overlay) {
6986
6992
  this.overlay = overlay;
6987
6993
  }
@@ -6994,7 +7000,7 @@ class DrawerService {
6994
7000
  return this.drawerRef;
6995
7001
  }
6996
7002
  updateOptions(options) {
6997
- this.options = merge(this.DEFAULT_OPTIONS, options);
7003
+ this.options = merge(DEFAULT_OPTIONS, options);
6998
7004
  }
6999
7005
  createOverlay() {
7000
7006
  if (!this.overlayRef) {