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

package/react/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":";;;;;;;;;;;;AAaA;;;;;;;;;;;AAWG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;AAIE;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAoB,EAAE,CAAC;;QAI5B,IAAU,CAAA,UAAA,GAAG,CAAC,CAAC;;QAG4B,IAAW,CAAA,WAAA,GAAuB,YAAY,CAAC;;QAG9C,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;;QAGlB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAI3D,IAAiB,CAAA,iBAAA,GAAG,CAAC,CAAC;;QAMd,IAAM,CAAA,MAAA,GAAe,EAAE,CAAC;QACxB,IAAW,CAAA,WAAA,GAAG,CAAC,CAAC;;QAGhB,IAAqB,CAAA,qBAAA,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEjE;;;;;;AAMG;QAC0B,IAAc,CAAA,cAAA,GAAG,KAAK,CAAC;QACnC,IAAiB,CAAA,iBAAA,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;KA6K/E;IA3KC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;KACnE;;IAGO,iBAAiB,GAAA;AACvB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC;QAC9B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QAEtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,OAAO,GAAA;QACL,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAC1F;;IAGO,gBAAgB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YACzC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AAClC,gBAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,KAAK,KAAK,CAAC;AACxC,gBAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;AAC3D,gBAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM;sBACxB,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,KAAK,CAAC;sBAClG,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC;AACrC,gBAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;gBAEpC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;AAC1B,oBAAA,IAAI,CAAC,aAAa,GAAG,KAAK,KAAK,CAAC,CAAC;AACjC,oBAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;iBACjE;AACH,aAAC,CAAC,CAAC;SACJ;KACF;;AAGM,IAAA,YAAY,CAAC,IAAA,GAAe,IAAI,CAAC,UAAU,EAAA;;AAChD,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7D,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAE/B,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;AAC7B,YAAA,OAAO,MAAA,KAAK,CAAC,IAAI,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,SAAS,CAAC;SAC/B;QACD,OAAO,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAS,CAAC;KACpC;;IAGM,QAAQ,GAAA;;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC5B,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;AAC1C,YAAA,IAAI,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,0CAAE,QAAQ,CAAA,EAAE;gBACnD,IAAI,CAAC,UAAU,EAAE,CAAC;aACnB;SACF;KACF;;IAGM,YAAY,GAAA;;AACjB,QAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;AAEhC,QAAA,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE;AACvB,YAAA,IAAI,EAAC,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,0CAAE,QAAQ,CAAA,EAAE;gBACnD,IAAI,CAAC,UAAU,EAAE,CAAC;aACnB;SACF;KACF;;IAGM,QAAQ,GAAA;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAC5B,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;YAC5C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;SACxC;KACF;;IAGM,SAAS,GAAA;AACd,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;AAC7B,QAAA,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,EAAE;AACvB,YAAA,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;SACrB;KACF;;IAGM,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;AACxB,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,iBAAiB,CAAC;KAC1C;;AAGD,IAAA,mBAAmB,CAAC,KAAa,EAAA;AAC/B,QAAA,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;;IAID,uBAAuB,GAAA;QACrB,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACxB,QAAA,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC3B;;IAID,sBAAsB,GAAA;QACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;IAID,wBAAwB,GAAA;QACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;;IAGD,cAAc,CAAC,KAAoB,EAAE,KAAa,EAAA;AAChD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;AACzB,YAAA,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;SACjC;KACF;;AAGD,IAAA,gBAAgB,CAAC,CAAQ,EAAA;;QACvB,MAAM,KAAK,GAAG,CAAgB,CAAC;QAC/B,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,MAAM,SAAS,GAAG,CAAA,EAAA,GAAA,KAAK,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,SAAS,CAAC;AAC1C,QAAA,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;KACrC;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEU,uBAAA,EAAA,QAAQ,CAAC;YACxB,CAAC,CAAA,EAAG,IAAI,CAAC,WAAW,EAAE,GAAG,IAAI,CAAC,WAAW;YACzC,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CAAA;;AAEkB,0BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;UAExC,CAAC,IAAI,CAAC,cAAc;AACpB,cAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,KAAK,KAAI;AACvD,gBAAA,OAAO,IAAI,CAAA,CAAA;;;AAGiB,wCAAA,EAAA,QAAQ,CAAC;AAC7B,oBAAA,WAAW,EAAE,IAAI,CAAC,UAAU,KAAK,KAAK;AACtC,oBAAA,cAAc,EAAE,IAAI,CAAC,UAAU,GAAG,KAAK;oBACvC,cAAc,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK;iBAC1D,CAAC,CAAA;AACS,6BAAA,EAAA,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,GAAG,KAAK,GAAG,GAAG,GAAG,IAAI,CAAA;mCAClD,IAAI,CAAC,UAAU,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;oCAC3C,IAAI,CAAC,UAAU,IAAI,KAAK,GAAG,MAAM,GAAG,OAAO,CAAA;AACjD,4BAAA,EAAA,IAAI,CAAC,SAAS,GAAG,MAAM,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAA;+BAC5D,IAAI,CAAC,SAAS,GAAG,CAAC,CAAgB,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG,IAAI,CAAA;;;AAGlF,sBAAA,EAAA,QAAQ,GAAG,IAAI,CAAA,CAAA,gBAAA,EAAmB,QAAQ,CAAA,uBAAA,CAAyB,GAAG,KAAK,GAAG,CAAC,CAAA;;kDAErD,IAAI,CAAA;;;eAGvC,CAAC;AACJ,aAAC,CAAC;AACJ,cAAE,OAAO,CAAA;;KAEd,CAAC;KACH;;AAxNM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAY,CAAvC,CAAyC;AACtD;AACO,WAAA,CAAA,YAAY,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;AAKhD,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AACE,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI5B,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC3B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG4B,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG9C,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGlB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI3D,UAAA,CAAA;IADC,YAAY,CAAC,YAAY,CAAC;AACL,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGW,UAAA,CAAA;AAAhC,IAAA,qBAAqB,EAAE;AAAiC,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAgB5B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAAwB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuGpD,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAInD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,yBAAA,EAAA,IAAA,CAAA,CAAA;AAID,UAAA,CAAA;IADC,KAAK,CAAC,WAAW,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAGlD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,wBAAA,EAAA,IAAA,CAAA,CAAA;AAID,UAAA,CAAA;IADC,KAAK,CAAC,aAAa,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAGpD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,0BAAA,EAAA,IAAA,CAAA;;;;"}

package/react/datepicker/index.cjs.js

@@ -35,6 +35,8 @@ var index = react.createComponent({
     elementClass: sgdsDatepicker.SgdsDatepicker,
     events: {
         onSgdsChangeDate: "sgds-change-date",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid",
         onSgdsShow: "sgds-show",
         onSgdsAfterShow: "sgds-after-show",
         onSgdsHide: "sgds-hide",

package/react/datepicker/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/datepicker/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Datepicker/sgds-datepicker\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-datepicker\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-datepicker\",\n  elementClass: Component,\n  events: {\n    onSgdsChangeDate: \"sgds-change-date\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,iBAAiB,EAAEC,6BAAS,CAAC,CAAC;AAEvC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAEF,6BAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,gBAAgB,EAAE,kBAAkB;AACpC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/datepicker/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Datepicker/sgds-datepicker\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-datepicker\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-datepicker\",\n  elementClass: Component,\n  events: {\n    onSgdsChangeDate: \"sgds-change-date\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,iBAAiB,EAAEC,6BAAS,CAAC,CAAC;AAEvC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAEF,6BAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,gBAAgB,EAAE,kBAAkB;AACpC,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/datepicker/index.js

@@ -11,6 +11,8 @@ var index = createComponent({
     elementClass: SgdsDatepicker,
     events: {
         onSgdsChangeDate: "sgds-change-date",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid",
         onSgdsShow: "sgds-show",
         onSgdsAfterShow: "sgds-after-show",
         onSgdsHide: "sgds-hide",

package/react/datepicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/datepicker/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Datepicker/sgds-datepicker\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-datepicker\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-datepicker\",\n  elementClass: Component,\n  events: {\n    onSgdsChangeDate: \"sgds-change-date\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,iBAAiB,EAAEA,cAAS,CAAC,CAAC;AAEvC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAEA,cAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,gBAAgB,EAAE,kBAAkB;AACpC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/datepicker/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Datepicker/sgds-datepicker\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-datepicker\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-datepicker\",\n  elementClass: Component,\n  events: {\n    onSgdsChangeDate: \"sgds-change-date\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,iBAAiB,EAAEA,cAAS,CAAC,CAAC;AAEvC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,YAAY,EAAEA,cAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,gBAAgB,EAAE,kBAAkB;AACpC,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AAClC,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,eAAe,EAAE,iBAAiB;AACnC,KAAA;AACF,CAAA,CAAC;;;;"}

package/types/react.d.ts

@@ -428,6 +428,8 @@ export interface SgdsDatepickerProps extends SgdsBaseProps {
   name?: string;
   /** When true, adds disabled attribute to input and button element */
   disabled?: boolean;
+  /** Disables native and sgds validation for the datepicker. */
+  noValidate?: boolean;
   /** Sets the initial value of the datepicker. Replaces deprecated `initialValue`.
 Pass in dates in this format `dd/mm/yyyy` for single mode and  `dd/mm/yyyy - dd/mm/yyyy` for range mode
 For example, `value="22/12/2023"` for single mode or `value="22/12/2023 - 25/12/2023"` for range mode */
@@ -459,6 +461,8 @@ range mode as array of string. eg.'["22/12/2023"]' for single &
   displayDate?: Date;
   /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */
   defaultValue?: string;
+  /** Marks the component as invalid. Replace the pseudo :invalid selector. */
+  invalid?: boolean;
   /** Returns the ValidityState object */
   validity?: ValidityState;
   /** Returns the validation message based on the ValidityState */
@@ -470,6 +474,8 @@ range mode as array of string. eg.'["22/12/2023"]' for single &
   /** Makes the input readonly. */
   readonly?: boolean;
   "onsgds-change-date"?: SgdsEventHandler;
+  "onsgds-invalid"?: SgdsEventHandler;
+  "onsgds-valid"?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
   "onsgds-after-show"?: SgdsEventHandler;
   "onsgds-hide"?: SgdsEventHandler;
@@ -1228,6 +1234,14 @@ export interface SgdsStepProps extends SgdsBaseProps {
   iconName?: string | undefined;
   /** Optional component to render for this step */
   component?: unknown;
+  /** Whether this step is clickable */
+  clickable?: boolean;
+  /** Whether this step is currently active */
+  active?: boolean;
+  /** Whether this step is currently disabled */
+  disabled?: boolean;
+  /** Whether this step is completed */
+  completed?: boolean;
 }
 
 // ── Stepper ─────────────────────────────────────────────────────────────