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

package/react/components/ImageCard/sgds-image-card.js

@@ -2,10 +2,9 @@
 import { __decorate } from 'tslib';
 import { nothing } from 'lit';
 import { literal, html } from 'lit/static-html.js';
-import { queryAssignedNodes, property } from 'lit/decorators.js';
+import { queryAssignedNodes, queryAssignedElements, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { CardElement } from '../../base/card-element.js';
-import { HasSlotController } from '../../utils/slot.js';
 import css_248z from './image-card.js';
 
 /**
@@ -19,7 +18,9 @@ import css_248z from './image-card.js';
  * @slot title - The title of the card
  * @slot description - The paragrapher text of the card
  * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.
- * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.
+ * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.
+ * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.
+ *  Legacy slot for anchor elements. Use `footer` instead.
  */
 class SgdsImageCard extends CardElement {
     constructor() {
@@ -30,9 +31,21 @@ class SgdsImageCard extends CardElement {
         this.imagePosition = "before";
         /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */
         this.imageAdjustment = "default";
-        this.hasSlotController = new HasSlotController(this, "description");
+    }
+    get linkSlotItems() {
+        if (!this.linkNode || this.linkNode.length === 0)
+            return null;
+        const element = this.linkNode[0];
+        return (element.querySelector("a") || element);
+    }
+    get footerSlotItems() {
+        if (!this.footerNode || this.footerNode.length === 0)
+            return null;
+        const element = this.footerNode[0];
+        return (element.querySelector("a") || element);
     }
     firstUpdated() {
+        var _a, _b;
         if (this._imageNode.length === 0) {
             const image = this.shadowRoot.querySelector(".card-image");
             const body = this.shadowRoot.querySelector(".card-body");
@@ -40,6 +53,16 @@ class SgdsImageCard extends CardElement {
             if (this.noPadding)
                 body.style.padding = "0px";
         }
+        if (this.stretchedLink) {
+            const footerHref = (_a = this.footerSlotItems) === null || _a === void 0 ? void 0 : _a.href;
+            const linkHref = (_b = this.linkSlotItems) === null || _b === void 0 ? void 0 : _b.href;
+            if (footerHref) {
+                this.card.setAttribute("href", footerHref);
+            }
+            else if (linkHref) {
+                this.card.setAttribute("href", linkHref);
+            }
+        }
     }
     handleImgSlotChange(e) {
         const childNodes = e.target.assignedNodes({ flatten: true });
@@ -50,7 +73,6 @@ class SgdsImageCard extends CardElement {
     render() {
         const tag = this.stretchedLink ? literal `a` : literal `div`;
         const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;
-        const hasDescriptionSlot = this.hasSlotController.test("description");
         return html `
       <${tag} 
         class="card ${classMap({
@@ -73,13 +95,11 @@ class SgdsImageCard extends CardElement {
             </div>
             <slot></slot>
           </div>
-          ${hasDescriptionSlot
-            ? html `<p class="card-text">
-                  <slot name="description"></slot>
-                </p>`
-            : nothing}
+          <slot name="description"></slot>
           <slot name="lower"></slot>
-          <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          <slot name="footer">
+            <slot name="link" @slotchange=${this.handleLinkSlotChange}></slot>
+          </slot>
         </div>
       </${tag}>
     `;
@@ -89,6 +109,12 @@ SgdsImageCard.styles = [...CardElement.styles, css_248z];
 __decorate([
     queryAssignedNodes({ slot: "image", flatten: true })
 ], SgdsImageCard.prototype, "_imageNode", void 0);
+__decorate([
+    queryAssignedElements({ slot: "footer" })
+], SgdsImageCard.prototype, "footerNode", void 0);
+__decorate([
+    queryAssignedElements({ slot: "link" })
+], SgdsImageCard.prototype, "linkNode", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsImageCard.prototype, "noPadding", void 0);

package/react/components/ImageCard/sgds-image-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-image-card.js","sources":["../../../../src/components/ImageCard/sgds-image-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { CardImageAdjustment, CardImagePosition } from \"../Card/types\";\nimport imageCardStyle from \"./image-card.css\";\n\n/**\n * @summary Image cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.\n * @slot image-action - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the image. Typically used for action menu.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot link - Accepts an anchor element. Only a single element is allowed to be passed in.\n */\nexport class SgdsImageCard extends CardElement {\n  static styles = [...CardElement.styles, imageCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  private readonly hasSlotController = new HasSlotController(this, \"description\");\n\n  protected firstUpdated() {\n    if (this._imageNode.length === 0) {\n      const image = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n      image.style.display = \"none\";\n      if (this.noPadding) body.style.padding = \"0px\";\n    }\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n    const hasDescriptionSlot = this.hasSlotController.test(\"description\");\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-image\">\n\t\t\t\t\t<slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n\t\t\t\t\t<slot name=\"image-badge\"></slot>\n\t\t\t\t\t<slot name=\"image-action\"></slot>\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t<slot name=\"upper\"></slot>\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          ${\n            hasDescriptionSlot\n              ? html`<p class=\"card-text\">\n                  <slot name=\"description\"></slot>\n                </p>`\n              : nothing\n          }\n          <slot name=\"lower\"></slot>\n          <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsImageCard;\n"],"names":["imageCardStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-image-card.js","sources":["../../../../src/components/ImageCard/sgds-image-card.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { html, literal } from \"lit/static-html.js\";\nimport { property, queryAssignedElements, queryAssignedNodes } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { CardElement } from \"../../base/card-element\";\nimport { CardImageAdjustment, CardImagePosition } from \"../Card/types\";\nimport SgdsLink from \"../Link/sgds-link\";\nimport imageCardStyle from \"./image-card.css\";\n\n/**\n * @summary Image cards can be used for headers and footers, a wide variety of content, contain contextual background colors and images.\n * @slot default - The content area of the card, placed directly under the title. Accepts any HTML or custom elements.\n * @slot image - Accepts an image or svg element of the card. Only a single element is allowed to be passed in.\n * @slot image-badge - Accepts an element for a badge, positioned at the top-left corner of the image.\n * @slot image-action - Accepts an element for an overflow or contextual menu, positioned at the top-right corner of the image. Typically used for action menu.\n * @slot upper - Accepts any content to be displayed at the top of the subtitle. Commonly used for badges, status indicators, or decorative elements.\n * @slot subtitle - The subtitle of the card\n * @slot title - The title of the card\n * @slot description - The paragrapher text of the card\n * @slot lower - Accepts any additional content to be displayed below the card description, such as badges, metadata, or supplementary information.\n * @slot footer - Footer area of the card. Accepts links, actions, or any custom content.\n * @slot link - (@deprecated) Deprecated since 3.3.2 in favour of `footer` slot.\n *  Legacy slot for anchor elements. Use `footer` instead.\n */\nexport class SgdsImageCard extends CardElement {\n  static styles = [...CardElement.styles, imageCardStyle];\n\n  /** @internal */\n  @queryAssignedNodes({ slot: \"image\", flatten: true })\n  _imageNode!: Array<Node>;\n  @queryAssignedElements({ slot: \"footer\" })\n  private footerNode!: HTMLElement[];\n  @queryAssignedElements({ slot: \"link\" })\n  private linkNode!: HTMLAnchorElement[] | SgdsLink[];\n\n  /** Removes the card's internal padding when set to true.  */\n  @property({ type: Boolean, reflect: true }) noPadding = false;\n\n  /** Sets the image position of the card. Available options: `before`, `after` */\n  @property({ type: String, reflect: true }) imagePosition: CardImagePosition = \"before\";\n\n  /** Controls how the image is sized and aligned within the card. Available options: `default`, `padding around`, `aspect ratio` */\n  @property({ type: String, reflect: true }) imageAdjustment: CardImageAdjustment = \"default\";\n\n  private get linkSlotItems(): HTMLAnchorElement | null {\n    if (!this.linkNode || this.linkNode.length === 0) return null;\n    const element = this.linkNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  private get footerSlotItems(): HTMLAnchorElement | null {\n    if (!this.footerNode || this.footerNode.length === 0) return null;\n    const element = this.footerNode[0] as HTMLElement;\n    return (element.querySelector(\"a\") || element) as HTMLAnchorElement;\n  }\n\n  protected firstUpdated() {\n    if (this._imageNode.length === 0) {\n      const image = this.shadowRoot.querySelector(\".card-image\") as HTMLDivElement;\n      const body = this.shadowRoot.querySelector(\".card-body\") as HTMLDivElement;\n      image.style.display = \"none\";\n      if (this.noPadding) body.style.padding = \"0px\";\n    }\n\n    if (this.stretchedLink) {\n      const footerHref = this.footerSlotItems?.href;\n      const linkHref = this.linkSlotItems?.href;\n\n      if (footerHref) {\n        this.card.setAttribute(\"href\", footerHref);\n      } else if (linkHref) {\n        this.card.setAttribute(\"href\", linkHref);\n      }\n    }\n  }\n\n  handleImgSlotChange(e: Event) {\n    const childNodes = (e.target as HTMLSlotElement).assignedNodes({ flatten: true }) as Array<HTMLOrSVGImageElement>;\n\n    if (childNodes.length > 1) {\n      return console.error(\"Multiple elements passed into SgdsCard's image slot\");\n    }\n  }\n\n  render() {\n    const tag = this.stretchedLink ? literal`a` : literal`div`;\n    const cardTabIndex = !this.stretchedLink || this.disabled ? -1 : 0;\n\n    return html`\n      <${tag} \n        class=\"card ${classMap({\n          disabled: this.disabled\n        })}\"\n        tabindex=${cardTabIndex}\n      >\n        ${this.tinted && !this.noPadding ? html`<div class=\"card-tinted-bg\"></div>` : nothing}\n        <div class=\"card-image\">\n\t\t\t\t\t<slot name=\"image\" @slotchange=${this.handleImgSlotChange}></slot>\n\t\t\t\t\t<slot name=\"image-badge\"></slot>\n\t\t\t\t\t<slot name=\"image-action\"></slot>\n        </div>\n        <div class=\"card-body\">\n\t\t\t\t\t<slot name=\"upper\"></slot>\n          <div class=\"card-header-container\">\n            <div class=\"card-header\">\n              <slot name=\"subtitle\"></slot>\n              <h3 class=\"card-title\"><slot name=\"title\" @slotchange=${this.handleTitleSlotChange}></slot></h3>\n            </div>\n            <slot></slot>\n          </div>\n          <slot name=\"description\"></slot>\n          <slot name=\"lower\"></slot>\n          <slot name=\"footer\">\n            <slot name=\"link\" @slotchange=${this.handleLinkSlotChange}></slot>\n          </slot>\n        </div>\n      </${tag}>\n    `;\n  }\n}\n\nexport default SgdsImageCard;\n"],"names":["imageCardStyle"],"mappings":"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"}

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var context = require('@lit/context');
 
-const MainnavContext = context.createContext("mainnav-context");
+const MainnavBreakpointContext = context.createContext("mainnav-context");
+const MainnavExpandedContext = context.createContext("mainnav-expanded-context");
 
-exports.MainnavContext = MainnavContext;
+exports.MainnavBreakpointContext = MainnavBreakpointContext;
+exports.MainnavExpandedContext = MainnavExpandedContext;
 //# sourceMappingURL=mainnav-context.cjs.js.map

package/react/components/Mainnav/mainnav-context.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"mainnav-context.cjs.js","sources":["../../../../src/components/Mainnav/mainnav-context.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\n\nexport const MainnavContext = createContext<boolean>(\"mainnav-context\");\n"],"names":["createContext"],"mappings":";;;;;;;MAEa,cAAc,GAAGA,qBAAa,CAAU,iBAAiB;;;;"}
+{"version":3,"file":"mainnav-context.cjs.js","sources":["../../../../src/components/Mainnav/mainnav-context.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\n\nexport const MainnavBreakpointContext = createContext<boolean>(\"mainnav-context\");\n\nexport const MainnavExpandedContext = createContext<boolean>(\"mainnav-expanded-context\");\n"],"names":["createContext"],"mappings":";;;;;;;MAEa,wBAAwB,GAAGA,qBAAa,CAAU,iBAAiB,EAAE;MAErE,sBAAsB,GAAGA,qBAAa,CAAU,0BAA0B;;;;;"}

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

@@ -1,7 +1,8 @@
 'use client';
 import { createContext } from '@lit/context';
 
-const MainnavContext = createContext("mainnav-context");
+const MainnavBreakpointContext = createContext("mainnav-context");
+const MainnavExpandedContext = createContext("mainnav-expanded-context");
 
-export { MainnavContext };
+export { MainnavBreakpointContext, MainnavExpandedContext };
 //# sourceMappingURL=mainnav-context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"mainnav-context.js","sources":["../../../../src/components/Mainnav/mainnav-context.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\n\nexport const MainnavContext = createContext<boolean>(\"mainnav-context\");\n"],"names":[],"mappings":";;;MAEa,cAAc,GAAG,aAAa,CAAU,iBAAiB;;;;"}
+{"version":3,"file":"mainnav-context.js","sources":["../../../../src/components/Mainnav/mainnav-context.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\n\nexport const MainnavBreakpointContext = createContext<boolean>(\"mainnav-context\");\n\nexport const MainnavExpandedContext = createContext<boolean>(\"mainnav-expanded-context\");\n"],"names":[],"mappings":";;;MAEa,wBAAwB,GAAG,aAAa,CAAU,iBAAiB,EAAE;MAErE,sBAAsB,GAAG,aAAa,CAAU,0BAA0B;;;;"}

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

@@ -28,6 +28,7 @@ const SPACE = " ";
 class SgdsMainnavDropdown extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
+        this._breakpointReached = true;
         /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */
         this.togglerId = generateId["default"]("dropdown", "button");
         /** When true,  applies active styles on the dropdown button */
@@ -39,30 +40,6 @@ class SgdsMainnavDropdown extends sgdsElement["default"] {
     get defaultSlotItems() {
         return [...(this.defaultNodes || [])].filter((node) => typeof node.tagName !== "undefined");
     }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener("close-dropdown-menu", () => {
-            this._resetDropdownMenu();
-            this._hideDropdownMenuItems();
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Clean up the event listener when the element is removed from the DOM
-        document.removeEventListener("close-dropdown-menu", () => {
-            this._resetDropdownMenu();
-            this._hideDropdownMenuItems();
-        });
-    }
-    willUpdate(changedProperties) {
-        super.willUpdate(changedProperties);
-        if (!this.shadowRoot) {
-            return;
-        }
-        if (this._breakpointReached) {
-            this.shadowRoot.adoptedStyleSheets = [dropdownMenu["default"].styleSheet, mainnavDropdown["default"].styleSheet];
-        }
-    }
     updated() {
         if (this._breakpointReached) {
             this._copyTextToMenu();
@@ -84,8 +61,10 @@ class SgdsMainnavDropdown extends sgdsElement["default"] {
                 link.setAttribute("tabindex", "-1");
             }
             else {
-                link.addEventListener("click", () => {
-                    this.emit("sgds-mainnav-close");
+                link.addEventListener("click", (e) => {
+                    const target = e.target;
+                    const mainnav = target.closest("sgds-mainnav");
+                    mainnav.hide();
                 });
             }
         });
@@ -204,12 +183,9 @@ class SgdsMainnavDropdown extends sgdsElement["default"] {
         }
     }
     _closeMenu() {
-        // 200ms delay as the transform transition is set to this timing
         this._resetDropdownMenu();
-        setTimeout(() => {
-            this._hideDropdownMenuItems();
-            this.navLink.focus();
-        }, 200);
+        this._hideDropdownMenuItems();
+        this.navLink.focus();
     }
     render() {
         const mobileView = lit.html `
@@ -275,9 +251,13 @@ SgdsMainnavDropdown.dependencies = {
     "sgds-icon": sgdsIcon.SgdsIcon
 };
 tslib.__decorate([
-    context.consume({ context: mainnavContext.MainnavContext, subscribe: true }),
+    context.consume({ context: mainnavContext.MainnavBreakpointContext, subscribe: true }),
     decorators_js.state()
 ], SgdsMainnavDropdown.prototype, "_breakpointReached", void 0);
+tslib.__decorate([
+    context.consume({ context: mainnavContext.MainnavExpandedContext, subscribe: true }),
+    decorators_js.state()
+], SgdsMainnavDropdown.prototype, "expanded", void 0);
 tslib.__decorate([
     decorators_js.query(".nav-link")
 ], SgdsMainnavDropdown.prototype, "navLink", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-dropdown.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n  static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-dropdown\": SgdsDropdown,\n    \"sgds-dropdown-item\": SgdsDropdownItem,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @consume({ context: MainnavContext, subscribe: true })\n  @state()\n  private _breakpointReached: boolean;\n\n  /** @internal */\n  @query(\".nav-link\") navLink: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n  /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  private togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean })\n  active = false;\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsDropdownItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsDropdownItem[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener(\"close-dropdown-menu\", () => {\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Clean up the event listener when the element is removed from the DOM\n    document.removeEventListener(\"close-dropdown-menu\", () => {\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    });\n  }\n\n  protected willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n\n    if (!this.shadowRoot) {\n      return;\n    }\n\n    if (this._breakpointReached) {\n      this.shadowRoot.adoptedStyleSheets = [dropdownMenuStyle.styleSheet, mainnavDropdownStyle.styleSheet];\n    }\n  }\n\n  updated() {\n    if (this._breakpointReached) {\n      this._copyTextToMenu();\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    }\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n    items.forEach(item => {\n      item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.add(\"nav-link\");\n\n      const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n      link.tabIndex = -1;\n      if (dropdownItem.classList.contains(\"disabled\")) {\n        link.setAttribute(\"href\", \"javascript:void(0)\");\n        link.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        link.addEventListener(\"click\", () => {\n          this.emit(\"sgds-mainnav-close\");\n        });\n      }\n    });\n  }\n\n  private _handleDesktopSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.remove(\"nav-link\");\n\n      const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n        flatten: true\n      });\n      slottedItem.forEach(item => {\n        if (dropdownItem.classList.contains(\"disabled\")) {\n          item.setAttribute(\"href\", \"javascript:void(0)\");\n          item.setAttribute(\"tabindex\", \"-1\");\n        }\n      });\n    });\n  }\n\n  private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (!this._breakpointReached) {\n      return;\n    }\n\n    const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n    const items = [this.menuHeaderButton, ...slottedItems];\n    const itemLength = items.length;\n    if (itemLength === 0) {\n      return;\n    }\n\n    const firstItem = items[0];\n    const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n    let activeElement = document.activeElement as HTMLElement;\n    if (activeElement === this) {\n      activeElement = this.shadowRoot.activeElement as HTMLElement;\n    }\n\n    switch (e.key) {\n      case \"Tab\": {\n        if (e.shiftKey) {\n          if (activeElement === firstItem) {\n            e.preventDefault();\n            setTimeout(() => {\n              lastItem.focus();\n            }, 0);\n          }\n        } else {\n          const activeShadowElement = activeElement.shadowRoot\n            ? activeElement.shadowRoot.querySelector(\".dropdown-item\")\n            : null;\n          if (activeShadowElement && activeShadowElement === lastItem) {\n            e.preventDefault();\n            firstItem.focus();\n          }\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _copyTextToMenu() {\n    this.menuHeaderText.innerHTML = this.togglerNodes[0].innerHTML;\n  }\n\n  private _hideDropdownMenuItems() {\n    this.dropdownItems.style.display = \"none\";\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  private _resetDropdownMenu() {\n    const navbarBody = this._getNavbarBody();\n    if (navbarBody) {\n      navbarBody.style.removeProperty(\"transform\");\n    }\n  }\n\n  private _handleKeyboardOpen(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (event.key === ENTER || event.key === SPACE) {\n      event.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  private _getNavbarBody() {\n    const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n    if (!mainNav?.shadowRoot) {\n      console.warn(\"sgds-mainnav or its shadowRoot not found\");\n      return;\n    }\n\n    const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n    if (!navbarBody) {\n      console.warn(\".navbar-body not found in sgds-mainnav\");\n      return;\n    }\n\n    return navbarBody;\n  }\n\n  private _openMenu() {\n    const navbarBody = this._getNavbarBody();\n    navbarBody.style.transform = \"translateX(-100%)\";\n    this.dropdownItems.style.removeProperty(\"display\");\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n    setTimeout(() => {\n      this.menuHeaderButton.focus();\n    }, 50);\n  }\n\n  private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n    switch (event.key) {\n      case TAB: {\n        this._handleKeyboardMenuItemsEvent(event);\n        break;\n      }\n      case ENTER:\n      case SPACE: {\n        event.preventDefault();\n        this._closeMenu();\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _closeMenu() {\n    // 200ms delay as the transform transition is set to this timing\n    this._resetDropdownMenu();\n    setTimeout(() => {\n      this._hideDropdownMenuItems();\n      this.navLink.focus();\n    }, 200);\n  }\n\n  render() {\n    const mobileView = html`\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        @click=${this._openMenu}\n        @keydown=${this._handleKeyboardOpen}\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-right\"></sgds-icon>\n      </a>\n      <div class=\"dropdown-items\">\n        <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n          <sgds-icon name=\"chevron-left\"></sgds-icon>\n          <span></span>\n        </a>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n\n    const desktopView = html`<sgds-dropdown\n      .modifierOpt=${[\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 0]\n          }\n        }\n      ]}\n      ?disabled=${this.disabled}\n    >\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        id=${this.togglerId}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        slot=\"toggler\"\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-down\"></sgds-icon>\n      </a>\n      <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n    </sgds-dropdown>`;\n\n    return this._breakpointReached ? mobileView : desktopView;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["SgdsElement","genId","dropdownMenuStyle","mainnavDropdownStyle","html","classMap","dropdownStyle","SgdsDropdown","SgdsDropdownItem","SgdsIcon","__decorate","consume","MainnavContext","state","query","property","queryAssignedElements"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav-dropdown.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n  static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\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  @consume({ context: MainnavExpandedContext, subscribe: true })\n  @state()\n  private expanded: boolean;\n\n  /** @internal */\n  @query(\".nav-link\") navLink: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n  /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  private togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean })\n  active = false;\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsDropdownItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsDropdownItem[];\n  }\n\n  updated() {\n    if (this._breakpointReached) {\n      this._copyTextToMenu();\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    }\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n    items.forEach(item => {\n      item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.add(\"nav-link\");\n\n      const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n      link.tabIndex = -1;\n      if (dropdownItem.classList.contains(\"disabled\")) {\n        link.setAttribute(\"href\", \"javascript:void(0)\");\n        link.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        link.addEventListener(\"click\", (e: Event) => {\n          const target = e.target as HTMLElement;\n          const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n          mainnav.hide();\n        });\n      }\n    });\n  }\n\n  private _handleDesktopSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.remove(\"nav-link\");\n\n      const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n        flatten: true\n      });\n      slottedItem.forEach(item => {\n        if (dropdownItem.classList.contains(\"disabled\")) {\n          item.setAttribute(\"href\", \"javascript:void(0)\");\n          item.setAttribute(\"tabindex\", \"-1\");\n        }\n      });\n    });\n  }\n\n  private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (!this._breakpointReached) {\n      return;\n    }\n\n    const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n    const items = [this.menuHeaderButton, ...slottedItems];\n    const itemLength = items.length;\n    if (itemLength === 0) {\n      return;\n    }\n\n    const firstItem = items[0];\n    const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n    let activeElement = document.activeElement as HTMLElement;\n    if (activeElement === this) {\n      activeElement = this.shadowRoot.activeElement as HTMLElement;\n    }\n\n    switch (e.key) {\n      case \"Tab\": {\n        if (e.shiftKey) {\n          if (activeElement === firstItem) {\n            e.preventDefault();\n            setTimeout(() => {\n              lastItem.focus();\n            }, 0);\n          }\n        } else {\n          const activeShadowElement = activeElement.shadowRoot\n            ? activeElement.shadowRoot.querySelector(\".dropdown-item\")\n            : null;\n          if (activeShadowElement && activeShadowElement === lastItem) {\n            e.preventDefault();\n            firstItem.focus();\n          }\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _copyTextToMenu() {\n    this.menuHeaderText.innerHTML = this.togglerNodes[0].innerHTML;\n  }\n\n  private _hideDropdownMenuItems() {\n    this.dropdownItems.style.display = \"none\";\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  private _resetDropdownMenu() {\n    const navbarBody = this._getNavbarBody();\n    if (navbarBody) {\n      navbarBody.style.removeProperty(\"transform\");\n    }\n  }\n\n  private _handleKeyboardOpen(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (event.key === ENTER || event.key === SPACE) {\n      event.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  private _getNavbarBody() {\n    const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n    if (!mainNav?.shadowRoot) {\n      console.warn(\"sgds-mainnav or its shadowRoot not found\");\n      return;\n    }\n\n    const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n    if (!navbarBody) {\n      console.warn(\".navbar-body not found in sgds-mainnav\");\n      return;\n    }\n\n    return navbarBody;\n  }\n\n  private _openMenu() {\n    const navbarBody = this._getNavbarBody();\n    navbarBody.style.transform = \"translateX(-100%)\";\n    this.dropdownItems.style.removeProperty(\"display\");\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n    setTimeout(() => {\n      this.menuHeaderButton.focus();\n    }, 50);\n  }\n\n  private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n    switch (event.key) {\n      case TAB: {\n        this._handleKeyboardMenuItemsEvent(event);\n        break;\n      }\n      case ENTER:\n      case SPACE: {\n        event.preventDefault();\n        this._closeMenu();\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _closeMenu() {\n    this._resetDropdownMenu();\n    this._hideDropdownMenuItems();\n    this.navLink.focus();\n  }\n\n  render() {\n    const mobileView = html`\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        @click=${this._openMenu}\n        @keydown=${this._handleKeyboardOpen}\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-right\"></sgds-icon>\n      </a>\n      <div class=\"dropdown-items\">\n        <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n          <sgds-icon name=\"chevron-left\"></sgds-icon>\n          <span></span>\n        </a>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n\n    const desktopView = html`<sgds-dropdown\n      .modifierOpt=${[\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 0]\n          }\n        }\n      ]}\n      ?disabled=${this.disabled}\n    >\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        id=${this.togglerId}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        slot=\"toggler\"\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-down\"></sgds-icon>\n      </a>\n      <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n    </sgds-dropdown>`;\n\n    return this._breakpointReached ? mobileView : desktopView;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["SgdsElement","genId","html","classMap","dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle","SgdsDropdown","SgdsDropdownItem","SgdsIcon","__decorate","consume","MainnavBreakpointContext","state","MainnavExpandedContext","query","property","queryAssignedElements"],"mappings":"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"}

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

@@ -11,7 +11,7 @@ import css_248z$2 from './mainnav-dropdown.js';
 import { SgdsDropdown } from '../Dropdown/sgds-dropdown.js';
 import { SgdsDropdownItem } from '../Dropdown/sgds-dropdown-item.js';
 import { SgdsIcon } from '../Icon/sgds-icon.js';
-import { MainnavContext } from './mainnav-context.js';
+import { MainnavBreakpointContext, MainnavExpandedContext } from './mainnav-context.js';
 import SgdsElement from '../../base/sgds-element.js';
 
 const TAB = "Tab";
@@ -24,6 +24,7 @@ const SPACE = " ";
 class SgdsMainnavDropdown extends SgdsElement {
     constructor() {
         super(...arguments);
+        this._breakpointReached = true;
         /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */
         this.togglerId = genId("dropdown", "button");
         /** When true,  applies active styles on the dropdown button */
@@ -35,30 +36,6 @@ class SgdsMainnavDropdown extends SgdsElement {
     get defaultSlotItems() {
         return [...(this.defaultNodes || [])].filter((node) => typeof node.tagName !== "undefined");
     }
-    connectedCallback() {
-        super.connectedCallback();
-        document.addEventListener("close-dropdown-menu", () => {
-            this._resetDropdownMenu();
-            this._hideDropdownMenuItems();
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        // Clean up the event listener when the element is removed from the DOM
-        document.removeEventListener("close-dropdown-menu", () => {
-            this._resetDropdownMenu();
-            this._hideDropdownMenuItems();
-        });
-    }
-    willUpdate(changedProperties) {
-        super.willUpdate(changedProperties);
-        if (!this.shadowRoot) {
-            return;
-        }
-        if (this._breakpointReached) {
-            this.shadowRoot.adoptedStyleSheets = [css_248z$1.styleSheet, css_248z$2.styleSheet];
-        }
-    }
     updated() {
         if (this._breakpointReached) {
             this._copyTextToMenu();
@@ -80,8 +57,10 @@ class SgdsMainnavDropdown extends SgdsElement {
                 link.setAttribute("tabindex", "-1");
             }
             else {
-                link.addEventListener("click", () => {
-                    this.emit("sgds-mainnav-close");
+                link.addEventListener("click", (e) => {
+                    const target = e.target;
+                    const mainnav = target.closest("sgds-mainnav");
+                    mainnav.hide();
                 });
             }
         });
@@ -200,12 +179,9 @@ class SgdsMainnavDropdown extends SgdsElement {
         }
     }
     _closeMenu() {
-        // 200ms delay as the transform transition is set to this timing
         this._resetDropdownMenu();
-        setTimeout(() => {
-            this._hideDropdownMenuItems();
-            this.navLink.focus();
-        }, 200);
+        this._hideDropdownMenuItems();
+        this.navLink.focus();
     }
     render() {
         const mobileView = html `
@@ -271,9 +247,13 @@ SgdsMainnavDropdown.dependencies = {
     "sgds-icon": SgdsIcon
 };
 __decorate([
-    consume({ context: MainnavContext, subscribe: true }),
+    consume({ context: MainnavBreakpointContext, subscribe: true }),
     state()
 ], SgdsMainnavDropdown.prototype, "_breakpointReached", void 0);
+__decorate([
+    consume({ context: MainnavExpandedContext, subscribe: true }),
+    state()
+], SgdsMainnavDropdown.prototype, "expanded", void 0);
 __decorate([
     query(".nav-link")
 ], SgdsMainnavDropdown.prototype, "navLink", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-dropdown.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n  static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-dropdown\": SgdsDropdown,\n    \"sgds-dropdown-item\": SgdsDropdownItem,\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @consume({ context: MainnavContext, subscribe: true })\n  @state()\n  private _breakpointReached: boolean;\n\n  /** @internal */\n  @query(\".nav-link\") navLink: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n  /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  private togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean })\n  active = false;\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsDropdownItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsDropdownItem[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener(\"close-dropdown-menu\", () => {\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Clean up the event listener when the element is removed from the DOM\n    document.removeEventListener(\"close-dropdown-menu\", () => {\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    });\n  }\n\n  protected willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n\n    if (!this.shadowRoot) {\n      return;\n    }\n\n    if (this._breakpointReached) {\n      this.shadowRoot.adoptedStyleSheets = [dropdownMenuStyle.styleSheet, mainnavDropdownStyle.styleSheet];\n    }\n  }\n\n  updated() {\n    if (this._breakpointReached) {\n      this._copyTextToMenu();\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    }\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n    items.forEach(item => {\n      item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.add(\"nav-link\");\n\n      const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n      link.tabIndex = -1;\n      if (dropdownItem.classList.contains(\"disabled\")) {\n        link.setAttribute(\"href\", \"javascript:void(0)\");\n        link.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        link.addEventListener(\"click\", () => {\n          this.emit(\"sgds-mainnav-close\");\n        });\n      }\n    });\n  }\n\n  private _handleDesktopSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.remove(\"nav-link\");\n\n      const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n        flatten: true\n      });\n      slottedItem.forEach(item => {\n        if (dropdownItem.classList.contains(\"disabled\")) {\n          item.setAttribute(\"href\", \"javascript:void(0)\");\n          item.setAttribute(\"tabindex\", \"-1\");\n        }\n      });\n    });\n  }\n\n  private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (!this._breakpointReached) {\n      return;\n    }\n\n    const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n    const items = [this.menuHeaderButton, ...slottedItems];\n    const itemLength = items.length;\n    if (itemLength === 0) {\n      return;\n    }\n\n    const firstItem = items[0];\n    const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n    let activeElement = document.activeElement as HTMLElement;\n    if (activeElement === this) {\n      activeElement = this.shadowRoot.activeElement as HTMLElement;\n    }\n\n    switch (e.key) {\n      case \"Tab\": {\n        if (e.shiftKey) {\n          if (activeElement === firstItem) {\n            e.preventDefault();\n            setTimeout(() => {\n              lastItem.focus();\n            }, 0);\n          }\n        } else {\n          const activeShadowElement = activeElement.shadowRoot\n            ? activeElement.shadowRoot.querySelector(\".dropdown-item\")\n            : null;\n          if (activeShadowElement && activeShadowElement === lastItem) {\n            e.preventDefault();\n            firstItem.focus();\n          }\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _copyTextToMenu() {\n    this.menuHeaderText.innerHTML = this.togglerNodes[0].innerHTML;\n  }\n\n  private _hideDropdownMenuItems() {\n    this.dropdownItems.style.display = \"none\";\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  private _resetDropdownMenu() {\n    const navbarBody = this._getNavbarBody();\n    if (navbarBody) {\n      navbarBody.style.removeProperty(\"transform\");\n    }\n  }\n\n  private _handleKeyboardOpen(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (event.key === ENTER || event.key === SPACE) {\n      event.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  private _getNavbarBody() {\n    const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n    if (!mainNav?.shadowRoot) {\n      console.warn(\"sgds-mainnav or its shadowRoot not found\");\n      return;\n    }\n\n    const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n    if (!navbarBody) {\n      console.warn(\".navbar-body not found in sgds-mainnav\");\n      return;\n    }\n\n    return navbarBody;\n  }\n\n  private _openMenu() {\n    const navbarBody = this._getNavbarBody();\n    navbarBody.style.transform = \"translateX(-100%)\";\n    this.dropdownItems.style.removeProperty(\"display\");\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n    setTimeout(() => {\n      this.menuHeaderButton.focus();\n    }, 50);\n  }\n\n  private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n    switch (event.key) {\n      case TAB: {\n        this._handleKeyboardMenuItemsEvent(event);\n        break;\n      }\n      case ENTER:\n      case SPACE: {\n        event.preventDefault();\n        this._closeMenu();\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _closeMenu() {\n    // 200ms delay as the transform transition is set to this timing\n    this._resetDropdownMenu();\n    setTimeout(() => {\n      this._hideDropdownMenuItems();\n      this.navLink.focus();\n    }, 200);\n  }\n\n  render() {\n    const mobileView = html`\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        @click=${this._openMenu}\n        @keydown=${this._handleKeyboardOpen}\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-right\"></sgds-icon>\n      </a>\n      <div class=\"dropdown-items\">\n        <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n          <sgds-icon name=\"chevron-left\"></sgds-icon>\n          <span></span>\n        </a>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n\n    const desktopView = html`<sgds-dropdown\n      .modifierOpt=${[\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 0]\n          }\n        }\n      ]}\n      ?disabled=${this.disabled}\n    >\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        id=${this.togglerId}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        slot=\"toggler\"\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-down\"></sgds-icon>\n      </a>\n      <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n    </sgds-dropdown>`;\n\n    return this._breakpointReached ? mobileView : desktopView;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["dropdownMenuStyle","mainnavDropdownStyle","dropdownStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav-dropdown.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-dropdown.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { consume } from \"@lit/context\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport genId from \"../../utils/generateId\";\nimport dropdownStyle from \"../Dropdown/dropdown.css\";\nimport dropdownMenuStyle from \"../Dropdown/dropdown-menu.css\";\nimport mainnavDropdownStyle from \"./mainnav-dropdown.css\";\nimport SgdsDropdown from \"../Dropdown/sgds-dropdown\";\nimport SgdsDropdownItem from \"../Dropdown/sgds-dropdown-item\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport SgdsElement from \"../../base/sgds-element\";\n\nconst TAB = \"Tab\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @slot default - The menu items. Pass in sgds-dropdown-item as the menu items\n * @slot toggler - The content of the toggler to pass in html content.\n */\nexport class SgdsMainnavDropdown extends SgdsElement {\n  static styles = [...SgdsElement.styles, dropdownStyle, dropdownMenuStyle, mainnavDropdownStyle];\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  @consume({ context: MainnavExpandedContext, subscribe: true })\n  @state()\n  private expanded: boolean;\n\n  /** @internal */\n  @query(\".nav-link\") navLink: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items\") dropdownItems: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items a\") menuHeaderButton: HTMLElement;\n\n  /** @internal */\n  @query(\".dropdown-items span\") menuHeaderText: HTMLElement;\n\n  /** @internal Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default */\n  private togglerId: string = genId(\"dropdown\", \"button\");\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean })\n  active = false;\n\n  /** When true,  applies active styles on the dropdown button */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** @internal */\n  @queryAssignedElements({ slot: \"toggler\" }) private togglerNodes!: HTMLElement[];\n\n  /** @internal */\n  @queryAssignedElements() private defaultNodes!: SgdsDropdownItem[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsDropdownItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsDropdownItem[];\n  }\n\n  updated() {\n    if (this._breakpointReached) {\n      this._copyTextToMenu();\n      this._resetDropdownMenu();\n      this._hideDropdownMenuItems();\n    }\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n    items.forEach(item => {\n      item.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent.bind(this));\n\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.add(\"nav-link\");\n\n      const link = item.shadowRoot?.querySelector(\"a\") || item.querySelector(\"a\");\n      link.tabIndex = -1;\n      if (dropdownItem.classList.contains(\"disabled\")) {\n        link.setAttribute(\"href\", \"javascript:void(0)\");\n        link.setAttribute(\"tabindex\", \"-1\");\n      } else {\n        link.addEventListener(\"click\", (e: Event) => {\n          const target = e.target as HTMLElement;\n          const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n          mainnav.hide();\n        });\n      }\n    });\n  }\n\n  private _handleDesktopSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as SgdsDropdownItem[];\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n      dropdownItem.classList.remove(\"nav-link\");\n\n      const slottedItem = (item.shadowRoot.querySelector(\".dropdown-item slot\") as HTMLSlotElement).assignedElements({\n        flatten: true\n      });\n      slottedItem.forEach(item => {\n        if (dropdownItem.classList.contains(\"disabled\")) {\n          item.setAttribute(\"href\", \"javascript:void(0)\");\n          item.setAttribute(\"tabindex\", \"-1\");\n        }\n      });\n    });\n  }\n\n  private _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (!this._breakpointReached) {\n      return;\n    }\n\n    const slottedItems = this.defaultSlotItems.filter(item => !item.hasAttribute(\"disabled\"));\n    const items = [this.menuHeaderButton, ...slottedItems];\n    const itemLength = items.length;\n    if (itemLength === 0) {\n      return;\n    }\n\n    const firstItem = items[0];\n    const lastItem = items[itemLength - 1].shadowRoot.querySelector(\".dropdown-item\") as HTMLElement;\n    let activeElement = document.activeElement as HTMLElement;\n    if (activeElement === this) {\n      activeElement = this.shadowRoot.activeElement as HTMLElement;\n    }\n\n    switch (e.key) {\n      case \"Tab\": {\n        if (e.shiftKey) {\n          if (activeElement === firstItem) {\n            e.preventDefault();\n            setTimeout(() => {\n              lastItem.focus();\n            }, 0);\n          }\n        } else {\n          const activeShadowElement = activeElement.shadowRoot\n            ? activeElement.shadowRoot.querySelector(\".dropdown-item\")\n            : null;\n          if (activeShadowElement && activeShadowElement === lastItem) {\n            e.preventDefault();\n            firstItem.focus();\n          }\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _copyTextToMenu() {\n    this.menuHeaderText.innerHTML = this.togglerNodes[0].innerHTML;\n  }\n\n  private _hideDropdownMenuItems() {\n    this.dropdownItems.style.display = \"none\";\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"true\");\n  }\n\n  private _resetDropdownMenu() {\n    const navbarBody = this._getNavbarBody();\n    if (navbarBody) {\n      navbarBody.style.removeProperty(\"transform\");\n    }\n  }\n\n  private _handleKeyboardOpen(event: KeyboardEvent) {\n    if (this.disabled) {\n      return;\n    }\n\n    if (event.key === ENTER || event.key === SPACE) {\n      event.preventDefault();\n      this._openMenu();\n    }\n  }\n\n  private _getNavbarBody() {\n    const mainNav = document.querySelector(\"sgds-mainnav\") as HTMLElement | null;\n\n    if (!mainNav?.shadowRoot) {\n      console.warn(\"sgds-mainnav or its shadowRoot not found\");\n      return;\n    }\n\n    const navbarBody = mainNav.shadowRoot.querySelector(\".navbar-body\") as HTMLElement;\n    if (!navbarBody) {\n      console.warn(\".navbar-body not found in sgds-mainnav\");\n      return;\n    }\n\n    return navbarBody;\n  }\n\n  private _openMenu() {\n    const navbarBody = this._getNavbarBody();\n    navbarBody.style.transform = \"translateX(-100%)\";\n    this.dropdownItems.style.removeProperty(\"display\");\n    this.dropdownItems.setAttribute(\"aria-hidden\", \"false\");\n    setTimeout(() => {\n      this.menuHeaderButton.focus();\n    }, 50);\n  }\n\n  private _handleHeaderKeyboardEvent(event: KeyboardEvent) {\n    switch (event.key) {\n      case TAB: {\n        this._handleKeyboardMenuItemsEvent(event);\n        break;\n      }\n      case ENTER:\n      case SPACE: {\n        event.preventDefault();\n        this._closeMenu();\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _closeMenu() {\n    this._resetDropdownMenu();\n    this._hideDropdownMenuItems();\n    this.navLink.focus();\n  }\n\n  render() {\n    const mobileView = html`\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        @click=${this._openMenu}\n        @keydown=${this._handleKeyboardOpen}\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-right\"></sgds-icon>\n      </a>\n      <div class=\"dropdown-items\">\n        <a tabindex=\"0\" role=\"button\" @click=${this._closeMenu} @keydown=${this._handleHeaderKeyboardEvent}>\n          <sgds-icon name=\"chevron-left\"></sgds-icon>\n          <span></span>\n        </a>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n      </div>\n    `;\n\n    const desktopView = html`<sgds-dropdown\n      .modifierOpt=${[\n        {\n          name: \"offset\",\n          options: {\n            offset: [0, 0]\n          }\n        }\n      ]}\n      ?disabled=${this.disabled}\n    >\n      <a\n        class=\"${classMap({\n          \"nav-link\": true,\n          active: this.active,\n          disabled: this.disabled\n        })}\"\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n        id=${this.togglerId}\n        tabindex=${this.disabled ? \"-1\" : \"0\"}\n        role=\"button\"\n        slot=\"toggler\"\n      >\n        <slot name=\"toggler\"></slot>\n        <sgds-icon name=\"chevron-down\"></sgds-icon>\n      </a>\n      <slot @slotchange=${this._handleDesktopSlotChange}></slot>\n    </sgds-dropdown>`;\n\n    return this._breakpointReached ? mobileView : desktopView;\n  }\n}\n\nexport default SgdsMainnavDropdown;\n"],"names":["dropdownStyle","dropdownMenuStyle","mainnavDropdownStyle"],"mappings":"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"}

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

@@ -53,8 +53,10 @@ class SgdsMainnavItem extends sgdsElement["default"] {
                 anchor.setAttribute("tabindex", "-1");
                 return;
             }
-            anchor.addEventListener("click", () => {
-                this.emit("sgds-mainnav-close");
+            anchor.addEventListener("click", (e) => {
+                const target = e.target;
+                const mainnav = target.closest("sgds-mainnav");
+                mainnav.hide();
             });
         }
     }

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav-item.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", () => {\n        this.emit(\"sgds-mainnav-close\");\n      });\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"names":["SgdsElement","html","mainnavItemStyle","__decorate","property","watch"],"mappings":";;;;;;;;;;;;AAMA;;;AAGM;AACA,MAAO,eAAgB,SAAQA,sBAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;;QAKE,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;;QAIf,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;KAoDlB;IAjDC,eAAe,GAAA;QACb,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,CAAG,EAAA,IAAI,CAAC,QAAQ,CAAE,CAAA,CAAC,CAAC;KACxD;AAEO,IAAA,iBAAiB,CAAC,CAAQ,EAAA;AAChC,QAAA,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAC;AACzC,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAClE,QAAA,MAAM,WAAW,GAAG,gBAAgB,CAAC,MAAM,CACzC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,WAAW,CACzF,CAAC;AAEF,QAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;AAC1B,YAAA,OAAO,CAAC,KAAK,CAAC,wDAAwD,CAAC,CAAC;YACxE,OAAO;SACR;AAED,QAAA,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;AAC5B,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AACpD,YAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;gBACnB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE;oBACpC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAC9C,oBAAA,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;oBACzC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;iBAC/C;AACH,aAAC,CAAC,CAAC;SACJ;AAED,QAAA,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;AAC5B,YAAA,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAsB,CAAC;AAEnD,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,gBAAA,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;aAC7C;AAED,YAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,gBAAA,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;AAClD,gBAAA,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;gBACtC,OAAO;aACR;AAED,YAAA,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAK;AACpC,gBAAA,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;AAClC,aAAC,CAAC,CAAC;SACJ;KACF;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA,kBAAA,EAAqB,IAAI,CAAC,iBAAiB,UAAU,CAAC;KAClE;;AA3DM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGD,sBAAW,CAAC,MAAM,EAAEE,sBAAgB,CAA3C,CAA6C;AAI1DC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIfD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGjBD,gBAAA,CAAA;IADCE,WAAK,CAAC,UAAU,CAAC;AAGjB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,IAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-mainnav-item.cjs.js","sources":["../../../../src/components/Mainnav/sgds-mainnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { SgdsMainnav } from \"./sgds-mainnav\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport mainnavItemStyle from \"./mainnav-item.css\";\n\n/**\n * @slot default - slot for SgdsMainnavItem element.\n *\n *  */\nexport class SgdsMainnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, mainnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-mainnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n        return;\n      }\n\n      anchor.addEventListener(\"click\", (e: Event) => {\n        const target = e.target as HTMLElement;\n        const mainnav = target.closest(\"sgds-mainnav\") as SgdsMainnav;\n        mainnav.hide();\n      });\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsMainnavItem;\n"],"names":["SgdsElement","html","mainnavItemStyle","__decorate","property","watch"],"mappings":"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"}

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

@@ -49,8 +49,10 @@ class SgdsMainnavItem extends SgdsElement {
                 anchor.setAttribute("tabindex", "-1");
                 return;
             }
-            anchor.addEventListener("click", () => {
-                this.emit("sgds-mainnav-close");
+            anchor.addEventListener("click", (e) => {
+                const target = e.target;
+                const mainnav = target.closest("sgds-mainnav");
+                mainnav.hide();
             });
         }
     }