@govtechsg/sgds-web-component 3.20.0-rc.0 → 3.20.0-rc.2

package/components/Stepper/sgds-step.d.ts

@@ -17,22 +17,20 @@ export declare class SgdsStep extends SgdsElement {
     iconName: string | undefined;
     /** Optional component to render for this step */
     component: unknown;
-    /** @internal The index of this step within the stepper */
-    stepIndex: number;
-    /** @internal Whether this step is currently active */
+    /** Whether this step is clickable */
+    clickable: boolean;
+    /** Whether this step is currently active */
     active: boolean;
-    /** @internal Whether this step is currently disabled */
+    /** Whether this step is currently disabled */
     disabled: boolean;
-    /** @internal Whether this step is completed */
+    /** Whether this step is completed */
     completed: boolean;
-    /** @internal Whether this step is clickable */
-    isClickable: boolean;
+    /** @internal The index of this step within the stepper */
+    stepIndex: number;
     /** @internal Orientation of parent stepper (horizontal or vertical) */
     orientation: "horizontal" | "vertical";
     /** @internal Whether this step is the first sgds-step of its type in the slot */
     isFirstOfType: boolean;
-    /** @internal Whether this step is completed */
-    _isCompleted: boolean;
     render(): import("lit").TemplateResult<1>;
     /**@internal */
     _handleClick(e?: PointerEvent): void;

package/components/Stepper/sgds-step.js

@@ -16,39 +16,37 @@ class SgdsStep extends SgdsElement {
         super(...arguments);
         /** The header text for the step */
         this.stepHeader = "";
-        /** @internal The index of this step within the stepper */
-        this.stepIndex = 0;
-        /** @internal Whether this step is currently active */
+        /** Whether this step is clickable */
+        this.clickable = false;
+        /** Whether this step is currently active */
         this.active = false;
-        /** @internal Whether this step is currently disabled */
+        /** Whether this step is currently disabled */
         this.disabled = false;
-        /** @internal Whether this step is completed */
+        /** Whether this step is completed */
         this.completed = false;
-        /** @internal Whether this step is clickable */
-        this.isClickable = false;
+        /** @internal The index of this step within the stepper */
+        this.stepIndex = 0;
         /** @internal Orientation of parent stepper (horizontal or vertical) */
         this.orientation = "horizontal";
         /** @internal Whether this step is the first sgds-step of its type in the slot */
         this.isFirstOfType = false;
-        /** @internal Whether this step is completed */
-        this._isCompleted = false;
     }
     render() {
-        const isValidClickable = !this.disabled && this.isClickable;
+        const isValidClickable = !this.disabled && this.clickable;
         return html `
       <div class="stepper-item-container">
         <div
           class="stepper-item ${classMap({
             first: this.isFirstOfType,
             active: this.active,
-            completed: this._isCompleted,
-            clickable: this.isClickable,
+            completed: this.completed,
+            clickable: this.clickable,
             vertical: this.orientation === "vertical",
             disabled: this.disabled
         })}"
           tabindex=${isValidClickable ? "0" : "-1"}
           aria-current=${this.active ? "step" : "false"}
-          aria-disabled=${this.disabled || (!this.active && !this._isCompleted) ? "true" : "false"}
+          aria-disabled=${this.disabled || (!this.active && !this.completed) ? "true" : "false"}
           @click="${isValidClickable ? e => this._handleClick(e) : null}"
           @keydown=${isValidClickable ? (e) => this._handleKeyDown(e) : null}
         >
@@ -95,8 +93,8 @@ __decorate([
     property({ type: Object })
 ], SgdsStep.prototype, "component", void 0);
 __decorate([
-    property({ type: Number })
-], SgdsStep.prototype, "stepIndex", void 0);
+    property({ type: Boolean })
+], SgdsStep.prototype, "clickable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsStep.prototype, "active", void 0);
@@ -107,17 +105,14 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsStep.prototype, "completed", void 0);
 __decorate([
-    property({ type: Boolean })
-], SgdsStep.prototype, "isClickable", void 0);
+    property({ type: Number })
+], SgdsStep.prototype, "stepIndex", void 0);
 __decorate([
     property({ type: String })
 ], SgdsStep.prototype, "orientation", void 0);
 __decorate([
     property({ type: Boolean })
 ], SgdsStep.prototype, "isFirstOfType", void 0);
-__decorate([
-    property({ type: Boolean })
-], SgdsStep.prototype, "_isCompleted", void 0);
 
 export { SgdsStep, SgdsStep as default };
 //# sourceMappingURL=sgds-step.js.map

package/components/Stepper/sgds-step.js.map

@@ -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  /** @internal The index of this step within the stepper */\n  @property({ type: Number })\n  stepIndex = 0;\n\n  /** @internal Whether this step is currently active */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** @internal Whether this step is currently disabled */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** @internal Whether this step is completed */\n  @property({ type: Boolean, reflect: true })\n  completed = false;\n\n  /** @internal Whether this step is clickable */\n  @property({ type: Boolean })\n  isClickable = false;\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  /** @internal Whether this step is completed */\n  @property({ type: Boolean })\n  _isCompleted = false;\n\n  render() {\n    const isValidClickable = !this.disabled && this.isClickable;\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._isCompleted,\n            clickable: this.isClickable,\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._isCompleted) ? \"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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"}
+{"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":";;;;;;;;AAOA;;;;AAIG;AACG,MAAO,QAAS,SAAQ,WAAW,CAAA;AAAzC,IAAA,WAAA,GAAA;;;QAOE,IAAU,CAAA,UAAA,GAAG,EAAE,CAAC;;QAYhB,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;;QAIlB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAIjB,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;;QAIlB,IAAS,CAAA,SAAA,GAAG,CAAC,CAAC;;QAId,IAAW,CAAA,WAAA,GAA8B,YAAY,CAAC;;QAItD,IAAa,CAAA,aAAA,GAAG,KAAK,CAAC;KAsDvB;IApDC,MAAM,GAAA;QACJ,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC;AAE1D,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGiB,8BAAA,EAAA,QAAQ,CAAC;YAC7B,KAAK,EAAE,IAAI,CAAC,aAAa;YACzB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;YACzC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;AACS,mBAAA,EAAA,gBAAgB,GAAG,GAAG,GAAG,IAAI,CAAA;yBACzB,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;0BAC7B,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,MAAM,GAAG,OAAO,CAAA;AAC3E,kBAAA,EAAA,gBAAgB,GAAG,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;AAClD,mBAAA,EAAA,gBAAgB,GAAG,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,CAAA;;;AAG7E,YAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA,CAAmB,gBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA,uBAAA,CAAyB,GAAG,IAAI,CAAC,SAAS,GAAG,CAAC,CAAA;;;;AAIvE,uCAAA,EAAA,IAAI,CAAC,UAAU,CAAA;;;;;KAKnD,CAAC;KACH;;AAGD,IAAA,YAAY,CAAC,CAAgB,EAAA;QAC3B,IAAI,CAAC,EAAE;AACL,YAAA,MAAM,GAAG,GAAG,CAAC,CAAC,MAAqB,CAAC;;;AAIpC,YAAA,IAAI,GAAG,CAAC,YAAY,CAAC,gBAAgB,CAAC;gBAAE,OAAO;SAChD;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;KACtE;;AAGD,IAAA,cAAc,CAAC,KAAoB,EAAA;AACjC,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;KACF;;AA/FM,QAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAS,CAApC,CAAsC;AACnD;AACO,QAAA,CAAA,YAAY,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;AAIhD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIhB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACb,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI7B,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACR,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACV,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIlB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIf,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACzB,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIlB,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACb,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAId,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAC2B,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAItD,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACN,CAAA,EAAA,QAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Stepper/sgds-stepper.js

@@ -74,8 +74,8 @@ class SgdsStepper extends SgdsElement {
             this._items.forEach((item, index) => {
                 item.stepIndex = index;
                 item.active = this.activeStep === index;
-                item._isCompleted = item.completed || this.activeStep > index;
-                item.isClickable = this.linear
+                item.completed = item.completed || this.activeStep > index;
+                item.clickable = this.linear
                     ? !item.disabled && this.clickable && (this.activeStep - 1 == index || this.activeStep + 1 == index)
                     : !item.disabled && this.clickable;
                 item.orientation = this.orientation;

package/components/Stepper/sgds-stepper.js.map

@@ -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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"}
+{"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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"}

package/components/index.umd.min.js

@@ -2866,7 +2866,7 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
         </div>
         ${this._renderFeedback()}
       </div>
-    `}}Nr.styles=[...Rr.styles,Or],t([Ve({type:String})],Nr.prototype,"minDate",void 0),t([Ve({type:String})],Nr.prototype,"maxDate",void 0),t([Ve({type:String,reflect:!0})],Nr.prototype,"mode",void 0),t([Le("input")],Nr.prototype,"shadowInput",void 0);var Ur=r`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}.datepicker-container{display:flex}.calendar-btn:not(.with-hint-text){align-self:center}.calendar-btn:not(.with-hint-text).with-label{align-self:end;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}.calendar-btn.with-hint-text.with-label{align-self:center;margin-top:calc(var(--sgds-line-height-24) - var(--sgds-line-height-20))}`;class qr extends(Sa(Ni)){constructor(){super(),this.required=!1,this.disabled=!1,this.value="",this.initialValue=[],this.dateFormat="DD/MM/YYYY",this.minDate="",this.maxDate="",this.mode="single",this.hasFeedback=!1,this.label="",this.hintText="",this.noFlip=!1,this.drop="down",this.defaultValue="",this.invalid=!1,this.view="days",this.selectedDateRange=[],this.focusedTabIndex=3,this.initialDisplayDate=new Date,this._makeInputValueString=(e,t,s)=>{if(!e&&!t)return this.value;const i=e=>Ro(e,qn[s].fnsPattern);switch(this.mode){case"single":e&&(this.value=i(e));break;case"range":e&&t&&(this.value=`${i(e)} - ${i(t)}`),e&&!t&&(this.value=`${i(e)} - ${this.dateFormat}`)}return this.value},this._dialogAriaLabels={days:"Choose date",months:"Choose month",years:"Choose year"},this.floatingOpts={placement:"bottom-end"}}isValueEmpty(){return""===this.value||"DD/MM/YYYY"===this.value||"DD/MM/YYYY - DD/MM/YYYY"===this.value}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async connectedCallback(){if(super.connectedCallback(),this.addEventListener("sgds-view",this._handleViewChanged),this.addEventListener("sgds-change-calendar",this._handleDateChanged),this.addEventListener("sgds-update-focus",this._handleFocusDateChanged),this.addEventListener("sgds-selectmonth",this._handleSelectMonth),this.addEventListener("sgds-selectyear",this._handleSelectYear),this.addEventListener("sgds-selectdates",this._handleSelectDatesAndClose),this.addEventListener("sgds-selectdates-input",this._handleSelectDatesInput),this.addEventListener("sgds-empty-input",this._handleEmptyInput),this.addEventListener("keydown",this._handleTab),this.addEventListener("sgds-hide",this._handleCloseMenu),this.addEventListener("sgds-show",this._handleOpenMenu),this.addEventListener("blur",this._mixinCheckValidity),this.initialValue=this.value?this.value.split(" - ").map(e=>e.trim()):this.initialValue,this.initialDisplayDate=this.displayDate||new Date,this.initialValue&&this.initialValue.length>0){const e=new RegExp(this._getDateFormatRegex()),t=this.initialValue.filter(t=>!e.test(t));if(t.length>0)return console.error("Invalid date format in initialValue:",t);{const e=this.initialValue.map(e=>Wn(Nn(e,qn[this.dateFormat].fnsPattern,new Date)));this._handleSelectDates(e)}}else this.displayDate=this.initialDisplayDate}async firstUpdated(e){if(super.firstUpdated(e),this.menuIsOpen){const e=await this.datepickerInputAsync;await this.updateFloatingPosition();(await this.calendar).focusOnCalendar(e)}}_getDateFormatRegex(){return this.dateFormat.replace(/[.*+?^${}()|[\]\\]/g,"\\$&").replace("MM","\\d{2}").replace("DD","\\d{2}").replace("YYYY","\\d{4}").replace("/","\\/")}_handleTab(e){if(!this.menuIsOpen)return;const t=Array(4);e.shiftKey&&"Tab"===e.key?(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+t.length)%t.length):"Tab"===e.key&&(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+t.length)%t.length)}_handleValueChange(){this.emit("sgds-change-date")}async _handleCloseMenu(){if((await this.datepickerInputAsync).focus(),0===this.selectedDateRange.length)this.displayDate=this.initialDisplayDate;else{const e=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[e-1];(await this.calendar)._updateFocusedDate()}}async _handleOpenMenu(){const e=await this.calendar,t=await this.datepickerInputAsync;e.focusOnCalendar(t)}_handleSelectDatesInput(e){this._handleSelectDates(e.detail)}async _handleSelectDates(e){e.sort((e,t)=>e.getTime()-t.getTime()),this.displayDate=e[0],this.focusedDate=e[0],this.selectedDateRange=e;const t=this._makeInputValueString(this.selectedDateRange[0],this.selectedDateRange[1],this.dateFormat);this.value=t;(await this.datepickerInputAsync).updateMaskValue(),this._manageInternalsValid()}async _handleSelectDatesAndClose(e){await this._handleSelectDates(e.detail),("range"===this.mode&&2===this.selectedDateRange.length||"single"===this.mode&&1===this.selectedDateRange.length)&&this.hideMenu()}_handleViewChanged(e){this.view=e.detail}_handleDateChanged(e){this.displayDate=e.detail}_handleFocusDateChanged(e){this.focusedDate=e.detail}_handleSelectMonth(e){this.displayDate=e.detail}_handleSelectYear(e){this.displayDate=e.detail}async _handleInvalidInput(){this.selectedDateRange=[],this.displayDate=this.initialDisplayDate,this.invalid=!0,this._manageInternalsBadInput()}async _handleEmptyInput(){this.required&&this._manageEmptyInput()}async _resetDatepicker(e=""){this.displayDate=this.initialDisplayDate,this.selectedDateRange=[],this.value=e,this.view="days";const t=await this.datepickerInputAsync;t.setInvalid(!1),t.destroyInputMask(),await t.applyInputMask(),this._mixinResetValidity(t),this.isValueEmpty()&&this._handleEmptyInput()}_manageInternalsBadInput(){this._mixinSetValidity({badInput:!0},"Invalid date input",this.datepickerInput)}_manageEmptyInput(){this._mixinSetValidity({valueMissing:!0},"Please fill in this field",this.datepickerInput)}_manageInternalsValid(){this._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1,this._mixinSetFormValue()}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(e){this.value=e.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return te`
+    `}}Nr.styles=[...Rr.styles,Or],t([Ve({type:String})],Nr.prototype,"minDate",void 0),t([Ve({type:String})],Nr.prototype,"maxDate",void 0),t([Ve({type:String,reflect:!0})],Nr.prototype,"mode",void 0),t([Le("input")],Nr.prototype,"shadowInput",void 0);var Ur=r`:host{--datepicker-theme-color:var(--sgds-primary);--datepicker-hover-bg:var(--sgds-primary-100);--datepicker-bg:#fff;--datepicker-close-btn-bg:var(--datepicker-theme-color);--datepicker-close-btn-hover-bg:var(--sgds-primary-700);--datepicker-close-btn-color:#fff;--datepicker-selected-date-bg:var(--sgds-primary);--datepicker-selected-date-color:#fff;font-size:var(--sgds-font-size-14)}:host([menuisopen]:not([disabled]):not([readonly])) .dropdown-menu{background-color:var(--sgds-form-surface-default);display:flex;flex-direction:column;gap:var(--sgds-form-gap-sm);overflow:unset;padding:var(--sgds-form-padding-y) var(--sgds-form-padding-x);width:var(--sgds-dimension-320)}.dropdown{display:flex;height:100%}sgds-datepicker-input{--input-border-radius:var(--sgds-form-border-radius-md) 0 0 var(--sgds-form-border-radius-md);flex:1;margin-right:0}sgds-icon-button{--btn-border-radius:0 var(--sgds-form-border-radius-md) var(--sgds-form-border-radius-md) 0}.m-width-160{min-width:var(--sgds-dimension-160)}`;class qr extends(Sa(Ni)){constructor(){super(),this.required=!1,this.disabled=!1,this.noValidate=!1,this.value="",this.initialValue=[],this.dateFormat="DD/MM/YYYY",this.minDate="",this.maxDate="",this.mode="single",this.hasFeedback=!1,this.label="",this.hintText="",this.noFlip=!1,this.drop="down",this.defaultValue="",this.invalid=!1,this.view="days",this.selectedDateRange=[],this.focusedTabIndex=3,this.initialDisplayDate=new Date,this._makeInputValueString=(e,t,s)=>{if(!e&&!t)return this.value;const i=e=>Ro(e,qn[s].fnsPattern);switch(this.mode){case"single":e&&(this.value=i(e));break;case"range":e&&t&&(this.value=`${i(e)} - ${i(t)}`),e&&!t&&(this.value=`${i(e)} - ${this.dateFormat}`)}return this.value},this._dialogAriaLabels={days:"Choose date",months:"Choose month",years:"Choose year"},this.floatingOpts={placement:"bottom-end"}}isValueEmpty(){return""===this.value||"DD/MM/YYYY"===this.value||"DD/MM/YYYY - DD/MM/YYYY"===this.value}reportValidity(){return this._mixinReportValidity()}checkValidity(){return this._mixinCheckValidity()}setInvalid(e){this.invalid=e,this.datepickerInput&&this.datepickerInput.setInvalid(e)}setValidity(e,t,s){return this._mixinSetValidity(e,t,s)}get validity(){return this._mixinGetValidity()}get validationMessage(){return this._mixinGetValidationMessage()}async connectedCallback(){if(super.connectedCallback(),this.addEventListener("sgds-view",this._handleViewChanged),this.addEventListener("sgds-change-calendar",this._handleDateChanged),this.addEventListener("sgds-update-focus",this._handleFocusDateChanged),this.addEventListener("sgds-selectmonth",this._handleSelectMonth),this.addEventListener("sgds-selectyear",this._handleSelectYear),this.addEventListener("sgds-selectdates",this._handleSelectDatesAndClose),this.addEventListener("sgds-selectdates-input",this._handleSelectDatesInput),this.addEventListener("sgds-empty-input",this._handleEmptyInput),this.addEventListener("keydown",this._handleTab),this.addEventListener("sgds-hide",this._handleCloseMenu),this.addEventListener("sgds-show",this._handleOpenMenu),this.addEventListener("blur",this._mixinCheckValidity),this.initialValue=this.value?this.value.split(" - ").map(e=>e.trim()):this.initialValue,this.initialDisplayDate=this.displayDate||new Date,this.initialValue&&this.initialValue.length>0){const e=new RegExp(this._getDateFormatRegex()),t=this.initialValue.filter(t=>!e.test(t));if(t.length>0)return console.error("Invalid date format in initialValue:",t);{const e=this.initialValue.map(e=>Wn(Nn(e,qn[this.dateFormat].fnsPattern,new Date)));this._handleSelectDates(e)}}else this.displayDate=this.initialDisplayDate;(await this.datepickerInputAsync).setInvalid(this.invalid)}async firstUpdated(e){if(super.firstUpdated(e),this.menuIsOpen){const e=await this.datepickerInputAsync;await this.updateFloatingPosition();(await this.calendar).focusOnCalendar(e)}}_getDateFormatRegex(){return this.dateFormat.replace(/[.*+?^${}()|[\]\\]/g,"\\$&").replace("MM","\\d{2}").replace("DD","\\d{2}").replace("YYYY","\\d{4}").replace("/","\\/")}_handleTab(e){if(!this.menuIsOpen)return;const t=Array(4);e.shiftKey&&"Tab"===e.key?(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex-1+t.length)%t.length):"Tab"===e.key&&(e.preventDefault(),this.focusedTabIndex=(this.focusedTabIndex+1+t.length)%t.length)}_handleValueChange(){this.emit("sgds-change-date")}async _handleCloseMenu(){if((await this.datepickerInputAsync).focus(),0===this.selectedDateRange.length)this.displayDate=this.initialDisplayDate;else{const e=this.selectedDateRange.length;this.displayDate=this.selectedDateRange[e-1];(await this.calendar)._updateFocusedDate()}}async _handleOpenMenu(){const e=await this.calendar,t=await this.datepickerInputAsync;e.focusOnCalendar(t)}_handleSelectDatesInput(e){this._handleSelectDates(e.detail)}async _handleSelectDates(e){e.sort((e,t)=>e.getTime()-t.getTime()),this.displayDate=e[0],this.focusedDate=e[0],this.selectedDateRange=e;const t=this._makeInputValueString(this.selectedDateRange[0],this.selectedDateRange[1],this.dateFormat);this.value=t;(await this.datepickerInputAsync).updateMaskValue(),this._manageInternalsValid()}async _handleSelectDatesAndClose(e){await this._handleSelectDates(e.detail),("range"===this.mode&&2===this.selectedDateRange.length||"single"===this.mode&&1===this.selectedDateRange.length)&&this.hideMenu()}_handleViewChanged(e){this.view=e.detail}_handleDateChanged(e){this.displayDate=e.detail}_handleFocusDateChanged(e){this.focusedDate=e.detail}_handleSelectMonth(e){this.displayDate=e.detail}_handleSelectYear(e){this.displayDate=e.detail}async _handleInvalidInput(){this.selectedDateRange=[],this.displayDate=this.initialDisplayDate,this._mixinShouldSkipSgdsValidation()||(this.invalid=!0,this._manageInternalsBadInput())}async _handleEmptyInput(){this.required&&this._manageEmptyInput()}async _resetDatepicker(e=""){this.displayDate=this.initialDisplayDate,this.selectedDateRange=[],this.value=e,this.view="days";const t=await this.datepickerInputAsync;t.setInvalid(this.invalid),t.destroyInputMask(),await t.applyInputMask(),this._mixinResetValidity(t),this.isValueEmpty()&&this._handleEmptyInput()}_manageInternalsBadInput(){this._mixinSetValidity({badInput:!0},"Invalid date input",this.datepickerInput)}_manageEmptyInput(){this._mixinSetValidity({valueMissing:!0},"Please fill in this field",this.datepickerInput)}_manageInternalsValid(){this._mixinShouldSkipSgdsValidation()||(this._mixinSetValidity({}),this.invalid=this.datepickerInput.invalid=!1,this._mixinSetFormValue())}async _mixinResetFormControl(){this._resetDatepicker(this.defaultValue)}async _handleInputMaskChange(e){this.value=e.detail,this.isValueEmpty()&&this._resetDatepicker()}render(){return te`
       <div class="datepicker-container m-width-160">
         <sgds-datepicker-input
           .value=${fa(this.value)}
@@ -2886,22 +2886,23 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
           hasFeedback=${Ft(this.hasFeedback?"both":void 0)}
           ?readonly=${this.readonly}
         >
+          <sgds-icon-button
+            slot="calendar-btn"
+            ${rs(this.myDropdown)}
+            tone="neutral"
+            class=${Ke({"calendar-btn":!0,"with-hint-text":this.hintText||this.invalid,"with-label":this.label})}
+            aria-expanded="${this.menuIsOpen}"
+            aria-haspopup="dialog"
+            aria-controls=${this.dropdownMenuId}
+            @click=${()=>this.toggleMenu()}
+            ariaLabel=${this.menuIsOpen?"Close Calendar":"Open Calendar"}
+            ?disabled=${this.disabled||this.readonly}
+            ?active=${this.menuIsOpen}
+            variant="outline"
+            name="calendar"
+          >
+          </sgds-icon-button>
         </sgds-datepicker-input>
-        <sgds-icon-button
-          ${rs(this.myDropdown)}
-          tone="neutral"
-          class=${Ke({"calendar-btn":!0,"with-hint-text":this.hintText||this.invalid,"with-label":this.label})}
-          aria-expanded="${this.menuIsOpen}"
-          aria-haspopup="dialog"
-          aria-controls=${this.dropdownMenuId}
-          @click=${()=>this.toggleMenu()}
-          ariaLabel=${this.menuIsOpen?"Close Calendar":"Open Calendar"}
-          ?disabled=${this.disabled||this.readonly}
-          ?active=${this.menuIsOpen}
-          variant="outline"
-          name="calendar"
-        >
-        </sgds-icon-button>
         <ul
           id=${this.dropdownMenuId}
           class="sgds datepicker dropdown-menu"
@@ -2929,7 +2930,7 @@ const Pa=(e,t,s)=>{const i=new Map;for(let a=t;a<=s;a++)i.set(e[a],a);return i};
           ></sgds-datepicker-calendar>
         </ul>
       </div>
-    `}}qr.styles=[...Ni.styles,qi,Ur],qr.dependencies={"sgds-datepicker-input":Nr,"sgds-datepicker-calendar":Qn,"sgds-datepicker-header":sr,"sgds-button":ra,"sgds-icon-button":er},t([Ve({type:Boolean,reflect:!0})],qr.prototype,"required",void 0),t([Ve({reflect:!0})],qr.prototype,"name",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"disabled",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"value",void 0),t([Ve({type:Array,reflect:!0})],qr.prototype,"initialValue",void 0),t([Ve({type:String})],qr.prototype,"minDate",void 0),t([Ve({type:String})],qr.prototype,"maxDate",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"mode",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"invalidFeedback",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"hasFeedback",void 0),t([Ve({reflect:!0})],qr.prototype,"label",void 0),t([Ve({reflect:!0})],qr.prototype,"hintText",void 0),t([Ve({type:Boolean,reflect:!0,state:!1})],qr.prototype,"noFlip",void 0),t([Ve({type:String,reflect:!0,state:!1})],qr.prototype,"drop",void 0),t([Ve({attribute:!1})],qr.prototype,"displayDate",void 0),t([_a()],qr.prototype,"defaultValue",void 0),t([Ee()],qr.prototype,"invalid",void 0),t([Ee()],qr.prototype,"view",void 0),t([Ee()],qr.prototype,"selectedDateRange",void 0),t([Ee()],qr.prototype,"focusedDate",void 0),t([Ee()],qr.prototype,"focusedTabIndex",void 0),t([Le("sgds-datepicker-calendar")],qr.prototype,"calendar",void 0),t([Le("sgds-datepicker-input")],qr.prototype,"datepickerInputAsync",void 0),t([Ze("sgds-datepicker-input")],qr.prototype,"datepickerInput",void 0),t([ot("value",{waitUntilFirstUpdate:!0})],qr.prototype,"_handleValueChange",null);var Yr=r`:host([bordered][islastchild]) .container:last-child{border-bottom:none}.container{align-items:flex-start;border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:flex-start;padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}.data-container,.label-container{flex:1}.label-container{max-width:var(--sgds-dimension-280)}.label{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold)}.data,.label{font-size:var(--sgds-font-size-16)}.data{color:var(--sgds-color-subtle);font-weight:var(--sgds-font-weight-regular);margin:0}@media (min-width:512px){:host(:not([stacked])) .container{flex-direction:row;gap:var(--sgds-gap-2-xl)}}`;let jr=0;class Wr extends He{constructor(){super(...arguments),this.attrId=++jr,this.componentId=`sgds-description-list-${this.attrId}`,this.stacked=!1,this.bordered=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","listitem")}render(){return te`
+    `}}qr.styles=[...Ni.styles,qi,Ur],qr.dependencies={"sgds-datepicker-input":Nr,"sgds-datepicker-calendar":Qn,"sgds-datepicker-header":sr,"sgds-button":ra,"sgds-icon-button":er},t([Ve({type:Boolean,reflect:!0})],qr.prototype,"required",void 0),t([Ve({reflect:!0})],qr.prototype,"name",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"disabled",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"noValidate",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"value",void 0),t([Ve({type:Array,reflect:!0})],qr.prototype,"initialValue",void 0),t([Ve({type:String})],qr.prototype,"minDate",void 0),t([Ve({type:String})],qr.prototype,"maxDate",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"mode",void 0),t([Ve({type:String,reflect:!0})],qr.prototype,"invalidFeedback",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"hasFeedback",void 0),t([Ve({reflect:!0})],qr.prototype,"label",void 0),t([Ve({reflect:!0})],qr.prototype,"hintText",void 0),t([Ve({type:Boolean,reflect:!0,state:!1})],qr.prototype,"noFlip",void 0),t([Ve({type:String,reflect:!0,state:!1})],qr.prototype,"drop",void 0),t([Ve({attribute:!1})],qr.prototype,"displayDate",void 0),t([_a()],qr.prototype,"defaultValue",void 0),t([Ve({type:Boolean,reflect:!0})],qr.prototype,"invalid",void 0),t([Ee()],qr.prototype,"view",void 0),t([Ee()],qr.prototype,"selectedDateRange",void 0),t([Ee()],qr.prototype,"focusedDate",void 0),t([Ee()],qr.prototype,"focusedTabIndex",void 0),t([Le("sgds-datepicker-calendar")],qr.prototype,"calendar",void 0),t([Le("sgds-datepicker-input")],qr.prototype,"datepickerInputAsync",void 0),t([Ze("sgds-datepicker-input")],qr.prototype,"datepickerInput",void 0),t([ot("value",{waitUntilFirstUpdate:!0})],qr.prototype,"_handleValueChange",null);var Yr=r`:host([bordered][islastchild]) .container:last-child{border-bottom:none}.container{align-items:flex-start;border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs);justify-content:flex-start;padding:var(--sgds-padding-lg) var(--sgds-padding-xl)}.data-container,.label-container{flex:1}.label-container{max-width:var(--sgds-dimension-280)}.label{color:var(--sgds-color-default);font-weight:var(--sgds-font-weight-semibold)}.data,.label{font-size:var(--sgds-font-size-16)}.data{color:var(--sgds-color-subtle);font-weight:var(--sgds-font-weight-regular);margin:0}@media (min-width:512px){:host(:not([stacked])) .container{flex-direction:row;gap:var(--sgds-gap-2-xl)}}`;let jr=0;class Wr extends He{constructor(){super(...arguments),this.attrId=++jr,this.componentId=`sgds-description-list-${this.attrId}`,this.stacked=!1,this.bordered=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","listitem")}render(){return te`
       <div class="container">
         <div class="label-container">
           <span class="label">
@@ -3882,13 +3883,13 @@ const Yl="important",jl=" !"+Yl;const Wl=je(class extends We{constructor(e){if(s
                 style=${this.borderRadius?`border-radius: ${this.borderRadius}`:ae}
               ></div>`}):ae}
       </div>
-    `}}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.stepIndex=0,this.active=!1,this.disabled=!1,this.completed=!1,this.isClickable=!1,this.orientation="horizontal",this.isFirstOfType=!1,this._isCompleted=!1}render(){const e=!this.disabled&&this.isClickable;return te`
+    `}}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`
       <div class="stepper-item-container">
         <div
-          class="stepper-item ${Ke({first:this.isFirstOfType,active:this.active,completed:this._isCompleted,clickable:this.isClickable,vertical:"vertical"===this.orientation,disabled:this.disabled})}"
+          class="stepper-item ${Ke({first:this.isFirstOfType,active:this.active,completed:this.completed,clickable:this.clickable,vertical:"vertical"===this.orientation,disabled:this.disabled})}"
           tabindex=${e?"0":"-1"}
           aria-current=${this.active?"step":"false"}
-          aria-disabled=${this.disabled||!this.active&&!this._isCompleted?"true":"false"}
+          aria-disabled=${this.disabled||!this.active&&!this.completed?"true":"false"}
           @click="${e?e=>this._handleClick(e):null}"
           @keydown=${e?e=>this._handleKeyDown(e):null}
         >
@@ -3902,7 +3903,7 @@ const Yl="important",jl=" !"+Yl;const Wl=je(class extends We{constructor(e){if(s
           </div>
         </div>
       </div>
-    `}_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:Number})],Md.prototype,"stepIndex",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:Boolean})],Md.prototype,"isClickable",void 0),t([Ve({type:String})],Md.prototype,"orientation",void 0),t([Ve({type:Boolean})],Md.prototype,"isFirstOfType",void 0),t([Ve({type:Boolean})],Md.prototype,"_isCompleted",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._isCompleted=e.completed||this.activeStep>t,e.isClickable=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`
+    `}_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`
       <div
         class="stepper ${Ke({[`${this.orientation}`]:this.orientation,clickable:this.clickable})}"
       >