@clr/angular 15.14.5 → 15.14.8
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.
- package/accordion/accordion-panel.d.ts +2 -0
- package/clarity.api.md +13 -1
- package/esm2020/accordion/accordion-panel.mjs +9 -3
- package/esm2020/accordion/stepper/stepper-panel.mjs +3 -3
- package/esm2020/button/button-group/button-group.mjs +3 -3
- package/esm2020/forms/combobox/combobox.mjs +4 -1
- package/esm2020/forms/datepicker/daypicker.mjs +3 -3
- package/esm2020/forms/datepicker/monthpicker.mjs +3 -2
- package/esm2020/forms/datepicker/yearpicker.mjs +3 -2
- package/esm2020/layout/tabs/tab-content.mjs +2 -2
- package/esm2020/layout/tabs/tab-link.directive.mjs +1 -1
- package/esm2020/modal/modal-stack.service.mjs +4 -1
- package/esm2020/utils/animations/expandable-animation/expandable-animation.mjs +14 -6
- package/esm2020/utils/i18n/common-strings.default.mjs +4 -1
- package/esm2020/utils/i18n/common-strings.interface.mjs +1 -1
- package/esm2020/wizard/wizard.mjs +3 -3
- package/fesm2015/clr-angular.mjs +44 -18
- package/fesm2015/clr-angular.mjs.map +1 -1
- package/fesm2020/clr-angular.mjs +43 -18
- package/fesm2020/clr-angular.mjs.map +1 -1
- package/layout/tabs/tab-link.directive.d.ts +1 -1
- package/package.json +2 -2
- package/utils/animations/expandable-animation/expandable-animation.d.ts +4 -2
- package/utils/i18n/common-strings.interface.d.ts +2 -0
package/fesm2020/clr-angular.mjs
CHANGED
|
@@ -367,6 +367,9 @@ const commonStringsDefault = {
|
|
|
367
367
|
* Datagrid footer; sr-only text after the number of selected rows.
|
|
368
368
|
*/
|
|
369
369
|
selectedRows: 'Selected rows',
|
|
370
|
+
// Accordion/Stepper
|
|
371
|
+
stepComplete: 'Step {STEP} complete',
|
|
372
|
+
stepError: 'Error in step {STEP}',
|
|
370
373
|
};
|
|
371
374
|
|
|
372
375
|
/*
|
|
@@ -582,6 +585,12 @@ class ClrAccordionPanel {
|
|
|
582
585
|
getAccordionHeaderId(id) {
|
|
583
586
|
return `clr-accordion-header-${id}`;
|
|
584
587
|
}
|
|
588
|
+
stepCompleteText(panelNumber) {
|
|
589
|
+
return this.commonStrings.parse(this.commonStrings.keys.stepComplete, { STEP: panelNumber.toString() });
|
|
590
|
+
}
|
|
591
|
+
stepErrorText(panelNumber) {
|
|
592
|
+
return this.commonStrings.parse(this.commonStrings.keys.stepError, { STEP: panelNumber.toString() });
|
|
593
|
+
}
|
|
585
594
|
emitPanelChange(panel) {
|
|
586
595
|
if (panel.index !== this._panelIndex) {
|
|
587
596
|
this._panelIndex = panel.index;
|
|
@@ -609,10 +618,10 @@ class ClrAccordionPanel {
|
|
|
609
618
|
}
|
|
610
619
|
}
|
|
611
620
|
ClrAccordionPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAccordionPanel, deps: [{ token: ClrCommonStringsService }, { token: AccordionService }, { token: IfExpandService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
612
|
-
ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true", "class.clr-accordion-panel-disabled": "this.disabled" } }, providers: [IfExpandService], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n <div [ngClass]=\"getPanelStateClasses(panel)\">\n <div class=\"clr-accordion-header\">\n <button\n type=\"button\"\n class=\"clr-accordion-header-button\"\n (click)=\"togglePanel()\"\n [id]=\"getAccordionHeaderId(panel.templateId)\"\n [disabled]=\"isAccordion && panel.disabled\"\n [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-expanded]=\"panel.open\"\n [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n #headerButton\n >\n <span class=\"clr-sr-only\">\n <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{
|
|
621
|
+
ClrAccordionPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrAccordionPanel, selector: "clr-accordion-panel", inputs: { disabled: ["clrAccordionPanelDisabled", "disabled"], panelOpen: ["clrAccordionPanelOpen", "panelOpen"] }, outputs: { panelOpenChange: "clrAccordionPanelOpenChange" }, host: { properties: { "class.clr-accordion-panel": "true", "class.clr-accordion-panel-disabled": "this.disabled" } }, providers: [IfExpandService], queries: [{ propertyName: "accordionDescription", predicate: ClrAccordionDescription }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n <div [ngClass]=\"getPanelStateClasses(panel)\">\n <div class=\"clr-accordion-header\">\n <button\n type=\"button\"\n class=\"clr-accordion-header-button\"\n (click)=\"togglePanel()\"\n [id]=\"getAccordionHeaderId(panel.templateId)\"\n [disabled]=\"isAccordion && panel.disabled\"\n [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-expanded]=\"panel.open\"\n [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n #headerButton\n >\n <span class=\"clr-sr-only\" role=\"status\">\n <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n {{ stepCompleteText(panelNumber)}}\n </ng-container>\n </span>\n <span class=\"clr-accordion-status\">\n <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n </span>\n <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n </button>\n </div>\n <div\n @skipInitialRender\n role=\"region\"\n class=\"clr-accordion-content-region\"\n [id]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-hidden]=\"!panel.open\"\n [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n >\n <div\n *ngIf=\"panel.open\"\n @toggle\n (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n class=\"clr-accordion-content\"\n >\n <div class=\"clr-accordion-inner-content\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: panelAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
613
622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrAccordionPanel, decorators: [{
|
|
614
623
|
type: Component,
|
|
615
|
-
args: [{ selector: 'clr-accordion-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: panelAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n <div [ngClass]=\"getPanelStateClasses(panel)\">\n <div class=\"clr-accordion-header\">\n <button\n type=\"button\"\n class=\"clr-accordion-header-button\"\n (click)=\"togglePanel()\"\n [id]=\"getAccordionHeaderId(panel.templateId)\"\n [disabled]=\"isAccordion && panel.disabled\"\n [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-expanded]=\"panel.open\"\n [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n #headerButton\n >\n <span class=\"clr-sr-only\">\n <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{
|
|
624
|
+
args: [{ selector: 'clr-accordion-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: panelAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n <div [ngClass]=\"getPanelStateClasses(panel)\">\n <div class=\"clr-accordion-header\">\n <button\n type=\"button\"\n class=\"clr-accordion-header-button\"\n (click)=\"togglePanel()\"\n [id]=\"getAccordionHeaderId(panel.templateId)\"\n [disabled]=\"isAccordion && panel.disabled\"\n [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-expanded]=\"panel.open\"\n [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n #headerButton\n >\n <span class=\"clr-sr-only\" role=\"status\">\n <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n {{ stepCompleteText(panelNumber)}}\n </ng-container>\n </span>\n <span class=\"clr-accordion-status\">\n <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n </span>\n <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n </button>\n </div>\n <div\n @skipInitialRender\n role=\"region\"\n class=\"clr-accordion-content-region\"\n [id]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-hidden]=\"!panel.open\"\n [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n >\n <div\n *ngIf=\"panel.open\"\n @toggle\n (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n class=\"clr-accordion-content\"\n >\n <div class=\"clr-accordion-inner-content\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n" }]
|
|
616
625
|
}], ctorParameters: function () { return [{ type: ClrCommonStringsService }, { type: AccordionService }, { type: IfExpandService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
617
626
|
type: Input,
|
|
618
627
|
args: ['clrAccordionPanelDisabled']
|
|
@@ -1126,10 +1135,10 @@ class ClrStepperPanel extends ClrAccordionPanel {
|
|
|
1126
1135
|
}
|
|
1127
1136
|
}
|
|
1128
1137
|
ClrStepperPanel.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrStepperPanel, deps: [{ token: PLATFORM_ID }, { token: ClrCommonStringsService }, { token: i1.FormGroupName, optional: true }, { token: i1.NgModelGroup, optional: true }, { token: StepperService }, { token: IfExpandService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1129
|
-
ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n <div [ngClass]=\"getPanelStateClasses(panel)\">\n <div class=\"clr-accordion-header\">\n <button\n type=\"button\"\n class=\"clr-accordion-header-button\"\n (click)=\"togglePanel()\"\n [id]=\"getAccordionHeaderId(panel.templateId)\"\n [disabled]=\"isAccordion && panel.disabled\"\n [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-expanded]=\"panel.open\"\n [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n #headerButton\n >\n <span class=\"clr-sr-only\">\n <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{
|
|
1138
|
+
ClrStepperPanel.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrStepperPanel, selector: "clr-stepper-panel", host: { properties: { "class.clr-accordion-panel": "true" } }, providers: [IfExpandService], viewQueries: [{ propertyName: "headerButton", first: true, predicate: ["headerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"panel | async; let panel\">\n <div [ngClass]=\"getPanelStateClasses(panel)\">\n <div class=\"clr-accordion-header\">\n <button\n type=\"button\"\n class=\"clr-accordion-header-button\"\n (click)=\"togglePanel()\"\n [id]=\"getAccordionHeaderId(panel.templateId)\"\n [disabled]=\"isAccordion && panel.disabled\"\n [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-expanded]=\"panel.open\"\n [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n #headerButton\n >\n <span class=\"clr-sr-only\" role=\"status\">\n <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n {{ stepCompleteText(panelNumber)}}\n </ng-container>\n </span>\n <span class=\"clr-accordion-status\">\n <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n </span>\n <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n </button>\n </div>\n <div\n @skipInitialRender\n role=\"region\"\n class=\"clr-accordion-content-region\"\n [id]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-hidden]=\"!panel.open\"\n [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n >\n <div\n *ngIf=\"panel.open\"\n @toggle\n (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n class=\"clr-accordion-content\"\n >\n <div class=\"clr-accordion-inner-content\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }], animations: stepAnimation, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1130
1139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrStepperPanel, decorators: [{
|
|
1131
1140
|
type: Component,
|
|
1132
|
-
args: [{ selector: 'clr-stepper-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: stepAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n <div [ngClass]=\"getPanelStateClasses(panel)\">\n <div class=\"clr-accordion-header\">\n <button\n type=\"button\"\n class=\"clr-accordion-header-button\"\n (click)=\"togglePanel()\"\n [id]=\"getAccordionHeaderId(panel.templateId)\"\n [disabled]=\"isAccordion && panel.disabled\"\n [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-expanded]=\"panel.open\"\n [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n #headerButton\n >\n <span class=\"clr-sr-only\">\n <ng-container *ngIf=\"panel.status === AccordionStatus.Error\">{{
|
|
1141
|
+
args: [{ selector: 'clr-stepper-panel', host: { '[class.clr-accordion-panel]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, animations: stepAnimation, providers: [IfExpandService], template: "<ng-container *ngIf=\"panel | async; let panel\">\n <div [ngClass]=\"getPanelStateClasses(panel)\">\n <div class=\"clr-accordion-header\">\n <button\n type=\"button\"\n class=\"clr-accordion-header-button\"\n (click)=\"togglePanel()\"\n [id]=\"getAccordionHeaderId(panel.templateId)\"\n [disabled]=\"isAccordion && panel.disabled\"\n [attr.aria-disabled]=\"!isAccordion && panel.disabled\"\n [attr.aria-controls]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-expanded]=\"panel.open\"\n [class.clr-accordion-header-has-description]=\"(accordionDescription.changes | async)?.length || accordionDescription.length\"\n #headerButton\n >\n <span class=\"clr-sr-only\" role=\"status\">\n <ng-container *ngIf=\"panel.status === AccordionStatus.Error\"> {{ stepErrorText(panelNumber)}} </ng-container>\n <ng-container *ngIf=\"panel.status === AccordionStatus.Complete\">\n {{ stepCompleteText(panelNumber)}}\n </ng-container>\n </span>\n <span class=\"clr-accordion-status\">\n <cds-icon shape=\"angle\" direction=\"right\" class=\"clr-accordion-angle\"></cds-icon>\n <span class=\"clr-accordion-number\">{{panelNumber}}.</span>\n <cds-icon status=\"danger\" shape=\"exclamation-circle\" class=\"clr-accordion-error-icon\"></cds-icon>\n <cds-icon status=\"success\" shape=\"check-circle\" class=\"clr-accordion-complete-icon\"></cds-icon>\n </span>\n <ng-content select=\"clr-accordion-title, clr-step-title\"></ng-content>\n <ng-content select=\"clr-accordion-description, clr-step-description\"></ng-content>\n </button>\n </div>\n <div\n @skipInitialRender\n role=\"region\"\n class=\"clr-accordion-content-region\"\n [id]=\"getAccordionContentId(panel.templateId)\"\n [attr.aria-hidden]=\"!panel.open\"\n [attr.aria-labelledby]=\"getAccordionHeaderId(panel.templateId)\"\n >\n <div\n *ngIf=\"panel.open\"\n @toggle\n (@toggle.done)=\"collapsePanelOnAnimationDone(panel)\"\n class=\"clr-accordion-content\"\n >\n <div class=\"clr-accordion-inner-content\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n" }]
|
|
1133
1142
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
1134
1143
|
type: Inject,
|
|
1135
1144
|
args: [PLATFORM_ID]
|
|
@@ -2917,15 +2926,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
2917
2926
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
2918
2927
|
*/
|
|
2919
2928
|
class ClrExpandableAnimation {
|
|
2920
|
-
constructor(element, domAdapter) {
|
|
2929
|
+
constructor(element, domAdapter, renderer) {
|
|
2921
2930
|
this.element = element;
|
|
2922
2931
|
this.domAdapter = domAdapter;
|
|
2932
|
+
this.renderer = renderer;
|
|
2923
2933
|
this.startHeight = 0;
|
|
2924
2934
|
}
|
|
2925
2935
|
get expandAnimation() {
|
|
2926
2936
|
return { value: this.clrExpandTrigger, params: { startHeight: this.startHeight } };
|
|
2927
2937
|
}
|
|
2938
|
+
animationStart() {
|
|
2939
|
+
this.renderer.setStyle(this.element.nativeElement, 'overflow', 'hidden');
|
|
2940
|
+
}
|
|
2928
2941
|
animationDone() {
|
|
2942
|
+
this.renderer.removeStyle(this.element.nativeElement, 'overflow');
|
|
2929
2943
|
// A "safe" auto-update of the height ensuring basic OOTB user experience .
|
|
2930
2944
|
// Prone to small jumps in initial animation height if data was changed in the meantime, window was resized, etc.
|
|
2931
2945
|
// For optimal behavior call manually updateStartHeight() from the parent component before initiating the update.
|
|
@@ -2935,8 +2949,8 @@ class ClrExpandableAnimation {
|
|
|
2935
2949
|
this.startHeight = this.domAdapter.computedHeight(this.element.nativeElement) || 0;
|
|
2936
2950
|
}
|
|
2937
2951
|
}
|
|
2938
|
-
ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: DomAdapter }], target: i0.ɵɵFactoryTarget.Component });
|
|
2939
|
-
ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block
|
|
2952
|
+
ClrExpandableAnimation.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrExpandableAnimation, deps: [{ token: i0.ElementRef }, { token: DomAdapter }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
2953
|
+
ClrExpandableAnimation.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: { clrExpandTrigger: "clrExpandTrigger" }, host: { listeners: { "@expandAnimation.start": "animationStart()", "@expandAnimation.done": "animationDone()" }, properties: { "@expandAnimation": "this.expandAnimation" } }, providers: [DomAdapter], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: [":host{display:block}\n"], animations: [
|
|
2940
2954
|
trigger('expandAnimation', [
|
|
2941
2955
|
transition('true <=> false', [
|
|
2942
2956
|
style({ height: '{{startHeight}}px' }),
|
|
@@ -2953,12 +2967,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
2953
2967
|
animate('0.2s ease-in-out', style({ height: '*' })),
|
|
2954
2968
|
]),
|
|
2955
2969
|
]),
|
|
2956
|
-
], providers: [DomAdapter], styles: [":host{display:block
|
|
2957
|
-
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DomAdapter }]; }, propDecorators: { clrExpandTrigger: [{
|
|
2970
|
+
], providers: [DomAdapter], styles: [":host{display:block}\n"] }]
|
|
2971
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DomAdapter }, { type: i0.Renderer2 }]; }, propDecorators: { clrExpandTrigger: [{
|
|
2958
2972
|
type: Input
|
|
2959
2973
|
}], expandAnimation: [{
|
|
2960
2974
|
type: HostBinding,
|
|
2961
2975
|
args: ['@expandAnimation']
|
|
2976
|
+
}], animationStart: [{
|
|
2977
|
+
type: HostListener,
|
|
2978
|
+
args: ['@expandAnimation.start']
|
|
2962
2979
|
}], animationDone: [{
|
|
2963
2980
|
type: HostListener,
|
|
2964
2981
|
args: ['@expandAnimation.done']
|
|
@@ -3833,10 +3850,10 @@ class ClrButtonGroup {
|
|
|
3833
3850
|
}
|
|
3834
3851
|
}
|
|
3835
3852
|
ClrButtonGroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrButtonGroup, deps: [{ token: ButtonInGroupService }, { token: ClrPopoverToggleService }, { token: ClrCommonStringsService }, { token: ClrDestroyService }, { token: ButtonGroupFocusHandler }], target: i0.ɵɵFactoryTarget.Component });
|
|
3836
|
-
ClrButtonGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrButtonGroup, selector: "clr-button-group", inputs: { clrToggleButtonAriaLabel: "clrToggleButtonAriaLabel", menuPosition: ["clrMenuPosition", "menuPosition"] }, host: { properties: { "class.btn-group": "true" } }, providers: [ButtonInGroupService, ClrDestroyService, BUTTON_GROUP_FOCUS_HANDLER_PROVIDER, FOCUS_SERVICE_PROVIDER], queries: [{ propertyName: "buttons", predicate: ClrButton }], viewQueries: [{ propertyName: "menuToggle", first: true, predicate: ["menuToggle"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], hostDirectives: [{ directive: ClrPopoverHostDirective }], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<ng-
|
|
3853
|
+
ClrButtonGroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrButtonGroup, selector: "clr-button-group", inputs: { clrToggleButtonAriaLabel: "clrToggleButtonAriaLabel", menuPosition: ["clrMenuPosition", "menuPosition"] }, host: { properties: { "class.btn-group": "true" } }, providers: [ButtonInGroupService, ClrDestroyService, BUTTON_GROUP_FOCUS_HANDLER_PROVIDER, FOCUS_SERVICE_PROVIDER], queries: [{ propertyName: "buttons", predicate: ClrButton }], viewQueries: [{ propertyName: "menuToggle", first: true, predicate: ["menuToggle"], descendants: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true }], hostDirectives: [{ directive: ClrPopoverHostDirective }], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<ng-template *ngFor=\"let inlineButton of inlineButtons\" [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n\n<div *ngIf=\"menuButtons.length > 0\" class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\">\n <button\n #menuToggle\n class=\"btn dropdown-toggle\"\n clrPopoverAnchor\n clrPopoverOpenCloseButton\n (keydown.arrowup)=\"openMenu($event, InitialFocus.LAST_ITEM)\"\n (keydown.arrowdown)=\"openMenu($event, InitialFocus.FIRST_ITEM)\"\n [attr.aria-controls]=\"popoverId\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-label]=\"clrToggleButtonAriaLabel\"\n >\n <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n </button>\n <div\n #menu\n role=\"menu\"\n class=\"dropdown-menu clr-button-group-menu\"\n [id]=\"popoverId\"\n [attr.id]=\"popoverId\"\n [attr.aria-hidden]=\"!open\"\n *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n >\n <ng-template *ngFor=\"let menuButton of menuButtons\" [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrPopoverAnchor, selector: "[clrPopoverAnchor]" }, { kind: "directive", type: ClrPopoverOpenCloseButton, selector: "[clrPopoverOpenCloseButton]", outputs: ["clrPopoverOpenCloseChange"] }, { kind: "directive", type: ClrPopoverContent, selector: "[clrPopoverContent]", inputs: ["clrPopoverContent", "clrPopoverContentAt", "clrPopoverContentOutsideClickToClose", "clrPopoverContentScrollToClose"] }] });
|
|
3837
3854
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrButtonGroup, decorators: [{
|
|
3838
3855
|
type: Component,
|
|
3839
|
-
args: [{ selector: 'clr-button-group', providers: [ButtonInGroupService, ClrDestroyService, BUTTON_GROUP_FOCUS_HANDLER_PROVIDER, FOCUS_SERVICE_PROVIDER], hostDirectives: [ClrPopoverHostDirective], host: { '[class.btn-group]': 'true' }, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<ng-
|
|
3856
|
+
args: [{ selector: 'clr-button-group', providers: [ButtonInGroupService, ClrDestroyService, BUTTON_GROUP_FOCUS_HANDLER_PROVIDER, FOCUS_SERVICE_PROVIDER], hostDirectives: [ClrPopoverHostDirective], host: { '[class.btn-group]': 'true' }, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<ng-template *ngFor=\"let inlineButton of inlineButtons\" [ngTemplateOutlet]=\"inlineButton.templateRef\"></ng-template>\n\n<div *ngIf=\"menuButtons.length > 0\" class=\"btn-group-overflow open\" [ngClass]=\"menuPosition\">\n <button\n #menuToggle\n class=\"btn dropdown-toggle\"\n clrPopoverAnchor\n clrPopoverOpenCloseButton\n (keydown.arrowup)=\"openMenu($event, InitialFocus.LAST_ITEM)\"\n (keydown.arrowdown)=\"openMenu($event, InitialFocus.FIRST_ITEM)\"\n [attr.aria-controls]=\"popoverId\"\n [attr.aria-expanded]=\"open\"\n [attr.aria-label]=\"clrToggleButtonAriaLabel\"\n >\n <cds-icon shape=\"ellipsis-horizontal\" [attr.title]=\"commonStrings.keys.more\"></cds-icon>\n </button>\n <div\n #menu\n role=\"menu\"\n class=\"dropdown-menu clr-button-group-menu\"\n [id]=\"popoverId\"\n [attr.id]=\"popoverId\"\n [attr.aria-hidden]=\"!open\"\n *clrPopoverContent=\"open at popoverPosition; outsideClickToClose: true; scrollToClose: true\"\n >\n <ng-template *ngFor=\"let menuButton of menuButtons\" [ngTemplateOutlet]=\"menuButton.templateRef\"></ng-template>\n </div>\n</div>\n" }]
|
|
3840
3857
|
}], ctorParameters: function () { return [{ type: ButtonInGroupService }, { type: ClrPopoverToggleService }, { type: ClrCommonStringsService }, { type: ClrDestroyService }, { type: ButtonGroupFocusHandler }]; }, propDecorators: { clrToggleButtonAriaLabel: [{
|
|
3841
3858
|
type: Input,
|
|
3842
3859
|
args: ['clrToggleButtonAriaLabel']
|
|
@@ -6939,6 +6956,9 @@ class ClrCombobox extends WrappedFormControl {
|
|
|
6939
6956
|
}
|
|
6940
6957
|
onBlur() {
|
|
6941
6958
|
this.onTouchedCallback();
|
|
6959
|
+
if (this.control.control.updateOn === 'change' && this.control.control?.errors?.required) {
|
|
6960
|
+
this.updateControlValue();
|
|
6961
|
+
}
|
|
6942
6962
|
if (this.control.control.updateOn === 'blur') {
|
|
6943
6963
|
this.control.control.updateValueAndValidity();
|
|
6944
6964
|
}
|
|
@@ -8927,7 +8947,7 @@ class ClrMonthpicker {
|
|
|
8927
8947
|
}
|
|
8928
8948
|
}
|
|
8929
8949
|
ClrMonthpicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrMonthpicker, deps: [{ token: ViewManagerService }, { token: LocaleHelperService }, { token: DateNavigationService }, { token: DatepickerFocusService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
8930
|
-
ClrMonthpicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrMonthpicker, selector: "clr-monthpicker", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.monthpicker": "true" } }, ngImport: i0, template: `
|
|
8950
|
+
ClrMonthpicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrMonthpicker, selector: "clr-monthpicker", host: { attributes: { "role": "application" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.monthpicker": "true" } }, ngImport: i0, template: `
|
|
8931
8951
|
<button
|
|
8932
8952
|
type="button"
|
|
8933
8953
|
class="calendar-btn month"
|
|
@@ -8957,6 +8977,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
8957
8977
|
`,
|
|
8958
8978
|
host: {
|
|
8959
8979
|
'[class.monthpicker]': 'true',
|
|
8980
|
+
role: 'application',
|
|
8960
8981
|
},
|
|
8961
8982
|
}]
|
|
8962
8983
|
}], ctorParameters: function () { return [{ type: ViewManagerService }, { type: LocaleHelperService }, { type: DateNavigationService }, { type: DatepickerFocusService }, { type: i0.ElementRef }]; }, propDecorators: { onKeyDown: [{
|
|
@@ -9143,7 +9164,7 @@ class ClrYearpicker {
|
|
|
9143
9164
|
}
|
|
9144
9165
|
}
|
|
9145
9166
|
ClrYearpicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrYearpicker, deps: [{ token: DateNavigationService }, { token: ViewManagerService }, { token: DatepickerFocusService }, { token: i0.ElementRef }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9146
|
-
ClrYearpicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrYearpicker, selector: "clr-yearpicker", host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.yearpicker": "true" } }, ngImport: i0, template: `
|
|
9167
|
+
ClrYearpicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrYearpicker, selector: "clr-yearpicker", host: { attributes: { "role": "application" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.yearpicker": "true" } }, ngImport: i0, template: `
|
|
9147
9168
|
<div class="year-switchers">
|
|
9148
9169
|
<button
|
|
9149
9170
|
class="calendar-btn switcher"
|
|
@@ -9229,6 +9250,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
9229
9250
|
`,
|
|
9230
9251
|
host: {
|
|
9231
9252
|
'[class.yearpicker]': 'true',
|
|
9253
|
+
role: 'application',
|
|
9232
9254
|
},
|
|
9233
9255
|
}]
|
|
9234
9256
|
}], ctorParameters: function () { return [{ type: DateNavigationService }, { type: ViewManagerService }, { type: DatepickerFocusService }, { type: i0.ElementRef }, { type: ClrCommonStringsService }]; }, propDecorators: { onKeyDown: [{
|
|
@@ -9302,10 +9324,10 @@ class ClrDaypicker {
|
|
|
9302
9324
|
}
|
|
9303
9325
|
}
|
|
9304
9326
|
ClrDaypicker.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDaypicker, deps: [{ token: ViewManagerService }, { token: DateNavigationService }, { token: LocaleHelperService }, { token: ClrCommonStringsService }], target: i0.ɵɵFactoryTarget.Component });
|
|
9305
|
-
ClrDaypicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDaypicker, selector: "clr-daypicker", host: { properties: { "class.daypicker": "true" } }, ngImport: i0, template: "<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n<div class=\"calendar-header\">\n <div class=\"calendar-pickers\">\n <button\n class=\"calendar-btn monthpicker-trigger\"\n type=\"button\"\n (click)=\"changeToMonthView()\"\n [attr.aria-label]=\"monthAttrString\"\n [attr.title]=\"monthAttrString\"\n >\n {{calendarMonth}}\n </button>\n <button\n class=\"calendar-btn yearpicker-trigger\"\n type=\"button\"\n (click)=\"changeToYearView()\"\n [attr.aria-label]=\"yearAttrString\"\n [attr.title]=\"yearAttrString\"\n >\n {{calendarYear}}\n </button>\n </div>\n <div class=\"calendar-switchers\">\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"previousMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerPreviousMonth\"\n >\n <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.datepickerPreviousMonth\"></cds-icon>\n </button>\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"currentMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerCurrentMonth\"\n >\n <cds-icon shape=\"event\" [attr.title]=\"commonStrings.keys.datepickerCurrentMonth\"></cds-icon>\n </button>\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"nextMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerNextMonth\"\n >\n <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.datepickerNextMonth\"></cds-icon>\n </button>\n </div>\n</div>\n<clr-calendar></clr-calendar>\n<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n", dependencies: [{ kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrCalendar, selector: "clr-calendar" }] });
|
|
9327
|
+
ClrDaypicker.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrDaypicker, selector: "clr-daypicker", host: { attributes: { "role": "application" }, properties: { "class.daypicker": "true" } }, ngImport: i0, template: "<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n<div class=\"calendar-header\">\n <div class=\"calendar-pickers\">\n <button\n class=\"calendar-btn monthpicker-trigger\"\n type=\"button\"\n (click)=\"changeToMonthView()\"\n [attr.aria-label]=\"monthAttrString\"\n [attr.title]=\"monthAttrString\"\n >\n {{calendarMonth}}\n </button>\n <button\n class=\"calendar-btn yearpicker-trigger\"\n type=\"button\"\n (click)=\"changeToYearView()\"\n [attr.aria-label]=\"yearAttrString\"\n [attr.title]=\"yearAttrString\"\n >\n {{calendarYear}}\n </button>\n </div>\n <div class=\"calendar-switchers\">\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"previousMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerPreviousMonth\"\n >\n <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.datepickerPreviousMonth\"></cds-icon>\n </button>\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"currentMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerCurrentMonth\"\n >\n <cds-icon shape=\"event\" [attr.title]=\"commonStrings.keys.datepickerCurrentMonth\"></cds-icon>\n </button>\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"nextMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerNextMonth\"\n >\n <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.datepickerNextMonth\"></cds-icon>\n </button>\n </div>\n</div>\n<clr-calendar></clr-calendar>\n<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n", dependencies: [{ kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "component", type: ClrCalendar, selector: "clr-calendar" }] });
|
|
9306
9328
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDaypicker, decorators: [{
|
|
9307
9329
|
type: Component,
|
|
9308
|
-
args: [{ selector: 'clr-daypicker', host: { '[class.daypicker]': 'true' }, template: "<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n<div class=\"calendar-header\">\n <div class=\"calendar-pickers\">\n <button\n class=\"calendar-btn monthpicker-trigger\"\n type=\"button\"\n (click)=\"changeToMonthView()\"\n [attr.aria-label]=\"monthAttrString\"\n [attr.title]=\"monthAttrString\"\n >\n {{calendarMonth}}\n </button>\n <button\n class=\"calendar-btn yearpicker-trigger\"\n type=\"button\"\n (click)=\"changeToYearView()\"\n [attr.aria-label]=\"yearAttrString\"\n [attr.title]=\"yearAttrString\"\n >\n {{calendarYear}}\n </button>\n </div>\n <div class=\"calendar-switchers\">\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"previousMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerPreviousMonth\"\n >\n <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.datepickerPreviousMonth\"></cds-icon>\n </button>\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"currentMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerCurrentMonth\"\n >\n <cds-icon shape=\"event\" [attr.title]=\"commonStrings.keys.datepickerCurrentMonth\"></cds-icon>\n </button>\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"nextMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerNextMonth\"\n >\n <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.datepickerNextMonth\"></cds-icon>\n </button>\n </div>\n</div>\n<clr-calendar></clr-calendar>\n<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n" }]
|
|
9330
|
+
args: [{ selector: 'clr-daypicker', host: { '[class.daypicker]': 'true', role: 'application' }, template: "<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n<div class=\"calendar-header\">\n <div class=\"calendar-pickers\">\n <button\n class=\"calendar-btn monthpicker-trigger\"\n type=\"button\"\n (click)=\"changeToMonthView()\"\n [attr.aria-label]=\"monthAttrString\"\n [attr.title]=\"monthAttrString\"\n >\n {{calendarMonth}}\n </button>\n <button\n class=\"calendar-btn yearpicker-trigger\"\n type=\"button\"\n (click)=\"changeToYearView()\"\n [attr.aria-label]=\"yearAttrString\"\n [attr.title]=\"yearAttrString\"\n >\n {{calendarYear}}\n </button>\n </div>\n <div class=\"calendar-switchers\">\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"previousMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerPreviousMonth\"\n >\n <cds-icon shape=\"angle\" direction=\"left\" [attr.title]=\"commonStrings.keys.datepickerPreviousMonth\"></cds-icon>\n </button>\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"currentMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerCurrentMonth\"\n >\n <cds-icon shape=\"event\" [attr.title]=\"commonStrings.keys.datepickerCurrentMonth\"></cds-icon>\n </button>\n <button\n class=\"calendar-btn switcher\"\n type=\"button\"\n (click)=\"nextMonth()\"\n [attr.aria-label]=\"commonStrings.keys.datepickerNextMonth\"\n >\n <cds-icon shape=\"angle\" direction=\"right\" [attr.title]=\"commonStrings.keys.datepickerNextMonth\"></cds-icon>\n </button>\n </div>\n</div>\n<clr-calendar></clr-calendar>\n<div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n" }]
|
|
9309
9331
|
}], ctorParameters: function () { return [{ type: ViewManagerService }, { type: DateNavigationService }, { type: LocaleHelperService }, { type: ClrCommonStringsService }]; } });
|
|
9310
9332
|
|
|
9311
9333
|
/*
|
|
@@ -12236,6 +12258,9 @@ class ModalStackService {
|
|
|
12236
12258
|
}
|
|
12237
12259
|
onKeyUp(event) {
|
|
12238
12260
|
if (this.modalStack.length && normalizeKey(event.key) === Keys.Escape) {
|
|
12261
|
+
// We blur the active element because escaping with an input element in focus could cause
|
|
12262
|
+
// an ExpressionChangedAfterItHasBeenCheckedError for the touched state. (CDE-1662)
|
|
12263
|
+
document.activeElement.blur();
|
|
12239
12264
|
this.modalStack[0].close();
|
|
12240
12265
|
}
|
|
12241
12266
|
}
|
|
@@ -21054,7 +21079,7 @@ class ClrTabContent {
|
|
|
21054
21079
|
return this.ifActiveService.current === this.id;
|
|
21055
21080
|
}
|
|
21056
21081
|
get ariaLabelledBy() {
|
|
21057
|
-
return this.tabsService.children.find(tab => tab.
|
|
21082
|
+
return this.tabsService.children.find(tab => tab.tabLink.id === this.id)?.tabLink?.tabLinkId;
|
|
21058
21083
|
}
|
|
21059
21084
|
// The template must be applied on the top-down phase of view-child initialization to prevent
|
|
21060
21085
|
// components in the content from initializing before a content container exists.
|
|
@@ -25728,7 +25753,7 @@ class ClrWizard {
|
|
|
25728
25753
|
}
|
|
25729
25754
|
}
|
|
25730
25755
|
ClrWizard.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrWizard, deps: [{ token: PLATFORM_ID }, { token: ClrCommonStringsService }, { token: WizardNavigationService }, { token: PageCollectionService }, { token: ButtonHubService }, { token: HeaderActionService }, { token: i0.ElementRef }, { token: i0.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
|
|
25731
|
-
ClrWizard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrWizard, selector: "clr-wizard", inputs: { stepnavAriaLabel: ["clrWizardStepnavAriaLabel", "stepnavAriaLabel"], size: ["clrWizardSize", "size"], closable: ["clrWizardClosable", "closable"], _stopModalAnimations: ["clrWizardPreventModalAnimation", "_stopModalAnimations"], forceForward: ["clrWizardForceForwardNavigation", "forceForward"], clrWizardOpen: "clrWizardOpen", stopNext: ["clrWizardPreventDefaultNext", "stopNext"], stopCancel: ["clrWizardPreventDefaultCancel", "stopCancel"], stopNavigation: ["clrWizardPreventNavigation", "stopNavigation"], disableStepnav: ["clrWizardDisableStepnav", "disableStepnav"] }, outputs: { _openChanged: "clrWizardOpenChange", onCancel: "clrWizardOnCancel", wizardFinished: "clrWizardOnFinish", onReset: "clrWizardOnReset", currentPageChanged: "clrWizardCurrentPageChanged", onMoveNext: "clrWizardOnNext", onMovePrevious: "clrWizardOnPrevious" }, host: { properties: { "class.clr-wizard": "true", "class.wizard-md": "size == 'md'", "class.wizard-lg": "size == 'lg'", "class.wizard-xl": "size == 'xl'", "class.lastPage": "navService.currentPageIsLast" } }, providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], queries: [{ propertyName: "wizardTitle", first: true, predicate: ClrWizardTitle, descendants: true }, { propertyName: "pages", predicate: ClrWizardPage, descendants: true }, { propertyName: "headerActions", predicate: ClrWizardHeaderAction }], viewQueries: [{ propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<clr-modal\n [clrModalOpen]=\"_open\"\n [clrModalSize]=\"size\"\n [clrModalClosable]=\"closable\"\n [clrModalStaticBackdrop]=\"true\"\n [clrModalSkipAnimation]=\"stopModalAnimations\"\n [clrModalOverrideScrollService]=\"isInline\"\n [clrModalPreventClose]=\"true\"\n (clrModalAlternateClose)=\"modalCancel()\"\n [clrModalLabelledById]=\"wizardId\"\n>\n <div class=\"modal-nav clr-wizard-stepnav-wrapper\" role=\"region\" [attr.aria-label]=\"stepnavAriaLabel\">\n <div class=\"clr-wizard-title\" id=\"{{wizardId}}\" role=\"heading\" [attr.aria-level]=\"wizardTitle.headingLevel || 1\">\n <ng-content select=\"clr-wizard-title\"></ng-content>\n </div>\n <clr-wizard-stepnav></clr-wizard-stepnav>\n </div>\n\n <div class=\"modal-title\" role=\"heading\" [attr.aria-level]=\"navService.currentPage
|
|
25756
|
+
ClrWizard.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrWizard, selector: "clr-wizard", inputs: { stepnavAriaLabel: ["clrWizardStepnavAriaLabel", "stepnavAriaLabel"], size: ["clrWizardSize", "size"], closable: ["clrWizardClosable", "closable"], _stopModalAnimations: ["clrWizardPreventModalAnimation", "_stopModalAnimations"], forceForward: ["clrWizardForceForwardNavigation", "forceForward"], clrWizardOpen: "clrWizardOpen", stopNext: ["clrWizardPreventDefaultNext", "stopNext"], stopCancel: ["clrWizardPreventDefaultCancel", "stopCancel"], stopNavigation: ["clrWizardPreventNavigation", "stopNavigation"], disableStepnav: ["clrWizardDisableStepnav", "disableStepnav"] }, outputs: { _openChanged: "clrWizardOpenChange", onCancel: "clrWizardOnCancel", wizardFinished: "clrWizardOnFinish", onReset: "clrWizardOnReset", currentPageChanged: "clrWizardCurrentPageChanged", onMoveNext: "clrWizardOnNext", onMovePrevious: "clrWizardOnPrevious" }, host: { properties: { "class.clr-wizard": "true", "class.wizard-md": "size == 'md'", "class.wizard-lg": "size == 'lg'", "class.wizard-xl": "size == 'xl'", "class.lastPage": "navService.currentPageIsLast" } }, providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], queries: [{ propertyName: "wizardTitle", first: true, predicate: ClrWizardTitle, descendants: true }, { propertyName: "pages", predicate: ClrWizardPage, descendants: true }, { propertyName: "headerActions", predicate: ClrWizardHeaderAction }], viewQueries: [{ propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: true }], ngImport: i0, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<clr-modal\n [clrModalOpen]=\"_open\"\n [clrModalSize]=\"size\"\n [clrModalClosable]=\"closable\"\n [clrModalStaticBackdrop]=\"true\"\n [clrModalSkipAnimation]=\"stopModalAnimations\"\n [clrModalOverrideScrollService]=\"isInline\"\n [clrModalPreventClose]=\"true\"\n (clrModalAlternateClose)=\"modalCancel()\"\n [clrModalLabelledById]=\"wizardId\"\n>\n <div class=\"modal-nav clr-wizard-stepnav-wrapper\" role=\"region\" [attr.aria-label]=\"stepnavAriaLabel\">\n <div class=\"clr-wizard-title\" id=\"{{wizardId}}\" role=\"heading\" [attr.aria-level]=\"wizardTitle.headingLevel || 1\">\n <ng-content select=\"clr-wizard-title\"></ng-content>\n </div>\n <clr-wizard-stepnav></clr-wizard-stepnav>\n </div>\n\n <div class=\"modal-title\" role=\"heading\" [attr.aria-level]=\"navService.currentPage?.pageTitle.headingLevel || 2\">\n <span tabindex=\"-1\" #pageTitle class=\"modal-title-text\">\n <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n </span>\n\n <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n <ng-content select=\"clr-wizard-header-action\"></ng-content>\n </div>\n <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n </div>\n </div>\n </div>\n\n <div class=\"modal-body\">\n <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n <ng-content></ng-content>\n </main>\n </div>\n <div class=\"modal-footer clr-wizard-footer\">\n <div class=\"clr-wizard-footer-buttons\">\n <div\n *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n class=\"clr-wizard-footer-buttons-wrapper\"\n >\n <ng-content select=\"clr-wizard-button\"></ng-content>\n </div>\n <div\n *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n class=\"clr-wizard-footer-buttons-wrapper\"\n >\n <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n </div>\n </div>\n </div>\n</clr-modal>\n", dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClrModal, selector: "clr-modal", inputs: ["clrModalOpen", "clrModalClosable", "clrModalCloseButtonAriaLabel", "clrModalSize", "clrModalStaticBackdrop", "clrModalSkipAnimation", "clrModalPreventClose", "clrModalLabelledById", "clrModalOverrideScrollService"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: ClrModalBody, selector: ".modal-body" }, { kind: "component", type: ClrWizardStepnav, selector: "clr-wizard-stepnav" }] });
|
|
25732
25757
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrWizard, decorators: [{
|
|
25733
25758
|
type: Component,
|
|
25734
25759
|
args: [{ selector: 'clr-wizard', providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], host: {
|
|
@@ -25737,7 +25762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
25737
25762
|
'[class.wizard-lg]': "size == 'lg'",
|
|
25738
25763
|
'[class.wizard-xl]': "size == 'xl'",
|
|
25739
25764
|
'[class.lastPage]': 'navService.currentPageIsLast',
|
|
25740
|
-
}, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<clr-modal\n [clrModalOpen]=\"_open\"\n [clrModalSize]=\"size\"\n [clrModalClosable]=\"closable\"\n [clrModalStaticBackdrop]=\"true\"\n [clrModalSkipAnimation]=\"stopModalAnimations\"\n [clrModalOverrideScrollService]=\"isInline\"\n [clrModalPreventClose]=\"true\"\n (clrModalAlternateClose)=\"modalCancel()\"\n [clrModalLabelledById]=\"wizardId\"\n>\n <div class=\"modal-nav clr-wizard-stepnav-wrapper\" role=\"region\" [attr.aria-label]=\"stepnavAriaLabel\">\n <div class=\"clr-wizard-title\" id=\"{{wizardId}}\" role=\"heading\" [attr.aria-level]=\"wizardTitle.headingLevel || 1\">\n <ng-content select=\"clr-wizard-title\"></ng-content>\n </div>\n <clr-wizard-stepnav></clr-wizard-stepnav>\n </div>\n\n <div class=\"modal-title\" role=\"heading\" [attr.aria-level]=\"navService.currentPage
|
|
25765
|
+
}, template: "<!--\n ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.\n ~ This software is released under MIT license.\n ~ The full license information can be found in LICENSE in the root directory of this project.\n -->\n\n<clr-modal\n [clrModalOpen]=\"_open\"\n [clrModalSize]=\"size\"\n [clrModalClosable]=\"closable\"\n [clrModalStaticBackdrop]=\"true\"\n [clrModalSkipAnimation]=\"stopModalAnimations\"\n [clrModalOverrideScrollService]=\"isInline\"\n [clrModalPreventClose]=\"true\"\n (clrModalAlternateClose)=\"modalCancel()\"\n [clrModalLabelledById]=\"wizardId\"\n>\n <div class=\"modal-nav clr-wizard-stepnav-wrapper\" role=\"region\" [attr.aria-label]=\"stepnavAriaLabel\">\n <div class=\"clr-wizard-title\" id=\"{{wizardId}}\" role=\"heading\" [attr.aria-level]=\"wizardTitle.headingLevel || 1\">\n <ng-content select=\"clr-wizard-title\"></ng-content>\n </div>\n <clr-wizard-stepnav></clr-wizard-stepnav>\n </div>\n\n <div class=\"modal-title\" role=\"heading\" [attr.aria-level]=\"navService.currentPage?.pageTitle.headingLevel || 2\">\n <span tabindex=\"-1\" #pageTitle class=\"modal-title-text\">\n <ng-template [ngTemplateOutlet]=\"navService.currentPageTitle\"></ng-template>\n </span>\n\n <div class=\"modal-header-actions-wrapper\" *ngIf=\"headerActionService.displayHeaderActionsWrapper\">\n <div *ngIf=\"headerActionService.showWizardHeaderActions\">\n <ng-content select=\"clr-wizard-header-action\"></ng-content>\n </div>\n <div *ngIf=\"headerActionService.currentPageHasHeaderActions\">\n <ng-template [ngTemplateOutlet]=\"navService.currentPage.headerActions\"></ng-template>\n </div>\n </div>\n </div>\n\n <div class=\"modal-body\">\n <main clr-wizard-pages-wrapper class=\"clr-wizard-content\">\n <ng-content></ng-content>\n </main>\n </div>\n <div class=\"modal-footer clr-wizard-footer\">\n <div class=\"clr-wizard-footer-buttons\">\n <div\n *ngIf=\"navService.currentPage && !navService.currentPage.hasButtons\"\n class=\"clr-wizard-footer-buttons-wrapper\"\n >\n <ng-content select=\"clr-wizard-button\"></ng-content>\n </div>\n <div\n *ngIf=\"navService.currentPage && navService.currentPage.hasButtons\"\n class=\"clr-wizard-footer-buttons-wrapper\"\n >\n <ng-template [ngTemplateOutlet]=\"navService.currentPage.buttons\"></ng-template>\n </div>\n </div>\n </div>\n</clr-modal>\n" }]
|
|
25741
25766
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
25742
25767
|
type: Inject,
|
|
25743
25768
|
args: [PLATFORM_ID]
|