@govtechsg/sgds-web-component 3.26.1-rc.0 → 3.26.1-rc.2

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

@@ -0,0 +1,137 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html, nothing } from 'lit';
+import { consume } from '@lit/context';
+import { state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { offset } from '@floating-ui/dom';
+import SgdsElement from '../../base/sgds-element.js';
+import { SgdsDropdown } from '../Dropdown/sgds-dropdown.js';
+import { SgdsDropdownItem } from '../Dropdown/sgds-dropdown-item.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
+import { MainnavBreakpointContext } from './mainnav-context.js';
+import css_248z from './mainnav-profile.js';
+import genId from '../../utils/generateId.js';
+
+/**
+ * @summary A profile component for the mainnav that shows a full dropdown in desktop and handles its own mobile menu.
+ * In desktop: renders avatar + label + secondaryText with a dropdown.
+ * In mobile: renders the avatar as a toggler that opens a self-contained mobile panel with profile items.
+ * When present, it disables the mainnav's default hamburger toggler.
+ *
+ * @slot avatar - Avatar element displayed in both desktop (before label) and mobile (as toggler)
+ * @slot default - Profile menu items (sgds-dropdown-item elements)
+ */
+class SgdsMainnavProfile extends SgdsElement {
+    constructor() {
+        super(...arguments);
+        this._breakpointReached = true;
+        /** @internal Whether the mobile menu is open */
+        this._mobileMenuOpen = false;
+        /** Primary text displayed next to the avatar in desktop (e.g. user name) */
+        this.label = "";
+        /** Secondary text displayed below the label in desktop (e.g. agency or role) */
+        this.secondaryText = "";
+        /** When true, disables the profile dropdown */
+        this.disabled = false;
+        /** Accessible label for the profile toggle button */
+        this.ariaLabel = "";
+        /** Controls dropdown close behavior. "default" auto-closes on item/outside click, "outside" closes only on outside click, "inside" prevents auto-close. */
+        this.close = "default";
+        /** @internal */
+        this.togglerId = genId("profile", "button");
+        this._handleMobileToggle = () => {
+            this._mobileMenuOpen = !this._mobileMenuOpen;
+        };
+        this._handleKeydown = (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                this._handleMobileToggle();
+            }
+        };
+    }
+    render() {
+        if (!this._breakpointReached) {
+            // Desktop: dropdown with avatar + label + secondaryText
+            return html `
+        <sgds-dropdown .floatingOpts=${{ middleware: [offset(0)] }} ?disabled=${this.disabled} close=${this.close}>
+          <button
+            class="${classMap({
+                "nav-link": true,
+                disabled: this.disabled
+            })}"
+            aria-disabled=${this.disabled ? "true" : "false"}
+            aria-label=${ifDefined(this.ariaLabel)}
+            id=${this.togglerId}
+            tabindex=${this.disabled ? "-1" : "0"}
+            slot="toggler"
+          >
+            <slot name="avatar"></slot>
+            ${this.label || this.secondaryText
+                ? html `<div class="profile-text">
+                  ${this.label ? html `<span class="profile-label">${this.label}</span>` : nothing}
+                  ${this.secondaryText
+                    ? html `<span class="profile-secondary-text">${this.secondaryText}</span>`
+                    : nothing}
+                </div>`
+                : nothing}
+            <sgds-icon name="chevron-down" size="md"></sgds-icon>
+          </button>
+          <slot></slot>
+        </sgds-dropdown>
+      `;
+        }
+        // Mobile: avatar toggler + self-contained mobile panel
+        return html `
+      <div
+        class="profile-avatar-mobile"
+        role="button"
+        tabindex="0"
+        aria-label=${this.ariaLabel || "Toggle navigation"}
+        aria-expanded=${this._mobileMenuOpen ? "true" : "false"}
+        @click=${this._handleMobileToggle}
+        @keydown=${this._handleKeydown}
+      >
+        <slot name="avatar"></slot>
+      </div>
+      <div class="profile-mobile-panel" ?hidden=${!this._mobileMenuOpen}>
+        <div class="profile-mobile-items">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsMainnavProfile.styles = [...SgdsElement.styles, css_248z];
+/** @internal */
+SgdsMainnavProfile.dependencies = {
+    "sgds-dropdown": SgdsDropdown,
+    "sgds-dropdown-item": SgdsDropdownItem,
+    "sgds-icon": SgdsIcon
+};
+__decorate([
+    consume({ context: MainnavBreakpointContext, subscribe: true }),
+    state()
+], SgdsMainnavProfile.prototype, "_breakpointReached", void 0);
+__decorate([
+    state()
+], SgdsMainnavProfile.prototype, "_mobileMenuOpen", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsMainnavProfile.prototype, "label", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsMainnavProfile.prototype, "secondaryText", void 0);
+__decorate([
+    property({ type: Boolean })
+], SgdsMainnavProfile.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], SgdsMainnavProfile.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String })
+], SgdsMainnavProfile.prototype, "close", void 0);
+
+export { SgdsMainnavProfile, SgdsMainnavProfile as default };
+//# sourceMappingURL=sgds-mainnav-profile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-mainnav-profile.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-profile.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { offset } from \"@floating-ui/dom\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavBreakpointContext } from \"./mainnav-context\";\nimport mainnavProfileStyle from \"./mainnav-profile.css\";\nimport genId from \"../../utils/generateId\";\n\n/**\n * @summary A profile component for the mainnav that shows a full dropdown in desktop and handles its own mobile menu.\n * In desktop: renders avatar + label + secondaryText with a dropdown.\n * In mobile: renders the avatar as a toggler that opens a self-contained mobile panel with profile items.\n * When present, it disables the mainnav's default hamburger toggler.\n *\n * @slot avatar - Avatar element displayed in both desktop (before label) and mobile (as toggler)\n * @slot default - Profile menu items (sgds-dropdown-item elements)\n */\nexport class SgdsMainnavProfile extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavProfileStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-dropdown\": SgdsDropdown,\n    \"sgds-dropdown-item\": SgdsDropdownItem,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @consume({ context: MainnavBreakpointContext, subscribe: true })\n  @state()\n  private _breakpointReached = true;\n\n  /** @internal Whether the mobile menu is open */\n  @state()\n  private _mobileMenuOpen = false;\n\n  /** Primary text displayed next to the avatar in desktop (e.g. user name) */\n  @property({ type: String, reflect: true })\n  label = \"\";\n\n  /** Secondary text displayed below the label in desktop (e.g. agency or role) */\n  @property({ type: String, reflect: true })\n  secondaryText = \"\";\n\n  /** When true, disables the profile dropdown */\n  @property({ type: Boolean })\n  disabled = false;\n\n  /** Accessible label for the profile toggle button */\n  @property({ type: String })\n  ariaLabel = \"\";\n\n  /** Controls dropdown close behavior. \"default\" auto-closes on item/outside click, \"outside\" closes only on outside click, \"inside\" prevents auto-close. */\n  @property({ type: String })\n  close: \"default\" | \"outside\" | \"inside\" = \"default\";\n\n  /** @internal */\n  private togglerId: string = genId(\"profile\", \"button\");\n\n  private _handleMobileToggle = () => {\n    this._mobileMenuOpen = !this._mobileMenuOpen;\n  };\n\n  private _handleKeydown = (e: KeyboardEvent) => {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileToggle();\n    }\n  };\n\n  render() {\n    if (!this._breakpointReached) {\n      // Desktop: dropdown with avatar + label + secondaryText\n      return html`\n        <sgds-dropdown .floatingOpts=${{ middleware: [offset(0)] }} ?disabled=${this.disabled} close=${this.close}>\n          <button\n            class=\"${classMap({\n              \"nav-link\": true,\n              disabled: this.disabled\n            })}\"\n            aria-disabled=${this.disabled ? \"true\" : \"false\"}\n            aria-label=${ifDefined(this.ariaLabel)}\n            id=${this.togglerId}\n            tabindex=${this.disabled ? \"-1\" : \"0\"}\n            slot=\"toggler\"\n          >\n            <slot name=\"avatar\"></slot>\n            ${this.label || this.secondaryText\n              ? html`<div class=\"profile-text\">\n                  ${this.label ? html`<span class=\"profile-label\">${this.label}</span>` : nothing}\n                  ${this.secondaryText\n                    ? html`<span class=\"profile-secondary-text\">${this.secondaryText}</span>`\n                    : nothing}\n                </div>`\n              : nothing}\n            <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n          </button>\n          <slot></slot>\n        </sgds-dropdown>\n      `;\n    }\n\n    // Mobile: avatar toggler + self-contained mobile panel\n    return html`\n      <div\n        class=\"profile-avatar-mobile\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=${this.ariaLabel || \"Toggle navigation\"}\n        aria-expanded=${this._mobileMenuOpen ? \"true\" : \"false\"}\n        @click=${this._handleMobileToggle}\n        @keydown=${this._handleKeydown}\n      >\n        <slot name=\"avatar\"></slot>\n      </div>\n      <div class=\"profile-mobile-panel\" ?hidden=${!this._mobileMenuOpen}>\n        <div class=\"profile-mobile-items\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsMainnavProfile;\n"],"names":["mainnavProfileStyle"],"mappings":"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"}

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

@@ -38,8 +38,10 @@ const SIZES = {
  * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
  *
  * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
+ * @slot start - Elements in this slot will be positioned to the left of the brand.
  * @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
+ * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.
  * @slot non-collapsible - Elements in this slot will not be collapsed
  *
  */
@@ -51,16 +53,18 @@ class SgdsMainnav extends sgdsElement["default"] {
         this.expanded = false;
         /** Denotes the transition state of mobile mainnav menu opening  */
         this.expanding = false;
+        /** @internal Whether sgds-mainnav-profile is slotted in the profile slot */
+        this._hasProfileComponent = false;
         /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */
         this.hasNonCollapsibleSlot = false;
         /** The href link for brand logo */
         this.brandHref = "";
+        this.tone = "default";
         this.collapseId = generateId["default"]("mainnav", "collapse");
         /** 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 */
         this.expand = "lg";
         /** When true, removes max-width constraint to allow content to stretch full screen width */
         this.fluid = false;
-        /** @internal */
         this.breakpointReached = false;
         this.hasSlotController = new slot.HasSlotController(this, "non-collapsible");
         this._handleMobileNavBound = this._handleMobileNav.bind(this);
@@ -98,7 +102,7 @@ class SgdsMainnav extends sgdsElement["default"] {
             this.hasNonCollapsibleSlot = this.hasSlotController.test("non-collapsible");
     }
     _handleClickOutOfElement(e, self) {
-        if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {
+        if (!e.composedPath().includes(self) && !(this.header && e.composedPath().includes(this.header))) {
             this.hide();
         }
     }
@@ -145,7 +149,7 @@ class SgdsMainnav extends sgdsElement["default"] {
     }
     _handleDesktopNav() {
         var _a;
-        (_a = this.navbar) === null || _a === void 0 ? void 0 : _a.insertBefore(this.body, this.nonCollapsibleSlot);
+        (_a = this.navbar) === null || _a === void 0 ? void 0 : _a.insertBefore(this.body, this.navbarEnd);
     }
     async _animateToShow() {
         const sgdsShow = this.emit("sgds-show", { cancelable: true });
@@ -177,13 +181,14 @@ class SgdsMainnav extends sgdsElement["default"] {
     }
     /** @internal */
     async handleOpenChange() {
+        var _a;
         if (this.expanding) {
             // Show
             await this._animateToShow();
             this.expanded = true;
         }
         else {
-            this.header.focus();
+            (_a = this.header) === null || _a === void 0 ? void 0 : _a.focus();
             // Hide
             await this._animateToHide();
             this.expanded = false;
@@ -210,7 +215,13 @@ class SgdsMainnav extends sgdsElement["default"] {
         const childElements = e.target.assignedElements({ flatten: true });
         childElements.forEach(el => {
             el.setAttribute("expand", this.expand);
+            el.setAttribute("tone", this.tone);
         });
+        if (this._hasProfileComponent && childElements.length > 0) {
+            console.warn("[sgds-mainnav] Using <sgds-mainnav-item> alongside <sgds-mainnav-profile> is not recommended. " +
+                "The profile component disables the mainnav hamburger menu, so nav items will have no mobile menu. " +
+                "Use a sidebar for navigation in operational apps.");
+        }
     }
     // assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
     _handleSlotChange(e) {
@@ -218,13 +229,28 @@ class SgdsMainnav extends sgdsElement["default"] {
         childElements.forEach(e => {
             e.setAttribute("name", e.tagName.toLowerCase());
             e.setAttribute("expand", this.expand);
+            e.setAttribute("tone", this.tone);
+        });
+    }
+    _handleProfileSlotChange(e) {
+        const childElements = e.target.assignedElements({ flatten: true });
+        this._hasProfileComponent = childElements.some(el => el.tagName.toLowerCase() === "sgds-mainnav-profile");
+        childElements.forEach(el => {
+            el.setAttribute("expand", this.expand);
+            el.setAttribute("tone", this.tone);
         });
+        if (this._hasProfileComponent && this.defaultSlotItems.length > 0) {
+            console.warn("[sgds-mainnav] Using <sgds-mainnav-item> alongside <sgds-mainnav-profile> is not recommended. " +
+                "The profile component disables the mainnav hamburger menu, so nav items will have no mobile menu. " +
+                "Use a sidebar for navigation in operational apps.");
+        }
     }
     render() {
         this.breakpointReached = window.innerWidth < SIZES[this.expand];
         return lit.html `
       <nav>
         <div class="navbar ${this._expandClass()}">
+          <slot name="start"></slot>
           <a class="navbar-brand" href=${this.brandHref} aria-label="brand-link">
             <slot name="brand"></slot>
           </a>
@@ -238,20 +264,26 @@ class SgdsMainnav extends sgdsElement["default"] {
               ></slot>
             </div>
           </div>
-          <slot
-            name="non-collapsible"
-            class=${classMap_js.classMap({ "non-collapsible-empty": !this.hasNonCollapsibleSlot })}
-          ></slot>
-          <sgds-icon-button
-            name=${this.expanded ? "cross" : "menu"}
-            variant="ghost"
-            size="sm"
-            class="navbar-toggler"
-            @click=${this._handleSummaryClick}
-            aria-controls="${this.collapseId}"
-            aria-expanded="${this.expanded}"
-            .ariaLabel=${"Toggle navigation"}
-          ></sgds-icon-button>
+          <div class="navbar-end">
+            <slot
+              name="non-collapsible"
+              class=${classMap_js.classMap({ "non-collapsible-empty": !this.hasNonCollapsibleSlot })}
+            ></slot>
+            <slot name="profile" @slotchange=${this._handleProfileSlotChange}></slot>
+            ${!(this._hasProfileComponent && this.breakpointReached)
+            ? lit.html `<sgds-icon-button
+                  name=${this.expanded ? "cross" : "menu"}
+                  variant="ghost"
+                  size="sm"
+                  tone=${this.tone !== "default" ? "fixed-light" : lit.nothing}
+                  class="navbar-toggler"
+                  @click=${this._handleSummaryClick}
+                  aria-controls="${this.collapseId}"
+                  aria-expanded="${this.expanded}"
+                  .ariaLabel=${"Toggle navigation"}
+                ></sgds-icon-button>`
+            : lit.nothing}
+          </div>
         </div>
       </nav>
     `;
@@ -299,14 +331,20 @@ tslib.__decorate([
     decorators_js.query(".navbar-nav-scroll")
 ], SgdsMainnav.prototype, "navScroll", void 0);
 tslib.__decorate([
-    decorators_js.query("slot[name='non-collapsible']")
-], SgdsMainnav.prototype, "nonCollapsibleSlot", void 0);
+    decorators_js.query(".navbar-end")
+], SgdsMainnav.prototype, "navbarEnd", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsMainnav.prototype, "_hasProfileComponent", void 0);
 tslib.__decorate([
     decorators_js.property({ type: Boolean })
 ], SgdsMainnav.prototype, "hasNonCollapsibleSlot", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String })
 ], SgdsMainnav.prototype, "brandHref", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], SgdsMainnav.prototype, "tone", void 0);
 tslib.__decorate([
     decorators_js.property({ type: String })
 ], SgdsMainnav.prototype, "expand", void 0);

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, PropertyValueMap } 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\";\nimport { HasSlotController } from \"../../utils/slot\";\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  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\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  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\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  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\");\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this._handleResize();\n\n    window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    window.addEventListener(\"resize\", this._handleResize.bind(this));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    window.removeEventListener(\"resize\", this._handleResize.bind(this));\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\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\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\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.body.style.overflow = \"hidden\";\n      this.show();\n    }\n  }\n\n  private _handleResize() {\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        window.addEventListener(\"scrollend\", this._handleMobileNavBound);\n      }\n    } else {\n      this._handleDesktopNav();\n      this._breakpointReached = false;\n      window.removeEventListener(\"scrollend\", this._handleMobileNavBound);\n    }\n  }\n\n  private _handleMobileNavBound = this._handleMobileNav.bind(this);\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n\n    const { bottom } = this.nav.getBoundingClientRect();\n    const navBodyPaddingY =\n      parseFloat(getComputedStyle(this.body).paddingTop) + parseFloat(getComputedStyle(this.body).paddingBottom);\n\n    this.navScroll.style.maxHeight = `calc(100dvh - ${bottom}px - ${navBodyPaddingY}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  /** @internal */\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.body.style.removeProperty(\"overflow\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\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  private _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      e.setAttribute(\"expand\", this.expand);\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 @slotchange=${this._handleDefaultSlotChange}></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\n            name=\"non-collapsible\"\n            class=${classMap({ \"non-collapsible-empty\": !this.hasNonCollapsibleSlot })}\n          ></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            .ariaLabel=${\"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","HasSlotController","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","mainnavStyle","SgdsIconButton","__decorate","provide","MainnavBreakpointContext","state","MainnavExpandedContext","query","property","queryAssignedElements","watch","setDefaultAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBA,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;AAA5C,IAAA,WAAA,GAAA;;QASU,IAAkB,CAAA,kBAAA,GAAG,KAAK,CAAC;;QAI3B,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGjB,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;;QAgBG,IAAqB,CAAA,qBAAA,GAAG,KAAK,CAAC;;QAI3D,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,IAAK,CAAA,KAAA,GAAG,KAAK,CAAC;;QAId,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAC;QAsBT,IAAiB,CAAA,iBAAA,GAAG,IAAIC,sBAAiB,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;QAyE5E,IAAqB,CAAA,qBAAA,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KA0JlE;;AAhPC,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;IAID,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAiB,KAAK,IAAI,CAAC,wBAAwB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AACzG,QAAA,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAClE;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,CAAC,KAAiB,KAAK,IAAI,CAAC,wBAAwB,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;AAC5G,QAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KACrE;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAEtC,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;KACF;IAED,OAAO,GAAA;QACL,IAAI,CAAC,IAAI,CAAC,qBAAqB;YAAE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAC9G;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,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACxC,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF;IAEO,aAAa,GAAA;AACnB,QAAA,MAAM,yBAAyB,GAAG,MAAM,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACzE,QAAA,IAAI,yBAAyB,KAAK,IAAI,CAAC,iBAAiB,EAAE;YACxD,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;aAAM;AACL,YAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,IAAI,IAAI,CAAC;;AAE7C,YAAA,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;QAED,IAAI,yBAAyB,EAAE;YAC7B,IAAI,CAAC,gBAAgB,EAAE,CAAC;AAExB,YAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;AAC5B,gBAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;gBAE/B,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;aAClE;SACF;aAAM;YACL,IAAI,CAAC,iBAAiB,EAAE,CAAC;AACzB,YAAA,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;YAChC,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;SACrE;KACF;AAIO,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;QAElD,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,qBAAqB,EAAE,CAAC;QACpD,MAAM,eAAe,GACnB,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC;AAE7G,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,cAAA,EAAiB,MAAM,CAAA,KAAA,EAAQ,eAAe,CAAA,GAAA,CAAK,CAAC;KACtF;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,SAAS,GAAG,KAAK,CAAC;AACvB,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,SAAS,GAAG,KAAK,CAAC;AACvB,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;AAChC,QAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAC9B;;IAGK,MAAA,gBAAgB,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;;AAElB,YAAA,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC5B,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;SACtB;aAAM;AACL,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;;AAEpB,YAAA,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC5B,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;SACvB;KACF;;AAGM,IAAA,MAAM,IAAI,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO;SACR;AAED,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;AACtB,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,SAAS,GAAG,KAAK,CAAC;QACvB,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC;AAE/C,QAAA,OAAOA,kBAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;AAEO,IAAA,wBAAwB,CAAC,CAAQ,EAAA;AACvC,QAAA,MAAM,aAAa,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACxF,QAAA,aAAa,CAAC,OAAO,CAAC,EAAE,IAAG;YACzB,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AACzC,SAAC,CAAC,CAAC;KACJ;;AAGO,IAAA,iBAAiB,CAAC,CAAQ,EAAA;AAChC,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;YAChD,CAAC,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AACxC,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;;AAErC,gCAAA,EAAA,IAAI,CAAC,wBAAwB,CAAA;;;wBAGvCC,oBAAQ,CAAC,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAA;AAC3C,4BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;;;oBAMhCA,oBAAQ,CAAC,EAAE,uBAAuB,EAAE,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAA;;;mBAGnE,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;yBACjB,mBAAmB,CAAA;;;;KAIvC,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;;AAzSM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAGT,sBAAW,CAAC,MAAM,EAAEU,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,uCAAwB,EAAE,CAAC;AAC9C,IAAAC,mBAAK,EAAE;AAC2B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI3BH,gBAAA,CAAA;AAFP,IAAAC,eAAO,CAAC,EAAE,OAAO,EAAEG,qCAAsB,EAAE,CAAC;AAC5C,IAAAD,mBAAK,EAAE;AACiB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBH,gBAAA,CAAA;AADP,IAAAG,mBAAK,EAAE;AACkB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZH,gBAAA,CAAA;IAAbK,mBAAK,CAAC,KAAK,CAAC;AAAkB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,KAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEbL,gBAAA,CAAA;IAAjBK,mBAAK,CAAC,SAAS,CAAC;AAAqB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEZL,gBAAA,CAAA;IAAzBK,mBAAK,CAAC,iBAAiB,CAAC;AAAqB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEvBL,gBAAA,CAAA;IAAtBK,mBAAK,CAAC,cAAc,CAAC;AAAmB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEZL,gBAAA,CAAA;IAA5BK,mBAAK,CAAC,oBAAoB,CAAC;AAAwB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEbL,gBAAA,CAAA;IAAtCK,mBAAK,CAAC,8BAA8B,CAAC;AAAqC,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG9CL,gBAAA,CAAA;AAA5B,IAAAM,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;AAA+B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAI3DN,gBAAA,CAAA;AADC,IAAAM,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACZ,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMfN,gBAAA,CAAA;AADC,IAAAM,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACM,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIjCN,gBAAA,CAAA;IADCM,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC7B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIdN,gBAAA,CAAA;AADC,IAAAG,mBAAK,EAAE;AACkB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGOH,gBAAA,CAAA;AAAhC,IAAAO,mCAAqB,EAAE;AAAkE,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG1CP,gBAAA,CAAA;AAA/C,IAAAO,mCAAqB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAA8D,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAgJ/FP,gBAAA,CAAA;IADLQ,WAAK,CAAC,WAAW,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAYlD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAyFHC,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, nothing, PropertyValueMap } 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\";\nimport { HasSlotController } from \"../../utils/slot\";\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\nexport type MainnavTone = \"default\" | \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\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 start - Elements in this slot will be positioned to the left of the brand.\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 profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\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  @query(\"nav\") private nav: HTMLElement;\n  @query(\".navbar\") private navbar: HTMLElement;\n  @query(\".navbar-toggler\") private header: HTMLElement;\n  @query(\".navbar-body\") private body: HTMLElement;\n  @query(\".navbar-nav-scroll\") private navScroll: HTMLElement;\n  @query(\".navbar-end\") private navbarEnd: HTMLElement;\n\n  /** @internal Whether sgds-mainnav-profile is slotted in the profile slot */\n  @state()\n  private _hasProfileComponent = false;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n  /** The href link for brand logo */\n  @property({ type: String })\n  brandHref = \"\";\n\n  @property({ type: String, reflect: true })\n  tone: MainnavTone = \"default\";\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  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  @state()\n  private breakpointReached = false;\n\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\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  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\");\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this._handleResize();\n\n    window.addEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    window.addEventListener(\"resize\", this._handleResize.bind(this));\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    window.removeEventListener(\"click\", (event: MouseEvent) => this._handleClickOutOfElement(event, this.body));\n    window.removeEventListener(\"resize\", this._handleResize.bind(this));\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\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\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n  }\n\n  private _handleClickOutOfElement(e: MouseEvent, self: HTMLElement) {\n    if (!e.composedPath().includes(self) && !(this.header && 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.body.style.overflow = \"hidden\";\n      this.show();\n    }\n  }\n\n  private _handleResize() {\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        window.addEventListener(\"scrollend\", this._handleMobileNavBound);\n      }\n    } else {\n      this._handleDesktopNav();\n      this._breakpointReached = false;\n      window.removeEventListener(\"scrollend\", this._handleMobileNavBound);\n    }\n  }\n\n  private _handleMobileNavBound = this._handleMobileNav.bind(this);\n\n  private async _handleMobileNav() {\n    if (!this.nav) return;\n\n    this.nav.appendChild(this.body);\n    await customElements.whenDefined(\"sgds-masthead\");\n\n    const { bottom } = this.nav.getBoundingClientRect();\n    const navBodyPaddingY =\n      parseFloat(getComputedStyle(this.body).paddingTop) + parseFloat(getComputedStyle(this.body).paddingBottom);\n\n    this.navScroll.style.maxHeight = `calc(100dvh - ${bottom}px - ${navBodyPaddingY}px)`;\n  }\n\n  private _handleDesktopNav() {\n    this.navbar?.insertBefore(this.body, this.navbarEnd);\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  /** @internal */\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.body.style.removeProperty(\"overflow\");\n\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n\n    if (this._hasProfileComponent && childElements.length > 0) {\n      console.warn(\n        \"[sgds-mainnav] Using <sgds-mainnav-item> alongside <sgds-mainnav-profile> is not recommended. \" +\n          \"The profile component disables the mainnav hamburger menu, so nav items will have no mobile menu. \" +\n          \"Use a sidebar for navigation in operational apps.\"\n      );\n    }\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  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n      e.setAttribute(\"expand\", this.expand);\n      e.setAttribute(\"tone\", this.tone);\n    });\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileComponent = childElements.some(el => el.tagName.toLowerCase() === \"sgds-mainnav-profile\");\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n\n    if (this._hasProfileComponent && this.defaultSlotItems.length > 0) {\n      console.warn(\n        \"[sgds-mainnav] Using <sgds-mainnav-item> alongside <sgds-mainnav-profile> is not recommended. \" +\n          \"The profile component disables the mainnav hamburger menu, so nav items will have no mobile menu. \" +\n          \"Use a sidebar for navigation in operational apps.\"\n      );\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          <slot name=\"start\"></slot>\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 @slotchange=${this._handleDefaultSlotChange}></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <div class=\"navbar-end\">\n            <slot\n              name=\"non-collapsible\"\n              class=${classMap({ \"non-collapsible-empty\": !this.hasNonCollapsibleSlot })}\n            ></slot>\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n            ${!(this._hasProfileComponent && this.breakpointReached)\n              ? html`<sgds-icon-button\n                  name=${this.expanded ? \"cross\" : \"menu\"}\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  tone=${this.tone !== \"default\" ? \"fixed-light\" : nothing}\n                  class=\"navbar-toggler\"\n                  @click=${this._handleSummaryClick}\n                  aria-controls=\"${this.collapseId}\"\n                  aria-expanded=\"${this.expanded}\"\n                  .ariaLabel=${\"Toggle navigation\"}\n                ></sgds-icon-button>`\n              : nothing}\n          </div>\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","HasSlotController","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","waitForEvent","html","classMap","nothing","mainnavStyle","SgdsIconButton","__decorate","provide","MainnavBreakpointContext","state","MainnavExpandedContext","query","property","queryAssignedElements","watch","setDefaultAnimation"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 'use client';
 import { __decorate } from 'tslib';
 import { provide } from '@lit/context';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { state, query, property, queryAssignedElements } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
@@ -34,8 +34,10 @@ const SIZES = {
  * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.
  *
  * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.
+ * @slot start - Elements in this slot will be positioned to the left of the brand.
  * @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
+ * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.
  * @slot non-collapsible - Elements in this slot will not be collapsed
  *
  */
@@ -47,16 +49,18 @@ class SgdsMainnav extends SgdsElement {
         this.expanded = false;
         /** Denotes the transition state of mobile mainnav menu opening  */
         this.expanding = false;
+        /** @internal Whether sgds-mainnav-profile is slotted in the profile slot */
+        this._hasProfileComponent = false;
         /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */
         this.hasNonCollapsibleSlot = false;
         /** The href link for brand logo */
         this.brandHref = "";
+        this.tone = "default";
         this.collapseId = genId("mainnav", "collapse");
         /** 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 */
         this.expand = "lg";
         /** When true, removes max-width constraint to allow content to stretch full screen width */
         this.fluid = false;
-        /** @internal */
         this.breakpointReached = false;
         this.hasSlotController = new HasSlotController(this, "non-collapsible");
         this._handleMobileNavBound = this._handleMobileNav.bind(this);
@@ -94,7 +98,7 @@ class SgdsMainnav extends SgdsElement {
             this.hasNonCollapsibleSlot = this.hasSlotController.test("non-collapsible");
     }
     _handleClickOutOfElement(e, self) {
-        if (!e.composedPath().includes(self) && !e.composedPath().includes(this.header)) {
+        if (!e.composedPath().includes(self) && !(this.header && e.composedPath().includes(this.header))) {
             this.hide();
         }
     }
@@ -141,7 +145,7 @@ class SgdsMainnav extends SgdsElement {
     }
     _handleDesktopNav() {
         var _a;
-        (_a = this.navbar) === null || _a === void 0 ? void 0 : _a.insertBefore(this.body, this.nonCollapsibleSlot);
+        (_a = this.navbar) === null || _a === void 0 ? void 0 : _a.insertBefore(this.body, this.navbarEnd);
     }
     async _animateToShow() {
         const sgdsShow = this.emit("sgds-show", { cancelable: true });
@@ -173,13 +177,14 @@ class SgdsMainnav extends SgdsElement {
     }
     /** @internal */
     async handleOpenChange() {
+        var _a;
         if (this.expanding) {
             // Show
             await this._animateToShow();
             this.expanded = true;
         }
         else {
-            this.header.focus();
+            (_a = this.header) === null || _a === void 0 ? void 0 : _a.focus();
             // Hide
             await this._animateToHide();
             this.expanded = false;
@@ -206,7 +211,13 @@ class SgdsMainnav extends SgdsElement {
         const childElements = e.target.assignedElements({ flatten: true });
         childElements.forEach(el => {
             el.setAttribute("expand", this.expand);
+            el.setAttribute("tone", this.tone);
         });
+        if (this._hasProfileComponent && childElements.length > 0) {
+            console.warn("[sgds-mainnav] Using <sgds-mainnav-item> alongside <sgds-mainnav-profile> is not recommended. " +
+                "The profile component disables the mainnav hamburger menu, so nav items will have no mobile menu. " +
+                "Use a sidebar for navigation in operational apps.");
+        }
     }
     // assigning name attribute to elements added in slot="end", to use wildcard css selector to assign styles only to *-mainnav-item
     _handleSlotChange(e) {
@@ -214,13 +225,28 @@ class SgdsMainnav extends SgdsElement {
         childElements.forEach(e => {
             e.setAttribute("name", e.tagName.toLowerCase());
             e.setAttribute("expand", this.expand);
+            e.setAttribute("tone", this.tone);
+        });
+    }
+    _handleProfileSlotChange(e) {
+        const childElements = e.target.assignedElements({ flatten: true });
+        this._hasProfileComponent = childElements.some(el => el.tagName.toLowerCase() === "sgds-mainnav-profile");
+        childElements.forEach(el => {
+            el.setAttribute("expand", this.expand);
+            el.setAttribute("tone", this.tone);
         });
+        if (this._hasProfileComponent && this.defaultSlotItems.length > 0) {
+            console.warn("[sgds-mainnav] Using <sgds-mainnav-item> alongside <sgds-mainnav-profile> is not recommended. " +
+                "The profile component disables the mainnav hamburger menu, so nav items will have no mobile menu. " +
+                "Use a sidebar for navigation in operational apps.");
+        }
     }
     render() {
         this.breakpointReached = window.innerWidth < SIZES[this.expand];
         return html `
       <nav>
         <div class="navbar ${this._expandClass()}">
+          <slot name="start"></slot>
           <a class="navbar-brand" href=${this.brandHref} aria-label="brand-link">
             <slot name="brand"></slot>
           </a>
@@ -234,20 +260,26 @@ class SgdsMainnav extends SgdsElement {
               ></slot>
             </div>
           </div>
-          <slot
-            name="non-collapsible"
-            class=${classMap({ "non-collapsible-empty": !this.hasNonCollapsibleSlot })}
-          ></slot>
-          <sgds-icon-button
-            name=${this.expanded ? "cross" : "menu"}
-            variant="ghost"
-            size="sm"
-            class="navbar-toggler"
-            @click=${this._handleSummaryClick}
-            aria-controls="${this.collapseId}"
-            aria-expanded="${this.expanded}"
-            .ariaLabel=${"Toggle navigation"}
-          ></sgds-icon-button>
+          <div class="navbar-end">
+            <slot
+              name="non-collapsible"
+              class=${classMap({ "non-collapsible-empty": !this.hasNonCollapsibleSlot })}
+            ></slot>
+            <slot name="profile" @slotchange=${this._handleProfileSlotChange}></slot>
+            ${!(this._hasProfileComponent && this.breakpointReached)
+            ? html `<sgds-icon-button
+                  name=${this.expanded ? "cross" : "menu"}
+                  variant="ghost"
+                  size="sm"
+                  tone=${this.tone !== "default" ? "fixed-light" : nothing}
+                  class="navbar-toggler"
+                  @click=${this._handleSummaryClick}
+                  aria-controls="${this.collapseId}"
+                  aria-expanded="${this.expanded}"
+                  .ariaLabel=${"Toggle navigation"}
+                ></sgds-icon-button>`
+            : nothing}
+          </div>
         </div>
       </nav>
     `;
@@ -295,14 +327,20 @@ __decorate([
     query(".navbar-nav-scroll")
 ], SgdsMainnav.prototype, "navScroll", void 0);
 __decorate([
-    query("slot[name='non-collapsible']")
-], SgdsMainnav.prototype, "nonCollapsibleSlot", void 0);
+    query(".navbar-end")
+], SgdsMainnav.prototype, "navbarEnd", void 0);
+__decorate([
+    state()
+], SgdsMainnav.prototype, "_hasProfileComponent", void 0);
 __decorate([
     property({ type: Boolean })
 ], SgdsMainnav.prototype, "hasNonCollapsibleSlot", void 0);
 __decorate([
     property({ type: String })
 ], SgdsMainnav.prototype, "brandHref", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsMainnav.prototype, "tone", void 0);
 __decorate([
     property({ type: String })
 ], SgdsMainnav.prototype, "expand", void 0);