@egose/shadcn-theme-ng 0.5.1 → 0.5.3
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/form-checkbox/README.md +22 -22
- package/form-checkbox/fesm2022/form-checkbox.mjs +18 -7
- package/form-checkbox/types/form-checkbox.d.ts +7 -0
- package/form-field-simple/fesm2022/form-field-simple.mjs +24 -7
- package/form-field-simple/types/form-field-simple.d.ts +7 -0
- package/package.json +1 -1
- package/stepper/README.md +75 -52
- package/stepper/fesm2022/stepper.mjs +30 -6
- package/stepper/types/stepper.d.ts +22 -14
package/form-checkbox/README.md
CHANGED
|
@@ -83,29 +83,29 @@ Selector (from source): `eg-form-checkbox` (standalone component).
|
|
|
83
83
|
|
|
84
84
|
### `EgFormCheckbox` — `eg-form-checkbox`
|
|
85
85
|
|
|
86
|
-
| Input | Type | Default | Description
|
|
87
|
-
| --------------- | --------------------- | ------- |
|
|
88
|
-
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.**
|
|
89
|
-
| `label` | `string` | `''` | Label text next to the checkbox.
|
|
90
|
-
| `error` | `string \| undefined` | — | Error text shown when the control is invalid + touched/dirty/submitted (via `EgFormField` switching).
|
|
91
|
-
| `autoError` | `boolean` | `true` | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`.
|
|
92
|
-
| `hint` | `string \| undefined` | — | Hint text shown when there is no error to display.
|
|
93
|
-
| `controlId` | `string \| undefined` | — | Explicit control id (first priority for `effectiveId`).
|
|
94
|
-
| `id` | `string \| undefined` | — | Fallback id (second priority).
|
|
95
|
-
| `name` | `string \| undefined` | — | Checkbox `name` attribute (defaults to `controlName`).
|
|
96
|
-
| `checked` | `boolean` | `false` | Initial checked state passed to `hlm-checkbox`.
|
|
86
|
+
| Input | Type | Default | Description |
|
|
87
|
+
| --------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
88
|
+
| `controlName` | `string` | `''` | `formControlName` key inside the parent `FormGroup`. **Required.** |
|
|
89
|
+
| `label` | `string` | `''` | Label text next to the checkbox. |
|
|
90
|
+
| `error` | `string \| undefined` | — | Error text shown when the control is invalid + touched/dirty/submitted (via `EgFormField` switching). |
|
|
91
|
+
| `autoError` | `boolean` | `true` | Auto-resolve the message from the control's `ValidationErrors` when `error` is unset. Explicit `error` always wins; `error=""` counts as unset. Global wording via `provideEgFormErrorMessages`. |
|
|
92
|
+
| `hint` | `string \| undefined` | — | Hint text shown when there is no error to display. |
|
|
93
|
+
| `controlId` | `string \| undefined` | — | Explicit control id (first priority for `effectiveId`). |
|
|
94
|
+
| `id` | `string \| undefined` | — | Fallback id (second priority). |
|
|
95
|
+
| `name` | `string \| undefined` | — | Checkbox `name` attribute (defaults to `controlName`). |
|
|
96
|
+
| `checked` | `boolean` | `false` | Initial checked state passed to `hlm-checkbox`. |
|
|
97
97
|
| `required` | `boolean` | `false` | Shows a red `*` and sets checkbox `required` (boolean-coerced, so bare `required` works). Presentation only — it does not validate by itself; add `Validators.requiredTrue` to the `FormControl` or the control is never invalid and no error is shown. |
|
|
98
|
-
| `disabled` | `boolean` | `false` | Locks interaction via checkbox `wrapperDisabled` (does not write to the form control).
|
|
99
|
-
| `class` | `ClassValue` | `''` | Extra host classes.
|
|
100
|
-
| `checkboxClass` | `string` | `''` | Extra classes for `hlm-checkbox`.
|
|
101
|
-
| `labelClass` | `string` | `''` | Extra classes for the label.
|
|
102
|
-
| `errorClass` | `string` | `''` | Extra classes for `hlm-error`.
|
|
103
|
-
| `hintClass` | `string` | `''` | Extra classes for `hlm-hint`.
|
|
104
|
-
|
|
105
|
-
| Member | Description
|
|
106
|
-
| -------------------- |
|
|
107
|
-
| `effectiveId` | `controlId() \|\| id() \|\| generated` — wired to checkbox `id` and label `for`.
|
|
108
|
-
| `errorId` / `hintId` | `effectiveId + '-error' / '-hint'` for `aria-describedby`.
|
|
98
|
+
| `disabled` | `boolean` | `false` | Locks interaction via checkbox `wrapperDisabled` (does not write to the form control). |
|
|
99
|
+
| `class` | `ClassValue` | `''` | Extra host classes. |
|
|
100
|
+
| `checkboxClass` | `string` | `''` | Extra classes for `hlm-checkbox`. |
|
|
101
|
+
| `labelClass` | `string` | `''` | Extra classes for the label. |
|
|
102
|
+
| `errorClass` | `string` | `''` | Extra classes for `hlm-error`. |
|
|
103
|
+
| `hintClass` | `string` | `''` | Extra classes for `hlm-hint`. |
|
|
104
|
+
|
|
105
|
+
| Member | Description |
|
|
106
|
+
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
107
|
+
| `effectiveId` | `controlId() \|\| id() \|\| generated` — wired to checkbox `id` and label `for`. |
|
|
108
|
+
| `errorId` / `hintId` | `effectiveId + '-error' / '-hint'` for `aria-describedby`. |
|
|
109
109
|
| `describedBy()` | Returns `errorId` when `error()` is set and the control is invalid + dirty/touched/submitted, else `hintId` when `hint()` is set, else `null`. |
|
|
110
110
|
|
|
111
111
|
Requires a `[formGroup]` ancestor: the component injects `FormGroupDirective` and provides
|
|
@@ -36,6 +36,14 @@ class EgFormCheckbox {
|
|
|
36
36
|
...(ngDevMode ? [{ debugName: "_status" }] : /* istanbul ignore next */ []));
|
|
37
37
|
_submitted = signal(false, /* @ts-ignore */
|
|
38
38
|
...(ngDevMode ? [{ debugName: "_submitted" }] : /* istanbul ignore next */ []));
|
|
39
|
+
/**
|
|
40
|
+
* `touched`/`dirty` are plain flags with no observable: a stepper surfacing
|
|
41
|
+
* errors via `markAllAsTouched()` (no status change, no submit) would
|
|
42
|
+
* otherwise stay invisible under OnPush. Polled in `ngDoCheck` so the
|
|
43
|
+
* computed below recomputes on interaction changes too.
|
|
44
|
+
*/
|
|
45
|
+
_interacted = signal(false, /* @ts-ignore */
|
|
46
|
+
...(ngDevMode ? [{ debugName: "_interacted" }] : /* istanbul ignore next */ []));
|
|
39
47
|
_trackedControl = null;
|
|
40
48
|
_controlSub = null;
|
|
41
49
|
// Classes
|
|
@@ -107,10 +115,9 @@ class EgFormCheckbox {
|
|
|
107
115
|
showError = computed(() => {
|
|
108
116
|
this._status();
|
|
109
117
|
this._submitted();
|
|
118
|
+
this._interacted();
|
|
110
119
|
const control = this.formGroupDirective.form.get(this.controlName());
|
|
111
|
-
return
|
|
112
|
-
!!control?.invalid &&
|
|
113
|
-
(control.dirty || control.touched || this._submitted()));
|
|
120
|
+
return !!this.resolvedError() && !!control?.invalid && (this._interacted() || this._submitted());
|
|
114
121
|
}, /* @ts-ignore */
|
|
115
122
|
...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
|
|
116
123
|
describedBy() {
|
|
@@ -136,11 +143,14 @@ class EgFormCheckbox {
|
|
|
136
143
|
const control = this.formGroupDirective.form.get(this.controlName()) ?? null;
|
|
137
144
|
if (control !== this._trackedControl) {
|
|
138
145
|
this._trackControl();
|
|
146
|
+
return;
|
|
139
147
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
148
|
+
if (control) {
|
|
149
|
+
if (this._status() !== control.status)
|
|
150
|
+
this._status.set(control.status);
|
|
151
|
+
const interacted = control.touched || control.dirty;
|
|
152
|
+
if (this._interacted() !== interacted)
|
|
153
|
+
this._interacted.set(interacted);
|
|
144
154
|
}
|
|
145
155
|
}
|
|
146
156
|
ngOnDestroy() {
|
|
@@ -153,6 +163,7 @@ class EgFormCheckbox {
|
|
|
153
163
|
const control = this.formGroupDirective.form.get(this.controlName()) ?? null;
|
|
154
164
|
this._trackedControl = control;
|
|
155
165
|
this._status.set(control?.status ?? null);
|
|
166
|
+
this._interacted.set(!!control && (control.touched || control.dirty));
|
|
156
167
|
if (control) {
|
|
157
168
|
this._controlSub = control.statusChanges.subscribe((status) => {
|
|
158
169
|
if (this._status() !== status)
|
|
@@ -20,6 +20,13 @@ declare class EgFormCheckbox implements DoCheck, AfterContentInit, OnDestroy {
|
|
|
20
20
|
*/
|
|
21
21
|
private readonly _status;
|
|
22
22
|
private readonly _submitted;
|
|
23
|
+
/**
|
|
24
|
+
* `touched`/`dirty` are plain flags with no observable: a stepper surfacing
|
|
25
|
+
* errors via `markAllAsTouched()` (no status change, no submit) would
|
|
26
|
+
* otherwise stay invisible under OnPush. Polled in `ngDoCheck` so the
|
|
27
|
+
* computed below recomputes on interaction changes too.
|
|
28
|
+
*/
|
|
29
|
+
private readonly _interacted;
|
|
23
30
|
private _trackedControl;
|
|
24
31
|
private _controlSub;
|
|
25
32
|
readonly userClass: _angular_core.InputSignal<ClassValue>;
|
|
@@ -21,6 +21,14 @@ class EgFormField {
|
|
|
21
21
|
*/
|
|
22
22
|
submittedSignal = signal(false, /* @ts-ignore */
|
|
23
23
|
...(ngDevMode ? [{ debugName: "submittedSignal" }] : /* istanbul ignore next */ []));
|
|
24
|
+
/**
|
|
25
|
+
* `touched`/`dirty` are plain flags with no observable: surfacing errors via
|
|
26
|
+
* `markAllAsTouched()` (e.g. a stepper blocking `Next` without changing the
|
|
27
|
+
* control status) would otherwise stay invisible under OnPush. Polled in
|
|
28
|
+
* `ngDoCheck` so `hasError` recomputes on interaction changes too.
|
|
29
|
+
*/
|
|
30
|
+
interactedSignal = signal(false, /* @ts-ignore */
|
|
31
|
+
...(ngDevMode ? [{ debugName: "interactedSignal" }] : /* istanbul ignore next */ []));
|
|
24
32
|
sub = new Subscription();
|
|
25
33
|
ngAfterContentInit() {
|
|
26
34
|
const ctrlDir = this.control();
|
|
@@ -29,32 +37,41 @@ class EgFormField {
|
|
|
29
37
|
this.statusSignal.set(status);
|
|
30
38
|
}));
|
|
31
39
|
this.statusSignal.set(ctrlDir.control.status);
|
|
40
|
+
this.interactedSignal.set(ctrlDir.control.touched || ctrlDir.control.dirty);
|
|
32
41
|
}
|
|
33
42
|
}
|
|
34
43
|
ngDoCheck() {
|
|
35
44
|
const submitted = !!this.formGroupDirective?.submitted;
|
|
36
45
|
if (this.submittedSignal() !== submitted)
|
|
37
46
|
this.submittedSignal.set(submitted);
|
|
47
|
+
// NOTE: `control` itself may still be unset on the first pass (this hook
|
|
48
|
+
// runs before the content child's setup), so optional-chain everything.
|
|
49
|
+
const ctrl = this.control()?.control ?? null;
|
|
50
|
+
if (ctrl) {
|
|
51
|
+
const interacted = ctrl.touched || ctrl.dirty;
|
|
52
|
+
if (this.interactedSignal() !== interacted)
|
|
53
|
+
this.interactedSignal.set(interacted);
|
|
54
|
+
}
|
|
38
55
|
}
|
|
39
56
|
ngOnDestroy() {
|
|
40
57
|
this.sub.unsubscribe();
|
|
41
58
|
}
|
|
42
59
|
hasError = computed(() => {
|
|
43
|
-
const
|
|
44
|
-
if (!
|
|
60
|
+
const ctrl = this.control()?.control ?? null;
|
|
61
|
+
if (!ctrl)
|
|
45
62
|
return false;
|
|
46
63
|
this.statusSignal();
|
|
47
64
|
this.submittedSignal();
|
|
48
|
-
|
|
49
|
-
|
|
65
|
+
this.interactedSignal();
|
|
66
|
+
return !!ctrl.errors && (this.interactedSignal() || this.submittedSignal());
|
|
50
67
|
}, /* @ts-ignore */
|
|
51
68
|
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
52
69
|
firstErrorKey = computed(() => {
|
|
53
|
-
const
|
|
54
|
-
if (!
|
|
70
|
+
const ctrl = this.control()?.control ?? null;
|
|
71
|
+
if (!ctrl?.errors)
|
|
55
72
|
return null;
|
|
56
73
|
this.statusSignal();
|
|
57
|
-
return Object.keys(
|
|
74
|
+
return Object.keys(ctrl.errors)[0] ?? null;
|
|
58
75
|
}, /* @ts-ignore */
|
|
59
76
|
...(ngDevMode ? [{ debugName: "firstErrorKey" }] : /* istanbul ignore next */ []));
|
|
60
77
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: EgFormField, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -16,6 +16,13 @@ declare class EgFormField implements AfterContentInit, DoCheck, OnDestroy {
|
|
|
16
16
|
* even when the control was never touched/dirty.
|
|
17
17
|
*/
|
|
18
18
|
private submittedSignal;
|
|
19
|
+
/**
|
|
20
|
+
* `touched`/`dirty` are plain flags with no observable: surfacing errors via
|
|
21
|
+
* `markAllAsTouched()` (e.g. a stepper blocking `Next` without changing the
|
|
22
|
+
* control status) would otherwise stay invisible under OnPush. Polled in
|
|
23
|
+
* `ngDoCheck` so `hasError` recomputes on interaction changes too.
|
|
24
|
+
*/
|
|
25
|
+
private interactedSignal;
|
|
19
26
|
private sub;
|
|
20
27
|
ngAfterContentInit(): void;
|
|
21
28
|
ngDoCheck(): void;
|
package/package.json
CHANGED
package/stepper/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Stepper (`@egose/shadcn-theme-ng/stepper`)
|
|
2
2
|
|
|
3
|
-
Multi-step workflow navigation, ported from the spartan stepper blocks. This subpath ships seven pieces — `HlmStepper` (root), `HlmStep` (step), `HlmStepHeader` (clickable header with indicator), `HlmStepLabel` (rich label template), `HlmStepContent` (lazy body), `HlmStepperNext` / `HlmStepperPrevious` (navigation buttons) — plus `provideHlmStepperConfig` / `injectHlmStepperConfig` for global defaults. All are thin shadcn-styled components over Angular CDK's `@angular/cdk/stepper` primitives (`CdkStepper`, `CdkStep`, `CdkStepHeader`, `CdkStepLabel`).
|
|
3
|
+
Multi-step workflow navigation, ported from the spartan stepper blocks. This subpath ships seven pieces — `HlmStepper` (root), `HlmStep` (step), `HlmStepHeader` (clickable header with indicator), `HlmStepLabel` (rich label template), `HlmStepContent` (lazy body), `HlmStepperNext` / `HlmStepperPrevious` (navigation buttons) — plus `provideHlmStepperConfig` / `injectHlmStepperConfig` for global defaults. Headers automatically show the full label in a styled tooltip on hover/focus (overridable per step via `tooltip`). All are thin shadcn-styled components over Angular CDK's `@angular/cdk/stepper` primitives (`CdkStepper`, `CdkStep`, `CdkStepHeader`, `CdkStepLabel`).
|
|
4
4
|
|
|
5
5
|
> **Ships as:** `@egose/shadcn-theme-ng/stepper` and `@egose/shadcn-theme-ng-tw/stepper` (the `tw:`-prefixed Tailwind variant). See the [package README](../../README.md) for install steps, peer dependencies, Tailwind setup, and testing/release guidance. Do not publish this project directory independently.
|
|
6
6
|
|
|
@@ -33,6 +33,7 @@ import {
|
|
|
33
33
|
HlmStepperPrevious,
|
|
34
34
|
injectHlmStepperConfig,
|
|
35
35
|
provideHlmStepperConfig,
|
|
36
|
+
type HlmStepTooltipPosition,
|
|
36
37
|
} from '@egose/shadcn-theme-ng/stepper';
|
|
37
38
|
// tw variant: swap to '@egose/shadcn-theme-ng-tw/stepper'
|
|
38
39
|
```
|
|
@@ -62,19 +63,19 @@ import { HlmStepperModule } from '@egose/shadcn-theme-ng/stepper';
|
|
|
62
63
|
export class FeatureModule {}
|
|
63
64
|
```
|
|
64
65
|
|
|
65
|
-
| Symbol
|
|
66
|
-
|
|
|
67
|
-
| `HlmStepper`
|
|
68
|
-
| `HlmStep`
|
|
69
|
-
| `HlmStepHeader`
|
|
70
|
-
| `HlmStepLabel`
|
|
71
|
-
| `HlmStepContent`
|
|
72
|
-
| `HlmStepperNext`
|
|
73
|
-
| `HlmStepperPrevious`
|
|
74
|
-
| `HlmStepperImports`
|
|
75
|
-
| `HlmStepperModule`
|
|
76
|
-
| `provideHlmStepperConfig
|
|
77
|
-
| `injectHlmStepperConfig`
|
|
66
|
+
| Symbol | Kind | Description |
|
|
67
|
+
| ------------------------- | ------------- | ------------------------------------------------------------------------- |
|
|
68
|
+
| `HlmStepper` | Component | Root: `<hlm-stepper>` — extends `CdkStepper`. |
|
|
69
|
+
| `HlmStep` | Component | Step: `<hlm-step label="…">` — extends `CdkStep`, adds `icon` input. |
|
|
70
|
+
| `HlmStepHeader` | Component | Header: `<hlm-step-header>` — extends `CdkStepHeader`, renders indicator. |
|
|
71
|
+
| `HlmStepLabel` | Directive | Rich label: `<ng-template hlmStepLabel>` — extends `CdkStepLabel`. |
|
|
72
|
+
| `HlmStepContent` | Directive | Lazy body: `<ng-template hlmStepContent>` — attached on first selection. |
|
|
73
|
+
| `HlmStepperNext` | Directive | Next button: `button[hlmStepperNext]` — extends `CdkStepperNext`. |
|
|
74
|
+
| `HlmStepperPrevious` | Directive | Back button: `button[hlmStepperPrevious]` — extends `CdkStepperPrevious`. |
|
|
75
|
+
| `HlmStepperImports` | `const` array | All seven, spread into `imports: [...]`. |
|
|
76
|
+
| `HlmStepperModule` | NgModule | Imports + re-exports all seven. |
|
|
77
|
+
| `provideHlmStepperConfig` | Function | Global defaults for animations + indicator mode. |
|
|
78
|
+
| `injectHlmStepperConfig` | Function | Reads the (optionally provided) global config. |
|
|
78
79
|
|
|
79
80
|
## Anatomy / Structure
|
|
80
81
|
|
|
@@ -122,47 +123,50 @@ Lazy body (attached only when the step is first selected):
|
|
|
122
123
|
|
|
123
124
|
### `HlmStepper` — selector `hlm-stepper` (component, extends `CdkStepper`)
|
|
124
125
|
|
|
125
|
-
| Input
|
|
126
|
-
|
|
|
127
|
-
| `orientation`
|
|
128
|
-
| `linear`
|
|
129
|
-
| `selectedIndex`
|
|
130
|
-
| `labelPosition`
|
|
131
|
-
| `headerPosition`
|
|
132
|
-
| `indicatorMode`
|
|
133
|
-
| `stepperAriaLabel`
|
|
134
|
-
| `stepperAriaLabelledby` | `string \| null`
|
|
135
|
-
| `animationsEnabled`
|
|
136
|
-
| `animationDuration`
|
|
126
|
+
| Input | Type | Default | Description |
|
|
127
|
+
| ----------------------- | ------------------------------- | ----------------------- | ---------------------------------------------------------------- |
|
|
128
|
+
| `orientation` | forwarded to `CdkStepper` | — | `'horizontal' \| 'vertical'`. |
|
|
129
|
+
| `linear` | forwarded to `CdkStepper` | — | Current step must be valid (via `stepControl`) before advancing. |
|
|
130
|
+
| `selectedIndex` | forwarded to `CdkStepper` | — | Controlled selected-step index. |
|
|
131
|
+
| `labelPosition` | `'end' \| 'bottom'` | `'end'` | Horizontal layout: label beside vs. below the indicator. |
|
|
132
|
+
| `headerPosition` | `'top' \| 'bottom'` | `'top'` | Horizontal layout: headers above vs. below the content panel. |
|
|
133
|
+
| `indicatorMode` | `'number' \| 'state' \| 'icon'` | from config (`'state'`) | Indicator rendering (see below). |
|
|
134
|
+
| `stepperAriaLabel` | `string \| null` | `'Progress'` | `aria-label` for the tablist (ignored when labelledby is set). |
|
|
135
|
+
| `stepperAriaLabelledby` | `string \| null` | `null` | `aria-labelledby` for the tablist. |
|
|
136
|
+
| `animationsEnabled` | `boolean` | from config (`true`) | Toggle step transitions per instance. |
|
|
137
|
+
| `animationDuration` | `number` (ms) | from config (`300`) | Transition duration per instance. |
|
|
137
138
|
|
|
138
139
|
`next()` is overridden to `markAllAsTouched()` + `updateValueAndValidity()` on the current `stepControl` first, so linear steppers surface validation errors before denying the transition.
|
|
139
140
|
|
|
140
141
|
### `HlmStep` — selector `hlm-step` (component, extends `CdkStep`)
|
|
141
142
|
|
|
142
|
-
| Input
|
|
143
|
-
|
|
|
144
|
-
| `label`
|
|
145
|
-
| `icon`
|
|
146
|
-
| `stepControl`
|
|
147
|
-
| `optional`
|
|
148
|
-
| `errorMessage
|
|
149
|
-
| `hasError`
|
|
143
|
+
| Input | Type | Default | Description |
|
|
144
|
+
| ----------------- | ---------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------ |
|
|
145
|
+
| `label` | forwarded to `CdkStep` | — | Step title (string, or rich template via `hlmStepLabel`). |
|
|
146
|
+
| `icon` | `string \| null` | `null` | Icon name rendered when `indicatorMode="icon"`. |
|
|
147
|
+
| `stepControl` | forwarded to `CdkStep` | — | Form group driving `linear` validation. |
|
|
148
|
+
| `optional` | forwarded to `CdkStep` | — | Shows an "Optional" caption in the header. |
|
|
149
|
+
| `errorMessage` | forwarded to `CdkStep` | — | Header error caption when the step state is `error`. |
|
|
150
|
+
| `hasError` | forwarded to `CdkStep` | — | Forces the error state (pair with `STEPPER_GLOBAL_OPTIONS` `showError`). |
|
|
151
|
+
| `tooltip` | `string \| TemplateRef<unknown> \| null` | `null` (falls back to the full string label) | Styled header tooltip override; rich templates allowed. |
|
|
152
|
+
| `tooltipPosition` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` | Tooltip side. |
|
|
153
|
+
| `tooltipDisabled` | `boolean` | `false` | Disables the header tooltip for this step. |
|
|
150
154
|
|
|
151
155
|
### `HlmStepHeader` — selector `hlm-step-header` (component, extends `CdkStepHeader`)
|
|
152
156
|
|
|
153
157
|
Usually rendered by `HlmStepper` itself; use directly only for custom layouts.
|
|
154
158
|
|
|
155
|
-
| Input
|
|
156
|
-
|
|
|
157
|
-
| `index`
|
|
158
|
-
| `state`
|
|
159
|
-
| `label`
|
|
160
|
-
| `selected` / `reached` / `active` | `boolean`
|
|
161
|
-
| `optional` / `disabled`
|
|
162
|
-
| `icon`
|
|
163
|
-
| `indicatorMode`
|
|
164
|
-
| `labelPosition`
|
|
165
|
-
| `errorMessage`
|
|
159
|
+
| Input | Type | Default | Description |
|
|
160
|
+
| --------------------------------- | -------------------------------- | ----------------------- | ------------------------------------------------------ |
|
|
161
|
+
| `index` | `number` | `0` | Step index (drives the number indicator). |
|
|
162
|
+
| `state` | `StepState` | `'number'` | CDK step state (`number`, `edit`, `done`, `error`, …). |
|
|
163
|
+
| `label` | `HlmStepLabel \| string \| null` | `null` | Resolved label content. |
|
|
164
|
+
| `selected` / `reached` / `active` | `boolean` | `false` | Visual state flags. |
|
|
165
|
+
| `optional` / `disabled` | `boolean` | `false` | Optional caption / disabled styling. |
|
|
166
|
+
| `icon` | `string \| null` | `null` | Icon name for `indicatorMode="icon"`. |
|
|
167
|
+
| `indicatorMode` | `'number' \| 'state' \| 'icon'` | from config (`'state'`) | Indicator rendering. |
|
|
168
|
+
| `labelPosition` | `'end' \| 'bottom'` | `'end'` | Label beside vs. below the indicator. |
|
|
169
|
+
| `errorMessage` | `string` | `''` | Error caption shown when `state === 'error'`. |
|
|
166
170
|
|
|
167
171
|
Indicator modes: `number` always renders `1, 2, 3`; `state` (default) renders a check icon for selected/reached steps and an alert icon for errors; `icon` renders the per-step `icon` name (provide icons via `@ng-icons/core` `provideIcons` in your app).
|
|
168
172
|
|
|
@@ -177,7 +181,9 @@ import { provideHlmStepperConfig } from '@egose/shadcn-theme-ng/stepper';
|
|
|
177
181
|
|
|
178
182
|
@Component({
|
|
179
183
|
// ...
|
|
180
|
-
providers: [
|
|
184
|
+
providers: [
|
|
185
|
+
provideHlmStepperConfig({ animationEnabled: true, animationDuration: 300, defaultIndicatorMode: 'state' }),
|
|
186
|
+
],
|
|
181
187
|
})
|
|
182
188
|
export class FeatureComponent {}
|
|
183
189
|
```
|
|
@@ -239,13 +245,14 @@ import { Component, computed, inject } from '@angular/core';
|
|
|
239
245
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
240
246
|
import { map } from 'rxjs/operators';
|
|
241
247
|
|
|
242
|
-
@Component({
|
|
248
|
+
@Component({
|
|
249
|
+
/* … */
|
|
250
|
+
})
|
|
243
251
|
export class DemoResponsive {
|
|
244
252
|
private readonly _breakpoints = inject(BreakpointObserver);
|
|
245
|
-
private readonly _isSmall = toSignal(
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
);
|
|
253
|
+
private readonly _isSmall = toSignal(this._breakpoints.observe('(max-width: 767.98px)').pipe(map((s) => s.matches)), {
|
|
254
|
+
initialValue: false,
|
|
255
|
+
});
|
|
249
256
|
protected readonly orientation = computed(() => (this._isSmall() ? 'vertical' : 'horizontal'));
|
|
250
257
|
}
|
|
251
258
|
```
|
|
@@ -262,7 +269,9 @@ With `linear`, the current step must be valid before advancing — `HlmStepper.n
|
|
|
262
269
|
import { Component, inject } from '@angular/core';
|
|
263
270
|
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
264
271
|
|
|
265
|
-
@Component({
|
|
272
|
+
@Component({
|
|
273
|
+
/* …, imports: [ReactiveFormsModule, ...HlmStepperImports, ...HlmButtonImports] */
|
|
274
|
+
})
|
|
266
275
|
export class DemoLinear {
|
|
267
276
|
private readonly _fb = inject(FormBuilder);
|
|
268
277
|
protected readonly identity = this._fb.group({ name: ['', Validators.required] });
|
|
@@ -334,6 +343,20 @@ Or set global defaults with `provideHlmStepperConfig` and override per instance.
|
|
|
334
343
|
|
|
335
344
|
Per-step `icon` names resolve through `@ng-icons/core` — register them with `provideIcons` in your app.
|
|
336
345
|
|
|
346
|
+
### 9. Header tooltips
|
|
347
|
+
|
|
348
|
+
Headers carry the styled `HlmTooltip` automatically: hovering or focusing a header shows the step's full string label (useful when labels truncate). Override per step with `tooltip` (plain text or a `TemplateRef`), adjust the side with `tooltipPosition`, or opt out with `tooltipDisabled`:
|
|
349
|
+
|
|
350
|
+
```html
|
|
351
|
+
<hlm-stepper>
|
|
352
|
+
<hlm-step label="An especially long account setup label that truncates"><!-- falls back to the label --></hlm-step>
|
|
353
|
+
<hlm-step label="Profile" tooltip="Add a photo so teammates recognize you"><!-- … --></hlm-step>
|
|
354
|
+
<hlm-step label="Review" [tooltipDisabled]="true"><!-- … --></hlm-step>
|
|
355
|
+
</hlm-stepper>
|
|
356
|
+
```
|
|
357
|
+
|
|
358
|
+
Steps using `<ng-template hlmStepLabel>` have no string to fall back to — pass `tooltip` explicitly if they need one. Custom `HlmStepHeader` layouts can apply `hlmTooltip` directly.
|
|
359
|
+
|
|
337
360
|
## Accessibility notes
|
|
338
361
|
|
|
339
362
|
- Horizontal headers get `role="tab"` semantics inside a `role="tablist"` (labelled `Progress` by default — override with `stepperAriaLabel` / `stepperAriaLabelledby`); panels get `role="tabpanel"` wired via `aria-labelledby` / `aria-controls`.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, TemplateRef, Directive, ViewContainerRef, DestroyRef, input, contentChild, effect, untracked, ChangeDetectionStrategy, Component, InjectionToken, numberAttribute,
|
|
2
|
+
import { inject, TemplateRef, Directive, ViewContainerRef, DestroyRef, input, booleanAttribute, contentChild, effect, untracked, ChangeDetectionStrategy, Component, InjectionToken, numberAttribute, computed, signal, NgModule } from '@angular/core';
|
|
3
3
|
import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
|
|
4
4
|
import * as i1 from '@angular/cdk/stepper';
|
|
5
5
|
import { CdkStepLabel, CdkStep, CdkStepHeader, CdkStepper, CdkStepperModule, CdkStepperNext, CdkStepperPrevious } from '@angular/cdk/stepper';
|
|
@@ -9,6 +9,7 @@ import { lucideCircleAlert, lucideCheck } from '@ng-icons/lucide';
|
|
|
9
9
|
import { buttonVariants } from '@egose/shadcn-theme-ng/button';
|
|
10
10
|
import { classes, hlm } from '@egose/shadcn-theme-ng/utils';
|
|
11
11
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
12
|
+
import { HlmTooltip } from '@egose/shadcn-theme-ng/tooltip';
|
|
12
13
|
import { cva } from 'class-variance-authority';
|
|
13
14
|
import { tap } from 'rxjs/operators';
|
|
14
15
|
|
|
@@ -43,6 +44,12 @@ class HlmStep extends CdkStep {
|
|
|
43
44
|
_destroyRef = inject(DestroyRef);
|
|
44
45
|
icon = input(null, /* @ts-ignore */
|
|
45
46
|
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
47
|
+
/** Styled header tooltip override. Falls back to the full string label when unset. */
|
|
48
|
+
tooltip = input(null, /* @ts-ignore */
|
|
49
|
+
...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
|
|
50
|
+
tooltipPosition = input('bottom', /* @ts-ignore */
|
|
51
|
+
...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
|
|
52
|
+
tooltipDisabled = input(false, { ...(ngDevMode ? { debugName: "tooltipDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
46
53
|
/** Content for step label given by `<ng-template hlmStepLabel>`. */
|
|
47
54
|
stepLabelContent = contentChild(HlmStepLabel, /* @ts-ignore */
|
|
48
55
|
...(ngDevMode ? [{ debugName: "stepLabelContent" }] : /* istanbul ignore next */ []));
|
|
@@ -69,7 +76,7 @@ class HlmStep extends CdkStep {
|
|
|
69
76
|
});
|
|
70
77
|
}
|
|
71
78
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
72
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmStep, isStandalone: true, selector: "hlm-step", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "hidden": "" } }, providers: [
|
|
79
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmStep, isStandalone: true, selector: "hlm-step", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "hidden": "" } }, providers: [
|
|
73
80
|
{
|
|
74
81
|
provide: CdkStep,
|
|
75
82
|
useExisting: HlmStep,
|
|
@@ -104,7 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
|
|
|
104
111
|
</ng-template>
|
|
105
112
|
`,
|
|
106
113
|
}]
|
|
107
|
-
}], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], stepLabelContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HlmStepLabel), { isSignal: true }] }], _lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HlmStepContent), { isSignal: true }] }] } });
|
|
114
|
+
}], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDisabled", required: false }] }], stepLabelContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HlmStepLabel), { isSignal: true }] }], _lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HlmStepContent), { isSignal: true }] }] } });
|
|
108
115
|
|
|
109
116
|
const defaultConfig = {
|
|
110
117
|
animationEnabled: true,
|
|
@@ -281,6 +288,23 @@ class HlmStepper extends CdkStepper {
|
|
|
281
288
|
stepIcon(step) {
|
|
282
289
|
return step instanceof HlmStep ? step.icon() : null;
|
|
283
290
|
}
|
|
291
|
+
_headerTooltip(step) {
|
|
292
|
+
const override = step instanceof HlmStep ? step.tooltip() : null;
|
|
293
|
+
if (override === null || override === undefined) {
|
|
294
|
+
return step.label || null;
|
|
295
|
+
}
|
|
296
|
+
// BrnTooltip types templates as TemplateRef<void>; any template renders the same at runtime.
|
|
297
|
+
return override;
|
|
298
|
+
}
|
|
299
|
+
_headerTooltipPosition(step) {
|
|
300
|
+
return step instanceof HlmStep ? step.tooltipPosition() : 'bottom';
|
|
301
|
+
}
|
|
302
|
+
_headerTooltipDisabled(step) {
|
|
303
|
+
if (step instanceof HlmStep && step.tooltipDisabled()) {
|
|
304
|
+
return true;
|
|
305
|
+
}
|
|
306
|
+
return !this._headerTooltip(step);
|
|
307
|
+
}
|
|
284
308
|
_enterAnimationClass() {
|
|
285
309
|
if (!this._hasSelectionChanged()) {
|
|
286
310
|
return '';
|
|
@@ -303,16 +327,16 @@ class HlmStepper extends CdkStepper {
|
|
|
303
327
|
return hlm("ms-4 overflow-hidden ps-6", showConnector && "border-s", this.animationsEnabled() && this.selectedIndex === index && stepTransition({ motion: 'enter-bottom' }));
|
|
304
328
|
}
|
|
305
329
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
306
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmStepper, isStandalone: true, selector: "hlm-stepper", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, indicatorMode: { classPropertyName: "indicatorMode", publicName: "indicatorMode", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabel: { classPropertyName: "stepperAriaLabel", publicName: "stepperAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabelledby: { classPropertyName: "stepperAriaLabelledby", publicName: "stepperAriaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, animationsEnabled: { classPropertyName: "animationsEnabled", publicName: "animationsEnabled", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkStepper, useExisting: HlmStepper }], usesInheritance: true, ngImport: i0, template: "\n @switch (orientation) {\n @case ('horizontal') {\n <div class=\"flex w-full flex-col gap-6\">\n @if (headerPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n } @else {\n <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n }\n </div>\n }\n\n @case ('vertical') {\n <div class=\"flex w-full flex-col gap-3\">\n @for (step of steps; track step; let i = $index) {\n <div class=\"flex flex-col gap-2\">\n <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n <div\n [class]=\"_gridContainerClass(selectedIndex === i)\"\n [style.transition-duration.ms]=\"animationDuration()\"\n >\n <section\n [class]=\"_verticalStepClass(!$last, i)\"\n role=\"region\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n >\n <ng-container [ngTemplateOutlet]=\"step.content\" />\n </section>\n </div>\n\n @if (!$last) {\n <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n <span [class]=\"_connectorClass(step.index())\"></span>\n </div>\n }\n </div>\n }\n </div>\n }\n }\n\n <ng-template #stepHeaderTemplate let-step=\"step\">\n <hlm-step-header\n cdkStepHeader\n class=\"min-w-0\"\n (click)=\"step.select()\"\n (keydown)=\"_onKeydown($event)\"\n [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n [id]=\"_getStepLabelId(step.index())\"\n [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n [attr.aria-controls]=\"_getStepContentId(step.index())\"\n [attr.aria-label]=\"step.ariaLabel || null\"\n [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n [index]=\"step.index()\"\n [state]=\"step.indicatorType()\"\n [label]=\"step.stepLabelContent() || step.label\"\n [selected]=\"step.isSelected()\"\n [reached]=\"step.index() < selectedIndex\"\n [active]=\"step.isNavigable()\"\n [optional]=\"step.optional\"\n [errorMessage]=\"step.errorMessage\"\n [disabled]=\"linear && !step.isNavigable()\"\n [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n [indicatorMode]=\"indicatorMode()\"\n [icon]=\"stepIcon(step)\"\n />\n </ng-template>\n\n <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n <ol\n class=\"flex w-full items-center\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n >\n @for (step of steps; track step) {\n <li class=\"flex min-w-0 items-center\">\n <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n </li>\n\n @if (!$last) {\n <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n <span\n class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n ></span>\n </span>\n </li>\n }\n }\n </ol>\n </ng-template>\n\n <ng-template #horizontalPanelTemplate>\n <div class=\"relative min-h-0 overflow-hidden\">\n @for (activeIndex of [selectedIndex]; track activeIndex) {\n <section\n role=\"tabpanel\"\n [id]=\"_getStepContentId(activeIndex)\"\n [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n [style.animation-duration.ms]=\"animationDuration()\"\n [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n >\n <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n </section>\n }\n </div>\n </ng-template>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: CdkStepperModule }, { kind: "directive", type: i1.CdkStepHeader, selector: "[cdkStepHeader]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HlmStepHeader, selector: "hlm-step-header", inputs: ["state", "label", "errorMessage", "index", "selected", "reached", "active", "optional", "disabled", "icon", "indicatorMode", "labelPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
330
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmStepper, isStandalone: true, selector: "hlm-stepper", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, indicatorMode: { classPropertyName: "indicatorMode", publicName: "indicatorMode", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabel: { classPropertyName: "stepperAriaLabel", publicName: "stepperAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabelledby: { classPropertyName: "stepperAriaLabelledby", publicName: "stepperAriaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, animationsEnabled: { classPropertyName: "animationsEnabled", publicName: "animationsEnabled", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkStepper, useExisting: HlmStepper }], usesInheritance: true, ngImport: i0, template: "\n @switch (orientation) {\n @case ('horizontal') {\n <div class=\"flex w-full flex-col gap-6\">\n @if (headerPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n } @else {\n <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n }\n </div>\n }\n\n @case ('vertical') {\n <div class=\"flex w-full flex-col gap-3\">\n @for (step of steps; track step; let i = $index) {\n <div class=\"flex flex-col gap-2\">\n <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n <div\n [class]=\"_gridContainerClass(selectedIndex === i)\"\n [style.transition-duration.ms]=\"animationDuration()\"\n >\n <section\n [class]=\"_verticalStepClass(!$last, i)\"\n role=\"region\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n >\n <ng-container [ngTemplateOutlet]=\"step.content\" />\n </section>\n </div>\n\n @if (!$last) {\n <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n <span [class]=\"_connectorClass(step.index())\"></span>\n </div>\n }\n </div>\n }\n </div>\n }\n }\n\n <ng-template #stepHeaderTemplate let-step=\"step\">\n <hlm-step-header\n cdkStepHeader\n class=\"min-w-0\"\n (click)=\"step.select()\"\n (keydown)=\"_onKeydown($event)\"\n [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n [id]=\"_getStepLabelId(step.index())\"\n [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n [attr.aria-controls]=\"_getStepContentId(step.index())\"\n [attr.aria-label]=\"step.ariaLabel || null\"\n [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n [index]=\"step.index()\"\n [state]=\"step.indicatorType()\"\n [label]=\"step.stepLabelContent() || step.label\"\n [selected]=\"step.isSelected()\"\n [reached]=\"step.index() < selectedIndex\"\n [active]=\"step.isNavigable()\"\n [optional]=\"step.optional\"\n [errorMessage]=\"step.errorMessage\"\n [disabled]=\"linear && !step.isNavigable()\"\n [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n [indicatorMode]=\"indicatorMode()\"\n [icon]=\"stepIcon(step)\"\n [hlmTooltip]=\"_headerTooltip(step)\"\n [position]=\"_headerTooltipPosition(step)\"\n [tooltipDisabled]=\"_headerTooltipDisabled(step)\"\n />\n </ng-template>\n\n <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n <ol\n class=\"flex w-full items-center\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n >\n @for (step of steps; track step) {\n <li class=\"flex min-w-0 items-center\">\n <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n </li>\n\n @if (!$last) {\n <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n <span\n class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n ></span>\n </span>\n </li>\n }\n }\n </ol>\n </ng-template>\n\n <ng-template #horizontalPanelTemplate>\n <div class=\"relative min-h-0 overflow-hidden\">\n @for (activeIndex of [selectedIndex]; track activeIndex) {\n <section\n role=\"tabpanel\"\n [id]=\"_getStepContentId(activeIndex)\"\n [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n [style.animation-duration.ms]=\"animationDuration()\"\n [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n >\n <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n </section>\n }\n </div>\n </ng-template>\n ", isInline: true, dependencies: [{ kind: "ngmodule", type: CdkStepperModule }, { kind: "directive", type: i1.CdkStepHeader, selector: "[cdkStepHeader]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HlmStepHeader, selector: "hlm-step-header", inputs: ["state", "label", "errorMessage", "index", "selected", "reached", "active", "optional", "disabled", "icon", "indicatorMode", "labelPosition"] }, { kind: "directive", type: HlmTooltip, selector: "[hlmTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
307
331
|
}
|
|
308
332
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepper, decorators: [{
|
|
309
333
|
type: Component,
|
|
310
334
|
args: [{
|
|
311
335
|
selector: 'hlm-stepper',
|
|
312
|
-
imports: [CdkStepperModule, NgTemplateOutlet, HlmStepHeader],
|
|
336
|
+
imports: [CdkStepperModule, NgTemplateOutlet, HlmStepHeader, HlmTooltip],
|
|
313
337
|
providers: [{ provide: CdkStepper, useExisting: HlmStepper }],
|
|
314
338
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
315
|
-
template: "\n @switch (orientation) {\n @case ('horizontal') {\n <div class=\"flex w-full flex-col gap-6\">\n @if (headerPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n } @else {\n <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n }\n </div>\n }\n\n @case ('vertical') {\n <div class=\"flex w-full flex-col gap-3\">\n @for (step of steps; track step; let i = $index) {\n <div class=\"flex flex-col gap-2\">\n <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n <div\n [class]=\"_gridContainerClass(selectedIndex === i)\"\n [style.transition-duration.ms]=\"animationDuration()\"\n >\n <section\n [class]=\"_verticalStepClass(!$last, i)\"\n role=\"region\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n >\n <ng-container [ngTemplateOutlet]=\"step.content\" />\n </section>\n </div>\n\n @if (!$last) {\n <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n <span [class]=\"_connectorClass(step.index())\"></span>\n </div>\n }\n </div>\n }\n </div>\n }\n }\n\n <ng-template #stepHeaderTemplate let-step=\"step\">\n <hlm-step-header\n cdkStepHeader\n class=\"min-w-0\"\n (click)=\"step.select()\"\n (keydown)=\"_onKeydown($event)\"\n [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n [id]=\"_getStepLabelId(step.index())\"\n [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n [attr.aria-controls]=\"_getStepContentId(step.index())\"\n [attr.aria-label]=\"step.ariaLabel || null\"\n [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n [index]=\"step.index()\"\n [state]=\"step.indicatorType()\"\n [label]=\"step.stepLabelContent() || step.label\"\n [selected]=\"step.isSelected()\"\n [reached]=\"step.index() < selectedIndex\"\n [active]=\"step.isNavigable()\"\n [optional]=\"step.optional\"\n [errorMessage]=\"step.errorMessage\"\n [disabled]=\"linear && !step.isNavigable()\"\n [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n [indicatorMode]=\"indicatorMode()\"\n [icon]=\"stepIcon(step)\"\n />\n </ng-template>\n\n <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n <ol\n class=\"flex w-full items-center\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n >\n @for (step of steps; track step) {\n <li class=\"flex min-w-0 items-center\">\n <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n </li>\n\n @if (!$last) {\n <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n <span\n class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n ></span>\n </span>\n </li>\n }\n }\n </ol>\n </ng-template>\n\n <ng-template #horizontalPanelTemplate>\n <div class=\"relative min-h-0 overflow-hidden\">\n @for (activeIndex of [selectedIndex]; track activeIndex) {\n <section\n role=\"tabpanel\"\n [id]=\"_getStepContentId(activeIndex)\"\n [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n [style.animation-duration.ms]=\"animationDuration()\"\n [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n >\n <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n </section>\n }\n </div>\n </ng-template>\n ",
|
|
339
|
+
template: "\n @switch (orientation) {\n @case ('horizontal') {\n <div class=\"flex w-full flex-col gap-6\">\n @if (headerPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n } @else {\n <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n }\n </div>\n }\n\n @case ('vertical') {\n <div class=\"flex w-full flex-col gap-3\">\n @for (step of steps; track step; let i = $index) {\n <div class=\"flex flex-col gap-2\">\n <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n <div\n [class]=\"_gridContainerClass(selectedIndex === i)\"\n [style.transition-duration.ms]=\"animationDuration()\"\n >\n <section\n [class]=\"_verticalStepClass(!$last, i)\"\n role=\"region\"\n [id]=\"_getStepContentId(i)\"\n [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n >\n <ng-container [ngTemplateOutlet]=\"step.content\" />\n </section>\n </div>\n\n @if (!$last) {\n <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n <span [class]=\"_connectorClass(step.index())\"></span>\n </div>\n }\n </div>\n }\n </div>\n }\n }\n\n <ng-template #stepHeaderTemplate let-step=\"step\">\n <hlm-step-header\n cdkStepHeader\n class=\"min-w-0\"\n (click)=\"step.select()\"\n (keydown)=\"_onKeydown($event)\"\n [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n [id]=\"_getStepLabelId(step.index())\"\n [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n [attr.aria-controls]=\"_getStepContentId(step.index())\"\n [attr.aria-label]=\"step.ariaLabel || null\"\n [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n [index]=\"step.index()\"\n [state]=\"step.indicatorType()\"\n [label]=\"step.stepLabelContent() || step.label\"\n [selected]=\"step.isSelected()\"\n [reached]=\"step.index() < selectedIndex\"\n [active]=\"step.isNavigable()\"\n [optional]=\"step.optional\"\n [errorMessage]=\"step.errorMessage\"\n [disabled]=\"linear && !step.isNavigable()\"\n [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n [indicatorMode]=\"indicatorMode()\"\n [icon]=\"stepIcon(step)\"\n [hlmTooltip]=\"_headerTooltip(step)\"\n [position]=\"_headerTooltipPosition(step)\"\n [tooltipDisabled]=\"_headerTooltipDisabled(step)\"\n />\n </ng-template>\n\n <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n <ol\n class=\"flex w-full items-center\"\n role=\"tablist\"\n aria-orientation=\"horizontal\"\n [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n >\n @for (step of steps; track step) {\n <li class=\"flex min-w-0 items-center\">\n <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n </li>\n\n @if (!$last) {\n <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n <span\n class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n ></span>\n </span>\n </li>\n }\n }\n </ol>\n </ng-template>\n\n <ng-template #horizontalPanelTemplate>\n <div class=\"relative min-h-0 overflow-hidden\">\n @for (activeIndex of [selectedIndex]; track activeIndex) {\n <section\n role=\"tabpanel\"\n [id]=\"_getStepContentId(activeIndex)\"\n [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n [style.animation-duration.ms]=\"animationDuration()\"\n [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n >\n <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n </section>\n }\n </div>\n </ng-template>\n ",
|
|
316
340
|
}]
|
|
317
341
|
}], ctorParameters: () => [], propDecorators: { labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], indicatorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorMode", required: false }] }], stepperAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperAriaLabel", required: false }] }], stepperAriaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperAriaLabelledby", required: false }] }], animationsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationsEnabled", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }] } });
|
|
318
342
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { ValueProvider, TemplateRef } from '@angular/core';
|
|
3
3
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
4
4
|
import { CdkStepLabel, CdkStep, CdkStepHeader, CdkStepper, CdkStepperNext, CdkStepperPrevious } from '@angular/cdk/stepper';
|
|
5
5
|
|
|
@@ -8,10 +8,26 @@ declare class HlmStepLabel extends CdkStepLabel {
|
|
|
8
8
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmStepLabel, "[hlmStepLabel]", never, {}, {}, never, never, true, never>;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
type HlmStepperLabelPosition = 'end' | 'bottom';
|
|
12
|
+
type HlmStepperHeaderPosition = 'top' | 'bottom';
|
|
13
|
+
type HlmStepperIndicatorMode = 'number' | 'state' | 'icon';
|
|
14
|
+
type HlmStepTooltipPosition = 'top' | 'right' | 'bottom' | 'left';
|
|
15
|
+
interface HlmStepperConfig {
|
|
16
|
+
animationEnabled: boolean;
|
|
17
|
+
animationDuration: number;
|
|
18
|
+
defaultIndicatorMode: HlmStepperIndicatorMode;
|
|
19
|
+
}
|
|
20
|
+
declare function provideHlmStepperConfig(config: Partial<HlmStepperConfig>): ValueProvider;
|
|
21
|
+
declare function injectHlmStepperConfig(): HlmStepperConfig;
|
|
22
|
+
|
|
11
23
|
declare class HlmStep extends CdkStep {
|
|
12
24
|
private readonly _viewContainerRef;
|
|
13
25
|
private readonly _destroyRef;
|
|
14
26
|
readonly icon: _angular_core.InputSignal<string | null>;
|
|
27
|
+
/** Styled header tooltip override. Falls back to the full string label when unset. */
|
|
28
|
+
readonly tooltip: _angular_core.InputSignal<string | TemplateRef<unknown> | null>;
|
|
29
|
+
readonly tooltipPosition: _angular_core.InputSignal<HlmStepTooltipPosition>;
|
|
30
|
+
readonly tooltipDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
15
31
|
/** Content for step label given by `<ng-template hlmStepLabel>`. */
|
|
16
32
|
readonly stepLabelContent: _angular_core.Signal<HlmStepLabel | undefined>;
|
|
17
33
|
/** Content that will be rendered lazily. */
|
|
@@ -20,7 +36,7 @@ declare class HlmStep extends CdkStep {
|
|
|
20
36
|
portal: TemplatePortal<unknown> | null;
|
|
21
37
|
constructor();
|
|
22
38
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmStep, never>;
|
|
23
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmStep, "hlm-step", ["hlmStep"], { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, ["stepLabelContent", "_lazyContent"], ["*"], true, never>;
|
|
39
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmStep, "hlm-step", ["hlmStep"], { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltipDisabled": { "alias": "tooltipDisabled"; "required": false; "isSignal": true; }; }, {}, ["stepLabelContent", "_lazyContent"], ["*"], true, never>;
|
|
24
40
|
}
|
|
25
41
|
|
|
26
42
|
/**
|
|
@@ -32,17 +48,6 @@ declare class HlmStepContent<C> {
|
|
|
32
48
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmStepContent<any>, "ng-template[hlmStepContent]", never, {}, {}, never, never, true, never>;
|
|
33
49
|
}
|
|
34
50
|
|
|
35
|
-
type HlmStepperLabelPosition = 'end' | 'bottom';
|
|
36
|
-
type HlmStepperHeaderPosition = 'top' | 'bottom';
|
|
37
|
-
type HlmStepperIndicatorMode = 'number' | 'state' | 'icon';
|
|
38
|
-
interface HlmStepperConfig {
|
|
39
|
-
animationEnabled: boolean;
|
|
40
|
-
animationDuration: number;
|
|
41
|
-
defaultIndicatorMode: HlmStepperIndicatorMode;
|
|
42
|
-
}
|
|
43
|
-
declare function provideHlmStepperConfig(config: Partial<HlmStepperConfig>): ValueProvider;
|
|
44
|
-
declare function injectHlmStepperConfig(): HlmStepperConfig;
|
|
45
|
-
|
|
46
51
|
declare class HlmStepHeader extends CdkStepHeader {
|
|
47
52
|
private readonly _config;
|
|
48
53
|
readonly state: _angular_core.InputSignal<string>;
|
|
@@ -84,6 +89,9 @@ declare class HlmStepper extends CdkStepper {
|
|
|
84
89
|
constructor();
|
|
85
90
|
next(): void;
|
|
86
91
|
protected stepIcon(step: CdkStep): string | null;
|
|
92
|
+
protected _headerTooltip(step: CdkStep): string | TemplateRef<void> | null;
|
|
93
|
+
protected _headerTooltipPosition(step: CdkStep): HlmStepTooltipPosition;
|
|
94
|
+
protected _headerTooltipDisabled(step: CdkStep): boolean;
|
|
87
95
|
protected _enterAnimationClass(): string;
|
|
88
96
|
protected _leaveAnimationClass(): string;
|
|
89
97
|
protected _gridContainerClass(expanded: boolean): string;
|
|
@@ -113,4 +121,4 @@ declare class HlmStepperModule {
|
|
|
113
121
|
}
|
|
114
122
|
|
|
115
123
|
export { HlmStep, HlmStepContent, HlmStepHeader, HlmStepLabel, HlmStepper, HlmStepperImports, HlmStepperModule, HlmStepperNext, HlmStepperPrevious, injectHlmStepperConfig, provideHlmStepperConfig };
|
|
116
|
-
export type { HlmStepperConfig, HlmStepperHeaderPosition, HlmStepperIndicatorMode, HlmStepperLabelPosition };
|
|
124
|
+
export type { HlmStepTooltipPosition, HlmStepperConfig, HlmStepperHeaderPosition, HlmStepperIndicatorMode, HlmStepperLabelPosition };
|