@bravura/ui 5.2.4 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +630 -620
- package/README.md +56 -56
- package/_index.scss +5 -5
- package/fesm2022/bravura-ui-alert-testing.mjs.map +1 -1
- package/fesm2022/bravura-ui-alert.mjs +13 -13
- package/fesm2022/bravura-ui-alert.mjs.map +1 -1
- package/fesm2022/bravura-ui-behavior.mjs +25 -21
- package/fesm2022/bravura-ui-behavior.mjs.map +1 -1
- package/fesm2022/bravura-ui-clip-note.mjs +15 -14
- package/fesm2022/bravura-ui-clip-note.mjs.map +1 -1
- package/fesm2022/bravura-ui-common.mjs +5 -5
- package/fesm2022/bravura-ui-common.mjs.map +1 -1
- package/fesm2022/bravura-ui-currency-input.mjs +10 -9
- package/fesm2022/bravura-ui-currency-input.mjs.map +1 -1
- package/fesm2022/bravura-ui-decimal-input.mjs +10 -9
- package/fesm2022/bravura-ui-decimal-input.mjs.map +1 -1
- package/fesm2022/bravura-ui-discrete-input.mjs +9 -9
- package/fesm2022/bravura-ui-discrete-input.mjs.map +1 -1
- package/fesm2022/bravura-ui-file-upload.mjs +12 -12
- package/fesm2022/bravura-ui-file-upload.mjs.map +1 -1
- package/fesm2022/bravura-ui-form-field.mjs +14 -13
- package/fesm2022/bravura-ui-form-field.mjs.map +1 -1
- package/fesm2022/bravura-ui-icon-font.mjs +10 -9
- package/fesm2022/bravura-ui-icon-font.mjs.map +1 -1
- package/fesm2022/bravura-ui-panel.mjs +18 -17
- package/fesm2022/bravura-ui-panel.mjs.map +1 -1
- package/fesm2022/bravura-ui-phone-number.mjs +20 -17
- package/fesm2022/bravura-ui-phone-number.mjs.map +1 -1
- package/fesm2022/bravura-ui-radio-panel-testing.mjs.map +1 -1
- package/fesm2022/bravura-ui-radio-panel.mjs +14 -14
- package/fesm2022/bravura-ui-radio-panel.mjs.map +1 -1
- package/fesm2022/bravura-ui-selection-panel.mjs +14 -13
- package/fesm2022/bravura-ui-selection-panel.mjs.map +1 -1
- package/fesm2022/bravura-ui-skeletons.mjs +18 -13
- package/fesm2022/bravura-ui-skeletons.mjs.map +1 -1
- package/fesm2022/bravura-ui-stepper.mjs +22 -20
- package/fesm2022/bravura-ui-stepper.mjs.map +1 -1
- package/fesm2022/bravura-ui-tooltip.mjs +14 -13
- package/fesm2022/bravura-ui-tooltip.mjs.map +1 -1
- package/m3-theme.scss +155 -155
- package/package.json +12 -52
- package/radio-panel/_radio-panel-theme.scss +11 -11
- package/selection-panel/_selection-panel-theme.scss +33 -33
- package/stepper/_stepper-theme.scss +20 -20
- package/theme/_ui-theme-legacy.scss +112 -112
- package/theme/_ui-theme.scss +101 -101
- package/esm2022/alert/alert-container.component.mjs +0 -207
- package/esm2022/alert/alert-message.component.mjs +0 -101
- package/esm2022/alert/alert.module.mjs +0 -22
- package/esm2022/alert/bravura-ui-alert.mjs +0 -5
- package/esm2022/alert/public-api.mjs +0 -2
- package/esm2022/alert/testing/bravura-ui-alert-testing.mjs +0 -5
- package/esm2022/alert/testing/test-api.mjs +0 -44
- package/esm2022/behavior/await.directive.mjs +0 -133
- package/esm2022/behavior/behavior.module.mjs +0 -37
- package/esm2022/behavior/bravura-ui-behavior.mjs +0 -5
- package/esm2022/behavior/observe-content-class.directive.mjs +0 -63
- package/esm2022/behavior/public-api.mjs +0 -6
- package/esm2022/behavior/sizing-monitor.directive.mjs +0 -31
- package/esm2022/behavior/sizing.directive.mjs +0 -256
- package/esm2022/bravura-ui.mjs +0 -5
- package/esm2022/clip-note/bravura-ui-clip-note.mjs +0 -5
- package/esm2022/clip-note/clip-note.component.mjs +0 -216
- package/esm2022/clip-note/clip-note.directive.mjs +0 -141
- package/esm2022/clip-note/clip-note.module.mjs +0 -32
- package/esm2022/clip-note/public-api.mjs +0 -2
- package/esm2022/common/bravura-ui-common.mjs +0 -5
- package/esm2022/common/common-utils.mjs +0 -34
- package/esm2022/common/common.module.mjs +0 -53
- package/esm2022/common/public-api.mjs +0 -3
- package/esm2022/currency-input/bravura-ui-currency-input.mjs +0 -5
- package/esm2022/currency-input/currency-input.directive.mjs +0 -276
- package/esm2022/currency-input/currency-input.module.mjs +0 -19
- package/esm2022/currency-input/public-api.mjs +0 -2
- package/esm2022/decimal-input/bravura-ui-decimal-input.mjs +0 -5
- package/esm2022/decimal-input/decimal-input.directive.mjs +0 -122
- package/esm2022/decimal-input/decimal-input.module.mjs +0 -19
- package/esm2022/decimal-input/public-api.mjs +0 -2
- package/esm2022/discrete-input/bravura-ui-discrete-input.mjs +0 -5
- package/esm2022/discrete-input/discrete-input.component.mjs +0 -337
- package/esm2022/discrete-input/discrete-input.module.mjs +0 -21
- package/esm2022/discrete-input/public-api.mjs +0 -3
- package/esm2022/file-upload/bravura-ui-file-upload.mjs +0 -5
- package/esm2022/file-upload/file-upload.component.mjs +0 -400
- package/esm2022/file-upload/file-upload.module.mjs +0 -44
- package/esm2022/file-upload/file-upload.service.mjs +0 -29
- package/esm2022/file-upload/public-api.mjs +0 -7
- package/esm2022/form-field/bravura-ui-form-field.mjs +0 -5
- package/esm2022/form-field/form-field.component.mjs +0 -82
- package/esm2022/form-field/form-field.module.mjs +0 -33
- package/esm2022/form-field/public-api.mjs +0 -3
- package/esm2022/icon-font/bravura-ui-icon-font.mjs +0 -5
- package/esm2022/icon-font/icon-font.module.mjs +0 -22
- package/esm2022/icon-font/icon.directive.mjs +0 -102
- package/esm2022/icon-font/public-api.mjs +0 -4
- package/esm2022/icon-font/utilities.mjs +0 -51
- package/esm2022/panel/bravura-ui-panel.mjs +0 -5
- package/esm2022/panel/panel-section.component.mjs +0 -41
- package/esm2022/panel/panel.component.mjs +0 -87
- package/esm2022/panel/panel.module.mjs +0 -23
- package/esm2022/panel/public-api.mjs +0 -2
- package/esm2022/panel/tinted.directive.mjs +0 -60
- package/esm2022/phone-number/bravura-ui-phone-number.mjs +0 -5
- package/esm2022/phone-number/phone-number.directive.mjs +0 -188
- package/esm2022/phone-number/phone-number.module.mjs +0 -24
- package/esm2022/phone-number/phone-number.pipe.mjs +0 -47
- package/esm2022/phone-number/phone-number.validator.mjs +0 -64
- package/esm2022/phone-number/public-api.mjs +0 -2
- package/esm2022/public-api.mjs +0 -2
- package/esm2022/radio-panel/bravura-ui-radio-panel.mjs +0 -5
- package/esm2022/radio-panel/public-api.mjs +0 -4
- package/esm2022/radio-panel/radio-panel-item.component.mjs +0 -93
- package/esm2022/radio-panel/radio-panel.component.mjs +0 -81
- package/esm2022/radio-panel/radio-panel.module.mjs +0 -25
- package/esm2022/radio-panel/testing/bravura-ui-radio-panel-testing.mjs +0 -5
- package/esm2022/radio-panel/testing/test-api.mjs +0 -46
- package/esm2022/selection-panel/bravura-ui-selection-panel.mjs +0 -5
- package/esm2022/selection-panel/public-api.mjs +0 -4
- package/esm2022/selection-panel/selection-panel-item.component.mjs +0 -163
- package/esm2022/selection-panel/selection-panel.directive.mjs +0 -119
- package/esm2022/selection-panel/selection-panel.module.mjs +0 -23
- package/esm2022/skeletons/bravura-ui-skeletons.mjs +0 -5
- package/esm2022/skeletons/public-api.mjs +0 -4
- package/esm2022/skeletons/skeleton-loader-presets.directive.mjs +0 -83
- package/esm2022/skeletons/skeleton-loader.component.mjs +0 -76
- package/esm2022/skeletons/skeletons.module.mjs +0 -35
- package/esm2022/stepper/bravura-ui-stepper.mjs +0 -5
- package/esm2022/stepper/public-api.mjs +0 -4
- package/esm2022/stepper/step-label-top.directive.mjs +0 -40
- package/esm2022/stepper/stepper-animation.mjs +0 -23
- package/esm2022/stepper/stepper.component.mjs +0 -178
- package/esm2022/stepper/stepper.module.mjs +0 -53
- package/esm2022/tooltip/bravura-ui-tooltip.mjs +0 -5
- package/esm2022/tooltip/public-api.mjs +0 -4
- package/esm2022/tooltip/tooltip.component.mjs +0 -63
- package/esm2022/tooltip/tooltip.directive.mjs +0 -150
- package/esm2022/tooltip/tooltip.module.mjs +0 -25
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { InjectionToken,
|
|
3
|
+
import { InjectionToken, ViewChild, Input, Inject, ChangeDetectionStrategy, Component, forwardRef, ContentChildren, Directive, NgModule } from '@angular/core';
|
|
4
4
|
import * as i4 from '@angular/material/core';
|
|
5
5
|
import { MatRipple, MatRippleModule } from '@angular/material/core';
|
|
6
6
|
import * as i1 from '@angular/common';
|
|
@@ -130,17 +130,17 @@ class SelectionPanelItemComponent {
|
|
|
130
130
|
this._cd.markForCheck();
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
134
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
133
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectionPanelItemComponent, deps: [{ token: SELECTION_PANEL_GROUP }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
134
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SelectionPanelItemComponent, isStandalone: false, selector: "bui-selection-panel-item", inputs: { title: "title", shadedHeader: "shadedHeader", selectable: "selectable", disabled: "disabled", value: "value", checked: "checked", color: "color" }, host: { properties: { "class.bui-selection-checked": "checked", "class.bui-disabled": "disabled", "class.bui-unselectable": "!selectable" }, classAttribute: "bui-selection-panel-item" }, viewQueries: [{ propertyName: "_bodyContent", first: true, predicate: ["contentBody"], descendants: true, static: true }, { propertyName: "_ripple", first: true, predicate: MatRipple, descendants: true }], ngImport: i0, template: "<div class=\"bui-selection-panel-item-wrapper\">\r\n\t<div\r\n\t\tmatRipple\r\n\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\r\n\t\tclass=\"bui-ripple\"\r\n\t\t*ngIf=\"!disabled\"\r\n\t\t[matRippleTrigger]=\"toggleTrigger\"\r\n\t\t#ripple=\"matRipple\"\r\n\t\t[matRippleDisabled]=\"!selectable\"\r\n\t></div>\r\n\t<div\r\n\t\tclass=\"bui-selection-panel-item-header\"\r\n\t\t[ngClass]=\"{ 'bui-shaded': shadedHeader, 'bui-empty': empty }\"\r\n\t\t#toggleTrigger\r\n\t>\r\n\t\t<div\r\n\t\t\t*ngIf=\"shadedHeader\"\r\n\t\t\tclass=\"bui-selection-panel-item-header-underlay\"\r\n\t\t\t[ngClass]=\"{ 'bui-not-empty': !empty }\"\r\n\t\t></div>\r\n\t\t<div class=\"bui-selection-panel-item-header-container\">\r\n\t\t\t<mat-checkbox\r\n\t\t\t\tclass=\"bui-selection-checkbox\"\r\n\t\t\t\t*ngIf=\"selectable; else noselectable\"\r\n\t\t\t\t[(ngModel)]=\"checked\"\r\n\t\t\t\t[disabled]=\"disabled\"\r\n\t\t\t\t(change)=\"_markInteracted()\"\r\n\t\t\t\tstyle=\"flex-grow: 1\"\r\n\t\t\t>\r\n\t\t\t\t<div class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\r\n\t\t\t</mat-checkbox>\r\n\t\t\t<ng-template #noselectable>\r\n\t\t\t\t<div style=\"flex-grow: 1\" class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\r\n\t\t\t</ng-template>\r\n\t\t\t<ng-content select=\"[buiSelectionItemHeadingEnd]\"></ng-content>\r\n\t\t</div>\r\n\t\t<ng-content select=\"[buiSelectionItemSubtitle]\"></ng-content>\r\n\t</div>\r\n\t<div\r\n\t\t#contentBody\r\n\t\tclass=\"bui-selection-panel-item-content\"\r\n\t\t[class.bui-empty]=\"empty\"\r\n\t\t[class.bui-selectable]=\"!_selectByHeader\"\r\n\t\t(click)=\"_contentClicked($event)\"\r\n\t\t(cdkObserveContent)=\"contentChanged()\"\r\n\t>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<div class=\"bui-selection-panel-item-bottom\"></div>\r\n</div>\r\n", styles: [":host{position:relative;border-radius:5px;border-width:1px;border-style:solid;padding:1px}:host .bui-selection-panel-item-wrapper{padding-left:1rem;padding-right:1rem}:host .bui-ripple{position:absolute;inset:0;z-index:-1}:host .bui-selection-panel-item-header{margin-top:calc(1rem - 4px);margin-bottom:calc(1rem - 4px);align-items:center;position:relative}:host .bui-selection-panel-item-header.bui-shaded:not(.bui-empty){margin-bottom:calc(2rem + 4px)}:host .bui-selection-panel-item-header-container{display:flex}:host .bui-selection-panel-item-header-container .mat-mdc-checkbox{z-index:1}:host .bui-selection-panel-item-title{font-size:larger;font-weight:700;white-space:normal;margin-top:2px}:host .bui-selection-panel-item-content:not(.bui-empty){margin-top:calc(2px + 1rem);margin-bottom:1rem}:host .bui-selection-panel-item-header-underlay{position:absolute;top:calc(3px - 1rem);left:calc(-1px - 1rem);right:calc(-1px - 1rem);bottom:calc(-3px - 1rem);border-radius:5px}:host .bui-selection-panel-item-header-underlay.bui-not-empty{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not(:first-child)){margin-top:1rem}:host(:not([hidden])){display:block}:host(:not(.bui-disabled,.bui-unselectable)):hover{border-width:2px;padding:0}:host(:not(.bui-disabled,.bui-unselectable)) .bui-selection-panel-item-content.bui-selectable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i5.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
135
135
|
}
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectionPanelItemComponent, decorators: [{
|
|
137
137
|
type: Component,
|
|
138
138
|
args: [{ selector: 'bui-selection-panel-item', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
139
139
|
class: 'bui-selection-panel-item',
|
|
140
140
|
'[class.bui-selection-checked]': 'checked',
|
|
141
141
|
'[class.bui-disabled]': 'disabled',
|
|
142
142
|
'[class.bui-unselectable]': '!selectable'
|
|
143
|
-
}, template: "<div class=\"bui-selection-panel-item-wrapper\">\n\t<div\n\t\tmatRipple\n\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t\tclass=\"bui-ripple\"\n\t\t*ngIf=\"!disabled\"\n\t\t[matRippleTrigger]=\"toggleTrigger\"\n\t\t#ripple=\"matRipple\"\n\t\t[matRippleDisabled]=\"!selectable\"\n\t></div>\n\t<div\n\t\tclass=\"bui-selection-panel-item-header\"\n\t\t[ngClass]=\"{ 'bui-shaded': shadedHeader, 'bui-empty': empty }\"\n\t\t#toggleTrigger\n\t>\n\t\t<div\n\t\t\t*ngIf=\"shadedHeader\"\n\t\t\tclass=\"bui-selection-panel-item-header-underlay\"\n\t\t\t[ngClass]=\"{ 'bui-not-empty': !empty }\"\n\t\t></div>\n\t\t<div class=\"bui-selection-panel-item-header-container\">\n\t\t\t<mat-checkbox\n\t\t\t\tclass=\"bui-selection-checkbox\"\n\t\t\t\t*ngIf=\"selectable; else noselectable\"\n\t\t\t\t[(ngModel)]=\"checked\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(change)=\"_markInteracted()\"\n\t\t\t\tstyle=\"flex-grow: 1\"\n\t\t\t>\n\t\t\t\t<div class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t\t</mat-checkbox>\n\t\t\t<ng-template #noselectable>\n\t\t\t\t<div style=\"flex-grow: 1\" class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t\t</ng-template>\n\t\t\t<ng-content select=\"[buiSelectionItemHeadingEnd]\"></ng-content>\n\t\t</div>\n\t\t<ng-content select=\"[buiSelectionItemSubtitle]\"></ng-content>\n\t</div>\n\t<div\n\t\t#contentBody\n\t\tclass=\"bui-selection-panel-item-content\"\n\t\t[class.bui-empty]=\"empty\"\n\t\t[class.bui-selectable]=\"!_selectByHeader\"\n\t\t(click)=\"_contentClicked($event)\"\n\t\t(cdkObserveContent)=\"contentChanged()\"\n\t>\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"bui-selection-panel-item-bottom\"></div>\n</div>\n", styles: [":host{position:relative;border-radius:5px;border-width:1px;border-style:solid;padding:1px}:host .bui-selection-panel-item-wrapper{padding-left:1rem;padding-right:1rem}:host .bui-ripple{position:absolute;inset:0;z-index:-1}:host .bui-selection-panel-item-header{margin-top:calc(1rem - 4px);margin-bottom:calc(1rem - 4px);align-items:center;position:relative}:host .bui-selection-panel-item-header.bui-shaded:not(.bui-empty){margin-bottom:calc(2rem + 4px)}:host .bui-selection-panel-item-header-container{display:flex}:host .bui-selection-panel-item-header-container .mat-mdc-checkbox{z-index:1}:host .bui-selection-panel-item-title{font-size:larger;font-weight:700;white-space:normal;margin-top:2px}:host .bui-selection-panel-item-content:not(.bui-empty){margin-top:calc(2px + 1rem);margin-bottom:1rem}:host .bui-selection-panel-item-header-underlay{position:absolute;top:calc(3px - 1rem);left:calc(-1px - 1rem);right:calc(-1px - 1rem);bottom:calc(-3px - 1rem);border-radius:5px}:host .bui-selection-panel-item-header-underlay.bui-not-empty{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not(:first-child)){margin-top:1rem}:host(:not([hidden])){display:block}:host(:not(.bui-disabled,.bui-unselectable)):hover{border-width:2px;padding:0}:host(:not(.bui-disabled,.bui-unselectable)) .bui-selection-panel-item-content.bui-selectable{cursor:pointer}\n"] }]
|
|
143
|
+
}, standalone: false, template: "<div class=\"bui-selection-panel-item-wrapper\">\r\n\t<div\r\n\t\tmatRipple\r\n\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\r\n\t\tclass=\"bui-ripple\"\r\n\t\t*ngIf=\"!disabled\"\r\n\t\t[matRippleTrigger]=\"toggleTrigger\"\r\n\t\t#ripple=\"matRipple\"\r\n\t\t[matRippleDisabled]=\"!selectable\"\r\n\t></div>\r\n\t<div\r\n\t\tclass=\"bui-selection-panel-item-header\"\r\n\t\t[ngClass]=\"{ 'bui-shaded': shadedHeader, 'bui-empty': empty }\"\r\n\t\t#toggleTrigger\r\n\t>\r\n\t\t<div\r\n\t\t\t*ngIf=\"shadedHeader\"\r\n\t\t\tclass=\"bui-selection-panel-item-header-underlay\"\r\n\t\t\t[ngClass]=\"{ 'bui-not-empty': !empty }\"\r\n\t\t></div>\r\n\t\t<div class=\"bui-selection-panel-item-header-container\">\r\n\t\t\t<mat-checkbox\r\n\t\t\t\tclass=\"bui-selection-checkbox\"\r\n\t\t\t\t*ngIf=\"selectable; else noselectable\"\r\n\t\t\t\t[(ngModel)]=\"checked\"\r\n\t\t\t\t[disabled]=\"disabled\"\r\n\t\t\t\t(change)=\"_markInteracted()\"\r\n\t\t\t\tstyle=\"flex-grow: 1\"\r\n\t\t\t>\r\n\t\t\t\t<div class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\r\n\t\t\t</mat-checkbox>\r\n\t\t\t<ng-template #noselectable>\r\n\t\t\t\t<div style=\"flex-grow: 1\" class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\r\n\t\t\t</ng-template>\r\n\t\t\t<ng-content select=\"[buiSelectionItemHeadingEnd]\"></ng-content>\r\n\t\t</div>\r\n\t\t<ng-content select=\"[buiSelectionItemSubtitle]\"></ng-content>\r\n\t</div>\r\n\t<div\r\n\t\t#contentBody\r\n\t\tclass=\"bui-selection-panel-item-content\"\r\n\t\t[class.bui-empty]=\"empty\"\r\n\t\t[class.bui-selectable]=\"!_selectByHeader\"\r\n\t\t(click)=\"_contentClicked($event)\"\r\n\t\t(cdkObserveContent)=\"contentChanged()\"\r\n\t>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<div class=\"bui-selection-panel-item-bottom\"></div>\r\n</div>\r\n", styles: [":host{position:relative;border-radius:5px;border-width:1px;border-style:solid;padding:1px}:host .bui-selection-panel-item-wrapper{padding-left:1rem;padding-right:1rem}:host .bui-ripple{position:absolute;inset:0;z-index:-1}:host .bui-selection-panel-item-header{margin-top:calc(1rem - 4px);margin-bottom:calc(1rem - 4px);align-items:center;position:relative}:host .bui-selection-panel-item-header.bui-shaded:not(.bui-empty){margin-bottom:calc(2rem + 4px)}:host .bui-selection-panel-item-header-container{display:flex}:host .bui-selection-panel-item-header-container .mat-mdc-checkbox{z-index:1}:host .bui-selection-panel-item-title{font-size:larger;font-weight:700;white-space:normal;margin-top:2px}:host .bui-selection-panel-item-content:not(.bui-empty){margin-top:calc(2px + 1rem);margin-bottom:1rem}:host .bui-selection-panel-item-header-underlay{position:absolute;top:calc(3px - 1rem);left:calc(-1px - 1rem);right:calc(-1px - 1rem);bottom:calc(-3px - 1rem);border-radius:5px}:host .bui-selection-panel-item-header-underlay.bui-not-empty{border-bottom-left-radius:0;border-bottom-right-radius:0}:host(:not(:first-child)){margin-top:1rem}:host(:not([hidden])){display:block}:host(:not(.bui-disabled,.bui-unselectable)):hover{border-width:2px;padding:0}:host(:not(.bui-disabled,.bui-unselectable)) .bui-selection-panel-item-content.bui-selectable{cursor:pointer}\n"] }]
|
|
144
144
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
145
145
|
type: Inject,
|
|
146
146
|
args: [SELECTION_PANEL_GROUP]
|
|
@@ -255,13 +255,13 @@ class SelectionPanelDirective {
|
|
|
255
255
|
}
|
|
256
256
|
}
|
|
257
257
|
}
|
|
258
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
259
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
258
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectionPanelDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
259
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: SelectionPanelDirective, isStandalone: false, selector: "bui-selection-panel", inputs: { color: "color", selectByHeader: "selectByHeader" }, host: { classAttribute: "bui-selection-panel bui-host" }, providers: [
|
|
260
260
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectionPanelDirective), multi: true },
|
|
261
261
|
{ provide: SELECTION_PANEL_GROUP, useExisting: forwardRef(() => SelectionPanelDirective) }
|
|
262
262
|
], queries: [{ propertyName: "_items", predicate: SelectionPanelItemComponent, descendants: true }], exportAs: ["buiSelectionPanel"], usesOnChanges: true, ngImport: i0 }); }
|
|
263
263
|
}
|
|
264
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
264
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectionPanelDirective, decorators: [{
|
|
265
265
|
type: Directive,
|
|
266
266
|
args: [{
|
|
267
267
|
selector: 'bui-selection-panel',
|
|
@@ -270,7 +270,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
270
270
|
{ provide: SELECTION_PANEL_GROUP, useExisting: forwardRef(() => SelectionPanelDirective) }
|
|
271
271
|
],
|
|
272
272
|
exportAs: 'buiSelectionPanel',
|
|
273
|
-
host: { class: 'bui-selection-panel bui-host' }
|
|
273
|
+
host: { class: 'bui-selection-panel bui-host' },
|
|
274
|
+
standalone: false
|
|
274
275
|
}]
|
|
275
276
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { color: [{
|
|
276
277
|
type: Input
|
|
@@ -282,11 +283,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
282
283
|
}] } });
|
|
283
284
|
|
|
284
285
|
class SelectionPanelModule {
|
|
285
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
286
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
287
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
286
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
287
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SelectionPanelModule, declarations: [SelectionPanelDirective, SelectionPanelItemComponent], imports: [CommonModule, MatCheckboxModule, FormsModule, MatRippleModule, ObserversModule], exports: [SelectionPanelDirective, SelectionPanelItemComponent] }); }
|
|
288
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectionPanelModule, imports: [CommonModule, MatCheckboxModule, FormsModule, MatRippleModule, ObserversModule] }); }
|
|
288
289
|
}
|
|
289
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
290
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectionPanelModule, decorators: [{
|
|
290
291
|
type: NgModule,
|
|
291
292
|
args: [{
|
|
292
293
|
declarations: [SelectionPanelDirective, SelectionPanelItemComponent],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bravura-ui-selection-panel.mjs","sources":["../../../projects/ui/selection-panel/selection-panel-item.component.ts","../../../projects/ui/selection-panel/selection-panel-item.component.html","../../../projects/ui/selection-panel/selection-panel.directive.ts","../../../projects/ui/selection-panel/selection-panel.module.ts","../../../projects/ui/selection-panel/bravura-ui-selection-panel.ts"],"sourcesContent":["import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n\tAfterContentInit,\n\tChangeDetectionStrategy,\n\tChangeDetectorRef,\n\tComponent,\n\tElementRef,\n\tInject,\n\tInjectionToken,\n\tInput,\n\tViewChild\n} from '@angular/core';\nimport { MatRipple, ThemePalette } from '@angular/material/core';\n\n/**\n * @ignore\n */\nexport interface SelectionPanelItemGroup {\n\t_selection: any[];\n\tcolor: ThemePalette;\n\t_isDisabled: boolean;\n\t_onTouched?: () => void;\n\tselectByHeader: boolean;\n}\n\n/**\n * @ignore\n */\nexport const SELECTION_PANEL_GROUP = new InjectionToken<SelectionPanelItemGroup>('SelectionPanelItemGroup');\n\n/**\n * Use `bui-selection-panel-item` within a `bui-selection-panel` to display an option.\n */\n@Component({\n\tselector: 'bui-selection-panel-item',\n\ttemplateUrl: './selection-panel-item.component.html',\n\tstyleUrls: ['./selection-panel-item.component.scss'],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\tclass: 'bui-selection-panel-item',\n\t\t'[class.bui-selection-checked]': 'checked',\n\t\t'[class.bui-disabled]': 'disabled',\n\t\t'[class.bui-unselectable]': '!selectable'\n\t}\n})\nexport class SelectionPanelItemComponent implements AfterContentInit {\n\t/** @ignore */\n\tstatic ngAcceptInputType_disabled: boolean | string;\n\n\t/** @ignore */\n\tstatic ngAcceptInputType_checked: boolean | string;\n\n\t/**\n\t * This will be displayed as the panel header\n\t */\n\t@Input()\n\ttitle = '';\n\n\t/**\n\t * Show the header in with a shaded background\n\t */\n\t@Input()\n\tshadedHeader = false;\n\n\t/**\n\t * when false will hide the checkbox\n\t */\n\t@Input()\n\tselectable = true;\n\n\t/** Whether the option is disabled. */\n\t@Input()\n\tget disabled(): boolean {\n\t\treturn this._disabled || this._group._isDisabled;\n\t}\n\tset disabled(value: boolean) {\n\t\tthis._setDisabled(coerceBooleanProperty(value));\n\t}\n\n\t/** The value of this option. */\n\t@Input()\n\tget value(): any {\n\t\treturn this._value;\n\t}\n\tset value(value: any) {\n\t\tif (this._value !== value) {\n\t\t\tthis._value = value;\n\t\t\tthis._cd.markForCheck();\n\t\t}\n\t}\n\n\t/** Whether this option is checked. */\n\t@Input()\n\tget checked(): boolean {\n\t\treturn this._group._selection.includes(this.value);\n\t}\n\tset checked(value: boolean) {\n\t\tif (!this._group._onTouched) {\n\t\t\tsetTimeout(() => this._setChecked(value), 0);\n\t\t} else {\n\t\t\tthis._setChecked(value);\n\t\t}\n\t}\n\n\t/** Theme color of the radio button. */\n\t@Input()\n\tget color(): ThemePalette {\n\t\treturn this._color || this._group.color;\n\t}\n\tset color(newValue: ThemePalette) {\n\t\tthis._color = newValue;\n\t}\n\n\tget _selectByHeader(): boolean {\n\t\treturn this._group.selectByHeader;\n\t}\n\n\tempty: boolean = true;\n\n\tprivate _color: ThemePalette;\n\tprivate _disabled = false;\n\tprivate _value: any;\n\n\t@ViewChild('contentBody', { static: true })\n\tprivate _bodyContent?: ElementRef<any>;\n\n\t@ViewChild(MatRipple)\n\tprivate _ripple?: MatRipple;\n\n\tconstructor(\n\t\t@Inject(SELECTION_PANEL_GROUP) private _group: SelectionPanelItemGroup,\n\t\tprivate _cd: ChangeDetectorRef\n\t) {}\n\n\t/** @ignore */\n\t_markInteracted() {\n\t\tif (this._group._onTouched) {\n\t\t\tthis._group._onTouched();\n\t\t}\n\t}\n\n\t/** @ignore */\n\t_notify() {\n\t\tthis._cd.markForCheck();\n\t}\n\n\t/** Toggle selection programmatically */\n\ttoggle() {\n\t\tthis.checked = !this.checked;\n\t}\n\n\t/** @ignore */\n\t_contentClicked(event: MouseEvent) {\n\t\tif (!this._selectByHeader && this.selectable) {\n\t\t\tthis._ripple?.launch(event.clientX, event.clientY);\n\t\t\tthis.toggle();\n\t\t}\n\t}\n\n\t/** @ignore */\n\tcontentChanged() {\n\t\tconst el: HTMLElement = this._bodyContent?.nativeElement;\n\t\tthis.empty = (el?.childElementCount || 0) === 0 && (el?.textContent || '') === '';\n\t}\n\n\t/** @ignore */\n\tngAfterContentInit() {\n\t\tthis.contentChanged();\n\t}\n\n\t/** Sets the disabled state and marks for check if a change occurred. */\n\tprivate _setDisabled(value: boolean) {\n\t\tif (this._disabled !== value) {\n\t\t\tthis._disabled = value;\n\t\t\tthis._cd.markForCheck();\n\t\t}\n\t}\n\n\tprivate _setChecked(value: boolean) {\n\t\tconst newCheckedState = coerceBooleanProperty(value);\n\t\tconst old = this._group._selection.includes(this.value);\n\t\tif (old !== newCheckedState) {\n\t\t\tconst contained = this._group._selection.some(v => v === this._value);\n\t\t\tif (newCheckedState && this._group && !contained) {\n\t\t\t\tthis._group._selection = [...this._group._selection, this._value];\n\t\t\t} else if (!newCheckedState && this._group && contained) {\n\t\t\t\t// When unchecking the selected item, update the selection\n\t\t\t\t// property on the group.\n\t\t\t\tthis._group._selection = this._group._selection.filter(v => v !== this._value);\n\t\t\t}\n\t\t\tthis._cd.markForCheck();\n\t\t}\n\t}\n}\n","<div class=\"bui-selection-panel-item-wrapper\">\n\t<div\n\t\tmatRipple\n\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\n\t\tclass=\"bui-ripple\"\n\t\t*ngIf=\"!disabled\"\n\t\t[matRippleTrigger]=\"toggleTrigger\"\n\t\t#ripple=\"matRipple\"\n\t\t[matRippleDisabled]=\"!selectable\"\n\t></div>\n\t<div\n\t\tclass=\"bui-selection-panel-item-header\"\n\t\t[ngClass]=\"{ 'bui-shaded': shadedHeader, 'bui-empty': empty }\"\n\t\t#toggleTrigger\n\t>\n\t\t<div\n\t\t\t*ngIf=\"shadedHeader\"\n\t\t\tclass=\"bui-selection-panel-item-header-underlay\"\n\t\t\t[ngClass]=\"{ 'bui-not-empty': !empty }\"\n\t\t></div>\n\t\t<div class=\"bui-selection-panel-item-header-container\">\n\t\t\t<mat-checkbox\n\t\t\t\tclass=\"bui-selection-checkbox\"\n\t\t\t\t*ngIf=\"selectable; else noselectable\"\n\t\t\t\t[(ngModel)]=\"checked\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(change)=\"_markInteracted()\"\n\t\t\t\tstyle=\"flex-grow: 1\"\n\t\t\t>\n\t\t\t\t<div class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t\t</mat-checkbox>\n\t\t\t<ng-template #noselectable>\n\t\t\t\t<div style=\"flex-grow: 1\" class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\n\t\t\t</ng-template>\n\t\t\t<ng-content select=\"[buiSelectionItemHeadingEnd]\"></ng-content>\n\t\t</div>\n\t\t<ng-content select=\"[buiSelectionItemSubtitle]\"></ng-content>\n\t</div>\n\t<div\n\t\t#contentBody\n\t\tclass=\"bui-selection-panel-item-content\"\n\t\t[class.bui-empty]=\"empty\"\n\t\t[class.bui-selectable]=\"!_selectByHeader\"\n\t\t(click)=\"_contentClicked($event)\"\n\t\t(cdkObserveContent)=\"contentChanged()\"\n\t>\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class=\"bui-selection-panel-item-bottom\"></div>\n</div>\n","import {\r\n\tChangeDetectorRef,\r\n\tContentChildren,\r\n\tDirective,\r\n\tforwardRef,\r\n\tInput,\r\n\tOnChanges,\r\n\tQueryList,\r\n\tSimpleChanges\r\n} from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\nimport { ThemePalette } from '@angular/material/core';\r\nimport {\r\n\tSelectionPanelItemComponent,\r\n\tSelectionPanelItemGroup,\r\n\tSELECTION_PANEL_GROUP\r\n} from './selection-panel-item.component';\r\n\r\n/**\r\n * Selection panel is a [control value accessor](https://angular.io/api/forms/ControlValueAccessor)\r\n * that display a set of multi-selection items as bordered panels, in a similar fashion as Radio Panel `bui-radio-panel`.\r\n *\r\n * Accessibility features are not yet fully implemented.\r\n *\r\n * Example:\r\n *\r\n * ```html\r\n * <bui-selection-panel>\r\n * <bui-selection-panel-item *ngFor=\"let obj of objects\" [value]=\"obj\">{{obj.description}}</bui-selection-panel-item>\r\n * </bui-selection-panel>\r\n * ```\r\n *\r\n */\r\n@Directive({\r\n\tselector: 'bui-selection-panel',\r\n\tproviders: [\r\n\t\t{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectionPanelDirective), multi: true },\r\n\t\t{ provide: SELECTION_PANEL_GROUP, useExisting: forwardRef(() => SelectionPanelDirective) }\r\n\t],\r\n\texportAs: 'buiSelectionPanel',\r\n\thost: { class: 'bui-selection-panel bui-host' }\r\n})\r\nexport class SelectionPanelDirective implements ControlValueAccessor, SelectionPanelItemGroup, OnChanges {\r\n\t/** Theme color for all of the selection checkboxes in the group. */\r\n\t@Input() color: ThemePalette;\r\n\r\n\t/**\r\n\t * When set to `false`, the selection is triggered by click everywhere within the panels that is\r\n\t * not focus-trapping; otherwise, only clicking on the header will activate the selection.\r\n\t *\r\n\t * @default true\r\n\t */\r\n\t@Input() selectByHeader = true;\r\n\r\n\t/**\r\n\t * @ignore\r\n\t * The selected values. Used by the child elements to modify the group's value\r\n\t */\r\n\tget _selection(): any[] {\r\n\t\treturn this._selected;\r\n\t}\r\n\tset _selection(value: any[]) {\r\n\t\tif (value !== this._selected) {\r\n\t\t\tthis._selected = value;\r\n\t\t\tif (this._onChange) {\r\n\t\t\t\tthis._onChange(this._selected);\r\n\t\t\t}\r\n\t\t\tthis._cd.markForCheck();\r\n\t\t}\r\n\t}\r\n\r\n\t/** @ignore */\r\n\t_onTouched?: () => void;\r\n\r\n\t/** @ignore */\r\n\t_isDisabled = false;\r\n\r\n\tprivate _onChange?: (_: any) => void;\r\n\r\n\tprivate _selected: any[] = [];\r\n\r\n\t@ContentChildren(SelectionPanelItemComponent, { descendants: true })\r\n\tprivate _items!: QueryList<SelectionPanelItemComponent>;\r\n\r\n\tconstructor(private _cd: ChangeDetectorRef) {}\r\n\r\n\t/**\r\n\t * @ignore\r\n\t */\r\n\twriteValue(obj: any): void {\r\n\t\tthis._selected = [];\r\n\t\tif (Array.isArray(obj)) {\r\n\t\t\tthis._selected.push(...obj);\r\n\t\t} else if (obj !== null && obj !== undefined) {\r\n\t\t\tthis._selected.push(obj);\r\n\t\t}\r\n\t\tthis._items?.forEach(it => it._notify());\r\n\t}\r\n\r\n\t/**\r\n\t * @ignore\r\n\t */\r\n\tregisterOnChange(fn: (_: any) => void): void {\r\n\t\tthis._onChange = fn;\r\n\t}\r\n\r\n\t/**\r\n\t * @ignore\r\n\t */\r\n\tregisterOnTouched(fn: () => void): void {\r\n\t\tthis._onTouched = fn;\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the disabled state and marks for check if a change occurred.\r\n\t * @ignore\r\n\t */\r\n\tsetDisabledState(isDisabled: boolean): void {\r\n\t\tif (this._isDisabled !== isDisabled) {\r\n\t\t\tthis._isDisabled = isDisabled;\r\n\t\t\tthis._cd.markForCheck();\r\n\t\t\tthis._items.forEach(it => it._notify());\r\n\t\t}\r\n\t}\r\n\r\n\t/** @ignore */\r\n\tngOnChanges(changes: SimpleChanges): void {\r\n\t\tif (this._items) {\r\n\t\t\tif (changes.color || changes.selectByHeader) {\r\n\t\t\t\tthis._items.forEach(item => item._notify());\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","import { ObserversModule } from '@angular/cdk/observers';\r\nimport { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MatCheckboxModule } from '@angular/material/checkbox';\r\nimport { MatRippleModule } from '@angular/material/core';\r\nimport { SelectionPanelItemComponent } from './selection-panel-item.component';\r\nimport { SelectionPanelDirective } from './selection-panel.directive';\r\n\r\n@NgModule({\r\n\tdeclarations: [SelectionPanelDirective, SelectionPanelItemComponent],\r\n\timports: [CommonModule, MatCheckboxModule, FormsModule, MatRippleModule, ObserversModule],\r\n\texports: [SelectionPanelDirective, SelectionPanelItemComponent]\r\n})\r\nexport class SelectionPanelModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"bravura-ui-selection-panel.mjs","sources":["../../../projects/ui/selection-panel/selection-panel-item.component.ts","../../../projects/ui/selection-panel/selection-panel-item.component.html","../../../projects/ui/selection-panel/selection-panel.directive.ts","../../../projects/ui/selection-panel/selection-panel.module.ts","../../../projects/ui/selection-panel/bravura-ui-selection-panel.ts"],"sourcesContent":["import { coerceBooleanProperty } from '@angular/cdk/coercion';\r\nimport {\r\n\tAfterContentInit,\r\n\tChangeDetectionStrategy,\r\n\tChangeDetectorRef,\r\n\tComponent,\r\n\tElementRef,\r\n\tInject,\r\n\tInjectionToken,\r\n\tInput,\r\n\tViewChild\r\n} from '@angular/core';\r\nimport { MatRipple, ThemePalette } from '@angular/material/core';\r\n\r\n/**\r\n * @ignore\r\n */\r\nexport interface SelectionPanelItemGroup {\r\n\t_selection: any[];\r\n\tcolor: ThemePalette;\r\n\t_isDisabled: boolean;\r\n\t_onTouched?: () => void;\r\n\tselectByHeader: boolean;\r\n}\r\n\r\n/**\r\n * @ignore\r\n */\r\nexport const SELECTION_PANEL_GROUP = new InjectionToken<SelectionPanelItemGroup>('SelectionPanelItemGroup');\r\n\r\n/**\r\n * Use `bui-selection-panel-item` within a `bui-selection-panel` to display an option.\r\n */\r\n@Component({\r\n\tselector: 'bui-selection-panel-item',\r\n\ttemplateUrl: './selection-panel-item.component.html',\r\n\tstyleUrls: ['./selection-panel-item.component.scss'],\r\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\r\n\thost: {\r\n\t\tclass: 'bui-selection-panel-item',\r\n\t\t'[class.bui-selection-checked]': 'checked',\r\n\t\t'[class.bui-disabled]': 'disabled',\r\n\t\t'[class.bui-unselectable]': '!selectable'\r\n\t},\r\n\tstandalone: false\r\n})\r\nexport class SelectionPanelItemComponent implements AfterContentInit {\r\n\t/** @ignore */\r\n\tstatic ngAcceptInputType_disabled: boolean | string;\r\n\r\n\t/** @ignore */\r\n\tstatic ngAcceptInputType_checked: boolean | string;\r\n\r\n\t/**\r\n\t * This will be displayed as the panel header\r\n\t */\r\n\t@Input()\r\n\ttitle = '';\r\n\r\n\t/**\r\n\t * Show the header in with a shaded background\r\n\t */\r\n\t@Input()\r\n\tshadedHeader = false;\r\n\r\n\t/**\r\n\t * when false will hide the checkbox\r\n\t */\r\n\t@Input()\r\n\tselectable = true;\r\n\r\n\t/** Whether the option is disabled. */\r\n\t@Input()\r\n\tget disabled(): boolean {\r\n\t\treturn this._disabled || this._group._isDisabled;\r\n\t}\r\n\tset disabled(value: boolean) {\r\n\t\tthis._setDisabled(coerceBooleanProperty(value));\r\n\t}\r\n\r\n\t/** The value of this option. */\r\n\t@Input()\r\n\tget value(): any {\r\n\t\treturn this._value;\r\n\t}\r\n\tset value(value: any) {\r\n\t\tif (this._value !== value) {\r\n\t\t\tthis._value = value;\r\n\t\t\tthis._cd.markForCheck();\r\n\t\t}\r\n\t}\r\n\r\n\t/** Whether this option is checked. */\r\n\t@Input()\r\n\tget checked(): boolean {\r\n\t\treturn this._group._selection.includes(this.value);\r\n\t}\r\n\tset checked(value: boolean) {\r\n\t\tif (!this._group._onTouched) {\r\n\t\t\tsetTimeout(() => this._setChecked(value), 0);\r\n\t\t} else {\r\n\t\t\tthis._setChecked(value);\r\n\t\t}\r\n\t}\r\n\r\n\t/** Theme color of the radio button. */\r\n\t@Input()\r\n\tget color(): ThemePalette {\r\n\t\treturn this._color || this._group.color;\r\n\t}\r\n\tset color(newValue: ThemePalette) {\r\n\t\tthis._color = newValue;\r\n\t}\r\n\r\n\tget _selectByHeader(): boolean {\r\n\t\treturn this._group.selectByHeader;\r\n\t}\r\n\r\n\tempty: boolean = true;\r\n\r\n\tprivate _color: ThemePalette;\r\n\tprivate _disabled = false;\r\n\tprivate _value: any;\r\n\r\n\t@ViewChild('contentBody', { static: true })\r\n\tprivate _bodyContent?: ElementRef<any>;\r\n\r\n\t@ViewChild(MatRipple)\r\n\tprivate _ripple?: MatRipple;\r\n\r\n\tconstructor(\r\n\t\t@Inject(SELECTION_PANEL_GROUP) private _group: SelectionPanelItemGroup,\r\n\t\tprivate _cd: ChangeDetectorRef\r\n\t) {}\r\n\r\n\t/** @ignore */\r\n\t_markInteracted() {\r\n\t\tif (this._group._onTouched) {\r\n\t\t\tthis._group._onTouched();\r\n\t\t}\r\n\t}\r\n\r\n\t/** @ignore */\r\n\t_notify() {\r\n\t\tthis._cd.markForCheck();\r\n\t}\r\n\r\n\t/** Toggle selection programmatically */\r\n\ttoggle() {\r\n\t\tthis.checked = !this.checked;\r\n\t}\r\n\r\n\t/** @ignore */\r\n\t_contentClicked(event: MouseEvent) {\r\n\t\tif (!this._selectByHeader && this.selectable) {\r\n\t\t\tthis._ripple?.launch(event.clientX, event.clientY);\r\n\t\t\tthis.toggle();\r\n\t\t}\r\n\t}\r\n\r\n\t/** @ignore */\r\n\tcontentChanged() {\r\n\t\tconst el: HTMLElement = this._bodyContent?.nativeElement;\r\n\t\tthis.empty = (el?.childElementCount || 0) === 0 && (el?.textContent || '') === '';\r\n\t}\r\n\r\n\t/** @ignore */\r\n\tngAfterContentInit() {\r\n\t\tthis.contentChanged();\r\n\t}\r\n\r\n\t/** Sets the disabled state and marks for check if a change occurred. */\r\n\tprivate _setDisabled(value: boolean) {\r\n\t\tif (this._disabled !== value) {\r\n\t\t\tthis._disabled = value;\r\n\t\t\tthis._cd.markForCheck();\r\n\t\t}\r\n\t}\r\n\r\n\tprivate _setChecked(value: boolean) {\r\n\t\tconst newCheckedState = coerceBooleanProperty(value);\r\n\t\tconst old = this._group._selection.includes(this.value);\r\n\t\tif (old !== newCheckedState) {\r\n\t\t\tconst contained = this._group._selection.some(v => v === this._value);\r\n\t\t\tif (newCheckedState && this._group && !contained) {\r\n\t\t\t\tthis._group._selection = [...this._group._selection, this._value];\r\n\t\t\t} else if (!newCheckedState && this._group && contained) {\r\n\t\t\t\t// When unchecking the selected item, update the selection\r\n\t\t\t\t// property on the group.\r\n\t\t\t\tthis._group._selection = this._group._selection.filter(v => v !== this._value);\r\n\t\t\t}\r\n\t\t\tthis._cd.markForCheck();\r\n\t\t}\r\n\t}\r\n}\r\n","<div class=\"bui-selection-panel-item-wrapper\">\r\n\t<div\r\n\t\tmatRipple\r\n\t\tmatRippleColor=\"rgba(128,128,128,.1)\"\r\n\t\tclass=\"bui-ripple\"\r\n\t\t*ngIf=\"!disabled\"\r\n\t\t[matRippleTrigger]=\"toggleTrigger\"\r\n\t\t#ripple=\"matRipple\"\r\n\t\t[matRippleDisabled]=\"!selectable\"\r\n\t></div>\r\n\t<div\r\n\t\tclass=\"bui-selection-panel-item-header\"\r\n\t\t[ngClass]=\"{ 'bui-shaded': shadedHeader, 'bui-empty': empty }\"\r\n\t\t#toggleTrigger\r\n\t>\r\n\t\t<div\r\n\t\t\t*ngIf=\"shadedHeader\"\r\n\t\t\tclass=\"bui-selection-panel-item-header-underlay\"\r\n\t\t\t[ngClass]=\"{ 'bui-not-empty': !empty }\"\r\n\t\t></div>\r\n\t\t<div class=\"bui-selection-panel-item-header-container\">\r\n\t\t\t<mat-checkbox\r\n\t\t\t\tclass=\"bui-selection-checkbox\"\r\n\t\t\t\t*ngIf=\"selectable; else noselectable\"\r\n\t\t\t\t[(ngModel)]=\"checked\"\r\n\t\t\t\t[disabled]=\"disabled\"\r\n\t\t\t\t(change)=\"_markInteracted()\"\r\n\t\t\t\tstyle=\"flex-grow: 1\"\r\n\t\t\t>\r\n\t\t\t\t<div class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\r\n\t\t\t</mat-checkbox>\r\n\t\t\t<ng-template #noselectable>\r\n\t\t\t\t<div style=\"flex-grow: 1\" class=\"bui-selection-panel-item-title\" [innerHTML]=\"title\"></div>\r\n\t\t\t</ng-template>\r\n\t\t\t<ng-content select=\"[buiSelectionItemHeadingEnd]\"></ng-content>\r\n\t\t</div>\r\n\t\t<ng-content select=\"[buiSelectionItemSubtitle]\"></ng-content>\r\n\t</div>\r\n\t<div\r\n\t\t#contentBody\r\n\t\tclass=\"bui-selection-panel-item-content\"\r\n\t\t[class.bui-empty]=\"empty\"\r\n\t\t[class.bui-selectable]=\"!_selectByHeader\"\r\n\t\t(click)=\"_contentClicked($event)\"\r\n\t\t(cdkObserveContent)=\"contentChanged()\"\r\n\t>\r\n\t\t<ng-content></ng-content>\r\n\t</div>\r\n\t<div class=\"bui-selection-panel-item-bottom\"></div>\r\n</div>\r\n","import {\r\n\tChangeDetectorRef,\r\n\tContentChildren,\r\n\tDirective,\r\n\tforwardRef,\r\n\tInput,\r\n\tOnChanges,\r\n\tQueryList,\r\n\tSimpleChanges\r\n} from '@angular/core';\r\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\r\nimport { ThemePalette } from '@angular/material/core';\r\nimport {\r\n\tSelectionPanelItemComponent,\r\n\tSelectionPanelItemGroup,\r\n\tSELECTION_PANEL_GROUP\r\n} from './selection-panel-item.component';\r\n\r\n/**\r\n * Selection panel is a [control value accessor](https://angular.io/api/forms/ControlValueAccessor)\r\n * that display a set of multi-selection items as bordered panels, in a similar fashion as Radio Panel `bui-radio-panel`.\r\n *\r\n * Accessibility features are not yet fully implemented.\r\n *\r\n * Example:\r\n *\r\n * ```html\r\n * <bui-selection-panel>\r\n * <bui-selection-panel-item *ngFor=\"let obj of objects\" [value]=\"obj\">{{obj.description}}</bui-selection-panel-item>\r\n * </bui-selection-panel>\r\n * ```\r\n *\r\n */\r\n@Directive({\r\n\tselector: 'bui-selection-panel',\r\n\tproviders: [\r\n\t\t{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SelectionPanelDirective), multi: true },\r\n\t\t{ provide: SELECTION_PANEL_GROUP, useExisting: forwardRef(() => SelectionPanelDirective) }\r\n\t],\r\n\texportAs: 'buiSelectionPanel',\r\n\thost: { class: 'bui-selection-panel bui-host' },\r\n\tstandalone: false\r\n})\r\nexport class SelectionPanelDirective implements ControlValueAccessor, SelectionPanelItemGroup, OnChanges {\r\n\t/** Theme color for all of the selection checkboxes in the group. */\r\n\t@Input() color: ThemePalette;\r\n\r\n\t/**\r\n\t * When set to `false`, the selection is triggered by click everywhere within the panels that is\r\n\t * not focus-trapping; otherwise, only clicking on the header will activate the selection.\r\n\t *\r\n\t * @default true\r\n\t */\r\n\t@Input() selectByHeader = true;\r\n\r\n\t/**\r\n\t * @ignore\r\n\t * The selected values. Used by the child elements to modify the group's value\r\n\t */\r\n\tget _selection(): any[] {\r\n\t\treturn this._selected;\r\n\t}\r\n\tset _selection(value: any[]) {\r\n\t\tif (value !== this._selected) {\r\n\t\t\tthis._selected = value;\r\n\t\t\tif (this._onChange) {\r\n\t\t\t\tthis._onChange(this._selected);\r\n\t\t\t}\r\n\t\t\tthis._cd.markForCheck();\r\n\t\t}\r\n\t}\r\n\r\n\t/** @ignore */\r\n\t_onTouched?: () => void;\r\n\r\n\t/** @ignore */\r\n\t_isDisabled = false;\r\n\r\n\tprivate _onChange?: (_: any) => void;\r\n\r\n\tprivate _selected: any[] = [];\r\n\r\n\t@ContentChildren(SelectionPanelItemComponent, { descendants: true })\r\n\tprivate _items!: QueryList<SelectionPanelItemComponent>;\r\n\r\n\tconstructor(private _cd: ChangeDetectorRef) {}\r\n\r\n\t/**\r\n\t * @ignore\r\n\t */\r\n\twriteValue(obj: any): void {\r\n\t\tthis._selected = [];\r\n\t\tif (Array.isArray(obj)) {\r\n\t\t\tthis._selected.push(...obj);\r\n\t\t} else if (obj !== null && obj !== undefined) {\r\n\t\t\tthis._selected.push(obj);\r\n\t\t}\r\n\t\tthis._items?.forEach(it => it._notify());\r\n\t}\r\n\r\n\t/**\r\n\t * @ignore\r\n\t */\r\n\tregisterOnChange(fn: (_: any) => void): void {\r\n\t\tthis._onChange = fn;\r\n\t}\r\n\r\n\t/**\r\n\t * @ignore\r\n\t */\r\n\tregisterOnTouched(fn: () => void): void {\r\n\t\tthis._onTouched = fn;\r\n\t}\r\n\r\n\t/**\r\n\t * Sets the disabled state and marks for check if a change occurred.\r\n\t * @ignore\r\n\t */\r\n\tsetDisabledState(isDisabled: boolean): void {\r\n\t\tif (this._isDisabled !== isDisabled) {\r\n\t\t\tthis._isDisabled = isDisabled;\r\n\t\t\tthis._cd.markForCheck();\r\n\t\t\tthis._items.forEach(it => it._notify());\r\n\t\t}\r\n\t}\r\n\r\n\t/** @ignore */\r\n\tngOnChanges(changes: SimpleChanges): void {\r\n\t\tif (this._items) {\r\n\t\t\tif (changes.color || changes.selectByHeader) {\r\n\t\t\t\tthis._items.forEach(item => item._notify());\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","import { ObserversModule } from '@angular/cdk/observers';\r\nimport { CommonModule } from '@angular/common';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { MatCheckboxModule } from '@angular/material/checkbox';\r\nimport { MatRippleModule } from '@angular/material/core';\r\nimport { SelectionPanelItemComponent } from './selection-panel-item.component';\r\nimport { SelectionPanelDirective } from './selection-panel.directive';\r\n\r\n@NgModule({\r\n\tdeclarations: [SelectionPanelDirective, SelectionPanelItemComponent],\r\n\timports: [CommonModule, MatCheckboxModule, FormsModule, MatRippleModule, ObserversModule],\r\n\texports: [SelectionPanelDirective, SelectionPanelItemComponent]\r\n})\r\nexport class SelectionPanelModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CommonModule } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
|
-
import { Component, InjectionToken,
|
|
3
|
+
import { Component, InjectionToken, Input, Host, Inject, Directive, NgModule } from '@angular/core';
|
|
4
4
|
import { BuiCommonModule } from '@bravura/ui/common';
|
|
5
5
|
import { ContentLoaderComponent, ContentLoaderModule } from '@ngneat/content-loader';
|
|
6
6
|
import { Subject } from 'rxjs';
|
|
@@ -64,12 +64,16 @@ class SkeletonLoaderComponent extends ContentLoaderComponent {
|
|
|
64
64
|
this._cdRef.markForCheck();
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
68
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
67
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SkeletonLoaderComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.Directionality }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
68
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: SkeletonLoaderComponent, isStandalone: false, selector: "bui-skeleton", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
|
|
69
69
|
}
|
|
70
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
70
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
|
|
71
71
|
type: Component,
|
|
72
|
-
args: [{
|
|
72
|
+
args: [{
|
|
73
|
+
selector: 'bui-skeleton',
|
|
74
|
+
template: '',
|
|
75
|
+
standalone: false
|
|
76
|
+
}]
|
|
73
77
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.Directionality }] });
|
|
74
78
|
const componentType = SkeletonLoaderComponent;
|
|
75
79
|
const superType = ContentLoaderComponent;
|
|
@@ -140,13 +144,14 @@ class SkeletonLoaderPresetsDirective {
|
|
|
140
144
|
clipPathElem.innerHTML = preset.content;
|
|
141
145
|
}
|
|
142
146
|
}
|
|
143
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
144
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
147
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SkeletonLoaderPresetsDirective, deps: [{ token: SkeletonLoaderComponent, host: true }, { token: i0.ElementRef }, { token: SKELETON_PRESETS }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
148
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: SkeletonLoaderPresetsDirective, isStandalone: false, selector: "bui-skeleton[preset]", inputs: { preset: "preset" }, ngImport: i0 }); }
|
|
145
149
|
}
|
|
146
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SkeletonLoaderPresetsDirective, decorators: [{
|
|
147
151
|
type: Directive,
|
|
148
152
|
args: [{
|
|
149
|
-
selector: 'bui-skeleton[preset]'
|
|
153
|
+
selector: 'bui-skeleton[preset]',
|
|
154
|
+
standalone: false
|
|
150
155
|
}]
|
|
151
156
|
}], ctorParameters: () => [{ type: SkeletonLoaderComponent, decorators: [{
|
|
152
157
|
type: Host
|
|
@@ -171,11 +176,11 @@ class SkeletonsModule {
|
|
|
171
176
|
providers: [provideSkeletonPresets(config?.presets || {}), provideSkeletonPresets(DEFAULT_PRESETS)]
|
|
172
177
|
};
|
|
173
178
|
}
|
|
174
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
175
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
176
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
179
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SkeletonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
180
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: SkeletonsModule, declarations: [SkeletonLoaderComponent, SkeletonLoaderPresetsDirective], imports: [CommonModule, ContentLoaderModule, BuiCommonModule], exports: [ContentLoaderModule, BuiCommonModule, SkeletonLoaderComponent, SkeletonLoaderPresetsDirective] }); }
|
|
181
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SkeletonsModule, providers: [provideSkeletonPresets(DEFAULT_PRESETS)], imports: [CommonModule, ContentLoaderModule, BuiCommonModule, ContentLoaderModule, BuiCommonModule] }); }
|
|
177
182
|
}
|
|
178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SkeletonsModule, decorators: [{
|
|
179
184
|
type: NgModule,
|
|
180
185
|
args: [{
|
|
181
186
|
declarations: [SkeletonLoaderComponent, SkeletonLoaderPresetsDirective],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bravura-ui-skeletons.mjs","sources":["../../../projects/ui/skeletons/skeleton-loader.component.ts","../../../projects/ui/skeletons/skeleton-loader-presets.directive.ts","../../../projects/ui/skeletons/skeletons.module.ts","../../../projects/ui/skeletons/bravura-ui-skeletons.ts"],"sourcesContent":["import { Directionality } from '@angular/cdk/bidi';\r\nimport { ChangeDetectorRef, Component, ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';\r\nimport { ContentLoaderComponent } from '@ngneat/content-loader';\r\nimport { Subject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\n\r\n/**\r\n * Use the [Create React Content Loader](https://skeletonreact.com/) to create your custom skeleton loaders;\r\n *\r\n * Add the resulting `svg` elements as the content children of a `<bui-skeleton>` component.\r\n *\r\n * The component `bui-skeleton` extends `content-loader` from [ngneat/content-loader](https://github.com/ngneat/content-loader).\r\n *\r\n * You can also choose from one of the presets registered by the `SKELETON_PRESETS` injection token.\r\n *\r\n * The following code snippets demonstrate how to register a preset:\r\n *\r\n * ```typescript\r\n * @import {SkeletonsModule} from '@bravura/ui/skeletons';\r\n * @import htmlWithSvgElements from './custom-loader1.html';\r\n *\r\n * @NgModule({\r\n * imports: [SkeletonsModule.forConfig({ presets: {\r\n * custom1: { viewBox: '0 0 400 100', content: htmlWithSvgElements }\r\n * }})]\r\n * })\r\n * export class MyModule {}\r\n * ```\r\n *\r\n * custom-loader1.html:\r\n *\r\n * ```html\r\n * <rect x=\"50\" y=\"6\" rx=\"4\" ry=\"4\" width=\"343\" height=\"38\" />\r\n * <rect x=\"8\" y=\"6\" rx=\"4\" ry=\"4\" width=\"35\" height=\"38\" />\r\n * ```\r\n */\r\n@Component({ selector: 'bui-skeleton', template: '' })\r\nexport class SkeletonLoaderComponent extends ContentLoaderComponent implements OnChanges, OnDestroy {\r\n\tprivate _destroyed$ = new Subject<void>();\r\n\r\n\tconstructor(elemRef: ElementRef<HTMLElement>, private _cdRef: ChangeDetectorRef, private _dir: Directionality) {\r\n\t\tsuper();\r\n\r\n\t\telemRef.nativeElement.classList.add('bui-host');\r\n\t\tthis.backgroundColor = 'rgba(128,128,128,0.2)';\r\n\t\tthis.foregroundColor = 'rgba(128,128,128,0.1)';\r\n\t\tthis.rtl = this._dir.value === 'rtl';\r\n\t\tthis._dir.change.pipe(takeUntil(this._destroyed$)).subscribe(v => {\r\n\t\t\tthis.style = {};\r\n\t\t\tthis.rtl = v === 'rtl';\r\n\t\t\tthis.ngOnInit();\r\n\t\t\tthis._cdRef.markForCheck();\r\n\t\t});\r\n\t}\r\n\r\n\tngOnDestroy(): void {\r\n\t\tthis._destroyed$.next();\r\n\t\tthis._destroyed$.complete();\r\n\t}\r\n\r\n\tngOnChanges(changes: SimpleChanges): void {\r\n\t\tif (Object.keys(changes).some(k => changes[k] && !changes[k].isFirstChange())) {\r\n\t\t\tsuper.ngOnInit();\r\n\t\t\tthis._cdRef.markForCheck();\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst componentType: any = SkeletonLoaderComponent;\r\nconst superType: any = ContentLoaderComponent;\r\n\r\nObject.keys(superType.ɵcmp)\r\n\t.filter(k => !['selectors', 'type'].includes(k))\r\n\t.forEach(k => (componentType.ɵcmp[k] = superType.ɵcmp[k]));\r\n","import { AfterViewChecked, Directive, ElementRef, Host, Inject, InjectionToken, Input } from '@angular/core';\r\nimport { SkeletonLoaderComponent } from './skeleton-loader.component';\r\n\r\nexport type SkeletonPreset = {\r\n\tviewBox: string;\r\n\tcontent: string;\r\n};\r\n\r\nexport type SkeletonPresets = { [key: string]: SkeletonPreset };\r\n\r\nexport const SKELETON_PRESETS = new InjectionToken<SkeletonPresets>('bui-skeleton-presets');\r\n\r\nexport const DEFAULT_PRESETS: SkeletonPresets = {\r\n\tfacebook: {\r\n\t\tviewBox: '0 0 425 124',\r\n\t\tcontent: `\r\n\t\t<rect x=\"48\" y=\"8\" rx=\"3\" ry=\"3\" width=\"88\" height=\"6\" /> \r\n\t\t<rect x=\"48\" y=\"26\" rx=\"3\" ry=\"3\" width=\"52\" height=\"6\" /> \r\n\t\t<rect x=\"0\" y=\"56\" rx=\"3\" ry=\"3\" width=\"410\" height=\"6\" /> \r\n\t\t<rect x=\"0\" y=\"72\" rx=\"3\" ry=\"3\" width=\"380\" height=\"6\" /> \r\n\t\t<rect x=\"0\" y=\"88\" rx=\"3\" ry=\"3\" width=\"178\" height=\"6\" /> \r\n\t\t<circle cx=\"20\" cy=\"20\" r=\"20\" />\r\n\t\t`\r\n\t},\r\n\tcode: {\r\n\t\tviewBox: '0 0 340 84',\r\n\t\tcontent: `\r\n\t\t<rect x=\"0\" y=\"0\" rx=\"3\" ry=\"3\" width=\"67\" height=\"11\" /> \r\n\t\t<rect x=\"76\" y=\"0\" rx=\"3\" ry=\"3\" width=\"140\" height=\"11\" /> \r\n\t\t<rect x=\"127\" y=\"48\" rx=\"3\" ry=\"3\" width=\"53\" height=\"11\" /> \r\n\t\t<rect x=\"187\" y=\"48\" rx=\"3\" ry=\"3\" width=\"72\" height=\"11\" /> \r\n\t\t<rect x=\"18\" y=\"48\" rx=\"3\" ry=\"3\" width=\"100\" height=\"11\" /> \r\n\t\t<rect x=\"0\" y=\"71\" rx=\"3\" ry=\"3\" width=\"37\" height=\"11\" /> \r\n\t\t<rect x=\"18\" y=\"23\" rx=\"3\" ry=\"3\" width=\"140\" height=\"11\" /> \r\n\t\t<rect x=\"166\" y=\"23\" rx=\"3\" ry=\"3\" width=\"173\" height=\"11\" />\r\n\t\t`\r\n\t},\r\n\tinstagram: {\r\n\t\tviewBox: '0 0 400 460',\r\n\t\tcontent: `\r\n\t\t<circle cx=\"31\" cy=\"31\" r=\"15\" /> \r\n\t\t<rect x=\"58\" y=\"18\" rx=\"2\" ry=\"2\" width=\"140\" height=\"10\" /> \r\n\t\t<rect x=\"58\" y=\"34\" rx=\"2\" ry=\"2\" width=\"140\" height=\"10\" /> \r\n\t\t<rect x=\"0\" y=\"60\" rx=\"2\" ry=\"2\" width=\"400\" height=\"400\" />\r\n\t\t`\r\n\t},\r\n\tbulletList: {\r\n\t\tviewBox: '0 0 250 150',\r\n\t\tcontent: `\r\n\t\t<circle cx=\"10\" cy=\"20\" r=\"8\" /> \r\n\t\t<rect x=\"25\" y=\"15\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" /> \r\n\t\t<circle cx=\"10\" cy=\"50\" r=\"8\" /> \r\n\t\t<rect x=\"25\" y=\"45\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" /> \r\n\t\t<circle cx=\"10\" cy=\"80\" r=\"8\" /> \r\n\t\t<rect x=\"25\" y=\"75\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" /> \r\n\t\t<circle cx=\"10\" cy=\"110\" r=\"8\" /> \r\n\t\t<rect x=\"25\" y=\"105\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" />\r\n\t\t`\r\n\t}\r\n};\r\n\r\n@Directive({\r\n\tselector: 'bui-skeleton[preset]'\r\n})\r\nexport class SkeletonLoaderPresetsDirective implements AfterViewChecked {\r\n\t/** Select the SVG elements from one of the presets. */\r\n\t@Input()\r\n\tpreset?: string;\r\n\r\n\tprivate _allPresets: SkeletonPresets;\r\n\r\n\tconstructor(\r\n\t\t@Host() private _skeletonComponent: SkeletonLoaderComponent,\r\n\t\tprivate _elementRef: ElementRef<HTMLElement>,\r\n\t\t@Inject(SKELETON_PRESETS) _presetList: SkeletonPresets[]\r\n\t) {\r\n\t\tthis._allPresets = _presetList.reduce((p, c) => ({ ...p, ...c }), {});\r\n\t}\r\n\r\n\tngAfterViewChecked(): void {\r\n\t\tconst preset = this._allPresets[(this.preset || '') as any];\r\n\t\tif (preset) {\r\n\t\t\tconst clipPathElem = this._elementRef.nativeElement.querySelector(`[id='${this._skeletonComponent.idClip}']`)!;\r\n\t\t\tthis._skeletonComponent.viewBox = preset.viewBox;\r\n\t\t\tclipPathElem.innerHTML = preset.content;\r\n\t\t}\r\n\t}\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { ModuleWithProviders, NgModule, ValueProvider } from '@angular/core';\r\nimport { BuiCommonModule } from '@bravura/ui/common';\r\nimport { ContentLoaderModule } from '@ngneat/content-loader';\r\nimport {\r\n\tDEFAULT_PRESETS,\r\n\tSkeletonLoaderPresetsDirective,\r\n\tSkeletonPresets,\r\n\tSKELETON_PRESETS\r\n} from './skeleton-loader-presets.directive';\r\nimport { SkeletonLoaderComponent } from './skeleton-loader.component';\r\n\r\nfunction provideSkeletonPresets(presets: SkeletonPresets): ValueProvider {\r\n\treturn {\r\n\t\tprovide: SKELETON_PRESETS,\r\n\t\tuseValue: presets,\r\n\t\tmulti: true\r\n\t};\r\n}\r\n\r\n@NgModule({\r\n\tdeclarations: [SkeletonLoaderComponent, SkeletonLoaderPresetsDirective],\r\n\timports: [CommonModule, ContentLoaderModule, BuiCommonModule],\r\n\texports: [ContentLoaderModule, BuiCommonModule, SkeletonLoaderComponent, SkeletonLoaderPresetsDirective],\r\n\tproviders: [provideSkeletonPresets(DEFAULT_PRESETS)]\r\n})\r\nexport class SkeletonsModule {\r\n\tstatic forConfig(config?: { presets?: SkeletonPresets }): ModuleWithProviders<SkeletonsModule> {\r\n\t\treturn {\r\n\t\t\tngModule: SkeletonsModule,\r\n\t\t\tproviders: [provideSkeletonPresets(config?.presets || {}), provideSkeletonPresets(DEFAULT_PRESETS)]\r\n\t\t};\r\n\t}\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"bravura-ui-skeletons.mjs","sources":["../../../projects/ui/skeletons/skeleton-loader.component.ts","../../../projects/ui/skeletons/skeleton-loader-presets.directive.ts","../../../projects/ui/skeletons/skeletons.module.ts","../../../projects/ui/skeletons/bravura-ui-skeletons.ts"],"sourcesContent":["import { Directionality } from '@angular/cdk/bidi';\r\nimport { ChangeDetectorRef, Component, ElementRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';\r\nimport { ContentLoaderComponent } from '@ngneat/content-loader';\r\nimport { Subject } from 'rxjs';\r\nimport { takeUntil } from 'rxjs/operators';\r\n\r\n/**\r\n * Use the [Create React Content Loader](https://skeletonreact.com/) to create your custom skeleton loaders;\r\n *\r\n * Add the resulting `svg` elements as the content children of a `<bui-skeleton>` component.\r\n *\r\n * The component `bui-skeleton` extends `content-loader` from [ngneat/content-loader](https://github.com/ngneat/content-loader).\r\n *\r\n * You can also choose from one of the presets registered by the `SKELETON_PRESETS` injection token.\r\n *\r\n * The following code snippets demonstrate how to register a preset:\r\n *\r\n * ```typescript\r\n * @import {SkeletonsModule} from '@bravura/ui/skeletons';\r\n * @import htmlWithSvgElements from './custom-loader1.html';\r\n *\r\n * @NgModule({\r\n * imports: [SkeletonsModule.forConfig({ presets: {\r\n * custom1: { viewBox: '0 0 400 100', content: htmlWithSvgElements }\r\n * }})]\r\n * })\r\n * export class MyModule {}\r\n * ```\r\n *\r\n * custom-loader1.html:\r\n *\r\n * ```html\r\n * <rect x=\"50\" y=\"6\" rx=\"4\" ry=\"4\" width=\"343\" height=\"38\" />\r\n * <rect x=\"8\" y=\"6\" rx=\"4\" ry=\"4\" width=\"35\" height=\"38\" />\r\n * ```\r\n */\r\n@Component({\r\n\tselector: 'bui-skeleton',\r\n\ttemplate: '',\r\n\tstandalone: false\r\n})\r\nexport class SkeletonLoaderComponent extends ContentLoaderComponent implements OnChanges, OnDestroy {\r\n\tprivate _destroyed$ = new Subject<void>();\r\n\r\n\tconstructor(\r\n\t\telemRef: ElementRef<HTMLElement>,\r\n\t\tprivate _cdRef: ChangeDetectorRef,\r\n\t\tprivate _dir: Directionality\r\n\t) {\r\n\t\tsuper();\r\n\r\n\t\telemRef.nativeElement.classList.add('bui-host');\r\n\t\tthis.backgroundColor = 'rgba(128,128,128,0.2)';\r\n\t\tthis.foregroundColor = 'rgba(128,128,128,0.1)';\r\n\t\tthis.rtl = this._dir.value === 'rtl';\r\n\t\tthis._dir.change.pipe(takeUntil(this._destroyed$)).subscribe(v => {\r\n\t\t\tthis.style = {};\r\n\t\t\tthis.rtl = v === 'rtl';\r\n\t\t\tthis.ngOnInit();\r\n\t\t\tthis._cdRef.markForCheck();\r\n\t\t});\r\n\t}\r\n\r\n\tngOnDestroy(): void {\r\n\t\tthis._destroyed$.next();\r\n\t\tthis._destroyed$.complete();\r\n\t}\r\n\r\n\tngOnChanges(changes: SimpleChanges): void {\r\n\t\tif (Object.keys(changes).some(k => changes[k] && !changes[k].isFirstChange())) {\r\n\t\t\tsuper.ngOnInit();\r\n\t\t\tthis._cdRef.markForCheck();\r\n\t\t}\r\n\t}\r\n}\r\n\r\nconst componentType: any = SkeletonLoaderComponent;\r\nconst superType: any = ContentLoaderComponent;\r\n\r\nObject.keys(superType.ɵcmp)\r\n\t.filter(k => !['selectors', 'type'].includes(k))\r\n\t.forEach(k => (componentType.ɵcmp[k] = superType.ɵcmp[k]));\r\n","import { AfterViewChecked, Directive, ElementRef, Host, Inject, InjectionToken, Input } from '@angular/core';\r\nimport { SkeletonLoaderComponent } from './skeleton-loader.component';\r\n\r\nexport type SkeletonPreset = {\r\n\tviewBox: string;\r\n\tcontent: string;\r\n};\r\n\r\nexport type SkeletonPresets = { [key: string]: SkeletonPreset };\r\n\r\nexport const SKELETON_PRESETS = new InjectionToken<SkeletonPresets>('bui-skeleton-presets');\r\n\r\nexport const DEFAULT_PRESETS: SkeletonPresets = {\r\n\tfacebook: {\r\n\t\tviewBox: '0 0 425 124',\r\n\t\tcontent: `\r\n\t\t<rect x=\"48\" y=\"8\" rx=\"3\" ry=\"3\" width=\"88\" height=\"6\" /> \r\n\t\t<rect x=\"48\" y=\"26\" rx=\"3\" ry=\"3\" width=\"52\" height=\"6\" /> \r\n\t\t<rect x=\"0\" y=\"56\" rx=\"3\" ry=\"3\" width=\"410\" height=\"6\" /> \r\n\t\t<rect x=\"0\" y=\"72\" rx=\"3\" ry=\"3\" width=\"380\" height=\"6\" /> \r\n\t\t<rect x=\"0\" y=\"88\" rx=\"3\" ry=\"3\" width=\"178\" height=\"6\" /> \r\n\t\t<circle cx=\"20\" cy=\"20\" r=\"20\" />\r\n\t\t`\r\n\t},\r\n\tcode: {\r\n\t\tviewBox: '0 0 340 84',\r\n\t\tcontent: `\r\n\t\t<rect x=\"0\" y=\"0\" rx=\"3\" ry=\"3\" width=\"67\" height=\"11\" /> \r\n\t\t<rect x=\"76\" y=\"0\" rx=\"3\" ry=\"3\" width=\"140\" height=\"11\" /> \r\n\t\t<rect x=\"127\" y=\"48\" rx=\"3\" ry=\"3\" width=\"53\" height=\"11\" /> \r\n\t\t<rect x=\"187\" y=\"48\" rx=\"3\" ry=\"3\" width=\"72\" height=\"11\" /> \r\n\t\t<rect x=\"18\" y=\"48\" rx=\"3\" ry=\"3\" width=\"100\" height=\"11\" /> \r\n\t\t<rect x=\"0\" y=\"71\" rx=\"3\" ry=\"3\" width=\"37\" height=\"11\" /> \r\n\t\t<rect x=\"18\" y=\"23\" rx=\"3\" ry=\"3\" width=\"140\" height=\"11\" /> \r\n\t\t<rect x=\"166\" y=\"23\" rx=\"3\" ry=\"3\" width=\"173\" height=\"11\" />\r\n\t\t`\r\n\t},\r\n\tinstagram: {\r\n\t\tviewBox: '0 0 400 460',\r\n\t\tcontent: `\r\n\t\t<circle cx=\"31\" cy=\"31\" r=\"15\" /> \r\n\t\t<rect x=\"58\" y=\"18\" rx=\"2\" ry=\"2\" width=\"140\" height=\"10\" /> \r\n\t\t<rect x=\"58\" y=\"34\" rx=\"2\" ry=\"2\" width=\"140\" height=\"10\" /> \r\n\t\t<rect x=\"0\" y=\"60\" rx=\"2\" ry=\"2\" width=\"400\" height=\"400\" />\r\n\t\t`\r\n\t},\r\n\tbulletList: {\r\n\t\tviewBox: '0 0 250 150',\r\n\t\tcontent: `\r\n\t\t<circle cx=\"10\" cy=\"20\" r=\"8\" /> \r\n\t\t<rect x=\"25\" y=\"15\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" /> \r\n\t\t<circle cx=\"10\" cy=\"50\" r=\"8\" /> \r\n\t\t<rect x=\"25\" y=\"45\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" /> \r\n\t\t<circle cx=\"10\" cy=\"80\" r=\"8\" /> \r\n\t\t<rect x=\"25\" y=\"75\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" /> \r\n\t\t<circle cx=\"10\" cy=\"110\" r=\"8\" /> \r\n\t\t<rect x=\"25\" y=\"105\" rx=\"5\" ry=\"5\" width=\"220\" height=\"10\" />\r\n\t\t`\r\n\t}\r\n};\r\n\r\n@Directive({\r\n\tselector: 'bui-skeleton[preset]',\r\n\tstandalone: false\r\n})\r\nexport class SkeletonLoaderPresetsDirective implements AfterViewChecked {\r\n\t/** Select the SVG elements from one of the presets. */\r\n\t@Input()\r\n\tpreset?: string;\r\n\r\n\tprivate _allPresets: SkeletonPresets;\r\n\r\n\tconstructor(\r\n\t\t@Host() private _skeletonComponent: SkeletonLoaderComponent,\r\n\t\tprivate _elementRef: ElementRef<HTMLElement>,\r\n\t\t@Inject(SKELETON_PRESETS) _presetList: SkeletonPresets[]\r\n\t) {\r\n\t\tthis._allPresets = _presetList.reduce((p, c) => ({ ...p, ...c }), {});\r\n\t}\r\n\r\n\tngAfterViewChecked(): void {\r\n\t\tconst preset = this._allPresets[(this.preset || '') as any];\r\n\t\tif (preset) {\r\n\t\t\tconst clipPathElem = this._elementRef.nativeElement.querySelector(`[id='${this._skeletonComponent.idClip}']`)!;\r\n\t\t\tthis._skeletonComponent.viewBox = preset.viewBox;\r\n\t\t\tclipPathElem.innerHTML = preset.content;\r\n\t\t}\r\n\t}\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { ModuleWithProviders, NgModule, ValueProvider } from '@angular/core';\r\nimport { BuiCommonModule } from '@bravura/ui/common';\r\nimport { ContentLoaderModule } from '@ngneat/content-loader';\r\nimport {\r\n\tDEFAULT_PRESETS,\r\n\tSkeletonLoaderPresetsDirective,\r\n\tSkeletonPresets,\r\n\tSKELETON_PRESETS\r\n} from './skeleton-loader-presets.directive';\r\nimport { SkeletonLoaderComponent } from './skeleton-loader.component';\r\n\r\nfunction provideSkeletonPresets(presets: SkeletonPresets): ValueProvider {\r\n\treturn {\r\n\t\tprovide: SKELETON_PRESETS,\r\n\t\tuseValue: presets,\r\n\t\tmulti: true\r\n\t};\r\n}\r\n\r\n@NgModule({\r\n\tdeclarations: [SkeletonLoaderComponent, SkeletonLoaderPresetsDirective],\r\n\timports: [CommonModule, ContentLoaderModule, BuiCommonModule],\r\n\texports: [ContentLoaderModule, BuiCommonModule, SkeletonLoaderComponent, SkeletonLoaderPresetsDirective],\r\n\tproviders: [provideSkeletonPresets(DEFAULT_PRESETS)]\r\n})\r\nexport class SkeletonsModule {\r\n\tstatic forConfig(config?: { presets?: SkeletonPresets }): ModuleWithProviders<SkeletonsModule> {\r\n\t\treturn {\r\n\t\t\tngModule: SkeletonsModule,\r\n\t\t\tproviders: [provideSkeletonPresets(config?.presets || {}), provideSkeletonPresets(DEFAULT_PRESETS)]\r\n\t\t};\r\n\t}\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { Optional, Directive, inject, ContentChild, QueryList, EventEmitter, ViewChild, Input, Output, ContentChildren, ViewChildren, Inject, Self, SkipSelf, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
|
|
3
3
|
import * as i3 from '@angular/material/stepper';
|
|
4
|
-
import { MatStep,
|
|
4
|
+
import { MatStep, MatStepHeader, MatStepperIcon, MatStepper, MatStepperModule } from '@angular/material/stepper';
|
|
5
5
|
import { CdkStepper, STEPPER_GLOBAL_OPTIONS, CdkStepperModule } from '@angular/cdk/stepper';
|
|
6
6
|
import * as i2 from '@angular/common';
|
|
7
7
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
8
8
|
import { Subject } from 'rxjs';
|
|
9
9
|
import { takeUntil, distinctUntilChanged, filter } from 'rxjs/operators';
|
|
10
|
-
import { state,
|
|
10
|
+
import { state, transition, style, animate, trigger } from '@angular/animations';
|
|
11
11
|
import * as i1 from '@angular/cdk/bidi';
|
|
12
12
|
import * as i4 from '@bravura/ui/behavior';
|
|
13
13
|
import { BehaviorModule } from '@bravura/ui/behavior';
|
|
@@ -21,13 +21,14 @@ class StepLabelTopDirective {
|
|
|
21
21
|
constructor(templateRef) {
|
|
22
22
|
this.templateRef = templateRef;
|
|
23
23
|
}
|
|
24
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
25
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
24
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepLabelTopDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
25
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: StepLabelTopDirective, isStandalone: false, selector: "[buiStepLabelTop]", ngImport: i0 }); }
|
|
26
26
|
}
|
|
27
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
27
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepLabelTopDirective, decorators: [{
|
|
28
28
|
type: Directive,
|
|
29
29
|
args: [{
|
|
30
|
-
selector: '[buiStepLabelTop]'
|
|
30
|
+
selector: '[buiStepLabelTop]',
|
|
31
|
+
standalone: false
|
|
31
32
|
}]
|
|
32
33
|
}], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
|
|
33
34
|
type: Optional
|
|
@@ -39,13 +40,14 @@ class StepDirective {
|
|
|
39
40
|
ngAfterContentInit() {
|
|
40
41
|
this.step.stepLabelTopTemplate = this.stepLabelTopDirective?.templateRef;
|
|
41
42
|
}
|
|
42
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
43
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
43
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
44
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: StepDirective, isStandalone: false, selector: "mat-step", queries: [{ propertyName: "stepLabelTopDirective", first: true, predicate: StepLabelTopDirective, descendants: true }], ngImport: i0 }); }
|
|
44
45
|
}
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepDirective, decorators: [{
|
|
46
47
|
type: Directive,
|
|
47
48
|
args: [{
|
|
48
|
-
selector: 'mat-step'
|
|
49
|
+
selector: 'mat-step',
|
|
50
|
+
standalone: false
|
|
49
51
|
}]
|
|
50
52
|
}], ctorParameters: () => [], propDecorators: { stepLabelTopDirective: [{
|
|
51
53
|
type: ContentChild,
|
|
@@ -183,14 +185,14 @@ class StepperComponent extends CdkStepper {
|
|
|
183
185
|
toCustomStep(step) {
|
|
184
186
|
return step;
|
|
185
187
|
}
|
|
186
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
187
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
188
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepperComponent, deps: [{ token: i1.Directionality, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: DOCUMENT }, { token: STEPPER_GLOBAL_OPTIONS, self: true }, { token: STEPPER_GLOBAL_OPTIONS, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
189
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.17", type: StepperComponent, isStandalone: false, selector: "bui-stepper, [buiStepper]", inputs: { selectedIndex: "selectedIndex", disableRipple: "disableRipple", color: "color", indicatorFormatter: "indicatorFormatter", nextStepLabelPrefix: "nextStepLabelPrefix" }, outputs: { animationDone: "animationDone" }, host: { attributes: { "role": "tablist" }, properties: { "attr.aria-orientation": "orientation" }, classAttribute: "bui-stepper bui-host" }, providers: [
|
|
188
190
|
{ provide: MatStepper, useExisting: StepperComponent },
|
|
189
191
|
{ provide: CdkStepper, useExisting: StepperComponent },
|
|
190
192
|
{ provide: STEPPER_GLOBAL_OPTIONS, useValue: { displayDefaultIndicatorType: false } }
|
|
191
|
-
], queries: [{ propertyName: "_steps", predicate: MatStep, descendants: true }, { propertyName: "_icons", predicate: MatStepperIcon, descendants: true }], viewQueries: [{ propertyName: "_editIconTemplate", first: true, predicate: ["editIconTemplate"], descendants: true, static: true }, { propertyName: "_stepHeader", predicate: MatStepHeader, descendants: true }], exportAs: ["buiStepper", "matStepper", "matVerticalStepper", "matHorizontalStepper"], usesInheritance: true, ngImport: i0, template: "<div class=\"bui-stepper-wrapper\" [style.display]=\"_leftDrawerState.startsWith('open') ? 'flex' : 'block'\" #sizeMonitor>\n\t<div\n\t\tclass=\"bui-stepper-left-header-container\"\n\t\t[@leftDrawer]=\"_leftDrawerState\"\n\t\t(@leftDrawer.start)=\"_leftDrawerStarted.next($event)\"\n\t\t(@leftDrawer.done)=\"_leftDrawerEnded.next($event)\"\n\t>\n\t\t<div class=\"bui-step-progress-label\">Step {{ selectedIndex + 1 }} of {{ steps.length }}</div>\n\t\t<div\n\t\t\t*ngFor=\"let step of steps; let i = index; let isLast = last\"\n\t\t\tclass=\"bui-stepper-header-wrapper\"\n\t\t\t[class.bui-stepper-vertical-line]=\"!isLast\"\n\t\t>\n\t\t\t<mat-step-header\n\t\t\t\tclass=\"bui-stepper-header\"\n\t\t\t\t(click)=\"step.select()\"\n\t\t\t\t(keydown)=\"_onKeydown($event)\"\n\t\t\t\t[tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n\t\t\t\t[id]=\"_getStepLabelId(i)\"\n\t\t\t\t[attr.aria-posinset]=\"i + 1\"\n\t\t\t\t[attr.aria-setsize]=\"steps.length\"\n\t\t\t\t[attr.aria-controls]=\"_getStepContentId(i)\"\n\t\t\t\t[attr.aria-selected]=\"selectedIndex == i\"\n\t\t\t\t[attr.aria-label]=\"step.ariaLabel || null\"\n\t\t\t\t[attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n\t\t\t\t[attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n\t\t\t\t[index]=\"i\"\n\t\t\t\t[state]=\"_getIndicatorType(i, step.state)\"\n\t\t\t\t[label]=\"step.stepLabel || step.label\"\n\t\t\t\t[selected]=\"selectedIndex === i\"\n\t\t\t\t[active]=\"_stepIsNavigable(i, step)\"\n\t\t\t\t[optional]=\"step.optional\"\n\t\t\t\t[errorMessage]=\"step.errorMessage\"\n\t\t\t\t[iconOverrides]=\"_iconOverrides\"\n\t\t\t\t[disableRipple]=\"disableRipple || !_stepIsNavigable(i, step)\"\n\t\t\t\t[color]=\"step.color || color\"\n\t\t\t></mat-step-header>\n\t\t</div>\n\t</div>\n\n\t<div class=\"bui-stepper-content-container\" [buiSizingBy]=\"sizeMonitor\" (buiResized)=\"_widthChanged($event.width)\">\n\t\t<div\n\t\t\tclass=\"bui-stepper-top-header-container\"\n\t\t\t[class.bui-stepper-header-active]=\"_leftDrawerState === 'void'\"\n\t\t\t[@topDrawer]=\"_topDrawerState\"\n\t\t\t(@topDrawer.start)=\"_topDrawerStarted.next($event)\"\n\t\t\t(@topDrawer.done)=\"_topDrawerEnded.next($event)\"\n\t\t>\n\t\t\t<div class=\"bui-stepper-top-header-progress\">\n\t\t\t\t<span class=\"bui-stepper-top-header-indicator\">\n\t\t\t\t\tStep {{ indicatorFormatter(selectedIndex + 1, steps.length) }}\n\t\t\t\t</span>\n\t\t\t</div>\n\n\t\t\t<div class=\"bui-stepper-progress-indicator\">\n\t\t\t\t<div\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\t(click)=\"selectedIndex = i\"\n\t\t\t\t\tclass=\"bui-stepper-progress-indicator-section\"\n\t\t\t\t\t*ngFor=\"let s of steps; let i = index\"\n\t\t\t\t\t[class.bui-step-section-interacted]=\"i <= selectedIndex\"\n\t\t\t\t></div>\n\t\t\t</div>\n\t\t\t<div class=\"bui-stepper-top-header-title-next\" *ngIf=\"selectedIndex < steps.length - 1\">\n\t\t\t\t{{ nextStepLabelPrefix }}\n\t\t\t\t<ng-template\n\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: steps.get(selectedIndex + 1) }\"\n\t\t\t\t></ng-template>\n\t\t\t</div>\n\n\t\t\t<div class=\"bui-stepper-top-header-titles-wrapper\" *ngIf=\"selected\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"toCustomStep(selected).stepLabelTopTemplate\"></ng-container>\n\t\t\t\t<div class=\"bui-stepper-top-header-title\">\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: selected }\"\n\t\t\t\t\t></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"bui-stepper-content-wrapper\" [class.bui-stepper-content-wrapper-transitioning]=\"_stepTransitioning\">\n\t\t\t<div\n\t\t\t\t*ngFor=\"let step of steps; let i = index\"\n\t\t\t\tclass=\"bui-stepper-content\"\n\t\t\t\trole=\"tabpanel\"\n\t\t\t\t[@stepTransition]=\"_getAnimationDirection(i)\"\n\t\t\t\t(@stepTransition.start)=\"_startStepTransition()\"\n\t\t\t\t(@stepTransition.done)=\"_animationDone.next($event)\"\n\t\t\t\t[id]=\"_getStepContentId(i)\"\n\t\t\t\t[attr.aria-labelledby]=\"_getStepLabelId(i)\"\n\t\t\t\t[attr.aria-expanded]=\"selectedIndex === i\"\n\t\t\t>\n\t\t\t\t<div class=\"bui-stepper-content-header-label\" *ngIf=\"!_narrow\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"toCustomStep(step).stepLabelTopTemplate\"></ng-container>\n\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: step }\"\n\t\t\t\t\t\t></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"step.content\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #labelTemplate let-step>\n\t<ng-template [ngIf]=\"step.stepLabel\" [ngIfElse]=\"stringLabelTempl\">\n\t\t<ng-template [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-template>\n\t</ng-template>\n\t<ng-template #stringLabelTempl>{{ step.label }}</ng-template>\n</ng-template>\n\n<ng-template #editIconTemplate let-index=\"index\">\n\t<span>{{ index + 1 }}</span>\n</ng-template>\n", styles: [".bui-stepper:not([hidden]){display:block;box-sizing:border-box}.bui-stepper-wrapper{display:flex;gap:16px;box-sizing:border-box}.bui-step-progress-label{margin-top:16px;margin-left:16px;font-size:90%;font-weight:600}.bui-stepper-left-header-container{max-width:30%}.bui-stepper-header-wrapper{position:relative}.bui-stepper-vertical-line:before{content:\"\";position:absolute;left:28px;border-left-width:1px;border-left-style:solid;border-left-color:var(--bui-color-divider);top:44px;bottom:-12px}[dir=rtl] .bui-stepper-vertical-line:before{left:auto;right:0}.bui-stepper-top-header-indicator{font-size:80%;font-weight:700}.bui-stepper-progress-indicator{display:flex;justify-content:space-between;width:100%;height:10px;gap:10px;margin-bottom:16px}.bui-stepper-progress-indicator-section{flex:1;background-color:#0000001a;border-radius:4px;cursor:pointer}.bui-stepper-content-header-label{font-size:larger;font-weight:700;margin-bottom:32px;display:flex;flex-direction:column;align-items:start;justify-items:start;justify-content:start;gap:16px}.bui-stepper .bui-stepper-header{display:flex;align-items:center;padding:0 16px;height:56px}.bui-stepper .bui-stepper-header .mat-step-icon{margin-right:16px}[dir=rtl] .bui-stepper .bui-stepper-header .mat-step-icon{margin-right:0;margin-left:16px}.bui-stepper .bui-stepper-header .mat-step-icon.mat-step-icon-state-done{background-color:var(--bui-color-success);color:#fff}.bui-stepper-top-header-container.bui-stepper-header-active{margin-bottom:16px}.bui-stepper-top-header-progress{margin-bottom:8px}.bui-stepper-top-header-titles-wrapper{display:flex;flex-direction:column;align-items:start;gap:16px}.bui-stepper-top-header-title{font-size:larger}.bui-stepper-top-header-title-next{color:var(--bui-color-muted);margin-bottom:16px;font-size:90%;color:#000c}.bui-stepper-content-container{flex:1 1 100%;border-radius:var(--bui-stepper-container-border-radius, 12px);box-shadow:0 0 1px 1px #0000001a;padding:16px;display:flex;flex-direction:column}.bui-stepper-content-wrapper{flex:1 1 100%}.bui-stepper-content-wrapper-transitioning{overflow:hidden}.bui-stepper-content{outline:0}.bui-stepper-content[aria-expanded=false]{height:0;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatStepHeader, selector: "mat-step-header", inputs: ["state", "label", "errorMessage", "iconOverrides", "index", "selected", "active", "optional", "disableRipple", "color"] }, { kind: "directive", type: i4.SizingDirective, selector: "[buiSizing],[buiResized],[buiSizingBy],[buiFixedHeight]", inputs: ["buiSizing", "sizingBy", "buiSizingBy", "buiFixedHeight"], outputs: ["buiResized"] }], animations: [animation.stepTransition, animation.leftDrawer, animation.topDrawer], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
193
|
+
], queries: [{ propertyName: "_steps", predicate: MatStep, descendants: true }, { propertyName: "_icons", predicate: MatStepperIcon, descendants: true }], viewQueries: [{ propertyName: "_editIconTemplate", first: true, predicate: ["editIconTemplate"], descendants: true, static: true }, { propertyName: "_stepHeader", predicate: MatStepHeader, descendants: true }], exportAs: ["buiStepper", "matStepper", "matVerticalStepper", "matHorizontalStepper"], usesInheritance: true, ngImport: i0, template: "<div class=\"bui-stepper-wrapper\" [style.display]=\"_leftDrawerState.startsWith('open') ? 'flex' : 'block'\" #sizeMonitor>\r\n\t<div\r\n\t\tclass=\"bui-stepper-left-header-container\"\r\n\t\t[@leftDrawer]=\"_leftDrawerState\"\r\n\t\t(@leftDrawer.start)=\"_leftDrawerStarted.next($event)\"\r\n\t\t(@leftDrawer.done)=\"_leftDrawerEnded.next($event)\"\r\n\t>\r\n\t\t<div class=\"bui-step-progress-label\">Step {{ selectedIndex + 1 }} of {{ steps.length }}</div>\r\n\t\t<div\r\n\t\t\t*ngFor=\"let step of steps; let i = index; let isLast = last\"\r\n\t\t\tclass=\"bui-stepper-header-wrapper\"\r\n\t\t\t[class.bui-stepper-vertical-line]=\"!isLast\"\r\n\t\t>\r\n\t\t\t<mat-step-header\r\n\t\t\t\tclass=\"bui-stepper-header\"\r\n\t\t\t\t(click)=\"step.select()\"\r\n\t\t\t\t(keydown)=\"_onKeydown($event)\"\r\n\t\t\t\t[tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\r\n\t\t\t\t[id]=\"_getStepLabelId(i)\"\r\n\t\t\t\t[attr.aria-posinset]=\"i + 1\"\r\n\t\t\t\t[attr.aria-setsize]=\"steps.length\"\r\n\t\t\t\t[attr.aria-controls]=\"_getStepContentId(i)\"\r\n\t\t\t\t[attr.aria-selected]=\"selectedIndex == i\"\r\n\t\t\t\t[attr.aria-label]=\"step.ariaLabel || null\"\r\n\t\t\t\t[attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\r\n\t\t\t\t[attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\r\n\t\t\t\t[index]=\"i\"\r\n\t\t\t\t[state]=\"_getIndicatorType(i, step.state)\"\r\n\t\t\t\t[label]=\"step.stepLabel || step.label\"\r\n\t\t\t\t[selected]=\"selectedIndex === i\"\r\n\t\t\t\t[active]=\"_stepIsNavigable(i, step)\"\r\n\t\t\t\t[optional]=\"step.optional\"\r\n\t\t\t\t[errorMessage]=\"step.errorMessage\"\r\n\t\t\t\t[iconOverrides]=\"_iconOverrides\"\r\n\t\t\t\t[disableRipple]=\"disableRipple || !_stepIsNavigable(i, step)\"\r\n\t\t\t\t[color]=\"step.color || color\"\r\n\t\t\t></mat-step-header>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<div class=\"bui-stepper-content-container\" [buiSizingBy]=\"sizeMonitor\" (buiResized)=\"_widthChanged($event.width)\">\r\n\t\t<div\r\n\t\t\tclass=\"bui-stepper-top-header-container\"\r\n\t\t\t[class.bui-stepper-header-active]=\"_leftDrawerState === 'void'\"\r\n\t\t\t[@topDrawer]=\"_topDrawerState\"\r\n\t\t\t(@topDrawer.start)=\"_topDrawerStarted.next($event)\"\r\n\t\t\t(@topDrawer.done)=\"_topDrawerEnded.next($event)\"\r\n\t\t>\r\n\t\t\t<div class=\"bui-stepper-top-header-progress\">\r\n\t\t\t\t<span class=\"bui-stepper-top-header-indicator\">\r\n\t\t\t\t\tStep {{ indicatorFormatter(selectedIndex + 1, steps.length) }}\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"bui-stepper-progress-indicator\">\r\n\t\t\t\t<div\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\t(click)=\"selectedIndex = i\"\r\n\t\t\t\t\tclass=\"bui-stepper-progress-indicator-section\"\r\n\t\t\t\t\t*ngFor=\"let s of steps; let i = index\"\r\n\t\t\t\t\t[class.bui-step-section-interacted]=\"i <= selectedIndex\"\r\n\t\t\t\t></div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"bui-stepper-top-header-title-next\" *ngIf=\"selectedIndex < steps.length - 1\">\r\n\t\t\t\t{{ nextStepLabelPrefix }}\r\n\t\t\t\t<ng-template\r\n\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: steps.get(selectedIndex + 1) }\"\r\n\t\t\t\t></ng-template>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"bui-stepper-top-header-titles-wrapper\" *ngIf=\"selected\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"toCustomStep(selected).stepLabelTopTemplate\"></ng-container>\r\n\t\t\t\t<div class=\"bui-stepper-top-header-title\">\r\n\t\t\t\t\t<ng-template\r\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\r\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: selected }\"\r\n\t\t\t\t\t></ng-template>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"bui-stepper-content-wrapper\" [class.bui-stepper-content-wrapper-transitioning]=\"_stepTransitioning\">\r\n\t\t\t<div\r\n\t\t\t\t*ngFor=\"let step of steps; let i = index\"\r\n\t\t\t\tclass=\"bui-stepper-content\"\r\n\t\t\t\trole=\"tabpanel\"\r\n\t\t\t\t[@stepTransition]=\"_getAnimationDirection(i)\"\r\n\t\t\t\t(@stepTransition.start)=\"_startStepTransition()\"\r\n\t\t\t\t(@stepTransition.done)=\"_animationDone.next($event)\"\r\n\t\t\t\t[id]=\"_getStepContentId(i)\"\r\n\t\t\t\t[attr.aria-labelledby]=\"_getStepLabelId(i)\"\r\n\t\t\t\t[attr.aria-expanded]=\"selectedIndex === i\"\r\n\t\t\t>\r\n\t\t\t\t<div class=\"bui-stepper-content-header-label\" *ngIf=\"!_narrow\">\r\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"toCustomStep(step).stepLabelTopTemplate\"></ng-container>\r\n\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<ng-template\r\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\r\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: step }\"\r\n\t\t\t\t\t\t></ng-template>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"step.content\"></ng-template>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #labelTemplate let-step>\r\n\t<ng-template [ngIf]=\"step.stepLabel\" [ngIfElse]=\"stringLabelTempl\">\r\n\t\t<ng-template [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-template>\r\n\t</ng-template>\r\n\t<ng-template #stringLabelTempl>{{ step.label }}</ng-template>\r\n</ng-template>\r\n\r\n<ng-template #editIconTemplate let-index=\"index\">\r\n\t<span>{{ index + 1 }}</span>\r\n</ng-template>\r\n", styles: [".bui-stepper:not([hidden]){display:block;box-sizing:border-box}.bui-stepper-wrapper{display:flex;gap:16px;box-sizing:border-box}.bui-step-progress-label{margin-top:16px;margin-left:16px;font-size:90%;font-weight:600}.bui-stepper-left-header-container{max-width:30%}.bui-stepper-header-wrapper{position:relative}.bui-stepper-vertical-line:before{content:\"\";position:absolute;left:28px;border-left-width:1px;border-left-style:solid;border-left-color:var(--bui-color-divider);top:44px;bottom:-12px}[dir=rtl] .bui-stepper-vertical-line:before{left:auto;right:0}.bui-stepper-top-header-indicator{font-size:80%;font-weight:700}.bui-stepper-progress-indicator{display:flex;justify-content:space-between;width:100%;height:10px;gap:10px;margin-bottom:16px}.bui-stepper-progress-indicator-section{flex:1;background-color:#0000001a;border-radius:4px;cursor:pointer}.bui-stepper-content-header-label{font-size:larger;font-weight:700;margin-bottom:32px;display:flex;flex-direction:column;align-items:start;justify-items:start;justify-content:start;gap:16px}.bui-stepper .bui-stepper-header{display:flex;align-items:center;padding:0 16px;height:56px}.bui-stepper .bui-stepper-header .mat-step-icon{margin-right:16px}[dir=rtl] .bui-stepper .bui-stepper-header .mat-step-icon{margin-right:0;margin-left:16px}.bui-stepper .bui-stepper-header .mat-step-icon.mat-step-icon-state-done{background-color:var(--bui-color-success);color:#fff}.bui-stepper-top-header-container.bui-stepper-header-active{margin-bottom:16px}.bui-stepper-top-header-progress{margin-bottom:8px}.bui-stepper-top-header-titles-wrapper{display:flex;flex-direction:column;align-items:start;gap:16px}.bui-stepper-top-header-title{font-size:larger}.bui-stepper-top-header-title-next{color:var(--bui-color-muted);margin-bottom:16px;font-size:90%;color:#000c}.bui-stepper-content-container{flex:1 1 100%;border-radius:var(--bui-stepper-container-border-radius, 12px);box-shadow:0 0 1px 1px #0000001a;padding:16px;display:flex;flex-direction:column}.bui-stepper-content-wrapper{flex:1 1 100%}.bui-stepper-content-wrapper-transitioning{overflow:hidden}.bui-stepper-content{outline:0}.bui-stepper-content[aria-expanded=false]{height:0;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatStepHeader, selector: "mat-step-header", inputs: ["state", "label", "errorMessage", "iconOverrides", "index", "selected", "active", "optional", "disableRipple", "color"] }, { kind: "directive", type: i4.SizingDirective, selector: "[buiSizing],[buiResized],[buiSizingBy],[buiFixedHeight]", inputs: ["buiSizing", "sizingBy", "buiSizingBy", "buiFixedHeight"], outputs: ["buiResized"] }], animations: [animation.stepTransition, animation.leftDrawer, animation.topDrawer], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
192
194
|
}
|
|
193
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepperComponent, decorators: [{
|
|
194
196
|
type: Component,
|
|
195
197
|
args: [{ selector: 'bui-stepper, [buiStepper]', exportAs: 'buiStepper, matStepper, matVerticalStepper, matHorizontalStepper', inputs: ['selectedIndex'], host: {
|
|
196
198
|
class: 'bui-stepper bui-host',
|
|
@@ -200,7 +202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
200
202
|
{ provide: MatStepper, useExisting: StepperComponent },
|
|
201
203
|
{ provide: CdkStepper, useExisting: StepperComponent },
|
|
202
204
|
{ provide: STEPPER_GLOBAL_OPTIONS, useValue: { displayDefaultIndicatorType: false } }
|
|
203
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bui-stepper-wrapper\" [style.display]=\"_leftDrawerState.startsWith('open') ? 'flex' : 'block'\" #sizeMonitor>\n\t<div\n\t\tclass=\"bui-stepper-left-header-container\"\n\t\t[@leftDrawer]=\"_leftDrawerState\"\n\t\t(@leftDrawer.start)=\"_leftDrawerStarted.next($event)\"\n\t\t(@leftDrawer.done)=\"_leftDrawerEnded.next($event)\"\n\t>\n\t\t<div class=\"bui-step-progress-label\">Step {{ selectedIndex + 1 }} of {{ steps.length }}</div>\n\t\t<div\n\t\t\t*ngFor=\"let step of steps; let i = index; let isLast = last\"\n\t\t\tclass=\"bui-stepper-header-wrapper\"\n\t\t\t[class.bui-stepper-vertical-line]=\"!isLast\"\n\t\t>\n\t\t\t<mat-step-header\n\t\t\t\tclass=\"bui-stepper-header\"\n\t\t\t\t(click)=\"step.select()\"\n\t\t\t\t(keydown)=\"_onKeydown($event)\"\n\t\t\t\t[tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\n\t\t\t\t[id]=\"_getStepLabelId(i)\"\n\t\t\t\t[attr.aria-posinset]=\"i + 1\"\n\t\t\t\t[attr.aria-setsize]=\"steps.length\"\n\t\t\t\t[attr.aria-controls]=\"_getStepContentId(i)\"\n\t\t\t\t[attr.aria-selected]=\"selectedIndex == i\"\n\t\t\t\t[attr.aria-label]=\"step.ariaLabel || null\"\n\t\t\t\t[attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n\t\t\t\t[attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\n\t\t\t\t[index]=\"i\"\n\t\t\t\t[state]=\"_getIndicatorType(i, step.state)\"\n\t\t\t\t[label]=\"step.stepLabel || step.label\"\n\t\t\t\t[selected]=\"selectedIndex === i\"\n\t\t\t\t[active]=\"_stepIsNavigable(i, step)\"\n\t\t\t\t[optional]=\"step.optional\"\n\t\t\t\t[errorMessage]=\"step.errorMessage\"\n\t\t\t\t[iconOverrides]=\"_iconOverrides\"\n\t\t\t\t[disableRipple]=\"disableRipple || !_stepIsNavigable(i, step)\"\n\t\t\t\t[color]=\"step.color || color\"\n\t\t\t></mat-step-header>\n\t\t</div>\n\t</div>\n\n\t<div class=\"bui-stepper-content-container\" [buiSizingBy]=\"sizeMonitor\" (buiResized)=\"_widthChanged($event.width)\">\n\t\t<div\n\t\t\tclass=\"bui-stepper-top-header-container\"\n\t\t\t[class.bui-stepper-header-active]=\"_leftDrawerState === 'void'\"\n\t\t\t[@topDrawer]=\"_topDrawerState\"\n\t\t\t(@topDrawer.start)=\"_topDrawerStarted.next($event)\"\n\t\t\t(@topDrawer.done)=\"_topDrawerEnded.next($event)\"\n\t\t>\n\t\t\t<div class=\"bui-stepper-top-header-progress\">\n\t\t\t\t<span class=\"bui-stepper-top-header-indicator\">\n\t\t\t\t\tStep {{ indicatorFormatter(selectedIndex + 1, steps.length) }}\n\t\t\t\t</span>\n\t\t\t</div>\n\n\t\t\t<div class=\"bui-stepper-progress-indicator\">\n\t\t\t\t<div\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\t(click)=\"selectedIndex = i\"\n\t\t\t\t\tclass=\"bui-stepper-progress-indicator-section\"\n\t\t\t\t\t*ngFor=\"let s of steps; let i = index\"\n\t\t\t\t\t[class.bui-step-section-interacted]=\"i <= selectedIndex\"\n\t\t\t\t></div>\n\t\t\t</div>\n\t\t\t<div class=\"bui-stepper-top-header-title-next\" *ngIf=\"selectedIndex < steps.length - 1\">\n\t\t\t\t{{ nextStepLabelPrefix }}\n\t\t\t\t<ng-template\n\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: steps.get(selectedIndex + 1) }\"\n\t\t\t\t></ng-template>\n\t\t\t</div>\n\n\t\t\t<div class=\"bui-stepper-top-header-titles-wrapper\" *ngIf=\"selected\">\n\t\t\t\t<ng-container *ngTemplateOutlet=\"toCustomStep(selected).stepLabelTopTemplate\"></ng-container>\n\t\t\t\t<div class=\"bui-stepper-top-header-title\">\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: selected }\"\n\t\t\t\t\t></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"bui-stepper-content-wrapper\" [class.bui-stepper-content-wrapper-transitioning]=\"_stepTransitioning\">\n\t\t\t<div\n\t\t\t\t*ngFor=\"let step of steps; let i = index\"\n\t\t\t\tclass=\"bui-stepper-content\"\n\t\t\t\trole=\"tabpanel\"\n\t\t\t\t[@stepTransition]=\"_getAnimationDirection(i)\"\n\t\t\t\t(@stepTransition.start)=\"_startStepTransition()\"\n\t\t\t\t(@stepTransition.done)=\"_animationDone.next($event)\"\n\t\t\t\t[id]=\"_getStepContentId(i)\"\n\t\t\t\t[attr.aria-labelledby]=\"_getStepLabelId(i)\"\n\t\t\t\t[attr.aria-expanded]=\"selectedIndex === i\"\n\t\t\t>\n\t\t\t\t<div class=\"bui-stepper-content-header-label\" *ngIf=\"!_narrow\">\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"toCustomStep(step).stepLabelTopTemplate\"></ng-container>\n\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: step }\"\n\t\t\t\t\t\t></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"step.content\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n\n<ng-template #labelTemplate let-step>\n\t<ng-template [ngIf]=\"step.stepLabel\" [ngIfElse]=\"stringLabelTempl\">\n\t\t<ng-template [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-template>\n\t</ng-template>\n\t<ng-template #stringLabelTempl>{{ step.label }}</ng-template>\n</ng-template>\n\n<ng-template #editIconTemplate let-index=\"index\">\n\t<span>{{ index + 1 }}</span>\n</ng-template>\n", styles: [".bui-stepper:not([hidden]){display:block;box-sizing:border-box}.bui-stepper-wrapper{display:flex;gap:16px;box-sizing:border-box}.bui-step-progress-label{margin-top:16px;margin-left:16px;font-size:90%;font-weight:600}.bui-stepper-left-header-container{max-width:30%}.bui-stepper-header-wrapper{position:relative}.bui-stepper-vertical-line:before{content:\"\";position:absolute;left:28px;border-left-width:1px;border-left-style:solid;border-left-color:var(--bui-color-divider);top:44px;bottom:-12px}[dir=rtl] .bui-stepper-vertical-line:before{left:auto;right:0}.bui-stepper-top-header-indicator{font-size:80%;font-weight:700}.bui-stepper-progress-indicator{display:flex;justify-content:space-between;width:100%;height:10px;gap:10px;margin-bottom:16px}.bui-stepper-progress-indicator-section{flex:1;background-color:#0000001a;border-radius:4px;cursor:pointer}.bui-stepper-content-header-label{font-size:larger;font-weight:700;margin-bottom:32px;display:flex;flex-direction:column;align-items:start;justify-items:start;justify-content:start;gap:16px}.bui-stepper .bui-stepper-header{display:flex;align-items:center;padding:0 16px;height:56px}.bui-stepper .bui-stepper-header .mat-step-icon{margin-right:16px}[dir=rtl] .bui-stepper .bui-stepper-header .mat-step-icon{margin-right:0;margin-left:16px}.bui-stepper .bui-stepper-header .mat-step-icon.mat-step-icon-state-done{background-color:var(--bui-color-success);color:#fff}.bui-stepper-top-header-container.bui-stepper-header-active{margin-bottom:16px}.bui-stepper-top-header-progress{margin-bottom:8px}.bui-stepper-top-header-titles-wrapper{display:flex;flex-direction:column;align-items:start;gap:16px}.bui-stepper-top-header-title{font-size:larger}.bui-stepper-top-header-title-next{color:var(--bui-color-muted);margin-bottom:16px;font-size:90%;color:#000c}.bui-stepper-content-container{flex:1 1 100%;border-radius:var(--bui-stepper-container-border-radius, 12px);box-shadow:0 0 1px 1px #0000001a;padding:16px;display:flex;flex-direction:column}.bui-stepper-content-wrapper{flex:1 1 100%}.bui-stepper-content-wrapper-transitioning{overflow:hidden}.bui-stepper-content{outline:0}.bui-stepper-content[aria-expanded=false]{height:0;overflow:hidden}\n"] }]
|
|
205
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"bui-stepper-wrapper\" [style.display]=\"_leftDrawerState.startsWith('open') ? 'flex' : 'block'\" #sizeMonitor>\r\n\t<div\r\n\t\tclass=\"bui-stepper-left-header-container\"\r\n\t\t[@leftDrawer]=\"_leftDrawerState\"\r\n\t\t(@leftDrawer.start)=\"_leftDrawerStarted.next($event)\"\r\n\t\t(@leftDrawer.done)=\"_leftDrawerEnded.next($event)\"\r\n\t>\r\n\t\t<div class=\"bui-step-progress-label\">Step {{ selectedIndex + 1 }} of {{ steps.length }}</div>\r\n\t\t<div\r\n\t\t\t*ngFor=\"let step of steps; let i = index; let isLast = last\"\r\n\t\t\tclass=\"bui-stepper-header-wrapper\"\r\n\t\t\t[class.bui-stepper-vertical-line]=\"!isLast\"\r\n\t\t>\r\n\t\t\t<mat-step-header\r\n\t\t\t\tclass=\"bui-stepper-header\"\r\n\t\t\t\t(click)=\"step.select()\"\r\n\t\t\t\t(keydown)=\"_onKeydown($event)\"\r\n\t\t\t\t[tabIndex]=\"_getFocusIndex() === i ? 0 : -1\"\r\n\t\t\t\t[id]=\"_getStepLabelId(i)\"\r\n\t\t\t\t[attr.aria-posinset]=\"i + 1\"\r\n\t\t\t\t[attr.aria-setsize]=\"steps.length\"\r\n\t\t\t\t[attr.aria-controls]=\"_getStepContentId(i)\"\r\n\t\t\t\t[attr.aria-selected]=\"selectedIndex == i\"\r\n\t\t\t\t[attr.aria-label]=\"step.ariaLabel || null\"\r\n\t\t\t\t[attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\r\n\t\t\t\t[attr.aria-disabled]=\"_stepIsNavigable(i, step) ? null : true\"\r\n\t\t\t\t[index]=\"i\"\r\n\t\t\t\t[state]=\"_getIndicatorType(i, step.state)\"\r\n\t\t\t\t[label]=\"step.stepLabel || step.label\"\r\n\t\t\t\t[selected]=\"selectedIndex === i\"\r\n\t\t\t\t[active]=\"_stepIsNavigable(i, step)\"\r\n\t\t\t\t[optional]=\"step.optional\"\r\n\t\t\t\t[errorMessage]=\"step.errorMessage\"\r\n\t\t\t\t[iconOverrides]=\"_iconOverrides\"\r\n\t\t\t\t[disableRipple]=\"disableRipple || !_stepIsNavigable(i, step)\"\r\n\t\t\t\t[color]=\"step.color || color\"\r\n\t\t\t></mat-step-header>\r\n\t\t</div>\r\n\t</div>\r\n\r\n\t<div class=\"bui-stepper-content-container\" [buiSizingBy]=\"sizeMonitor\" (buiResized)=\"_widthChanged($event.width)\">\r\n\t\t<div\r\n\t\t\tclass=\"bui-stepper-top-header-container\"\r\n\t\t\t[class.bui-stepper-header-active]=\"_leftDrawerState === 'void'\"\r\n\t\t\t[@topDrawer]=\"_topDrawerState\"\r\n\t\t\t(@topDrawer.start)=\"_topDrawerStarted.next($event)\"\r\n\t\t\t(@topDrawer.done)=\"_topDrawerEnded.next($event)\"\r\n\t\t>\r\n\t\t\t<div class=\"bui-stepper-top-header-progress\">\r\n\t\t\t\t<span class=\"bui-stepper-top-header-indicator\">\r\n\t\t\t\t\tStep {{ indicatorFormatter(selectedIndex + 1, steps.length) }}\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"bui-stepper-progress-indicator\">\r\n\t\t\t\t<div\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\t(click)=\"selectedIndex = i\"\r\n\t\t\t\t\tclass=\"bui-stepper-progress-indicator-section\"\r\n\t\t\t\t\t*ngFor=\"let s of steps; let i = index\"\r\n\t\t\t\t\t[class.bui-step-section-interacted]=\"i <= selectedIndex\"\r\n\t\t\t\t></div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"bui-stepper-top-header-title-next\" *ngIf=\"selectedIndex < steps.length - 1\">\r\n\t\t\t\t{{ nextStepLabelPrefix }}\r\n\t\t\t\t<ng-template\r\n\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\r\n\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: steps.get(selectedIndex + 1) }\"\r\n\t\t\t\t></ng-template>\r\n\t\t\t</div>\r\n\r\n\t\t\t<div class=\"bui-stepper-top-header-titles-wrapper\" *ngIf=\"selected\">\r\n\t\t\t\t<ng-container *ngTemplateOutlet=\"toCustomStep(selected).stepLabelTopTemplate\"></ng-container>\r\n\t\t\t\t<div class=\"bui-stepper-top-header-title\">\r\n\t\t\t\t\t<ng-template\r\n\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\r\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: selected }\"\r\n\t\t\t\t\t></ng-template>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div class=\"bui-stepper-content-wrapper\" [class.bui-stepper-content-wrapper-transitioning]=\"_stepTransitioning\">\r\n\t\t\t<div\r\n\t\t\t\t*ngFor=\"let step of steps; let i = index\"\r\n\t\t\t\tclass=\"bui-stepper-content\"\r\n\t\t\t\trole=\"tabpanel\"\r\n\t\t\t\t[@stepTransition]=\"_getAnimationDirection(i)\"\r\n\t\t\t\t(@stepTransition.start)=\"_startStepTransition()\"\r\n\t\t\t\t(@stepTransition.done)=\"_animationDone.next($event)\"\r\n\t\t\t\t[id]=\"_getStepContentId(i)\"\r\n\t\t\t\t[attr.aria-labelledby]=\"_getStepLabelId(i)\"\r\n\t\t\t\t[attr.aria-expanded]=\"selectedIndex === i\"\r\n\t\t\t>\r\n\t\t\t\t<div class=\"bui-stepper-content-header-label\" *ngIf=\"!_narrow\">\r\n\t\t\t\t\t<ng-container *ngTemplateOutlet=\"toCustomStep(step).stepLabelTopTemplate\"></ng-container>\r\n\r\n\t\t\t\t\t<div>\r\n\t\t\t\t\t\t<ng-template\r\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"labelTemplate\"\r\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: step }\"\r\n\t\t\t\t\t\t></ng-template>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t\t<ng-template [ngTemplateOutlet]=\"step.content\"></ng-template>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</div>\r\n</div>\r\n\r\n<ng-template #labelTemplate let-step>\r\n\t<ng-template [ngIf]=\"step.stepLabel\" [ngIfElse]=\"stringLabelTempl\">\r\n\t\t<ng-template [ngTemplateOutlet]=\"step.stepLabel.template\"></ng-template>\r\n\t</ng-template>\r\n\t<ng-template #stringLabelTempl>{{ step.label }}</ng-template>\r\n</ng-template>\r\n\r\n<ng-template #editIconTemplate let-index=\"index\">\r\n\t<span>{{ index + 1 }}</span>\r\n</ng-template>\r\n", styles: [".bui-stepper:not([hidden]){display:block;box-sizing:border-box}.bui-stepper-wrapper{display:flex;gap:16px;box-sizing:border-box}.bui-step-progress-label{margin-top:16px;margin-left:16px;font-size:90%;font-weight:600}.bui-stepper-left-header-container{max-width:30%}.bui-stepper-header-wrapper{position:relative}.bui-stepper-vertical-line:before{content:\"\";position:absolute;left:28px;border-left-width:1px;border-left-style:solid;border-left-color:var(--bui-color-divider);top:44px;bottom:-12px}[dir=rtl] .bui-stepper-vertical-line:before{left:auto;right:0}.bui-stepper-top-header-indicator{font-size:80%;font-weight:700}.bui-stepper-progress-indicator{display:flex;justify-content:space-between;width:100%;height:10px;gap:10px;margin-bottom:16px}.bui-stepper-progress-indicator-section{flex:1;background-color:#0000001a;border-radius:4px;cursor:pointer}.bui-stepper-content-header-label{font-size:larger;font-weight:700;margin-bottom:32px;display:flex;flex-direction:column;align-items:start;justify-items:start;justify-content:start;gap:16px}.bui-stepper .bui-stepper-header{display:flex;align-items:center;padding:0 16px;height:56px}.bui-stepper .bui-stepper-header .mat-step-icon{margin-right:16px}[dir=rtl] .bui-stepper .bui-stepper-header .mat-step-icon{margin-right:0;margin-left:16px}.bui-stepper .bui-stepper-header .mat-step-icon.mat-step-icon-state-done{background-color:var(--bui-color-success);color:#fff}.bui-stepper-top-header-container.bui-stepper-header-active{margin-bottom:16px}.bui-stepper-top-header-progress{margin-bottom:8px}.bui-stepper-top-header-titles-wrapper{display:flex;flex-direction:column;align-items:start;gap:16px}.bui-stepper-top-header-title{font-size:larger}.bui-stepper-top-header-title-next{color:var(--bui-color-muted);margin-bottom:16px;font-size:90%;color:#000c}.bui-stepper-content-container{flex:1 1 100%;border-radius:var(--bui-stepper-container-border-radius, 12px);box-shadow:0 0 1px 1px #0000001a;padding:16px;display:flex;flex-direction:column}.bui-stepper-content-wrapper{flex:1 1 100%}.bui-stepper-content-wrapper-transitioning{overflow:hidden}.bui-stepper-content{outline:0}.bui-stepper-content[aria-expanded=false]{height:0;overflow:hidden}\n"] }]
|
|
204
206
|
}], ctorParameters: () => [{ type: i1.Directionality, decorators: [{
|
|
205
207
|
type: Optional
|
|
206
208
|
}] }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
@@ -243,8 +245,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
|
|
|
243
245
|
}] } });
|
|
244
246
|
|
|
245
247
|
class StepperModule {
|
|
246
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
247
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
248
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
249
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: StepperModule, declarations: [StepperComponent, StepDirective, StepLabelTopDirective], imports: [CommonModule,
|
|
248
250
|
PortalModule,
|
|
249
251
|
CdkStepperModule,
|
|
250
252
|
MatStepperModule,
|
|
@@ -253,7 +255,7 @@ class StepperModule {
|
|
|
253
255
|
MatRippleModule,
|
|
254
256
|
MatProgressSpinnerModule,
|
|
255
257
|
BehaviorModule], exports: [StepperComponent, MatStepperModule, StepLabelTopDirective, StepDirective] }); }
|
|
256
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
258
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepperModule, imports: [CommonModule,
|
|
257
259
|
PortalModule,
|
|
258
260
|
CdkStepperModule,
|
|
259
261
|
MatStepperModule,
|
|
@@ -263,7 +265,7 @@ class StepperModule {
|
|
|
263
265
|
MatProgressSpinnerModule,
|
|
264
266
|
BehaviorModule, MatStepperModule] }); }
|
|
265
267
|
}
|
|
266
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: StepperModule, decorators: [{
|
|
267
269
|
type: NgModule,
|
|
268
270
|
args: [{
|
|
269
271
|
declarations: [StepperComponent, StepDirective, StepLabelTopDirective],
|