@govtechsg/sgds-web-component 1.1.0 → 1.2.0

package/components/Mainnav/sgds-mainnav.cjs.js

@@ -3,20 +3,18 @@
 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 breakpoints = require('../../utils/breakpoints.cjs.js');
+var event = require('../../utils/event.cjs.js');
 var generateId = require('../../utils/generateId.cjs.js');
+var watch = require('../../utils/watch.cjs.js');
 var sgdsMainnav = require('./sgds-mainnav.cjs2.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
-
 const SIZES = {
     sm: breakpoints.SM_BREAKPOINT,
     md: breakpoints.MD_BREAKPOINT,
@@ -29,6 +27,11 @@ const SIZES = {
 /**
  * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.
  *
+ * @event sgds-show - Emitted on show. Only for collapsed menu.
+ * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.
+ * @event sgds-hide - Emitted on hide. Only for collapsed menu.
+ * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
+ *
  * @slot - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
  * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.
  * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here
@@ -45,10 +48,6 @@ const SIZES = {
 class SgdsMainnav extends sgdsElement["default"] {
     constructor() {
         super();
-        /** @internal */
-        this.myCollapse = ref_js.createRef();
-        /** @internal */
-        this.bsCollapse = null;
         /** The href link for brand logo */
         this.brandHref = "";
         this.collapseId = generateId["default"]("mainnav", "collapse");
@@ -63,27 +62,78 @@ class SgdsMainnav extends sgdsElement["default"] {
             if (newBreakpointReachedValue !== this.breakpointReached) {
                 this.requestUpdate();
             }
+            else {
+                this.body ? (this.body.hidden = true) : null;
+                this.expanded = false;
+            }
         });
     }
-    _onClickButton() {
-        this.bsCollapse.toggle();
-    }
     firstUpdated() {
-        this.bsCollapse = new Collapse__default["default"](this.myCollapse.value, {
-            toggle: false
-        });
-        this.myCollapse.value.addEventListener("show.bs.collapse", () => {
-            this.expanded = true;
-        });
-        this.myCollapse.value.addEventListener("shown.bs.collapse", () => {
-            this.expanded = true;
-        });
-        this.myCollapse.value.addEventListener("hide.bs.collapse", () => {
+        if (this.breakpointReached && this.body) {
             this.expanded = false;
-        });
-        this.myCollapse.value.addEventListener("hidden.bs.collapse", () => {
+            this.body.hidden = true;
+        }
+    }
+    handleSummaryClick() {
+        if (this.expanded) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+        this.header.focus();
+    }
+    async _animateToShow() {
+        const sgdsShow = this.emit("sgds-show", { cancelable: true });
+        if (sgdsShow.defaultPrevented) {
             this.expanded = false;
-        });
+            return;
+        }
+        await animate.stopAnimations(this.body);
+        this.body.hidden = false;
+        const { keyframes, options } = animationRegistry.getAnimation(this, "mainnav.show");
+        await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+        this.body.style.height = "auto";
+        this.emit("sgds-after-show");
+    }
+    async _animateToHide() {
+        const slHide = this.emit("sgds-hide", { cancelable: true });
+        if (slHide.defaultPrevented) {
+            this.expanded = true;
+            return;
+        }
+        await animate.stopAnimations(this.body);
+        const { keyframes, options } = animationRegistry.getAnimation(this, "mainnav.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");
+    }
+    async handleOpenChange() {
+        if (this.expanded) {
+            // Show
+            this._animateToShow();
+        }
+        else {
+            // Hide
+            this._animateToHide();
+        }
+    }
+    /** Shows the menu. For when mainnav is in the collapsed form */
+    async show() {
+        if (this.expanded) {
+            return;
+        }
+        this.expanded = true;
+        return event.waitForEvent(this, "sgds-after-show");
+    }
+    /** Hide the menu. For when mainnav is in the collapsed form */
+    async hide() {
+        if (!this.expanded) {
+            return;
+        }
+        this.expanded = false;
+        return event.waitForEvent(this, "sgds-after-hide");
     }
     // assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
     _handleSlotChange(e) {
@@ -94,7 +144,7 @@ class SgdsMainnav extends sgdsElement["default"] {
     }
     render() {
         this.breakpointReached = window.innerWidth < SIZES[this.expand];
-        const collapseClass = "collapse navbar-collapse order-2";
+        const collapseClass = "navbar-body navbar-collapse order-2";
         return lit.html `
       <nav
         class="sgds navbar navbar-light
@@ -107,7 +157,7 @@ class SgdsMainnav extends sgdsElement["default"] {
         <button
           class="navbar-toggler order-1"
           type="button"
-          @click=${() => this._onClickButton()}
+          @click=${this.handleSummaryClick}
           aria-controls="${this.collapseId}"
           aria-expanded="${this.expanded}"
           aria-label="Toggle navigation"
@@ -126,7 +176,7 @@ class SgdsMainnav extends sgdsElement["default"] {
             />
           </svg>
         </button>
-        <div class=${collapseClass} ${ref_js.ref(this.myCollapse)} id=${this.collapseId}>
+        <div class=${collapseClass} id=${this.collapseId}>
           <ul class="navbar-nav">
             <slot></slot>
             <slot
@@ -151,6 +201,12 @@ class SgdsMainnav extends sgdsElement["default"] {
     }
 }
 SgdsMainnav.styles = [sgdsElement["default"].styles, sgdsMainnav["default"]];
+tslib.__decorate([
+    decorators_js.query(".navbar-toggler")
+], SgdsMainnav.prototype, "header", void 0);
+tslib.__decorate([
+    decorators_js.query(".navbar-body")
+], SgdsMainnav.prototype, "body", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String })
 ], SgdsMainnav.prototype, "brandHref", void 0);
@@ -163,6 +219,23 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.state()
 ], SgdsMainnav.prototype, "expanded", void 0);
+tslib.__decorate([
+    watch.watch("expanded", { waitUntilFirstUpdate: true })
+], SgdsMainnav.prototype, "handleOpenChange", null);
+animationRegistry.setDefaultAnimation("mainnav.show", {
+    keyframes: [
+        { height: "0", opacity: "0" },
+        { height: "auto", opacity: "1" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
+animationRegistry.setDefaultAnimation("mainnav.hide", {
+    keyframes: [
+        { height: "auto", opacity: "1" },
+        { height: "0", opacity: "0" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
 
 exports.SgdsMainnav = SgdsMainnav;
 exports["default"] = SgdsMainnav;

package/components/Mainnav/sgds-mainnav.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.cjs.js","sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import Collapse from \"bootstrap/js/src/collapse\";\nimport type { Collapse as BsCollapse } from \"bootstrap\";\nimport { html } from \"lit\";\nimport { property, state } 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 { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport genId from \"../../utils/generateId\";\nimport styles from \"./sgds-mainnav.scss\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  XXL: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @slot - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n * @cssproperty --mainnav-background-color - Navbar's background color.\n * @cssproperty --mainnav-padding-x - left and right padding for browser width > 768px\n * @cssproperty --mainnav-padding-y - top and bottom padding for browser width > 768px\n * @cssproperty --mainnav-mobile-padding-x - left and right padding for browser width < 768px\n * @cssproperty --mainnav-mobile-padding-y - top and bottom padding for browser width < 768px\n * @cssproperty --mainnav-borderBottom-width - bottom border width\n * @cssproperty --mainnav-borderBottom-color - borderBottom width color\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n\n  constructor() {\n    super();\n    window.addEventListener(\"resize\", () => {\n      const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n      if (newBreakpointReachedValue !== this.breakpointReached) {\n        this.requestUpdate();\n      }\n    });\n  }\n  /** @internal */\n  private myCollapse: Ref<HTMLElement> = createRef();\n  /** @internal */\n  private bsCollapse: BsCollapse = null;\n\n  private _onClickButton() {\n    this.bsCollapse.toggle();\n  }\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** @internal */\n  @state()\n  breakpointReached = false;\n\n  /** @internal */\n  @state()\n  expanded = false;\n\n  firstUpdated() {\n    this.bsCollapse = new Collapse(this.myCollapse.value, {\n      toggle: false\n    });\n    this.myCollapse.value.addEventListener(\"show.bs.collapse\", () => {\n      this.expanded = true;\n    });\n    this.myCollapse.value.addEventListener(\"shown.bs.collapse\", () => {\n      this.expanded = true;\n    });\n    this.myCollapse.value.addEventListener(\"hide.bs.collapse\", () => {\n      this.expanded = false;\n    });\n    this.myCollapse.value.addEventListener(\"hidden.bs.collapse\", () => {\n      this.expanded = false;\n    });\n  }\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n    });\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n    const collapseClass = \"collapse navbar-collapse order-2\";\n    return html`\n      <nav\n        class=\"sgds navbar navbar-light\n        ${this._expandClass()}\"\n      >\n        <a class=\"navbar-brand me-auto order-first\" href=${this.brandHref} aria-label=\"brand-link\">\n          <slot name=\"brand\"></slot>\n        </a>\n        <slot name=\"non-collapsible\" class=\"${this.breakpointReached ? \"order-1\" : \"order-last\"}\"></slot>\n        <button\n          class=\"navbar-toggler order-1\"\n          type=\"button\"\n          @click=${() => this._onClickButton()}\n          aria-controls=\"${this.collapseId}\"\n          aria-expanded=\"${this.expanded}\"\n          aria-label=\"Toggle navigation\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"30\"\n            height=\"30\"\n            fill=\"currentColor\"\n            class=\"bi bi-list\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z\"\n            />\n          </svg>\n        </button>\n        <div class=${collapseClass} ${ref(this.myCollapse)} id=${this.collapseId}>\n          <ul class=\"navbar-nav\">\n            <slot></slot>\n            <slot\n              name=\"end\"\n              class=${classMap({ \"slot-end\": !this.breakpointReached })}\n              @slotchange=${this._handleSlotChange}\n            ></slot>\n          </ul>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\n\nexport default SgdsMainnav;\n"],"names":["SM_BREAKPOINT","MD_BREAKPOINT","LG_BREAKPOINT","XL_BREAKPOINT","XXL_BREAKPOINT","SgdsElement","createRef","genId","Collapse","html","ref","classMap","styles","__decorate","property","state"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav.cjs.js","sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, state } 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 { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./sgds-mainnav.scss\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  XXL: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n * @cssproperty --mainnav-background-color - Navbar's background color.\n * @cssproperty --mainnav-padding-x - left and right padding for browser width > 768px\n * @cssproperty --mainnav-padding-y - top and bottom padding for browser width > 768px\n * @cssproperty --mainnav-mobile-padding-x - left and right padding for browser width < 768px\n * @cssproperty --mainnav-mobile-padding-y - top and bottom padding for browser width < 768px\n * @cssproperty --mainnav-borderBottom-width - bottom border width\n * @cssproperty --mainnav-borderBottom-color - borderBottom width color\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n\n  constructor() {\n    super();\n    window.addEventListener(\"resize\", () => {\n      const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n      if (newBreakpointReachedValue !== this.breakpointReached) {\n        this.requestUpdate();\n      } else {\n        this.body ? (this.body.hidden = true) : null;\n        this.expanded = false;\n      }\n    });\n  }\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** @internal */\n  @state()\n  breakpointReached = false;\n\n  /** @internal */\n  @state()\n  expanded = false;\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n    }\n  }\n  private handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanded = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.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  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.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  @watch(\"expanded\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanded) {\n      // Show\n      this._animateToShow();\n    } else {\n      // Hide\n      this._animateToHide();\n    }\n  }\n  /** Shows the menu. For when mainnav is in the collapsed form */\n  public async show() {\n    if (this.expanded) {\n      return;\n    }\n\n    this.expanded = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when mainnav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) {\n      return;\n    }\n    this.expanded = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n    });\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n    const collapseClass = \"navbar-body navbar-collapse order-2\";\n    return html`\n      <nav\n        class=\"sgds navbar navbar-light\n        ${this._expandClass()}\"\n      >\n        <a class=\"navbar-brand me-auto order-first\" href=${this.brandHref} aria-label=\"brand-link\">\n          <slot name=\"brand\"></slot>\n        </a>\n        <slot name=\"non-collapsible\" class=\"${this.breakpointReached ? \"order-1\" : \"order-last\"}\"></slot>\n        <button\n          class=\"navbar-toggler order-1\"\n          type=\"button\"\n          @click=${this.handleSummaryClick}\n          aria-controls=\"${this.collapseId}\"\n          aria-expanded=\"${this.expanded}\"\n          aria-label=\"Toggle navigation\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"30\"\n            height=\"30\"\n            fill=\"currentColor\"\n            class=\"bi bi-list\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z\"\n            />\n          </svg>\n        </button>\n        <div class=${collapseClass} id=${this.collapseId}>\n          <ul class=\"navbar-nav\">\n            <slot></slot>\n            <slot\n              name=\"end\"\n              class=${classMap({ \"slot-end\": !this.breakpointReached })}\n              @slotchange=${this._handleSlotChange}\n            ></slot>\n          </ul>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\nsetDefaultAnimation(\"mainnav.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(\"mainnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsMainnav;\n"],"names":["SM_BREAKPOINT","MD_BREAKPOINT","LG_BREAKPOINT","XL_BREAKPOINT","XXL_BREAKPOINT","SgdsElement","genId","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","styles","__decorate","query","property","state","watch","setDefaultAnimation"],"mappings":"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"}

package/components/Mainnav/sgds-mainnav.d.ts

@@ -3,6 +3,11 @@ export type MainnavExpandSize = "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "
 /**
  * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.
  *
+ * @event sgds-show - Emitted on show. Only for collapsed menu.
+ * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.
+ * @event sgds-hide - Emitted on hide. Only for collapsed menu.
+ * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
+ *
  * @slot - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
  * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.
  * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here
@@ -18,12 +23,11 @@ export type MainnavExpandSize = "sm" | "md" | "lg" | "xl" | "xxl" | "always" | "
  */
 export declare class SgdsMainnav extends SgdsElement {
     static styles: import("lit").CSSResultGroup[];
-    constructor();
     /** @internal */
-    private myCollapse;
+    header: HTMLElement;
     /** @internal */
-    private bsCollapse;
-    private _onClickButton;
+    body: HTMLElement;
+    constructor();
     /** The href link for brand logo */
     brandHref: string;
     private collapseId;
@@ -34,6 +38,14 @@ export declare class SgdsMainnav extends SgdsElement {
     /** @internal */
     expanded: boolean;
     firstUpdated(): void;
+    private handleSummaryClick;
+    private _animateToShow;
+    private _animateToHide;
+    handleOpenChange(): Promise<void>;
+    /** Shows the menu. For when mainnav is in the collapsed form */
+    show(): Promise<void>;
+    /** Hide the menu. For when mainnav is in the collapsed form */
+    hide(): Promise<void>;
     _handleSlotChange(e: Event): void;
     render(): import("lit-html").TemplateResult<1>;
     _expandClass(): string;

package/components/Mainnav/sgds-mainnav.js

@@ -1,12 +1,14 @@
 import { __decorate } from 'tslib';
-import Collapse from 'bootstrap/js/src/collapse';
 import { html } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { query, property, state } 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 { SM_BREAKPOINT, MD_BREAKPOINT, LG_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from '../../utils/breakpoints.js';
+import { waitForEvent } from '../../utils/event.js';
 import genId from '../../utils/generateId.js';
+import { watch } from '../../utils/watch.js';
 import css_248z from './sgds-mainnav2.js';
 
 const SIZES = {
@@ -21,6 +23,11 @@ const SIZES = {
 /**
  * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.
  *
+ * @event sgds-show - Emitted on show. Only for collapsed menu.
+ * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.
+ * @event sgds-hide - Emitted on hide. Only for collapsed menu.
+ * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
+ *
  * @slot - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
  * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.
  * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here
@@ -37,10 +44,6 @@ const SIZES = {
 class SgdsMainnav extends SgdsElement {
     constructor() {
         super();
-        /** @internal */
-        this.myCollapse = createRef();
-        /** @internal */
-        this.bsCollapse = null;
         /** The href link for brand logo */
         this.brandHref = "";
         this.collapseId = genId("mainnav", "collapse");
@@ -55,27 +58,78 @@ class SgdsMainnav extends SgdsElement {
             if (newBreakpointReachedValue !== this.breakpointReached) {
                 this.requestUpdate();
             }
+            else {
+                this.body ? (this.body.hidden = true) : null;
+                this.expanded = false;
+            }
         });
     }
-    _onClickButton() {
-        this.bsCollapse.toggle();
-    }
     firstUpdated() {
-        this.bsCollapse = new Collapse(this.myCollapse.value, {
-            toggle: false
-        });
-        this.myCollapse.value.addEventListener("show.bs.collapse", () => {
-            this.expanded = true;
-        });
-        this.myCollapse.value.addEventListener("shown.bs.collapse", () => {
-            this.expanded = true;
-        });
-        this.myCollapse.value.addEventListener("hide.bs.collapse", () => {
+        if (this.breakpointReached && this.body) {
             this.expanded = false;
-        });
-        this.myCollapse.value.addEventListener("hidden.bs.collapse", () => {
+            this.body.hidden = true;
+        }
+    }
+    handleSummaryClick() {
+        if (this.expanded) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+        this.header.focus();
+    }
+    async _animateToShow() {
+        const sgdsShow = this.emit("sgds-show", { cancelable: true });
+        if (sgdsShow.defaultPrevented) {
             this.expanded = false;
-        });
+            return;
+        }
+        await stopAnimations(this.body);
+        this.body.hidden = false;
+        const { keyframes, options } = getAnimation(this, "mainnav.show");
+        await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+        this.body.style.height = "auto";
+        this.emit("sgds-after-show");
+    }
+    async _animateToHide() {
+        const slHide = this.emit("sgds-hide", { cancelable: true });
+        if (slHide.defaultPrevented) {
+            this.expanded = true;
+            return;
+        }
+        await stopAnimations(this.body);
+        const { keyframes, options } = getAnimation(this, "mainnav.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");
+    }
+    async handleOpenChange() {
+        if (this.expanded) {
+            // Show
+            this._animateToShow();
+        }
+        else {
+            // Hide
+            this._animateToHide();
+        }
+    }
+    /** Shows the menu. For when mainnav is in the collapsed form */
+    async show() {
+        if (this.expanded) {
+            return;
+        }
+        this.expanded = true;
+        return waitForEvent(this, "sgds-after-show");
+    }
+    /** Hide the menu. For when mainnav is in the collapsed form */
+    async hide() {
+        if (!this.expanded) {
+            return;
+        }
+        this.expanded = false;
+        return waitForEvent(this, "sgds-after-hide");
     }
     // assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
     _handleSlotChange(e) {
@@ -86,7 +140,7 @@ class SgdsMainnav extends SgdsElement {
     }
     render() {
         this.breakpointReached = window.innerWidth < SIZES[this.expand];
-        const collapseClass = "collapse navbar-collapse order-2";
+        const collapseClass = "navbar-body navbar-collapse order-2";
         return html `
       <nav
         class="sgds navbar navbar-light
@@ -99,7 +153,7 @@ class SgdsMainnav extends SgdsElement {
         <button
           class="navbar-toggler order-1"
           type="button"
-          @click=${() => this._onClickButton()}
+          @click=${this.handleSummaryClick}
           aria-controls="${this.collapseId}"
           aria-expanded="${this.expanded}"
           aria-label="Toggle navigation"
@@ -118,7 +172,7 @@ class SgdsMainnav extends SgdsElement {
             />
           </svg>
         </button>
-        <div class=${collapseClass} ${ref(this.myCollapse)} id=${this.collapseId}>
+        <div class=${collapseClass} id=${this.collapseId}>
           <ul class="navbar-nav">
             <slot></slot>
             <slot
@@ -143,6 +197,12 @@ class SgdsMainnav extends SgdsElement {
     }
 }
 SgdsMainnav.styles = [SgdsElement.styles, css_248z];
+__decorate([
+    query(".navbar-toggler")
+], SgdsMainnav.prototype, "header", void 0);
+__decorate([
+    query(".navbar-body")
+], SgdsMainnav.prototype, "body", void 0);
 __decorate([
     property({ type: String })
 ], SgdsMainnav.prototype, "brandHref", void 0);
@@ -155,6 +215,23 @@ __decorate([
 __decorate([
     state()
 ], SgdsMainnav.prototype, "expanded", void 0);
+__decorate([
+    watch("expanded", { waitUntilFirstUpdate: true })
+], SgdsMainnav.prototype, "handleOpenChange", null);
+setDefaultAnimation("mainnav.show", {
+    keyframes: [
+        { height: "0", opacity: "0" },
+        { height: "auto", opacity: "1" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
+setDefaultAnimation("mainnav.hide", {
+    keyframes: [
+        { height: "auto", opacity: "1" },
+        { height: "0", opacity: "0" }
+    ],
+    options: { duration: 200, easing: "ease-in-out" }
+});
 
 export { SgdsMainnav, SgdsMainnav as default };
 //# sourceMappingURL=sgds-mainnav.js.map

package/components/Mainnav/sgds-mainnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.js","sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import Collapse from \"bootstrap/js/src/collapse\";\nimport type { Collapse as BsCollapse } from \"bootstrap\";\nimport { html } from \"lit\";\nimport { property, state } 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 { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport genId from \"../../utils/generateId\";\nimport styles from \"./sgds-mainnav.scss\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  XXL: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @slot - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n * @cssproperty --mainnav-background-color - Navbar's background color.\n * @cssproperty --mainnav-padding-x - left and right padding for browser width > 768px\n * @cssproperty --mainnav-padding-y - top and bottom padding for browser width > 768px\n * @cssproperty --mainnav-mobile-padding-x - left and right padding for browser width < 768px\n * @cssproperty --mainnav-mobile-padding-y - top and bottom padding for browser width < 768px\n * @cssproperty --mainnav-borderBottom-width - bottom border width\n * @cssproperty --mainnav-borderBottom-color - borderBottom width color\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n\n  constructor() {\n    super();\n    window.addEventListener(\"resize\", () => {\n      const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n      if (newBreakpointReachedValue !== this.breakpointReached) {\n        this.requestUpdate();\n      }\n    });\n  }\n  /** @internal */\n  private myCollapse: Ref<HTMLElement> = createRef();\n  /** @internal */\n  private bsCollapse: BsCollapse = null;\n\n  private _onClickButton() {\n    this.bsCollapse.toggle();\n  }\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** @internal */\n  @state()\n  breakpointReached = false;\n\n  /** @internal */\n  @state()\n  expanded = false;\n\n  firstUpdated() {\n    this.bsCollapse = new Collapse(this.myCollapse.value, {\n      toggle: false\n    });\n    this.myCollapse.value.addEventListener(\"show.bs.collapse\", () => {\n      this.expanded = true;\n    });\n    this.myCollapse.value.addEventListener(\"shown.bs.collapse\", () => {\n      this.expanded = true;\n    });\n    this.myCollapse.value.addEventListener(\"hide.bs.collapse\", () => {\n      this.expanded = false;\n    });\n    this.myCollapse.value.addEventListener(\"hidden.bs.collapse\", () => {\n      this.expanded = false;\n    });\n  }\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n    });\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n    const collapseClass = \"collapse navbar-collapse order-2\";\n    return html`\n      <nav\n        class=\"sgds navbar navbar-light\n        ${this._expandClass()}\"\n      >\n        <a class=\"navbar-brand me-auto order-first\" href=${this.brandHref} aria-label=\"brand-link\">\n          <slot name=\"brand\"></slot>\n        </a>\n        <slot name=\"non-collapsible\" class=\"${this.breakpointReached ? \"order-1\" : \"order-last\"}\"></slot>\n        <button\n          class=\"navbar-toggler order-1\"\n          type=\"button\"\n          @click=${() => this._onClickButton()}\n          aria-controls=\"${this.collapseId}\"\n          aria-expanded=\"${this.expanded}\"\n          aria-label=\"Toggle navigation\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"30\"\n            height=\"30\"\n            fill=\"currentColor\"\n            class=\"bi bi-list\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z\"\n            />\n          </svg>\n        </button>\n        <div class=${collapseClass} ${ref(this.myCollapse)} id=${this.collapseId}>\n          <ul class=\"navbar-nav\">\n            <slot></slot>\n            <slot\n              name=\"end\"\n              class=${classMap({ \"slot-end\": !this.breakpointReached })}\n              @slotchange=${this._handleSlotChange}\n            ></slot>\n          </ul>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\n\nexport default SgdsMainnav;\n"],"names":["styles"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav.js","sources":["../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, query, state } 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 { LG_BREAKPOINT, MD_BREAKPOINT, SM_BREAKPOINT, XL_BREAKPOINT, XXL_BREAKPOINT } from \"../../utils/breakpoints\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport styles from \"./sgds-mainnav.scss\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\nconst SIZES = {\n  sm: SM_BREAKPOINT,\n  md: MD_BREAKPOINT,\n  lg: LG_BREAKPOINT,\n  xl: XL_BREAKPOINT,\n  XXL: XXL_BREAKPOINT,\n  never: Infinity,\n  always: -1\n};\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n * @cssproperty --mainnav-background-color - Navbar's background color.\n * @cssproperty --mainnav-padding-x - left and right padding for browser width > 768px\n * @cssproperty --mainnav-padding-y - top and bottom padding for browser width > 768px\n * @cssproperty --mainnav-mobile-padding-x - left and right padding for browser width < 768px\n * @cssproperty --mainnav-mobile-padding-y - top and bottom padding for browser width < 768px\n * @cssproperty --mainnav-borderBottom-width - bottom border width\n * @cssproperty --mainnav-borderBottom-color - borderBottom width color\n */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [SgdsElement.styles, styles];\n\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n\n  constructor() {\n    super();\n    window.addEventListener(\"resize\", () => {\n      const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];\n      if (newBreakpointReachedValue !== this.breakpointReached) {\n        this.requestUpdate();\n      } else {\n        this.body ? (this.body.hidden = true) : null;\n        this.expanded = false;\n      }\n    });\n  }\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  private collapseId = genId(\"mainnav\", \"collapse\");\n\n  /** The breakpoint, below which, the Navbar will collapse. When always the Navbar will always be expanded regardless of screen size. When never, the Navbar will always be collapsed */\n  @property({ type: String })\n  expand: MainnavExpandSize = \"lg\";\n\n  /** @internal */\n  @state()\n  breakpointReached = false;\n\n  /** @internal */\n  @state()\n  expanded = false;\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n    }\n  }\n  private handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanded = false;\n      return;\n    }\n\n    await stopAnimations(this.body);\n    this.body.hidden = false;\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.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  }\n\n  private async _animateToHide() {\n    const slHide = this.emit(\"sgds-hide\", { cancelable: true });\n    if (slHide.defaultPrevented) {\n      this.expanded = true;\n      return;\n    }\n\n    await stopAnimations(this.body);\n\n    const { keyframes, options } = getAnimation(this, \"mainnav.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  @watch(\"expanded\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanded) {\n      // Show\n      this._animateToShow();\n    } else {\n      // Hide\n      this._animateToHide();\n    }\n  }\n  /** Shows the menu. For when mainnav is in the collapsed form */\n  public async show() {\n    if (this.expanded) {\n      return;\n    }\n\n    this.expanded = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the menu. For when mainnav is in the collapsed form */\n  public async hide() {\n    if (!this.expanded) {\n      return;\n    }\n    this.expanded = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  // assigning name attribute to elements added in slot=\"end\", to use wildcard css selector to assign styles only to *-mainnav-item\n  _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n    });\n  }\n\n  render() {\n    this.breakpointReached = window.innerWidth < SIZES[this.expand];\n    const collapseClass = \"navbar-body navbar-collapse order-2\";\n    return html`\n      <nav\n        class=\"sgds navbar navbar-light\n        ${this._expandClass()}\"\n      >\n        <a class=\"navbar-brand me-auto order-first\" href=${this.brandHref} aria-label=\"brand-link\">\n          <slot name=\"brand\"></slot>\n        </a>\n        <slot name=\"non-collapsible\" class=\"${this.breakpointReached ? \"order-1\" : \"order-last\"}\"></slot>\n        <button\n          class=\"navbar-toggler order-1\"\n          type=\"button\"\n          @click=${this.handleSummaryClick}\n          aria-controls=\"${this.collapseId}\"\n          aria-expanded=\"${this.expanded}\"\n          aria-label=\"Toggle navigation\"\n        >\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"30\"\n            height=\"30\"\n            fill=\"currentColor\"\n            class=\"bi bi-list\"\n            viewBox=\"0 0 16 16\"\n          >\n            <path\n              fill-rule=\"evenodd\"\n              d=\"M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z\"\n            />\n          </svg>\n        </button>\n        <div class=${collapseClass} id=${this.collapseId}>\n          <ul class=\"navbar-nav\">\n            <slot></slot>\n            <slot\n              name=\"end\"\n              class=${classMap({ \"slot-end\": !this.breakpointReached })}\n              @slotchange=${this._handleSlotChange}\n            ></slot>\n          </ul>\n        </div>\n      </nav>\n    `;\n  }\n  _expandClass() {\n    switch (this.expand) {\n      case \"always\":\n        return \"navbar-expand\";\n      case \"never\":\n        break;\n      default:\n        return `navbar-expand-${this.expand}`;\n    }\n  }\n}\nsetDefaultAnimation(\"mainnav.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(\"mainnav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nexport default SgdsMainnav;\n"],"names":["styles"],"mappings":"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"}