@dubai-design-system/components-js 3.11.6 → 3.11.8

package/dist/collection/components/dda-header-menu/dda-header-menu.css

@@ -1,124 +1,148 @@
 .dda-mega-menu {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-    align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
 }
-.dda-mega-menu>li{
-    position: relative;
+.dda-mega-menu > li {
+  position: relative;
 }
-.dda-mega-menu>li>a {
-    display: block;
-    font-size: var(--font-body);
-    font-weight: var(--font-weight-regular);
-    color: var(--dda-on-surface-0);
-    padding: 20px 16px;
-    position: relative;
+.dda-mega-menu > li > a {
+  display: block;
+  font-size: var(--font-body);
+  font-weight: var(--font-weight-regular);
+  color: var(--dda-on-surface-0);
+  padding: 20px 16px;
+  position: relative;
 }
 
-.dda-mega-menu>li:hover>a,
-.dda-mega-menu>li>a.active {
-    color: var(--dda-color-primary-40);
+.dda-mega-menu > li:hover > a,
+.dda-mega-menu > li > a.active {
+  color: var(--dda-color-primary-40);
 }
 
-body.transparent .dda-mega-menu>li>a {
-    color: var(--dda-neutral-100);
+body.transparent .dda-mega-menu > li > a {
+  color: var(--dda-neutral-100);
 }
 
-.dda-mega-menu>li>a::after {
-    content: "";
-    position: absolute;
-    bottom: 0;
-    left: 50%;
-    width: 0;
-    height: 4px;
-    background-color: var(--dda-color-primary-40);
-    border-radius: 8px 8px 0px 0px;
-    transform: translateX(-50%);
-    /* transition: all 0.25s ease-in-out; */
+.dda-mega-menu > li > a::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 4px;
+  background-color: var(--dda-color-primary-40);
+  border-radius: 8px 8px 0px 0px;
+  transform: translateX(-50%);
+  /* transition: all 0.25s ease-in-out; */
 }
 
-body.transparent .dda-mega-menu>li>a::after {
-    background-color: var(--dda-neutral-100);
+body.transparent .dda-mega-menu > li > a::after {
+  background-color: var(--dda-neutral-100);
 }
 
-.dda-mega-menu>li:hover>a::after,
-.dda-mega-menu>li>a:focus-visible:after,
-.dda-mega-menu>li>a.active::after {
-    width: calc(100% - 32px);
+.dda-mega-menu > li:hover > a::after,
+.dda-mega-menu > li > a:focus-visible:after,
+.dda-mega-menu > li > a.active::after {
+  width: calc(100% - 32px);
 }
 /********************************/
-.dda-header-menu li{
-    list-style: none;
+.dda-header-menu li {
+  list-style: none;
 }
-.dda-header-menu li::marker{
-    display: none;
+.dda-header-menu li::marker {
+  display: none;
 }
-.dda-default-submenu{
-    display: none;
-    min-width: 300px;
-    position: absolute;
-    top: 100%;
-    inset-inline-start: 0;
-    padding-top: 5px;
+.dda-default-submenu {
+  display: none;
+  min-width: 350px;
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 0;
+  padding-top: 5px;
+}
+
+.dda-default-submenu ul {
+  max-height: 325px;
+  overflow: visible;
+  overflow-x: visible;
+  overflow-y: auto;
+}
+
+.dda-default-submenu ul::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dda-default-submenu ul::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.dda-default-submenu ul::-webkit-scrollbar-thumb {
+    background: var(--dda-on-primary-98);
+}
+
+.dda-default-submenu:hover ul::-webkit-scrollbar-thumb {
+    background: var(--dda-on-primary-98);
 }
 
 .dda-default-submenu a,
-.dda-default-submenu .dda-submenu-title{
-    position: relative;
-    font-size: var(--font-body);
-    font-weight: var(--font-weight-regular);
-}
-
-.dda-default-submenu a.has-submenu::after{
-    content: "";
-    width: 6px;
-    height: 6px;
-    border-right: solid 1px var(--dda-color-primary-40);
-    border-bottom: solid 1px var(--dda-color-primary-40);
-    position: absolute;
-    top: 50%;
-    inset-inline-end: 9px;
-    margin-top: -4.5px;
-    transform: rotate(-45deg);
-}
-:root[dir='rtl'] .dda-default-submenu a.has-submenu::after{
-    transform: rotate(135deg);
-}
-
-.dda-default-submenu span{
-    display: block;
-    border-bottom: solid 1px #ddd;
-    padding: 5px 8px 10px 8px;
-    margin-bottom: 5px;
-}
-
-.dda-default-submenu > ul{
-    width: 100%;
-    background-color: var(--dda-surface-100);
-    border-radius: 5px;
-    padding: 10px !important;
-    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
-}
-
-.dda-default-submenu ul li{
-    list-style: none;
-    position: relative;
-    margin-bottom: 1px;
-}
-.dda-default-submenu ul li a{
-    font-size: var(--font-body);
-    font-weight: var(--font-weight-regular);
-    color: var(--dda-on-surface-0);
-    display: block;
-    padding: 10px 7px;
-    border-radius: 8px;
+.dda-default-submenu .dda-submenu-title {
+  position: relative;
+  font-size: var(--font-body);
+  font-weight: var(--font-weight-regular);
+}
+
+.dda-default-submenu a.has-submenu::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-right: solid 1px var(--dda-color-primary-40);
+  border-bottom: solid 1px var(--dda-color-primary-40);
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 9px;
+  margin-top: -4.5px;
+  transform: rotate(-45deg);
+}
+:root[dir='rtl'] .dda-default-submenu a.has-submenu::after {
+  transform: rotate(135deg);
+}
+
+.dda-default-submenu span {
+  display: block;
+  border-bottom: solid 1px #ddd;
+  padding: 5px 8px 10px 8px;
+  margin-bottom: 5px;
+}
+
+.dda-default-submenu > ul {
+  width: 100%;
+  max-width: 350px;
+  background-color: var(--dda-surface-100);
+  border-radius: 5px;
+  padding: 10px !important;
+  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
+}
+
+.dda-default-submenu ul li {
+  list-style: none;
+  position: relative;
+  margin-bottom: 1px;
+}
+.dda-default-submenu ul li a {
+  font-size: var(--font-body);
+  font-weight: var(--font-weight-regular);
+  color: var(--dda-on-surface-0);
+  display: block;
+  padding: 10px 7px;
+  border-radius: 8px;
 }
 .dda-default-submenu ul li:hover > a,
-.dda-default-submenu ul li a.active{
-    background-color: var(--dda-on-primary-98);
-    color: var(--dda-on-primary-variant-40);
+.dda-default-submenu ul li a.active {
+  background-color: var(--dda-on-primary-98);
+  color: var(--dda-on-primary-variant-40);
 }
 
 .dda-default-subsubmenu {
@@ -131,121 +155,141 @@ body.transparent .dda-mega-menu>li>a::after {
 }
 .dda-default-subsubmenu.is-visible {
   display: block;
+  padding: 0px 5px;
 }
-.dda-default-subsubmenu .dda-default-subsubmenu-content{
-    width: 100%;
-    background-color: var(--dda-surface-100);
-    border-radius: 5px;
-    padding: 10px !important;
-    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
+.dda-default-subsubmenu .dda-default-subsubmenu-content {
+  max-width: 100%;
+  background-color: var(--dda-surface-100);
+  border-radius: 5px;
+  padding: 10px !important;
+  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.13);
+  position: fixed;
+  width: 350px;
 }
-.dda-default-subsubmenu-content ol{
-    padding: 0px;
+.dda-default-subsubmenu-content ol {
+  padding: 0px;
 }
 
-.dda-main-megamenu{
-    display: none;
-    width: 100%;
-    position: fixed;
-    inset-inline-start: 0;
-}
-.dda-megamenu-wrap{
-    width: 90vw;
-    margin: 0 auto;
-    padding-top: 5px;
-}
-.dda-megamenu-content{
-    min-height: 350px;
-    background: var(--dda-surface-100);
-    border-radius: 8px;
-    margin: 0 auto;
-    padding: 42px 15px;
-    box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
-    position: relative;
-}
-.dda-mega-menu >  li:hover .dda-default-submenu,
-.dda-mega-menu >  li:hover .dda-main-megamenu,
-.dda-default-submenu.is-visible,
-.dda-main-megamenu.is-visible{
-    display: block;
+.dda-main-megamenu {
+  display: none;
+  width: 100%;
+  position: fixed;
+  inset-inline-start: 0;
+}
+.dda-megamenu-wrap {
+  width: 90vw;
+  margin: 0 auto;
+  padding-top: 5px;
+}
+.dda-megamenu-content {
+  height: 300px;
+  overflow-x: visible;
+  overflow-y: auto;
+  background: var(--dda-surface-100);
+  border-radius: 8px;
+  margin: 0 auto;
+  padding: 42px 15px;
+  box-shadow: 0px 10px 15px -3px rgba(16, 24, 40, 0.1);
+  position: relative;
 }
-.dda-megamenu-content ol{
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    padding: 0 !important;
+
+.dda-megamenu-content::-webkit-scrollbar {
+  width: 6px;
 }
-.dda-megamenu-content .megamemu-sub-title{
-    font-size: var(--font-h6);
-    font-weight: var(--font-weight-regular);
-    padding: 8px 0 8px 55px;
+
+.dda-megamenu-content::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-.dda-megamenu-content .dda-mega-menu-link {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    padding: 10px 16px;
-    background: var(--dda-surface-100);
-    color: var(--dda-on-surface-0);
-    border-radius: 8px;
-    /* transition: all 500ms ease; */
+.dda-megamenu-content::-webkit-scrollbar-thumb {
+    background: var(--dda-on-primary-98);
 }
-.dda-megamenu-content .dda-mega-menu-link:hover{
-    background-color: var(--dda-on-primary-98);
+
+.dda-megamenu-content::-webkit-scrollbar-thumb:hover {
+    background: var(--dda-on-primary-98);
 }
-.dda-mega-menu-link{
-    display: block;
+.dda-mega-menu > li:hover .dda-default-submenu,
+.dda-mega-menu > li:hover .dda-main-megamenu,
+.dda-default-submenu.is-visible,
+.dda-main-megamenu.is-visible {
+  display: block;
+}
+.dda-megamenu-content ol {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 !important;
+}
+.dda-megamenu-content .megamemu-sub-title {
+  font-size: var(--font-h6);
+  font-weight: var(--font-weight-regular);
+  padding: 8px 15px 8px 15px;
+}
+
+.dda-megamenu-content .dda-mega-menu-link {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  padding: 10px 16px;
+  background: var(--dda-surface-100);
+  color: var(--dda-on-surface-0);
+  border-radius: 8px;
+  /* transition: all 500ms ease; */
+}
+.dda-megamenu-content .dda-mega-menu-link:hover {
+  background-color: var(--dda-on-primary-98);
+}
+.dda-mega-menu-link {
+  display: block;
 }
 
 .dda-mega-menu-link .dda-mega-menu-icon {
-    width: 40px;
-    height: 40px;
-    background: var(--dda-on-primary-94);
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-	color: var(--dda-color-primary-40);
+  width: 40px;
+  height: 40px;
+  background: var(--dda-on-primary-94);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--dda-color-primary-40);
 }
 
 .dda-mega-menu-link .text-wrap {
-    display: flex;
-     flex: 1;
-    flex-direction: column;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
 }
 
 .dda-mega-menu-link .dda-mega-menu-text {
-    display: block;
-    font-size: var(--font-body);
-    font-weight: var(--font-weight-regular);
+  display: block;
+  font-size: var(--font-body);
+  font-weight: var(--font-weight-regular);
 }
 
 .dda-mega-menu-link .dda-mega-menu-desc {
-    font-size: var(--font-caption);
-    font-weight: var(--font-weight-regular);
-    color: var(--dda-on-surface-variant-30);
-    max-height: 40px;
-    overflow: hidden;
+  font-size: var(--font-caption);
+  font-weight: var(--font-weight-regular);
+  color: var(--dda-on-surface-variant-30);
+  max-height: 40px;
+  overflow: hidden;
 }
-.dda-mega-menu  a:focus-visible{
-    outline: solid 2px var(--dda-primary-variant-87) !important;
-    outline-offset: 0px;
+.dda-mega-menu a:focus-visible {
+  outline: solid 2px var(--dda-primary-variant-87) !important;
+  outline-offset: 0px;
 }
 
 @media (max-width: 1024px) {
-    .dda-mega-menu {
-        display: none;
-    }
+  .dda-mega-menu {
+    display: none;
+  }
 }
 
 @media (prefers-reduced-motion: no-preference) {
-    .dda-mega-menu>li>a::after {
-        transition: all 0.25s ease-in-out;
-    }
-    .dda-megamenu-content .dda-mega-menu-link {
-        transition: all 500ms ease;
-    }
-    
-}
+  .dda-mega-menu > li > a::after {
+    transition: all 0.25s ease-in-out;
+  }
+  .dda-megamenu-content .dda-mega-menu-link {
+    transition: all 500ms ease;
+  }
+}

package/dist/collection/components/dda-header-menu/dda-header-menu.js

@@ -85,10 +85,10 @@ export class DdaHeaderMenu {
                 'is-visible': isOpen,
             }, id: submenuId, "aria-label": `${headerMenuLabel} Mega Menu` }, h("div", { class: "dda-megamenu-wrap" }, h("div", { class: "dda-megamenu-content" }, h("div", { class: "dda-row" }, children.map((col, colIndex) => (h("div", { class: "dda-col-md-3", key: `col-${colIndex}` }, col.title && h("h6", { "aria-label": `${col.title} section`, class: "megamemu-sub-title" }, col.title), h("ul", null, col.items.map((item, itemIndex) => (h("li", { key: `item-${itemIndex}` }, h("a", { class: "dda-mega-menu-link",
             // href={item.url}
-            href: this.useNavigator == "true" ? 'javascript:void(0)' : item.url, onClick: () => this.useNavigator == "true" ? this.navigatorClick.emit(item.url) : "" }, h("span", { class: "dda-mega-menu-icon", "aria-hidden": "true" }, h("i", { class: "material-icons material-symbols-outlined" }, "sentiment_satisfied")), h("span", { class: "text-wrap" }, h("span", { class: "dda-mega-menu-text" }, item.headerMenuLabel), item.description && (h("span", { class: "dda-mega-menu-desc" }, item.description))))))))))))))));
+            href: this.useNavigator == "true" ? 'javascript:void(0)' : item.url, onClick: () => this.useNavigator == "true" ? this.navigatorClick.emit(item.url) : "" }, this.showQuickLinksIcon ? (h("span", { class: "dda-mega-menu-icon", "aria-hidden": "true" }, h("i", { class: "material-icons material-symbols-outlined" }, item.quickLinksIcon ? item.quickLinksIcon : "sentiment_satisfied"))) : "", h("span", { class: "text-wrap" }, h("span", { class: "dda-mega-menu-text" }, item.headerMenuLabel), item.description && (h("span", { class: "dda-mega-menu-desc" }, item.description))))))))))))))));
     }
     render() {
-        return (h(Host, { key: '99c421ebe442538d7051fdf798510415038e25e6' }, h("nav", { key: '1e7895db32ea9a3f0a03a85b0af3cd61d7c0afff', "aria-label": "Main navigation", class: "dda-header-menu" }, h("ul", { key: 'c21de7d311cebc23f6c78c531ed7b08cb057f8e0', class: "dda-mega-menu" }, this.parsedMenuItems.map((item, index) => {
+        return (h(Host, { key: '29e85895138a63049930f62c93c2a15aab22c0cf' }, h("nav", { key: 'd48d5f933456c1c3d030bfb14aa6033b38afd895', "aria-label": "Main navigation", class: "dda-header-menu" }, h("ul", { key: '9cd8056b970d196de3ca1dc58db8dbf34f009033', class: "dda-mega-menu" }, this.parsedMenuItems.map((item, index) => {
             const isOpen = this.openIndex === index;
             const hasSubmenu = item.children && item.children.length > 0;
             const submenuId = `submenu-${index}`;
@@ -114,6 +114,25 @@ export class DdaHeaderMenu {
     }
     static get properties() {
         return {
+            "showQuickLinksIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-quick-links-icon",
+                "reflect": false
+            },
             "useNavigator": {
                 "type": "string",
                 "mutable": false,
@@ -138,8 +157,8 @@ export class DdaHeaderMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | Array<{\r\n    headerMenuLabel: string;\r\n    headerMenuId: string;\r\n    description: string;\r\n    url: string;\r\n    type?: 'dda_default_submenu' | 'dda_main_megamenu';\r\n    children?: any;\r\n  }>",
-                    "resolved": "string | { headerMenuLabel: string; headerMenuId: string; description: string; url: string; type?: \"dda_default_submenu\" | \"dda_main_megamenu\"; children?: any; }[]",
+                    "original": "string | Array<{\r\n    headerMenuLabel: string;\r\n    headerMenuId: string;\r\n    description: string;\r\n    url: string;\r\n    quickLinksIcon: string;\r\n    type?: 'dda_default_submenu' | 'dda_main_megamenu';\r\n    children?: any;\r\n}>",
+                    "resolved": "string | { headerMenuLabel: string; headerMenuId: string; description: string; url: string; quickLinksIcon: string; type?: \"dda_default_submenu\" | \"dda_main_megamenu\"; children?: any; }[]",
                     "references": {
                         "Array": {
                             "location": "global",

package/dist/collection/components/dda-header-menu/dda-header-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dda-header-menu.js","sourceRoot":"","sources":["../../../src/components/dda-header-menu/dda-header-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Listen, EventEmitter, Event } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-header-menu',\r\n  styleUrls: ['dda-header-menu.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaHeaderMenu {\r\n  @Element() el: HTMLElement;\r\n  \r\n  @Event() navigatorClick?: EventEmitter<string>;\r\n  @Prop() useNavigator: 'true' | 'false' = 'false';\r\n  @Prop() quickLinks: string | Array<{\r\n    headerMenuLabel: string;\r\n    headerMenuId: string;\r\n    description: string;\r\n    url: string;\r\n    type?: 'dda_default_submenu' | 'dda_main_megamenu';\r\n    children?: any;\r\n  }> = [];\r\n\r\n  @State() openIndex: number | null = null;\r\n  @State() openSubIndex: number | null = null;\r\n\r\n  get parsedMenuItems() {\r\n    if (typeof this.quickLinks === 'string') {\r\n      try {\r\n        return JSON.parse(this.quickLinks);\r\n      } catch {\r\n        console.warn('Invalid JSON in quickLinks');\r\n        return [];\r\n      }\r\n    }\r\n    return this.quickLinks;\r\n  }\r\n\r\n  handleToggle(index: number, hasSubmenu: boolean, event: Event, item: any) {\r\n    if (hasSubmenu) {\r\n      event.preventDefault();\r\n      this.openIndex = this.openIndex === index ? null : index;\r\n      this.openSubIndex = null;\r\n    }else{\r\n      if(this.useNavigator == \"true\"){\r\n\r\n        this.navigatorClick.emit(item.url)\r\n      }\r\n    }\r\n  }\r\n\r\n  handleClickOutside = (event: MouseEvent) => {\r\n    const target = event.target as HTMLElement;\r\n    if (!this.el.contains(target)) {\r\n      this.openIndex = null;\r\n      this.openSubIndex = null;\r\n    }\r\n  };\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeydown(event: KeyboardEvent) {\r\n    if (event.key === 'Escape') {\r\n      this.openIndex = null;\r\n      this.openSubIndex = null;\r\n    }\r\n  }\r\n\r\n  renderDefaultSubmenu(children, isOpen, submenuId, headerMenuLabel) {\r\n    return (\r\n      <div\r\n        class={{\r\n          'dda-default-submenu': true,\r\n          'is-visible': isOpen,\r\n        }}\r\n        id={submenuId}\r\n        aria-label={`${headerMenuLabel} Submenu`}\r\n      >\r\n        <ul>\r\n          {children.map((item, subIndex) => {\r\n            const hasSubSubmenu = item.children && item.children.length > 0;\r\n            const subSubmenuId = `subsubmenu-${submenuId}-${subIndex}`;\r\n            const isSubOpen = this.openSubIndex === subIndex;\r\n\r\n            return (\r\n              <li>\r\n                \r\n\r\n                <a\r\n                  href={this.useNavigator == \"true\" ? 'javascript:void(0)' : item.url}\r\n                  id={item.headerMenuId}\r\n                  aria-haspopup={hasSubSubmenu ? 'true' : undefined}\r\n                  aria-expanded={hasSubSubmenu ? String(isSubOpen) : undefined}\r\n                  aria-controls={hasSubSubmenu ? subSubmenuId : undefined}\r\n                  class={{\r\n                    'has-submenu': hasSubSubmenu,\r\n                    'active': isSubOpen,\r\n                  }}\r\n                  onClick={e => {\r\n                    if (hasSubSubmenu) {\r\n                      e.preventDefault();\r\n                      this.openSubIndex = this.openSubIndex === subIndex ? null : subIndex;\r\n                    }else{\r\n                      if(this.useNavigator == \"true\"){\r\n\r\n                        this.navigatorClick.emit(item.url)\r\n                      }\r\n                    }\r\n                  }}\r\n                >\r\n                  {item.headerMenuLabel}\r\n                </a>\r\n\r\n                {hasSubSubmenu && (\r\n                  <div\r\n                    class={{\r\n                      'dda-default-subsubmenu': true,\r\n                      'is-visible': isSubOpen,\r\n                    }}\r\n                    id={subSubmenuId}\r\n                    aria-label={`${item.headerMenuLabel} Sub Submenu`}\r\n                  >\r\n                    <div class=\"dda-default-subsubmenu-content\">\r\n                      <span class=\"dda-submenu-title\">{item.defaultSubMenuTitle || item.headerMenuLabel}</span>\r\n                      <ul>\r\n                        {item.children.map((subItem, subItemIndex) => (\r\n                          <li>\r\n                            <a\r\n                              // href={subItem.url}\r\n                              href={this.useNavigator == \"true\" ? 'javascript:void(0)' : subItem.url}\r\n                              id={`${subSubmenuId}-${subItemIndex}`}\r\n                              onClick={() => this.useNavigator == \"true\" ? this.navigatorClick.emit(subItem.url) : \"\"}\r\n                            >\r\n                              {subItem.headerMenuLabel}\r\n                            </a>\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                    </div>\r\n                  </div>\r\n                )}\r\n              </li>\r\n            );\r\n          })}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderMegaMenu(children, isOpen, submenuId, headerMenuLabel) {\r\n    return (\r\n      <div\r\n        class={{\r\n          'dda-main-megamenu': true,\r\n          'is-visible': isOpen,\r\n        }}\r\n        id={submenuId}\r\n        aria-label={`${headerMenuLabel} Mega Menu`}\r\n      >\r\n        <div class=\"dda-megamenu-wrap\">\r\n          <div class=\"dda-megamenu-content\">\r\n            <div class=\"dda-row\">\r\n              {children.map((col, colIndex) => (\r\n                <div class=\"dda-col-md-3\" key={`col-${colIndex}`}>\r\n                  {col.title && <h6 aria-label={`${col.title} section`} class=\"megamemu-sub-title\">{col.title}</h6>}\r\n                  <ul>\r\n                    {col.items.map((item, itemIndex) => (\r\n                      <li key={`item-${itemIndex}`}>\r\n                        \r\n                        <a\r\n                          class=\"dda-mega-menu-link\"\r\n                          // href={item.url}\r\n                          href={this.useNavigator == \"true\" ? 'javascript:void(0)' : item.url}\r\n                          onClick={() => this.useNavigator == \"true\"?  this.navigatorClick.emit(item.url) :\"\"}\r\n                        >\r\n                          <span class=\"dda-mega-menu-icon\" aria-hidden=\"true\">\r\n                            <i class=\"material-icons material-symbols-outlined\">sentiment_satisfied</i>\r\n                          </span>\r\n                          <span class=\"text-wrap\">\r\n                            <span class=\"dda-mega-menu-text\">{item.headerMenuLabel}</span>\r\n                            {item.description && (\r\n                              <span class=\"dda-mega-menu-desc\">\r\n                                {item.description}\r\n                              </span>\r\n                            )}\r\n                          </span>\r\n                        </a>\r\n                      </li>\r\n                    ))}\r\n                  </ul>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <nav aria-label=\"Main navigation\" class=\"dda-header-menu\">\r\n          <ul class=\"dda-mega-menu\">\r\n            {this.parsedMenuItems.map((item, index) => {\r\n              const isOpen = this.openIndex === index;\r\n              const hasSubmenu = item.children && item.children.length > 0;\r\n              const submenuId = `submenu-${index}`;\r\n              const type = item.type;\r\n\r\n              return (\r\n                <li key={`top-${index}`}>\r\n                  \r\n                  <a\r\n                    // href={item.url}\r\n                    href={this.useNavigator == \"true\" ? 'javascript:void(0)' : item.url}\r\n                    aria-haspopup={hasSubmenu ? 'true' : undefined}\r\n                    aria-expanded={hasSubmenu ? String(isOpen) : undefined}\r\n                    aria-controls={hasSubmenu ? submenuId : undefined}\r\n                    \r\n                    class={isOpen ? 'active' : ''}\r\n                    onClick={e => this.handleToggle(index, hasSubmenu, e, item)}\r\n                  >\r\n                    {item.headerMenuLabel}\r\n                  </a>\r\n\r\n                  {hasSubmenu && type === 'dda_default_submenu' &&\r\n                    this.renderDefaultSubmenu(item.children, isOpen, submenuId, item.headerMenuLabel)}\r\n\r\n                  {hasSubmenu && type === 'dda_main_megamenu' &&\r\n                    this.renderMegaMenu(item.children, isOpen, submenuId, item.headerMenuLabel)}\r\n                </li>\r\n              );\r\n            })}\r\n          </ul>\r\n        </nav>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"dda-header-menu.js","sourceRoot":"","sources":["../../../src/components/dda-header-menu/dda-header-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Listen, EventEmitter, Event } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-header-menu',\r\n  styleUrls: ['dda-header-menu.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaHeaderMenu {\r\n  @Element() el: HTMLElement;\r\n  \r\n  @Event() navigatorClick?: EventEmitter<string>;\r\n  @Prop() showQuickLinksIcon: boolean;\r\n  @Prop() useNavigator: 'true' | 'false' = 'false';\r\n@Prop() quickLinks: string | Array<{\r\n    headerMenuLabel: string;\r\n    headerMenuId: string;\r\n    description: string;\r\n    url: string;\r\n    quickLinksIcon: string;\r\n    type?: 'dda_default_submenu' | 'dda_main_megamenu';\r\n    children?: any;\r\n}> = [];  @State() openIndex: number | null = null;\r\n  @State() openSubIndex: number | null = null;\r\n\r\n  get parsedMenuItems() {\r\n    if (typeof this.quickLinks === 'string') {\r\n      try {\r\n        return JSON.parse(this.quickLinks);\r\n      } catch {\r\n        console.warn('Invalid JSON in quickLinks');\r\n        return [];\r\n      }\r\n    }\r\n    return this.quickLinks;\r\n  }\r\n\r\n  handleToggle(index: number, hasSubmenu: boolean, event: Event, item: any) {\r\n    if (hasSubmenu) {\r\n      event.preventDefault();\r\n      this.openIndex = this.openIndex === index ? null : index;\r\n      this.openSubIndex = null;\r\n    }else{\r\n      if(this.useNavigator == \"true\"){\r\n\r\n        this.navigatorClick.emit(item.url)\r\n      }\r\n    }\r\n  }\r\n\r\n  handleClickOutside = (event: MouseEvent) => {\r\n    const target = event.target as HTMLElement;\r\n    if (!this.el.contains(target)) {\r\n      this.openIndex = null;\r\n      this.openSubIndex = null;\r\n    }\r\n  };\r\n\r\n  connectedCallback() {\r\n    document.addEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    document.removeEventListener('click', this.handleClickOutside);\r\n  }\r\n\r\n  @Listen('keydown', { target: 'window' })\r\n  handleKeydown(event: KeyboardEvent) {\r\n    if (event.key === 'Escape') {\r\n      this.openIndex = null;\r\n      this.openSubIndex = null;\r\n    }\r\n  }\r\n\r\n  renderDefaultSubmenu(children, isOpen, submenuId, headerMenuLabel) {\r\n    return (\r\n      <div\r\n        class={{\r\n          'dda-default-submenu': true,\r\n          'is-visible': isOpen,\r\n        }}\r\n        id={submenuId}\r\n        aria-label={`${headerMenuLabel} Submenu`}\r\n      >\r\n        <ul>\r\n          {children.map((item, subIndex) => {\r\n            const hasSubSubmenu = item.children && item.children.length > 0;\r\n            const subSubmenuId = `subsubmenu-${submenuId}-${subIndex}`;\r\n            const isSubOpen = this.openSubIndex === subIndex;\r\n\r\n            return (\r\n              <li>\r\n                \r\n\r\n                <a\r\n                  href={this.useNavigator == \"true\" ? 'javascript:void(0)' : item.url}\r\n                  id={item.headerMenuId}\r\n                  aria-haspopup={hasSubSubmenu ? 'true' : undefined}\r\n                  aria-expanded={hasSubSubmenu ? String(isSubOpen) : undefined}\r\n                  aria-controls={hasSubSubmenu ? subSubmenuId : undefined}\r\n                  class={{\r\n                    'has-submenu': hasSubSubmenu,\r\n                    'active': isSubOpen,\r\n                  }}\r\n                  onClick={e => {\r\n                    if (hasSubSubmenu) {\r\n                      e.preventDefault();\r\n                      this.openSubIndex = this.openSubIndex === subIndex ? null : subIndex;\r\n                    }else{\r\n                      if(this.useNavigator == \"true\"){\r\n\r\n                        this.navigatorClick.emit(item.url)\r\n                      }\r\n                    }\r\n                  }}\r\n                >\r\n                  {item.headerMenuLabel}\r\n                </a>\r\n\r\n                {hasSubSubmenu && (\r\n                  <div\r\n                    class={{\r\n                      'dda-default-subsubmenu': true,\r\n                      'is-visible': isSubOpen,\r\n                    }}\r\n                    id={subSubmenuId}\r\n                    aria-label={`${item.headerMenuLabel} Sub Submenu`}\r\n                  >\r\n                    <div class=\"dda-default-subsubmenu-content\">\r\n                      <span class=\"dda-submenu-title\">{item.defaultSubMenuTitle || item.headerMenuLabel}</span>\r\n                      <ul>\r\n                        {item.children.map((subItem, subItemIndex) => (\r\n                          <li>\r\n                            <a\r\n                              // href={subItem.url}\r\n                              href={this.useNavigator == \"true\" ? 'javascript:void(0)' : subItem.url}\r\n                              id={`${subSubmenuId}-${subItemIndex}`}\r\n                              onClick={() => this.useNavigator == \"true\" ? this.navigatorClick.emit(subItem.url) : \"\"}\r\n                            >\r\n                              {subItem.headerMenuLabel}\r\n                            </a>\r\n                          </li>\r\n                        ))}\r\n                      </ul>\r\n                    </div>\r\n                  </div>\r\n                )}\r\n              </li>\r\n            );\r\n          })}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  renderMegaMenu(children, isOpen, submenuId, headerMenuLabel) {\r\n    return (\r\n      <div\r\n        class={{\r\n          'dda-main-megamenu': true,\r\n          'is-visible': isOpen,\r\n        }}\r\n        id={submenuId}\r\n        aria-label={`${headerMenuLabel} Mega Menu`}\r\n      >\r\n        <div class=\"dda-megamenu-wrap\">\r\n          <div class=\"dda-megamenu-content\">\r\n            <div class=\"dda-row\">\r\n              {children.map((col, colIndex) => (\r\n                <div class=\"dda-col-md-3\" key={`col-${colIndex}`}>\r\n                  {col.title && <h6 aria-label={`${col.title} section`} class=\"megamemu-sub-title\">{col.title}</h6>}\r\n                  <ul>\r\n                    {col.items.map((item, itemIndex) => (\r\n                      <li key={`item-${itemIndex}`}>\r\n                        \r\n                        <a\r\n                          class=\"dda-mega-menu-link\"\r\n                          // href={item.url}\r\n                          href={this.useNavigator == \"true\" ? 'javascript:void(0)' : item.url}\r\n                          onClick={() => this.useNavigator == \"true\"?  this.navigatorClick.emit(item.url) :\"\"}\r\n                        >\r\n                          {this.showQuickLinksIcon ? (\r\n                            <span class=\"dda-mega-menu-icon\" aria-hidden=\"true\">\r\n                              <i class=\"material-icons material-symbols-outlined\">\r\n                                {item.quickLinksIcon ? item.quickLinksIcon : \"sentiment_satisfied\"}\r\n                              </i>\r\n                            </span>\r\n                          ) : \"\"}\r\n                          <span class=\"text-wrap\">\r\n                            <span class=\"dda-mega-menu-text\">{item.headerMenuLabel}</span>\r\n                            {item.description && (\r\n                              <span class=\"dda-mega-menu-desc\">\r\n                                {item.description}\r\n                              </span>\r\n                            )}\r\n                          </span>\r\n                        </a>\r\n                      </li>\r\n                    ))}\r\n                  </ul>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <nav aria-label=\"Main navigation\" class=\"dda-header-menu\">\r\n          <ul class=\"dda-mega-menu\">\r\n            {this.parsedMenuItems.map((item, index) => {\r\n              const isOpen = this.openIndex === index;\r\n              const hasSubmenu = item.children && item.children.length > 0;\r\n              const submenuId = `submenu-${index}`;\r\n              const type = item.type;\r\n\r\n              return (\r\n                <li key={`top-${index}`}>\r\n                  \r\n                  <a\r\n                    // href={item.url}\r\n                    href={this.useNavigator == \"true\" ? 'javascript:void(0)' : item.url}\r\n                    aria-haspopup={hasSubmenu ? 'true' : undefined}\r\n                    aria-expanded={hasSubmenu ? String(isOpen) : undefined}\r\n                    aria-controls={hasSubmenu ? submenuId : undefined}\r\n                    \r\n                    class={isOpen ? 'active' : ''}\r\n                    onClick={e => this.handleToggle(index, hasSubmenu, e, item)}\r\n                  >\r\n                    {item.headerMenuLabel}\r\n                  </a>\r\n\r\n                  {hasSubmenu && type === 'dda_default_submenu' &&\r\n                    this.renderDefaultSubmenu(item.children, isOpen, submenuId, item.headerMenuLabel)}\r\n\r\n                  {hasSubmenu && type === 'dda_main_megamenu' &&\r\n                    this.renderMegaMenu(item.children, isOpen, submenuId, item.headerMenuLabel)}\r\n                </li>\r\n              );\r\n            })}\r\n          </ul>\r\n        </nav>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}