@dubai-design-system/components-js 3.9.14 → 3.10.0

package/dist/dda/p-ffee072d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ddaHeaderMenuCss","DdaHeaderMenuStyle0","globalCss","DdaHeaderMenuStyle1","DdaHeaderMenu","constructor","hostRef","this","useNavigator","quickLinks","openIndex","openSubIndex","handleClickOutside","event","target","el","contains","parsedMenuItems","JSON","parse","_a","console","warn","handleToggle","index","hasSubmenu","item","preventDefault","navigatorClick","emit","url","connectedCallback","document","addEventListener","disconnectedCallback","removeEventListener","handleKeydown","key","renderDefaultSubmenu","children","isOpen","submenuId","headerMenuLabel","h","class","id","map","subIndex","hasSubSubmenu","length","subSubmenuId","isSubOpen","href","headerMenuId","undefined","String","active","onClick","e","defaultSubMenuTitle","subItem","subItemIndex","renderMegaMenu","col","colIndex","title","items","itemIndex","description","render","Host","type","inputCss","DdaInputStyle0","DdaInputStyle1","DdaInput","input_role","validation_id","required","internalValue","getValue","value","componentDidLoad","dateInput","querySelector","style","color","inputClass","validation_type","size","input_status","custom_class","component_mode","filter","Boolean","join","label","htmlFor","input_id","name","input_name","role","placeholder","aria_label","onInput","inputChanged","onBlur","trim","inputBlurred","error_message","helper_text","ddaRadiobuttonCss","DdaRadiobuttonStyle0","DdaRadiobuttonStyle1","DdaRadiobutton","checked","handleChange","_e","radioChange","radiobuttonClass","variants","radio_status","group_name","disabled","onChange","title_text","supporting"],"sources":["src/components/dda-header-menu/dda-header-menu.css?tag=dda-header-menu","src/global/global.css?tag=dda-header-menu","src/components/dda-header-menu/dda-header-menu.tsx","src/global/input.css?tag=dda-input","src/global/global.css?tag=dda-input","src/components/dda-input/dda-input.tsx","src/components/dda-radiobutton/dda-radiobutton.css?tag=dda-radiobutton","src/global/global.css?tag=dda-radiobutton","src/components/dda-radiobutton/dda-radiobutton.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 url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n  font-weight: 300;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n  font-weight: 400;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n  font-weight: 500;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n  font-weight: 700;\r\n  font-style: normal;\r\n}\r\n\r\n\r\n\r\n.material-flat-icon {\r\n  font-variation-settings:\r\n  'FILL' 1,\r\n  'wght' 400,\r\n  'GRAD' 0,\r\n  'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n  font-family: 'Material Symbols Outlined';\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 24px;\r\n  display: inline-block;\r\n  line-height: 1;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n  font-family: 'Material Icons';\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 24px;\r\n  line-height: 1;\r\n  letter-spacing: normal;\r\n  text-transform: none;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  background-color: var(--dda-surface-100) !important;\r\n  font-family: \"Dubai\", Helvetica, sans-serif !important;\r\n  font-size: var(--font-caption) !important;\r\n  font-weight: var(--font-weight-regular) !important;\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0) !important;\r\n  margin: 0;\r\n}\r\nlegend{\r\n  font-size: inherit !important;\r\n}\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nul{\r\n  margin: 0;\r\n}\r\na{\r\n  text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1);  font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2);  font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3);  font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4);  font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5);  font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6);  font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title);  font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body);  font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption);  font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label);  font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n  text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n  list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n  background: none;\r\n  color: #ffffff;\r\n  border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n  background: #ffffff;\r\n  color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n  background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n  background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n  color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n  color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n  color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n  color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n  color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 0px;\r\n  overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n  border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n  border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n  border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n  border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n  gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n  gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n  gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n  gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n  gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n  gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n  gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n  gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n  gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n  gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n  text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n  align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n  align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n  align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n  align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n  position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n  position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n  position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n  position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n  position: -webkit-sticky !important;\r\n  position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n  top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n  top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n  top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n  bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n  bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n  bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n  left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n  left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n  left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n  right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n  right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n  right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n  border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: -1px;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.maincontent{\r\n  padding-top: 170px;\r\n  padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n  .maincontent {\r\n      padding-top: 100px;\r\n  }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n  height: 1550px;\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', '../../global/global.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 && <p aria-label={`${col.title} section`} class=\"megamemu-sub-title\">{col.title}</p>}\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",".dda-input-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n    position: relative;\r\n}\r\n\r\n.dda-input-label {\r\n    font-size: var(--font-body);\r\n    color: var(--dda-on-surface-0);\r\n    line-height: 24px;\r\n    font-weight: var(--font-weight-regular);\r\n}\r\n.light-mode .dda-input-label {\r\n    color: var(--dda-neutral-0);\r\n}\r\n.dda-input-field-wrapper {\r\n    position: relative;\r\n}\r\n\r\n.dda-field-group-input {\r\n    height: 32px;\r\n    background-color: transparent;\r\n    flex: 1;\r\n    font-size: var(--font-caption);\r\n    font-weight: var(--dda-fw-400);\r\n    padding: 0px;\r\n    color: var(--dda-on-surface-0);\r\n    border: none;\r\n    outline: none;\r\n}\r\n.light-mode .dda-field-group-input{\r\n    color: var(--dda-neutral-0);\r\n} \r\n.dda-input-field-group {\r\n    width: 100%;\r\n    height: 55px;\r\n    padding: 8px 16px;\r\n    background: var(--dda-surface-100);\r\n    border: 1px solid var(--dda-surface-90);\r\n    border-radius: 8px;\r\n    font-size: var(--font-caption);\r\n    color: var(--dda-on-surface-0);\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n.light-mode .dda-input-field-group{\r\n    background: var(--dda-neutral-100);\r\n    border: 1px solid var(--dda-neutral-90);\r\n    color: var(--dda-neutral-0);\r\n}\r\n.dda-input-field {\r\n    width: 100%;\r\n    height: 55px;\r\n    padding: 8px 16px;\r\n    background: var(--dda-surface-100);\r\n    border: 1px solid var(--dda-surface-90);\r\n    border-radius: 8px;\r\n    font-size: var(--font-body);\r\n    color: var(--dda-on-surface-0);\r\n    font-weight: var(--dda-fw-400);\r\n}\r\n.dda-date-picker input{\r\n    color: var(--dda-on-surface-40)\r\n}\r\n.dda-date-picker input[type=\"date\"]::-webkit-calendar-picker-indicator {\r\n  color: var(--dda-on-surface-40);\r\n}\r\n.dda-date-picker input[type=\"date\"]::-moz-calendar-picker-indicator {\r\n  /* filter: invert(20%) sepia(90%) saturate(300%) hue-rotate(180deg); */\r\n}\r\n.dda-date-picker input[type=\"date\"].has-value {\r\n    color: var(--dda-on-surface-0);\r\n}\r\n.light-mode .dda-input-field{\r\n    background: var(--dda-neutral-100);\r\n    border: 1px solid var(--dda-neutral-90);\r\n    color: var(--dda-neutral-0);\r\n}\r\n.dda-input-size-small .dda-input-field-group,\r\n.dda-input-size-small .dda-input-field {\r\n    height: 48px;\r\n    padding: 8px 12px;\r\n}\r\n\r\n.dda-input-focus-filled .dda-phone-field,   \r\n.dda-input-focus .dda-input-field-group,\r\n.dda-input-field:focus {\r\n    /* outline: none; */\r\n    border-color: var(--dda-color-primary-40);\r\n    box-shadow: 0px 0px 0px 3px var(--dda-primary-variant-95);\r\n}\r\n.dda-input-field:focus-visible {\r\n    outline: 1px solid var(--dda-color-primary-40);\r\n    outline-offset: -1px;\r\n}\r\n.light-mode.dda-input-focus-filled .dda-phone-field,\r\n.light-mode.dda-input-focus .dda-input-field-group,\r\n.light-mode .dda-input-field:focus {\r\n    outline: none;\r\n    border-color: var(--dda-primary-40);\r\n    box-shadow: 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n\r\n.dda-input-dropdown-btn {\r\n    min-width: 110px;\r\n    position: relative;\r\n    display: inline-block;\r\n    padding: 0;\r\n}\r\n\r\n.dda-dropdown-select {\r\n    width: 100%;\r\n    height: 32px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    background: transparent;\r\n    border: transparent;\r\n    font-size: var(--font-caption);\r\n    color: var(--dda-on-surface-0);\r\n    padding: 0;\r\n    align-items: center;\r\n    cursor: pointer;\r\n    gap: 6px;\r\n}\r\n.dda-dropdown-select:focus-visible{\r\n    outline: 1px solid var(--dda-color-primary-40);\r\n    outline-offset: 1px;\r\n}\r\n.light-mode .dda-dropdown-select{\r\n    color: var(--dda-neutral-0);\r\n}\r\n\r\n.dda-dropdown-select img {\r\n    width: 24px;\r\n}\r\n\r\n\r\n.dda-dropdown-container {\r\n    position: relative;\r\n    width: auto;\r\n    /* min-width: 140px; */\r\n}\r\n.dda-dropdown-container.bg-transparent .dda-dropdown-header{\r\n    padding: 0px;\r\n    height: auto;\r\n    background: transparent;\r\n    border: transparent;\r\n    box-shadow: none;\r\n}\r\n.dda-dropdown-header {\r\n    width: auto;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 15px;\r\n}\r\n.dda-dropdown-header .three-dots{\r\n    font-size: 25px;\r\n    color: var(--dda-neutral-variant-60);\r\n}\r\n.dda-dropdown-header .three-dots path{\r\n    fill: var(--dda-neutral-variant-60);\r\n}\r\n.dda-dropdown-header .dda-dropdown-text{\r\n    flex: 1;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    gap: 15px;\r\n}\r\n.dda-dropdown-header .dda-dropdown-text span{\r\n    color: var(--dda-on-surface-variant-30);\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n.light-mode .dda-dropdown-text span{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-dropdown-header .dda-dropdown-text i{\r\n    font-size: 31px;\r\n}\r\n.dda-dropdown-header .dda-dropdown-text path{\r\n    fill: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-dropdown-header .dda-dropdown-text path{\r\n    fill: var(--dda-neutral-variant-30);\r\n}\r\n.dda-dropdown-header:focus .three-dots path{\r\n    fill: var(--dda-on-surface-variant-30);\r\n}\r\n.dda-input-dropdown-list {\r\n    width: 100%;\r\n    min-width: 150px;\r\n    max-height: 200px;\r\n    background-color: var(--dda-neutral-100);\r\n    border: 1px solid var(--dda-neutral-90);\r\n    border-radius: 8px;\r\n    overflow-y: auto;\r\n    position: absolute;\r\n    top: 100%;\r\n    margin-top: 1px;\r\n    inset-inline-start: 0px;\r\n    z-index: 9999;\r\n    box-shadow: 0px 8px 10px -6px #1018281A;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar-track {\r\n    border-radius: 4px;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar {\r\n    width: 4px;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar-thumb {\r\n    border-radius: 4px;\r\n    background-color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-input-dropdown-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 7px;\r\n    width: 100%;\r\n    font-size: var(--font-caption);\r\n    background: transparent;\r\n    border: transparent;\r\n    padding: 10px;\r\n    cursor: pointer;\r\n}\r\n\r\n.dda-input-dropdown-item:focus-visible,\r\n.dda-input-dropdown-item:hover,\r\n.dda-input-dropdown-item.selected {\r\n    background-color: var(--dda-neutral-variant-95);\r\n    outline: 0;\r\n}\r\n.dda-input-dropdown-list .country-select img{\r\n    width: 20px;\r\n}\r\n\r\n.dda-helper-text {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    font-size: var(--font-caption);\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-helper-text{\r\n    color: var(--dda-neutral-30);\r\n}\r\n.dda-error-message {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    font-size: var(--font-caption);\r\n    color: var(--dda-color-error-40);\r\n}\r\n\r\n.dda-helper-text i,\r\n.dda-helper-text svg,\r\n.dda-error-message i,\r\n.dda-error-message svg  {\r\n    font-size: 21px;\r\n}\r\n\r\n.dda-success-text {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    font-size: var(--font-caption);\r\n    color: var(--dda-color-success-40);\r\n}\r\n\r\n.dda-validation-error .dda-input-field-group,\r\n.dda-validation-error .dda-input-field {\r\n    color: var(--dda-color-error-40);\r\n    border-color: var(--dda-color-error-40);\r\n    box-shadow: none;\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field-group,\r\n.light-mode.dda-validation-error .dda-input-field {\r\n    color: var(--dda-error-40);\r\n    border-color: var(--dda-error-40);\r\n    box-shadow: none;\r\n}\r\n\r\n.dda-validation-error .icon-close,\r\n.dda-validation-error .dda-error-message,\r\n.dda-validation-error .dda-field-group-input,\r\n.dda-validation-error .dda-file-input span {\r\n    color: var(--dda-color-error-40) !important;\r\n}\r\n\r\n.light-mode.dda-validation-error .icon-close,\r\n.light-mode.dda-validation-error .dda-error-message,\r\n.light-mode.dda-validation-error .dda-field-group-input,\r\n.light-mode.dda-validation-error .dda-file-input span {\r\n    color: var(--dda-error-40) !important;\r\n}\r\n\r\n.dda-validation-error .dda-input-field::-ms-input-placeholder,\r\n.dda-validation-error .dda-field-group-input::-ms-input-placeholder {\r\n    color: var(--dda-color-error-40);\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field::-ms-input-placeholder,\r\n.light-mode.dda-validation-error .dda-field-group-input::-ms-input-placeholder {\r\n    color: var(--dda-error-40);\r\n}\r\n\r\n.dda-validation-error .dda-input-field::placeholder,\r\n.dda-validation-error .dda-field-group-input::placeholder {\r\n    color: var(--dda-color-error-40);\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field::placeholder,\r\n.light-mode.dda-validation-error .dda-field-group-input::placeholder {\r\n    color: var(--dda-error-40);\r\n}\r\n\r\n.dda-input-disabled .dda-input-label,\r\n.dda-input-disabled .dda-helper-text,\r\n.dda-input-disabled .dda-error-message,\r\n.dda-input-disabled i,\r\n.dda-input-disabled .dda-dropdown-select,\r\n.dda-input-disabled .dda-file-input span,\r\n.dda-input-disabled .dda-file-choose {\r\n    color: var(--dda-neutral-60) !important;\r\n}\r\n\r\n.dda-input-disabled .dda-input-field-group,\r\n.dda-input-disabled .dda-input-field {\r\n    background: var(--dda-neutral-92);\r\n    border-color: var(--dda-neutral-90);\r\n    color: var(--dda-neutral-60) !important;\r\n    box-shadow: none;\r\n    pointer-events: none;\r\n    outline: none;\r\n}\r\n.dda-input-disabled i{\r\n    color: var(--dda-neutral-variant-60);\r\n}\r\n.dda-input-disabled svg path{\r\n    fill: var(--dda-neutral-variant-60);\r\n}\r\n.dda-input-disabled .dda-input-field::-ms-input-placeholder {\r\n    color: var(--dda-neutral-60);\r\n}\r\n\r\n.dda-input-disabled .dda-input-field::placeholder {\r\n    color: var(--dda-neutral-60);\r\n}\r\n\r\n.dda-input-disabled .dda-btn {\r\n    background-color: var(--dda-neutral-70) !important;\r\n    border-color: var(--dda-neutral-70) !important;\r\n}\r\n\r\n.dda-input-disabled .dda-dropdown-select img,\r\n.dda-input-disabled .dda-input-field-wrapper img {\r\n    filter: grayscale(1);\r\n}\r\n\r\n/*Specifications*/\r\n\r\n/*Number Field*/\r\n.dda-number-field .dda-field-group-input {\r\n    padding-inline-end: 10px;\r\n    border-inline-end: solid 1px var(--dda-neutral-90);\r\n}\r\n\r\n.dda-number-field .dda-field-group-input:focus,\r\n.dda-phone-field .dda-field-group-input:focus {\r\n    border-inline-start: solid 1px var(--dda-color-primary-40);\r\n}   \r\n.dda-number-field .dda-field-group-input:focus-visible,\r\n.dda-phone-field .dda-field-group-input:focus-visible {\r\n    outline: 1px solid var(--dda-surface-100);\r\n    outline-offset: -1px;\r\n}\r\n.dda-number-field .dda-input-dropdown-btn {\r\n    min-width: 80px;\r\n}\r\n\r\n.dda-number-field .dda-input-dropdown-list {\r\n    top: 44px;\r\n}\r\n\r\n.dda-input-size-small .dda-number-field .dda-input-dropdown-list {\r\n    top: 41px;\r\n}\r\n\r\n/*text ares*/\r\n.dda-input-textarea {\r\n    height: auto;\r\n    min-height: 120px;\r\n    resize: vertical;\r\n}\r\n\r\n/*Search Field*/\r\n.dda-search-area {\r\n    position: relative;\r\n}\r\n\r\n.dda-search-area .icon-left {\r\n    position: absolute;\r\n    top: 16px;\r\n    inset-inline-start: 15px;\r\n    font-size: 24px;\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n\r\n.light-mode .dda-search-area .icon-left{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-input-size-small .dda-search-area .icon-left {\r\n    top: 14px;\r\n}\r\n\r\n.dda-search-area .dda-search-btngroup {\r\n    height: 40px;\r\n    position: absolute;\r\n    top: 7px;\r\n    inset-inline-end: 7px;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 5px;\r\n}\r\n\r\n.dda-input-size-small .dda-search-btngroup {\r\n    top: 4px;\r\n}\r\n\r\n.dda-search-area .dda-search-close-icon {\r\n    display: flex;\r\n    color: var(--dda-on-surface-variant-30);\r\n    font-size: 20px;\r\n    margin: 0px;\r\n    padding: 0px;\r\n    background: none;\r\n    border: 0;\r\n    cursor: pointer;\r\n}\r\n\r\n.light-mode .dda-search-area .dda-search-close-icon{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-search-field {\r\n    padding: 8px 26px 8px 40px;\r\n}\r\n\r\n.dda-search-action .dda-search-field {\r\n    padding-top: 8px;\r\n    padding-bottom: 8px;\r\n    padding-inline-start: 40px;\r\n}\r\n.dda-search-action .dda-search-field.has-search-button{\r\n    padding-inline-end: 110px;\r\n}\r\n.dda-search-sm .icon-left {\r\n    top: 14px;\r\n}\r\n\r\n.dda-search-sm .dda-search-btngroup {\r\n    top: 4px;\r\n}\r\n\r\n/*Phone Field*/\r\n.dda-phone-field-group {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.dda-phone-field-group.dda-phone-field-small {\r\n    height: 48px;\r\n}\r\n\r\n.dda-phone-field-group.focused,\r\n.dda-phone-field-group.filled {\r\n    outline: none;\r\n    border-color: var(--dda-color-primary-40);\r\n    box-shadow: 0px 0px 0px 3px var(--dda-primary-variant-95);\r\n}\r\n\r\n.dda-phone-field-group.error {\r\n    border-color: var(--dda-color-error-40);\r\n    box-shadow: none;\r\n}\r\n\r\n.phone-field-country-code {\r\n    border: none;\r\n    background: none;\r\n    margin-inline-end: 0.5rem;\r\n    font-size: 1rem;\r\n    color: var(--dda-on-surface-0);\r\n}\r\n\r\n.phone-field-country-code:focus-within {\r\n    outline: 0;\r\n}\r\n\r\n.dda-phone-field .dda-input-dropdown-list {\r\n    top: 44px;\r\n}\r\n\r\n.dda-input-size-small .dda-phone-field .dda-input-dropdown-list {\r\n    top: 41px;\r\n}\r\n\r\n/*Credit Card Field*/\r\n.dda-credit-card-field .dda-creditcard-icon {\r\n    width: 40px;\r\n    position: absolute;\r\n    top: 14px;\r\n    inset-inline-start: 15px;\r\n}\r\n\r\n.dda-input-size-small .dda-creditcard-icon {\r\n    top: 11px;\r\n}\r\n\r\n.dda-credit-card-field .dda-input-field {\r\n    padding: 8px 16px 8px 65px;\r\n}\r\n[dir=\"rtl\"]  .dda-credit-card-field .dda-input-field {\r\n    padding: 8px 65px 8px 16px;\r\n}\r\n/*Select Field*/\r\n.dda-select-header {\r\n    cursor: pointer;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 10px;\r\n}\r\n\r\n.dda-select-header i {\r\n    font-size: 28px;\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n.dda-select-header .dda-select-button-label:empty {\r\n  flex-grow: 1;\r\n}\r\n/*Rich Text Editor*/\r\n.dda-input-container.dda-richtext-editor {\r\n    gap: 0px;\r\n}\r\n\r\n.dda-richtext-editor .dda-input-label {\r\n    margin-bottom: 8px;\r\n}\r\n\r\n.dda-richtext-editor .dda-helper-text,\r\n.dda-richtext-editor .dda-error-message {\r\n    margin-top: 8px;\r\n}\r\n\r\n.dda-richtext-editor .ql-toolbar.ql-snow {\r\n    border: 1px solid var(--dda-neutral-90) !important;\r\n    border-radius: 8px 8px 0 0;\r\n}\r\n\r\n.dda-richeditor-field {\r\n    border: 1px solid var(--dda-neutral-90) !important;\r\n    border-radius: 0 0 8px 8px;\r\n}\r\n\r\n.dda-richeditor-field .ql-editor {\r\n    height: 100px;\r\n    font-size: var(--font-caption);\r\n}\r\n\r\n/*Attach Files*/\r\n\r\n.dda-input-field-group.dda-attach-file {\r\n    padding-inline-end: 6px;\r\n}\r\n\r\n.dda-file-input {\r\n    width: 100%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.dda-file-input span {\r\n    font-size: var(--font-caption);\r\n    color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-file-input span{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-file-choose {\r\n    height: 40px;\r\n    background-color: var(--dda-neutral-100);\r\n    border: solid 1px var(--dda-neutral-90);\r\n    color: var(--dda-color-primary-40);\r\n    font-weight: var(--dda-fw-500);\r\n    padding: 8px 16px;\r\n    border-radius: 8px;\r\n    cursor: pointer;\r\n}\r\n.dda-file-choose:focus{\r\n    outline: solid 1px var(--dda-color-primary-40);\r\n    outline-offset: -1px;\r\n}\r\n\r\n.light-mode .dda-file-choose {\r\n    color: var(--dda-primary-40);\r\n}\r\n\r\n.dda-input-disabled .dda-file-choose {\r\n    background-color: var(--dda-neutral-95);\r\n}\r\n\r\n.dda-file-choose input {\r\n    display: none;\r\n}\r\n\r\n.dda-file-details {\r\n    width: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    padding-inline-end: 10px;\r\n}\r\n\r\n.dda-file-icon {\r\n    width: 34px;\r\n    height: 34px;\r\n}\r\n\r\n.dda-items {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n}\r\n.dda-file-details .remove-file{\r\n    margin: 0;\r\n    padding: 0;\r\n    background: transparent;\r\n    border: transparent;\r\n}\r\n.dda-file-details .remove-file svg{\r\n    font-size: var(--font-caption);\r\n}\r\n.dda-file-name {\r\n    font-size: var(--font-caption);\r\n}\r\n\r\n.dda-remove-file {\r\n    font-size: 20px;\r\n    background: transparent;\r\n    border: transparent;\r\n    color: var(--dda-on-surface-variant-30);\r\n    cursor: pointer;\r\n    padding: 0px;\r\n}\r\n\r\ninput[type=\"date\"]::-webkit-input-placeholder {\r\n    color: transparent;\r\n}\r\n\r\ninput[type=\"date\"]::-moz-placeholder {\r\n    color: transparent;\r\n}\r\n\r\ninput[type=\"date\"]::placeholder {\r\n    color: transparent;\r\n}\r\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n  font-weight: 300;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n  font-weight: 400;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n  font-weight: 500;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n  font-weight: 700;\r\n  font-style: normal;\r\n}\r\n\r\n\r\n\r\n.material-flat-icon {\r\n  font-variation-settings:\r\n  'FILL' 1,\r\n  'wght' 400,\r\n  'GRAD' 0,\r\n  'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n  font-family: 'Material Symbols Outlined';\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 24px;\r\n  display: inline-block;\r\n  line-height: 1;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n  font-family: 'Material Icons';\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 24px;\r\n  line-height: 1;\r\n  letter-spacing: normal;\r\n  text-transform: none;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  background-color: var(--dda-surface-100) !important;\r\n  font-family: \"Dubai\", Helvetica, sans-serif !important;\r\n  font-size: var(--font-caption) !important;\r\n  font-weight: var(--font-weight-regular) !important;\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0) !important;\r\n  margin: 0;\r\n}\r\nlegend{\r\n  font-size: inherit !important;\r\n}\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nul{\r\n  margin: 0;\r\n}\r\na{\r\n  text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1);  font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2);  font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3);  font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4);  font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5);  font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6);  font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title);  font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body);  font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption);  font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label);  font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n  text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n  list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n  background: none;\r\n  color: #ffffff;\r\n  border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n  background: #ffffff;\r\n  color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n  background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n  background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n  color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n  color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n  color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n  color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n  color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 0px;\r\n  overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n  border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n  border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n  border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n  border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n  gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n  gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n  gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n  gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n  gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n  gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n  gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n  gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n  gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n  gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n  text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n  align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n  align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n  align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n  align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n  position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n  position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n  position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n  position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n  position: -webkit-sticky !important;\r\n  position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n  top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n  top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n  top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n  bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n  bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n  bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n  left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n  left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n  left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n  right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n  right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n  right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n  border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: -1px;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.maincontent{\r\n  padding-top: 170px;\r\n  padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n  .maincontent {\r\n      padding-top: 100px;\r\n  }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n  height: 1550px;\r\n} */\r\n","import { Component, Prop, h, Host, Event, EventEmitter, Element, State, Method } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-input',\r\n  styleUrls: ['../../global/input.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaInput {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() label: string;\r\n  @Prop() placeholder: string;\r\n  @Prop() value: string;\r\n  @Prop() type: string = 'text';\r\n  @Prop() input_role: string = 'text';\r\n  @Prop() helper_text: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() size?: string;\r\n  @Prop() input_status?: string;\r\n  @Prop() custom_class?: string;\r\n  @Prop() component_mode?: string; \r\n  @Prop() input_id: string;\r\n  @Prop() aria_label?: string;\r\n  @Prop() input_name?: string;\r\n  @Prop() required?: boolean = false;\r\n\r\n  @State() internalValue: string = '';\r\n\r\n  @Event() inputChanged: EventEmitter<any>;\r\n  @Event() inputBlurred: EventEmitter<{ name: string; value: string }>;\r\n\r\n  @Method()\r\n  async getValue() {\r\n    return this.internalValue || this.value || '';\r\n  }\r\n\r\n  componentDidLoad() {\r\n    // Hide date input placeholder\r\n    if (this.type === 'date') {\r\n      const dateInput = this.el.querySelector('input[type=\"date\"]') as HTMLInputElement;\r\n      if (dateInput) {\r\n        dateInput.style.color = 'transparent';\r\n        dateInput.addEventListener('focus', () => {\r\n          dateInput.style.color = '#000';\r\n        });\r\n        dateInput.addEventListener('blur', () => {\r\n          if (!dateInput.value) {\r\n            dateInput.style.color = 'transparent';\r\n          }\r\n        });\r\n        dateInput.addEventListener('change', () => {\r\n          dateInput.style.color = '#000';\r\n        });\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const inputClass = [\r\n      'dda-input-container',\r\n      this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n      this.size ? `dda-input-size-${this.size}` : '',\r\n      this.input_status ? `dda-input-${this.input_status}` : '',\r\n      this.type === 'Witherror' ? 'dda-validation-error' : '',\r\n      this.type === 'disabled' ? 'dda-input-disabled' : '',\r\n      this.custom_class,\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n\r\n    const describedByIds: string[] = [];\r\n    if (this.helper_text) describedByIds.push(`${this.validation_id}-helper`);\r\n    if (this.validation_type === 'error' && this.error_message)\r\n      describedByIds.push(`${this.validation_id}-error`);\r\n\r\n    return (\r\n      <Host>\r\n        <div class={inputClass}>\r\n          {this.label && \r\n            <label \r\n              htmlFor={this.input_id} \r\n              class=\"dda-input-label\"\r\n              id={`${this.input_id}-label`}\r\n            >\r\n              {this.label}\r\n            </label>}\r\n          <input\r\n            id={this.input_id}\r\n            name={this.input_name}\r\n            class={`dda-input-field dda-input-text ${this.type === 'date' && this.value ? 'has-value' : ''}`}\r\n            type={this.type}\r\n            role={this.input_role}\r\n            placeholder={this.placeholder}\r\n            value={this.internalValue || this.value}\r\n            aria-required={this.required ? 'true' : undefined}\r\n            aria-invalid={this.validation_type === 'error' ? 'true' : 'false'}\r\n            aria-describedby={`${this.input_id}-label`}\r\n            aria-label={!this.label ? this.aria_label : undefined}\r\n            onInput={(event) => {\r\n              this.internalValue = (event.target as HTMLInputElement).value;\r\n              this.inputChanged.emit(event);\r\n            }}\r\n            onBlur={(event) => {\r\n              const value = (event.target as HTMLInputElement).value.trim();\r\n              this.inputBlurred.emit({ name: this.input_name, value });\r\n            }}\r\n          />\r\n\r\n          {this.validation_type === 'error' && this.error_message ? (\r\n            <span \r\n              class=\"dda-error-message\" \r\n              id={this.validation_id}\r\n              role=\"alert\"\r\n            >\r\n              {this.error_message}\r\n            </span>\r\n          ) : (\r\n            this.helper_text && (\r\n              <span \r\n                class=\"dda-helper-text\" \r\n                id={this.validation_id}\r\n              >\r\n                {this.helper_text}\r\n              </span>\r\n            )\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n",".dda-radio-container {\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n.dda-radio-container input[type=\"radio\"]{\r\n  width: 0;\r\n  height: 0;\r\n  position: absolute;\r\n  opacity: 0;\r\n}\r\n.dda-radio-container label {\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: flex-start;\r\n  gap: 10px;\r\n}\r\n.dda-radio-container .radio-circle{\r\n  display: inline-block;\r\n  margin-top: 2px;\r\n  background: var(--dda-neutral-100);\r\n  border-radius: 50px;\r\n  box-shadow: 0px 0px 0px 2px var(--dda-color-primary-40) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset;\r\n}\r\n.light-mode.dda-radio-container .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-primary-40) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset;\r\n}\r\n.dda-radio-container input[type=\"radio\"]:checked~label .radio-circle{\r\n  background: var(--dda-color-primary-40);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-color-primary-40) inset, 0px 0px 0px 5px var(--dda-primary-95) inset;\r\n}\r\n.light-mode.dda-radio-container input[type=\"radio\"]:checked~label .radio-circle{\r\n  background: var(--dda-primary-40);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-primary-40) inset, 0px 0px 0px 5px var(--dda-primary-95) inset;\r\n}\r\n.dda-radio-container input[type=\"radio\"]:checked:focus-within~label .radio-circle{\r\n  background: var(--dda-color-primary-40);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-color-primary-40) inset, 0px 0px 0px 5px var(--dda-primary-95) inset, 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n.light-mode.dda-radio-container input[type=\"radio\"]:checked:focus-within~label .radio-circle{\r\n  background: var(--dda-primary-40);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-primary-40) inset, 0px 0px 0px 5px var(--dda-primary-95) inset, 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n\r\n.dda-radio-outlined .radio-circle{\r\n  background: var(--dda-neutral-100);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-surface-90) inset;\r\n}\r\n.light-mode.dda-radio-outlined .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-90) inset;\r\n}\r\n.dda-radio-outlined input[type=\"radio\"]:checked~label .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-color-primary-40) inset, 0px 0px 0px 5px var(--dda-surface-100) inset;\r\n}\r\n.dda-radio-outlined input[type=\"radio\"]:checked:focus-within~label .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-color-primary-40) inset, 0px 0px 0px 5px var(--dda-surface-100) inset, 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n\r\n\r\n.dda-radio-faded .radio-circle{\r\n  background: var(--dda-neutral-90);\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-90) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset;\r\n}\r\n.dda-radio-faded input[type=\"radio\"]:checked~label .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-90) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset;\r\n}\r\n.dda-radio-faded input[type=\"radio\"]:checked:focus-within~label .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-90) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset, 0px 0px 0px 3px #F2F4F3;\r\n\r\n}\r\n\r\n\r\n.dda-radio-small .radio-circle{\r\n  width: 17px;\r\n  height: 17px;\r\n}\r\n.dda-radio-default .radio-circle{\r\n  width: 21px;\r\n  height: 21px;\r\n}\r\n\r\n.dda-radio-container label p{\r\n  margin: 0px;\r\n}\r\n.radio-title {\r\n  font-size: var(--font-body);\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--font-weight-regular);\r\n  display: block;\r\n}\r\n.light-mode .radio-title{\r\n  color: var(--dda-neutral-0);\r\n}\r\n.dda-radio-lg label .radio-title{\r\n  font-size: var(--dda-fs-title-sm);\r\n}\r\n.radio-supporting {\r\n  display: block;\r\n  font-size: var(--font-small);\r\n  font-weight: var(--font-weight-regular);\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.dda-radio-container .radio-error-message{\r\n  display: block;\r\n  font-size: var(--font-small);\r\n  font-weight: var(--font-weight-regular);\r\n  color: var(--dda-color-error-40);\r\n}\r\n.light-mode .radio-supporting {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-radio-lg label .radio-supporting{\r\n  font-size: var(--font-caption);\r\n}\r\n\r\n.dda-radio-disabled{\r\n  pointer-events: none;\r\n}\r\n.dda-radio-container.dda-radio-disabled .radio-circle{\r\n  box-shadow: 0px 0px 0px 2px var(--dda-neutral-90) inset, 0px 0px 0px 5px var(--dda-neutral-100) inset;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n  font-weight: 300;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n  font-weight: 400;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n  font-weight: 500;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n  font-weight: 700;\r\n  font-style: normal;\r\n}\r\n\r\n\r\n\r\n.material-flat-icon {\r\n  font-variation-settings:\r\n  'FILL' 1,\r\n  'wght' 400,\r\n  'GRAD' 0,\r\n  'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n  font-family: 'Material Symbols Outlined';\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 24px;\r\n  display: inline-block;\r\n  line-height: 1;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n  font-family: 'Material Icons';\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 24px;\r\n  line-height: 1;\r\n  letter-spacing: normal;\r\n  text-transform: none;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  background-color: var(--dda-surface-100) !important;\r\n  font-family: \"Dubai\", Helvetica, sans-serif !important;\r\n  font-size: var(--font-caption) !important;\r\n  font-weight: var(--font-weight-regular) !important;\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0) !important;\r\n  margin: 0;\r\n}\r\nlegend{\r\n  font-size: inherit !important;\r\n}\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nul{\r\n  margin: 0;\r\n}\r\na{\r\n  text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1);  font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2);  font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3);  font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4);  font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5);  font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6);  font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title);  font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body);  font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption);  font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label);  font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n  text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n  list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n  background: none;\r\n  color: #ffffff;\r\n  border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n  background: #ffffff;\r\n  color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n  background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n  background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n  color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n  color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n  color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n  color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n  color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 0px;\r\n  overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n  border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n  border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n  border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n  border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n  gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n  gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n  gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n  gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n  gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n  gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n  gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n  gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n  gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n  gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n  text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n  align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n  align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n  align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n  align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n  position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n  position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n  position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n  position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n  position: -webkit-sticky !important;\r\n  position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n  top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n  top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n  top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n  bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n  bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n  bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n  left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n  left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n  left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n  right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n  right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n  right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n  border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: -1px;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.maincontent{\r\n  padding-top: 170px;\r\n  padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n  .maincontent {\r\n      padding-top: 100px;\r\n  }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n  height: 1550px;\r\n} */\r\n","import { Component, Prop, h, Host, Event, EventEmitter, } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-radiobutton',\r\n  styleUrls: ['dda-radiobutton.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaRadiobutton {\r\n  @Prop() title_text: string;\r\n  @Prop() supporting?: string;\r\n  @Prop() group_name?: string;\r\n  @Prop() input_id?: string;\r\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\r\n  @Prop() radio_status?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() validation_id: string = 'text';\r\n  @Prop() size?: string;\r\n  @Prop() variants?: string;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() component_mode?: string;\r\n  @Prop() aria_label?: string;\r\n  @Prop() contrast_noraml_text?: string;\r\n\r\n  // Emits event to parent component\r\n  @Event() radioChange: EventEmitter<{ checked: boolean; input_id: string }>;\r\n\r\n  private handleChange = (_e: Event) => {\r\n    this.checked = true;\r\n    this.radioChange.emit({ checked: this.checked, input_id: this.input_id });\r\n  };\r\n\r\n  render() {\r\n    const radiobuttonClass = [\r\n      'dda-radio-container',\r\n      this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n      this.size ? `dda-radio-${this.size}` : '',\r\n      this.variants ? `dda-radio-${this.variants}` : '',\r\n      this.custom_class ? `dda-radio-${this.custom_class}` : '',\r\n      this.radio_status ? `dda-radio-${this.radio_status}` : '',\r\n      this.component_mode,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <div class={radiobuttonClass}>\r\n          <input\r\n            type=\"radio\"\r\n            id={this.input_id}\r\n            name={this.group_name}\r\n            aria-label={this.aria_label}\r\n            checked={this.checked}\r\n            disabled={this.radio_status === 'disabled'}\r\n            onChange={this.handleChange}\r\n          />\r\n          <label htmlFor={this.input_id}>\r\n            <span class=\"radio-circle\"></span>\r\n            <p>\r\n              <span class=\"radio-title\">{this.title_text}</span>\r\n              {this.validation_type === 'error' && this.error_message ? (\r\n                <span class=\"radio-error-message\" id={this.validation_id}>\r\n                  {this.error_message}\r\n                </span>\r\n              ) : (\r\n                this.supporting && (\r\n                  <span class=\"dda-helper-text\" id={this.validation_id}>\r\n                    {this.supporting}\r\n                  </span>\r\n                )\r\n              )}\r\n            </p>\r\n          </label>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/dda-breadcrumb.entry.js

@@ -13,6 +13,7 @@ const DdaBreadcrumb = class {
         this.separator = 'chevron_right'; // Default to chevron separator
         this.aria_label = '';
         this.custom_class = '';
+        this.dataBreadcrumbs = "";
         this.breadcrumbs = [];
     }
     componentWillLoad() {
@@ -22,7 +23,7 @@ const DdaBreadcrumb = class {
         }
     }
     render() {
-        return (h(Host, { key: 'f0d44d0fd8cd4a744a73bc8bcd954b9499a71358' }, h("div", { key: 'ef1dc15440e4fabc835666012ff6bc6f76c96364', class: this.component_mode }, h("nav", { key: '3110ba3f26a73b6da834432b7602a02f8989a8ca', "aria-label": this.aria_label, class: `${this.custom_class}` }, h("ol", { key: 'a82ce6ecc345c3e2ede47e6550931f81fc579d86', class: "dda-breadcrumb" }, this.breadcrumbs && this.breadcrumbs.map((crumb, index) => (h("li", { class: `dda-breadcrumb-item ${index === this.breadcrumbs.length - 1 ? 'active' : ''}` }, h("a", { href: crumb.url }, this.design !== 'text' && h("i", { class: `material-icons`, "aria-hidden": "true" }, crumb.icon), this.design !== 'icon' && h("span", null, crumb.text)), index < this.breadcrumbs.length - 1 && (h("i", { class: `material-icons material-symbols-outlined`, "aria-hidden": "true" }, this.separator))))))))));
+        return (h(Host, { key: '305f32fe125cca17ab7017f1c23b65a169fc5913' }, h("div", { key: '20bb08724075f4bc8a9a7c1c3b08a285bcab5e89', class: this.component_mode }, h("nav", { key: 'd54e1bc5a299af054dece4c598aecc7a47fd6c32', "aria-label": this.aria_label, class: `${this.custom_class}` }, h("ol", { key: 'aa07901fa53ecf5c9f16a3b4f13103e829c948ec', class: "dda-breadcrumb" }, this.breadcrumbs && this.breadcrumbs.map((crumb, index) => (h("li", { class: `dda-breadcrumb-item ${index === this.breadcrumbs.length - 1 ? 'active' : ''}` }, h("a", { href: crumb.url }, this.design !== 'text' && h("i", { class: `material-icons`, "aria-hidden": "true" }, crumb.icon), this.design !== 'icon' && h("span", null, crumb.text)), index < this.breadcrumbs.length - 1 && (h("i", { class: `material-icons material-symbols-outlined`, "aria-hidden": "true" }, this.separator))))))))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/dda-breadcrumb.entry.js.map

@@ -1 +1 @@
-{"file":"dda-breadcrumb.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,skCAAskC,CAAC;AAChmC,4BAAe,gBAAgB;;ACD/B,MAAM,SAAS,GAAG,q5qDAAq5qD,CAAC;AACx6qD,4BAAe,SAAS;;MCMX,aAAa;IAL1B;;QAMU,WAAM,GAAkC,MAAM,CAAC;QAC/C,cAAS,GAAmC,eAAe,CAAC;QAC5D,eAAU,GAAY,EAAE,CAAC;QACzB,iBAAY,GAAY,EAAE,CAAC;QAInC,gBAAW,GAAkD,EAAE,CAAC;KAgCjE;IA9BC,iBAAiB;QACf,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACjE,IAAI,eAAe,EAAE;YACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,IAC7B,0EAAiB,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,IAC7D,2DAAI,KAAK,EAAC,gBAAgB,IACvB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACrD,UAAI,KAAK,EAAE,uBAAuB,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE,EAAE,IACvF,SAAG,IAAI,EAAE,KAAK,CAAC,GAAG,IACf,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,SAAG,KAAK,EAAE,gBAAgB,iBAAc,MAAM,IAAE,KAAK,CAAC,IAAI,CAAK,EACzF,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,gBAAO,KAAK,CAAC,IAAI,CAAQ,CAClD,EACH,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAClC,SAAG,KAAK,EAAE,0CAA0C,iBAAc,MAAM,IAAE,IAAI,CAAC,SAAS,CAAK,CAC9F,CACE,CACN,CAAC,CACC,CACD,CACF,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/dda-breadcrumb/dda-breadcrumb.css?tag=dda-breadcrumb","src/global/global.css?tag=dda-breadcrumb","src/components/dda-breadcrumb/dda-breadcrumb.tsx"],"sourcesContent":[".dda-breadcrumb {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.dda-breadcrumb-item {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.dda-breadcrumb,\r\n.dda-breadcrumb-item{\r\n  gap: 10px;\r\n}\r\n\r\n.dda-breadcrumb-item a {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-decoration: none;\r\n  font-size: var(--font-caption);\r\n  gap: 4px;\r\n}\r\n.dda-breadcrumb-item a span{\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--dda-fw-500);\r\n}\r\n.light-mode .dda-breadcrumb-item a span{\r\n  color: var(--dda-neutral-0);\r\n}\r\n/**/\r\n.dda-breadcrumb-item i,\r\n.dda-breadcrumb-item svg {\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-breadcrumb-item i,\r\n.light-mode .dda-breadcrumb-item svg {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n:root[dir='rtl'] .dda-breadcrumb-item > i{\r\n  transform: rotate(180deg);\r\n}\r\n/**/\r\n.dda-breadcrumb-item .separator {\r\n  margin: 0 8px;\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-breadcrumb-item .separator {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n/**/\r\n.dda-breadcrumb-item.active a span{\r\n  color: var(--dda-on-surface-variant-30);\r\n  font-weight: var(--dda-fw-400);\r\n}\r\n.light-mode .dda-breadcrumb-item.active a span{\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n  font-weight: 300;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n  font-weight: 400;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n  font-weight: 500;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n  font-weight: 700;\r\n  font-style: normal;\r\n}\r\n\r\n\r\n\r\n.material-flat-icon {\r\n  font-variation-settings:\r\n  'FILL' 1,\r\n  'wght' 400,\r\n  'GRAD' 0,\r\n  'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n  font-family: 'Material Symbols Outlined';\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 24px;\r\n  display: inline-block;\r\n  line-height: 1;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n  font-family: 'Material Icons';\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 24px;\r\n  line-height: 1;\r\n  letter-spacing: normal;\r\n  text-transform: none;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  background-color: var(--dda-surface-100) !important;\r\n  font-family: \"Dubai\", Helvetica, sans-serif !important;\r\n  font-size: var(--font-caption) !important;\r\n  font-weight: var(--font-weight-regular) !important;\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0) !important;\r\n  margin: 0;\r\n}\r\nlegend{\r\n  font-size: inherit !important;\r\n}\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nul{\r\n  margin: 0;\r\n}\r\na{\r\n  text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1);  font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2);  font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3);  font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4);  font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5);  font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6);  font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title);  font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body);  font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption);  font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label);  font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n  text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n  list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n  background: none;\r\n  color: #ffffff;\r\n  border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n  background: #ffffff;\r\n  color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n  background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n  background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n  color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n  color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n  color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n  color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n  color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 0px;\r\n  overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n  border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n  border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n  border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n  border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n  gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n  gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n  gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n  gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n  gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n  gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n  gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n  gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n  gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n  gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n  text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n  align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n  align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n  align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n  align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n  position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n  position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n  position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n  position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n  position: -webkit-sticky !important;\r\n  position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n  top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n  top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n  top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n  bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n  bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n  bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n  left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n  left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n  left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n  right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n  right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n  right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n  border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: -1px;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.maincontent{\r\n  padding-top: 170px;\r\n  padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n  .maincontent {\r\n      padding-top: 100px;\r\n  }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n  height: 1550px;\r\n} */\r\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-breadcrumb',\r\n  styleUrls: ['dda-breadcrumb.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaBreadcrumb {\r\n  @Prop() design: 'text' | 'icon-text' | 'icon' = 'text'; // Default to text design\r\n  @Prop() separator: 'chevron_right' | 'pen_size_2' = 'chevron_right'; // Default to chevron separator\r\n  @Prop() aria_label?: string = ''; \r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Element() el: HTMLElement;\r\n\r\n  breadcrumbs: { text: string; icon: string; url: string }[] = [];\r\n\r\n  componentWillLoad() {\r\n    const breadcrumbsData = this.el.getAttribute('data-breadcrumbs');\r\n    if (breadcrumbsData) {\r\n      this.breadcrumbs = JSON.parse(breadcrumbsData);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={this.component_mode}>\r\n          <nav aria-label={this.aria_label} class={`${this.custom_class}`}>\r\n            <ol class=\"dda-breadcrumb\">\r\n              {this.breadcrumbs && this.breadcrumbs.map((crumb, index) => (\r\n                <li class={`dda-breadcrumb-item ${index === this.breadcrumbs.length - 1 ? 'active' : ''}`}>\r\n                  <a href={crumb.url}>\r\n                    {this.design !== 'text' && <i class={`material-icons`} aria-hidden=\"true\">{crumb.icon}</i>}\r\n                    {this.design !== 'icon' && <span>{crumb.text}</span>}\r\n                  </a>\r\n                  {index < this.breadcrumbs.length - 1 && (\r\n                    <i class={`material-icons material-symbols-outlined`} aria-hidden=\"true\">{this.separator}</i>\r\n                  )}\r\n                </li>\r\n              ))}\r\n            </ol>\r\n          </nav>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dda-breadcrumb.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,skCAAskC,CAAC;AAChmC,4BAAe,gBAAgB;;ACD/B,MAAM,SAAS,GAAG,q5qDAAq5qD,CAAC;AACx6qD,4BAAe,SAAS;;MCMX,aAAa;IAL1B;;QAMU,WAAM,GAAkC,MAAM,CAAC;QAC/C,cAAS,GAAmC,eAAe,CAAC;QAC5D,eAAU,GAAY,EAAE,CAAC;QACzB,iBAAY,GAAY,EAAE,CAAC;QAE3B,oBAAe,GAAW,EAAE,CAAC;QAGrC,gBAAW,GAAkD,EAAE,CAAC;KAgCjE;IA9BC,iBAAiB;QACf,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;QACjE,IAAI,eAAe,EAAE;YACnB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;SAChD;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,IAC7B,0EAAiB,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,IAC7D,2DAAI,KAAK,EAAC,gBAAgB,IACvB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACrD,UAAI,KAAK,EAAE,uBAAuB,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE,EAAE,IACvF,SAAG,IAAI,EAAE,KAAK,CAAC,GAAG,IACf,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,SAAG,KAAK,EAAE,gBAAgB,iBAAc,MAAM,IAAE,KAAK,CAAC,IAAI,CAAK,EACzF,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,gBAAO,KAAK,CAAC,IAAI,CAAQ,CAClD,EACH,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,KAClC,SAAG,KAAK,EAAE,0CAA0C,iBAAc,MAAM,IAAE,IAAI,CAAC,SAAS,CAAK,CAC9F,CACE,CACN,CAAC,CACC,CACD,CACF,CACD,EACP;KACH;;;;;;;","names":[],"sources":["src/components/dda-breadcrumb/dda-breadcrumb.css?tag=dda-breadcrumb","src/global/global.css?tag=dda-breadcrumb","src/components/dda-breadcrumb/dda-breadcrumb.tsx"],"sourcesContent":[".dda-breadcrumb {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\n.dda-breadcrumb-item {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.dda-breadcrumb,\r\n.dda-breadcrumb-item{\r\n  gap: 10px;\r\n}\r\n\r\n.dda-breadcrumb-item a {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  text-decoration: none;\r\n  font-size: var(--font-caption);\r\n  gap: 4px;\r\n}\r\n.dda-breadcrumb-item a span{\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--dda-fw-500);\r\n}\r\n.light-mode .dda-breadcrumb-item a span{\r\n  color: var(--dda-neutral-0);\r\n}\r\n/**/\r\n.dda-breadcrumb-item i,\r\n.dda-breadcrumb-item svg {\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-breadcrumb-item i,\r\n.light-mode .dda-breadcrumb-item svg {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n:root[dir='rtl'] .dda-breadcrumb-item > i{\r\n  transform: rotate(180deg);\r\n}\r\n/**/\r\n.dda-breadcrumb-item .separator {\r\n  margin: 0 8px;\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-breadcrumb-item .separator {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n/**/\r\n.dda-breadcrumb-item.active a span{\r\n  color: var(--dda-on-surface-variant-30);\r\n  font-weight: var(--dda-fw-400);\r\n}\r\n.light-mode .dda-breadcrumb-item.active a span{\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiLight.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiLight.svg#DubaiLight\") format(\"svg\");\r\n  font-weight: 300;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiRegular.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiRegular.svg#DubaiRegular\") format(\"svg\");\r\n  font-weight: 400;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiMedium.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiMedium.svg#DubaiMedium\") format(\"svg\");\r\n  font-weight: 500;\r\n  font-style: normal;\r\n}\r\n\r\n@font-face {\r\n  font-family: \"Dubai\";\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\");\r\n  src: url(\"../assets/fonts/dubai/DubaiBold.eot\") format(\"embedded-opentype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff2\") format(\"woff2\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.woff\") format(\"woff\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.ttf\") format(\"truetype\"),\r\n    url(\"../assets/fonts/dubai/DubaiBold.svg#DubaiBold\") format(\"svg\");\r\n  font-weight: 700;\r\n  font-style: normal;\r\n}\r\n\r\n\r\n\r\n.material-flat-icon {\r\n  font-variation-settings:\r\n  'FILL' 1,\r\n  'wght' 400,\r\n  'GRAD' 0,\r\n  'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n  font-family: 'Material Symbols Outlined';\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 24px;\r\n  display: inline-block;\r\n  line-height: 1;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n  font-family: 'Material Icons';\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  font-size: 24px;\r\n  line-height: 1;\r\n  letter-spacing: normal;\r\n  text-transform: none;\r\n  display: inline-block;\r\n  white-space: nowrap;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  background-color: var(--dda-surface-100) !important;\r\n  font-family: \"Dubai\", Helvetica, sans-serif !important;\r\n  font-size: var(--font-caption) !important;\r\n  font-weight: var(--font-weight-regular) !important;\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0) !important;\r\n  margin: 0;\r\n}\r\nlegend{\r\n  font-size: inherit !important;\r\n}\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nul{\r\n  margin: 0;\r\n}\r\na{\r\n  text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1);  font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2);  font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3);  font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4);  font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5);  font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6);  font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title);  font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body);  font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption);  font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label);  font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n  text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0 !important;\r\n  padding: 0 !important;\r\n  list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n  background: none;\r\n  color: #ffffff;\r\n  border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n  background: #ffffff;\r\n  color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n  background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n  background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n  color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n  color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n  color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n  color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n  color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 0px;\r\n  overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n  border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n  border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n  border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n  border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n  gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n  gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n  gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n  gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n  gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n  gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n  gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n  gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n  gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n  gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n  text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n  align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n  align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n  align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n  align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n  position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n  position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n  position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n  position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n  position: -webkit-sticky !important;\r\n  position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n  top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n  top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n  top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n  bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n  bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n  bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n  left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n  left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n  left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n  right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n  right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n  right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n  border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: -1px;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  border: 0;\r\n}\r\n\r\n.maincontent{\r\n  padding-top: 170px;\r\n  padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n  .maincontent {\r\n      padding-top: 100px;\r\n  }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n  height: 1550px;\r\n} */\r\n","import { Component, Prop, h, Host, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-breadcrumb',\r\n  styleUrls: ['dda-breadcrumb.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaBreadcrumb {\r\n  @Prop() design: 'text' | 'icon-text' | 'icon' = 'text'; // Default to text design\r\n  @Prop() separator: 'chevron_right' | 'pen_size_2' = 'chevron_right'; // Default to chevron separator\r\n  @Prop() aria_label?: string = ''; \r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Prop() dataBreadcrumbs: string = \"\";\r\n  @Element() el: HTMLElement;\r\n\r\n  breadcrumbs: { text: string; icon: string; url: string }[] = [];\r\n\r\n  componentWillLoad() {\r\n    const breadcrumbsData = this.el.getAttribute('data-breadcrumbs');\r\n    if (breadcrumbsData) {\r\n      this.breadcrumbs = JSON.parse(breadcrumbsData);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={this.component_mode}>\r\n          <nav aria-label={this.aria_label} class={`${this.custom_class}`}>\r\n            <ol class=\"dda-breadcrumb\">\r\n              {this.breadcrumbs && this.breadcrumbs.map((crumb, index) => (\r\n                <li class={`dda-breadcrumb-item ${index === this.breadcrumbs.length - 1 ? 'active' : ''}`}>\r\n                  <a href={crumb.url}>\r\n                    {this.design !== 'text' && <i class={`material-icons`} aria-hidden=\"true\">{crumb.icon}</i>}\r\n                    {this.design !== 'icon' && <span>{crumb.text}</span>}\r\n                  </a>\r\n                  {index < this.breadcrumbs.length - 1 && (\r\n                    <i class={`material-icons material-symbols-outlined`} aria-hidden=\"true\">{this.separator}</i>\r\n                  )}\r\n                </li>\r\n              ))}\r\n            </ol>\r\n          </nav>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-header-menu_3.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-52b38a93.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-52b38a93.js';
 
 const ddaHeaderMenuCss = ".dda-mega-menu{margin:0;padding:0;list-style:none;display:flex;align-items:center}.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: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)}.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%);}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-header-menu li{list-style: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 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 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-subsubmenu{display:none;width:300px;position:absolute;inset-inline-start:100%;top:0;margin-inline-start:15px}.dda-default-subsubmenu.is-visible{display:block}.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-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-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 0 8px 55px}.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;}.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)}.dda-mega-menu-link .text-wrap{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)}.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}.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}}@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}}";
 const DdaHeaderMenuStyle0 = ddaHeaderMenuCss;
@@ -9,6 +9,8 @@ const DdaHeaderMenuStyle1 = globalCss$2;
 const DdaHeaderMenu = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.navigatorClick = createEvent(this, "navigatorClick", 7);
+        this.useNavigator = 'false';
         this.quickLinks = [];
         this.openIndex = null;
         this.openSubIndex = null;
@@ -32,12 +34,17 @@ const DdaHeaderMenu = class {
         }
         return this.quickLinks;
     }
-    handleToggle(index, hasSubmenu, event) {
+    handleToggle(index, hasSubmenu, event, item) {
         if (hasSubmenu) {
             event.preventDefault();
             this.openIndex = this.openIndex === index ? null : index;
             this.openSubIndex = null;
         }
+        else {
+            if (this.useNavigator == "true") {
+                this.navigatorClick.emit(item.url);
+            }
+        }
     }
     connectedCallback() {
         document.addEventListener('click', this.handleClickOutside);
@@ -59,7 +66,7 @@ const DdaHeaderMenu = class {
             const hasSubSubmenu = item.children && item.children.length > 0;
             const subSubmenuId = `subsubmenu-${submenuId}-${subIndex}`;
             const isSubOpen = this.openSubIndex === subIndex;
-            return (h("li", null, h("a", { href: item.url, id: item.headerMenuId, "aria-haspopup": hasSubSubmenu ? 'true' : undefined, "aria-expanded": hasSubSubmenu ? String(isSubOpen) : undefined, "aria-controls": hasSubSubmenu ? subSubmenuId : undefined, class: {
+            return (h("li", null, h("a", { href: this.useNavigator == "true" ? 'javascript:void(0)' : item.url, id: item.headerMenuId, "aria-haspopup": hasSubSubmenu ? 'true' : undefined, "aria-expanded": hasSubSubmenu ? String(isSubOpen) : undefined, "aria-controls": hasSubSubmenu ? subSubmenuId : undefined, class: {
                     'has-submenu': hasSubSubmenu,
                     'active': isSubOpen,
                 }, onClick: e => {
@@ -67,25 +74,38 @@ const DdaHeaderMenu = class {
                         e.preventDefault();
                         this.openSubIndex = this.openSubIndex === subIndex ? null : subIndex;
                     }
+                    else {
+                        if (this.useNavigator == "true") {
+                            this.navigatorClick.emit(item.url);
+                        }
+                    }
                 } }, item.headerMenuLabel), hasSubSubmenu && (h("div", { class: {
                     'dda-default-subsubmenu': true,
                     'is-visible': isSubOpen,
-                }, id: subSubmenuId, "aria-label": `${item.headerMenuLabel} Sub Submenu` }, h("div", { class: "dda-default-subsubmenu-content" }, h("span", { class: "dda-submenu-title" }, item.defaultSubMenuTitle || item.headerMenuLabel), h("ul", null, item.children.map((subItem, subItemIndex) => (h("li", null, h("a", { href: subItem.url, id: `${subSubmenuId}-${subItemIndex}` }, subItem.headerMenuLabel))))))))));
+                }, id: subSubmenuId, "aria-label": `${item.headerMenuLabel} Sub Submenu` }, h("div", { class: "dda-default-subsubmenu-content" }, h("span", { class: "dda-submenu-title" }, item.defaultSubMenuTitle || item.headerMenuLabel), h("ul", null, item.children.map((subItem, subItemIndex) => (h("li", null, h("a", {
+                // href={subItem.url}
+                href: this.useNavigator == "true" ? 'javascript:void(0)' : subItem.url, id: `${subSubmenuId}-${subItemIndex}`, onClick: () => this.useNavigator == "true" ? this.navigatorClick.emit(subItem.url) : ""
+            }, subItem.headerMenuLabel))))))))));
         }))));
     }
     renderMegaMenu(children, isOpen, submenuId, headerMenuLabel) {
         return (h("div", { class: {
                 'dda-main-megamenu': true,
                 '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("p", { "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 }, 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))))))))))))))));
+            }, 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("p", { "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))))))))))))))));
     }
     render() {
-        return (h(Host, { key: '064a072fe64e68ea9e13f4946973166a12b28e07' }, h("nav", { key: '097cd6902aaeea87c87ee52531d984339000e860', "aria-label": "Main navigation", class: "dda-header-menu" }, h("ul", { key: 'bbc629bd264e7f842e2cbfc5ab922e3f90c44555', class: "dda-mega-menu" }, this.parsedMenuItems.map((item, index) => {
+        return (h(Host, { key: '9b751c8feb5c55e83fa0bde2846dcadb21903ca6' }, h("nav", { key: '8bc7de374828bda347a7bb0d9e2ac1a5f662ccef', "aria-label": "Main navigation", class: "dda-header-menu" }, h("ul", { key: '34dfcb30a55285f48bd1d62e87f7a4209a53d173', 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}`;
             const type = item.type;
-            return (h("li", { key: `top-${index}` }, h("a", { href: item.url, "aria-haspopup": hasSubmenu ? 'true' : undefined, "aria-expanded": hasSubmenu ? String(isOpen) : undefined, "aria-controls": hasSubmenu ? submenuId : undefined, class: isOpen ? 'active' : '', onClick: e => this.handleToggle(index, hasSubmenu, e) }, item.headerMenuLabel), hasSubmenu && type === 'dda_default_submenu' &&
+            return (h("li", { key: `top-${index}` }, h("a", {
+                // href={item.url}
+                href: this.useNavigator == "true" ? 'javascript:void(0)' : item.url, "aria-haspopup": hasSubmenu ? 'true' : undefined, "aria-expanded": hasSubmenu ? String(isOpen) : undefined, "aria-controls": hasSubmenu ? submenuId : undefined, class: isOpen ? 'active' : '', onClick: e => this.handleToggle(index, hasSubmenu, e, item)
+            }, item.headerMenuLabel), hasSubmenu && type === 'dda_default_submenu' &&
                 this.renderDefaultSubmenu(item.children, isOpen, submenuId, item.headerMenuLabel), hasSubmenu && type === 'dda_main_megamenu' &&
                 this.renderMegaMenu(item.children, isOpen, submenuId, item.headerMenuLabel)));
         })))));
@@ -146,7 +166,7 @@ const DdaInput = class {
             this.component_mode,
         ].filter(Boolean).join(' ');
         return (h(Host, { key: 'e674876cdf3f3fc4a9a51edc7d605ed980c8140e' }, h("div", { key: '8af8a1c75ae4c68e390520ae5d4dc2899ed912ee', class: inputClass }, this.label &&
-            h("label", { key: '524e0dd97589c47acbba6c84f526d50e83772b90', htmlFor: this.input_id, class: "dda-input-label", id: `${this.input_id}-label` }, this.label), h("input", { key: '95f57d97c099517e34dbad3a33bd1bab1fbc9c87', id: this.input_id, name: this.input_name, class: `dda-input-field dda-input-text ${this.type === 'date' && this.value ? 'has-value' : ''}`, type: this.type, role: this.input_role, placeholder: this.placeholder, value: this.internalValue || this.value, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.validation_type === 'error' ? 'true' : 'false', "aria-describedby": this.validation_id, "aria-label": !this.label ? this.aria_label : undefined, onInput: (event) => {
+            h("label", { key: '524e0dd97589c47acbba6c84f526d50e83772b90', htmlFor: this.input_id, class: "dda-input-label", id: `${this.input_id}-label` }, this.label), h("input", { key: '502b5fd4c8b8f9f58d0c0809c98f70b3edefcd60', id: this.input_id, name: this.input_name, class: `dda-input-field dda-input-text ${this.type === 'date' && this.value ? 'has-value' : ''}`, type: this.type, role: this.input_role, placeholder: this.placeholder, value: this.internalValue || this.value, "aria-required": this.required ? 'true' : undefined, "aria-invalid": this.validation_type === 'error' ? 'true' : 'false', "aria-describedby": `${this.input_id}-label`, "aria-label": !this.label ? this.aria_label : undefined, onInput: (event) => {
                 this.internalValue = event.target.value;
                 this.inputChanged.emit(event);
             }, onBlur: (event) => {