@govtechsg/sgds-web-component 3.20.0-rc.0 → 3.20.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Stepper/index.umd.min.js +5 -5
- package/components/Stepper/index.umd.min.js.map +1 -1
- package/components/Stepper/sgds-step.d.ts +7 -9
- package/components/Stepper/sgds-step.js +15 -20
- package/components/Stepper/sgds-step.js.map +1 -1
- package/components/Stepper/sgds-stepper.js +2 -2
- package/components/Stepper/sgds-stepper.js.map +1 -1
- package/components/index.umd.min.js +4 -4
- package/components/index.umd.min.js.map +1 -1
- package/custom-elements.json +80 -1
- package/index.umd.min.js +54 -54
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/components/Stepper/sgds-step.cjs.js +15 -20
- package/react/components/Stepper/sgds-step.cjs.js.map +1 -1
- package/react/components/Stepper/sgds-step.js +15 -20
- package/react/components/Stepper/sgds-step.js.map +1 -1
- package/react/components/Stepper/sgds-stepper.cjs.js +2 -2
- package/react/components/Stepper/sgds-stepper.cjs.js.map +1 -1
- package/react/components/Stepper/sgds-stepper.js +2 -2
- package/react/components/Stepper/sgds-stepper.js.map +1 -1
- package/types/react.d.ts +8 -0
|
@@ -17,22 +17,20 @@ export declare class SgdsStep extends SgdsElement {
|
|
|
17
17
|
iconName: string | undefined;
|
|
18
18
|
/** Optional component to render for this step */
|
|
19
19
|
component: unknown;
|
|
20
|
-
/**
|
|
21
|
-
|
|
22
|
-
/**
|
|
20
|
+
/** Whether this step is clickable */
|
|
21
|
+
clickable: boolean;
|
|
22
|
+
/** Whether this step is currently active */
|
|
23
23
|
active: boolean;
|
|
24
|
-
/**
|
|
24
|
+
/** Whether this step is currently disabled */
|
|
25
25
|
disabled: boolean;
|
|
26
|
-
/**
|
|
26
|
+
/** Whether this step is completed */
|
|
27
27
|
completed: boolean;
|
|
28
|
-
/** @internal
|
|
29
|
-
|
|
28
|
+
/** @internal The index of this step within the stepper */
|
|
29
|
+
stepIndex: number;
|
|
30
30
|
/** @internal Orientation of parent stepper (horizontal or vertical) */
|
|
31
31
|
orientation: "horizontal" | "vertical";
|
|
32
32
|
/** @internal Whether this step is the first sgds-step of its type in the slot */
|
|
33
33
|
isFirstOfType: boolean;
|
|
34
|
-
/** @internal Whether this step is completed */
|
|
35
|
-
_isCompleted: boolean;
|
|
36
34
|
render(): import("lit").TemplateResult<1>;
|
|
37
35
|
/**@internal */
|
|
38
36
|
_handleClick(e?: PointerEvent): void;
|
|
@@ -16,39 +16,37 @@ class SgdsStep extends SgdsElement {
|
|
|
16
16
|
super(...arguments);
|
|
17
17
|
/** The header text for the step */
|
|
18
18
|
this.stepHeader = "";
|
|
19
|
-
/**
|
|
20
|
-
this.
|
|
21
|
-
/**
|
|
19
|
+
/** Whether this step is clickable */
|
|
20
|
+
this.clickable = false;
|
|
21
|
+
/** Whether this step is currently active */
|
|
22
22
|
this.active = false;
|
|
23
|
-
/**
|
|
23
|
+
/** Whether this step is currently disabled */
|
|
24
24
|
this.disabled = false;
|
|
25
|
-
/**
|
|
25
|
+
/** Whether this step is completed */
|
|
26
26
|
this.completed = false;
|
|
27
|
-
/** @internal
|
|
28
|
-
this.
|
|
27
|
+
/** @internal The index of this step within the stepper */
|
|
28
|
+
this.stepIndex = 0;
|
|
29
29
|
/** @internal Orientation of parent stepper (horizontal or vertical) */
|
|
30
30
|
this.orientation = "horizontal";
|
|
31
31
|
/** @internal Whether this step is the first sgds-step of its type in the slot */
|
|
32
32
|
this.isFirstOfType = false;
|
|
33
|
-
/** @internal Whether this step is completed */
|
|
34
|
-
this._isCompleted = false;
|
|
35
33
|
}
|
|
36
34
|
render() {
|
|
37
|
-
const isValidClickable = !this.disabled && this.
|
|
35
|
+
const isValidClickable = !this.disabled && this.clickable;
|
|
38
36
|
return html `
|
|
39
37
|
<div class="stepper-item-container">
|
|
40
38
|
<div
|
|
41
39
|
class="stepper-item ${classMap({
|
|
42
40
|
first: this.isFirstOfType,
|
|
43
41
|
active: this.active,
|
|
44
|
-
completed: this.
|
|
45
|
-
clickable: this.
|
|
42
|
+
completed: this.completed,
|
|
43
|
+
clickable: this.clickable,
|
|
46
44
|
vertical: this.orientation === "vertical",
|
|
47
45
|
disabled: this.disabled
|
|
48
46
|
})}"
|
|
49
47
|
tabindex=${isValidClickable ? "0" : "-1"}
|
|
50
48
|
aria-current=${this.active ? "step" : "false"}
|
|
51
|
-
aria-disabled=${this.disabled || (!this.active && !this.
|
|
49
|
+
aria-disabled=${this.disabled || (!this.active && !this.completed) ? "true" : "false"}
|
|
52
50
|
@click="${isValidClickable ? e => this._handleClick(e) : null}"
|
|
53
51
|
@keydown=${isValidClickable ? (e) => this._handleKeyDown(e) : null}
|
|
54
52
|
>
|
|
@@ -95,8 +93,8 @@ __decorate([
|
|
|
95
93
|
property({ type: Object })
|
|
96
94
|
], SgdsStep.prototype, "component", void 0);
|
|
97
95
|
__decorate([
|
|
98
|
-
property({ type:
|
|
99
|
-
], SgdsStep.prototype, "
|
|
96
|
+
property({ type: Boolean })
|
|
97
|
+
], SgdsStep.prototype, "clickable", void 0);
|
|
100
98
|
__decorate([
|
|
101
99
|
property({ type: Boolean, reflect: true })
|
|
102
100
|
], SgdsStep.prototype, "active", void 0);
|
|
@@ -107,17 +105,14 @@ __decorate([
|
|
|
107
105
|
property({ type: Boolean, reflect: true })
|
|
108
106
|
], SgdsStep.prototype, "completed", void 0);
|
|
109
107
|
__decorate([
|
|
110
|
-
property({ type:
|
|
111
|
-
], SgdsStep.prototype, "
|
|
108
|
+
property({ type: Number })
|
|
109
|
+
], SgdsStep.prototype, "stepIndex", void 0);
|
|
112
110
|
__decorate([
|
|
113
111
|
property({ type: String })
|
|
114
112
|
], SgdsStep.prototype, "orientation", void 0);
|
|
115
113
|
__decorate([
|
|
116
114
|
property({ type: Boolean })
|
|
117
115
|
], SgdsStep.prototype, "isFirstOfType", void 0);
|
|
118
|
-
__decorate([
|
|
119
|
-
property({ type: Boolean })
|
|
120
|
-
], SgdsStep.prototype, "_isCompleted", void 0);
|
|
121
116
|
|
|
122
117
|
export { SgdsStep, SgdsStep as default };
|
|
123
118
|
//# sourceMappingURL=sgds-step.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-step.js","sources":["../../../src/components/Stepper/sgds-step.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport stepStyle from \"./step.css\";\n\n/**\n * @summary A step within a stepper component\n * @slot default - Additional content to display under the step header\n *\n */\nexport class SgdsStep extends SgdsElement {\n static styles = [...SgdsElement.styles, stepStyle];\n /** @internal */\n static dependencies = { \"sgds-icon\": SgdsIcon };\n\n /** The header text for the step */\n @property({ type: String, reflect: true })\n stepHeader = \"\";\n\n /** Optional icon name to display instead of step number */\n @property({ type: String, reflect: true })\n iconName: string | undefined;\n\n /** Optional component to render for this step */\n @property({ type: Object })\n component: unknown;\n\n /**
|
|
1
|
+
{"version":3,"file":"sgds-step.js","sources":["../../../src/components/Stepper/sgds-step.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport stepStyle from \"./step.css\";\n\n/**\n * @summary A step within a stepper component\n * @slot default - Additional content to display under the step header\n *\n */\nexport class SgdsStep extends SgdsElement {\n static styles = [...SgdsElement.styles, stepStyle];\n /** @internal */\n static dependencies = { \"sgds-icon\": SgdsIcon };\n\n /** The header text for the step */\n @property({ type: String, reflect: true })\n stepHeader = \"\";\n\n /** Optional icon name to display instead of step number */\n @property({ type: String, reflect: true })\n iconName: string | undefined;\n\n /** Optional component to render for this step */\n @property({ type: Object })\n component: unknown;\n\n /** Whether this step is clickable */\n @property({ type: Boolean })\n clickable = false;\n\n /** Whether this step is currently active */\n @property({ type: Boolean, reflect: true })\n active = false;\n\n /** Whether this step is currently disabled */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Whether this step is completed */\n @property({ type: Boolean, reflect: true })\n completed = false;\n\n /** @internal The index of this step within the stepper */\n @property({ type: Number })\n stepIndex = 0;\n\n /** @internal Orientation of parent stepper (horizontal or vertical) */\n @property({ type: String })\n orientation: \"horizontal\" | \"vertical\" = \"horizontal\";\n\n /** @internal Whether this step is the first sgds-step of its type in the slot */\n @property({ type: Boolean })\n isFirstOfType = false;\n\n render() {\n const isValidClickable = !this.disabled && this.clickable;\n\n return html`\n <div class=\"stepper-item-container\">\n <div\n class=\"stepper-item ${classMap({\n first: this.isFirstOfType,\n active: this.active,\n completed: this.completed,\n clickable: this.clickable,\n vertical: this.orientation === \"vertical\",\n disabled: this.disabled\n })}\"\n tabindex=${isValidClickable ? \"0\" : \"-1\"}\n aria-current=${this.active ? \"step\" : \"false\"}\n aria-disabled=${this.disabled || (!this.active && !this.completed) ? \"true\" : \"false\"}\n @click=\"${isValidClickable ? e => this._handleClick(e) : null}\"\n @keydown=${isValidClickable ? (e: KeyboardEvent) => this._handleKeyDown(e) : null}\n >\n <div class=\"stepper-marker\">\n ${this.iconName ? html`<sgds-icon name=${this.iconName} size=\"md\"></sgds-icon>` : this.stepIndex + 1}\n </div>\n\n <div class=\"stepper-detail\">\n <div class=\"stepper-label\">${this.stepHeader}</div>\n <slot class=\"stepper-slot\"></slot>\n </div>\n </div>\n </div>\n `;\n }\n\n /**@internal */\n _handleClick(e?: PointerEvent) {\n if (e) {\n const ele = e.target as HTMLElement;\n\n // Allow user to have custom slotted item with attribute 'data-clickable' to skip i-sgds-click\n // To handle if there are clickable objects within the slot\n if (ele.hasAttribute(\"data-clickable\")) return;\n }\n\n this.emit(\"i-sgds-click\", { detail: { stepIndex: this.stepIndex } });\n }\n\n /**@internal */\n _handleKeyDown(event: KeyboardEvent) {\n if (event.key === \"Enter\") {\n this._handleClick();\n }\n }\n}\n\nexport default SgdsStep;\n"],"names":["stepStyle"],"mappings":"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"}
|
|
@@ -74,8 +74,8 @@ class SgdsStepper extends SgdsElement {
|
|
|
74
74
|
this._items.forEach((item, index) => {
|
|
75
75
|
item.stepIndex = index;
|
|
76
76
|
item.active = this.activeStep === index;
|
|
77
|
-
item.
|
|
78
|
-
item.
|
|
77
|
+
item.completed = item.completed || this.activeStep > index;
|
|
78
|
+
item.clickable = this.linear
|
|
79
79
|
? !item.disabled && this.clickable && (this.activeStep - 1 == index || this.activeStep + 1 == index)
|
|
80
80
|
: !item.disabled && this.clickable;
|
|
81
81
|
item.orientation = this.orientation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sgds-stepper.js","sources":["../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { IStepMetaData } from \"./types\";\nimport type SgdsStep from \"./sgds-step\";\nimport { HasSlotController } from \"../../utils/slot\";\nexport type { IStepMetaData };\n\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n * @slot default - slot for sgds-step children\n *\n */\nexport class SgdsStepper extends SgdsElement {\n static styles = [...SgdsElement.styles, stepperStyle];\n /** @internal */\n static dependencies = { \"sgds-icon\": SgdsIcon };\n /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead.\n * @deprecated Use sgds-step child components instead of the steps property\n */\n @property({ type: Array })\n steps: IStepMetaData[] = [];\n\n /** The current state of active step. Defaults to 0 */\n @property({ type: Number, reflect: true })\n activeStep = 0;\n\n /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n /** When true, the stepper's steps will be clickable */\n @property({ type: Boolean, reflect: true }) clickable = false;\n\n /** When true, the stepper's steps can only be clicked in a linear manner */\n @property({ type: Boolean, reflect: true }) linear = false;\n\n /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue(\"activeStep\")\n defaultActiveStep = 0;\n\n /** @internal */\n @queryAssignedElements() private _slotNodes!: SgdsStep[];\n\n /** @internal */\n private _items: SgdsStep[] = [];\n private _totalSteps = 0;\n\n /** @internal Bound i-sgds-click handler for proper event listener removal */\n private _boundHandleItemClick = this._handleStepClick.bind(this);\n\n /**\n * Indicates the presence of the default slot.\n * Used for server-side rendering to determine table structure.\n * @type {boolean}\n * @internal\n * @default false\n */\n @property({ type: Boolean }) hasDefaultSlot = false;\n private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n connectedCallback() {\n super.connectedCallback();\n\n this._totalSteps = this.steps.length;\n this.addEventListener(\"i-sgds-click\", this._boundHandleItemClick);\n }\n\n /** @internal */\n private _handleSlotChange() {\n this._items = this._slotNodes;\n this._totalSteps = this._items.length;\n\n this._updateStepItems();\n }\n\n updated() {\n if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n }\n\n /** @internal Updates step item properties based on active step and clickable state */\n private _updateStepItems() {\n if (this._items && this._items.length > 0) {\n this._items.forEach((item, index) => {\n item.stepIndex = index;\n item.active = this.activeStep === index;\n item._isCompleted = item.completed || this.activeStep > index;\n item.isClickable = this.linear\n ? !item.disabled && this.clickable && (this.activeStep - 1 == index || this.activeStep + 1 == index)\n : !item.disabled && this.clickable;\n item.orientation = this.orientation;\n\n if (this._items.length > 1) {\n item.isFirstOfType = index === 0;\n item.classList.toggle(\"last\", index === this._items.length - 1);\n }\n });\n }\n }\n\n /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n public getComponent(step: number = this.activeStep) {\n const items = this.hasDefaultSlot ? this._items : this.steps;\n console.log(step, this._items);\n\n if (items && items.length > 0) {\n return items[step]?.component;\n }\n return this.steps[step]?.component;\n }\n\n /** Moves the active step forward one step */\n public nextStep() {\n this.emit(\"sgds-next-step\");\n if (this.activeStep < this._totalSteps - 1) {\n if (!this._slotNodes[this.activeStep + 1]?.disabled) {\n this.activeStep++;\n }\n }\n }\n\n /** Moves the active step back one step */\n public previousStep() {\n this.emit(\"sgds-previous-step\");\n\n if (this.activeStep > 0) {\n if (!this._slotNodes[this.activeStep - 1]?.disabled) {\n this.activeStep--;\n }\n }\n }\n\n /** Changes the active step to the last step */\n public lastStep() {\n this.emit(\"sgds-last-step\");\n if (this.activeStep !== this._totalSteps - 1) {\n this.activeStep = this._totalSteps - 1;\n }\n }\n\n /** Changes active step to the first step */\n public firstStep() {\n this.emit(\"sgds-first-step\");\n if (this.activeStep > 0) {\n this.activeStep = 0;\n }\n }\n\n /** Resets the Stepper to its initial active step state */\n public reset() {\n this.emit(\"sgds-reset\");\n this.activeStep = this.defaultActiveStep;\n }\n\n /**@internal */\n _onStepperItemClick(index: number) {\n this.activeStep = index;\n }\n\n /**@internal */\n @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n _handleActiveStepChange() {\n this._updateStepItems();\n this.emit(\"sgds-arrived\");\n }\n\n /**@internal */\n @watch(\"clickable\", { waitUntilFirstUpdate: true })\n _handleClickableChange() {\n this._updateStepItems();\n }\n\n /**@internal */\n @watch(\"orientation\", { waitUntilFirstUpdate: true })\n _handleOrientationChange() {\n this._updateStepItems();\n }\n\n /**@internal */\n _handleKeyDown(event: KeyboardEvent, index: number) {\n if (event.key === \"Enter\") {\n this._onStepperItemClick(index);\n }\n }\n\n /**@internal */\n _handleStepClick(e: Event) {\n const event = e as CustomEvent;\n e.stopPropagation();\n\n const stepIndex = event.detail?.stepIndex;\n this._onStepperItemClick(stepIndex);\n }\n\n render() {\n return html`\n <div\n class=\"stepper ${classMap({\n [`${this.orientation}`]: this.orientation,\n clickable: this.clickable\n })}\"\n >\n <slot @slotchange=${this._handleSlotChange}></slot>\n\n ${!this.hasDefaultSlot\n ? this.steps.map(({ stepHeader: step, iconName }, index) => {\n return html`\n <div class=\"stepper-item-container\">\n <div\n class=\"stepper-item ${classMap({\n \"is-active\": this.activeStep === index,\n \"is-completed\": this.activeStep > index,\n \"is-clickable\": this.clickable && this.activeStep > index\n })}\"\n tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n >\n <div class=\"stepper-marker\">\n ${iconName ? html`<sgds-icon name=${iconName} size=\"md\"></sgds-icon>` : index + 1}\n </div>\n <div class=\"stepper-detail\">${step}</div>\n </div>\n </div>\n `;\n })\n : nothing}\n </div>\n `;\n }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sgds-stepper.js","sources":["../../../src/components/Stepper/sgds-stepper.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { IStepMetaData } from \"./types\";\nimport type SgdsStep from \"./sgds-step\";\nimport { HasSlotController } from \"../../utils/slot\";\nexport type { IStepMetaData };\n\n/**\n * @summary Steppers are used to inform users which step they are at in a form or a process\n *\n * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.\n * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.\n * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.\n * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.\n * @event sgds-arrived - Emitted right after the activeStep has updated its state, when upcoming step has arrived. Call `getMethod()` on this event to get the current step's component.\n * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.\n * @slot default - slot for sgds-step children\n *\n */\nexport class SgdsStepper extends SgdsElement {\n static styles = [...SgdsElement.styles, stepperStyle];\n /** @internal */\n static dependencies = { \"sgds-icon\": SgdsIcon };\n /** The metadata of stepper, type `IStepMetaData`. Deprecated: use sgds-step child components instead.\n * @deprecated Use sgds-step child components instead of the steps property\n */\n @property({ type: Array })\n steps: IStepMetaData[] = [];\n\n /** The current state of active step. Defaults to 0 */\n @property({ type: Number, reflect: true })\n activeStep = 0;\n\n /** The orientation of stepper. By default, the stepper is of horizontal orientation */\n @property({ type: String, reflect: true }) orientation: StepperOrientation = \"horizontal\";\n\n /** When true, the stepper's steps will be clickable */\n @property({ type: Boolean, reflect: true }) clickable = false;\n\n /** When true, the stepper's steps can only be clicked in a linear manner */\n @property({ type: Boolean, reflect: true }) linear = false;\n\n /** @internal Gets or sets the default activeStep used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n @defaultValue(\"activeStep\")\n defaultActiveStep = 0;\n\n /** @internal */\n @queryAssignedElements() private _slotNodes!: SgdsStep[];\n\n /** @internal */\n private _items: SgdsStep[] = [];\n private _totalSteps = 0;\n\n /** @internal Bound i-sgds-click handler for proper event listener removal */\n private _boundHandleItemClick = this._handleStepClick.bind(this);\n\n /**\n * Indicates the presence of the default slot.\n * Used for server-side rendering to determine table structure.\n * @type {boolean}\n * @internal\n * @default false\n */\n @property({ type: Boolean }) hasDefaultSlot = false;\n private readonly hasSlotController = new HasSlotController(this, \"[default]\");\n\n connectedCallback() {\n super.connectedCallback();\n\n this._totalSteps = this.steps.length;\n this.addEventListener(\"i-sgds-click\", this._boundHandleItemClick);\n }\n\n /** @internal */\n private _handleSlotChange() {\n this._items = this._slotNodes;\n this._totalSteps = this._items.length;\n\n this._updateStepItems();\n }\n\n updated() {\n if (!this.hasDefaultSlot) this.hasDefaultSlot = this.hasSlotController.test(\"[default]\");\n }\n\n /** @internal Updates step item properties based on active step and clickable state */\n private _updateStepItems() {\n if (this._items && this._items.length > 0) {\n this._items.forEach((item, index) => {\n item.stepIndex = index;\n item.active = this.activeStep === index;\n item.completed = item.completed || this.activeStep > index;\n item.clickable = this.linear\n ? !item.disabled && this.clickable && (this.activeStep - 1 == index || this.activeStep + 1 == index)\n : !item.disabled && this.clickable;\n item.orientation = this.orientation;\n\n if (this._items.length > 1) {\n item.isFirstOfType = index === 0;\n item.classList.toggle(\"last\", index === this._items.length - 1);\n }\n });\n }\n }\n\n /** By default, it returns the corresponding component of the current activeStep as defined in the steps metadata. To get other components, pass in your desired step number as the parameter*/\n public getComponent(step: number = this.activeStep) {\n const items = this.hasDefaultSlot ? this._items : this.steps;\n console.log(step, this._items);\n\n if (items && items.length > 0) {\n return items[step]?.component;\n }\n return this.steps[step]?.component;\n }\n\n /** Moves the active step forward one step */\n public nextStep() {\n this.emit(\"sgds-next-step\");\n if (this.activeStep < this._totalSteps - 1) {\n if (!this._slotNodes[this.activeStep + 1]?.disabled) {\n this.activeStep++;\n }\n }\n }\n\n /** Moves the active step back one step */\n public previousStep() {\n this.emit(\"sgds-previous-step\");\n\n if (this.activeStep > 0) {\n if (!this._slotNodes[this.activeStep - 1]?.disabled) {\n this.activeStep--;\n }\n }\n }\n\n /** Changes the active step to the last step */\n public lastStep() {\n this.emit(\"sgds-last-step\");\n if (this.activeStep !== this._totalSteps - 1) {\n this.activeStep = this._totalSteps - 1;\n }\n }\n\n /** Changes active step to the first step */\n public firstStep() {\n this.emit(\"sgds-first-step\");\n if (this.activeStep > 0) {\n this.activeStep = 0;\n }\n }\n\n /** Resets the Stepper to its initial active step state */\n public reset() {\n this.emit(\"sgds-reset\");\n this.activeStep = this.defaultActiveStep;\n }\n\n /**@internal */\n _onStepperItemClick(index: number) {\n this.activeStep = index;\n }\n\n /**@internal */\n @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n _handleActiveStepChange() {\n this._updateStepItems();\n this.emit(\"sgds-arrived\");\n }\n\n /**@internal */\n @watch(\"clickable\", { waitUntilFirstUpdate: true })\n _handleClickableChange() {\n this._updateStepItems();\n }\n\n /**@internal */\n @watch(\"orientation\", { waitUntilFirstUpdate: true })\n _handleOrientationChange() {\n this._updateStepItems();\n }\n\n /**@internal */\n _handleKeyDown(event: KeyboardEvent, index: number) {\n if (event.key === \"Enter\") {\n this._onStepperItemClick(index);\n }\n }\n\n /**@internal */\n _handleStepClick(e: Event) {\n const event = e as CustomEvent;\n e.stopPropagation();\n\n const stepIndex = event.detail?.stepIndex;\n this._onStepperItemClick(stepIndex);\n }\n\n render() {\n return html`\n <div\n class=\"stepper ${classMap({\n [`${this.orientation}`]: this.orientation,\n clickable: this.clickable\n })}\"\n >\n <slot @slotchange=${this._handleSlotChange}></slot>\n\n ${!this.hasDefaultSlot\n ? this.steps.map(({ stepHeader: step, iconName }, index) => {\n return html`\n <div class=\"stepper-item-container\">\n <div\n class=\"stepper-item ${classMap({\n \"is-active\": this.activeStep === index,\n \"is-completed\": this.activeStep > index,\n \"is-clickable\": this.clickable && this.activeStep > index\n })}\"\n tabindex=${this.clickable && this.activeStep > index ? \"0\" : \"-1\"}\n aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n @click=\"${this.clickable ? () => this._onStepperItemClick(index) : null}\"\n @keydown=${this.clickable ? (e: KeyboardEvent) => this._handleKeyDown(e, index) : null}\n >\n <div class=\"stepper-marker\">\n ${iconName ? html`<sgds-icon name=${iconName} size=\"md\"></sgds-icon>` : index + 1}\n </div>\n <div class=\"stepper-detail\">${step}</div>\n </div>\n </div>\n `;\n })\n : nothing}\n </div>\n `;\n }\n}\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}
|
|
@@ -3882,13 +3882,13 @@ const Yl="important",jl=" !"+Yl;const Wl=je(class extends We{constructor(e){if(s
|
|
|
3882
3882
|
style=${this.borderRadius?`border-radius: ${this.borderRadius}`:ae}
|
|
3883
3883
|
></div>`}):ae}
|
|
3884
3884
|
</div>
|
|
3885
|
-
`}}Cd.styles=[_d],t([Ze(".skeleton")],Cd.prototype,"skeleton",void 0),t([Ve({type:String,reflect:!0})],Cd.prototype,"width",void 0),t([Ve({type:String,reflect:!0})],Cd.prototype,"height",void 0),t([Ve({type:String,reflect:!0})],Cd.prototype,"borderRadius",void 0),t([Ve({type:Number,reflect:!0})],Cd.prototype,"rows",void 0),t([Ve({type:Boolean,reflect:!0})],Cd.prototype,"sheen",void 0);var Sd=r`:host{display:contents}.stepper-item-container{flex-basis:1em;flex-grow:1;flex-shrink:1;position:relative;width:fit-content}.stepper-item,.stepper-item-container{align-items:center;display:flex;flex-direction:column}.stepper-item{gap:var(--sgds-gap-sm)}.stepper-item.vertical{align-items:flex-start;flex-direction:row;margin-bottom:var(--sgds-padding-xl)}.stepper-item.clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper-item:not(.first):not(.vertical):before{background:var(--sgds-border-color-translucent);content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}:host(:not(.last)) .stepper-item-container .stepper-item.vertical:after{background:var(--sgds-bg-translucent);content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper-item-container .stepper-item.active:not(.first):before,.stepper-item-container .stepper-item.completed:not(.first):before,:host(:not(.last)) .stepper-item-container .stepper-item.completed:after{background:var(--sgds-primary-border-color-default)}.stepper-item.clickable{cursor:pointer}.stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;flex-shrink:0;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper-detail{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);max-width:var(--sgds-dimension-128);text-align:center}.stepper-item.vertical .stepper-detail{max-width:unset;padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper-item:not(.active):not(.completed) .stepper-label{color:var(--sgds-color-subtle)}.stepper-item.clickable:focus .stepper-marker,.stepper-item.clickable:focus-visible .stepper-marker,.stepper-item.clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper-item.clickable:focus .stepper-label,.stepper-item.clickable:focus-visible .stepper-label,.stepper-item.clickable:hover .stepper-label{color:var(--sgds-primary-color-emphasis)}.stepper-item.clickable .stepper-label{color:var(--sgds-primary-color-default)}.stepper-item.completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.stepper-item.active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper-slot{color:var(--sgds-color-subtle);display:flex;flex-direction:column;font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);gap:var(--sgds-gap-xs);letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs)}.stepper-item.disabled{opacity:var(--sgds-opacity-40)}`;class Md extends He{constructor(){super(...arguments),this.stepHeader="",this.
|
|
3885
|
+
`}}Cd.styles=[_d],t([Ze(".skeleton")],Cd.prototype,"skeleton",void 0),t([Ve({type:String,reflect:!0})],Cd.prototype,"width",void 0),t([Ve({type:String,reflect:!0})],Cd.prototype,"height",void 0),t([Ve({type:String,reflect:!0})],Cd.prototype,"borderRadius",void 0),t([Ve({type:Number,reflect:!0})],Cd.prototype,"rows",void 0),t([Ve({type:Boolean,reflect:!0})],Cd.prototype,"sheen",void 0);var Sd=r`:host{display:contents}.stepper-item-container{flex-basis:1em;flex-grow:1;flex-shrink:1;position:relative;width:fit-content}.stepper-item,.stepper-item-container{align-items:center;display:flex;flex-direction:column}.stepper-item{gap:var(--sgds-gap-sm)}.stepper-item.vertical{align-items:flex-start;flex-direction:row;margin-bottom:var(--sgds-padding-xl)}.stepper-item.clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper-item:not(.first):not(.vertical):before{background:var(--sgds-border-color-translucent);content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}:host(:not(.last)) .stepper-item-container .stepper-item.vertical:after{background:var(--sgds-bg-translucent);content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper-item-container .stepper-item.active:not(.first):before,.stepper-item-container .stepper-item.completed:not(.first):before,:host(:not(.last)) .stepper-item-container .stepper-item.completed:after{background:var(--sgds-primary-border-color-default)}.stepper-item.clickable{cursor:pointer}.stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;flex-shrink:0;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper-detail{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);max-width:var(--sgds-dimension-128);text-align:center}.stepper-item.vertical .stepper-detail{max-width:unset;padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper-item:not(.active):not(.completed) .stepper-label{color:var(--sgds-color-subtle)}.stepper-item.clickable:focus .stepper-marker,.stepper-item.clickable:focus-visible .stepper-marker,.stepper-item.clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper-item.clickable:focus .stepper-label,.stepper-item.clickable:focus-visible .stepper-label,.stepper-item.clickable:hover .stepper-label{color:var(--sgds-primary-color-emphasis)}.stepper-item.clickable .stepper-label{color:var(--sgds-primary-color-default)}.stepper-item.completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}.stepper-item.active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper-slot{color:var(--sgds-color-subtle);display:flex;flex-direction:column;font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);gap:var(--sgds-gap-xs);letter-spacing:var(--sgds-letter-spacing-normal);line-height:var(--sgds-line-height-2-xs)}.stepper-item.disabled{opacity:var(--sgds-opacity-40)}`;class Md extends He{constructor(){super(...arguments),this.stepHeader="",this.clickable=!1,this.active=!1,this.disabled=!1,this.completed=!1,this.stepIndex=0,this.orientation="horizontal",this.isFirstOfType=!1}render(){const e=!this.disabled&&this.clickable;return te`
|
|
3886
3886
|
<div class="stepper-item-container">
|
|
3887
3887
|
<div
|
|
3888
|
-
class="stepper-item ${Ke({first:this.isFirstOfType,active:this.active,completed:this.
|
|
3888
|
+
class="stepper-item ${Ke({first:this.isFirstOfType,active:this.active,completed:this.completed,clickable:this.clickable,vertical:"vertical"===this.orientation,disabled:this.disabled})}"
|
|
3889
3889
|
tabindex=${e?"0":"-1"}
|
|
3890
3890
|
aria-current=${this.active?"step":"false"}
|
|
3891
|
-
aria-disabled=${this.disabled||!this.active&&!this.
|
|
3891
|
+
aria-disabled=${this.disabled||!this.active&&!this.completed?"true":"false"}
|
|
3892
3892
|
@click="${e?e=>this._handleClick(e):null}"
|
|
3893
3893
|
@keydown=${e?e=>this._handleKeyDown(e):null}
|
|
3894
3894
|
>
|
|
@@ -3902,7 +3902,7 @@ const Yl="important",jl=" !"+Yl;const Wl=je(class extends We{constructor(e){if(s
|
|
|
3902
3902
|
</div>
|
|
3903
3903
|
</div>
|
|
3904
3904
|
</div>
|
|
3905
|
-
`}_handleClick(e){if(e){if(e.target.hasAttribute("data-clickable"))return}this.emit("i-sgds-click",{detail:{stepIndex:this.stepIndex}})}_handleKeyDown(e){"Enter"===e.key&&this._handleClick()}}Md.styles=[...He.styles,Sd],Md.dependencies={"sgds-icon":Zt},t([Ve({type:String,reflect:!0})],Md.prototype,"stepHeader",void 0),t([Ve({type:String,reflect:!0})],Md.prototype,"iconName",void 0),t([Ve({type:Object})],Md.prototype,"component",void 0),t([Ve({type:
|
|
3905
|
+
`}_handleClick(e){if(e){if(e.target.hasAttribute("data-clickable"))return}this.emit("i-sgds-click",{detail:{stepIndex:this.stepIndex}})}_handleKeyDown(e){"Enter"===e.key&&this._handleClick()}}Md.styles=[...He.styles,Sd],Md.dependencies={"sgds-icon":Zt},t([Ve({type:String,reflect:!0})],Md.prototype,"stepHeader",void 0),t([Ve({type:String,reflect:!0})],Md.prototype,"iconName",void 0),t([Ve({type:Object})],Md.prototype,"component",void 0),t([Ve({type:Boolean})],Md.prototype,"clickable",void 0),t([Ve({type:Boolean,reflect:!0})],Md.prototype,"active",void 0),t([Ve({type:Boolean,reflect:!0})],Md.prototype,"disabled",void 0),t([Ve({type:Boolean,reflect:!0})],Md.prototype,"completed",void 0),t([Ve({type:Number})],Md.prototype,"stepIndex",void 0),t([Ve({type:String})],Md.prototype,"orientation",void 0),t([Ve({type:Boolean})],Md.prototype,"isFirstOfType",void 0);var $d=r`.stepper{display:flex;flex-wrap:wrap}.stepper.vertical{flex-direction:column}.stepper.horizontal .stepper-item-container{align-items:center;display:flex;flex-basis:1em;flex-direction:column;flex-grow:1;flex-shrink:1;position:relative}.stepper.vertical .stepper-item-container{position:relative;width:fit-content}.stepper .stepper-item{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-sm)}.stepper.vertical .stepper-item{align-items:flex-start;flex-direction:row}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item{margin-bottom:var(--sgds-padding-xl)}.stepper .stepper-item.is-clickable:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.stepper.horizontal .stepper-item-container:not(:first-of-type) .stepper-item:before{background:var(--sgds-border-color-translucent);bottom:0;content:" ";height:var(--sgds-dimension-2);left:calc(-50% + 16px);position:absolute;top:15px;width:calc(100% - var(--sgds-dimension-32))}.stepper.vertical .stepper-item-container:not(:last-child) .stepper-item:after{background:var(--sgds-bg-translucent);bottom:0;content:" ";height:calc(100% - var(--sgds-dimension-32));left:15px;position:absolute;top:32px;width:var(--sgds-dimension-2)}.stepper.horizontal .stepper-item-container .stepper-item.is-active:before,.stepper.horizontal .stepper-item-container .stepper-item.is-completed:before,.stepper.vertical .stepper-item-container .stepper-item.is-completed:after{background:var(--sgds-primary-border-color-default)}.stepper .stepper-item.is-clickable{cursor:pointer}.stepper .stepper-marker{align-items:center;background:var(--sgds-bg-translucent);border:var(--sgds-border-width-2) solid var(--sgds-border-color-transparent);border-radius:50%;color:var(--sgds-color-default);display:flex;height:var(--sgds-dimension-32);justify-content:center;width:var(--sgds-dimension-32);z-index:1}.stepper:not(.vertical) .stepper-detail{max-width:var(--sgds-dimension-128);text-align:center}.stepper.vertical .stepper-detail{padding:var(--sgds-padding-2-xs) 0 0;text-align:left}.stepper .stepper-item:not(.is-active):not(.is-completed) .stepper-detail{color:var(--sgds-color-subtle)}.stepper .stepper-item.is-clickable:focus .stepper-marker,.stepper .stepper-item.is-clickable:focus-visible .stepper-marker,.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--sgds-primary-surface-emphasis);border-color:var(--sgds-border-color-transparent);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-clickable:focus .stepper-detail,.stepper .stepper-item.is-clickable:focus-visible .stepper-detail,.stepper .stepper-item.is-clickable:hover .stepper-detail{color:var(--sgds-primary-color-emphasis)}.stepper .stepper-item.is-clickable .stepper-detail,.stepper.clickable .stepper-item.is-active .stepper-detail{color:var(--sgds-primary-color-default)}.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-primary-surface-default);color:var(--sgds-color-fixed-light)}.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--sgds-bg-transparent);border:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-primary-color-default)}`;class Ad extends He{constructor(){super(...arguments),this.steps=[],this.activeStep=0,this.orientation="horizontal",this.clickable=!1,this.linear=!1,this.defaultActiveStep=0,this._items=[],this._totalSteps=0,this._boundHandleItemClick=this._handleStepClick.bind(this),this.hasDefaultSlot=!1,this.hasSlotController=new Hi(this,"[default]")}connectedCallback(){super.connectedCallback(),this._totalSteps=this.steps.length,this.addEventListener("i-sgds-click",this._boundHandleItemClick)}_handleSlotChange(){this._items=this._slotNodes,this._totalSteps=this._items.length,this._updateStepItems()}updated(){this.hasDefaultSlot||(this.hasDefaultSlot=this.hasSlotController.test("[default]"))}_updateStepItems(){this._items&&this._items.length>0&&this._items.forEach((e,t)=>{e.stepIndex=t,e.active=this.activeStep===t,e.completed=e.completed||this.activeStep>t,e.clickable=this.linear?!e.disabled&&this.clickable&&(this.activeStep-1==t||this.activeStep+1==t):!e.disabled&&this.clickable,e.orientation=this.orientation,this._items.length>1&&(e.isFirstOfType=0===t,e.classList.toggle("last",t===this._items.length-1))})}getComponent(e=this.activeStep){var t,s;const i=this.hasDefaultSlot?this._items:this.steps;return console.log(e,this._items),i&&i.length>0?null===(t=i[e])||void 0===t?void 0:t.component:null===(s=this.steps[e])||void 0===s?void 0:s.component}nextStep(){var e;this.emit("sgds-next-step"),this.activeStep<this._totalSteps-1&&((null===(e=this._slotNodes[this.activeStep+1])||void 0===e?void 0:e.disabled)||this.activeStep++)}previousStep(){var e;this.emit("sgds-previous-step"),this.activeStep>0&&((null===(e=this._slotNodes[this.activeStep-1])||void 0===e?void 0:e.disabled)||this.activeStep--)}lastStep(){this.emit("sgds-last-step"),this.activeStep!==this._totalSteps-1&&(this.activeStep=this._totalSteps-1)}firstStep(){this.emit("sgds-first-step"),this.activeStep>0&&(this.activeStep=0)}reset(){this.emit("sgds-reset"),this.activeStep=this.defaultActiveStep}_onStepperItemClick(e){this.activeStep=e}_handleActiveStepChange(){this._updateStepItems(),this.emit("sgds-arrived")}_handleClickableChange(){this._updateStepItems()}_handleOrientationChange(){this._updateStepItems()}_handleKeyDown(e,t){"Enter"===e.key&&this._onStepperItemClick(t)}_handleStepClick(e){var t;const s=e;e.stopPropagation();const i=null===(t=s.detail)||void 0===t?void 0:t.stepIndex;this._onStepperItemClick(i)}render(){return te`
|
|
3906
3906
|
<div
|
|
3907
3907
|
class="stepper ${Ke({[`${this.orientation}`]:this.orientation,clickable:this.clickable})}"
|
|
3908
3908
|
>
|