@design-factory/design-factory 21.0.1 → 21.0.2
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.
|
@@ -5073,10 +5073,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
5073
5073
|
args: [{ selector: 'ng-template[dfStepperStepContent]' }]
|
|
5074
5074
|
}], propDecorators: { dfStepperStepContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "dfStepperStepContent", required: false }] }] } });
|
|
5075
5075
|
/**
|
|
5076
|
-
* Stepper component
|
|
5077
|
-
*
|
|
5078
|
-
*
|
|
5079
|
-
* - Using the
|
|
5076
|
+
* The Stepper component provides a step by step navigation.
|
|
5077
|
+
*
|
|
5078
|
+
* There are two ways to navigate through the steps:
|
|
5079
|
+
* - Using the linear navigation, where the next step can only be navigated to if the current step is completed
|
|
5080
|
+
* - Using the non-linear navigation, with no constraint
|
|
5080
5081
|
*/
|
|
5081
5082
|
class DfStepperComponent {
|
|
5082
5083
|
constructor() {
|
|
@@ -5097,7 +5098,7 @@ class DfStepperComponent {
|
|
|
5097
5098
|
});
|
|
5098
5099
|
}
|
|
5099
5100
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DfStepperComponent, isStandalone: true, selector: "[dfStepper]", host: { attributes: { "role": "tablist" }, properties: { "class.align-items-start": "state()?.isVertical", "class.flex-column": "state()?.isVertical", "attr.aria-label": "stepperService.stepperAriaLabel", "attr.aria-orientation": "state()?.isVertical ? \"vertical\": null" }, classAttribute: "df-stepper mb-2 d-flex" }, queries: [{ propertyName: "tplStepsContent", predicate: DfStepperStepContentDirective, isSignal: true }], hostDirectives: [{ directive: DfStepperDirective }], ngImport: i0, template: "<ng-template #myStepperLine let-inline>\n <div class=\"df-stepper-line-wrapper d-flex flex-column flex-grow-1\">\n <div class=\"df-stepper-line d-flex flex-grow-1 align-items-center\">\n <div class=\"df-stepper-horizontal-line flex-grow-1 border-top mt-1\"></div>\n </div>\n @if (!inline) {\n <div class=\"df-stepper-line d-none d-sm-flex flex-grow-1\">\n <div class=\"flex-grow-1\"></div>\n </div>\n }\n </div>\n</ng-template>\n@if (state(); as state) {\n @for (step of state.steps; track step.id; let i = $index) {\n <button\n #stepbasic\n class=\"btn df-stepper-step d-flex align-items-center h-auto\"\n dfStepperStep\n [class]=\"{\n active: i === state.active,\n 'flex-column': !state.isInline && !state.isVertical,\n 'df-stepper-step-warning': step.type === 'warning',\n 'df-stepper-step-completed': step.type === 'completed',\n 'df-stepper-step-visited': step.type === 'visited',\n 'df-stepper-step-future': step.type === 'future'\n }\"\n [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n [disabled]=\"
|
|
5101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DfStepperComponent, isStandalone: true, selector: "[dfStepper]", host: { attributes: { "role": "tablist" }, properties: { "class.align-items-start": "state()?.isVertical", "class.flex-column": "state()?.isVertical", "attr.aria-label": "stepperService.stepperAriaLabel", "attr.aria-orientation": "state()?.isVertical ? \"vertical\": null" }, classAttribute: "df-stepper mb-2 d-flex" }, queries: [{ propertyName: "tplStepsContent", predicate: DfStepperStepContentDirective, isSignal: true }], hostDirectives: [{ directive: DfStepperDirective }], ngImport: i0, template: "<ng-template #myStepperLine let-inline>\n <div class=\"df-stepper-line-wrapper d-flex flex-column flex-grow-1\">\n <div class=\"df-stepper-line d-flex flex-grow-1 align-items-center\">\n <div class=\"df-stepper-horizontal-line flex-grow-1 border-top mt-1\"></div>\n </div>\n @if (!inline) {\n <div class=\"df-stepper-line d-none d-sm-flex flex-grow-1\">\n <div class=\"flex-grow-1\"></div>\n </div>\n }\n </div>\n</ng-template>\n@if (state(); as state) {\n @for (step of state.steps; track step.id; let i = $index) {\n <button\n #stepbasic\n class=\"btn df-stepper-step d-flex align-items-center h-auto\"\n dfStepperStep\n [class]=\"{\n active: i === state.active,\n 'flex-column': !state.isInline && !state.isVertical,\n 'df-stepper-step-warning': step.type === 'warning',\n 'df-stepper-step-completed': step.type === 'completed',\n 'df-stepper-step-visited': step.type === 'visited',\n 'df-stepper-step-future': step.type === 'future'\n }\"\n [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n [disabled]=\"state.isLinear && step.type === 'future'\"\n role=\"tab\"\n [attr.aria-selected]=\"i === state.active ? 'true' : 'false'\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"state.steps.length\"\n [attr.aria-controls]=\"step.ariaControl\"\n (click)=\"stepperService.selectWithFocus(i)\"\n >\n <div\n [class]=\"{\n 'df-stepper-step-circle': true,\n 'df-stepper-icon': step.type === 'completed',\n 'fa-check': step.type === 'completed',\n 'df-stepper-outline-number-future': step.type === 'future',\n 'df-stepper-outline-number-visited': step.type === 'visited',\n 'df-stepper-outline-number': step.type === 'future' || step.type === 'visited',\n 'fw-medium': step.type === 'visited',\n 'df-stepper-outline-icon': step.type === 'warning',\n 'fa-exclamation-triangle': step.type === 'warning',\n 'd-flex': step.type !== 'warning' && step.type !== 'completed',\n 'justify-content-center': step.type !== 'warning' && step.type !== 'completed',\n 'align-items-center': step.type !== 'warning' && step.type !== 'completed'\n }\"\n >\n @if (step.type !== 'warning' && step.type !== 'completed') {\n <span aria-hidden=\"true\">{{ stepperService.getStepNumberLabel(i) }}</span>\n }\n </div>\n <div\n class=\"flex-column\"\n [class.mt-1]=\"!state.isInline\"\n [class.d-none]=\"!state.isVertical\"\n [class.d-sm-flex]=\"!state.isVertical\"\n [class.d-flex]=\"state.isVertical\"\n >\n @if (step.type === 'warning') {\n <span class=\"visually-hidden\">{{ stepperService.warningLabel }}</span>\n }\n <span\n class=\"df-stepper-label\"\n [class]=\"stepperLabelClasses\"\n [class.ms-4]=\"state.isInline || state.isVertical\"\n >{{ step.label }}</span\n >\n @if (step.optionalLabel) {\n <span\n class=\"df-stepper-optional-label text-body fw-normal text-start fs-xs\"\n [class.ms-4]=\"state.isInline || state.isVertical\"\n >{{ step.optionalLabel }}</span\n >\n }\n @if (step.completed) {\n <span class=\"visually-hidden\">{{ stepperService.completedLabel }}</span>\n }\n </div>\n </button>\n @if (!state.isVertical && i < state.steps.length - 1) {\n <ng-container\n [ngTemplateOutlet]=\"myStepperLine\"\n [ngTemplateOutletContext]=\"{ $implicit: state.isInline }\"\n ></ng-container>\n }\n @if (state.isVertical && i < state.steps.length) {\n <div\n [class.d-none]=\"state.steps.length - 1 === i\"\n role=\"tabpanel\"\n [id]=\"step.ariaControl\"\n class=\"df-vertical-stepper-panel df-vertical-stepper-line my-5 ps-5 position-relative\"\n >\n @if (mapStepToContent.has(i) && state.active === i) {\n <ng-template\n [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\"\n [ngTemplateOutletContext]=\"{ state, index: i, service: stepperService }\"\n ></ng-template>\n }\n </div>\n }\n }\n}\n@if (stepperService.stepperState$ | async; as state) {\n <div\n class=\"text-primary mb-2\"\n [class.d-block]=\"!state.isVertical\"\n [class.d-sm-none]=\"!state.isVertical\"\n [class.d-none]=\"state.isVertical\"\n >\n <span class=\"df-stepper-label\" [class]=\"stepperLabelClasses\">{{ state.steps[state.active].label }}</span>\n </div>\n}\n", dependencies: [{ kind: "directive", type: DfStepperStepDirective, selector: "[dfStepperStep]", exportAs: ["dfStepperStep"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5101
5102
|
}
|
|
5102
5103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DfStepperComponent, decorators: [{
|
|
5103
5104
|
type: Component,
|
|
@@ -5108,7 +5109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
5108
5109
|
'[class.flex-column]': 'state()?.isVertical',
|
|
5109
5110
|
'[attr.aria-label]': 'stepperService.stepperAriaLabel',
|
|
5110
5111
|
'[attr.aria-orientation]': 'state()?.isVertical ? "vertical": null'
|
|
5111
|
-
}, template: "<ng-template #myStepperLine let-inline>\n <div class=\"df-stepper-line-wrapper d-flex flex-column flex-grow-1\">\n <div class=\"df-stepper-line d-flex flex-grow-1 align-items-center\">\n <div class=\"df-stepper-horizontal-line flex-grow-1 border-top mt-1\"></div>\n </div>\n @if (!inline) {\n <div class=\"df-stepper-line d-none d-sm-flex flex-grow-1\">\n <div class=\"flex-grow-1\"></div>\n </div>\n }\n </div>\n</ng-template>\n@if (state(); as state) {\n @for (step of state.steps; track step.id; let i = $index) {\n <button\n #stepbasic\n class=\"btn df-stepper-step d-flex align-items-center h-auto\"\n dfStepperStep\n [class]=\"{\n active: i === state.active,\n 'flex-column': !state.isInline && !state.isVertical,\n 'df-stepper-step-warning': step.type === 'warning',\n 'df-stepper-step-completed': step.type === 'completed',\n 'df-stepper-step-visited': step.type === 'visited',\n 'df-stepper-step-future': step.type === 'future'\n }\"\n [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n [disabled]=\"
|
|
5112
|
+
}, template: "<ng-template #myStepperLine let-inline>\n <div class=\"df-stepper-line-wrapper d-flex flex-column flex-grow-1\">\n <div class=\"df-stepper-line d-flex flex-grow-1 align-items-center\">\n <div class=\"df-stepper-horizontal-line flex-grow-1 border-top mt-1\"></div>\n </div>\n @if (!inline) {\n <div class=\"df-stepper-line d-none d-sm-flex flex-grow-1\">\n <div class=\"flex-grow-1\"></div>\n </div>\n }\n </div>\n</ng-template>\n@if (state(); as state) {\n @for (step of state.steps; track step.id; let i = $index) {\n <button\n #stepbasic\n class=\"btn df-stepper-step d-flex align-items-center h-auto\"\n dfStepperStep\n [class]=\"{\n active: i === state.active,\n 'flex-column': !state.isInline && !state.isVertical,\n 'df-stepper-step-warning': step.type === 'warning',\n 'df-stepper-step-completed': step.type === 'completed',\n 'df-stepper-step-visited': step.type === 'visited',\n 'df-stepper-step-future': step.type === 'future'\n }\"\n [attr.tabIndex]=\"i === state.active ? 0 : -1\"\n [disabled]=\"state.isLinear && step.type === 'future'\"\n role=\"tab\"\n [attr.aria-selected]=\"i === state.active ? 'true' : 'false'\"\n [attr.aria-posinset]=\"i + 1\"\n [attr.aria-setsize]=\"state.steps.length\"\n [attr.aria-controls]=\"step.ariaControl\"\n (click)=\"stepperService.selectWithFocus(i)\"\n >\n <div\n [class]=\"{\n 'df-stepper-step-circle': true,\n 'df-stepper-icon': step.type === 'completed',\n 'fa-check': step.type === 'completed',\n 'df-stepper-outline-number-future': step.type === 'future',\n 'df-stepper-outline-number-visited': step.type === 'visited',\n 'df-stepper-outline-number': step.type === 'future' || step.type === 'visited',\n 'fw-medium': step.type === 'visited',\n 'df-stepper-outline-icon': step.type === 'warning',\n 'fa-exclamation-triangle': step.type === 'warning',\n 'd-flex': step.type !== 'warning' && step.type !== 'completed',\n 'justify-content-center': step.type !== 'warning' && step.type !== 'completed',\n 'align-items-center': step.type !== 'warning' && step.type !== 'completed'\n }\"\n >\n @if (step.type !== 'warning' && step.type !== 'completed') {\n <span aria-hidden=\"true\">{{ stepperService.getStepNumberLabel(i) }}</span>\n }\n </div>\n <div\n class=\"flex-column\"\n [class.mt-1]=\"!state.isInline\"\n [class.d-none]=\"!state.isVertical\"\n [class.d-sm-flex]=\"!state.isVertical\"\n [class.d-flex]=\"state.isVertical\"\n >\n @if (step.type === 'warning') {\n <span class=\"visually-hidden\">{{ stepperService.warningLabel }}</span>\n }\n <span\n class=\"df-stepper-label\"\n [class]=\"stepperLabelClasses\"\n [class.ms-4]=\"state.isInline || state.isVertical\"\n >{{ step.label }}</span\n >\n @if (step.optionalLabel) {\n <span\n class=\"df-stepper-optional-label text-body fw-normal text-start fs-xs\"\n [class.ms-4]=\"state.isInline || state.isVertical\"\n >{{ step.optionalLabel }}</span\n >\n }\n @if (step.completed) {\n <span class=\"visually-hidden\">{{ stepperService.completedLabel }}</span>\n }\n </div>\n </button>\n @if (!state.isVertical && i < state.steps.length - 1) {\n <ng-container\n [ngTemplateOutlet]=\"myStepperLine\"\n [ngTemplateOutletContext]=\"{ $implicit: state.isInline }\"\n ></ng-container>\n }\n @if (state.isVertical && i < state.steps.length) {\n <div\n [class.d-none]=\"state.steps.length - 1 === i\"\n role=\"tabpanel\"\n [id]=\"step.ariaControl\"\n class=\"df-vertical-stepper-panel df-vertical-stepper-line my-5 ps-5 position-relative\"\n >\n @if (mapStepToContent.has(i) && state.active === i) {\n <ng-template\n [ngTemplateOutlet]=\"mapStepToContent.get(i) || null\"\n [ngTemplateOutletContext]=\"{ state, index: i, service: stepperService }\"\n ></ng-template>\n }\n </div>\n }\n }\n}\n@if (stepperService.stepperState$ | async; as state) {\n <div\n class=\"text-primary mb-2\"\n [class.d-block]=\"!state.isVertical\"\n [class.d-sm-none]=\"!state.isVertical\"\n [class.d-none]=\"state.isVertical\"\n >\n <span class=\"df-stepper-label\" [class]=\"stepperLabelClasses\">{{ state.steps[state.active].label }}</span>\n </div>\n}\n" }]
|
|
5112
5113
|
}], ctorParameters: () => [], propDecorators: { tplStepsContent: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfStepperStepContentDirective), { isSignal: true }] }] } });
|
|
5113
5114
|
|
|
5114
5115
|
class DfStepperModule {
|