@govtechsg/sgds-web-component 2.1.0 → 2.1.2

package/react/components/Sidenav/sidenav.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--sidenav-theme-color:var(--sgds-primary);--sidenav-sticky-top:0rem}div{display:flex;flex-direction:column;gap:1rem;list-style:none;margin:0;padding-left:0}.sticky{height:calc(100vh - var(--sidenav-sticky-top));overflow-y:auto;position:sticky;top:var(--sidenav-sticky-top)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=sidenav.js.map

package/react/components/Sidenav/sidenav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidenav.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/Spinner/sgds-spinner.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-spinner.cjs.js","sources":["../../../../src/components/Spinner/sgds-spinner.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport spinnerStyle from \"./spinner.css\";\nimport textStyles from \"../../styles/text-variants.css\";\n/**\n * @summary Spinners notify the users that their request is being processed.\n *\n */\nexport class SgdsSpinner extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, spinnerStyle];\n  /** The type of spinner */\n  @property({ type: String, reflect: true }) type: SpinnerType = \"border\";\n  /** The color of spinner */\n  @property({ type: String, reflect: true }) color: SpinnerColor = \"primary\";\n\n  render() {\n    return html`\n      <div class=\"spinner-${this.type} spinner\" role=\"status\">\n        <span class=\"sr-only\">Loading...</span>\n      </div>\n    `;\n  }\n}\n\nexport type SpinnerColor = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"light\" | \"dark\";\n\nexport type SpinnerType = \"border\" | \"grow\";\n\nexport default SgdsSpinner;\n"],"names":["SgdsElement","html","textStyles","spinnerStyle","__decorate","property"],"mappings":";;;;;;;;;;;;AAKA;;;AAGG;AACG,MAAO,WAAY,SAAQA,sBAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAG6C,IAAI,CAAA,IAAA,GAAgB,QAAQ,CAAC;;QAE7B,IAAK,CAAA,KAAA,GAAiB,SAAS,CAAC;KAS5E;IAPC,MAAM,GAAA;AACJ,QAAA,OAAOC,kBAAI,CAAA,CAAA;AACa,0BAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;KAGhC,CAAC;KACH;;AAZM,WAAA,CAAA,MAAM,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,uBAAU,EAAEC,kBAAY,CAAnD,CAAqD;AAEvBC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA8B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE7BD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiC,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Spinner/sgds-spinner.js

@@ -0,0 +1,38 @@
+'use client';
+import { __decorate } from 'tslib';
+import { property } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z$1 from './spinner.js';
+import css_248z from '../../styles/text-variants.js';
+
+/**
+ * @summary Spinners notify the users that their request is being processed.
+ *
+ */
+class SgdsSpinner extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** The type of spinner */
+        this.type = "border";
+        /** The color of spinner */
+        this.color = "primary";
+    }
+    render() {
+        return html `
+      <div class="spinner-${this.type} spinner" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
+    `;
+    }
+}
+SgdsSpinner.styles = [...SgdsElement.styles, css_248z, css_248z$1];
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsSpinner.prototype, "type", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsSpinner.prototype, "color", void 0);
+
+export { SgdsSpinner, SgdsSpinner as default };
+//# sourceMappingURL=sgds-spinner.js.map

package/react/components/Spinner/sgds-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-spinner.js","sources":["../../../../src/components/Spinner/sgds-spinner.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport spinnerStyle from \"./spinner.css\";\nimport textStyles from \"../../styles/text-variants.css\";\n/**\n * @summary Spinners notify the users that their request is being processed.\n *\n */\nexport class SgdsSpinner extends SgdsElement {\n  static styles = [...SgdsElement.styles, textStyles, spinnerStyle];\n  /** The type of spinner */\n  @property({ type: String, reflect: true }) type: SpinnerType = \"border\";\n  /** The color of spinner */\n  @property({ type: String, reflect: true }) color: SpinnerColor = \"primary\";\n\n  render() {\n    return html`\n      <div class=\"spinner-${this.type} spinner\" role=\"status\">\n        <span class=\"sr-only\">Loading...</span>\n      </div>\n    `;\n  }\n}\n\nexport type SpinnerColor = \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\" | \"light\" | \"dark\";\n\nexport type SpinnerType = \"border\" | \"grow\";\n\nexport default SgdsSpinner;\n"],"names":["textStyles","spinnerStyle"],"mappings":";;;;;;;;AAKA;;;AAGG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAG6C,IAAI,CAAA,IAAA,GAAgB,QAAQ,CAAC;;QAE7B,IAAK,CAAA,KAAA,GAAiB,SAAS,CAAC;KAS5E;IAPC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;AACa,0BAAA,EAAA,IAAI,CAAC,IAAI,CAAA;;;KAGhC,CAAC;KACH;;AAZM,WAAA,CAAA,MAAM,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAU,EAAEC,UAAY,CAAnD,CAAqD;AAEvB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA8B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAE7B,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAiC,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/components/Spinner/spinner.js

@@ -0,0 +1,8 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`.spinner{--sgds-spinner-color:var(--sgds-primary-filled);color:var(--sgds-spinner-color)}:host([color=secondary]) .spinner{--sgds-spinner-color:var(--sgds-secondary-filled)}:host([color=warning]) .spinner{--sgds-spinner-color:var(--sgds-warning-filled)}:host([color=danger]) .spinner{--sgds-spinner-color:var(--sgds-danger-filled)}:host([color=success]) .spinner{--sgds-spinner-color:var(--sgds-success-filled)}:host([color=info]) .spinner{--sgds-spinner-color:var(--sgds-info-filled)}:host([color=light]) .spinner{--sgds-spinner-color:var(--sgds-light-filled)}:host([color=dark]) .spinner{--sgds-spinner-color:var(--sgds-dark-filled)}.spinner-border{animation:spinner-border .75s linear infinite;border:.25em solid;border-radius:50%;border-right:.25em solid transparent;color:var(--sgds-spinner-color)}.spinner-border,.spinner-grow{display:inline-block;height:2rem;vertical-align:-.125em;width:2rem}.spinner-grow{animation:spinner-grow .75s linear infinite;background-color:var(--sgds-spinner-color);border-radius:50%;opacity:0}@media (prefers-reduced-motion:reduce){.spinner-border,.spinner-grow{animation-duration:1.5s}}
+/*! CSS Used keyframes */@keyframes spinner-border{to{transform:rotate(1turn)}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+
+export { css_248z as default };
+//# sourceMappingURL=spinner.js.map

package/react/components/Spinner/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-stepper.cjs.js","sources":["../../../../src/components/Stepper/sgds-stepper.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 { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\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 *\n * @cssproperty --stepper-default-color - Sets the theme color for default stepper marker.\n * @cssproperty --stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker.\n * @cssproperty --stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\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  /**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  /** 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    return this.steps[step].component;\n  }\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this.steps.length - 1) {\n      this.activeStep++;\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      this.activeStep--;\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.steps.length - 1) {\n      this.activeStep = this.steps.length - 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    //emit an event before moving to next step\n    if (this.activeStep > index) {\n      this.activeStep = index;\n    }\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"sgds stepper\">\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div\n              class=\"stepper-item ${classMap({\n                \"is-active\": this.activeStep === index,\n                \"is-completed\": this.activeStep > index,\n                \"is-clickable\": this.activeStep > index\n              })}\"\n              tabindex=\"0\"\n              aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n              aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n              @click=\"${() => this._onStepperItemClick(index)}\"\n              @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}\n            >\n              <div class=\"stepper-marker\">${index + 1}</div>\n              <div class=\"stepper-detail\">${step}</div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsStepper;\n"],"names":["SgdsElement","html","classMap","stepperStyle","__decorate","property","defaultValue","watch"],"mappings":"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"}

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

@@ -0,0 +1,132 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { defaultValue } from '../../utils/defaultvalue.js';
+import { watch } from '../../utils/watch.js';
+import css_248z from './stepper.js';
+
+/**
+ * @summary Steppers are used to inform users which step they are at in a form or a process
+ *
+ * @event sgds-next-step - Emitted right before the next step is reached. Event is fired when nextStep method is called.
+ * @event sgds-previous-step - Emitted right before the previous step is reached. Event is fired when previousStep method is called.
+ * @event sgds-last-step - Emitted right before the last step is reached. Event is fired when lastStep method is called.
+ * @event sgds-first-step - Emitted on hide after animation has completed. Event is fired when firstStep method is called.
+ * @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.
+ * @event sgds-reset - Emitted right before the step is reset to its defaultActiveStep. Event is fired when reset method is called.
+ *
+ * @cssproperty --stepper-default-color - Sets the theme color for default stepper marker.
+ * @cssproperty --stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker.
+ * @cssproperty --stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker.
+ *
+ */
+class SgdsStepper extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.
+         */
+        this.steps = [];
+        /** The current state of active step. Defaults to 0 */
+        this.activeStep = 0;
+        /**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. */
+        this.defaultActiveStep = 0;
+    }
+    /** 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*/
+    getComponent(step = this.activeStep) {
+        return this.steps[step].component;
+    }
+    /** Moves the active step forward one step */
+    nextStep() {
+        this.emit("sgds-next-step");
+        if (this.activeStep < this.steps.length - 1) {
+            this.activeStep++;
+        }
+    }
+    /** Moves the active step back one step */
+    previousStep() {
+        this.emit("sgds-previous-step");
+        if (this.activeStep > 0) {
+            this.activeStep--;
+        }
+    }
+    /** Changes the active step to the last step */
+    lastStep() {
+        this.emit("sgds-last-step");
+        if (this.activeStep !== this.steps.length - 1) {
+            this.activeStep = this.steps.length - 1;
+        }
+    }
+    /** Changes active step to the first step */
+    firstStep() {
+        this.emit("sgds-first-step");
+        if (this.activeStep > 0) {
+            this.activeStep = 0;
+        }
+    }
+    /** Resets the Stepper to its initial active step state */
+    reset() {
+        this.emit("sgds-reset");
+        this.activeStep = this.defaultActiveStep;
+    }
+    /**@internal */
+    _onStepperItemClick(index) {
+        //emit an event before moving to next step
+        if (this.activeStep > index) {
+            this.activeStep = index;
+        }
+    }
+    /**@internal */
+    _handleActiveStepChange() {
+        this.emit("sgds-arrived");
+    }
+    /**@internal */
+    _handleKeyDown(event, index) {
+        if (event.key === "Enter") {
+            this._onStepperItemClick(index);
+        }
+    }
+    render() {
+        return html `
+      <div class="sgds stepper">
+        ${this.steps.map(({ stepHeader: step }, index) => {
+            return html `
+            <div
+              class="stepper-item ${classMap({
+                "is-active": this.activeStep === index,
+                "is-completed": this.activeStep > index,
+                "is-clickable": this.activeStep > index
+            })}"
+              tabindex="0"
+              aria-current=${this.activeStep === index ? "step" : "false"}
+              aria-disabled=${this.activeStep <= index ? "true" : "false"}
+              @click="${() => this._onStepperItemClick(index)}"
+              @keydown=${(e) => this._handleKeyDown(e, index)}
+            >
+              <div class="stepper-marker">${index + 1}</div>
+              <div class="stepper-detail">${step}</div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+    }
+}
+SgdsStepper.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: Array })
+], SgdsStepper.prototype, "steps", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], SgdsStepper.prototype, "activeStep", void 0);
+__decorate([
+    defaultValue("activeStep")
+], SgdsStepper.prototype, "defaultActiveStep", void 0);
+__decorate([
+    watch("activeStep", { waitUntilFirstUpdate: true })
+], SgdsStepper.prototype, "_handleActiveStepChange", null);
+
+export { SgdsStepper, SgdsStepper as default };
+//# sourceMappingURL=sgds-stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-stepper.js","sources":["../../../../src/components/Stepper/sgds-stepper.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 { defaultValue } from \"../../utils/defaultvalue\";\nimport { watch } from \"../../utils/watch\";\nimport stepperStyle from \"./stepper.css\";\nexport interface IStepMetaData {\n  component: unknown;\n  stepHeader: string;\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 *\n * @cssproperty --stepper-default-color - Sets the theme color for default stepper marker.\n * @cssproperty --stepper-theme-color - Sets the theme color for active, completed and clickable stepper marker.\n * @cssproperty --stepper-theme-hover-color - Sets the theme hover color for clickable stepper marker.\n *\n */\nexport class SgdsStepper extends SgdsElement {\n  static styles = [...SgdsElement.styles, stepperStyle];\n\n  /** The metadata of stepper, type `IStepMetaData`, that consist of `stepHeader: string` and `component:unknown`. `stepHeader` is the name of the step and `component` is the content that should appear at the each step. `component` is set to `unknown` to allow users to pass in their desired component based on the framework of choice. e.g. pass in your own react/angular/vue component or it can also be a text content.\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  /**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  /** 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    return this.steps[step].component;\n  }\n  /** Moves the active step forward one step */\n  public nextStep() {\n    this.emit(\"sgds-next-step\");\n    if (this.activeStep < this.steps.length - 1) {\n      this.activeStep++;\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      this.activeStep--;\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.steps.length - 1) {\n      this.activeStep = this.steps.length - 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    //emit an event before moving to next step\n    if (this.activeStep > index) {\n      this.activeStep = index;\n    }\n  }\n\n  /**@internal */\n  @watch(\"activeStep\", { waitUntilFirstUpdate: true })\n  _handleActiveStepChange() {\n    this.emit(\"sgds-arrived\");\n  }\n\n  /**@internal */\n  _handleKeyDown(event: KeyboardEvent, index: number) {\n    if (event.key === \"Enter\") {\n      this._onStepperItemClick(index);\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"sgds stepper\">\n        ${this.steps.map(({ stepHeader: step }, index) => {\n          return html`\n            <div\n              class=\"stepper-item ${classMap({\n                \"is-active\": this.activeStep === index,\n                \"is-completed\": this.activeStep > index,\n                \"is-clickable\": this.activeStep > index\n              })}\"\n              tabindex=\"0\"\n              aria-current=${this.activeStep === index ? \"step\" : \"false\"}\n              aria-disabled=${this.activeStep <= index ? \"true\" : \"false\"}\n              @click=\"${() => this._onStepperItemClick(index)}\"\n              @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, index)}\n            >\n              <div class=\"stepper-marker\">${index + 1}</div>\n              <div class=\"stepper-detail\">${step}</div>\n            </div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsStepper;\n"],"names":["stepperStyle"],"mappings":"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"}

package/react/components/Stepper/stepper.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--stepper-theme-color:var(--sgds-primary);--stepper-theme-hover-color:var(--sgds-primary-800);--stepper-default-color:var(--sgds-gray-400)}.sgds.stepper{display:flex;flex-wrap:wrap;font-size:var(--sgds-body-font-size)}.sgds.stepper .stepper-item{flex-basis:0;flex-grow:1;margin-top:0;position:relative}.sgds.stepper .stepper-item:not(:first-child){flex-basis:1em;flex-grow:1;flex-shrink:1}.sgds.stepper .stepper-item:not(:first-child):before{content:" ";position:absolute}.sgds.stepper .stepper-item.is-clickable{cursor:pointer}.sgds.stepper .stepper-item.is-clickable:hover .stepper-marker{background-color:var(--stepper-theme-hover-color);border-color:var(--stepper-theme-hover-color)}.sgds.stepper .stepper-item.is-clickable:hover .stepper-detail,.sgds.stepper .stepper-item.is-clickable:hover .stepper-detail>*{color:var(--stepper-theme-hover-color);transition:all .5s ease}.sgds.stepper .stepper-item:before{background:linear-gradient(270deg,var(--stepper-default-color) 50%,var(--stepper-theme-color) 0);background-position:100% 100%;background-size:200% 100%}.sgds.stepper .stepper-item.is-active:before{background-position:0 100%}.sgds.stepper .stepper-item.is-active .stepper-marker{background-color:var(--sgds-white);border-color:var(--stepper-theme-color);color:var(--stepper-theme-color);font-weight:700}.sgds.stepper .stepper-item.is-completed:before{background-position:0 100%}.sgds.stepper .stepper-item.is-completed .stepper-marker{background-color:var(--stepper-theme-color);border-color:var(--stepper-theme-color);color:var(--sgds-white);font-weight:700}.sgds.stepper .stepper-item>.stepper-marker{align-items:center;background:var(--stepper-default-color);border:.25rem solid var(--sgds-white);border-radius:50%;color:var(--sgds-white);display:flex;font-weight:400;height:2rem;justify-content:center;left:calc(50% - 1rem);position:absolute;width:2rem;z-index:1}.sgds.stepper .stepper-item:not(:first-child):before{bottom:0;height:.25rem;left:-50%;top:1rem;width:100%}.sgds.stepper .stepper-item .stepper-detail{font-weight:700;margin-left:.5rem;margin-right:.5rem;margin-top:2rem;text-align:center}`;
+
+export { css_248z as default };
+//# sourceMappingURL=stepper.js.map

package/react/components/Stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/react/components/Tab/sgds-tab-group.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-tab-group.cjs.js","sources":["../../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show  Emitted when a tab and its panels are shown\n * @event sgds-tab-hide  Emitted when a tab and its panels are hidden.\n *\n * @csspart body - The container wrapping the default slot where all `sgds-tab-panel`s are slotted.\n * @csspart nav - The container wrapping the default slot where all `sgds-tab`s are slotted.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabGroupStyle];\n  /**@internal */\n  @query(\".tab-group\") tabGroup: HTMLElement;\n  /**@internal */\n  @query(\".tab-group__body\") body: HTMLSlotElement;\n  /**@internal */\n  @query(\".tab-group__nav\") nav: HTMLElement;\n  /**@internal */\n  private activeTab?: SgdsTab;\n  /**@internal */\n  private mutationObserver: MutationObserver;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**@internal */\n  private tabs: SgdsTab[] = [];\n  /**@internal */\n  private panels: SgdsTabPanel[] = [];\n  /** The variant types of tabs. Controls the visual stylesof all `sgds-tabs` in its slot. It also dynamically changes the slots of `sgds-tab` */\n  @property({ reflect: true, attribute: true }) variant: \"tabs-basic-toggle\" | \"tabs-info-toggle\";\n\n  connectedCallback() {\n    const whenAllDefined = Promise.all([\n      customElements.whenDefined(\"sgds-tab\"),\n      customElements.whenDefined(\"sgds-tab-panel\")\n    ]);\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => {\n      return;\n    });\n\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Update aria labels when the DOM changes\n      if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n        setTimeout(() => this.setAriaLabels());\n      }\n\n      // Sync tabs when disabled states change\n      if (mutations.some(m => m.attributeName === \"disabled\")) {\n        this.syncTabsAndPanels();\n      }\n    });\n\n    this.updateComplete.then(() => {\n      this.syncTabsAndPanels();\n      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n      this.resizeObserver.observe(this.nav);\n      whenAllDefined.then(() => {\n        // Set initial tab state when the tabs first become visible\n        const intersectionObserver = new IntersectionObserver((entries, observer) => {\n          if (entries[0].intersectionRatio > 0) {\n            this.setAriaLabels();\n            // this.setTabVariant();\n            this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n            observer.unobserve(entries[0].target);\n          }\n        });\n        intersectionObserver.observe(this.tabGroup);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  public show(panel: string) {\n    const tab = this.tabs.find(el => el.panel === panel);\n\n    if (tab) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n    const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n    return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n      return options.includeDisabled\n        ? el.tagName.toLowerCase() === \"sgds-tab\"\n        : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n    });\n  }\n  /** @internal */\n  private getAllPanels() {\n    return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n      SgdsTabPanel\n    ];\n  }\n  /** @internal */\n  private getActiveTab() {\n    return this.tabs.find(el => el.active);\n  }\n  /** @internal */\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    if (tab !== null) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    // Activate a tab\n    if ([\"Enter\", \" \"].includes(event.key)) {\n      if (tab !== null) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n      const activeEl = this.tabs.find(t => t.matches(\":focus\"));\n\n      if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n        let index = this.tabs.indexOf(activeEl);\n\n        if (event.key === \"Home\") {\n          index = 0;\n        } else if (event.key === \"End\") {\n          index = this.tabs.length - 1;\n        } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n          index--;\n        } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n          index++;\n        }\n\n        if (index < 0) {\n          index = this.tabs.length - 1;\n        }\n\n        if (index > this.tabs.length - 1) {\n          index = 0;\n        }\n\n        this.tabs[index].focus({ preventScroll: true });\n\n        this.setActiveTab(this.tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n        event.preventDefault();\n      }\n    }\n  }\n  /** @internal */\n  private setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n    options = {\n      emitEvents: true,\n      ...options\n    };\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync active tab and panel\n      this.tabs.map(el => (el.active = el === this.activeTab));\n      this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n\n      // Emit events\n      if (options.emitEvents) {\n        if (previousTab) {\n          this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n        }\n\n        this.emit(\"sgds-tab-show\", { detail: { name: this.activeTab.panel } });\n      }\n    }\n  }\n  /** @internal */\n  private setAriaLabels() {\n    // Link each tab with its corresponding panel\n    this.tabs.forEach(tab => {\n      const panel = this.panels.find(el => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n        panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n      }\n    });\n  }\n\n  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n  /** @internal */\n  private syncTabsAndPanels() {\n    this.tabs = this.getAllTabs({ includeDisabled: false });\n    this.panels = this.getAllPanels();\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"tab-group\"\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        variant=${ifDefined(this.variant)}\n      >\n        <div part=\"nav\" class=\"tab-group__nav\" role=\"tablist\">\n          <slot\n            name=\"nav\"\n            class=${classMap({\n              sgds: true,\n              \"nav-tabs\": true,\n              nav: true\n            })}\n            variant=${ifDefined(this.variant)}\n            @slotchange=${this.syncTabsAndPanels}\n          ></slot>\n        </div>\n        <div part=\"body\">\n          <slot class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTabGroup;\n"],"names":["SgdsElement","html","ifDefined","classMap","tabGroupStyle","__decorate","query","property"],"mappings":"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"}

package/react/components/Tab/sgds-tab-group.js

@@ -0,0 +1,233 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { query, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './tab-group.js';
+
+/**
+ * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.
+ * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.
+ *
+ * @slot default - The slot for `sgds-tab-panel`
+ * @slot nav - The slot for `sgds-tab`
+ *
+ * @event sgds-tab-show  Emitted when a tab and its panels are shown
+ * @event sgds-tab-hide  Emitted when a tab and its panels are hidden.
+ *
+ * @csspart body - The container wrapping the default slot where all `sgds-tab-panel`s are slotted.
+ * @csspart nav - The container wrapping the default slot where all `sgds-tab`s are slotted.
+ *
+ */
+class SgdsTabGroup extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /**@internal */
+        this.tabs = [];
+        /**@internal */
+        this.panels = [];
+    }
+    connectedCallback() {
+        const whenAllDefined = Promise.all([
+            customElements.whenDefined("sgds-tab"),
+            customElements.whenDefined("sgds-tab-panel")
+        ]);
+        super.connectedCallback();
+        this.resizeObserver = new ResizeObserver(() => {
+            return;
+        });
+        this.mutationObserver = new MutationObserver(mutations => {
+            // Update aria labels when the DOM changes
+            if (mutations.some(m => !["aria-labelledby", "aria-controls"].includes(m.attributeName))) {
+                setTimeout(() => this.setAriaLabels());
+            }
+            // Sync tabs when disabled states change
+            if (mutations.some(m => m.attributeName === "disabled")) {
+                this.syncTabsAndPanels();
+            }
+        });
+        this.updateComplete.then(() => {
+            this.syncTabsAndPanels();
+            this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });
+            this.resizeObserver.observe(this.nav);
+            whenAllDefined.then(() => {
+                // Set initial tab state when the tabs first become visible
+                const intersectionObserver = new IntersectionObserver((entries, observer) => {
+                    var _a;
+                    if (entries[0].intersectionRatio > 0) {
+                        this.setAriaLabels();
+                        // this.setTabVariant();
+                        this.setActiveTab((_a = this.getActiveTab()) !== null && _a !== void 0 ? _a : this.tabs[0], { emitEvents: false });
+                        observer.unobserve(entries[0].target);
+                    }
+                });
+                intersectionObserver.observe(this.tabGroup);
+            });
+        });
+    }
+    disconnectedCallback() {
+        this.mutationObserver.disconnect();
+        this.resizeObserver.unobserve(this.nav);
+    }
+    /** Shows the specified tab panel. */
+    show(panel) {
+        const tab = this.tabs.find(el => el.panel === panel);
+        if (tab) {
+            this.setActiveTab(tab);
+        }
+    }
+    /** @internal */
+    getAllTabs(options = { includeDisabled: true }) {
+        const slot = this.shadowRoot.querySelector('slot[name="nav"]');
+        return [...slot.assignedElements()].filter(el => {
+            return options.includeDisabled
+                ? el.tagName.toLowerCase() === "sgds-tab"
+                : el.tagName.toLowerCase() === "sgds-tab" && !el.disabled;
+        });
+    }
+    /** @internal */
+    getAllPanels() {
+        return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === "sgds-tab-panel");
+    }
+    /** @internal */
+    getActiveTab() {
+        return this.tabs.find(el => el.active);
+    }
+    /** @internal */
+    handleClick(event) {
+        const target = event.target;
+        const tab = target.closest("sgds-tab");
+        const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest("sgds-tab-group");
+        // Ensure the target tab is in this tab group
+        if (tabGroup !== this) {
+            return;
+        }
+        if (tab !== null) {
+            this.setActiveTab(tab);
+        }
+    }
+    /** @internal */
+    handleKeyDown(event) {
+        const target = event.target;
+        const tab = target.closest("sgds-tab");
+        const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest("sgds-tab-group");
+        // Ensure the target tab is in this tab group
+        if (tabGroup !== this) {
+            return;
+        }
+        // Activate a tab
+        if (["Enter", " "].includes(event.key)) {
+            if (tab !== null) {
+                this.setActiveTab(tab);
+                event.preventDefault();
+            }
+        }
+        // Move focus left or right
+        if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"].includes(event.key)) {
+            const activeEl = this.tabs.find(t => t.matches(":focus"));
+            if ((activeEl === null || activeEl === void 0 ? void 0 : activeEl.tagName.toLowerCase()) === "sgds-tab") {
+                let index = this.tabs.indexOf(activeEl);
+                if (event.key === "Home") {
+                    index = 0;
+                }
+                else if (event.key === "End") {
+                    index = this.tabs.length - 1;
+                }
+                else if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+                    index--;
+                }
+                else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+                    index++;
+                }
+                if (index < 0) {
+                    index = this.tabs.length - 1;
+                }
+                if (index > this.tabs.length - 1) {
+                    index = 0;
+                }
+                this.tabs[index].focus({ preventScroll: true });
+                this.setActiveTab(this.tabs[index] /** , { scrollBehavior: "smooth" }*/);
+                event.preventDefault();
+            }
+        }
+    }
+    /** @internal */
+    setActiveTab(tab, options) {
+        options = Object.assign({ emitEvents: true }, options);
+        if (tab !== this.activeTab && !tab.disabled) {
+            const previousTab = this.activeTab;
+            this.activeTab = tab;
+            // Sync active tab and panel
+            this.tabs.map(el => (el.active = el === this.activeTab));
+            this.panels.map(el => { var _a; return (el.active = el.name === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)); });
+            // Emit events
+            if (options.emitEvents) {
+                if (previousTab) {
+                    this.emit("sgds-tab-hide", { detail: { name: previousTab.panel } });
+                }
+                this.emit("sgds-tab-show", { detail: { name: this.activeTab.panel } });
+            }
+        }
+    }
+    /** @internal */
+    setAriaLabels() {
+        // Link each tab with its corresponding panel
+        this.tabs.forEach(tab => {
+            const panel = this.panels.find(el => el.name === tab.panel);
+            if (panel) {
+                tab.setAttribute("aria-controls", panel.getAttribute("id"));
+                panel.setAttribute("aria-labelledby", tab.getAttribute("id"));
+            }
+        });
+    }
+    // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.
+    /** @internal */
+    syncTabsAndPanels() {
+        this.tabs = this.getAllTabs({ includeDisabled: false });
+        this.panels = this.getAllPanels();
+    }
+    render() {
+        return html `
+      <div
+        class="tab-group"
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        variant=${ifDefined(this.variant)}
+      >
+        <div part="nav" class="tab-group__nav" role="tablist">
+          <slot
+            name="nav"
+            class=${classMap({
+            sgds: true,
+            "nav-tabs": true,
+            nav: true
+        })}
+            variant=${ifDefined(this.variant)}
+            @slotchange=${this.syncTabsAndPanels}
+          ></slot>
+        </div>
+        <div part="body">
+          <slot class="tab-group__body" @slotchange=${this.syncTabsAndPanels}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsTabGroup.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    query(".tab-group")
+], SgdsTabGroup.prototype, "tabGroup", void 0);
+__decorate([
+    query(".tab-group__body")
+], SgdsTabGroup.prototype, "body", void 0);
+__decorate([
+    query(".tab-group__nav")
+], SgdsTabGroup.prototype, "nav", void 0);
+__decorate([
+    property({ reflect: true, attribute: true })
+], SgdsTabGroup.prototype, "variant", void 0);
+
+export { SgdsTabGroup, SgdsTabGroup as default };
+//# sourceMappingURL=sgds-tab-group.js.map

package/react/components/Tab/sgds-tab-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-tab-group.js","sources":["../../../../src/components/Tab/sgds-tab-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { SgdsTab } from \"./sgds-tab\";\nimport { SgdsTabPanel } from \"./sgds-tab-panel\";\nimport tabGroupStyle from \"./tab-group.css\";\n/**\n * @summary Tab Group organizes content into a container with the syncing of tab and their corresponding panels.\n * Each tab must be slotted into the nav slot and its `panel` must refer to a tab panel of the same name.\n *\n * @slot default - The slot for `sgds-tab-panel`\n * @slot nav - The slot for `sgds-tab`\n *\n * @event sgds-tab-show  Emitted when a tab and its panels are shown\n * @event sgds-tab-hide  Emitted when a tab and its panels are hidden.\n *\n * @csspart body - The container wrapping the default slot where all `sgds-tab-panel`s are slotted.\n * @csspart nav - The container wrapping the default slot where all `sgds-tab`s are slotted.\n *\n */\nexport class SgdsTabGroup extends SgdsElement {\n  static styles = [...SgdsElement.styles, tabGroupStyle];\n  /**@internal */\n  @query(\".tab-group\") tabGroup: HTMLElement;\n  /**@internal */\n  @query(\".tab-group__body\") body: HTMLSlotElement;\n  /**@internal */\n  @query(\".tab-group__nav\") nav: HTMLElement;\n  /**@internal */\n  private activeTab?: SgdsTab;\n  /**@internal */\n  private mutationObserver: MutationObserver;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**@internal */\n  private tabs: SgdsTab[] = [];\n  /**@internal */\n  private panels: SgdsTabPanel[] = [];\n  /** The variant types of tabs. Controls the visual stylesof all `sgds-tabs` in its slot. It also dynamically changes the slots of `sgds-tab` */\n  @property({ reflect: true, attribute: true }) variant: \"tabs-basic-toggle\" | \"tabs-info-toggle\";\n\n  connectedCallback() {\n    const whenAllDefined = Promise.all([\n      customElements.whenDefined(\"sgds-tab\"),\n      customElements.whenDefined(\"sgds-tab-panel\")\n    ]);\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => {\n      return;\n    });\n\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Update aria labels when the DOM changes\n      if (mutations.some(m => ![\"aria-labelledby\", \"aria-controls\"].includes(m.attributeName))) {\n        setTimeout(() => this.setAriaLabels());\n      }\n\n      // Sync tabs when disabled states change\n      if (mutations.some(m => m.attributeName === \"disabled\")) {\n        this.syncTabsAndPanels();\n      }\n    });\n\n    this.updateComplete.then(() => {\n      this.syncTabsAndPanels();\n      this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true });\n      this.resizeObserver.observe(this.nav);\n      whenAllDefined.then(() => {\n        // Set initial tab state when the tabs first become visible\n        const intersectionObserver = new IntersectionObserver((entries, observer) => {\n          if (entries[0].intersectionRatio > 0) {\n            this.setAriaLabels();\n            // this.setTabVariant();\n            this.setActiveTab(this.getActiveTab() ?? this.tabs[0], { emitEvents: false });\n            observer.unobserve(entries[0].target);\n          }\n        });\n        intersectionObserver.observe(this.tabGroup);\n      });\n    });\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver.disconnect();\n    this.resizeObserver.unobserve(this.nav);\n  }\n\n  /** Shows the specified tab panel. */\n  public show(panel: string) {\n    const tab = this.tabs.find(el => el.panel === panel);\n\n    if (tab) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private getAllTabs(options: { includeDisabled: boolean } = { includeDisabled: true }) {\n    const slot = this.shadowRoot.querySelector<HTMLSlotElement>('slot[name=\"nav\"]');\n\n    return [...(slot.assignedElements() as SgdsTab[])].filter(el => {\n      return options.includeDisabled\n        ? el.tagName.toLowerCase() === \"sgds-tab\"\n        : el.tagName.toLowerCase() === \"sgds-tab\" && !el.disabled;\n    });\n  }\n  /** @internal */\n  private getAllPanels() {\n    return [...this.body.assignedElements()].filter(el => el.tagName.toLowerCase() === \"sgds-tab-panel\") as [\n      SgdsTabPanel\n    ];\n  }\n  /** @internal */\n  private getActiveTab() {\n    return this.tabs.find(el => el.active);\n  }\n  /** @internal */\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    if (tab !== null) {\n      this.setActiveTab(tab);\n    }\n  }\n  /** @internal */\n  private handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const tab = target.closest(\"sgds-tab\") as SgdsTab;\n    const tabGroup = tab?.closest(\"sgds-tab-group\");\n\n    // Ensure the target tab is in this tab group\n    if (tabGroup !== this) {\n      return;\n    }\n\n    // Activate a tab\n    if ([\"Enter\", \" \"].includes(event.key)) {\n      if (tab !== null) {\n        this.setActiveTab(tab);\n        event.preventDefault();\n      }\n    }\n\n    // Move focus left or right\n    if ([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"].includes(event.key)) {\n      const activeEl = this.tabs.find(t => t.matches(\":focus\"));\n\n      if (activeEl?.tagName.toLowerCase() === \"sgds-tab\") {\n        let index = this.tabs.indexOf(activeEl);\n\n        if (event.key === \"Home\") {\n          index = 0;\n        } else if (event.key === \"End\") {\n          index = this.tabs.length - 1;\n        } else if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n          index--;\n        } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n          index++;\n        }\n\n        if (index < 0) {\n          index = this.tabs.length - 1;\n        }\n\n        if (index > this.tabs.length - 1) {\n          index = 0;\n        }\n\n        this.tabs[index].focus({ preventScroll: true });\n\n        this.setActiveTab(this.tabs[index] /** , { scrollBehavior: \"smooth\" }*/);\n\n        event.preventDefault();\n      }\n    }\n  }\n  /** @internal */\n  private setActiveTab(tab: SgdsTab, options?: { emitEvents?: boolean }) {\n    options = {\n      emitEvents: true,\n      ...options\n    };\n\n    if (tab !== this.activeTab && !tab.disabled) {\n      const previousTab = this.activeTab;\n      this.activeTab = tab;\n\n      // Sync active tab and panel\n      this.tabs.map(el => (el.active = el === this.activeTab));\n      this.panels.map(el => (el.active = el.name === this.activeTab?.panel));\n\n      // Emit events\n      if (options.emitEvents) {\n        if (previousTab) {\n          this.emit(\"sgds-tab-hide\", { detail: { name: previousTab.panel } });\n        }\n\n        this.emit(\"sgds-tab-show\", { detail: { name: this.activeTab.panel } });\n      }\n    }\n  }\n  /** @internal */\n  private setAriaLabels() {\n    // Link each tab with its corresponding panel\n    this.tabs.forEach(tab => {\n      const panel = this.panels.find(el => el.name === tab.panel);\n      if (panel) {\n        tab.setAttribute(\"aria-controls\", panel.getAttribute(\"id\"));\n        panel.setAttribute(\"aria-labelledby\", tab.getAttribute(\"id\"));\n      }\n    });\n  }\n\n  // This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.\n  /** @internal */\n  private syncTabsAndPanels() {\n    this.tabs = this.getAllTabs({ includeDisabled: false });\n    this.panels = this.getAllPanels();\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"tab-group\"\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n        variant=${ifDefined(this.variant)}\n      >\n        <div part=\"nav\" class=\"tab-group__nav\" role=\"tablist\">\n          <slot\n            name=\"nav\"\n            class=${classMap({\n              sgds: true,\n              \"nav-tabs\": true,\n              nav: true\n            })}\n            variant=${ifDefined(this.variant)}\n            @slotchange=${this.syncTabsAndPanels}\n          ></slot>\n        </div>\n        <div part=\"body\">\n          <slot class=\"tab-group__body\" @slotchange=${this.syncTabsAndPanels}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTabGroup;\n"],"names":["tabGroupStyle"],"mappings":"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"}

package/react/components/Tab/sgds-tab-panel.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-tab-panel.cjs.js","sources":["../../../../src/components/Tab/sgds-tab-panel.ts"],"sourcesContent":["import { LitElement, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { watch } from \"../../utils/watch\";\nimport tabPanelStyles from \"./tab-panel.css\";\n\nlet id = 0;\n\n/**\n * @summary Tab panels are used inside tab groups to display tabbed content.\n * @slot - The tab panel's content.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --tab-panel-padding-y - The y-axis padding of tab panel.\n *\n */\nexport class SgdsTabPanel extends LitElement {\n  static styles = tabPanelStyles;\n  /**@internal */\n  private readonly attrId = ++id;\n  /**@internal */\n  private readonly componentId = `sgds-tab-panel-${this.attrId}`;\n  /** The tab panel's name. */\n  @property({ reflect: true }) name = \"\";\n\n  /** When true, the tab panel will be shown. When used with tab-group, this property is already being managed */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id = this.id.length > 0 ? this.id : this.componentId;\n    this.setAttribute(\"role\", \"tabpanel\");\n  }\n\n  @watch(\"active\")\n  handleActiveChange() {\n    this.setAttribute(\"aria-hidden\", this.active ? \"false\" : \"true\");\n  }\n\n  render() {\n    return html`\n      <slot\n        part=\"base\"\n        class=${classMap({\n          \"tab-panel\": true,\n          \"tab-panel--active\": this.active\n        })}\n      ></slot>\n    `;\n  }\n}\n\nexport default SgdsTabPanel;\n"],"names":["LitElement","html","classMap","tabPanelStyles","__decorate","property","watch"],"mappings":";;;;;;;;;;;;AAMA,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;;;;;AAQG;AACG,MAAO,YAAa,SAAQA,cAAU,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAGmB,IAAM,CAAA,MAAA,GAAG,EAAE,EAAE,CAAC;;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,CAAkB,eAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;;QAElC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAGK,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KAwB5D;IAtBC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC;AAC1D,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;KACvC;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;KAClE;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;;AAGC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,mBAAmB,EAAE,IAAI,CAAC,MAAM;SACjC,CAAC,CAAA;;KAEL,CAAC;KACH;;AAhCM,YAAM,CAAA,MAAA,GAAGC,mBAAH,CAAkB;AAMFC,gBAAA,CAAA;AAA5B,IAAAC,sBAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGKD,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAgB,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAS3DD,gBAAA,CAAA;IADCE,WAAK,CAAC,QAAQ,CAAC;AAGf,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;;"}