@govtechsg/sgds-web-component 1.1.0 → 1.2.0

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

@@ -3,22 +3,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var Collapse = require('bootstrap/js/src/collapse');
 var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
-var ref_js = require('lit/directives/ref.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
+var animate = require('../../utils/animate.cjs.js');
+var animationRegistry = require('../../utils/animation-registry.cjs.js');
+var event = require('../../utils/event.cjs.js');
 var generateId = require('../../utils/generateId.cjs.js');
+var watch = require('../../utils/watch.cjs.js');
 var sgdsSidenavItem = require('./sgds-sidenav-item.cjs2.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
-
 /**
  *
- * @event sgds-toggle - Emitted when the dropdown is clicked.
+ * @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 slot for SgdsSidenavLink element.
  * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.
@@ -32,10 +34,6 @@ var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
 class SgdsSidenavItem extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
-        /** @internal */
-        this.myCollapse = ref_js.createRef();
-        /** @internal */
-        this.bsCollapse = null;
         /**
          *  when true, toggles the sidenav-item to open on first load and set the active stylings.
          */
@@ -59,59 +57,115 @@ class SgdsSidenavItem extends sgdsElement["default"] {
         /** @internal */
         this.index = "-1";
     }
-    _onClick() {
+    _onToggle() {
         this.emit("sgds-toggle", { detail: { index: this.index } });
     }
-    _onClickButton() {
-        this._onClick();
-        if (this.bsCollapse) {
-            this.bsCollapse.toggle();
-        }
-    }
     _onClickLink() {
-        this._onClick();
+        this._onToggle();
+        this.active = true;
+    }
+    /** Shows the sidenav item. */
+    async show() {
+        if (this.active) {
+            return;
+        }
         this.active = true;
+        return event.waitForEvent(this, "sgds-after-show");
+    }
+    /** Hide the sidenav item */
+    async hide() {
+        if (!this.active) {
+            return;
+        }
+        this.active = false;
+        return event.waitForEvent(this, "sgds-after-hide");
     }
     /**
+     * @deprecated since 1.1. Will be removed in 2.0 and replaced by hide.
      * When invoked, closes the SgdsSidenavItem
      */
-    closeItem() {
-        this.active = false;
-        if (this.bsCollapse)
-            this.bsCollapse.hide();
+    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
      */
-    openItem() {
-        this.active = true;
-        if (this.bsCollapse)
-            this.bsCollapse.show();
+    async openItem() {
+        return await this.show();
     }
     firstUpdated() {
-        // if sidenav has menu, initialise bootstrap collapse
         if (!this.href) {
-            this.bsCollapse = new Collapse__default["default"](this.myCollapse.value, {
-                toggle: this.active
-            });
-            this.myCollapse.value.addEventListener("show.bs.collapse", () => {
-                this.active = true;
-            });
-            this.myCollapse.value.addEventListener("shown.bs.collapse", () => {
-                this.active = true;
-            });
-            this.myCollapse.value.addEventListener("hide.bs.collapse", () => {
-                this.active = false;
-            });
-            this.myCollapse.value.addEventListener("hidden.bs.collapse", () => {
+            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 animate.stopAnimations(this.body);
+            this.body.hidden = false;
+            const { keyframes, options } = animationRegistry.getAnimation(this, "sidenav.show");
+            await animate.animateTo(this.body, animate.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 animate.stopAnimations(this.body);
+            const { keyframes, options } = animationRegistry.getAnimation(this, "sidenav.hide");
+            await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+            this.body.hidden = true;
+            this.body.style.height = "auto";
+            this.emit("sgds-after-hide");
         }
     }
     render() {
         const withMenuTemplate = lit.html ` <button
-        @click=${() => this._onClickButton()}
-        class="collapsed sidenav-btn ${classMap_js.classMap({
+        @click=${this._handleSummaryClick}
+        @keydown=${this._handleSummaryKeyDown}
+        class="sidenav-btn ${classMap_js.classMap({
             disabled: this.disabled,
             active: this.active
         })} "
@@ -138,7 +192,7 @@ class SgdsSidenavItem extends sgdsElement["default"] {
           />
         </svg>
       </button>
-      <div class="collapse" ${ref_js.ref(this.myCollapse)} id="${this.collapseId}">
+      <div class="sidenav-body" id="${this.collapseId}">
         <ul class="sidenav-list" aria-labelledby="${this.buttonId}">
           <slot></slot>
         </ul>
@@ -165,6 +219,12 @@ class SgdsSidenavItem extends sgdsElement["default"] {
     }
 }
 SgdsSidenavItem.styles = [sgdsElement["default"].styles, sgdsSidenavItem["default"]];
+tslib.__decorate([
+    decorators_js.query(".sidenav-body")
+], SgdsSidenavItem.prototype, "body", void 0);
+tslib.__decorate([
+    decorators_js.query(".sidenav-btn")
+], SgdsSidenavItem.prototype, "header", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean })
 ], SgdsSidenavItem.prototype, "active", void 0);
@@ -174,6 +234,23 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsSidenavItem.prototype, "disabled", void 0);
+tslib.__decorate([
+    watch.watch("active", { waitUntilFirstUpdate: true })
+], SgdsSidenavItem.prototype, "handleOpenChange", null);
+animationRegistry.setDefaultAnimation("sidenav.show", {
+    keyframes: [
+        { height: "0", opacity: "0" },
+        { height: "auto", opacity: "1" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
+animationRegistry.setDefaultAnimation("sidenav.hide", {
+    keyframes: [
+        { height: "auto", opacity: "1" },
+        { height: "0", opacity: "0" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
 
 exports.SgdsSidenavItem = SgdsSidenavItem;
 exports["default"] = SgdsSidenavItem;

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.cjs.js","sources":["../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import Collapse from \"bootstrap/js/src/collapse\";\nimport type { Collapse as BsCollapse } from \"bootstrap\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { Ref, createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport genId from \"../../utils/generateId\";\nimport styles from \"./sgds-sidenav-item.scss\";\n\n/**\n *\n * @event sgds-toggle - Emitted when the dropdown is clicked.\n *\n * @slot - 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 *\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, styles];\n\n  /** @internal */\n  private myCollapse: Ref<HTMLElement> = createRef();\n  /** @internal */\n  private bsCollapse: BsCollapse = null;\n\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 _onClick() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  private _onClickButton() {\n    this._onClick();\n    if (this.bsCollapse) {\n      this.bsCollapse.toggle();\n    }\n  }\n  private _onClickLink() {\n    this._onClick();\n    this.active = true;\n  }\n\n  /**\n   * When invoked, closes the SgdsSidenavItem\n   */\n  public closeItem() {\n    this.active = false;\n    if (this.bsCollapse) this.bsCollapse.hide();\n  }\n  /**\n   * When invoked, opens the SgdsSidenavItem\n   */\n  public openItem() {\n    this.active = true;\n    if (this.bsCollapse) this.bsCollapse.show();\n  }\n\n  firstUpdated() {\n    // if sidenav has menu, initialise bootstrap collapse\n    if (!this.href) {\n      this.bsCollapse = new Collapse(this.myCollapse.value, {\n        toggle: this.active\n      });\n\n      this.myCollapse.value.addEventListener(\"show.bs.collapse\", () => {\n        this.active = true;\n      });\n      this.myCollapse.value.addEventListener(\"shown.bs.collapse\", () => {\n        this.active = true;\n      });\n      this.myCollapse.value.addEventListener(\"hide.bs.collapse\", () => {\n        this.active = false;\n      });\n      this.myCollapse.value.addEventListener(\"hidden.bs.collapse\", () => {\n        this.active = false;\n      });\n    }\n  }\n\n  render() {\n    const withMenuTemplate = html` <button\n        @click=${() => this._onClickButton()}\n        class=\"collapsed sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })} \"\n        aria-expanded=\"${this.active}\"\n        aria-controls=\"${this.collapseId}\"\n        aria-selected=\"${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        <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      </button>\n      <div class=\"collapse\" ${ref(this.myCollapse)} id=\"${this.collapseId}\">\n        <ul class=\"sidenav-list\" aria-labelledby=\"${this.buttonId}\">\n          <slot></slot>\n        </ul>\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-selected=\"${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      <li class=\"sidenav-item\" aria-haspopup=\"${!this.href}\">${this.href ? noMenuTemplate : withMenuTemplate}</li>\n    `;\n  }\n}\n\nexport default SgdsSidenavItem;\n"],"names":["SgdsElement","createRef","genId","Collapse","html","classMap","ref","styles","__decorate","property"],"mappings":"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"}
+{"version":3,"file":"sgds-sidenav-item.cjs.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 styles from \"./sgds-sidenav-item.scss\";\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 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 *\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, styles];\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-selected=\"${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        <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      </button>\n      <div class=\"sidenav-body\" id=\"${this.collapseId}\">\n        <ul class=\"sidenav-list\" aria-labelledby=\"${this.buttonId}\">\n          <slot></slot>\n        </ul>\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-selected=\"${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      <li class=\"sidenav-item\" aria-haspopup=\"${!this.href}\">${this.href ? noMenuTemplate : withMenuTemplate}</li>\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":["SgdsElement","genId","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","html","classMap","styles","__decorate","query","property","watch","setDefaultAnimation"],"mappings":"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"}

package/components/Sidenav/sgds-sidenav-item.d.ts

@@ -1,7 +1,11 @@
 import SgdsElement from "../../base/sgds-element";
 /**
  *
- * @event sgds-toggle - Emitted when the dropdown is clicked.
+ * @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 slot for SgdsSidenavLink element.
  * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.
@@ -14,10 +18,9 @@ import SgdsElement from "../../base/sgds-element";
  */
 export declare class SgdsSidenavItem extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
+    body: HTMLElement;
     /** @internal */
-    private myCollapse;
-    /** @internal */
-    private bsCollapse;
+    header: HTMLElement;
     /**
      *  when true, toggles the sidenav-item to open on first load and set the active stylings.
      */
@@ -40,18 +43,26 @@ export declare class SgdsSidenavItem extends SgdsElement {
     private buttonId;
     /** @internal */
     private index;
-    private _onClick;
-    private _onClickButton;
+    private _onToggle;
     private _onClickLink;
+    /** Shows the sidenav item. */
+    show(): Promise<void>;
+    /** Hide the sidenav item */
+    hide(): Promise<void>;
     /**
+     * @deprecated since 1.1. Will be removed in 2.0 and replaced by hide.
      * When invoked, closes the SgdsSidenavItem
      */
-    closeItem(): void;
+    closeItem(): Promise<void>;
     /**
+     * @deprecated since 1.1. Will be removed in 2.0 and replaced by show.
      * When invoked, opens the SgdsSidenavItem
      */
-    openItem(): void;
+    openItem(): Promise<void>;
     firstUpdated(): void;
+    private _handleSummaryClick;
+    private _handleSummaryKeyDown;
+    handleOpenChange(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default SgdsSidenavItem;

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

@@ -1,16 +1,22 @@
 import { __decorate } from 'tslib';
-import Collapse from 'bootstrap/js/src/collapse';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { query, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { createRef, ref } from 'lit/directives/ref.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 './sgds-sidenav-item2.js';
 
 /**
  *
- * @event sgds-toggle - Emitted when the dropdown is clicked.
+ * @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 slot for SgdsSidenavLink element.
  * @slot title - title slot for the content of SgdsSidenavItem's button / anchor element.
@@ -24,10 +30,6 @@ import css_248z from './sgds-sidenav-item2.js';
 class SgdsSidenavItem extends SgdsElement {
     constructor() {
         super(...arguments);
-        /** @internal */
-        this.myCollapse = createRef();
-        /** @internal */
-        this.bsCollapse = null;
         /**
          *  when true, toggles the sidenav-item to open on first load and set the active stylings.
          */
@@ -51,59 +53,115 @@ class SgdsSidenavItem extends SgdsElement {
         /** @internal */
         this.index = "-1";
     }
-    _onClick() {
+    _onToggle() {
         this.emit("sgds-toggle", { detail: { index: this.index } });
     }
-    _onClickButton() {
-        this._onClick();
-        if (this.bsCollapse) {
-            this.bsCollapse.toggle();
-        }
-    }
     _onClickLink() {
-        this._onClick();
+        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
      */
-    closeItem() {
-        this.active = false;
-        if (this.bsCollapse)
-            this.bsCollapse.hide();
+    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
      */
-    openItem() {
-        this.active = true;
-        if (this.bsCollapse)
-            this.bsCollapse.show();
+    async openItem() {
+        return await this.show();
     }
     firstUpdated() {
-        // if sidenav has menu, initialise bootstrap collapse
         if (!this.href) {
-            this.bsCollapse = new Collapse(this.myCollapse.value, {
-                toggle: this.active
-            });
-            this.myCollapse.value.addEventListener("show.bs.collapse", () => {
-                this.active = true;
-            });
-            this.myCollapse.value.addEventListener("shown.bs.collapse", () => {
-                this.active = true;
-            });
-            this.myCollapse.value.addEventListener("hide.bs.collapse", () => {
-                this.active = false;
-            });
-            this.myCollapse.value.addEventListener("hidden.bs.collapse", () => {
+            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._onClickButton()}
-        class="collapsed sidenav-btn ${classMap({
+        @click=${this._handleSummaryClick}
+        @keydown=${this._handleSummaryKeyDown}
+        class="sidenav-btn ${classMap({
             disabled: this.disabled,
             active: this.active
         })} "
@@ -130,7 +188,7 @@ class SgdsSidenavItem extends SgdsElement {
           />
         </svg>
       </button>
-      <div class="collapse" ${ref(this.myCollapse)} id="${this.collapseId}">
+      <div class="sidenav-body" id="${this.collapseId}">
         <ul class="sidenav-list" aria-labelledby="${this.buttonId}">
           <slot></slot>
         </ul>
@@ -157,6 +215,12 @@ class SgdsSidenavItem extends SgdsElement {
     }
 }
 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);
@@ -166,6 +230,23 @@ __decorate([
 __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/components/Sidenav/sgds-sidenav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.js","sources":["../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import Collapse from \"bootstrap/js/src/collapse\";\nimport type { Collapse as BsCollapse } from \"bootstrap\";\nimport { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { Ref, createRef, ref } from \"lit/directives/ref.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport genId from \"../../utils/generateId\";\nimport styles from \"./sgds-sidenav-item.scss\";\n\n/**\n *\n * @event sgds-toggle - Emitted when the dropdown is clicked.\n *\n * @slot - 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 *\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, styles];\n\n  /** @internal */\n  private myCollapse: Ref<HTMLElement> = createRef();\n  /** @internal */\n  private bsCollapse: BsCollapse = null;\n\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 _onClick() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  private _onClickButton() {\n    this._onClick();\n    if (this.bsCollapse) {\n      this.bsCollapse.toggle();\n    }\n  }\n  private _onClickLink() {\n    this._onClick();\n    this.active = true;\n  }\n\n  /**\n   * When invoked, closes the SgdsSidenavItem\n   */\n  public closeItem() {\n    this.active = false;\n    if (this.bsCollapse) this.bsCollapse.hide();\n  }\n  /**\n   * When invoked, opens the SgdsSidenavItem\n   */\n  public openItem() {\n    this.active = true;\n    if (this.bsCollapse) this.bsCollapse.show();\n  }\n\n  firstUpdated() {\n    // if sidenav has menu, initialise bootstrap collapse\n    if (!this.href) {\n      this.bsCollapse = new Collapse(this.myCollapse.value, {\n        toggle: this.active\n      });\n\n      this.myCollapse.value.addEventListener(\"show.bs.collapse\", () => {\n        this.active = true;\n      });\n      this.myCollapse.value.addEventListener(\"shown.bs.collapse\", () => {\n        this.active = true;\n      });\n      this.myCollapse.value.addEventListener(\"hide.bs.collapse\", () => {\n        this.active = false;\n      });\n      this.myCollapse.value.addEventListener(\"hidden.bs.collapse\", () => {\n        this.active = false;\n      });\n    }\n  }\n\n  render() {\n    const withMenuTemplate = html` <button\n        @click=${() => this._onClickButton()}\n        class=\"collapsed sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })} \"\n        aria-expanded=\"${this.active}\"\n        aria-controls=\"${this.collapseId}\"\n        aria-selected=\"${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        <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      </button>\n      <div class=\"collapse\" ${ref(this.myCollapse)} id=\"${this.collapseId}\">\n        <ul class=\"sidenav-list\" aria-labelledby=\"${this.buttonId}\">\n          <slot></slot>\n        </ul>\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-selected=\"${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      <li class=\"sidenav-item\" aria-haspopup=\"${!this.href}\">${this.href ? noMenuTemplate : withMenuTemplate}</li>\n    `;\n  }\n}\n\nexport default SgdsSidenavItem;\n"],"names":["styles"],"mappings":"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"}
+{"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 styles from \"./sgds-sidenav-item.scss\";\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 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 *\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, styles];\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-selected=\"${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        <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      </button>\n      <div class=\"sidenav-body\" id=\"${this.collapseId}\">\n        <ul class=\"sidenav-list\" aria-labelledby=\"${this.buttonId}\">\n          <slot></slot>\n        </ul>\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-selected=\"${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      <li class=\"sidenav-item\" aria-haspopup=\"${!this.href}\">${this.href ? noMenuTemplate : withMenuTemplate}</li>\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":["styles"],"mappings":"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"}