@govtechsg/sgds-web-component 3.3.3-rc.2 → 3.4.0-rc.1

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", () => {\n        this.emit(\"sgds-mainnav-close\");\n      });\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"names":["mainnavItemStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav-item.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", (e: Event) => {\n        const target = e.target as HTMLElement;\n        const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n        mainnav.hide();\n      });\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"names":["mainnavItemStyle"],"mappings":"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"}

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

@@ -46,6 +46,10 @@ class SgdsMainnav extends sgdsElement["default"] {
     constructor() {
         super();
         this._breakpointReached = false;
+        /** Indicates if mobile menu is open or closed */
+        this.expanded = false;
+        /** Denotes the transition state of mobile mainnav menu opening  */
+        this.expanding = false;
         /** The href link for brand logo */
         this.brandHref = "";
         this.collapseId = generateId["default"]("mainnav", "collapse");
@@ -53,8 +57,6 @@ class SgdsMainnav extends sgdsElement["default"] {
         this.expand = "lg";
         /** @internal */
         this.breakpointReached = false;
-        /** @internal */
-        this.expanded = false;
         window.addEventListener("resize", () => {
             const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];
             if (newBreakpointReachedValue !== this.breakpointReached) {
@@ -62,7 +64,8 @@ class SgdsMainnav extends sgdsElement["default"] {
             }
             else {
                 this.body ? (this.body.hidden = true) : null;
-                this.expanded = false;
+                // this.expanded = false;
+                this.expanding = false;
             }
             if (newBreakpointReachedValue) {
                 this._handleMobileNav();
@@ -87,20 +90,10 @@ class SgdsMainnav extends sgdsElement["default"] {
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-        this.addEventListener("sgds-mainnav-close", () => {
-            if (this.breakpointReached) {
-                this.hide();
-            }
-        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-        this.removeEventListener("sgds-mainnav-close", () => {
-            if (this.breakpointReached) {
-                this.hide();
-            }
-        });
     }
     firstUpdated() {
         if (this.breakpointReached && this.body) {
@@ -127,7 +120,6 @@ class SgdsMainnav extends sgdsElement["default"] {
             document.querySelector("body").style.overflow = "hidden";
             this.show();
         }
-        this.header.focus();
     }
     async _handleMobileNav() {
         if (!this.nav)
@@ -147,6 +139,7 @@ class SgdsMainnav extends sgdsElement["default"] {
     async _animateToShow() {
         const sgdsShow = this.emit("sgds-show", { cancelable: true });
         if (sgdsShow.defaultPrevented) {
+            this.expanding = false;
             this.expanded = false;
             return;
         }
@@ -160,6 +153,7 @@ class SgdsMainnav extends sgdsElement["default"] {
     async _animateToHide() {
         const slHide = this.emit("sgds-hide", { cancelable: true });
         if (slHide.defaultPrevented) {
+            this.expanding = false;
             this.expanded = true;
             return;
         }
@@ -171,13 +165,16 @@ class SgdsMainnav extends sgdsElement["default"] {
         this.emit("sgds-after-hide");
     }
     async handleOpenChange() {
-        if (this.expanded) {
+        if (this.expanding) {
             // Show
-            this._animateToShow();
+            await this._animateToShow();
+            this.expanded = true;
         }
         else {
+            this.header.focus();
             // Hide
-            this._animateToHide();
+            await this._animateToHide();
+            this.expanded = false;
         }
     }
     /** Shows the menu. For when mainnav is in the collapsed form */
@@ -185,7 +182,7 @@ class SgdsMainnav extends sgdsElement["default"] {
         if (this.expanded) {
             return;
         }
-        this.expanded = true;
+        this.expanding = true;
         return event.waitForEvent(this, "sgds-after-show");
     }
     /** Hide the menu. For when mainnav is in the collapsed form */
@@ -193,11 +190,8 @@ class SgdsMainnav extends sgdsElement["default"] {
         if (!this.expanded) {
             return;
         }
-        this.expanded = false;
+        this.expanding = false;
         document.querySelector("body").style.removeProperty("overflow");
-        setTimeout(() => {
-            this.emit("close-dropdown-menu");
-        }, 200);
         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
@@ -257,9 +251,16 @@ SgdsMainnav.dependencies = {
     "sgds-icon-button": sgdsIconButton.SgdsIconButton
 };
 tslib.__decorate([
-    context.provide({ context: mainnavContext.MainnavContext }),
+    context.provide({ context: mainnavContext.MainnavBreakpointContext }),
     decorators_js.state()
 ], SgdsMainnav.prototype, "_breakpointReached", void 0);
+tslib.__decorate([
+    context.provide({ context: mainnavContext.MainnavExpandedContext }),
+    decorators_js.state()
+], SgdsMainnav.prototype, "expanded", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsMainnav.prototype, "expanding", void 0);
 tslib.__decorate([
     decorators_js.query("nav")
 ], SgdsMainnav.prototype, "nav", void 0);
@@ -287,9 +288,6 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.state()
 ], SgdsMainnav.prototype, "breakpointReached", void 0);
-tslib.__decorate([
-    decorators_js.state()
-], SgdsMainnav.prototype, "expanded", void 0);
 tslib.__decorate([
     decorators_js.queryAssignedElements()
 ], SgdsMainnav.prototype, "defaultNodes", void 0);
@@ -297,7 +295,7 @@ tslib.__decorate([
     decorators_js.queryAssignedElements({ slot: "end" })
 ], SgdsMainnav.prototype, "endNodes", void 0);
 tslib.__decorate([
-    watch.watch("expanded", { waitUntilFirstUpdate: true })
+    watch.watch("expanding", { waitUntilFirstUpdate: true })
 ], SgdsMainnav.prototype, "handleOpenChange", null);
 animationRegistry.setDefaultAnimation("mainnav.show", {
     keyframes: [

package/react/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 { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, query, queryAssignedElements, 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 SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { MainnavContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\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 - 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 */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  @provide({ context: MainnavContext })\n  @state()\n  private _breakpointReached = false;\n\n  /** @internal */\n  @query(\"nav\") nav: HTMLElement;\n  /** @internal */\n  @query(\".navbar\") navbar: HTMLElement;\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".navbar-nav-scroll\") navScroll: HTMLElement;\n  /** @internal */\n  @query(\"slot[name='non-collapsible']\") nonCollapsibleSlot: HTMLSlotElement;\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      if (newBreakpointReachedValue) {\n        this._handleMobileNav();\n\n        if (!this._breakpointReached) {\n          this._breakpointReached = true;\n        }\n      } else {\n        this._handleDesktopNav();\n        this._breakpointReached = 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\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    this.addEventListener(\"sgds-mainnav-close\", () => {\n      if (this.breakpointReached) {\n        this.hide();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    this.removeEventListener(\"sgds-mainnav-close\", () => {\n      if (this.breakpointReached) {\n        this.hide();\n      }\n    });\n  }\n\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n\n    const items = [...this.defaultSlotItems, ...this.endSlotItems] as SgdsMainnavItem[] | SgdsMainnavDropdown[];\n    items.forEach((item: SgdsMainnavItem | SgdsMainnavDropdown) => {\n      item.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n    const offsetTop = this.nav.offsetTop;\n    const navHeight = this.nav.clientHeight;\n    const mainNavPosition = offsetTop + navHeight;\n    this.body.style.top = `${mainNavPosition}px`;\n    this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavPosition}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);\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\n    this.expanded = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n    setTimeout(() => {\n      this.emit(\"close-dropdown-menu\");\n    }, 200);\n\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\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <slot name=\"non-collapsible\"></slot>\n          <sgds-icon-button\n            name=${this.expanded ? \"cross\" : \"menu\"}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"navbar-toggler\"\n            @click=${this._handleSummaryClick}\n            aria-controls=\"${this.collapseId}\"\n            aria-expanded=\"${this.expanded}\"\n            aria-label=\"Toggle navigation\"\n          ></sgds-icon-button>\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","mainnavStyle","SgdsIconButton","__decorate","provide","MainnavContext","state","query","property","queryAssignedElements","watch","setDefaultAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,MAAM,KAAK,GAAG;AACZ,IAAA,EAAE,EAAEA,yBAAa;AACjB,IAAA,EAAE,EAAEC,yBAAa;AACjB,IAAA,EAAE,EAAEC,yBAAa;AACjB,IAAA,EAAE,EAAEC,yBAAa;AACjB,IAAA,GAAG,EAAEC,0BAAc;AACnB,IAAA,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,CAAC,CAAC;CACX,CAAC;AAEF;;;;;;;;;;;;;AAaG;AACG,MAAO,WAAY,SAAQC,sBAAW,CAAA;AAwB1C,IAAA,WAAA,GAAA;AACE,QAAA,KAAK,EAAE,CAAC;QAhBF,IAAkB,CAAA,kBAAA,GAAG,KAAK,CAAC;;QAyCnC,IAAS,CAAA,SAAA,GAAG,EAAE,CAAC;AAEP,QAAA,IAAA,CAAA,UAAU,GAAGC,qBAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;;QAIlD,IAAM,CAAA,MAAA,GAAsB,IAAI,CAAC;;QAIjC,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAC;;QAI1B,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;AAtCf,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAK;AACrC,YAAA,MAAM,yBAAyB,GAAG,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACzE,YAAA,IAAI,yBAAyB,KAAK,IAAI,CAAC,iBAAiB,EAAE;gBACxD,IAAI,CAAC,aAAa,EAAE,CAAC;aACtB;iBAAM;AACL,gBAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,IAAI,CAAC;AAC7C,gBAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACvB;YAED,IAAI,yBAAyB,EAAE;gBAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;AAExB,gBAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;AAC5B,oBAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;iBAChC;aACF;iBAAM;gBACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;AACzB,gBAAA,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;aACjC;AACH,SAAC,CAAC,CAAC;KACJ;;AA2BD,IAAA,IAAI,gBAAgB,GAAA;QAClB,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CAE9E,CAAC;KAC3B;;AAGD,IAAA,IAAI,YAAY,GAAA;QACd,OAAO,CAAC,IAAI,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CAE1E,CAAC;KAC3B;IAED,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAiB,KAAK,IAAI,CAAC,wBAAwB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACvG,QAAA,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,MAAK;AAC/C,YAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;aACb;AACH,SAAC,CAAC,CAAC;KACJ;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,CAAC,KAAiB,KAAK,IAAI,CAAC,wBAAwB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1G,QAAA,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,MAAK;AAClD,YAAA,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBAC1B,IAAI,CAAC,IAAI,EAAE,CAAC;aACb;AACH,SAAC,CAAC,CAAC;KACJ;IAED,YAAY,GAAA;QACV,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,IAAI,EAAE;AACvC,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;AACtB,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,gBAAgB,EAAE,CAAC;AACxB,YAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;SAChC;AAED,QAAA,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,gBAAgB,EAAE,GAAG,IAAI,CAAC,YAAY,CAA8C,CAAC;AAC5G,QAAA,KAAK,CAAC,OAAO,CAAC,CAAC,IAA2C,KAAI;YAC5D,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AAC3C,SAAC,CAAC,CAAC;KACJ;IAEO,wBAAwB,CAAC,CAAa,EAAE,IAAiB,EAAA;QAC/D,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAC/E,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF;IAEO,mBAAmB,GAAA;AACzB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACzD,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;AAED,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;KACrB;AAEO,IAAA,MAAM,gBAAgB,GAAA;QAC5B,IAAI,CAAC,IAAI,CAAC,GAAG;YAAE,OAAO;QAEtB,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChC,QAAA,MAAM,cAAc,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC;AAClD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC;AACrC,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,CAAC;AACxC,QAAA,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,CAAC;QAC9C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA,EAAG,eAAe,CAAA,EAAA,CAAI,CAAC;QAC7C,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,cAAA,EAAiB,eAAe,CAAA,GAAA,CAAK,CAAC;KACxE;IAEO,iBAAiB,GAAA;;AACvB,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC/D;AAEO,IAAA,MAAM,cAAc,GAAA;AAC1B,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC9D,QAAA,IAAI,QAAQ,CAAC,gBAAgB,EAAE;AAC7B,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,OAAO;SACR;AAED,QAAA,MAAMC,sBAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChC,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AAEzB,QAAA,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAGC,8BAAY,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;AAClE,QAAA,MAAMC,iBAAS,CAAC,IAAI,CAAC,IAAI,EAAEC,+BAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;QAChG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AAEhC,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAC9B;AAEO,IAAA,MAAM,cAAc,GAAA;AAC1B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC5D,QAAA,IAAI,MAAM,CAAC,gBAAgB,EAAE;AAC3B,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,OAAO;SACR;AAED,QAAA,MAAMH,sBAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEhC,QAAA,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAGC,8BAAY,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;AAClE,QAAA,MAAMC,iBAAS,CAAC,IAAI,CAAC,IAAI,EAAEC,+BAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;AAChG,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AAEhC,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAC9B;IAGK,MAAA,gBAAgB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;;YAEjB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;aAAM;;YAEL,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;;AAEM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;AAED,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;AACrB,QAAA,OAAOC,kBAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO;SACR;AAED,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;AACtB,QAAA,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;QAChE,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;SAClC,EAAE,GAAG,CAAC,CAAC;AAER,QAAA,OAAOA,kBAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;;AAGD,IAAA,iBAAiB,CAAC,CAAQ,EAAA;AACxB,QAAA,MAAM,aAAa,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAExF,QAAA,aAAa,CAAC,OAAO,CAAC,CAAC,IAAG;AACxB,YAAA,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;AAClD,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAEhE,QAAA,OAAOC,QAAI,CAAA,CAAA;;6BAEc,IAAI,CAAC,YAAY,EAAE,CAAA;AACP,uCAAA,EAAA,IAAI,CAAC,SAAS,CAAA;;;AAGC,sDAAA,EAAA,IAAI,CAAC,UAAU,CAAA;;;;;wBAK/CC,oBAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAA;AAC3C,4BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;mBAMjC,IAAI,CAAC,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;;;;AAI9B,mBAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA;AAChB,2BAAA,EAAA,IAAI,CAAC,UAAU,CAAA;AACf,2BAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;;;KAKrC,CAAC;KACH;IACD,YAAY,GAAA;AACV,QAAA,QAAQ,IAAI,CAAC,MAAM;AACjB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,eAAe,CAAC;AACzB,YAAA,KAAK,OAAO;gBACV,MAAM;AACR,YAAA;AACE,gBAAA,OAAO,CAAiB,cAAA,EAAA,IAAI,CAAC,MAAM,EAAE,CAAC;SACzC;KACF;;AAlRM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAGR,sBAAW,CAAC,MAAM,EAAES,kBAAY,CAAvC,CAAyC;AACtD;AACO,WAAA,CAAA,YAAY,GAAG;AACpB,IAAA,kBAAkB,EAAEC,6BAAc;AACnC,CAFkB,CAEjB;AAIMC,gBAAA,CAAA;AAFP,IAAAC,eAAO,CAAC,EAAE,OAAO,EAAEC,6BAAc,EAAE,CAAC;AACpC,IAAAC,mBAAK,EAAE;AAC2B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGrBH,gBAAA,CAAA;IAAbI,mBAAK,CAAC,KAAK,CAAC;AAAkB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEbJ,gBAAA,CAAA;IAAjBI,mBAAK,CAAC,SAAS,CAAC;AAAqB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEZJ,gBAAA,CAAA;IAAzBI,mBAAK,CAAC,iBAAiB,CAAC;AAAqB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEvBJ,gBAAA,CAAA;IAAtBI,mBAAK,CAAC,cAAc,CAAC;AAAmB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEZJ,gBAAA,CAAA;IAA5BI,mBAAK,CAAC,oBAAoB,CAAC;AAAwB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEbJ,gBAAA,CAAA;IAAtCI,mBAAK,CAAC,8BAA8B,CAAC;AAAqC,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AA4B3EJ,gBAAA,CAAA;AADC,IAAAK,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACZ,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMfL,gBAAA,CAAA;AADC,IAAAK,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACM,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjCL,gBAAA,CAAA;AADC,IAAAG,mBAAK,EAAE;AACkB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI1BH,gBAAA,CAAA;AADC,IAAAG,mBAAK,EAAE;AACS,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGgBH,gBAAA,CAAA;AAAhC,IAAAM,mCAAqB,EAAE;AAAkE,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG1CN,gBAAA,CAAA;AAA/C,IAAAM,mCAAqB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAA8D,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuH/FN,gBAAA,CAAA;IADLO,WAAK,CAAC,UAAU,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AASjD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAgFHC,qCAAmB,CAAC,cAAc,EAAE;AAClC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC7B,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AACjC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE;AAClD,CAAA,CAAC,CAAC;AAEHA,qCAAmB,CAAC,cAAc,EAAE;AAClC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AAChC,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC9B,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE;AAClD,CAAA,CAAC;;;;;"}
+{"version":3,"file":"sgds-mainnav.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, query, queryAssignedElements, 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 SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\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 - 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 */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n  /** Indicates if mobile menu is open or closed */\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  private expanded = false;\n  /** Denotes the transition state of mobile mainnav menu opening  */\n  @state()\n  private expanding = false;\n\n  /** @internal */\n  @query(\"nav\") nav: HTMLElement;\n  /** @internal */\n  @query(\".navbar\") navbar: HTMLElement;\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".navbar-nav-scroll\") navScroll: HTMLElement;\n  /** @internal */\n  @query(\"slot[name='non-collapsible']\") nonCollapsibleSlot: HTMLSlotElement;\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        this.expanding = false;\n      }\n\n      if (newBreakpointReachedValue) {\n        this._handleMobileNav();\n\n        if (!this._breakpointReached) {\n          this._breakpointReached = true;\n        }\n      } else {\n        this._handleDesktopNav();\n        this._breakpointReached = 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  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n\n    const items = [...this.defaultSlotItems, ...this.endSlotItems] as SgdsMainnavItem[] | SgdsMainnavDropdown[];\n    items.forEach((item: SgdsMainnavItem | SgdsMainnavDropdown) => {\n      item.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n  }\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n    const offsetTop = this.nav.offsetTop;\n    const navHeight = this.nav.clientHeight;\n    const mainNavPosition = offsetTop + navHeight;\n    this.body.style.top = `${mainNavPosition}px`;\n    this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavPosition}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanding = false;\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.expanding = false;\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    this.emit(\"sgds-after-hide\");\n  }\n\n  @watch(\"expanding\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanding) {\n      // Show\n      await this._animateToShow();\n      this.expanded = true;\n    } else {\n      this.header.focus();\n      // Hide\n      await this._animateToHide();\n      this.expanded = false;\n    }\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.expanding = 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\n    this.expanding = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n\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\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <slot name=\"non-collapsible\"></slot>\n          <sgds-icon-button\n            name=${this.expanded ? \"cross\" : \"menu\"}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"navbar-toggler\"\n            @click=${this._handleSummaryClick}\n            aria-controls=\"${this.collapseId}\"\n            aria-expanded=\"${this.expanded}\"\n            aria-label=\"Toggle navigation\"\n          ></sgds-icon-button>\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","mainnavStyle","SgdsIconButton","__decorate","provide","MainnavBreakpointContext","state","MainnavExpandedContext","query","property","queryAssignedElements","watch","setDefaultAnimation"],"mappings":"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"}

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

@@ -12,7 +12,7 @@ import { waitForEvent } from '../../utils/event.js';
 import genId from '../../utils/generateId.js';
 import { watch } from '../../utils/watch.js';
 import { SgdsIconButton } from '../IconButton/sgds-icon-button.js';
-import { MainnavContext } from './mainnav-context.js';
+import { MainnavBreakpointContext, MainnavExpandedContext } from './mainnav-context.js';
 import css_248z from './mainnav.js';
 
 const SIZES = {
@@ -42,6 +42,10 @@ class SgdsMainnav extends SgdsElement {
     constructor() {
         super();
         this._breakpointReached = false;
+        /** Indicates if mobile menu is open or closed */
+        this.expanded = false;
+        /** Denotes the transition state of mobile mainnav menu opening  */
+        this.expanding = false;
         /** The href link for brand logo */
         this.brandHref = "";
         this.collapseId = genId("mainnav", "collapse");
@@ -49,8 +53,6 @@ class SgdsMainnav extends SgdsElement {
         this.expand = "lg";
         /** @internal */
         this.breakpointReached = false;
-        /** @internal */
-        this.expanded = false;
         window.addEventListener("resize", () => {
             const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];
             if (newBreakpointReachedValue !== this.breakpointReached) {
@@ -58,7 +60,8 @@ class SgdsMainnav extends SgdsElement {
             }
             else {
                 this.body ? (this.body.hidden = true) : null;
-                this.expanded = false;
+                // this.expanded = false;
+                this.expanding = false;
             }
             if (newBreakpointReachedValue) {
                 this._handleMobileNav();
@@ -83,20 +86,10 @@ class SgdsMainnav extends SgdsElement {
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-        this.addEventListener("sgds-mainnav-close", () => {
-            if (this.breakpointReached) {
-                this.hide();
-            }
-        });
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-        this.removeEventListener("sgds-mainnav-close", () => {
-            if (this.breakpointReached) {
-                this.hide();
-            }
-        });
     }
     firstUpdated() {
         if (this.breakpointReached && this.body) {
@@ -123,7 +116,6 @@ class SgdsMainnav extends SgdsElement {
             document.querySelector("body").style.overflow = "hidden";
             this.show();
         }
-        this.header.focus();
     }
     async _handleMobileNav() {
         if (!this.nav)
@@ -143,6 +135,7 @@ class SgdsMainnav extends SgdsElement {
     async _animateToShow() {
         const sgdsShow = this.emit("sgds-show", { cancelable: true });
         if (sgdsShow.defaultPrevented) {
+            this.expanding = false;
             this.expanded = false;
             return;
         }
@@ -156,6 +149,7 @@ class SgdsMainnav extends SgdsElement {
     async _animateToHide() {
         const slHide = this.emit("sgds-hide", { cancelable: true });
         if (slHide.defaultPrevented) {
+            this.expanding = false;
             this.expanded = true;
             return;
         }
@@ -167,13 +161,16 @@ class SgdsMainnav extends SgdsElement {
         this.emit("sgds-after-hide");
     }
     async handleOpenChange() {
-        if (this.expanded) {
+        if (this.expanding) {
             // Show
-            this._animateToShow();
+            await this._animateToShow();
+            this.expanded = true;
         }
         else {
+            this.header.focus();
             // Hide
-            this._animateToHide();
+            await this._animateToHide();
+            this.expanded = false;
         }
     }
     /** Shows the menu. For when mainnav is in the collapsed form */
@@ -181,7 +178,7 @@ class SgdsMainnav extends SgdsElement {
         if (this.expanded) {
             return;
         }
-        this.expanded = true;
+        this.expanding = true;
         return waitForEvent(this, "sgds-after-show");
     }
     /** Hide the menu. For when mainnav is in the collapsed form */
@@ -189,11 +186,8 @@ class SgdsMainnav extends SgdsElement {
         if (!this.expanded) {
             return;
         }
-        this.expanded = false;
+        this.expanding = false;
         document.querySelector("body").style.removeProperty("overflow");
-        setTimeout(() => {
-            this.emit("close-dropdown-menu");
-        }, 200);
         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
@@ -253,9 +247,16 @@ SgdsMainnav.dependencies = {
     "sgds-icon-button": SgdsIconButton
 };
 __decorate([
-    provide({ context: MainnavContext }),
+    provide({ context: MainnavBreakpointContext }),
     state()
 ], SgdsMainnav.prototype, "_breakpointReached", void 0);
+__decorate([
+    provide({ context: MainnavExpandedContext }),
+    state()
+], SgdsMainnav.prototype, "expanded", void 0);
+__decorate([
+    state()
+], SgdsMainnav.prototype, "expanding", void 0);
 __decorate([
     query("nav")
 ], SgdsMainnav.prototype, "nav", void 0);
@@ -283,9 +284,6 @@ __decorate([
 __decorate([
     state()
 ], SgdsMainnav.prototype, "breakpointReached", void 0);
-__decorate([
-    state()
-], SgdsMainnav.prototype, "expanded", void 0);
 __decorate([
     queryAssignedElements()
 ], SgdsMainnav.prototype, "defaultNodes", void 0);
@@ -293,7 +291,7 @@ __decorate([
     queryAssignedElements({ slot: "end" })
 ], SgdsMainnav.prototype, "endNodes", void 0);
 __decorate([
-    watch("expanded", { waitUntilFirstUpdate: true })
+    watch("expanding", { waitUntilFirstUpdate: true })
 ], SgdsMainnav.prototype, "handleOpenChange", null);
 setDefaultAnimation("mainnav.show", {
     keyframes: [

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.js","sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, query, queryAssignedElements, 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 SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { MainnavContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\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 - 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 */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  @provide({ context: MainnavContext })\n  @state()\n  private _breakpointReached = false;\n\n  /** @internal */\n  @query(\"nav\") nav: HTMLElement;\n  /** @internal */\n  @query(\".navbar\") navbar: HTMLElement;\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".navbar-nav-scroll\") navScroll: HTMLElement;\n  /** @internal */\n  @query(\"slot[name='non-collapsible']\") nonCollapsibleSlot: HTMLSlotElement;\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      if (newBreakpointReachedValue) {\n        this._handleMobileNav();\n\n        if (!this._breakpointReached) {\n          this._breakpointReached = true;\n        }\n      } else {\n        this._handleDesktopNav();\n        this._breakpointReached = 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\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    this.addEventListener(\"sgds-mainnav-close\", () => {\n      if (this.breakpointReached) {\n        this.hide();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    this.removeEventListener(\"sgds-mainnav-close\", () => {\n      if (this.breakpointReached) {\n        this.hide();\n      }\n    });\n  }\n\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n\n    const items = [...this.defaultSlotItems, ...this.endSlotItems] as SgdsMainnavItem[] | SgdsMainnavDropdown[];\n    items.forEach((item: SgdsMainnavItem | SgdsMainnavDropdown) => {\n      item.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n\n    this.header.focus();\n  }\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n    const offsetTop = this.nav.offsetTop;\n    const navHeight = this.nav.clientHeight;\n    const mainNavPosition = offsetTop + navHeight;\n    this.body.style.top = `${mainNavPosition}px`;\n    this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavPosition}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);\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\n    this.expanded = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n    setTimeout(() => {\n      this.emit(\"close-dropdown-menu\");\n    }, 200);\n\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\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <slot name=\"non-collapsible\"></slot>\n          <sgds-icon-button\n            name=${this.expanded ? \"cross\" : \"menu\"}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"navbar-toggler\"\n            @click=${this._handleSummaryClick}\n            aria-controls=\"${this.collapseId}\"\n            aria-expanded=\"${this.expanded}\"\n            aria-label=\"Toggle navigation\"\n          ></sgds-icon-button>\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":["mainnavStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav.js","sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, query, queryAssignedElements, 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 SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\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 - 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 */\nexport class SgdsMainnav extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n  /** Indicates if mobile menu is open or closed */\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  private expanded = false;\n  /** Denotes the transition state of mobile mainnav menu opening  */\n  @state()\n  private expanding = false;\n\n  /** @internal */\n  @query(\"nav\") nav: HTMLElement;\n  /** @internal */\n  @query(\".navbar\") navbar: HTMLElement;\n  /** @internal */\n  @query(\".navbar-toggler\") header: HTMLElement;\n  /** @internal */\n  @query(\".navbar-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".navbar-nav-scroll\") navScroll: HTMLElement;\n  /** @internal */\n  @query(\"slot[name='non-collapsible']\") nonCollapsibleSlot: HTMLSlotElement;\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        this.expanding = false;\n      }\n\n      if (newBreakpointReachedValue) {\n        this._handleMobileNav();\n\n        if (!this._breakpointReached) {\n          this._breakpointReached = true;\n        }\n      } else {\n        this._handleDesktopNav();\n        this._breakpointReached = 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  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n  }\n\n  firstUpdated() {\n    if (this.breakpointReached && this.body) {\n      this.expanded = false;\n      this.body.hidden = true;\n      this._handleMobileNav();\n      this._breakpointReached = true;\n    }\n\n    const items = [...this.defaultSlotItems, ...this.endSlotItems] as SgdsMainnavItem[] | SgdsMainnavDropdown[];\n    items.forEach((item: SgdsMainnavItem | SgdsMainnavDropdown) => {\n      item.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {\n      this.hide();\n    }\n  }\n\n  private _handleSummaryClick() {\n    if (this.expanded) {\n      this.hide();\n    } else {\n      document.querySelector(\"body\").style.overflow = \"hidden\";\n      this.show();\n    }\n  }\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n    const offsetTop = this.nav.offsetTop;\n    const navHeight = this.nav.clientHeight;\n    const mainNavPosition = offsetTop + navHeight;\n    this.body.style.top = `${mainNavPosition}px`;\n    this.navScroll.style.maxHeight = `calc(100dvh - ${mainNavPosition}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.nonCollapsibleSlot);\n  }\n\n  private async _animateToShow() {\n    const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n    if (sgdsShow.defaultPrevented) {\n      this.expanding = false;\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.expanding = false;\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    this.emit(\"sgds-after-hide\");\n  }\n\n  @watch(\"expanding\", { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.expanding) {\n      // Show\n      await this._animateToShow();\n      this.expanded = true;\n    } else {\n      this.header.focus();\n      // Hide\n      await this._animateToHide();\n      this.expanded = false;\n    }\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.expanding = 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\n    this.expanding = false;\n    document.querySelector(\"body\").style.removeProperty(\"overflow\");\n\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\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <a class=\"navbar-brand\" href=${this.brandHref} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <slot name=\"non-collapsible\"></slot>\n          <sgds-icon-button\n            name=${this.expanded ? \"cross\" : \"menu\"}\n            variant=\"ghost\"\n            size=\"sm\"\n            class=\"navbar-toggler\"\n            @click=${this._handleSummaryClick}\n            aria-controls=\"${this.collapseId}\"\n            aria-expanded=\"${this.expanded}\"\n            aria-label=\"Toggle navigation\"\n          ></sgds-icon-button>\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":["mainnavStyle"],"mappings":"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"}

package/react/components/Select/sgds-select.cjs.js

@@ -18,6 +18,10 @@ var selectItem = require('./select-item.cjs.js');
  * @summary Select is used to make one selection from a list through keyboard or mouse actions
  *
  * @event sgds-select - Emitted when an option is selected and the value of select is updated
+ * @event sgds-change - Emitted when the select value changes.
+ * @event sgds-focus -  Emitted when user input is focused.
+ * @event sgds-blur -  Emitted when user input is blurred.
+ *
  */
 class SgdsSelect extends selectElement.SelectElement {
     connectedCallback() {
@@ -42,6 +46,8 @@ class SgdsSelect extends selectElement.SelectElement {
         }
     }
     async _handleValueChange() {
+        // when value change, always emit a change event
+        this.emit("sgds-change");
         if (this.value) {
             this.emit("sgds-select");
         }
@@ -66,8 +72,12 @@ class SgdsSelect extends selectElement.SelectElement {
         this.displayValue = this.selectedItems[0].label;
         this.hideMenu();
     }
+    _handleFocus() {
+        this.emit("sgds-focus");
+    }
     async _handleInputBlur(e) {
         e.preventDefault();
+        this.emit("sgds-blur");
         if (this.selectedItems.length > 0) {
             this.displayValue = this.selectedItems[0].label;
         }
@@ -125,6 +135,7 @@ class SgdsSelect extends selectElement.SelectElement {
             ?required=${this.required}
             .value=${this.displayValue}
             @blur=${this._handleInputBlur}
+            @focus=${this._handleFocus}
             aria-describedby=${ifDefined_js.ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}
             aria-labelledby="${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback
             ? `${this._controlId}-invalid`