@dubai-design-system/components-js 3.11.1 → 3.11.3

package/dist/components/p-c30037a8.js.map

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