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

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

@@ -1 +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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"}
+{"version":3,"file":"sgds-mainnav-profile.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-profile.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { state } from \"lit/decorators.js\";\nimport NavProfileElement from \"../../base/nav-profile-element\";\nimport { MainnavBreakpointContext } from \"./mainnav-context\";\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 no dropdown items are slotted, renders as a non-interactive read-only element (no caret, no pointer cursor, not focusable).\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). When empty, the component becomes read-only.\n */\nexport class SgdsMainnavProfile extends NavProfileElement {\n  @consume({ context: MainnavBreakpointContext, subscribe: true })\n  @state()\n  protected override _breakpointReached = true;\n}\n\nexport default SgdsMainnavProfile;\n"],"names":[],"mappings":";;;;;;;AAKA;;;;;;;;;AASG;AACG,MAAO,kBAAmB,SAAQ,iBAAiB,CAAA;AAAzD,IAAA,WAAA,GAAA;;QAGqB,IAAkB,CAAA,kBAAA,GAAG,IAAI,CAAC;KAC9C;AAAA,CAAA;AADoB,UAAA,CAAA;IAFlB,OAAO,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC/D,IAAA,KAAK,EAAE;AACqC,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

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

@@ -8,27 +8,11 @@ var context = require('@lit/context');
 var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var classMap_js = require('lit/directives/class-map.js');
-var sgdsElement = require('../../base/sgds-element.cjs.js');
-var animate = require('../../utils/animate.cjs.js');
-var animationRegistry = require('../../utils/animation-registry.cjs.js');
-var breakpoints = require('../../utils/breakpoints.cjs.js');
-var event = require('../../utils/event.cjs.js');
-var generateId = require('../../utils/generateId.cjs.js');
-var watch = require('../../utils/watch.cjs.js');
-var sgdsIconButton = require('../IconButton/sgds-icon-button.cjs.js');
+var navElement = require('../../base/nav-element.cjs.js');
+var slot = require('../../utils/slot.cjs.js');
 var mainnavContext = require('./mainnav-context.cjs.js');
 var mainnav = require('./mainnav.cjs.js');
-var slot = require('../../utils/slot.cjs.js');
 
-const SIZES = {
-    sm: breakpoints.SM_BREAKPOINT,
-    md: breakpoints.MD_BREAKPOINT,
-    lg: breakpoints.LG_BREAKPOINT,
-    xl: breakpoints.XL_BREAKPOINT,
-    xxl: breakpoints.XXL_BREAKPOINT,
-    never: Infinity,
-    always: -1
-};
 /**
  * @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.
  *
@@ -45,29 +29,16 @@ const SIZES = {
  * @slot non-collapsible - Elements in this slot will not be collapsed
  *
  */
-class SgdsMainnav extends sgdsElement["default"] {
+class SgdsMainnav extends navElement["default"] {
     constructor() {
         super(...arguments);
         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;
-        /** @internal Whether sgds-mainnav-profile is slotted in the profile slot */
-        this._hasProfileComponent = false;
+        this._expanded = 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;
-        this.breakpointReached = false;
         this.hasSlotController = new slot.HasSlotController(this, "non-collapsible");
-        this._handleMobileNavBound = this._handleMobileNav.bind(this);
     }
     /** @internal */
     get defaultSlotItems() {
@@ -77,145 +48,22 @@ class SgdsMainnav extends sgdsElement["default"] {
     get endSlotItems() {
         return [...(this.endNodes || [])].filter((node) => typeof node.tagName !== "undefined");
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this._handleResize();
-        window.addEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-        window.addEventListener("resize", this._handleResize.bind(this));
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        window.removeEventListener("click", (event) => this._handleClickOutOfElement(event, this.body));
-        window.removeEventListener("resize", this._handleResize.bind(this));
-    }
-    firstUpdated(changedProperties) {
-        super.firstUpdated(changedProperties);
-        if (this.breakpointReached && this.body) {
-            this.expanded = false;
-            this.body.hidden = true;
-            this._handleMobileNav();
-            this._breakpointReached = true;
-        }
-    }
     updated() {
         if (!this.hasNonCollapsibleSlot)
             this.hasNonCollapsibleSlot = this.hasSlotController.test("non-collapsible");
+        // Sync expanded state to context
+        this._expanded = this.expanded;
     }
-    _handleClickOutOfElement(e, self) {
-        if (!e.composedPath().includes(self) && !(this.header && e.composedPath().includes(this.header))) {
-            this.hide();
-        }
-    }
-    _handleSummaryClick() {
-        if (this.expanded) {
-            this.hide();
-        }
-        else {
-            document.body.style.overflow = "hidden";
-            this.show();
-        }
-    }
-    _handleResize() {
-        const newBreakpointReachedValue = window.innerWidth < SIZES[this.expand];
-        if (newBreakpointReachedValue !== this.breakpointReached) {
-            this.requestUpdate();
-        }
-        else {
-            this.body ? (this.body.hidden = true) : null;
-            // this.expanded = false;
-            this.expanding = false;
-        }
-        if (newBreakpointReachedValue) {
-            this._handleMobileNav();
-            if (!this._breakpointReached) {
-                this._breakpointReached = true;
-                window.addEventListener("scrollend", this._handleMobileNavBound);
-            }
-        }
-        else {
-            this._handleDesktopNav();
-            this._breakpointReached = false;
-            window.removeEventListener("scrollend", this._handleMobileNavBound);
-        }
-    }
-    async _handleMobileNav() {
-        if (!this.nav)
-            return;
-        this.nav.appendChild(this.body);
-        await customElements.whenDefined("sgds-masthead");
-        const { bottom } = this.nav.getBoundingClientRect();
-        const navBodyPaddingY = parseFloat(getComputedStyle(this.body).paddingTop) + parseFloat(getComputedStyle(this.body).paddingBottom);
-        this.navScroll.style.maxHeight = `calc(100dvh - ${bottom}px - ${navBodyPaddingY}px)`;
-    }
-    _handleDesktopNav() {
-        var _a;
-        (_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 });
-        if (sgdsShow.defaultPrevented) {
-            this.expanding = false;
-            this.expanded = false;
-            return;
-        }
-        await animate.stopAnimations(this.body);
-        this.body.hidden = false;
-        const { keyframes, options } = animationRegistry.getAnimation(this, "mainnav.show");
-        await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-        this.body.style.height = "auto";
-        this.emit("sgds-after-show");
-    }
-    async _animateToHide() {
-        const slHide = this.emit("sgds-hide", { cancelable: true });
-        if (slHide.defaultPrevented) {
-            this.expanding = false;
-            this.expanded = true;
-            return;
-        }
-        await animate.stopAnimations(this.body);
-        const { keyframes, options } = animationRegistry.getAnimation(this, "mainnav.hide");
-        await animate.animateTo(this.body, animate.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-        this.body.hidden = true;
-        this.body.style.height = "auto";
-        this.emit("sgds-after-hide");
-    }
-    /** @internal */
-    async handleOpenChange() {
-        var _a;
-        if (this.expanding) {
-            // Show
-            await this._animateToShow();
-            this.expanded = true;
-        }
-        else {
-            (_a = this.header) === null || _a === void 0 ? void 0 : _a.focus();
-            // Hide
-            await this._animateToHide();
-            this.expanded = false;
-        }
-    }
-    /** Shows the menu. For when mainnav is in the collapsed form */
-    async show() {
-        if (this.expanded) {
-            return;
-        }
-        this.expanding = true;
-        return event.waitForEvent(this, "sgds-after-show");
+    _onBreakpointReached(reached) {
+        this._breakpointReached = reached;
     }
-    /** Hide the menu. For when mainnav is in the collapsed form */
-    async hide() {
-        if (!this.expanded) {
-            return;
-        }
-        this.expanding = false;
-        document.body.style.removeProperty("overflow");
-        return event.waitForEvent(this, "sgds-after-hide");
+    _isBreakpointReached() {
+        return this._breakpointReached;
     }
     _handleDefaultSlotChange(e) {
         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. " +
@@ -223,30 +71,27 @@ class SgdsMainnav extends sgdsElement["default"] {
                 "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) {
         const childElements = e.target.assignedElements({ flatten: true });
         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];
+        this.breakpointReached =
+            window.innerWidth <
+                (this.expand === "always"
+                    ? -1
+                    : this.expand === "never"
+                        ? Infinity
+                        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);
         return lit.html `
       <nav>
         <div class="navbar ${this._expandClass()}">
@@ -265,45 +110,16 @@ class SgdsMainnav extends sgdsElement["default"] {
             </div>
           </div>
           <div class="navbar-end">
-            <slot
-              name="non-collapsible"
-              class=${classMap_js.classMap({ "non-collapsible-empty": !this.hasNonCollapsibleSlot })}
-            ></slot>
+            <slot name="non-collapsible" class=${classMap_js.classMap({ "slot-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}
+            ${this._renderToggler()}
           </div>
         </div>
       </nav>
     `;
     }
-    _expandClass() {
-        switch (this.expand) {
-            case "always":
-                return "navbar-expand";
-            case "never":
-                break;
-            default:
-                return `navbar-expand-${this.expand}`;
-        }
-    }
 }
-SgdsMainnav.styles = [...sgdsElement["default"].styles, mainnav["default"]];
-/** @internal */
-SgdsMainnav.dependencies = {
-    "sgds-icon-button": sgdsIconButton.SgdsIconButton
-};
+SgdsMainnav.styles = [...navElement["default"].styles, mainnav["default"]];
 tslib.__decorate([
     context.provide({ context: mainnavContext.MainnavBreakpointContext }),
     decorators_js.state()
@@ -311,72 +127,20 @@ tslib.__decorate([
 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);
-tslib.__decorate([
-    decorators_js.query(".navbar")
-], SgdsMainnav.prototype, "navbar", void 0);
-tslib.__decorate([
-    decorators_js.query(".navbar-toggler")
-], SgdsMainnav.prototype, "header", void 0);
-tslib.__decorate([
-    decorators_js.query(".navbar-body")
-], SgdsMainnav.prototype, "body", void 0);
-tslib.__decorate([
-    decorators_js.query(".navbar-nav-scroll")
-], SgdsMainnav.prototype, "navScroll", void 0);
-tslib.__decorate([
-    decorators_js.query(".navbar-end")
-], SgdsMainnav.prototype, "navbarEnd", void 0);
-tslib.__decorate([
-    decorators_js.state()
-], SgdsMainnav.prototype, "_hasProfileComponent", void 0);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+], SgdsMainnav.prototype, "_expanded", 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);
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsMainnav.prototype, "fluid", void 0);
-tslib.__decorate([
-    decorators_js.state()
-], SgdsMainnav.prototype, "breakpointReached", void 0);
 tslib.__decorate([
     decorators_js.queryAssignedElements()
 ], SgdsMainnav.prototype, "defaultNodes", void 0);
 tslib.__decorate([
     decorators_js.queryAssignedElements({ slot: "end" })
 ], SgdsMainnav.prototype, "endNodes", void 0);
-tslib.__decorate([
-    watch.watch("expanding", { waitUntilFirstUpdate: true })
-], SgdsMainnav.prototype, "handleOpenChange", null);
-animationRegistry.setDefaultAnimation("mainnav.show", {
-    keyframes: [
-        { height: "0", opacity: "0" },
-        { height: "auto", opacity: "1" }
-    ],
-    options: { duration: 200, easing: "ease-in-out" }
-});
-animationRegistry.setDefaultAnimation("mainnav.hide", {
-    keyframes: [
-        { height: "auto", opacity: "1" },
-        { height: "0", opacity: "0" }
-    ],
-    options: { duration: 200, easing: "ease-in-out" }
-});
 
 exports.SgdsMainnav = SgdsMainnav;
 exports["default"] = SgdsMainnav;

package/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, 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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"}
+{"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, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\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 NavElement {\n  static styles = [...NavElement.styles, mainnavStyle];\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\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  @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  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n    // Sync expanded state to context\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\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    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  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    });\n  }\n\n  private _handleProfileSlotChange(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  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[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 name=\"non-collapsible\" class=${classMap({ \"slot-empty\": !this.hasNonCollapsibleSlot })}></slot>\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n            ${this._renderToggler()}\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsMainnav;\n"],"names":["NavElement","HasSlotController","html","classMap","mainnavStyle","__decorate","provide","MainnavBreakpointContext","state","MainnavExpandedContext","property","queryAssignedElements"],"mappings":"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"}