@breadstone/mosaik-elements-foundation 0.1.8 → 0.1.10

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.
Files changed (89) hide show
  1. package/Controls/Components/Inputs/Scheduler/views/Themes/SchedulerAgendaViewElement.Joy.js +1 -1
  2. package/Controls/Components/Inputs/Scheduler/views/Themes/SchedulerMonthViewElement.Joy.js +1 -1
  3. package/Controls/Components/Inputs/Scheduler/views/Themes/SchedulerTimeGridViewElement.Joy.js +1 -1
  4. package/Controls/Components/Selectors/Stepper/StepperElement.d.ts +26 -7
  5. package/Controls/Components/Selectors/Stepper/StepperElement.d.ts.map +1 -1
  6. package/Controls/Components/Selectors/Stepper/StepperElement.js +58 -17
  7. package/Controls/Components/Selectors/Stepper/StepperElement.js.map +1 -1
  8. package/Controls/Components/Selectors/Stepper/StepperElementTemplate.d.ts.map +1 -1
  9. package/Controls/Components/Selectors/Stepper/StepperElementTemplate.js +59 -36
  10. package/Controls/Components/Selectors/Stepper/StepperElementTemplate.js.map +1 -1
  11. package/Controls/Components/Selectors/Stepper/StepperSlot.d.ts +2 -0
  12. package/Controls/Components/Selectors/Stepper/StepperSlot.d.ts.map +1 -0
  13. package/Controls/Components/Selectors/Stepper/StepperSlot.js +11 -0
  14. package/Controls/Components/Selectors/Stepper/StepperSlot.js.map +1 -0
  15. package/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.d.ts.map +1 -1
  16. package/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.js +31 -4
  17. package/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.js.map +1 -1
  18. package/Controls/Components/Selectors/Stepper/Themes/StepperElement.Joy.d.ts.map +1 -1
  19. package/Controls/Components/Selectors/Stepper/Themes/StepperElement.Joy.js +37 -10
  20. package/Controls/Components/Selectors/Stepper/Themes/StepperElement.Joy.js.map +1 -1
  21. package/Controls/Components/Selectors/Stepper/Themes/StepperElement.Memphis.d.ts.map +1 -1
  22. package/Controls/Components/Selectors/Stepper/Themes/StepperElement.Memphis.js +31 -4
  23. package/Controls/Components/Selectors/Stepper/Themes/StepperElement.Memphis.js.map +1 -1
  24. package/Controls/Components/States/Busy/BusyStateElement.d.ts +6 -3
  25. package/Controls/Components/States/Busy/BusyStateElement.d.ts.map +1 -1
  26. package/Controls/Components/States/Busy/BusyStateElement.js +5 -2
  27. package/Controls/Components/States/Busy/BusyStateElement.js.map +1 -1
  28. package/Controls/Components/States/Busy/BusyStateElementTemplate.d.ts.map +1 -1
  29. package/Controls/Components/States/Busy/BusyStateElementTemplate.js +20 -16
  30. package/Controls/Components/States/Busy/BusyStateElementTemplate.js.map +1 -1
  31. package/Controls/Components/States/Busy/Themes/BusyStateElement.Cosmopolitan.d.ts.map +1 -1
  32. package/Controls/Components/States/Busy/Themes/BusyStateElement.Cosmopolitan.js +22 -2
  33. package/Controls/Components/States/Busy/Themes/BusyStateElement.Cosmopolitan.js.map +1 -1
  34. package/Controls/Components/States/Busy/Themes/BusyStateElement.Joy.d.ts.map +1 -1
  35. package/Controls/Components/States/Busy/Themes/BusyStateElement.Joy.js +24 -4
  36. package/Controls/Components/States/Busy/Themes/BusyStateElement.Joy.js.map +1 -1
  37. package/Controls/Components/States/Busy/Themes/BusyStateElement.Memphis.d.ts.map +1 -1
  38. package/Controls/Components/States/Busy/Themes/BusyStateElement.Memphis.js +24 -4
  39. package/Controls/Components/States/Busy/Themes/BusyStateElement.Memphis.js.map +1 -1
  40. package/Controls/Components/States/Empty/EmptyStateElement.d.ts +17 -3
  41. package/Controls/Components/States/Empty/EmptyStateElement.d.ts.map +1 -1
  42. package/Controls/Components/States/Empty/EmptyStateElement.js +29 -2
  43. package/Controls/Components/States/Empty/EmptyStateElement.js.map +1 -1
  44. package/Controls/Components/States/Empty/EmptyStateElementTemplate.d.ts.map +1 -1
  45. package/Controls/Components/States/Empty/EmptyStateElementTemplate.js +21 -17
  46. package/Controls/Components/States/Empty/EmptyStateElementTemplate.js.map +1 -1
  47. package/Controls/Components/States/Empty/Themes/EmptyStateElement.Cosmopolitan.d.ts.map +1 -1
  48. package/Controls/Components/States/Empty/Themes/EmptyStateElement.Cosmopolitan.js +22 -2
  49. package/Controls/Components/States/Empty/Themes/EmptyStateElement.Cosmopolitan.js.map +1 -1
  50. package/Controls/Components/States/Empty/Themes/EmptyStateElement.Joy.d.ts.map +1 -1
  51. package/Controls/Components/States/Empty/Themes/EmptyStateElement.Joy.js +24 -4
  52. package/Controls/Components/States/Empty/Themes/EmptyStateElement.Joy.js.map +1 -1
  53. package/Controls/Components/States/Empty/Themes/EmptyStateElement.Memphis.d.ts.map +1 -1
  54. package/Controls/Components/States/Empty/Themes/EmptyStateElement.Memphis.js +24 -4
  55. package/Controls/Components/States/Empty/Themes/EmptyStateElement.Memphis.js.map +1 -1
  56. package/Controls/Components/States/Error/ErrorStateElement.d.ts +6 -4
  57. package/Controls/Components/States/Error/ErrorStateElement.d.ts.map +1 -1
  58. package/Controls/Components/States/Error/ErrorStateElement.js +5 -3
  59. package/Controls/Components/States/Error/ErrorStateElement.js.map +1 -1
  60. package/Controls/Components/States/Error/ErrorStateElementTemplate.d.ts.map +1 -1
  61. package/Controls/Components/States/Error/ErrorStateElementTemplate.js +20 -16
  62. package/Controls/Components/States/Error/ErrorStateElementTemplate.js.map +1 -1
  63. package/Controls/Components/States/Error/Themes/ErrorStateElement.Cosmopolitan.d.ts.map +1 -1
  64. package/Controls/Components/States/Error/Themes/ErrorStateElement.Cosmopolitan.js +22 -2
  65. package/Controls/Components/States/Error/Themes/ErrorStateElement.Cosmopolitan.js.map +1 -1
  66. package/Controls/Components/States/Error/Themes/ErrorStateElement.Joy.d.ts.map +1 -1
  67. package/Controls/Components/States/Error/Themes/ErrorStateElement.Joy.js +24 -4
  68. package/Controls/Components/States/Error/Themes/ErrorStateElement.Joy.js.map +1 -1
  69. package/Controls/Components/States/Error/Themes/ErrorStateElement.Memphis.d.ts.map +1 -1
  70. package/Controls/Components/States/Error/Themes/ErrorStateElement.Memphis.js +24 -4
  71. package/Controls/Components/States/Error/Themes/ErrorStateElement.Memphis.js.map +1 -1
  72. package/Controls/Components/States/Success/SuccessStateElement.d.ts +6 -4
  73. package/Controls/Components/States/Success/SuccessStateElement.d.ts.map +1 -1
  74. package/Controls/Components/States/Success/SuccessStateElement.js +5 -3
  75. package/Controls/Components/States/Success/SuccessStateElement.js.map +1 -1
  76. package/Controls/Components/States/Success/SuccessStateElementTemplate.d.ts.map +1 -1
  77. package/Controls/Components/States/Success/SuccessStateElementTemplate.js +20 -16
  78. package/Controls/Components/States/Success/SuccessStateElementTemplate.js.map +1 -1
  79. package/Controls/Components/States/Success/Themes/SuccessStateElement.Cosmopolitan.d.ts.map +1 -1
  80. package/Controls/Components/States/Success/Themes/SuccessStateElement.Cosmopolitan.js +22 -2
  81. package/Controls/Components/States/Success/Themes/SuccessStateElement.Cosmopolitan.js.map +1 -1
  82. package/Controls/Components/States/Success/Themes/SuccessStateElement.Joy.d.ts.map +1 -1
  83. package/Controls/Components/States/Success/Themes/SuccessStateElement.Joy.js +24 -4
  84. package/Controls/Components/States/Success/Themes/SuccessStateElement.Joy.js.map +1 -1
  85. package/Controls/Components/States/Success/Themes/SuccessStateElement.Memphis.d.ts.map +1 -1
  86. package/Controls/Components/States/Success/Themes/SuccessStateElement.Memphis.js +24 -4
  87. package/Controls/Components/States/Success/Themes/SuccessStateElement.Memphis.js.map +1 -1
  88. package/custom-elements.json +61 -36
  89. package/package.json +3 -3
@@ -16,7 +16,7 @@ export function schedulerAgendaViewElementJoyStyle() {
16
16
  --scheduler-agenda-view-background-color: var(--joy-scheme-background);
17
17
  --scheduler-agenda-view-border-color: var(--joy-scheme-highlight);
18
18
  --scheduler-agenda-view-border-radius: var(--joy-layout-radius);
19
- --scheduler-agenda-view-border-style: solid;
19
+ --scheduler-agenda-view-border-style: none;
20
20
  --scheduler-agenda-view-border-width: var(--joy-layout-thickness);
21
21
  --scheduler-agenda-view-day-header-font-size: var(--joy-typography-headline6-font-size);
22
22
  --scheduler-agenda-view-day-header-font-weight: var(--joy-typography-headline6-font-weight);
@@ -16,7 +16,7 @@ export function schedulerMonthViewElementJoyStyle() {
16
16
  --scheduler-month-view-background-color: var(--joy-scheme-background);
17
17
  --scheduler-month-view-border-color: var(--joy-scheme-highlight);
18
18
  --scheduler-month-view-border-radius: var(--joy-layout-radius);
19
- --scheduler-month-view-border-style: solid;
19
+ --scheduler-month-view-border-style: none;
20
20
  --scheduler-month-view-border-width: var(--joy-layout-thickness);
21
21
  --scheduler-month-view-cell-min-height: 100px;
22
22
  --scheduler-month-view-day-number-font-size: var(--joy-typography-body2-font-size);
@@ -16,7 +16,7 @@ export function schedulerTimeGridViewElementJoyStyle() {
16
16
  --scheduler-time-grid-view-background-color: var(--joy-scheme-background);
17
17
  --scheduler-time-grid-view-border-color: var(--joy-scheme-highlight);
18
18
  --scheduler-time-grid-view-border-radius: var(--joy-layout-radius);
19
- --scheduler-time-grid-view-border-style: solid;
19
+ --scheduler-time-grid-view-border-style: none;
20
20
  --scheduler-time-grid-view-border-width: var(--joy-layout-thickness);
21
21
  --scheduler-time-grid-view-cell-border-color: var(--joy-scheme-highlight);
22
22
  --scheduler-time-grid-view-cell-border-radius: var(--joy-layout-radius);
@@ -21,14 +21,16 @@ declare const StepperElement_base: (abstract new (...args: Array<any>) => import
21
21
  * @element mosaik-stepper
22
22
  * @category Selectors
23
23
  *
24
+ * @slot ${`step-${index}`} - The ${`step-${index}`} slot.
24
25
  * @slot footer - Custom footer content below the stepper content
25
26
  * @slot steps - The stepper item elements (mosaik-stepper-item)
26
27
  *
27
28
  * @csspart connector - The line connecting steps
28
- * @csspart content - The main content area for active step
29
+ * @csspart content - The content part.
29
30
  * @csspart footer - The footer container
30
31
  * @csspart header - The header container with step indicators
31
- * @csspart step - The clickable step button
32
+ * @csspart content - The main content area for active step
33
+ * @csspart step-body - The vertical step body containing connector and step content
32
34
  * @csspart step-container - Individual step header container
33
35
  * @csspart step-description - The step description text
34
36
  * @csspart step-header - The step header text
@@ -183,19 +185,26 @@ export declare class StepperElement extends StepperElement_base implements IStep
183
185
  */
184
186
  onSlotChange(): void;
185
187
  /**
186
- * Ensures that at least one step is active.
187
- * If no step is active, the first step will be selected.
188
+ * Handles slotted item changes from the Slottable behavior.
188
189
  *
189
- * @protected
190
+ * @public
191
+ * @override
190
192
  */
191
- protected ensureActiveStep(): void;
193
+ onSlotChanges(slotName?: string): void;
192
194
  /**
193
195
  * Handles a step invocation from the header.
194
196
  *
195
- * @public
197
+ * @private
196
198
  * @param step - The step that has been invoked.
197
199
  */
198
200
  onStepInvoked(step: StepperItemElement): void;
201
+ /**
202
+ * Ensures that at least one step is active.
203
+ * If no step is active, the first step will be selected.
204
+ *
205
+ * @protected
206
+ */
207
+ protected ensureActiveStep(): void;
199
208
  /**
200
209
  * @protected
201
210
  * @override
@@ -211,6 +220,16 @@ export declare class StepperElement extends StepperElement_base implements IStep
211
220
  * @protected
212
221
  */
213
222
  protected onSelectedIndexPropertyChanged(_prev: number, next: number): void;
223
+ /**
224
+ * @protected
225
+ */
226
+ protected onOrientationPropertyChanged(): void;
227
+ /**
228
+ * Assigns step items to the collector slot in horizontal mode and to per-step slots in vertical mode.
229
+ *
230
+ * @private
231
+ */
232
+ private syncStepSlots;
214
233
  }
215
234
  /**
216
235
  * @public
@@ -1 +1 @@
1
- {"version":3,"file":"StepperElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAA2B,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAMrF,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAKrE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,iBAAiB,CAAC;AAIrE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAO1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqHG;AACH,qBAuBa,cACT,SAAQ,mBACR,YAAW,oBAAoB,EAAE,UAAU;IAI3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAKvB;IACH,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAA+C;IAMlF;;OAEG;;IAWH;;;;;;;OAOG;IAGH,WAA2B,EAAE,IAAI,MAAM,CAEtC;IAED;;;;;;OAMG;IACH,IAAoB,KAAK,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAErD;IAED;;;;;OAKG;IACH,IAAW,WAAW,IAAI,MAAM,CAE/B;IAED;;;;;OAKG;IACH,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED;;;;;OAKG;IACH,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED;;;;;;;OAOG;IACH,IACW,iBAAiB,IAAI,aAAa,CAAC,6BAA6B,CAAC,CAE3E;IAMD;;;OAGG;IACI,YAAY,IAAI,IAAI;IAK3B;;;;;OAKG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAclC;;;;;OAKG;IACI,aAAa,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI;IAWpD;;;OAGG;cACgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAsB/E;;;;OAIG;IACH,SAAS,CAAC,mBAAmB,CAAC,IAAI,EAAE,6BAA6B,GAAG,IAAI;IAIxE;;OAEG;IAEH,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAa9E;AAED;;GAEG;AACH,yBAAiB,cAAc,CAAC;IAC5B,KAAY,KAAK,GAAG,oBAAoB,CAAC;CAC5C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,gBAAgB,EAAE,cAAc,CAAC;KACpC;CACJ"}
1
+ {"version":3,"file":"StepperElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElement.ts"],"names":[],"mappings":"AAEA,OAAO,EAA2B,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAKrF,OAAO,EAAE,UAAU,EAAa,MAAM,8BAA8B,CAAC;AAKrE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,iBAAiB,CAAC;AAIrE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAO1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuHG;AACH,qBAuBa,cACT,SAAQ,mBACR,YAAW,oBAAoB,EAAE,UAAU;IAI3C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAKvB;IACH,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAA+C;IAMlF;;OAEG;;IAWH;;;;;;;OAOG;IAGH,WAA2B,EAAE,IAAI,MAAM,CAEtC;IAED;;;;;;OAMG;IACH,IAAoB,KAAK,IAAI,KAAK,CAAC,kBAAkB,CAAC,CAGrD;IAED;;;;;OAKG;IACH,IAAW,WAAW,IAAI,MAAM,CAE/B;IAED;;;;;OAKG;IACH,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED;;;;;OAKG;IACH,IAAW,UAAU,IAAI,OAAO,CAE/B;IAED;;;;;;;OAOG;IACH,IACW,iBAAiB,IAAI,aAAa,CAAC,6BAA6B,CAAC,CAE3E;IAMD;;;OAGG;IACI,YAAY,IAAI,IAAI;IAM3B;;;;;OAKG;IACa,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;IAKtD;;;;;OAKG;IACI,aAAa,CAAC,IAAI,EAAE,kBAAkB,GAAG,IAAI;IAWpD;;;;;OAKG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAclC;;;OAGG;cACgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAsB/E;;;;OAIG;IACH,SAAS,CAAC,mBAAmB,CAAC,IAAI,EAAE,6BAA6B,GAAG,IAAI;IAIxE;;OAEG;IAEH,SAAS,CAAC,8BAA8B,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;IAW3E;;OAEG;IAEH,SAAS,CAAC,4BAA4B,IAAI,IAAI;IAK9C;;;;OAIG;IACH,OAAO,CAAC,aAAa;CAcxB;AAED;;GAEG;AACH,yBAAiB,cAAc,CAAC;IAC5B,KAAY,KAAK,GAAG,oBAAoB,CAAC;CAC5C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,gBAAgB,EAAE,cAAc,CAAC;KACpC;CACJ"}
@@ -9,7 +9,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
9
9
  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
10
10
  };
11
11
  import { HTMLElementEventEmitter } from '@breadstone/mosaik-elements';
12
- import { getSlotElements } from '../../../../Dom/Slot';
13
12
  import { Emit } from '../../../../events/Decorators/EmitDecorator';
14
13
  import { Disableable } from '../../../Behaviors/Disableable';
15
14
  import { Fitable } from '../../../Behaviors/Fitable';
@@ -46,14 +45,16 @@ import { stepperElementMemphisStyle } from './Themes/StepperElement.Memphis';
46
45
  * @element mosaik-stepper
47
46
  * @category Selectors
48
47
  *
48
+ * @slot ${`step-${index}`} - The ${`step-${index}`} slot.
49
49
  * @slot footer - Custom footer content below the stepper content
50
50
  * @slot steps - The stepper item elements (mosaik-stepper-item)
51
51
  *
52
52
  * @csspart connector - The line connecting steps
53
- * @csspart content - The main content area for active step
53
+ * @csspart content - The content part.
54
54
  * @csspart footer - The footer container
55
55
  * @csspart header - The header container with step indicators
56
- * @csspart step - The clickable step button
56
+ * @csspart content - The main content area for active step
57
+ * @csspart step-body - The vertical step body containing connector and step content
57
58
  * @csspart step-container - Individual step header container
58
59
  * @csspart step-description - The step description text
59
60
  * @csspart step-header - The step header text
@@ -189,7 +190,8 @@ let StepperElement = class StepperElement extends Themeable(Slottable(Fitable(Di
189
190
  * @readonly
190
191
  */
191
192
  get items() {
192
- return getSlotElements(this.shadowRoot, 'steps');
193
+ return Array.from(this.children)
194
+ .filter((child) => child.tagName.toLowerCase() === StepperItemElement.is);
193
195
  }
194
196
  /**
195
197
  * Gets the active index of the stepper.
@@ -236,29 +238,24 @@ let StepperElement = class StepperElement extends Themeable(Slottable(Fitable(Di
236
238
  * @template
237
239
  */
238
240
  onSlotChange() {
241
+ this.syncStepSlots();
239
242
  this.requestUpdate('items');
240
243
  this.ensureActiveStep();
241
244
  }
242
245
  /**
243
- * Ensures that at least one step is active.
244
- * If no step is active, the first step will be selected.
246
+ * Handles slotted item changes from the Slottable behavior.
245
247
  *
246
- * @protected
248
+ * @public
249
+ * @override
247
250
  */
248
- ensureActiveStep() {
249
- const { items } = this;
250
- if (items.length === 0) {
251
- return;
252
- }
253
- const hasActiveStep = items.some((x) => x.isActive);
254
- if (!hasActiveStep) {
255
- this.select(0);
256
- }
251
+ onSlotChanges(slotName) {
252
+ super.onSlotChanges(slotName);
253
+ this.onSlotChange();
257
254
  }
258
255
  /**
259
256
  * Handles a step invocation from the header.
260
257
  *
261
- * @public
258
+ * @private
262
259
  * @param step - The step that has been invoked.
263
260
  */
264
261
  onStepInvoked(step) {
@@ -270,6 +267,22 @@ let StepperElement = class StepperElement extends Themeable(Slottable(Fitable(Di
270
267
  this.select(index);
271
268
  }
272
269
  }
270
+ /**
271
+ * Ensures that at least one step is active.
272
+ * If no step is active, the first step will be selected.
273
+ *
274
+ * @protected
275
+ */
276
+ ensureActiveStep() {
277
+ const { items } = this;
278
+ if (items.length === 0) {
279
+ return;
280
+ }
281
+ const hasActiveStep = items.some((x) => x.isActive);
282
+ if (!hasActiveStep) {
283
+ this.select(0);
284
+ }
285
+ }
273
286
  /**
274
287
  * @protected
275
288
  * @override
@@ -312,6 +325,28 @@ let StepperElement = class StepperElement extends Themeable(Slottable(Fitable(Di
312
325
  item.isActive = i === next;
313
326
  }
314
327
  }
328
+ /**
329
+ * @protected
330
+ */
331
+ onOrientationPropertyChanged() {
332
+ this.syncStepSlots();
333
+ this.requestUpdate('items');
334
+ }
335
+ /**
336
+ * Assigns step items to the collector slot in horizontal mode and to per-step slots in vertical mode.
337
+ *
338
+ * @private
339
+ */
340
+ syncStepSlots() {
341
+ this.items.forEach((item, index) => {
342
+ const slotName = this.orientation === 'vertical'
343
+ ? `step-${index}`
344
+ : 'steps';
345
+ if (item.slot !== slotName) {
346
+ item.slot = slotName;
347
+ }
348
+ });
349
+ }
315
350
  };
316
351
  __decorate([
317
352
  Emit({ eventName: 'activeStepChanged' }),
@@ -324,6 +359,12 @@ __decorate([
324
359
  __metadata("design:paramtypes", [Number, Number]),
325
360
  __metadata("design:returntype", void 0)
326
361
  ], StepperElement.prototype, "onSelectedIndexPropertyChanged", null);
362
+ __decorate([
363
+ Watch('orientation'),
364
+ __metadata("design:type", Function),
365
+ __metadata("design:paramtypes", []),
366
+ __metadata("design:returntype", void 0)
367
+ ], StepperElement.prototype, "onOrientationPropertyChanged", null);
327
368
  StepperElement = __decorate([
328
369
  Component({
329
370
  selector: 'mosaik-stepper',
@@ -1 +1 @@
1
- {"version":3,"file":"StepperElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElement.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"StepperElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElement.ts"],"names":[],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"StepperElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAMjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIvD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CA8ErF"}
1
+ {"version":3,"file":"StepperElementTemplate.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElementTemplate.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAOjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAKvD;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,CAAC,SAAS,cAAc,EAAE,CAAC,EAAE,CAAC,GAAG,cAAc,CAqGrF"}
@@ -3,6 +3,7 @@ import { html } from '../../../../Dom/Html';
3
3
  import { Icons } from '../../../../Resources/Icons';
4
4
  import { classMap, repeat, when } from '../../../Directives/Directives';
5
5
  import { setEmpty } from '../../../Directives/SetEmpty';
6
+ import { Orientation } from '../../../Types/Orientation';
6
7
  // #endregion
7
8
  /**
8
9
  * The template of the `StepperElement`.
@@ -33,52 +34,74 @@ export function stepperElementTemplate(e) {
33
34
  return 'neutral';
34
35
  }
35
36
  };
36
- return html `
37
- <div part="header"
38
- class="${classMap({ [`is-${e.orientation}`]: true })}">
39
- ${repeat(e.items, (x) => x, (x, index) => html `
40
- <div part="step-container"
41
- class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}">
42
- <button part="step"
43
- class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}"
44
- type="button"
45
- role="tab"
46
- aria-selected="${x.isSelected}"
47
- aria-posinset="${index + 1}"
48
- aria-setsize="${e.items.length}"
49
- ?disabled="${x.disabled || e.disabled}"
50
- @click="${() => e.onStepInvoked(x)}">
51
- <span part="step-icon"
52
- aria-hidden="true">
53
- <mosaik-pip part="step-state"
54
- .icon="${x.icon ? x.icon : getStateIcon(x.state)}"
55
- .text="${String(index + 1)}"
56
- .variant="${getStateVariant(x.state)}"
57
- .appearance="${'plain'}"></mosaik-pip>
58
- </span>
59
- <span part="step-text">
60
- <mosaik-text part="step-header"
61
- .text="${x.header || x.displayText || ''}"></mosaik-text>
62
- ${when(x.description.trim(), () => html `
63
- <mosaik-text part="step-description"
64
- .text="${x.description}"></mosaik-text>
65
- `)}
66
- ${when(x.hint.trim(), () => html `
67
- <mosaik-text part="step-optional"
68
- .text="${x.hint}"></mosaik-text>
69
- `)}
70
- </span>
71
- </button>
37
+ const renderStep = (x, index) => html `
38
+ <div part="step-container"
39
+ class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}">
40
+ <button part="step"
41
+ class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-error': x.state === 'error' })}"
42
+ type="button"
43
+ role="tab"
44
+ aria-selected="${x.isSelected}"
45
+ aria-posinset="${index + 1}"
46
+ aria-setsize="${e.items.length}"
47
+ ?disabled="${x.disabled || e.disabled}"
48
+ @click="${() => e.onStepInvoked(x)}">
49
+ <span part="step-icon"
50
+ aria-hidden="true">
51
+ <mosaik-pip part="step-state"
52
+ .icon="${x.icon ? x.icon : getStateIcon(x.state)}"
53
+ .text="${String(index + 1)}"
54
+ .variant="${getStateVariant(x.state)}"
55
+ .appearance="${'plain'}"></mosaik-pip>
56
+ </span>
57
+ <span part="step-text">
58
+ <mosaik-text part="step-header"
59
+ .text="${x.header || x.displayText || ''}"></mosaik-text>
60
+ ${when(x.description.trim(), () => html `
61
+ <mosaik-text part="step-description"
62
+ .text="${x.description}"></mosaik-text>
63
+ `)}
64
+ ${when(x.hint.trim(), () => html `
65
+ <mosaik-text part="step-optional"
66
+ .text="${x.hint}"></mosaik-text>
67
+ `)}
68
+ </span>
69
+ </button>
70
+ ${when(e.orientation === Orientation.Horizontal && index < e.items.length - 1, () => html `
71
+ <div part="connector" class="${classMap({ 'is-completed': x.state === 'completed' })}"></div>
72
+ `)}
73
+ ${when(e.orientation === Orientation.Vertical, () => html `
74
+ <div part="step-body"
75
+ class="${classMap({ 'is-active': x.isSelected, 'is-completed': x.state === 'completed', 'is-last': index === e.items.length - 1 })}">
72
76
  ${when(index < e.items.length - 1, () => html `
73
77
  <div part="connector" class="${classMap({ 'is-completed': x.state === 'completed' })}"></div>
74
78
  `)}
79
+ <div part="content">
80
+ <slot .name="${`step-${index}`}"
81
+ @slotchange="${() => e.onSlotChange()}"></slot>
82
+ </div>
75
83
  </div>
76
84
  `)}
77
85
  </div>
86
+ `;
87
+ return html `
88
+ ${when(e.orientation === Orientation.Vertical, () => html `
89
+ <slot name="steps"
90
+ style="display:none"
91
+ @slotchange="${() => e.onSlotChange()}"></slot>
92
+ `)}
93
+ <div part="header"
94
+ class="${classMap({ [`is-${e.orientation}`]: true })}">
95
+ ${repeat(e.items, (x) => x, (x, index) => html `
96
+ ${renderStep(x, index)}
97
+ `)}
98
+ </div>
99
+ ${when(e.orientation === Orientation.Horizontal, () => html `
78
100
  <div part="content">
79
101
  <slot name="steps"
80
102
  @slotchange="${() => e.onSlotChange()}"></slot>
81
103
  </div>
104
+ `)}
82
105
  <div part="footer"
83
106
  ?hidden="${!e.hasSlotContent('footer')}">
84
107
  <slot name="footer"
@@ -1 +1 @@
1
- {"version":3,"file":"StepperElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElementTemplate.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"StepperElementTemplate.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperElementTemplate.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=StepperSlot.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StepperSlot.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperSlot.ts"],"names":[],"mappings":""}
@@ -0,0 +1,11 @@
1
+ // #region Functions
2
+ /**
3
+ * Returns the generated slot name for a vertical step item.
4
+ *
5
+ * @internal
6
+ */
7
+ export function getStepperItemSlotName(index) {
8
+ return `step-${index}`;
9
+ }
10
+ // #endregion
11
+ //# sourceMappingURL=StepperSlot.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StepperSlot.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Selectors/Stepper/StepperSlot.ts"],"names":[],"mappings":"AAAA,oBAAoB;AAEpB;;;;GAIG;AACH,MAAM,UAAU,sBAAsB,CAAC,KAAa;IAChD,OAAO,QAAQ,KAAK,EAAE,CAAC;AAC3B,CAAC;AAED,aAAa"}
@@ -1 +1 @@
1
- {"version":3,"file":"StepperElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAqL3D"}
1
+ {"version":3,"file":"StepperElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAgN3D"}
@@ -105,19 +105,46 @@ export function stepperElementCosmopolitanStyle() {
105
105
 
106
106
  :host [part="header"].is-vertical {
107
107
  flex-direction: column;
108
+ gap: 0;
108
109
  }
109
110
 
110
111
  :host [part="header"].is-vertical [part="step-container"] {
111
112
  flex-direction: column;
112
- align-items: flex-start;
113
+ flex: none;
114
+ align-items: stretch;
115
+ gap: 0;
116
+ width: 100%;
117
+ }
118
+
119
+ :host [part="header"].is-vertical [part="step-body"] {
120
+ grid-template-columns: var(--stepper-icon-size) minmax(0, 1fr);
121
+ -moz-column-gap: var(--stepper-gap);
122
+ column-gap: var(--stepper-gap);
123
+ min-height: var(--stepper-vertical-connector-length);
124
+ width: 100%;
125
+ display: grid;
126
+ }
127
+
128
+ :host [part="header"].is-vertical [part="step-body"] [part="content"] {
129
+ padding-bottom: var(--stepper-content-gap);
130
+ grid-column: 2;
131
+ min-width: 0;
132
+ margin-top: 0;
133
+ display: none;
134
+ }
135
+
136
+ :host [part="header"].is-vertical [part="step-body"].is-active [part="content"] {
137
+ display: block;
113
138
  }
114
139
 
115
- :host [part="header"].is-vertical [part="connector"] {
140
+ :host [part="header"].is-vertical [part="step-body"] [part="connector"] {
116
141
  min-width: unset;
117
142
  width: var(--stepper-connector-size);
118
- height: var(--stepper-vertical-connector-length);
143
+ height: auto;
119
144
  min-height: 48px;
120
145
  margin: var(--stepper-vertical-connector-margin) 0;
146
+ grid-column: 1;
147
+ place-self: stretch center;
121
148
  }
122
149
 
123
150
  :host [part="step-container"] {
@@ -178,7 +205,7 @@ export function stepperElementCosmopolitanStyle() {
178
205
  flex: 1 1 0;
179
206
  }
180
207
 
181
- :host [part="content"], :host [part="footer"] {
208
+ :host > [part="content"], :host > [part="footer"] {
182
209
  margin-top: var(--stepper-content-gap);
183
210
  }
184
211
 
@@ -1 +1 @@
1
- {"version":3,"file":"StepperElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmLT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"StepperElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8MT,CAAC;AACN,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"StepperElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CAwQlD"}
1
+ {"version":3,"file":"StepperElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,sBAAsB,IAAI,SAAS,CAmSlD"}
@@ -105,19 +105,46 @@ export function stepperElementJoyStyle() {
105
105
 
106
106
  :host [part="header"].is-vertical {
107
107
  flex-direction: column;
108
+ gap: 0;
108
109
  }
109
110
 
110
111
  :host [part="header"].is-vertical [part="step-container"] {
111
112
  flex-direction: column;
112
- align-items: flex-start;
113
+ flex: none;
114
+ align-items: stretch;
115
+ gap: 0;
116
+ width: 100%;
113
117
  }
114
118
 
115
- :host [part="header"].is-vertical [part="connector"] {
119
+ :host [part="header"].is-vertical [part="step-body"] {
120
+ grid-template-columns: var(--stepper-icon-size) minmax(0, 1fr);
121
+ -moz-column-gap: var(--stepper-gap);
122
+ column-gap: var(--stepper-gap);
123
+ min-height: var(--stepper-vertical-connector-length);
124
+ width: 100%;
125
+ display: grid;
126
+ }
127
+
128
+ :host [part="header"].is-vertical [part="step-body"] [part="content"] {
129
+ padding-bottom: var(--stepper-content-gap);
130
+ grid-column: 2;
131
+ min-width: 0;
132
+ margin-top: 0;
133
+ display: none;
134
+ }
135
+
136
+ :host [part="header"].is-vertical [part="step-body"].is-active [part="content"] {
137
+ display: block;
138
+ }
139
+
140
+ :host [part="header"].is-vertical [part="step-body"] [part="connector"] {
116
141
  min-width: unset;
117
142
  width: var(--stepper-connector-size);
118
- height: var(--stepper-vertical-connector-length);
143
+ height: auto;
119
144
  min-height: 48px;
120
145
  margin: var(--stepper-vertical-connector-margin) 0;
146
+ grid-column: 1;
147
+ place-self: stretch center;
121
148
  }
122
149
 
123
150
  :host [part="step-container"] {
@@ -178,7 +205,7 @@ export function stepperElementJoyStyle() {
178
205
  flex: 1 1 0;
179
206
  }
180
207
 
181
- :host [part="content"], :host [part="footer"] {
208
+ :host > [part="content"], :host > [part="footer"] {
182
209
  margin-top: var(--stepper-content-gap);
183
210
  }
184
211
 
@@ -198,8 +225,8 @@ export function stepperElementJoyStyle() {
198
225
  outline-color: var(--joy-color-primary-500);
199
226
  }
200
227
 
201
- :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) [part="state-index"], :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) ::slotted(mosaik-icon) {
202
- color: var(--joy-color-primary-500);
228
+ :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) [part="step-icon"] [part="step-state"], :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) ::slotted(mosaik-icon) {
229
+ background: var(--joy-color-primary-500);
203
230
  }
204
231
 
205
232
  :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) [part="step-text"], :host [part="step-container"] [part="step"]:hover:not([disabled]:not([disabled="false"]:not([aria-selected]))) ::slotted(mosaik-text) {
@@ -207,22 +234,22 @@ export function stepperElementJoyStyle() {
207
234
  font-weight: 600;
208
235
  }
209
236
 
210
- :host [part="step-container"] [part="step"] [part="step-icon"] {
237
+ :host [part="step-container"] [part="step"] [part="step-icon"] [part="step-state"] {
211
238
  color: var(--joy-scheme-foreground);
212
239
  background-color: var(--joy-scheme-highlight);
213
240
  }
214
241
 
215
- :host [part="step-container"] [part="step"].is-active [part="step-icon"] {
242
+ :host [part="step-container"] [part="step"].is-active [part="step-icon"] [part="step-state"] {
216
243
  color: var(--joy-color-primary-0);
217
244
  background-color: var(--joy-color-primary-500);
218
245
  }
219
246
 
220
- :host [part="step-container"] [part="step"].is-completed [part="step-icon"] {
247
+ :host [part="step-container"] [part="step"].is-completed [part="step-icon"] [part="step-state"] {
221
248
  color: var(--joy-color-success-0);
222
249
  background-color: var(--joy-color-success-500);
223
250
  }
224
251
 
225
- :host [part="step-container"] [part="step"].is-error [part="step-icon"] {
252
+ :host [part="step-container"] [part="step"].is-error [part="step-icon"] [part="step-state"] {
226
253
  color: var(--joy-color-danger-0);
227
254
  background-color: var(--joy-color-danger-500);
228
255
  }
@@ -1 +1 @@
1
- {"version":3,"file":"StepperElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAsQT,CAAC;AACN,CAAC"}
1
+ {"version":3,"file":"StepperElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,sBAAsB;IAClC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiST,CAAC;AACN,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"StepperElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAqLtD"}
1
+ {"version":3,"file":"StepperElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Selectors/Stepper/Themes/StepperElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,SAAS,CAgNtD"}