@govtechsg/sgds-web-component 2.0.1 → 2.1.1

package/react/components/Sidenav/sgds-sidenav-item.js

@@ -0,0 +1,256 @@
+'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 SgdsElement from '../../base/sgds-element.js';
+import { stopAnimations, animateTo, shimKeyframesHeightAuto } from '../../utils/animate.js';
+import { setDefaultAnimation, getAnimation } from '../../utils/animation-registry.js';
+import { waitForEvent } from '../../utils/event.js';
+import genId from '../../utils/generateId.js';
+import { watch } from '../../utils/watch.js';
+import css_248z from './sidenav-item.js';
+
+/**
+ *
+ * @event sgds-toggle - Emitted when the sidenav item's button is clicked.
+ * @event sgds-show - Emitted on show.
+ * @event sgds-after-show - Emitted on show after animation has completed.
+ * @event sgds-hide - Emitted on hide.
+ * @event sgds-after-hide - Emitted on hide after animation has completed.
+ *
+ * @slot default - default slot for SgdsSidenavLink element.
+ * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.
+ * @slot icon - icon slot for the content of SgdsSidenavItem's button / anchor element.
+ * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem.
+ *
+ * @cssproperty --sidenav-item-button-border-left-width - sidenav item left border width
+ * @cssproperty --sidenav-item-padding-x - sidenav item padding left and right
+ * @cssproperty --sidenav-item-padding-y - sidenav item padding top and bottom
+ * @cssproperty --sidenav-item-icon-title-gap - the flex gap between sidenav item icon and title
+ */
+class SgdsSidenavItem extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /**
+         *  when true, toggles the sidenav-item to open on first load and set the active stylings.
+         */
+        this.active = false;
+        /**
+         *  When defined, converts SgdsSidenavItem from a button element to an Anchor element. In this case, only one level of navigation is allowed
+         */
+        this.href = "";
+        /**
+         * Disables the SgdsSidenavItem
+         */
+        this.disabled = false;
+        /**
+         * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own
+         */
+        this.collapseId = genId("sidenav", "collapse");
+        /**
+         * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own
+         */
+        this.buttonId = genId("sidenav", "button");
+        /** @internal */
+        this.index = "-1";
+    }
+    _onToggle() {
+        this.emit("sgds-toggle", { detail: { index: this.index } });
+    }
+    _onClickLink() {
+        this._onToggle();
+        this.active = true;
+    }
+    /** Shows the sidenav item. */
+    async show() {
+        if (this.active) {
+            return;
+        }
+        this.active = true;
+        return waitForEvent(this, "sgds-after-show");
+    }
+    /** Hide the sidenav item */
+    async hide() {
+        if (!this.active) {
+            return;
+        }
+        this.active = false;
+        return waitForEvent(this, "sgds-after-hide");
+    }
+    /**
+     * @deprecated since 1.1. Will be removed in 2.0 and replaced by hide.
+     * When invoked, closes the SgdsSidenavItem
+     */
+    async closeItem() {
+        return await this.hide();
+    }
+    /**
+     * @deprecated since 1.1. Will be removed in 2.0 and replaced by show.
+     * When invoked, opens the SgdsSidenavItem
+     */
+    async openItem() {
+        return await this.show();
+    }
+    firstUpdated() {
+        if (!this.href) {
+            this.body.hidden = !this.active;
+            this.body.style.height = this.active ? "auto" : "0";
+        }
+    }
+    _handleSummaryClick() {
+        if (this.active) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+        this._onToggle();
+        this.header.focus();
+    }
+    _handleSummaryKeyDown(event) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (this.active) {
+                this.hide();
+            }
+            else {
+                this.show();
+            }
+        }
+        if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            this.hide();
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+            event.preventDefault();
+            this.show();
+        }
+    }
+    async handleOpenChange() {
+        if (this.href)
+            return;
+        if (this.active) {
+            // Show
+            const sgdsShow = this.emit("sgds-show", { cancelable: true });
+            if (sgdsShow.defaultPrevented) {
+                this.active = false;
+                return;
+            }
+            await stopAnimations(this.body);
+            this.body.hidden = false;
+            const { keyframes, options } = getAnimation(this, "sidenav.show");
+            await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+            this.body.style.height = "auto";
+            this.emit("sgds-after-show");
+        }
+        else {
+            // Hide
+            const sgdsHide = this.emit("sgds-hide", { cancelable: true });
+            if (sgdsHide.defaultPrevented) {
+                this.active = true;
+                return;
+            }
+            await stopAnimations(this.body);
+            const { keyframes, options } = getAnimation(this, "sidenav.hide");
+            await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+            this.body.hidden = true;
+            this.body.style.height = "auto";
+            this.emit("sgds-after-hide");
+        }
+    }
+    render() {
+        const withMenuTemplate = html ` <button
+        @click=${this._handleSummaryClick}
+        @keydown=${this._handleSummaryKeyDown}
+        class="sidenav-btn ${classMap({
+            disabled: this.disabled,
+            active: this.active
+        })} "
+        aria-expanded="${this.active}"
+        aria-controls="${this.collapseId}"
+        aria-current="${this.active}"
+        id="${this.buttonId}"
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled ? "true" : "false"}
+      >
+        <slot name="icon"></slot>
+        <slot name="title"></slot>
+        <slot name="caret-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            fill="currentColor"
+            class="bi bi-chevron-down"
+            viewBox="0 0 16 16"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"
+            />
+          </svg>
+        </slot>
+      </button>
+      <div class="sidenav-body" id="${this.collapseId}">
+        <div class="sidenav-list" aria-labelledby="${this.buttonId}">
+          <slot></slot>
+        </div>
+      </div>`;
+        const noMenuTemplate = html `
+      <a
+        href=${this.href}
+        @click=${() => this._onClickLink()}
+        class="sidenav-btn ${classMap({
+            disabled: this.disabled,
+            active: this.active
+        })} "
+        aria-current="${this.active}"
+        ?disabled=${this.disabled}
+        aria-disabled=${this.disabled ? "true" : "false"}
+      >
+        <slot name="icon"></slot>
+        <slot name="title"></slot>
+      </a>
+    `;
+        return html `
+      <div class="sidenav-item" aria-haspopup="${!this.href}">${this.href ? noMenuTemplate : withMenuTemplate}</div>
+    `;
+    }
+}
+SgdsSidenavItem.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    query(".sidenav-body")
+], SgdsSidenavItem.prototype, "body", void 0);
+__decorate([
+    query(".sidenav-btn")
+], SgdsSidenavItem.prototype, "header", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsSidenavItem.prototype, "active", void 0);
+__decorate([
+    property({ type: String })
+], SgdsSidenavItem.prototype, "href", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsSidenavItem.prototype, "disabled", void 0);
+__decorate([
+    watch("active", { waitUntilFirstUpdate: true })
+], SgdsSidenavItem.prototype, "handleOpenChange", null);
+setDefaultAnimation("sidenav.show", {
+    keyframes: [
+        { height: "0", opacity: "0" },
+        { height: "auto", opacity: "1" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
+setDefaultAnimation("sidenav.hide", {
+    keyframes: [
+        { height: "auto", opacity: "1" },
+        { height: "0", opacity: "0" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
+
+export { SgdsSidenavItem, SgdsSidenavItem as default };
+//# sourceMappingURL=sgds-sidenav-item.js.map

package/react/components/Sidenav/sgds-sidenav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-sidenav-item.js","sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked.\n * @event sgds-show - Emitted on show.\n * @event sgds-after-show - Emitted on show after animation has completed.\n * @event sgds-hide - Emitted on hide.\n * @event sgds-after-hide - Emitted on hide after animation has completed.\n *\n * @slot default - default slot for SgdsSidenavLink element.\n * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.\n * @slot icon - icon slot for the content of SgdsSidenavItem's button / anchor element.\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem.\n *\n * @cssproperty --sidenav-item-button-border-left-width - sidenav item left border width\n * @cssproperty --sidenav-item-padding-x - sidenav item padding left and right\n * @cssproperty --sidenav-item-padding-y - sidenav item padding top and bottom\n * @cssproperty --sidenav-item-icon-title-gap - the flex gap between sidenav item icon and title\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean })\n  active = false;\n\n  /**\n   *  When defined, converts SgdsSidenavItem from a button element to an Anchor element. In this case, only one level of navigation is allowed\n   */\n  @property({ type: String })\n  href = \"\";\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private buttonId: string = genId(\"sidenav\", \"button\");\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  private _onClickLink() {\n    this._onToggle();\n    this.active = true;\n  }\n\n  /** Shows the sidenav item. */\n  public async show() {\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item */\n  public async hide() {\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  /**\n   * @deprecated since 1.1. Will be removed in 2.0 and replaced by hide.\n   * When invoked, closes the SgdsSidenavItem\n   */\n  public async closeItem() {\n    return await this.hide();\n  }\n  /**\n   * @deprecated since 1.1. Will be removed in 2.0 and replaced by show.\n   * When invoked, opens the SgdsSidenavItem\n   */\n  public async openItem() {\n    return await this.show();\n  }\n\n  firstUpdated() {\n    if (!this.href) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.href) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n\n  render() {\n    const withMenuTemplate = html` <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })} \"\n        aria-expanded=\"${this.active}\"\n        aria-controls=\"${this.collapseId}\"\n        aria-current=\"${this.active}\"\n        id=\"${this.buttonId}\"\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"16\"\n            height=\"16\"\n            fill=\"currentColor\"\n            class=\"bi bi-chevron-down\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z\"\n            />\n          </svg>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this.collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this.buttonId}\">\n          <slot></slot>\n        </div>\n      </div>`;\n\n    const noMenuTemplate = html`\n      <a\n        href=${this.href}\n        @click=${() => this._onClickLink()}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })} \"\n        aria-current=\"${this.active}\"\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n      </a>\n    `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.href}\">${this.href ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["sidenavItemStyle"],"mappings":";;;;;;;;;;;;;AAWA;;;;;;;;;;;;;;;;;AAiBG;AAEG,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;AAME;;AAEG;QAEH,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;AAEf;;AAEG;QAEH,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;AAEV;;AAEG;QAEH,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAEjB;;AAEG;AAEK,QAAA,IAAA,CAAA,UAAU,GAAW,KAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAE1D;;AAEG;AACK,QAAA,IAAA,CAAA,QAAQ,GAAW,KAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;;QAG9C,IAAK,CAAA,KAAA,GAAG,IAAI,CAAC;KAoLtB;IAlLS,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;KAC7D;IAEO,YAAY,GAAA;QAClB,IAAI,CAAC,SAAS,EAAE,CAAC;AACjB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,OAAO;SACR;AAED,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;AACnB,QAAA,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO;SACR;AACD,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACpB,QAAA,OAAO,YAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;AAED;;;AAGG;AACI,IAAA,MAAM,SAAS,GAAA;AACpB,QAAA,OAAO,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;KAC1B;AACD;;;AAGG;AACI,IAAA,MAAM,QAAQ,GAAA;AACnB,QAAA,OAAO,MAAM,IAAI,CAAC,IAAI,EAAE,CAAC;KAC1B;IAED,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;YACd,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;SACrD;KACF;IACO,mBAAmB,GAAA;AACzB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;QAED,IAAI,CAAC,SAAS,EAAE,CAAC;AACjB,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;KACrB;AACO,IAAA,qBAAqB,CAAC,KAAoB,EAAA;AAChD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;AAEvB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,IAAI,EAAE,CAAC;aACb;iBAAM;gBACL,IAAI,CAAC,IAAI,EAAE,CAAC;aACb;SACF;AAED,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YACxD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;AAED,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;YAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF;IAGK,MAAA,gBAAgB,GAAA;QACpB,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO;AACtB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;;AAEf,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC9D,YAAA,IAAI,QAAQ,CAAC,gBAAgB,EAAE;AAC7B,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,OAAO;aACR;AAED,YAAA,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AAEzB,YAAA,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;AAClE,YAAA,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;YAChG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AAEhC,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;aAAM;;AAEL,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC9D,YAAA,IAAI,QAAQ,CAAC,gBAAgB,EAAE;AAC7B,gBAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;gBACnB,OAAO;aACR;AAED,YAAA,MAAM,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEhC,YAAA,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;AAClE,YAAA,MAAM,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,uBAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;AAChG,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AAEhC,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;KACF;IAED,MAAM,GAAA;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAA,CAAA;AAChB,eAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA;AACtB,iBAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;AAChB,2BAAA,EAAA,QAAQ,CAAC;YAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;AACe,uBAAA,EAAA,IAAI,CAAC,MAAM,CAAA;AACX,uBAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AAChB,sBAAA,EAAA,IAAI,CAAC,MAAM,CAAA;AACrB,YAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;AACP,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;wBACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;;;;;;;;;;;;;;;;;;;;AAoBlB,oCAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AACA,mDAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;aAGrD,CAAC;QAEV,MAAM,cAAc,GAAG,IAAI,CAAA,CAAA;;AAEhB,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA;AACP,eAAA,EAAA,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;AACb,2BAAA,EAAA,QAAQ,CAAC;YAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;AACc,sBAAA,EAAA,IAAI,CAAC,MAAM,CAAA;AACf,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;wBACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;;;;;KAKnD,CAAC;AACF,QAAA,OAAO,IAAI,CAAA,CAAA;AACkC,+CAAA,EAAA,CAAC,IAAI,CAAC,IAAI,CAAA,EAAA,EAAK,IAAI,CAAC,IAAI,GAAG,cAAc,GAAG,gBAAgB,CAAA;KACxG,CAAC;KACH;;AAtNM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAgB,CAA3C,CAA6C;AAElC,UAAA,CAAA;IAAvB,KAAK,CAAC,eAAe,CAAC;AAAmB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEnB,UAAA,CAAA;IAAtB,KAAK,CAAC,cAAc,CAAC;AAAqB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAK3C,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AACb,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMf,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACjB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMV,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAkGX,UAAA,CAAA;IADL,KAAK,CAAC,QAAQ,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAoC/C,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AA8DH,mBAAmB,CAAC,cAAc,EAAE;AAClC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC7B,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AACjC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE;AAClD,CAAA,CAAC,CAAC;AAEH,mBAAmB,CAAC,cAAc,EAAE;AAClC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AAChC,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC9B,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE;AAClD,CAAA,CAAC;;;;"}

package/{components → react/components}/Sidenav/sgds-sidenav-link.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/react/components/Sidenav/sgds-sidenav-link.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-sidenav-link.cjs.js","sources":["../../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/**\n * @slot default - slot for label of anchor tag.\n *\n * @cssproperty --sidenav-link-font-size - sidenav link font size, default to `--sgds-body-font-size`\n * @cssproperty --sidenav-link-padding-x - sidenav link padding left and right\n * @cssproperty --sidenav-link-padding-y - sidenav link padding top and bottom\n * @cssproperty --sidenav-link-disabled-color - sidenav link disabled color, default to `--sgds-gray-600`\n */\nexport class SgdsSidenavLink extends LinkElement {\n  static styles = [...LinkElement.styles, sidenavLinkStyle];\n}\n\nexport default SgdsSidenavLink;\n"],"names":["LinkElement","sidenavLinkStyle"],"mappings":";;;;;;;;AAGA;;;;;;;AAOG;AACG,MAAO,eAAgB,SAAQA,sBAAW,CAAA;;AACvC,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGA,sBAAW,CAAC,MAAM,EAAEC,sBAAgB,CAAC;;;;;"}

package/react/components/Sidenav/sgds-sidenav-link.js

@@ -0,0 +1,18 @@
+'use client';
+import LinkElement from '../../base/link-element.js';
+import css_248z from './sidenav-link.js';
+
+/**
+ * @slot default - slot for label of anchor tag.
+ *
+ * @cssproperty --sidenav-link-font-size - sidenav link font size, default to `--sgds-body-font-size`
+ * @cssproperty --sidenav-link-padding-x - sidenav link padding left and right
+ * @cssproperty --sidenav-link-padding-y - sidenav link padding top and bottom
+ * @cssproperty --sidenav-link-disabled-color - sidenav link disabled color, default to `--sgds-gray-600`
+ */
+class SgdsSidenavLink extends LinkElement {
+}
+SgdsSidenavLink.styles = [...LinkElement.styles, css_248z];
+
+export { SgdsSidenavLink, SgdsSidenavLink as default };
+//# sourceMappingURL=sgds-sidenav-link.js.map

package/react/components/Sidenav/sgds-sidenav-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-sidenav-link.js","sources":["../../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import LinkElement from \"../../base/link-element\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/**\n * @slot default - slot for label of anchor tag.\n *\n * @cssproperty --sidenav-link-font-size - sidenav link font size, default to `--sgds-body-font-size`\n * @cssproperty --sidenav-link-padding-x - sidenav link padding left and right\n * @cssproperty --sidenav-link-padding-y - sidenav link padding top and bottom\n * @cssproperty --sidenav-link-disabled-color - sidenav link disabled color, default to `--sgds-gray-600`\n */\nexport class SgdsSidenavLink extends LinkElement {\n  static styles = [...LinkElement.styles, sidenavLinkStyle];\n}\n\nexport default SgdsSidenavLink;\n"],"names":["sidenavLinkStyle"],"mappings":";;;;AAGA;;;;;;;AAOG;AACG,MAAO,eAAgB,SAAQ,WAAW,CAAA;;AACvC,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAgB,CAAC;;;;"}

package/{components → react/components}/Sidenav/sgds-sidenav.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/react/components/Sidenav/sgds-sidenav.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-sidenav.cjs.js","sources":["../../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport sidenavStyle from \"./sidenav.css\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum two levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n *\n * @cssproperty --sidenav-theme-color - overall sidenav theme color\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavStyle];\n\n  /** Allow sidenav items to stay open when another item is opened */\n  @property({ type: Boolean, attribute: true })\n  alwaysOpen = false;\n\n  /** Apply position sticky to the sidenav */\n  @property({ type: Boolean, attribute: true })\n  sticky = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private defaultNodes!: SgdsSidenavItem[];\n\n  /** @internal */\n  get items(): SgdsSidenavItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsSidenavItem[];\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsSidenavItem;\n    const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.alwaysOpen || event.defaultPrevented || isSidenavLink) {\n      // No toggling when `alwaysOpen` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsSidenavItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within sidenav-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.active = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <nav class=${classMap({ sticky: this.sticky })}>\n        <div>\n          <slot @click=${this.onToggle}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"names":["SgdsElement","html","classMap","sidenavStyle","__decorate","property","queryAssignedElements"],"mappings":";;;;;;;;;;;;AAOA;;;;;;;;;AASG;AACG,MAAO,WAAY,SAAQA,sBAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAKE,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAInB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KA8ChB;;AAvCC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACtC,CAAC;KACxB;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAyB,CAAC;AAC/C,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,KAAK,mBAAmB,CAAC;;;QAG7D,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,gBAAgB,IAAI,aAAa,EAAE;;YAE9D,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAsB,CAAC;AAEnD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;mBACIC,oBAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;;AAE3B,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;KAGjC,CAAC;KACH;;AArDM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,kBAAY,CAAvC,CAAyC;AAItDC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInBD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC9B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIPD,gBAAA,CAAA;AADP,IAAAE,mCAAqB,EAAE;AACiB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/components/Sidenav/sgds-sidenav.js

@@ -0,0 +1,75 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import SgdsElement from '../../base/sgds-element.js';
+import { classMap } from 'lit/directives/class-map.js';
+import css_248z from './sidenav.js';
+
+/**
+ * @summary The side navigation is used to display a list of links to move between pages within a related category.
+ * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.
+ * Maximum two levels of navigations are allowed.
+ *
+ * @slot default - Default slot for SgdsSidenavItem element.
+ *
+ * @cssproperty --sidenav-theme-color - overall sidenav theme color
+ * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem
+ */
+class SgdsSidenav extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        /** Allow sidenav items to stay open when another item is opened */
+        this.alwaysOpen = false;
+        /** Apply position sticky to the sidenav */
+        this.sticky = false;
+    }
+    /** @internal */
+    get items() {
+        return [...(this.defaultNodes || [])].filter((node) => typeof node.tagName !== "undefined");
+    }
+    async onToggle(event) {
+        const target = event.target;
+        const isSidenavLink = target.tagName === "SGDS-SIDENAV-LINK";
+        // Let the event pass through the DOM so that it can be
+        // prevented from the outside if a user so desires.
+        if (this.alwaysOpen || event.defaultPrevented || isSidenavLink) {
+            // No toggling when `alwaysOpen` or the user prevents it.
+            return;
+        }
+        const items = [...this.items];
+        if (items && !items.length) {
+            // no toggling when there aren't items.
+            return;
+        }
+        items.forEach(item => {
+            // Covers all elements within sidenav-item
+            if (!event.composedPath().includes(item)) {
+                // Close all the items that didn't dispatch the event.
+                item.active = false;
+            }
+        });
+    }
+    render() {
+        return html `
+      <nav class=${classMap({ sticky: this.sticky })}>
+        <div>
+          <slot @click=${this.onToggle}></slot>
+        </div>
+      </nav>
+    `;
+    }
+}
+SgdsSidenav.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: Boolean, attribute: true })
+], SgdsSidenav.prototype, "alwaysOpen", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], SgdsSidenav.prototype, "sticky", void 0);
+__decorate([
+    queryAssignedElements()
+], SgdsSidenav.prototype, "defaultNodes", void 0);
+
+export { SgdsSidenav, SgdsSidenav as default };
+//# sourceMappingURL=sgds-sidenav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-sidenav.js","sources":["../../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport sidenavStyle from \"./sidenav.css\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum two levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n *\n * @cssproperty --sidenav-theme-color - overall sidenav theme color\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavStyle];\n\n  /** Allow sidenav items to stay open when another item is opened */\n  @property({ type: Boolean, attribute: true })\n  alwaysOpen = false;\n\n  /** Apply position sticky to the sidenav */\n  @property({ type: Boolean, attribute: true })\n  sticky = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private defaultNodes!: SgdsSidenavItem[];\n\n  /** @internal */\n  get items(): SgdsSidenavItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsSidenavItem[];\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsSidenavItem;\n    const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.alwaysOpen || event.defaultPrevented || isSidenavLink) {\n      // No toggling when `alwaysOpen` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsSidenavItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within sidenav-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.active = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <nav class=${classMap({ sticky: this.sticky })}>\n        <div>\n          <slot @click=${this.onToggle}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"names":["sidenavStyle"],"mappings":";;;;;;;;AAOA;;;;;;;;;AASG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAKE,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAInB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KA8ChB;;AAvCC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACtC,CAAC;KACxB;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAyB,CAAC;AAC/C,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,KAAK,mBAAmB,CAAC;;;QAG7D,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,gBAAgB,IAAI,aAAa,EAAE;;YAE9D,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAsB,CAAC;AAEnD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;mBACI,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;;AAE3B,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;KAGjC,CAAC;KACH;;AArDM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAY,CAAvC,CAAyC;AAItD,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC9B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIP,UAAA,CAAA;AADP,IAAA,qBAAqB,EAAE;AACiB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/{components → react/components}/Sidenav/sidenav-item.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Sidenav/sidenav-item.cjs.js.map

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

package/react/components/Sidenav/sidenav-item.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--sidenav-item-btn-border-left-width:0.125rem;--sidenav-item-btn-padding-x:1rem;--sidenav-item-btn-padding-y:0.5rem;--sidenav-item-icon-title-gap:1rem}.sidenav-btn{align-items:center;background:0;border:0;border-radius:0;display:flex;font-size:var(--sgds-body-font-size);gap:var(--sidenav-item-icon-title-gap);line-height:1.5rem;padding:var(--sidenav-item-btn-padding-y) var(--sidenav-item-btn-padding-x);text-align:initial;width:100%;slot[name=caret-icon]::slotted(*),svg.bi-chevron-down{margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn.active,.sidenav-btn:hover{border-left:.125rem solid;color:var(--sidenav-theme-color);font-weight:700}.sidenav-btn.disabled{cursor:not-allowed;opacity:var(--sgds-disabled-opacity)}.sidenav-btn:not(.active){slot[name=caret-icon]::slotted(*),svg.bi-chevron-down{transform:rotate(0deg)}}a.sidenav-btn{color:inherit;line-height:var(--sgds-line-height-md);text-decoration:none}div.sidenav-list{display:flex;flex-direction:column;line-height:var(--sgds-line-height-lg);list-style:none;margin:0;padding-left:0}`;
+
+export { css_248z as default };
+//# sourceMappingURL=sidenav-item.js.map

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

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

package/{components → react/components}/Sidenav/sidenav-link.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Sidenav/sidenav-link.cjs.js.map

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

package/react/components/Sidenav/sidenav-link.js

@@ -0,0 +1,7 @@
+'use client';
+import { css } from 'lit';
+
+var css_248z = css`:host{--sidenav-link-font-size:var(--sgds-body-font-size);--sidenav-link-padding-x:1rem;--sidenav-link-padding-y:0.5rem;--sidenav-link-disabled-color:var(--sgds-disabled-color)}a.nav-link{color:inherit;display:block;font-size:var(--sidenav-link-font-size);padding-bottom:var(--sidenav-link-padding-y);padding-left:calc(var(--sidenav-link-padding-y)*4 + var(--sidenav-item-btn-border-left-width));padding-right:0;padding-top:var(--sidenav-link-padding-y);text-decoration:none}a.nav-link.active,a.nav-link:hover{color:var(--sidenav-theme-color)}a.nav-link.disabled{color:var(--sidenav-link-disabled-color);cursor:not-allowed;pointer-events:none}`;
+
+export { css_248z as default };
+//# sourceMappingURL=sidenav-link.js.map

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

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

package/{components → react/components}/Sidenav/sidenav.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Sidenav/sidenav.cjs.js.map

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

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/{components → react/components}/Spinner/sgds-spinner.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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/{components → react/components}/Spinner/spinner.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

package/{components → react/components}/Spinner/spinner.cjs.js.map

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

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/{components → react/components}/Stepper/sgds-stepper.cjs.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });

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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"}