@clr/angular 16.2.0 → 17.0.0-next.1
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 +0 -12
- package/accordion/accordion.d.ts +0 -3
- package/clarity.api.md +9 -11
- package/esm2020/accordion/accordion-panel.mjs +1 -13
- package/esm2020/accordion/accordion.mjs +1 -4
- package/esm2020/data/datagrid/datagrid-row.mjs +3 -3
- package/esm2020/data/datagrid/utils/key-navigation-grid.controller.mjs +2 -2
- package/esm2020/data/tree-view/tree-node.mjs +1 -1
- package/esm2020/forms/common/abstract-container.mjs +20 -18
- package/esm2020/forms/common/error.mjs +3 -2
- package/esm2020/forms/common/success.mjs +3 -2
- package/esm2020/forms/common/wrapped-control.mjs +4 -6
- package/esm2020/forms/password/password-container.mjs +3 -3
- package/esm2020/modal/modal.mjs +3 -8
- package/esm2020/wizard/wizard.mjs +6 -29
- package/fesm2015/clr-angular.mjs +38 -80
- package/fesm2015/clr-angular.mjs.map +1 -1
- package/fesm2020/clr-angular.mjs +38 -79
- package/fesm2020/clr-angular.mjs.map +1 -1
- package/forms/common/abstract-container.d.ts +4 -6
- package/forms/common/wrapped-control.d.ts +1 -1
- package/modal/modal.d.ts +1 -2
- package/package.json +6 -6
- package/wizard/wizard.d.ts +2 -12
package/fesm2015/clr-angular.mjs
CHANGED
|
@@ -537,17 +537,8 @@ class ClrAccordionPanel {
|
|
|
537
537
|
this.accordionService = accordionService;
|
|
538
538
|
this.ifExpandService = ifExpandService;
|
|
539
539
|
this.cdr = cdr;
|
|
540
|
-
/**
|
|
541
|
-
* Whether the panel is disabled.
|
|
542
|
-
*/
|
|
543
540
|
this.disabled = false;
|
|
544
|
-
/**
|
|
545
|
-
* Whether the panel is open.
|
|
546
|
-
*/
|
|
547
541
|
this.panelOpen = false;
|
|
548
|
-
/**
|
|
549
|
-
* Event that is emitted when the panel is opened or closed. The boolean emitted indicates the current state.
|
|
550
|
-
*/
|
|
551
542
|
this.panelOpenChange = new EventEmitter();
|
|
552
543
|
this.AccordionStatus = AccordionStatus;
|
|
553
544
|
this.isAccordion = true;
|
|
@@ -576,9 +567,6 @@ class ClrAccordionPanel {
|
|
|
576
567
|
this.accordionService.disablePanel(this.id, changes.disabled.currentValue);
|
|
577
568
|
}
|
|
578
569
|
}
|
|
579
|
-
/**
|
|
580
|
-
* Toggles this panel open or closed.
|
|
581
|
-
*/
|
|
582
570
|
togglePanel() {
|
|
583
571
|
this.accordionService.togglePanel(this.id);
|
|
584
572
|
}
|
|
@@ -652,9 +640,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
652
640
|
class ClrAccordion {
|
|
653
641
|
constructor(accordionService) {
|
|
654
642
|
this.accordionService = accordionService;
|
|
655
|
-
/**
|
|
656
|
-
* Whether the accordion supports multiple panels opened at the same time.
|
|
657
|
-
*/
|
|
658
643
|
this.multiPanel = false;
|
|
659
644
|
this.subscriptions = [];
|
|
660
645
|
}
|
|
@@ -4224,7 +4209,7 @@ class ClrControlError extends ClrAbstractControl {
|
|
|
4224
4209
|
}
|
|
4225
4210
|
}
|
|
4226
4211
|
ClrControlError.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrControlError, deps: [{ token: ControlIdService, optional: true }, { token: ContainerIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4227
|
-
ClrControlError.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrControlError, selector: "clr-control-error", host: { properties: { "class.clr-subtext": "true", "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
4212
|
+
ClrControlError.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrControlError, selector: "clr-control-error", host: { properties: { "class.clr-subtext": "true", "class.error": "true", "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
4228
4213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrControlError, decorators: [{
|
|
4229
4214
|
type: Component,
|
|
4230
4215
|
args: [{
|
|
@@ -4232,6 +4217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
4232
4217
|
template: `<ng-content></ng-content>`,
|
|
4233
4218
|
host: {
|
|
4234
4219
|
'[class.clr-subtext]': 'true',
|
|
4220
|
+
'[class.error]': 'true',
|
|
4235
4221
|
'[attr.id]': 'id',
|
|
4236
4222
|
},
|
|
4237
4223
|
}]
|
|
@@ -4492,7 +4478,7 @@ class ClrControlSuccess extends ClrAbstractControl {
|
|
|
4492
4478
|
}
|
|
4493
4479
|
}
|
|
4494
4480
|
ClrControlSuccess.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrControlSuccess, deps: [{ token: ControlIdService, optional: true }, { token: ContainerIdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
4495
|
-
ClrControlSuccess.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrControlSuccess, selector: "clr-control-success", host: { properties: { "class.clr-subtext": "true", "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
4481
|
+
ClrControlSuccess.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrControlSuccess, selector: "clr-control-success", host: { properties: { "class.clr-subtext": "true", "class.success": "true", "attr.id": "id" } }, usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true });
|
|
4496
4482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrControlSuccess, decorators: [{
|
|
4497
4483
|
type: Component,
|
|
4498
4484
|
args: [{
|
|
@@ -4500,6 +4486,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
4500
4486
|
template: `<ng-content></ng-content>`,
|
|
4501
4487
|
host: {
|
|
4502
4488
|
'[class.clr-subtext]': 'true',
|
|
4489
|
+
'[class.success]': 'true',
|
|
4503
4490
|
'[attr.id]': 'id',
|
|
4504
4491
|
},
|
|
4505
4492
|
}]
|
|
@@ -4584,25 +4571,27 @@ class ClrAbstractContainer {
|
|
|
4584
4571
|
}
|
|
4585
4572
|
/**
|
|
4586
4573
|
* @NOTE
|
|
4587
|
-
* Helper control is a bit different than the others, it must be visible
|
|
4588
|
-
* -
|
|
4589
|
-
*
|
|
4590
|
-
*
|
|
4591
|
-
* For example user implement only Error control then if CONTROL_STATE is VALID then helper
|
|
4592
|
-
* control must be visible.
|
|
4574
|
+
* Helper control is a bit different than the others, it must be always visible:
|
|
4575
|
+
* - Labels and instructions must always accompany forms and are persistent.
|
|
4576
|
+
* - The recommendation here is to always have helper text or anything instructions visible.
|
|
4577
|
+
* - The expectation is to have error text + helper text in the errored state. this way all users will have the helper text information always available.
|
|
4593
4578
|
*/
|
|
4594
4579
|
get showHelper() {
|
|
4595
|
-
|
|
4596
|
-
|
|
4597
|
-
|
|
4598
|
-
|
|
4599
|
-
|
|
4600
|
-
|
|
4601
|
-
|
|
4602
|
-
|
|
4603
|
-
|
|
4604
|
-
|
|
4605
|
-
|
|
4580
|
+
/**
|
|
4581
|
+
* @NOTE
|
|
4582
|
+
* Saving the previous version in case something is changed. We'll return always true so we can be flexible
|
|
4583
|
+
* and keep the condition per components.
|
|
4584
|
+
*
|
|
4585
|
+
* return (
|
|
4586
|
+
* Helper Component exist and the state of the form is NONE (not touched)
|
|
4587
|
+
* (!!this.controlHelperComponent && (!this.touched || this.state === CONTROL_STATE.NONE)) ||
|
|
4588
|
+
* or there is no success component but the state of the form is VALID - show helper information
|
|
4589
|
+
* (!!this.controlSuccessComponent === false && this.state === CONTROL_STATE.VALID) ||
|
|
4590
|
+
* or there is no error component but the state of the form is INVALID - show helper information
|
|
4591
|
+
* (!!this.controlErrorComponent === false && this.state === CONTROL_STATE.INVALID)
|
|
4592
|
+
* );
|
|
4593
|
+
*/
|
|
4594
|
+
return Boolean(this.controlHelperComponent);
|
|
4606
4595
|
}
|
|
4607
4596
|
get showValid() {
|
|
4608
4597
|
return this.touched && this.state === CONTROL_STATE.VALID && !!this.controlSuccessComponent;
|
|
@@ -4869,7 +4858,7 @@ class WrappedFormControl {
|
|
|
4869
4858
|
else {
|
|
4870
4859
|
this._id = this.controlIdService.id;
|
|
4871
4860
|
}
|
|
4872
|
-
if (this.ngControlService
|
|
4861
|
+
if (this.ngControlService) {
|
|
4873
4862
|
this.ngControlService.setControl(this.ngControl);
|
|
4874
4863
|
}
|
|
4875
4864
|
}
|
|
@@ -4894,10 +4883,8 @@ class WrappedFormControl {
|
|
|
4894
4883
|
}
|
|
4895
4884
|
}
|
|
4896
4885
|
markAsTouched() {
|
|
4897
|
-
|
|
4898
|
-
|
|
4899
|
-
this.ngControl.control.updateValueAndValidity();
|
|
4900
|
-
}
|
|
4886
|
+
this.ngControl.control.markAsTouched();
|
|
4887
|
+
this.ngControl.control.updateValueAndValidity();
|
|
4901
4888
|
}
|
|
4902
4889
|
setAriaDescribedBy(helpers) {
|
|
4903
4890
|
if (helpers.show) {
|
|
@@ -10046,7 +10033,7 @@ ClrPasswordContainer.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
|
|
|
10046
10033
|
class="clr-input-group-icon-action"
|
|
10047
10034
|
type="button"
|
|
10048
10035
|
>
|
|
10049
|
-
<cds-icon
|
|
10036
|
+
<cds-icon class="clr-password-eye-icon" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
|
|
10050
10037
|
<span class="clr-sr-only">
|
|
10051
10038
|
{{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }}
|
|
10052
10039
|
</span>
|
|
@@ -10090,7 +10077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
10090
10077
|
class="clr-input-group-icon-action"
|
|
10091
10078
|
type="button"
|
|
10092
10079
|
>
|
|
10093
|
-
<cds-icon
|
|
10080
|
+
<cds-icon class="clr-password-eye-icon" [attr.shape]="show ? 'eye-hide' : 'eye'"></cds-icon>
|
|
10094
10081
|
<span class="clr-sr-only">
|
|
10095
10082
|
{{ show ? commonStrings.keys.passwordHide : commonStrings.keys.passwordShow }}
|
|
10096
10083
|
</span>
|
|
@@ -14625,7 +14612,7 @@ ClrDatagridRow.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version
|
|
|
14625
14612
|
DatagridIfExpandService,
|
|
14626
14613
|
{ provide: IfExpandService, useExisting: DatagridIfExpandService },
|
|
14627
14614
|
{ provide: LoadingListener, useExisting: DatagridIfExpandService },
|
|
14628
|
-
], queries: [{ propertyName: "dgCells", predicate: ClrDatagridCell }], viewQueries: [{ propertyName: "expandAnimation", first: true, predicate: ClrExpandableAnimation, descendants: true }, { propertyName: "detailButton", first: true, predicate: ["detailButton"], descendants: true }, { propertyName: "_stickyCells", first: true, predicate: ["stickyCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollableCells", first: true, predicate: ["scrollableCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculatedCells", first: true, predicate: ["calculatedCells"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<div\n class=\"datagrid-row-clickable\"\n *ngIf=\"selection.rowSelectionMode\"\n (mousedown)=\"clearRanges($event)\"\n (click)=\"selectRow(!selected, $event)\"\n>\n <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n </clr-expandable-animation>\n <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</div>\n\n<clr-expandable-animation\n *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n We need the \"project into template\" hacks because we need this in 2 different places\n depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n <div\n role=\"row\"\n [id]=\"id\"\n class=\"datagrid-row-master datagrid-row-flex\"\n [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n >\n <div class=\"datagrid-row-sticky\">\n <!-- Sticky elements here -->\n <ng-container #stickyCells>\n <div\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n role=\"gridcell\"\n >\n <clr-checkbox-wrapper>\n <input\n type=\"checkbox\"\n clrCheckbox\n [ngModel]=\"selected\"\n (ngModelChange)=\"toggle($event)\"\n [id]=\"checkboxId\"\n [disabled]=\"clrDgSelectable ? null : true\"\n [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n </label>\n </clr-checkbox-wrapper>\n </div>\n <div\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n role=\"gridcell\"\n >\n <clr-radio-wrapper>\n <input\n type=\"radio\"\n clrRadio\n [id]=\"radioId\"\n [name]=\"selection.id + '-radio'\"\n [value]=\"item\"\n [(ngModel)]=\"selection.currentSingle\"\n [checked]=\"selection.currentSingle === item\"\n [disabled]=\"clrDgSelectable ? null : true\"\n [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n />\n <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n </label>\n </clr-radio-wrapper>\n </div>\n <div\n *ngIf=\"rowActionService.hasActionableRow\"\n class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n role=\"gridcell\"\n >\n <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n </div>\n <div\n *ngIf=\"globalExpandable.hasExpandableRow\"\n class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n role=\"gridcell\"\n >\n <ng-container *ngIf=\"expand.expandable\">\n <button\n *ngIf=\"!expand.loading\"\n (click)=\"toggleExpand()\"\n type=\"button\"\n class=\"datagrid-expandable-caret-button\"\n [attr.aria-expanded]=\"expand.expanded\"\n [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n [attr.aria-controls]=\"expandableId\"\n >\n <cds-icon\n shape=\"angle\"\n class=\"datagrid-expandable-caret-icon\"\n [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n ></cds-icon>\n </button>\n <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n </ng-container>\n </div>\n <div
|
|
14615
|
+
], queries: [{ propertyName: "dgCells", predicate: ClrDatagridCell }], viewQueries: [{ propertyName: "expandAnimation", first: true, predicate: ClrExpandableAnimation, descendants: true }, { propertyName: "detailButton", first: true, predicate: ["detailButton"], descendants: true }, { propertyName: "_stickyCells", first: true, predicate: ["stickyCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_scrollableCells", first: true, predicate: ["scrollableCells"], descendants: true, read: ViewContainerRef }, { propertyName: "_calculatedCells", first: true, predicate: ["calculatedCells"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<!--\n We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<div\n class=\"datagrid-row-clickable\"\n *ngIf=\"selection.rowSelectionMode\"\n (mousedown)=\"clearRanges($event)\"\n (click)=\"selectRow(!selected, $event)\"\n>\n <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n </clr-expandable-animation>\n <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</div>\n\n<clr-expandable-animation\n *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n We need the \"project into template\" hacks because we need this in 2 different places\n depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n <div\n role=\"row\"\n [id]=\"id\"\n class=\"datagrid-row-master datagrid-row-flex\"\n [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n >\n <div class=\"datagrid-row-sticky\">\n <!-- Sticky elements here -->\n <ng-container #stickyCells>\n <div\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n role=\"gridcell\"\n >\n <clr-checkbox-wrapper>\n <input\n type=\"checkbox\"\n clrCheckbox\n [ngModel]=\"selected\"\n (ngModelChange)=\"toggle($event)\"\n [id]=\"checkboxId\"\n [disabled]=\"clrDgSelectable ? null : true\"\n [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n </label>\n </clr-checkbox-wrapper>\n </div>\n <div\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n role=\"gridcell\"\n >\n <clr-radio-wrapper>\n <input\n type=\"radio\"\n clrRadio\n [id]=\"radioId\"\n [name]=\"selection.id + '-radio'\"\n [value]=\"item\"\n [(ngModel)]=\"selection.currentSingle\"\n [checked]=\"selection.currentSingle === item\"\n [disabled]=\"clrDgSelectable ? null : true\"\n [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n />\n <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n </label>\n </clr-radio-wrapper>\n </div>\n <div\n *ngIf=\"rowActionService.hasActionableRow\"\n class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n role=\"gridcell\"\n >\n <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n </div>\n <div\n *ngIf=\"globalExpandable.hasExpandableRow\"\n class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n role=\"gridcell\"\n >\n <ng-container *ngIf=\"expand.expandable\">\n <button\n *ngIf=\"!expand.loading\"\n (click)=\"toggleExpand()\"\n type=\"button\"\n class=\"datagrid-expandable-caret-button\"\n [attr.aria-expanded]=\"expand.expanded\"\n [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n [attr.aria-controls]=\"expandableId\"\n >\n <cds-icon\n shape=\"angle\"\n class=\"datagrid-expandable-caret-icon\"\n [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n ></cds-icon>\n </button>\n <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n </ng-container>\n </div>\n <div *ngIf=\"detailService.enabled\" class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\">\n <button\n (click)=\"detailService.toggle(item, detailButton)\"\n type=\"button\"\n #detailButton\n class=\"datagrid-detail-caret-button\"\n [class.is-open]=\"detailService.isRowOpen(item)\"\n [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n [attr.aria-expanded]=\"detailService.isOpen\"\n [attr.aria-controls]=\"detailService.id\"\n aria-haspopup=\"dialog\"\n >\n <cds-icon\n shape=\"angle-double\"\n [attr.direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n class=\"datagrid-detail-caret-icon\"\n [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n ></cds-icon>\n </button>\n </div>\n </ng-container>\n <!-- placeholder for projecting other sticky cells as pinned-->\n </div>\n <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n <div class=\"datagrid-scrolling-cells\">\n <ng-content select=\"clr-dg-cell\"></ng-content>\n <ng-container #scrollableCells></ng-container>\n </div>\n <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n </div>\n </div>\n</ng-template>\n\n<ng-container #calculatedCells></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: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }, { kind: "directive", type: ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: ClrRadio, selector: "[clrRadio]" }, { kind: "component", type: ClrRadioWrapper, selector: "clr-radio-wrapper" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ClrExpandableAnimation, selector: "clr-expandable-animation", inputs: ["clrExpandTrigger"] }, { kind: "component", type: ClrSpinner, selector: "clr-spinner", inputs: ["clrInline", "clrInverse", "clrSmall", "clrMedium"] }, { kind: "directive", type: ClrDatagridSelectionCellDirective, selector: ".datagrid-select" }] });
|
|
14629
14616
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrDatagridRow, decorators: [{
|
|
14630
14617
|
type: Component,
|
|
14631
14618
|
args: [{ selector: 'clr-dg-row', host: {
|
|
@@ -14637,7 +14624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
14637
14624
|
DatagridIfExpandService,
|
|
14638
14625
|
{ provide: IfExpandService, useExisting: DatagridIfExpandService },
|
|
14639
14626
|
{ provide: LoadingListener, useExisting: DatagridIfExpandService },
|
|
14640
|
-
], template: "<!--\n We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<div\n class=\"datagrid-row-clickable\"\n *ngIf=\"selection.rowSelectionMode\"\n (mousedown)=\"clearRanges($event)\"\n (click)=\"selectRow(!selected, $event)\"\n>\n <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n </clr-expandable-animation>\n <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</div>\n\n<clr-expandable-animation\n *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n We need the \"project into template\" hacks because we need this in 2 different places\n depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n <div\n role=\"row\"\n [id]=\"id\"\n class=\"datagrid-row-master datagrid-row-flex\"\n [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n >\n <div class=\"datagrid-row-sticky\">\n <!-- Sticky elements here -->\n <ng-container #stickyCells>\n <div\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n role=\"gridcell\"\n >\n <clr-checkbox-wrapper>\n <input\n type=\"checkbox\"\n clrCheckbox\n [ngModel]=\"selected\"\n (ngModelChange)=\"toggle($event)\"\n [id]=\"checkboxId\"\n [disabled]=\"clrDgSelectable ? null : true\"\n [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n </label>\n </clr-checkbox-wrapper>\n </div>\n <div\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n role=\"gridcell\"\n >\n <clr-radio-wrapper>\n <input\n type=\"radio\"\n clrRadio\n [id]=\"radioId\"\n [name]=\"selection.id + '-radio'\"\n [value]=\"item\"\n [(ngModel)]=\"selection.currentSingle\"\n [checked]=\"selection.currentSingle === item\"\n [disabled]=\"clrDgSelectable ? null : true\"\n [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n />\n <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n </label>\n </clr-radio-wrapper>\n </div>\n <div\n *ngIf=\"rowActionService.hasActionableRow\"\n class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n role=\"gridcell\"\n >\n <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n </div>\n <div\n *ngIf=\"globalExpandable.hasExpandableRow\"\n class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n role=\"gridcell\"\n >\n <ng-container *ngIf=\"expand.expandable\">\n <button\n *ngIf=\"!expand.loading\"\n (click)=\"toggleExpand()\"\n type=\"button\"\n class=\"datagrid-expandable-caret-button\"\n [attr.aria-expanded]=\"expand.expanded\"\n [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n [attr.aria-controls]=\"expandableId\"\n >\n <cds-icon\n shape=\"angle\"\n class=\"datagrid-expandable-caret-icon\"\n [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n ></cds-icon>\n </button>\n <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n </ng-container>\n </div>\n <div
|
|
14627
|
+
], template: "<!--\n We need to wrap the #rowContent in label element if we are in rowSelectionMode.\n Clicking of that wrapper label will equate to clicking on the whole row, which triggers the checkbox to toggle.\n-->\n<div\n class=\"datagrid-row-clickable\"\n *ngIf=\"selection.rowSelectionMode\"\n (mousedown)=\"clearRanges($event)\"\n (click)=\"selectRow(!selected, $event)\"\n>\n <clr-expandable-animation [clrExpandTrigger]=\"expandAnimationTrigger\" *ngIf=\"expand.expandable\">\n <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n </clr-expandable-animation>\n <ng-template [ngTemplateOutlet]=\"rowContent\" *ngIf=\"!expand.expandable\"></ng-template>\n</div>\n\n<clr-expandable-animation\n *ngIf=\"!selection.rowSelectionMode && expand.expandable\"\n [clrExpandTrigger]=\"expandAnimationTrigger\"\n>\n <ng-template [ngTemplateOutlet]=\"rowContent\"></ng-template>\n</clr-expandable-animation>\n\n<ng-template *ngIf=\"!selection.rowSelectionMode && !expand.expandable\" [ngTemplateOutlet]=\"rowContent\"></ng-template>\n\n<!--\n We need the \"project into template\" hacks because we need this in 2 different places\n depending on whether the details replace the row or not.\n-->\n<ng-template #detail>\n <ng-content select=\"clr-dg-row-detail\"></ng-content>\n</ng-template>\n\n<ng-template #rowContent>\n <div\n role=\"row\"\n [id]=\"id\"\n class=\"datagrid-row-master datagrid-row-flex\"\n [class.datagrid-row-detail-open]=\"detailService.isRowOpen(item)\"\n >\n <div class=\"datagrid-row-sticky\">\n <!-- Sticky elements here -->\n <ng-container #stickyCells>\n <div\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Multi\"\n class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n role=\"gridcell\"\n >\n <clr-checkbox-wrapper>\n <input\n type=\"checkbox\"\n clrCheckbox\n [ngModel]=\"selected\"\n (ngModelChange)=\"toggle($event)\"\n [id]=\"checkboxId\"\n [disabled]=\"clrDgSelectable ? null : true\"\n [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n />\n <!-- Usage of class clr-col-null here prevents clr-col-* classes from being added when a datagrid is wrapped inside clrForm -->\n <label [for]=\"checkboxId\" class=\"clr-control-label clr-col-null\" (click)=\"clearRanges($event)\">\n <span class=\"clr-sr-only\">{{clrDgRowSelectionLabel || commonStrings.keys.select}}</span>\n </label>\n </clr-checkbox-wrapper>\n </div>\n <div\n *ngIf=\"selection.selectionType === SELECTION_TYPE.Single\"\n class=\"datagrid-select datagrid-fixed-column datagrid-cell\"\n [ngClass]=\"{ 'clr-form-control-disabled': !clrDgSelectable }\"\n role=\"gridcell\"\n >\n <clr-radio-wrapper>\n <input\n type=\"radio\"\n clrRadio\n [id]=\"radioId\"\n [name]=\"selection.id + '-radio'\"\n [value]=\"item\"\n [(ngModel)]=\"selection.currentSingle\"\n [checked]=\"selection.currentSingle === item\"\n [disabled]=\"clrDgSelectable ? null : true\"\n [attr.aria-disabled]=\"clrDgSelectable ? null : true\"\n />\n <label class=\"clr-control-label clr-col-null\" [for]=\"radioId\">\n <span class=\"clr-sr-only\">{{ clrDgRowSelectionLabel || commonStrings.keys.select }}</span>\n </label>\n </clr-radio-wrapper>\n </div>\n <div\n *ngIf=\"rowActionService.hasActionableRow\"\n class=\"datagrid-row-actions datagrid-fixed-column datagrid-cell\"\n role=\"gridcell\"\n >\n <ng-content select=\"clr-dg-action-overflow\"></ng-content>\n </div>\n <div\n *ngIf=\"globalExpandable.hasExpandableRow\"\n class=\"datagrid-expandable-caret datagrid-fixed-column datagrid-cell\"\n role=\"gridcell\"\n >\n <ng-container *ngIf=\"expand.expandable\">\n <button\n *ngIf=\"!expand.loading\"\n (click)=\"toggleExpand()\"\n type=\"button\"\n class=\"datagrid-expandable-caret-button\"\n [attr.aria-expanded]=\"expand.expanded\"\n [attr.aria-label]=\"expand.expanded ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n [attr.aria-controls]=\"expandableId\"\n >\n <cds-icon\n shape=\"angle\"\n class=\"datagrid-expandable-caret-icon\"\n [attr.direction]=\"expand.expanded ? 'down' : 'right'\"\n [attr.title]=\"expand.expanded ? commonStrings.keys.collapse : commonStrings.keys.expand\"\n ></cds-icon>\n </button>\n <clr-spinner *ngIf=\"expand.loading\" clrSmall>{{ commonStrings.keys.loading }}</clr-spinner>\n </ng-container>\n </div>\n <div *ngIf=\"detailService.enabled\" class=\"datagrid-detail-caret datagrid-fixed-column datagrid-cell\">\n <button\n (click)=\"detailService.toggle(item, detailButton)\"\n type=\"button\"\n #detailButton\n class=\"datagrid-detail-caret-button\"\n [class.is-open]=\"detailService.isRowOpen(item)\"\n [attr.aria-label]=\"detailService.isRowOpen(item) ? clrDgDetailCloseLabel : clrDgDetailOpenLabel\"\n [attr.aria-expanded]=\"detailService.isOpen\"\n [attr.aria-controls]=\"detailService.id\"\n aria-haspopup=\"dialog\"\n >\n <cds-icon\n shape=\"angle-double\"\n [attr.direction]=\"detailService.isRowOpen(item) ? 'left' : 'right'\"\n class=\"datagrid-detail-caret-icon\"\n [attr.title]=\"detailService.isRowOpen(item) ? commonStrings.keys.close: commonStrings.keys.open\"\n ></cds-icon>\n </button>\n </div>\n </ng-container>\n <!-- placeholder for projecting other sticky cells as pinned-->\n </div>\n <div class=\"datagrid-row-scrollable\" [ngClass]=\"{'is-replaced': replaced && expanded}\">\n <div class=\"datagrid-scrolling-cells\">\n <ng-content select=\"clr-dg-cell\"></ng-content>\n <ng-container #scrollableCells></ng-container>\n </div>\n <!-- details here when replace, re-visit when sticky container is used for pinned cells -->\n <ng-template *ngIf=\"replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n <ng-template *ngIf=\"!replaced && !expand.loading\" [ngTemplateOutlet]=\"detail\"></ng-template>\n </div>\n </div>\n</ng-template>\n\n<ng-container #calculatedCells></ng-container>\n" }]
|
|
14641
14628
|
}], ctorParameters: function () {
|
|
14642
14629
|
return [{ type: Selection }, { type: RowActionService }, { type: ExpandableRowsCount }, { type: DatagridIfExpandService }, { type: DetailService }, { type: DisplayModeService }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: ClrCommonStringsService }, { type: Items }, { type: undefined, decorators: [{
|
|
14643
14630
|
type: Inject,
|
|
@@ -14935,7 +14922,6 @@ class KeyNavigationGridController {
|
|
|
14935
14922
|
item.focus();
|
|
14936
14923
|
}
|
|
14937
14924
|
getNextItemCoordinate(e) {
|
|
14938
|
-
var _a;
|
|
14939
14925
|
let currentCell = this.cells ? Array.from(this.cells).find(i => i.getAttribute('tabindex') === '0') : null;
|
|
14940
14926
|
if (e.code === 'Tab') {
|
|
14941
14927
|
currentCell = document.activeElement;
|
|
@@ -14950,7 +14936,7 @@ class KeyNavigationGridController {
|
|
|
14950
14936
|
const dir = this.host.dir;
|
|
14951
14937
|
const inlineStart = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
|
|
14952
14938
|
const inlineEnd = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
|
|
14953
|
-
const itemsPerPage =
|
|
14939
|
+
const itemsPerPage = this.rows.length || 0;
|
|
14954
14940
|
if (e.code === 'ArrowUp' && y !== 0) {
|
|
14955
14941
|
y = y - 1;
|
|
14956
14942
|
}
|
|
@@ -22274,12 +22260,10 @@ class ClrModal {
|
|
|
22274
22260
|
this.stopClose = false;
|
|
22275
22261
|
this.altClose = new EventEmitter(false);
|
|
22276
22262
|
this.labelledBy = this.modalId;
|
|
22277
|
-
// presently this is only used by inline wizards
|
|
22278
|
-
this.bypassScrollService = false;
|
|
22279
22263
|
}
|
|
22280
22264
|
// Detect when _open is set to true and set no-scrolling to true
|
|
22281
22265
|
ngOnChanges(changes) {
|
|
22282
|
-
if (
|
|
22266
|
+
if (changes && Object.prototype.hasOwnProperty.call(changes, '_open')) {
|
|
22283
22267
|
if (changes._open.currentValue) {
|
|
22284
22268
|
this._scrollingService.stopScrolling();
|
|
22285
22269
|
this.modalStackService.trackModalOpen(this);
|
|
@@ -22319,7 +22303,7 @@ class ClrModal {
|
|
|
22319
22303
|
}
|
|
22320
22304
|
}
|
|
22321
22305
|
ClrModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrModal, deps: [{ token: ScrollingService }, { token: ClrCommonStringsService }, { token: ModalStackService }], target: i0.ɵɵFactoryTarget.Component });
|
|
22322
|
-
ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], closeButtonAriaLabel: ["clrModalCloseButtonAriaLabel", "closeButtonAriaLabel"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], stopClose: ["clrModalPreventClose", "stopClose"], labelledBy: ["clrModalLabelledById", "labelledBy"]
|
|
22306
|
+
ClrModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: ClrModal, selector: "clr-modal", inputs: { _open: ["clrModalOpen", "_open"], closable: ["clrModalClosable", "closable"], closeButtonAriaLabel: ["clrModalCloseButtonAriaLabel", "closeButtonAriaLabel"], size: ["clrModalSize", "size"], staticBackdrop: ["clrModalStaticBackdrop", "staticBackdrop"], skipAnimation: ["clrModalSkipAnimation", "skipAnimation"], stopClose: ["clrModalPreventClose", "stopClose"], labelledBy: ["clrModalLabelledById", "labelledBy"] }, outputs: { _openChanged: "clrModalOpenChange", altClose: "clrModalAlternateClose" }, host: { properties: { "class.open": "this._open" } }, usesOnChanges: 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<div class=\"modal\" *ngIf=\"_open\">\n <!--fixme: revisit when ngClass works with exit animation-->\n <div\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n [@fadeDown]=\"skipAnimation\"\n (@fadeDown.done)=\"fadeDone($event)\"\n class=\"modal-dialog\"\n [class.modal-sm]=\"size == 'sm'\"\n [class.modal-lg]=\"size == 'lg'\"\n [class.modal-xl]=\"size == 'xl'\"\n role=\"dialog\"\n aria-modal=\"true\"\n [attr.aria-hidden]=\"!_open\"\n [attr.aria-labelledby]=\"labelledBy\"\n >\n <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentStart}}</div>\n <div class=\"modal-content-wrapper\">\n <!-- only used in wizards -->\n <ng-content select=\".modal-nav\"></ng-content>\n\n <div class=\"modal-content\">\n <div class=\"modal-header--accessible\">\n <div class=\"modal-title-wrapper\" id=\"{{modalId}}\" cdkFocusInitial tabindex=\"-1\">\n <ng-content select=\".modal-title\"></ng-content>\n </div>\n <button\n type=\"button\"\n [attr.aria-label]=\"closeButtonAriaLabel || commonStrings.keys.close\"\n class=\"close\"\n *ngIf=\"closable\"\n (click)=\"close()\"\n >\n <cds-icon shape=\"window-close\"></cds-icon>\n </button>\n </div>\n <div class=\"modal-body-wrapper\">\n <ng-content select=\".modal-body\"></ng-content>\n </div>\n <ng-content select=\".modal-footer\"></ng-content>\n </div>\n </div>\n <div class=\"clr-sr-only\">{{commonStrings.keys.modalContentEnd}}</div>\n </div>\n\n <div [@fade] class=\"modal-backdrop\" aria-hidden=\"true\" (click)=\"staticBackdrop || close()\"></div>\n</div>\n", styles: [":host{display:none}:host.open{display:inline}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: CdkTrapFocusModule_CdkTrapFocus, selector: "[cdkTrapFocus]" }, { kind: "directive", type: CdsIconCustomTag, selector: "cds-icon" }], viewProviders: [ScrollingService], animations: [
|
|
22323
22307
|
trigger('fadeDown', [
|
|
22324
22308
|
transition('* => false', [style({ opacity: 0, transform: 'translate(0, -25%)' }), animate('0.2s ease-in-out')]),
|
|
22325
22309
|
transition('false => *', [animate('0.2s ease-in-out', style({ opacity: 0, transform: 'translate(0, -25%)' }))]),
|
|
@@ -22374,9 +22358,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
22374
22358
|
}], labelledBy: [{
|
|
22375
22359
|
type: Input,
|
|
22376
22360
|
args: ['clrModalLabelledById']
|
|
22377
|
-
}], bypassScrollService: [{
|
|
22378
|
-
type: Input,
|
|
22379
|
-
args: ['clrModalOverrideScrollService']
|
|
22380
22361
|
}] } });
|
|
22381
22362
|
|
|
22382
22363
|
/*
|
|
@@ -25494,14 +25475,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
25494
25475
|
* The full license information can be found in LICENSE in the root directory of this project.
|
|
25495
25476
|
*/
|
|
25496
25477
|
class ClrWizard {
|
|
25497
|
-
constructor(platformId, commonStrings, navService, pageCollection, buttonService, headerActionService,
|
|
25478
|
+
constructor(platformId, commonStrings, navService, pageCollection, buttonService, headerActionService, differs) {
|
|
25498
25479
|
this.platformId = platformId;
|
|
25499
25480
|
this.commonStrings = commonStrings;
|
|
25500
25481
|
this.navService = navService;
|
|
25501
25482
|
this.pageCollection = pageCollection;
|
|
25502
25483
|
this.buttonService = buttonService;
|
|
25503
25484
|
this.headerActionService = headerActionService;
|
|
25504
|
-
this.elementRef = elementRef;
|
|
25505
25485
|
/**
|
|
25506
25486
|
* Set the aria-label for the stepnav section of the wizard. Set using `[clrWizardStepnavAriaLabel]` input.
|
|
25507
25487
|
*/
|
|
@@ -25515,12 +25495,6 @@ class ClrWizard {
|
|
|
25515
25495
|
* in the top right corner. Set using `[clrWizardClosable]` input.
|
|
25516
25496
|
*/
|
|
25517
25497
|
this.closable = true;
|
|
25518
|
-
/**
|
|
25519
|
-
* Used to communicate to the underlying modal that animations are not
|
|
25520
|
-
* wanted. Primary use is for the display of static/inline wizards.
|
|
25521
|
-
* Set using `[clrWizardPreventModalAnimation]` input.
|
|
25522
|
-
*/
|
|
25523
|
-
this._stopModalAnimations = false;
|
|
25524
25498
|
/**
|
|
25525
25499
|
* Emits when the wizard is opened or closed.
|
|
25526
25500
|
* Listen via `(clrWizardOpenChange)` event.
|
|
@@ -25659,16 +25633,9 @@ class ClrWizard {
|
|
|
25659
25633
|
get isFirst() {
|
|
25660
25634
|
return this.navService.currentPageIsFirst;
|
|
25661
25635
|
}
|
|
25662
|
-
get isInline() {
|
|
25663
|
-
return this.elementRef.nativeElement.classList.contains('clr-wizard--inline');
|
|
25664
|
-
}
|
|
25665
|
-
get stopModalAnimations() {
|
|
25666
|
-
return this._stopModalAnimations ? 'true' : 'false';
|
|
25667
|
-
}
|
|
25668
25636
|
ngAfterContentInit() {
|
|
25669
25637
|
this.pageCollection.pages = this.pages;
|
|
25670
25638
|
this.headerActionService.wizardHeaderActions = this.headerActions;
|
|
25671
|
-
this.initializeButtons();
|
|
25672
25639
|
}
|
|
25673
25640
|
ngDoCheck() {
|
|
25674
25641
|
this.updateNavOnPageChanges();
|
|
@@ -25873,12 +25840,6 @@ class ClrWizard {
|
|
|
25873
25840
|
changes.forEachRemovedItem(() => this.navService.updateNavigation());
|
|
25874
25841
|
}
|
|
25875
25842
|
}
|
|
25876
|
-
initializeButtons() {
|
|
25877
|
-
// Only trigger buttons ready if default is open (inlined)
|
|
25878
|
-
if (this._open) {
|
|
25879
|
-
this.buttonService.buttonsReady = true;
|
|
25880
|
-
}
|
|
25881
|
-
}
|
|
25882
25843
|
emitWizardFinished() {
|
|
25883
25844
|
if (!this.stopNext) {
|
|
25884
25845
|
this.forceFinish();
|
|
@@ -25886,8 +25847,8 @@ class ClrWizard {
|
|
|
25886
25847
|
this.wizardFinished.emit();
|
|
25887
25848
|
}
|
|
25888
25849
|
}
|
|
25889
|
-
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.
|
|
25890
|
-
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"],
|
|
25850
|
+
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.IterableDiffers }], target: i0.ɵɵFactoryTarget.Component });
|
|
25851
|
+
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"], 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 [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"], outputs: ["clrModalOpenChange", "clrModalAlternateClose"] }, { kind: "directive", type: ClrModalBody, selector: ".modal-body" }, { kind: "component", type: ClrWizardStepnav, selector: "clr-wizard-stepnav" }] });
|
|
25891
25852
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ClrWizard, decorators: [{
|
|
25892
25853
|
type: Component,
|
|
25893
25854
|
args: [{ selector: 'clr-wizard', providers: [WizardNavigationService, PageCollectionService, ButtonHubService, HeaderActionService], host: {
|
|
@@ -25896,12 +25857,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
25896
25857
|
'[class.wizard-lg]': "size == 'lg'",
|
|
25897
25858
|
'[class.wizard-xl]': "size == 'xl'",
|
|
25898
25859
|
'[class.lastPage]': 'navService.currentPageIsLast',
|
|
25899
|
-
}, 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 [
|
|
25860
|
+
}, 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 [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" }]
|
|
25900
25861
|
}], ctorParameters: function () {
|
|
25901
25862
|
return [{ type: undefined, decorators: [{
|
|
25902
25863
|
type: Inject,
|
|
25903
25864
|
args: [PLATFORM_ID]
|
|
25904
|
-
}] }, { type: ClrCommonStringsService }, { type: WizardNavigationService }, { type: PageCollectionService }, { type: ButtonHubService }, { type: HeaderActionService }, { type: i0.
|
|
25865
|
+
}] }, { type: ClrCommonStringsService }, { type: WizardNavigationService }, { type: PageCollectionService }, { type: ButtonHubService }, { type: HeaderActionService }, { type: i0.IterableDiffers }];
|
|
25905
25866
|
}, propDecorators: { stepnavAriaLabel: [{
|
|
25906
25867
|
type: Input,
|
|
25907
25868
|
args: ['clrWizardStepnavAriaLabel']
|
|
@@ -25911,9 +25872,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImpor
|
|
|
25911
25872
|
}], closable: [{
|
|
25912
25873
|
type: Input,
|
|
25913
25874
|
args: ['clrWizardClosable']
|
|
25914
|
-
}], _stopModalAnimations: [{
|
|
25915
|
-
type: Input,
|
|
25916
|
-
args: ['clrWizardPreventModalAnimation']
|
|
25917
25875
|
}], _openChanged: [{
|
|
25918
25876
|
type: Output,
|
|
25919
25877
|
args: ['clrWizardOpenChange']
|