@dubai-design-system/components-js 4.1.0 → 5.0.1

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

@@ -1 +0,0 @@
-{"file":"dda-breadcrumb.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,m9BAAm9B,CAAC;AAC7+B,4BAAe,gBAAgB;;ACD/B,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,4BAAe,SAAS;;MCMX,aAAa;IAL1B;;QAMU,WAAM,GAAkC,MAAM,CAAC;QAC/C,cAAS,GAAmC,eAAe,CAAC;QAC5D,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,0EAAgB,YAAY,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,IACxD,2DAAI,KAAK,EAAC,gBAAgB,IACvB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MACrD,UAAI,KAAK,EAAE,mBAAmB,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,QAAQ,GAAG,EAAE,EAAE,IACnF,SAAG,IAAI,EAAE,KAAK,CAAC,GAAG,IACf,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,SAAG,KAAK,EAAE,gBAAgB,IAAG,KAAK,CAAC,IAAI,CAAK,EACtE,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,gBAAgB,IAAG,IAAI,CAAC,SAAS,CAAK,CACjD,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.breadcrumb-item {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.dda-breadcrumb,\r\n.breadcrumb-item{\r\n  gap: 10px;\r\n}\r\n\r\n.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(--dda-fs-body-lg);\r\n  gap: 4px;\r\n}\r\n.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 .breadcrumb-item a span{\r\n  color: var(--dda-neutral-0);\r\n}\r\n/**/\r\n.breadcrumb-item i,\r\n.breadcrumb-item svg {\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .breadcrumb-item i,\r\n.light-mode .breadcrumb-item svg {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n/**/\r\n.breadcrumb-item .separator {\r\n  margin: 0 8px;\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .breadcrumb-item .separator {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n/**/\r\n.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 .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('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.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@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:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\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;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\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-black {\r\n  color: var(--dda-on-surface-0);\r\n}\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\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\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","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() 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=\"breadcrumb\" class={`${this.custom_class}`}>\r\n            <ol class=\"dda-breadcrumb\">\r\n              {this.breadcrumbs && this.breadcrumbs.map((crumb, index) => (\r\n                <li class={`breadcrumb-item ${index === this.breadcrumbs.length - 1 ? 'active' : ''}`}>\r\n                  <a href={crumb.url}>\r\n                    {this.design !== 'text' && <i class={`material-icons`}>{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`}>{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-button.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-button.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,64ZAA64Z,CAAC;AACn6Z,wBAAe,YAAY;;ACD3B,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,wBAAe,SAAS;;MCMX,SAAS;IALtB;;;QAOU,SAAI,GAAW,QAAQ,CAAC;;QAExB,aAAQ,GAAY,KAAK,CAAC;;QAE1B,eAAU,GAAW,EAAE,CAAC;QACxB,aAAQ,GAAW,EAAE,CAAC;QACtB,eAAU,GAAY,EAAE,CAAC;QACzB,iBAAY,GAAW,SAAS,CAAC;QAEjC,iBAAY,GAAY,EAAE,CAAC;QAC3B,sBAAiB,GAAY,EAAE,CAAC;QAEhC,iBAAY,GAAY,EAAE,CAAC;KAmCpC;IA7BC,MAAM;QACJ,MAAM,WAAW,GAAG;YAClB,SAAS;YACT,aAAa,IAAI,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,IAAI,GAAG,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YACxC,IAAI,CAAC,YAAY,GAAG,aAAa,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YACzD,IAAI,CAAC,iBAAiB,GAAG,YAAY,IAAI,CAAC,iBAAiB,EAAE,GAAG,EAAE;YAClE,IAAI,CAAC,GAAG,GAAG,WAAW,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACE,EAAC,IAAI,uDACH,+DACE,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,UAAU,EAC3B,OAAO,EAAE,IAAI,CAAC,YAAY,IAEzB,IAAI,CAAC,UAAU,IAAI,0DAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,UAAU,CAAK,EACnE,8DAAQ,EACP,IAAI,CAAC,QAAQ,IAAI,0DAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,QAAQ,CAAM,CACzD,CACJ,EACP;KACH;;;;;;","names":[],"sources":["src/global/dda-button.css?tag=dda-button","src/global/global.css?tag=dda-button","src/components/dda-button/dda-button.tsx"],"sourcesContent":[".dda-btn {\r\n  height: 44px;\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-500);\r\n  padding: 10px 15px;\r\n  border-radius: 4px;\r\n  outline: 0;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: .5rem;\r\n}\r\n/**/\r\n.btn-color-default-primary{\r\n  background-color: var(--dda-color-primary-40);\r\n  border: solid 1px var(--dda-color-primary-40);\r\n  color: var(--dda-on-primary-100);\r\n}\r\n.btn-color-default-primary:hover {\r\n  background-color: var(--dda-on-primary-variant-30);\r\n  border: solid 1px var(--dda-on-primary-variant-30);\r\n}\r\n.btn-color-default-primary:focus {\r\n  background-color: var(--dda-on-primary-variant-20);\r\n  outline: var(--dda-on-primary-variant-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-default-primary,\r\n.light-mode .btn-color-default-primary{\r\n  background-color: var(--dda-primary-40);\r\n  border: solid 1px var(--dda-primary-40);\r\n  color: var(--dda-primary-100);\r\n}\r\n.light-mode.btn-color-default-primary:hover,\r\n.light-mode .btn-color-default-primary:hover {\r\n  background-color: var(--dda-primary-30);\r\n  border: solid 1px var(--dda-primary-30);\r\n}\r\n.light-mode.btn-color-default-primary:focus,\r\n.light-mode .btn-color-default-primary:focus {\r\n  background-color: var(--dda-primary-20);\r\n  outline: var(--dda-primary-20);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-default-secondary {\r\n  background-color: var(--dda-on-primary-98);\r\n  border: solid 1px var(--dda-on-primary-98);\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.btn-color-default-secondary:hover {\r\n  background-color: var(--dda-on-primary-94);\r\n  border: solid 1px var(--dda-on-primary-94);\r\n}\r\n.btn-color-default-secondary:focus {\r\n  background-color: var(--dda-primary-variant-92);\r\n  outline: var(--dda-primary-variant-92);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-default-secondary {\r\n  background-color: var(--dda-primary-98);\r\n  border: solid 1px var(--dda-primary-98);\r\n  color: var(--dda-primary-40);\r\n}\r\n.light-mode.btn-color-default-secondary:hover {\r\n  background-color: var(--dda-primary-94);\r\n  border: solid 1px var(--dda-primary-94);\r\n}\r\n.light-mode.btn-color-default-secondary:focus {\r\n  background-color: var(--dda-primary-92);\r\n  outline: var(--dda-primary-92);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-default-tertiary {\r\n  background-color: var(--dda-surface-100);\r\n  border: solid 1px var(--dda-surface-90);\r\n  color: var(--dda-color-primary-40)\r\n}\r\n.btn-color-default-tertiary:hover {\r\n  background-color: var(--dda-on-primary-98);\r\n}\r\n.btn-color-default-tertiary:focus {\r\n  background-color: var(--dda-on-primary-96);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-default-tertiary {\r\n  background-color: var(--dda-neutral-100);\r\n  border: solid 1px var(--dda-neutral-90);\r\n  color: var(--dda-primary-40)\r\n}\r\n.light-mode.btn-color-default-tertiary:hover {\r\n  background-color: var(--dda-primary-98);\r\n}\r\n.light-mode.btn-color-default-tertiary:focus {\r\n  background-color: var(--dda-primary-96);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-default-link {\r\n  height: 22px;\r\n  background-color: transparent !important;\r\n  border: transparent !important;\r\n  color: var(--dda-color-primary-40);\r\n  padding: 0px;\r\n}\r\n.light-mode.btn-color-default-link {\r\n  color: var(--dda-primary-40);\r\n}\r\n.btn-color-default-link:focus{\r\n  outline: auto;\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-primary {\r\n  background-color: var(--dda-color-error-40);\r\n  border: solid 1px var(--dda-color-error-40);\r\n  color: var(--dda-on-primary-100);\r\n}\r\n.btn-color-error-primary:hover {\r\n  background-color: var(--dda-color-error-40);\r\n  border: solid 1px var(--dda-color-error-40);\r\n}\r\n.btn-color-error-primary:focus {\r\n  background-color: var(--dda-color-error-30);\r\n  border: solid 1px var(--dda-color-error-30);\r\n  outline: var(--dda-color-error-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-error-primary {\r\n  background-color: var(--dda-error-40);\r\n  border: solid 1px var(--dda-error-40);\r\n  color: var(--dda-primary-100);\r\n}\r\n.light-mode.btn-color-error-primary:hover {\r\n  background-color: var(--dda-error-40);\r\n  border: solid 1px var(--dda-error-40);\r\n}\r\n.light-mode.btn-color-error-primary:focus {\r\n  background-color: var(--dda-error-30);\r\n  border: solid 1px var(--dda-error-30);\r\n  outline: var(--dda-error-30);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-secondary {\r\n  background-color: var(--dda-error-variant-95);\r\n  border: solid 1px var(--dda-error-variant-95);\r\n  color: var(--dda-color-error-40);\r\n}\r\n.btn-color-error-secondary:hover {\r\n  background-color: var(--dda-on-error-98);\r\n  border: solid 1px var(--dda-on-error-98);\r\n}\r\n.btn-color-error-secondary:focus {\r\n  background-color: var(--dda-on-error-96);\r\n  border: solid 1px var(--dda-on-error-96);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-error-secondary {\r\n  background-color: var(--dda-error-95);\r\n  border: solid 1px var(--dda-error-95);\r\n  color: var(--dda-error-40);\r\n}\r\n.light-mode.btn-color-error-secondary:hover {\r\n  background-color: var(--dda-error-98);\r\n  border: solid 1px var(--dda-error-98);\r\n}\r\n.light-mode.btn-color-error-secondary:focus {\r\n  background-color: var(--dda-error-96);\r\n  border: solid 1px var(--dda-error-96);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-tertiary {\r\n  background-color: var(--dda-surface-100);\r\n  border: solid 1px var(--dda-surface-90);\r\n  color: var(--dda-color-error-40);\r\n}\r\n.btn-color-error-tertiary:hover {\r\n  background-color: var(--dda-on-error-98);\r\n}\r\n.btn-color-error-tertiary:focus {\r\n  background-color: var(--dda-on-error-96);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-error-tertiary {\r\n  background-color: var(--dda-neutral-100);\r\n  border: solid 1px var(--dda-neutral-90);\r\n  color: var(--dda-error-40);\r\n}\r\n.light-mode.btn-color-error-tertiary:hover {\r\n  background-color: var(--dda-error-98);\r\n}\r\n.light-mode.btn-color-error-tertiary:focus {\r\n  background-color: var(--dda-error-96);\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-error-link {\r\n  height: 22px;\r\n  background-color: transparent !important;\r\n  border: transparent !important;\r\n  color: var(--dda-color-error-40);\r\n  padding: 0px;\r\n}\r\n.light-mode.btn-color-error-link {\r\n  color: var(--dda-error-40);\r\n}\r\n.btn-color-error-link:focus{\r\n  outline: auto;\r\n}\r\n/**/\r\n\r\n\r\n.btn-color-onsurface-primary {\r\n  background-color: var(--dda-on-surface-0);\r\n  border: solid 1px var(--dda-on-surface-0);\r\n  color: var(--dda-surface-100);\r\n}\r\n.btn-color-onsurface-primary:hover {\r\n  background-color: var(--dda-on-surface-20);\r\n  border: solid 1px var(--dda-on-surface-20);\r\n}\r\n.btn-color-onsurface-primary:focus {\r\n  background-color: var(--dda-on-surface-30);\r\n  border: solid 1px var(--dda-on-surface-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-onsurface-primary {\r\n  background-color: var(--dda-neutral-0);\r\n  border: solid 1px var(--dda-neutral-0);\r\n  color: var(--dda-neutral-100);\r\n}\r\n.light-mode.btn-color-onsurface-primary:hover {\r\n  background-color: var(--dda-neutral-20);\r\n  border: solid 1px var(--dda-neutral-20);\r\n}\r\n.light-mode.btn-color-onsurface-primary:focus {\r\n  background-color: var(--dda-neutral-30);\r\n  border: solid 1px var(--dda-neutral-30);\r\n}\r\n/**/\r\n\r\n.btn-color-onsurface-secondary {\r\n  background-color: var(--dda-surface-96);\r\n  border: solid 1px var(--dda-surface-96);\r\n  color: var(--dda-on-surface-0);\r\n}\r\n.btn-color-onsurface-secondary:hover {\r\n  background-color: var(--dda-surface-94);\r\n  border: solid 1px var(--dda-surface-94);\r\n}\r\n.btn-color-onsurface-secondary:focus {\r\n  background-color: var(--dda-surface-92);\r\n  border: solid 1px var(--dda-surface-92);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-onsurface-secondary {\r\n  background-color: var(--dda-neutral-96);\r\n  border: solid 1px var(--dda-neutral-96);\r\n  color: var(--dda-neutral-0);\r\n}\r\n.light-mode.btn-color-onsurface-secondary:hover {\r\n  background-color: var(--dda-neutral-94);\r\n  border: solid 1px var(--dda-neutral-94);\r\n}\r\n.light-mode.btn-color-onsurface-secondary:focus {\r\n  background-color: var(--dda-neutral-92);\r\n  border: solid 1px var(--dda-neutral-92);\r\n}\r\n/**/\r\n\r\n.btn-color-onsurface-tertiary {\r\n  background-color: var(--dda-surface-100);\r\n  border: solid 1px var(--dda-surface-90);\r\n  color: var(--dda-on-surface-0);\r\n}\r\n.btn-color-onsurface-tertiary:hover {\r\n  background-color: var(--dda-surface-94);\r\n}\r\n.btn-color-onsurface-tertiary:focus {\r\n  background-color: var(--dda-surface-90);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-onsurface-tertiary {\r\n  background-color: var(--dda-neutral-100);\r\n  border: solid 1px var(--dda-neutral-90);\r\n  color: var(--dda-neutral-0);\r\n}\r\n.light-mode.btn-color-onsurface-tertiary:hover {\r\n  background-color: var(--dda-neutral-94);\r\n}\r\n.light-mode.btn-color-onsurface-tertiary:focus {\r\n  background-color: var(--dda-neutral-90);\r\n}\r\n/**/\r\n\r\n.btn-color-onsurface-link {\r\n  height: 22px;\r\n  background-color: transparent !important;\r\n  border: transparent !important;\r\n  color: var(--dda-on-surface-0);\r\n  padding: 0px;\r\n}\r\n.light-mode.btn-color-onsurface-link {\r\n  color: var(--dda-neutral-0);\r\n}\r\n.btn-color-onsurface-link:focus{\r\n  outline: auto;\r\n}\r\n/**/\r\n\r\n.btn-color-secondary {\r\n  background-color: var(--dda-color-secondary-40);\r\n  border: solid 1px var(--dda-color-secondary-40);\r\n  color: var(--dda-on-secondary-100);\r\n}\r\n.btn-color-secondary:hover {\r\n  background-color: var(--dda-color-secondary-30);\r\n  border: solid 1px var(--dda-color-secondary-30);\r\n}\r\n.btn-color-secondary:focus {\r\n  background-color: var(--dda-color-secondary-20);\r\n  border: solid 1px var(--dda-color-secondary-20);\r\n  outline: var(--dda-color-secondary-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-secondary {\r\n  background-color: var(--dda-secondary-40);\r\n  border: solid 1px var(--dda-secondary-40);\r\n  color: var(--dda-secondary-100);\r\n}\r\n.light-mode.btn-color-secondary:hover {\r\n  background-color: var(--dda-secondary-30);\r\n  border: solid 1px var(--dda-secondary-30);\r\n}\r\n.light-mode.btn-color-secondary:focus {\r\n  background-color: var(--dda-secondary-20);\r\n  border: solid 1px var(--dda-secondary-20);\r\n  outline: var(--dda-secondary-20);\r\n}\r\n/**/\r\n\r\n.btn-color-success {\r\n  background-color: var(--dda-color-success-50);\r\n  border: solid 1px var(--dda-color-success-50);\r\n  color: var(--dda-on-success-100);\r\n}\r\n.btn-color-success:hover {\r\n  background-color: var(--dda-color-success-40);\r\n  border: solid 1px var(--dda-color-success-40);\r\n}\r\n.btn-color-success:focus {\r\n  background-color: var(--dda-color-success-30);\r\n  border: solid 1px var(--dda-color-success-30);\r\n  outline: var(--dda-color-success-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-success {\r\n  background-color: var(--dda-success-50);\r\n  border: solid 1px var(--dda-success-50);\r\n  color: var(--dda-success-100);\r\n}\r\n.light-mode.btn-color-success:hover {\r\n  background-color: var(--dda-success-40);\r\n  border: solid 1px var(--dda-success-40);\r\n}\r\n.light-mode.btn-color-success:focus {\r\n  background-color: var(--dda-success-30);\r\n  border: solid 1px var(--dda-success-30);\r\n  outline: var(--dda-success-30);\r\n}\r\n/**/\r\n\r\n.btn-color-warning {\r\n  background-color: var(--dda-color-warning-50);\r\n  border: solid 1px var(--dda-color-warning-50);\r\n  color: var(--dda-on-warning-100);\r\n}\r\n.btn-color-warning:hover {\r\n  background-color: var(--dda-color-warning-40);\r\n  border: solid 1px var(--dda-color-warning-40);\r\n  border-color: var(--dda-color-warning-40);\r\n}\r\n.btn-color-warning:focus {\r\n  background-color: var(--dda-color-warning-30);\r\n  border: solid 1px var(--dda-color-warning-30);\r\n  outline: var(--dda-color-warning-30);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-warning {\r\n  background-color: var(--dda-warning-50);\r\n  border: solid 1px var(--dda-warning-50);\r\n  color: var(--dda-warning-100);\r\n}\r\n.light-mode.btn-color-warning:hover {\r\n  background-color: var(--dda-warning-40);\r\n  border: solid 1px var(--dda-warning-40);\r\n  border-color: var(--dda-warning-40);\r\n}\r\n.light-mode.btn-color-warning:focus {\r\n  background-color: var(--dda-warning-30);\r\n  border: solid 1px var(--dda-warning-30);\r\n  outline: var(--dda-warning-30);\r\n}\r\n/**/\r\n\r\n.btn-color-surface {\r\n  background-color: var(--dda-surface-100);\r\n  border: solid 1px var(--dda-surface-100);\r\n  color: var(--dda-on-surface-0);\r\n}\r\n.btn-color-surface:hover {\r\n  background-color: var(--dda-surface-94);\r\n  border: solid 1px var(--dda-surface-94);\r\n}\r\n.btn-color-surface:focus {\r\n  background-color: var(--dda-surface-92);\r\n  border: solid 1px var(--dda-surface-92);\r\n  outline: var(--dda-on-surface-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-surface {\r\n  background-color: var(--dda-neutral-100);\r\n  border: solid 1px var(--dda-neutral-100);\r\n  color: var(--dda-neutral-0);\r\n}\r\n.light-mode.btn-color-surface:hover {\r\n  background-color: var(--dda-neutral-94);\r\n  border: solid 1px var(--dda-neutral-94);\r\n}\r\n.light-mode.btn-color-surface:focus {\r\n  background-color: var(--dda-neutral-92);\r\n  border: solid 1px var(--dda-neutral-92);\r\n  outline: var(--dda-neutral-20);\r\n}\r\n/**/\r\n\r\n.btn-color-surface-variant {\r\n  background-color: var(--dda-on-surface-variant-30);\r\n  border: solid 1px var(--dda-on-surface-variant-30);\r\n  color: var(--dda-surface-variant-90);\r\n}\r\n.btn-color-surface-variant:hover {\r\n  background-color: var(--dda-on-surface-variant-25);\r\n  border: solid 1px var(--dda-on-surface-variant-25);\r\n}\r\n.btn-color-surface-variant:focus {\r\n  background-color: var(--dda-on-surface-variant-20);\r\n  border: solid 1px var(--dda-on-surface-variant-20);\r\n  outline: var(--dda-on-surface-variant-20);\r\n}\r\n/*light*/\r\n.light-mode.btn-color-surface-variant {\r\n  background-color: var(--dda-neutral-variant-30);\r\n  border: solid 1px var(--dda-neutral-variant-30);\r\n  color: var(--dda-neutral-variant-90);\r\n}\r\n.light-mode.btn-color-surface-variant:hover {\r\n  background-color: var(--dda-neutral-variant-25);\r\n  border: solid 1px var(--dda-neutral-variant-25);\r\n}\r\n.light-mode.btn-color-surface-variant:focus {\r\n  background-color: var(--dda-neutral-variant-20);\r\n  border: solid 1px var(--dda-neutral-variant-20);\r\n  outline: var(--dda-neutral-variant-20);\r\n}\r\n/**/\r\n\r\n.btn-color-disabled {\r\n  background-color: var(--dda-surface-92) !important;\r\n  border: solid 1px var(--dda-surface-92) !important;\r\n  color: var(--dda-neutral-60) !important;\r\n  cursor: not-allowed;\r\n}\r\n.light-mode.btn-color-disabled {\r\n  background-color: var(--dda-neutral-92) !important;\r\n  border: solid 1px var(--dda-neutral-92) !important;\r\n  color: var(--dda-neutral-60) !important;\r\n  cursor: not-allowed;\r\n}\r\n/**/\r\n\r\n.btn-size-sm {\r\n  height: 40px;\r\n  padding: 8px 10px;\r\n}\r\n\r\n.btn-size-md {\r\n  height: 44px;\r\n  padding: 10px 15px;\r\n}\r\n\r\n.btn-size-lg {\r\n  height: 48px;\r\n  padding: 12px 17px;\r\n}\r\n\r\n.btn-size-xl {\r\n  height: 56px;\r\n  padding: 16px 23px;\r\n  gap: 8px;\r\n}\r\n\r\n.icon-btn-default {\r\n  height: 44px;\r\n  min-width: 44px;\r\n  padding: 8px 0;\r\n  border-radius: 4px;\r\n}\r\n\r\n.icon-btn-circle {\r\n  height: 44px;\r\n  min-width: 44px;\r\n  padding: 8px 0;\r\n  border-radius: 100px;\r\n}\r\n\r\n.btn-shape-default {\r\n  border-radius: 4px;\r\n}\r\n\r\n.btn-shape-circle {\r\n  border-radius: 100px;\r\n}\r\n\r\n.icon-btn-default.btn-size-sm,\r\n.icon-btn-circle.btn-size-sm {\r\n  height: 40px;\r\n  min-width: 40px;\r\n  padding: 8px 0;\r\n}\r\n\r\n.icon-btn-default.btn-size-md,\r\n.icon-btn-circle.btn-size-md {\r\n  height: 44px;\r\n  min-width: 44px;\r\n  padding: 10px 0;\r\n}\r\n\r\n.icon-btn-default.btn-size-lg,\r\n.icon-btn-circle.btn-size-lg {\r\n  height: 48px;\r\n  min-width: 48px;\r\n  padding: 12px 0;\r\n}\r\n\r\n.icon-btn-default.btn-size-xl,\r\n.icon-btn-circle.btn-size-xl {\r\n  height: 56px;\r\n  min-width: 56px;\r\n  padding: 16px 0;\r\n}\r\n\r\n.dda-btn-icon i,\r\n.dda-btn-icon svg {\r\n  font-size: 20px;\r\n}\r\n\r\n.dda-btn i.icon-start,\r\n.dda-btn svg.icon-start {\r\n  font-size: 20px;\r\n}\r\n\r\n.dda-btn i.icon-end,\r\n.dda-btn svg.icon-end {\r\n  font-size: 15px;\r\n}\r\n\r\n\r\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.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@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:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\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;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\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-black {\r\n  color: var(--dda-on-surface-0);\r\n}\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\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\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","import { Host, Component, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-button',\r\n  styleUrls: ['../../global/dda-button.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaButton {\r\n  /** Type of button, e.g., \"button\", \"submit\" */\r\n  @Prop() type: string = 'button';\r\n  /** Disable the button */\r\n  @Prop() disabled: boolean = false;\r\n  /** Icon class for the starting icon */\r\n  @Prop() start_icon: string = '';\r\n  @Prop() end_icon: string = ''; // icon class\r\n  @Prop() aria_label?: string = '';\r\n  @Prop() button_color: string = 'primary'; // e.g., 'primary', 'error'\r\n  @Prop() size?: string; // e.g., 'sm', 'md', 'lg'\r\n  @Prop() button_shape?: string = '';\r\n  @Prop() icon_button_shape?: string = '';\r\n  @Prop() gap?: number;\r\n  @Prop() custom_class?: string = ''; // Custom class prop\r\n  @Prop() component_mode?: string;\r\n  @Prop() button_id: string;\r\n  /** Function to be called on button click */\r\n  @Prop() clickHandler?: (event: MouseEvent) => void;\r\n\r\n  render() {\r\n    const buttonClass = [\r\n      'dda-btn',\r\n      `btn-color-${this.button_color}`,\r\n      this.size ? `btn-size-${this.size}` : '',\r\n      this.button_shape ? `btn-shape-${this.button_shape}` : '',\r\n      this.icon_button_shape ? `icon-btn-${this.icon_button_shape}` : '',\r\n      this.gap ? `dda-gap-${this.gap}` : '',\r\n      this.custom_class, // Include custom class\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <button\r\n          id={this.button_id}\r\n          type={this.type}\r\n          class={buttonClass}\r\n          disabled={this.disabled}\r\n          aria-label={this.aria_label}\r\n          onClick={this.clickHandler} // Bind the onClick prop here\r\n        >\r\n          {this.start_icon && <i class=\"material-icons\">{this.start_icon}</i>}\r\n          <slot />\r\n          {this.end_icon && <i class=\"material-icons\">{this.end_icon }</i>}\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"dda-checkbox.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,yuEAAyuE,CAAC;AACjwE,0BAAe,cAAc;;ACD7B,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,0BAAe,SAAS;;MCMX,WAAW;IALxB;;QAcU,iBAAY,GAAY,EAAE,CAAC;KA6BpC;IAzBC,MAAM;QACJ,MAAM,aAAa,GAAG;YACpB,wBAAwB;YACxB,IAAI,CAAC,IAAI,GAAG,gBAAgB,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YAC5C,IAAI,CAAC,UAAU,GAAG,gBAAgB,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE;YACxD,IAAI,CAAC,YAAY,GAAI,IAAI,CAAC,YAAY,GAAG,EAAE;YAC3C,IAAI,CAAC,eAAe,GAAG,gBAAgB,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE;YAClE,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,aAAa,IACvB,4EAAmB,IAAI,CAAC,UAAU,EAAE,IAAI,EAAC,UAAU,EAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAG,EACtH,8DAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,IAC3B,0DAAG,KAAK,EAAC,gBAAgB,YAAU,EACnC,4DACE,6DAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,UAAU,CAAQ,EACxD,IAAI,CAAC,UAAU,IAAI,6DAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,UAAU,CAAQ,CAChF,CACE,CACJ,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/dda-checkbox/dda-checkbox.css?tag=dda-checkbox","src/global/global.css?tag=dda-checkbox","src/components/dda-checkbox/dda-checkbox.tsx"],"sourcesContent":[".dda-checkbox-container {\r\n  display: inline-flex;\r\n  align-items: center;\r\n}\r\n\r\n.dda-checkbox-container input[type=\"checkbox\"] {\r\n  width: 0;\r\n  height: 0;\r\n  position: absolute;\r\n  opacity: 0;\r\n}\r\n\r\n.dda-checkbox-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\r\n.dda-checkbox-container i,\r\n.dda-checkbox-container svg {\r\n  display: flex;\r\n  color: var(--dda-color-primary-40);\r\n  border: solid 2px var(--dda-color-primary-40);\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n.light-mode.dda-checkbox-container i,\r\n.light-mode.dda-checkbox-container svg{\r\n  color: var(--dda-primary-40);\r\n  border: solid 2px var(--dda-primary-40);\r\n}\r\n\r\n.dda-checkbox-square i,\r\n.dda-checkbox-square svg {\r\n  border-radius: 6px;\r\n}\r\n\r\n.dda-checkbox-rounded i,\r\n.dda-checkbox-rounded svg {\r\n  border-radius: 22px;\r\n}\r\n\r\n\r\n.dda-checkbox-sm label i,\r\n.dda-checkbox-sm label svg {\r\n  width: 16px;\r\n  height: 16px;\r\n  font-size: 12px;\r\n}\r\n\r\n.dda-checkbox-md label i,\r\n.dda-checkbox-md label svg {\r\n  width: 20px;\r\n  height: 20px;\r\n  font-size: 16px;\r\n}\r\n\r\n.dda-checkbox-lg label i,\r\n.dda-checkbox-lg label svg {\r\n  width: 22px;\r\n  height: 22px;\r\n  font-size: 19px;\r\n}\r\n\r\n.dda-checkbox-container input[type=\"checkbox\"]:checked~label i,\r\n.dda-checkbox-container input[type=\"checkbox\"]:checked~label svg {\r\n  background: var(--dda-color-primary-40);\r\n  color: var(--dda-neutral-100);\r\n}\r\n\r\n.dda-checkbox-container input[type=\"checkbox\"]:checked:focus-within~label i,\r\n.dda-checkbox-container input[type=\"checkbox\"]:checked:focus-within~label svg {\r\n  -webkit-box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);\r\n  -moz-box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);\r\n  box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);\r\n}\r\n\r\n.dda-checkbox-container label p {\r\n  margin: 0px;\r\n}\r\n\r\n.dda-checkbox-title {\r\n  font-size: var(--dda-fs-body-lg);\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--dda-fw-500);\r\n  display: block;\r\n}\r\n\r\n.light-mode .dda-checkbox-title{\r\n  color: var(--dda-neutral-0);\r\n}\r\n\r\n.dda-checkbox-lg label .dda-checkbox-title {\r\n  font-size: var(--dda-fs-title-sm);\r\n}\r\n\r\n.dda-checkbox-supporting {\r\n  display: block;\r\n  font-size: var(--dda-fs-label-lg);\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n\r\n.light-mode  .dda-checkbox-supporting {\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-checkbox-lg label .dda-checkbox-supporting {\r\n  font-size: var(--dda-fs-body-lg);\r\n}\r\n\r\n.dda-checkbox-disabled i,\r\n.dda-checkbox-disabled svg{\r\n  color: var(--dda-neutral-70);\r\n  border: solid 2px var(--dda-surface-90);\r\n}\r\n.dda-checkbox-container.dda-checkbox-disabled{\r\n  pointer-events: none;\r\n}","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.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@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:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\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;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\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-black {\r\n  color: var(--dda-on-surface-0);\r\n}\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\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\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","import { Component, Prop, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-checkbox',\r\n  styleUrls: ['dda-checkbox.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaCheckbox {\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() checked: boolean;\r\n  @Prop() checkbox_status?: string;\r\n  @Prop() size?: string; // e.g., 'sm', 'md', 'lg'\r\n  @Prop() style_type?: string; // Default to 'square'\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Prop() aria_label?: string;\r\n\r\n  render() {\r\n    const checkboxClass = [\r\n      'dda-checkbox-container',\r\n      this.size ? `dda-checkbox-${this.size}` : '',\r\n      this.style_type ? `dda-checkbox-${this.style_type}` : '',\r\n      this.custom_class ?  this.custom_class : '',\r\n      this.checkbox_status ? `dda-checkbox-${this.checkbox_status}` : '',\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n    \r\n    return (\r\n      <Host>\r\n        <div class={checkboxClass}>\r\n          <input aria-label={this.aria_label} type=\"checkbox\" id={this.input_id} name={this.group_name} checked={this.checked}/>\r\n          <label htmlFor={this.input_id}>\r\n            <i class=\"material-icons\">check</i>\r\n            <p>\r\n              <span class=\"dda-checkbox-title\">{this.title_text}</span>\r\n              {this.supporting && <span class=\"dda-checkbox-supporting\">{this.supporting}</span>}\r\n            </p>\r\n          </label>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"dda-chip.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,05DAA05D,CAAC;AAC96D,sBAAe,UAAU;;ACDzB,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,sBAAe,SAAS;;MCMX,OAAO;IALpB;;QAMU,aAAQ,GAAW,SAAS,CAAC;QAC7B,YAAO,GAAY,EAAE,CAAC;QAEtB,oBAAe,GAAY,KAAK,CAAC;KAqB1C;IAfC,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,aAAa,IAAI,CAAC,IAAI,gBAAgB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,IAC3I,IAAI,CAAC,IAAI,GAAG,SAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,IAAI,CAAK,GAAG,IAAI,EAC7D,+DAAM,8DAAQ,CAAO,EACpB,IAAI,CAAC,eAAe,KACnB,6DAAM,KAAK,EAAC,YAAY,EAAG,OAAO,EAAE,IAAI,CAAC,YAAY,IACnD,0DAAG,KAAK,EAAC,gBAAgB,YAAU,CAC9B,CACR,CACG,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/dda-chip/dda-chip.css?tag=dda-chip","src/global/global.css?tag=dda-chip","src/components/dda-chip/dda-chip.tsx"],"sourcesContent":[".dda-chip{\r\n  display: inline-flex;\r\n  height: 26px;\r\n  background: var(--dda-color-primary-95);\r\n  border: solid 1px var(--dda-color-primary-40);\r\n  color: var(--dda-color-primary-40);\r\n  align-items: center;\r\n  gap: 5px;\r\n  padding: 2px 8px;\r\n  border-radius: 6px; \r\n}\r\n.dda-chip i{\r\n  font-size: 19px;\r\n}\r\n.dda-chip .circle{\r\n  font-size: 7px;\r\n}\r\n.dda-chip-grey{\r\n  background: var(--dda-neutral-variant-94);\r\n  border: solid 1px var(--dda-neutral-90);\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode.dda-chip-grey{\r\n  background: var(--dda-neutral-variant-94);\r\n  border: solid 1px var(--dda-neutral-90);\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n/**/\r\n.dda-chip-primary{\r\n  background: var(--dda-primary-variant-95);\r\n  border: solid 1px var(--dda-color-primary-40);\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.light-mode.dda-chip-primary{\r\n  background: var(--dda-primary-95);\r\n  border: solid 1px var(--dda-primary-40);\r\n  color: var(--dda-primary-40);\r\n}\r\n/**/\r\n.dda-chip-green{\r\n  background: var(--dda-success-variant-95);\r\n  border: solid 1px var(--dda-color-success-40);\r\n  color: var(--dda-color-success-40);\r\n}\r\n.light-mode.dda-chip-green{\r\n  background: var(--dda-success-95);\r\n  border: solid 1px var(--dda-success-40);\r\n  color: var(--dda-success-40);\r\n}\r\n/**/\r\n.dda-chip-yellow{\r\n  background: var(--dda-warning-variant-95);\r\n  border: solid 1px var(--dda-color-warning-40);\r\n  color: var(--dda-color-warning-40);\r\n}\r\n.light-mode.dda-chip-yellow{\r\n  background: var(--dda-warning-95);\r\n  border: solid 1px var(--dda-warning-40);\r\n  color: var(--dda-warning-40);\r\n}\r\n/**/\r\n.dda-chip-red{\r\n  background: var(--dda-error-variant-95);\r\n  border: solid 1px var(--dda-color-error-40);\r\n  color: var(--dda-color-error-40);\r\n}\r\n.light-mode.dda-chip-red{\r\n  background: var(--dda-error-95);\r\n  border: solid 1px var(--dda-error-40);\r\n  color: var(--dda-error-40);\r\n}\r\n/**/\r\n.dda-chip-purple{\r\n  background: var(--dda-color-purple-50);\r\n  border: solid 1px var(--dda-color-purple);\r\n  color: var(--dda-color-purple);\r\n}\r\n\r\n.dda-chip-sm{\r\n  height: 24px;\r\n}\r\n.dda-chip-md{\r\n  height: 26px;\r\n}\r\n.dda-chip-lg{\r\n  height: 32px;\r\n  padding: 2px 12px;\r\n}\r\n.dda-chip-square{\r\n  border-radius: 6px;\r\n}\r\n.dda-chip-circle{\r\n  border-radius: 40px;\r\n}\r\n\r\n.dda-chip .chip-close{\r\n  display: inline-flex;\r\n  cursor: pointer;\r\n}\r\n\r\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.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@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:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\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;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\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-black {\r\n  color: var(--dda-on-surface-0);\r\n}\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\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\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","import { Component, Prop, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-chip',\r\n  styleUrls: ['dda-chip.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaChip {\r\n  @Prop() bg_color: string = 'success';\r\n  @Prop() rounded?: string = '';\r\n  @Prop() icon: string;\r\n  @Prop() show_close_icon: boolean = false;\r\n  @Prop() size?: string; // e.g., 'sm', 'md', 'lg'\r\n  @Prop() custom_class?: string;\r\n  @Prop() component_mode?: string;  \r\n  @Prop() clickHandler?: (event: MouseEvent) => void;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={`dda-chip dda-chip-${this.bg_color} dda-chip-${this.size} dda-rounded-${this.rounded} ${this.custom_class} ${this.component_mode}`}>\r\n          {this.icon ? <i class=\"material-icons\">{this.icon}</i> : null}\r\n          <span><slot /></span>\r\n          {this.show_close_icon && (\r\n            <span class=\"chip-close\"   onClick={this.clickHandler}>\r\n              <i class=\"material-icons\">close</i>\r\n            </span>\r\n          )}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-credit-card.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-credit-card.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,uoEAAuoE,CAAC;AACjqE,4BAAe,gBAAgB;;ACD/B,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,4BAAe,SAAS;;MCMX,aAAa;IAL1B;;QAWU,iBAAY,GAAY,EAAE,CAAC;KAgCpC;IA7BC,MAAM;QACJ,MAAM,SAAS,GAAG;YAChB,2BAA2B;YAC3B,IAAI,CAAC,MAAM,GAAG,mBAAmB,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;YACnD,IAAI,CAAC,YAAY,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YAC/C,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,SAAS,IACnB,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,6DAAM,KAAK,EAAC,oBAAoB,sBAAuB,EACvD,6DAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,OAAO,CAAQ,CAC5C,EACN,0DAAG,KAAK,EAAC,gBAAgB,iBAAa,MAAM,WAAS,CACjD,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,4DAAK,KAAK,EAAC,eAAe,IACxB,6DAAM,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,IAAI,CAAQ,EAC9C,6DAAM,KAAK,EAAC,iBAAiB,aAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAQ,CAClE,EACN,8DAAK,4DAAK,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAC,gBAAgB,GAAE,CAAM,CACzE,CACF,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/dda-credit-card/dda-credit-card.css?tag=dda-credit-card","src/global/global.css?tag=dda-credit-card","src/components/dda-credit-card/dda-credit-card.tsx"],"sourcesContent":[".dda-credit-card-container{\r\n  width: 352px;\r\n  height: 192px;\r\n  background: var(--dda-neutral-100);\r\n  padding: 16px 18px;\r\n  border-radius: 10px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 45px;\r\n}\r\n\r\n.dda-credit-card-header{\r\n  display: flex;\r\n}\r\n.dda-credit-card-header svg path{\r\n  fill: var(--dda-on-surface-0);\r\n}\r\n.light-mode .dda-credit-card-header svg path{\r\n  fill: var(--dda-neutral-0);\r\n}\r\n.card-balance-info{\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1;\r\n}\r\n.card-balance-label{\r\n  font-size: 16px;\r\n  font-weight: var(--dda-fw-400);\r\n  opacity: 54;\r\n}\r\n.dda-credit-card-default .card-balance-label{\r\n  color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode.dda-credit-card-default .card-balance-label{\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n.card-balance{\r\n  font-size: 32px;\r\n  font-weight: var(--dda-fw-700);\r\n  line-height: 45px;\r\n}\r\n.dda-credit-card-default .card-balance{\r\n  color: var(--dda-on-surface-0);\r\n}\r\n.light-mode.dda-credit-card-default .card-balance{\r\n  color: var(--dda-neutral-0);\r\n}\r\n.dda-credit-card-body{\r\n  display: flex;\r\n}\r\n.card-userinfo{\r\n  display: flex;\r\n  flex-direction: column;\r\n  flex: 1;\r\n}\r\n.dda-card-name,\r\n.dda-card-number{\r\n  font-size: 14px;\r\n  color: var(--dda-on-surface-0);\r\n  font-weight: var(--dda-fw-500);\r\n  opacity: 90;\r\n}\r\n.light-mode .dda-card-name,\r\n.light-mode .dda-card-number{\r\n  color: var(--dda-neutral-0);\r\n}\r\n.card-type-icon{\r\n  width: 40px;\r\n  display: block;\r\n}\r\n.dda-credit-card-default{\r\n  background: var(--dda-surface-100);\r\n}\r\n.light-mode.dda-credit-card-default{\r\n  background: var(--dda-neutral-100);\r\n}\r\n.dda-credit-card-green{\r\n  background: var(--dda-color-primary-40);\r\n}\r\n.light-mode.dda-credit-card-green{\r\n  background: var(--dda-primary-40);\r\n}\r\n.dda-credit-card-dark{\r\n  background: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode.dda-credit-card-dark{\r\n  background: var(--dda-neutral-variant-30);\r\n}\r\n.dda-credit-card-green .dda-credit-card-header i,\r\n.dda-credit-card-green .card-balance-label,\r\n.dda-credit-card-green .card-balance,\r\n.dda-credit-card-green .dda-card-name,\r\n.dda-credit-card-green .dda-card-number,\r\n.dda-credit-card-dark .dda-credit-card-header i,\r\n.dda-credit-card-dark .card-balance-label,\r\n.dda-credit-card-dark .card-balance,\r\n.dda-credit-card-dark .dda-card-name,\r\n.dda-credit-card-dark .dda-card-number{\r\n  color: var(--dda-neutral-100);\r\n}\r\n.dda-credit-card-green .dda-credit-card-header svg path,\r\n.dda-credit-card-dark .dda-credit-card-header svg path{\r\n  fill: var(--dda-neutral-100);\r\n}","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.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@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:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\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;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\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-black {\r\n  color: var(--dda-on-surface-0);\r\n}\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\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\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","import { Component, Prop, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-credit-card',\r\n  styleUrls: ['dda-credit-card.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaCreditCard {\r\n  @Prop() balance: string;\r\n  @Prop() name: string;\r\n  @Prop() card_number: string;\r\n  @Prop() card_type: string;\r\n  @Prop() design: string;\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n\r\n  render() {\r\n    const cardClass = [\r\n      'dda-credit-card-container',\r\n      this.design ? `dda-credit-card-${this.design}` : '',\r\n      this.custom_class ? `${this.custom_class}` : \"\",\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <div class={cardClass}>\r\n          <div class=\"dda-credit-card-header\">\r\n            <div class=\"card-balance-info\">\r\n              <span class=\"card-balance-label\">Current Balance</span>\r\n              <span class=\"card-balance\">{this.balance}</span>\r\n            </div>\r\n            <i class=\"material-icons\" aria-hidden=\"true\">wifi</i>\r\n          </div>\r\n          <div class=\"dda-credit-card-body\">\r\n            <div class=\"card-userinfo\">\r\n              <span class=\"dda-card-name\">{this.name}</span>\r\n              <span class=\"dda-card-number\">**** {this.card_number.slice(-4)}</span>\r\n            </div>\r\n            <div><img src={this.card_type} alt=\"Card Type\" class=\"card-type-icon\"/></div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-creditcard-field.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-creditcard-field.entry.js","mappings":"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","names":[],"sources":["src/global/input.css?tag=dda-creditcard-field","src/global/global.css?tag=dda-creditcard-field","src/components/dda-creditcard-field/dda-creditcard-field.tsx"],"sourcesContent":[".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(--dda-fs-title-sm);\r\n    color: var(--dda-on-surface-0);\r\n    line-height: 22px;\r\n    font-weight: var(--dda-fw-400);\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(--dda-fs-body-lg);\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(--dda-fs-body-lg);\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(--dda-fs-body-lg);\r\n    color: var(--dda-on-surface-0);\r\n    font-weight: var(--dda-fw-400);\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.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(--dda-fs-body-lg);\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.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(--dda-fs-body-lg);\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    background-color: var(--dda-neutral-variant-95);\r\n    outline: 0;\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(--dda-fs-body-md);\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(--dda-fs-body-md);\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: 24px;\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}\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\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}\r\n\r\n.dda-input-size-small .dda-search-btngroup {\r\n    top: 4px;\r\n}\r\n\r\n.dda-search-area .icon-close {\r\n    display: flex;\r\n    color: var(--dda-on-surface-variant-30);\r\n    font-size: 20px;\r\n    margin: 0px;\r\n    margin-inline-end: 15px;\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 .icon-close{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-search-field {\r\n    padding: 8px 40px 8px 40px;\r\n}\r\n\r\n.dda-search-action .dda-search-field {\r\n    padding: 8px 110px 8px 40px;\r\n}\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\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\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(--dda-fs-body-lg);\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(--dda-fs-body-lg);\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\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(--dda-fs-body-lg);\r\n}\r\n.dda-file-name {\r\n    font-size: var(--dda-fs-body-lg);\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\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.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@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:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\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;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\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-black {\r\n  color: var(--dda-on-surface-0);\r\n}\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\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\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","import { Component, Prop,  State, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-creditcard-field',\r\n  styleUrls: ['../../global/input.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaCreditCardField {\r\n  @Prop() placeholder: string;\r\n  @Prop() label: string;\r\n  @Prop() value: string = '';\r\n  @Prop() card_icon: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\r\n  @Prop() size?: string;\r\n  @Prop() input_type?: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() custom_class?: string = '';\r\n  @Prop() restrict_input: boolean = false;\r\n  @Prop() component_mode?: string; \r\n  @Prop() input_id: string;\r\n  @Prop() aria_label?: string;\r\n\r\n  @State() formattedValue: string = '';\r\n\r\n  handleInput(event: Event) {\r\n    const inputElement = event.target as HTMLInputElement;\r\n    const inputValue = inputElement.value.replace(/[^0-9-]/g, '');\r\n    const maxLength = this.restrict_input ? 100 : 25;\r\n    \r\n    if (inputValue.length <= maxLength) {\r\n      this.value = inputValue;\r\n      this.formatCardNumber(this.value);\r\n      inputElement.value = this.formattedValue;\r\n    } else {\r\n      inputElement.value = this.formattedValue;\r\n    }\r\n  }\r\n\r\n  formatCardNumber(value: string) {\r\n    const cleaned = value.replace(/\\D/g, '');\r\n    const matched = cleaned.match(/.{1,4}/g);\r\n    if (matched) {\r\n      this.formattedValue = matched.join(' - ');\r\n    } else {\r\n      this.formattedValue = cleaned;\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.formatCardNumber(this.value);\r\n  }\r\n\r\n  render() {\r\n    const inputClass = [\r\n      'dda-input-container dda-credit-card-field',\r\n      this.validation_type ? `dda-validation-${this.validation_type}` : '',\r\n      this.size ? `dda-input-size-${this.size}` : '',\r\n      this.input_type ? `dda-input-${this.input_type}` : '',\r\n      this.disabled ? 'dda-input-disabled' : '',\r\n      this.error_message ? 'dda-error-message' : '',\r\n      this.custom_class ? `${this.custom_class}` : '',\r\n      this.component_mode, \r\n    ].filter(Boolean).join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <div class={inputClass}>\r\n          {this.label && <label htmlFor={this.input_id} class=\"dda-input-label\">{this.label}</label>}\r\n          <div class=\"dda-input-field-wrapper\">\r\n            {this.card_icon && <img src={this.card_icon} alt=\"Card Icon\" class=\"dda-creditcard-icon\" />}\r\n            <input\r\n              aria-label={this.aria_label}\r\n              id={this.input_id}\r\n              type=\"text\"\r\n              inputmode=\"numeric\"\r\n              placeholder={this.placeholder}\r\n              value={this.formattedValue}\r\n              onInput={(event) => this.handleInput(event)}\r\n              class=\"dda-input-field\"\r\n              disabled={this.disabled}\r\n              maxlength={this.restrict_input ? 100 : 25}\r\n            />\r\n          </div>\r\n          {this.helper_text && <span class=\"dda-helper-text\">{this.helper_text}</span>}\r\n          {this.error_message && <span class=\"dda-error-message\">{this.error_message}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"dda-dropdown.entry.js","mappings":"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","names":[],"sources":["src/global/input.css?tag=dda-dropdown","src/global/global.css?tag=dda-dropdown","src/components/dda-dropdown/dda-dropdown.tsx"],"sourcesContent":[".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(--dda-fs-title-sm);\r\n    color: var(--dda-on-surface-0);\r\n    line-height: 22px;\r\n    font-weight: var(--dda-fw-400);\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(--dda-fs-body-lg);\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(--dda-fs-body-lg);\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(--dda-fs-body-lg);\r\n    color: var(--dda-on-surface-0);\r\n    font-weight: var(--dda-fw-400);\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.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(--dda-fs-body-lg);\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.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(--dda-fs-body-lg);\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    background-color: var(--dda-neutral-variant-95);\r\n    outline: 0;\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(--dda-fs-body-md);\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(--dda-fs-body-md);\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: 24px;\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}\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\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}\r\n\r\n.dda-input-size-small .dda-search-btngroup {\r\n    top: 4px;\r\n}\r\n\r\n.dda-search-area .icon-close {\r\n    display: flex;\r\n    color: var(--dda-on-surface-variant-30);\r\n    font-size: 20px;\r\n    margin: 0px;\r\n    margin-inline-end: 15px;\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 .icon-close{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-search-field {\r\n    padding: 8px 40px 8px 40px;\r\n}\r\n\r\n.dda-search-action .dda-search-field {\r\n    padding: 8px 110px 8px 40px;\r\n}\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\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\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(--dda-fs-body-lg);\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(--dda-fs-body-lg);\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\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(--dda-fs-body-lg);\r\n}\r\n.dda-file-name {\r\n    font-size: var(--dda-fs-body-lg);\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\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.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@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:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\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;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\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-black {\r\n  color: var(--dda-on-surface-0);\r\n}\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\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\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","import { Component, Prop, State, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-dropdown',\r\n  styleUrls: ['../../global/input.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaDropdown {\r\n  @Prop() label: string;\r\n  @Prop() options: string; // Receive options as a string\r\n  @Prop() selected: string;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() error: string;\r\n  @Prop() helper_text: string;\r\n  @Prop() type: 'bg-transparent' | 'bg-white' = 'bg-white';\r\n  @Prop() size: 'small' | 'medium' = 'medium';\r\n  @Prop() icon_mode: boolean = false; // New prop for icon mode\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Prop() button_id: string;\r\n  @Prop() aria_label?: string;\r\n  \r\n  @State() isopen: boolean = false;\r\n\r\n  private get parsedOptions(): string[] {\r\n    try {\r\n      return JSON.parse(this.options);\r\n    } catch {\r\n      return [];\r\n    }\r\n  }\r\n\r\n  toggleDropdown() {\r\n    if (!this.disabled) {\r\n      this.isopen = !this.isopen;\r\n    }\r\n  }\r\n\r\n  selectOption(option: string) {\r\n    if (!this.disabled) {\r\n      this.selected = option;\r\n      this.isopen = false;\r\n    }\r\n  }\r\n\r\n  render() {  \r\n    const containerClass = [\r\n      'dda-input-container dda-inline-flex',\r\n      this.disabled ? 'dda-input-disabled' : '',\r\n      this.size ? `dda-input-size-${this.size}` : '',\r\n      this.custom_class ? `${this.custom_class}` : '',\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n\r\n    return (\r\n      <Host>\r\n        <div class={containerClass}>\r\n          {this.label && <label htmlFor={this.button_id} class=\"dda-input-label\">{this.label}</label>}\r\n          <div class={`dda-dropdown-container ${this.type}`}>\r\n            <button id={this.button_id} aria-label={this.aria_label} type=\"button\" class=\"dda-input-field dda-dropdown-header\" onClick={() => this.toggleDropdown()}>\r\n              <i class={`three-dots material-icons`}>{this.isopen ? 'more_vert' : 'more_vert'}</i>\r\n              {!this.icon_mode && <span class=\"dda-dropdown-text\"><span>{this.selected || 'Select an option'}</span> <i class={`material-icons`}>{this.isopen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</i></span>\r\n              }\r\n            </button>\r\n            {this.isopen && (\r\n              <div class=\"dda-input-dropdown-list\">\r\n                {this.parsedOptions.length > 0 ? (\r\n                  this.parsedOptions.map(option => (\r\n                    <button type=\"button\"\r\n                      class={`dda-input-dropdown-item ${this.selected === option ? 'selected' : ''}`}\r\n                      onClick={() => {this.selectOption(option)}}\r\n                    >\r\n                      {option}\r\n                    </button>\r\n                  ))\r\n                ) : (\r\n                  <div class=\"dda-input-dropdown-item\">No options available</div>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n          {this.helper_text && <span class=\"dda-helper-text\">{this.helper_text}</span>}\r\n          {this.error && <span class=\"dda-error-message\">{this.error}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"dda-footer.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,EAAE,CAAC;AACxB,wBAAe,YAAY;;MCMd,SAAS;;;;IAaZ,cAAc,CAAC,UAAkB;QACvC,IAAI;YACF,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;SAC/B;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC;YAC1C,OAAO,EAAE,CAAC;SACX;KACF;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1D,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAEpD,QACE,+DAAQ,KAAK,EAAC,WAAW,IACvB,4DAAK,KAAK,EAAC,8BAA8B,IACvC,4DAAK,KAAK,EAAC,iDAAiD,IAC1D,2DAAI,KAAK,EAAC,8CAA8C,IAAE,IAAI,CAAC,WAAW,CAAM,EAChF,0DAAG,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,WAAW,CAAK,EACjE,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,mEAAY,YAAY,EAAC,iBAAiB,EAAC,IAAI,EAAC,IAAI,IACjD,IAAI,CAAC,gBAAgB,CACX,EACb,mEAAY,YAAY,EAAC,kBAAkB,EAAC,IAAI,EAAC,IAAI,IAClD,IAAI,CAAC,eAAe,CACV,CACT,CACF,CACF,EAEN,4DAAK,KAAK,EAAC,8BAA8B,IACvC,4DAAK,KAAK,EAAC,SAAS,IAClB,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,4DAAK,KAAK,EAAC,aAAa,IACtB,4DAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,GAAI,EAC/D,0DAAG,KAAK,EAAC,iBAAiB,yFAEtB,CACA,CACF,EACN,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAC,SAAS,IACjB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACpB,WAAK,KAAK,EAAC,0CAA0C,IACnD,SAAG,KAAK,EAAC,iDAAiD,IAAE,OAAO,CAAC,KAAK,CAAK,EAC9E,UAAI,KAAK,EAAC,aAAa,IACpB,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACtB,cACE,SAAG,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IAClD,IAAI,CAAC,KAAK,CACT,CACD,CACN,CAAC,CACC,CACD,CACP,CAAC,CACE,CACF,CACF,CACF,EAEN,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,4DAAK,KAAK,EAAC,6CAA6C,IACtD,0DAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,aAAa,CAAK,EACnD,2DAAI,KAAK,EAAC,qCAAqC,IAC5C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACd,cACE,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAChB,WAAK,KAAK,EAAC,mBAAmB,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,GAAI,CAC7D,CACD,CACN,CAAC,CACC,CACD,CACF,CACC,EACT;KACH;;;;;;","names":[],"sources":["src/components/dda-footer/dda-footer.css?tag=dda-footer&encapsulation=shadow","src/components/dda-footer/dda-footer.tsx"],"sourcesContent":["","import { Component, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-footer',\r\n  styleUrl: 'dda-footer.css',\r\n  shadow: true,\r\n})\r\nexport class DdaFooter {\r\n  @Prop() footerTitle: string;\r\n  @Prop() description: string;\r\n  @Prop() signUpButtonText: string;\r\n  @Prop() loginButtonText: string;\r\n  @Prop() logoSrc: string;\r\n  @Prop() logoAlt: string;\r\n  @Prop() copyrightText: string;\r\n  \r\n  // Updated to accept JSON strings\r\n  @Prop() footerSections: string;\r\n  @Prop() socialIcons: string;\r\n\r\n  private parseJsonArray(jsonString: string) {\r\n    try {\r\n      return JSON.parse(jsonString);\r\n    } catch (e) {\r\n      console.error('Failed to parse JSON:', e);\r\n      return [];\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const sections = this.parseJsonArray(this.footerSections);\r\n    const icons = this.parseJsonArray(this.socialIcons);\r\n\r\n    return (\r\n      <footer class=\"WB-footer\">\r\n        <div class=\"dda-container line-seperater\">\r\n          <div class=\"dda-flex dda-align-center flex-column dda-gap-5\">\r\n            <h4 class=\"dda-fs-display-sm dda-fw-700 dda-color-black\">{this.footerTitle}</h4>\r\n            <p class=\"dda-fs-title-sm dda-fw-400 mb-3\">{this.description}</p>\r\n            <div class=\"dda-flex dda-gap-5\">\r\n              <dda-button button_color=\"default-primary\" size=\"lg\">\r\n                {this.signUpButtonText}\r\n              </dda-button>\r\n              <dda-button button_color=\"default-tertiary\" size=\"lg\">\r\n                {this.loginButtonText}\r\n              </dda-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"dda-container line-seperater\">\r\n          <div class=\"dda-row\">\r\n            <div class=\"dda-col-lg-4 mb-3\">\r\n              <div class=\"text-center\">\r\n                <img class=\"entt-logo\" src={this.logoSrc} alt={this.logoAlt} />\r\n                <p class=\"dda-fs-title-sm\">\r\n                  Design outstanding interfaces with advanced Figma features in a matter of minutes.\r\n                </p>\r\n              </div>\r\n            </div>\r\n            <div class=\"dda-col-lg-8\">\r\n              <div class=\"dda-row\">\r\n                {sections.map((section) => (\r\n                  <div class=\"dda-col-6 dda-col-sm-6 dda-col-md-3 mb-3\">\r\n                    <p class=\"dda-fs-title-sm dda-fw-700 dda-color-black mb-3\">{section.title}</p>\r\n                    <ul class=\"footer-menu\">\r\n                      {section.links.map((link) => (\r\n                        <li>\r\n                          <a class=\"dda-fs-title-sm dda-fw-400\" href={link.href}>\r\n                            {link.label}\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        <div class=\"dda-container pt-4\">\r\n          <div class=\"dda-flex dda-align-center dda-justify-space\">\r\n            <p class=\"dda-fs-title-sm\">{this.copyrightText}</p>\r\n            <ul class=\"dda-flex dda-align-center dda-gap-4\">\r\n              {icons.map((icon) => (\r\n                <li>\r\n                  <a href={icon.href}>\r\n                    <img class=\"footer-social-icn\" src={icon.src} alt={icon.alt} />\r\n                  </a>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      </footer>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"dda-header.entry.js","mappings":"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","names":[],"sources":["src/components/dda-header/dda-header.css?tag=dda-header","src/global/global.css?tag=dda-header","src/components/dda-header/dda-header.tsx"],"sourcesContent":["","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.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@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:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\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;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\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-black {\r\n  color: var(--dda-on-surface-0);\r\n}\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\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\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","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-header',\r\n  styleUrls: ['dda-header.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaHeader {\r\n  @Prop() firstLogoSrc: string;\r\n  @Prop() firstLogoAlt: string;\r\n  @Prop() secondLogoSrc: string;\r\n  @Prop() secondLogoAlt: string;\r\n  @Prop() loginLink: string;\r\n  @Prop() sideMenuItems: string;\r\n  @Prop() quickLinks: string;\r\n  @Prop() readSpeakerLink: string;\r\n  @Event() languageSwitch: EventEmitter<void>;\r\n  @Event() smTextSize: EventEmitter<void>;\r\n  @Event() baseTextSize: EventEmitter<void>;\r\n  @Event() lgTextSize: EventEmitter<void>;\r\n  @Event() normalContrast: EventEmitter<void>;\r\n  @Event() blindContrast: EventEmitter<void>;\r\n  @Event() redContrast: EventEmitter<void>;\r\n  @Event() greenContrast: EventEmitter<void>;\r\n\r\n  @State() isMenuOpen: boolean = false;\r\n  @State() isSubMenuOpen: boolean = false;\r\n  @State() isSideSubMenuOpen: boolean = false;\r\n  @State() isAccessibiltyOpen: boolean = false;\r\n  private lastScrollTop = 0;\r\n\r\n  componentDidLoad() {\r\n    window.addEventListener('scroll', this.handleScroll);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    window.removeEventListener('scroll', this.handleScroll);\r\n  }\r\n\r\n  handleScroll = () => {\r\n    const scrollTop = window.scrollY;\r\n    const menuContainer = document.querySelector('.dda-menu-container') as HTMLElement;\r\n\r\n    if (scrollTop > this.lastScrollTop && scrollTop > 50) {\r\n      if (menuContainer) menuContainer.style.display = 'none';\r\n    } else {\r\n      if (menuContainer) menuContainer.style.display = 'flex';\r\n    }\r\n    this.lastScrollTop = scrollTop;\r\n  };\r\n\r\n  private parseJsonArray(jsonString: string) {\r\n    try {\r\n      return JSON.parse(jsonString);\r\n    } catch (e) {\r\n      console.error('Failed to parse JSON:', e);\r\n      return [];\r\n    }\r\n  }\r\n  private toggleMenu = () => {\r\n    this.isMenuOpen = !this.isMenuOpen;\r\n  };\r\n  private toggleSubMenu = () => {\r\n    this.isSubMenuOpen = !this.isSubMenuOpen;\r\n  };\r\n  private toggleSideSubMenu = () => {\r\n    this.isSideSubMenuOpen = !this.isSideSubMenuOpen;\r\n  };\r\n  private toggleAccessibilty = () => {\r\n    this.isAccessibiltyOpen = !this.isAccessibiltyOpen;\r\n  };\r\n\r\n  private languagehandler = () => {\r\n    this.languageSwitch.emit();\r\n  };\r\n  private smTexthandler = () => {\r\n    this.smTextSize.emit();\r\n  };\r\n  private baseTexthandler = () => {\r\n    this.baseTextSize.emit();\r\n  };\r\n  private lgTexthandler = () => {\r\n    this.lgTextSize.emit();\r\n  };\r\n  private normalContrasthandler = () => {\r\n    this.normalContrast.emit();\r\n  };\r\n  private blindContrasthandler = () => {\r\n    this.blindContrast.emit();\r\n  };\r\n  private redContrasthandler = () => {\r\n    this.redContrast.emit();\r\n  };\r\n  private greenContrasthandler = () => {\r\n    this.greenContrast.emit();\r\n  };\r\n\r\n  render() {\r\n    const sideMenuItems = this.parseJsonArray(this.sideMenuItems);\r\n    const quickLinks = this.parseJsonArray(this.quickLinks);\r\n    return (\r\n      <header class=\"dda-header\">\r\n        <div class=\"dda-container-fluid\">\r\n          {/* Logo Section */}\r\n          <div class=\"dda-head-logo\">\r\n            <a href=\"#\" class=\"govt-logo\">\r\n              <img class=\"logo-colored\" src={this.firstLogoSrc} alt={this.firstLogoAlt} />\r\n              {/* <img class=\"logo-white\" src={this.secondLogoSrc} alt={this.secondLogoAlt} /> */}\r\n            </a>\r\n            <a href=\"#\" class=\"entt-logo\">\r\n              <img class=\"logo-colored\" src={this.secondLogoSrc} alt={this.secondLogoSrc} />\r\n              {/* <img class=\"logo-white\" src={this.secondLogoSrc} alt={this.secondLogoAlt} /> */}\r\n            </a>\r\n          </div>\r\n\r\n          {/* Main Navigation Section */}\r\n          <div class=\"dda-menu-container\">\r\n            <div class=\"dda-main-navigation\">\r\n              <div class={`dda-menu-overley ${this.isMenuOpen ? 'show-overley' : ''}`}></div>\r\n\r\n              {/* Hamburger Menu */}\r\n              <div class=\"hamburger-menu\" onClick={this.toggleMenu}>\r\n                <dda-tooltip title_text=\"Menu\" position=\"top\" class=\"d-block\">\r\n                  <button type=\"button\" class=\"hamburger-menu-btn\">\r\n                    <span class=\"hamburger-line\"></span>\r\n                    <span class=\"hamburger-menu-text\">hamburger menu text</span>\r\n                  </button>\r\n                </dda-tooltip>\r\n              </div>\r\n\r\n              {/* Side Menu */}\r\n              <div class=\"dda-sidemenu\" style={{ display: this.isMenuOpen ? 'block' : '', insetInlineStart: this.isMenuOpen ? '0px' : '' }}>\r\n                <div class=\"dda-sidemenu-content\">\r\n                  <p class=\"dda-side-nav-title\">Quick Links</p>\r\n                  <ul class=\"main_side_menu\">\r\n                    {sideMenuItems.map(item => (\r\n                      <li>\r\n                        <a\r\n                          href={item.subMenu && item.subMenu.length > 0 ? 'javascript:void(0)' : item.href}\r\n                          class=\"dda-flex dda-justify-space dda-items-center\"\r\n                          onClick={item.subMenu && item.subMenu.length && this.toggleSideSubMenu}\r\n                        >\r\n                          <span>{item.label}</span>\r\n                          {item.subMenu && item.subMenu.length > 0 && <i class=\"material-icons\">chevron_right</i>}\r\n                        </a>\r\n                        {item.subMenu && item.subMenu.length > 0 && (\r\n                          <div class={`main_sub_menu  ${this.isSideSubMenuOpen ? 'showSubMenu' : ''}`}>\r\n                            <ol>\r\n                              {item.subMenu.map(sub => (\r\n                                <li>\r\n                                  <a href={'javascript:void(0)'} onClick={this.toggleSideSubMenu}>\r\n                                    <span>{sub.label}</span>\r\n                                    {item.subMenu && item.subMenu.length > 0 && <i class=\"material-icons\">chevron_right</i>}\r\n                                  </a>\r\n                                  <div class={`main_sub_menu ${this.isSideSubMenuOpen ? 'showSubMenu' : ''}`}>\r\n                                    <p class=\"dda-side-nav__title\">Initiatives</p>\r\n                                    <ol>\r\n                                      <li>\r\n                                        <a href=\"#\">{sub.label}</a>\r\n                                      </li>\r\n                                    </ol>\r\n                                  </div>\r\n                                </li>\r\n                              ))}\r\n                            </ol>\r\n                          </div>\r\n                        )}\r\n                      </li>\r\n                    ))}\r\n                  </ul>\r\n                </div>\r\n                <button class=\"close-btn side-nav-close-btn\" aria-label=\"Close Sidebar\" onClick={this.toggleMenu}>\r\n                  <i class=\"material-icons\">close</i>\r\n                </button>\r\n              </div>\r\n\r\n              {/* Mega Menu */}\r\n              <div class=\"dda-mega-menu\">\r\n                {quickLinks.map(link => (\r\n                  <li>\r\n                    <a href={link.subMenu && link.subMenu.length > 0 ? 'javascript:void(0)' : link.href} onClick={link.subMenu && link.subMenu.length && this.toggleSubMenu}>\r\n                      {link.label}\r\n                    </a>\r\n                    {/* Conditionally render submenu */}\r\n                    {link.subMenu && link.subMenu.length > 0 && (\r\n                      <div class=\"megamenu-content\" style={{ display: this.isSubMenuOpen ? 'block' : 'none' }}>\r\n                        <div class=\"megamenu-item dda-container\">\r\n                          <div class=\"dda-row\">\r\n                            <div class=\"dda-col-md-3\">\r\n                              <h3 class=\"mega-menu-title\">QUICK LINKS</h3>\r\n                              <ul>\r\n                                {link.subMenu.map(subItem => (\r\n                                  <li>\r\n                                    <a class=\"megamenu-link\" href={subItem.href}>\r\n                                      <span class=\"dda-btn btn-color-onsurface-secondary btn-size-sm icon-btn-default\">\r\n                                        <i class=\"material-icons\">{subItem.icon}</i>\r\n                                      </span>\r\n                                      <span class=\"text-wrap\">\r\n                                        <span class=\"title-text dda-fs-body-lg dda-fw-700\">{subItem.title}</span>\r\n                                        <span class=\"dda-fs-tagline-lg dda-fw-400\">{subItem.description}</span>\r\n                                      </span>\r\n                                    </a>\r\n                                  </li>\r\n                                ))}\r\n                              </ul>\r\n                            </div>\r\n                          </div>\r\n                          <button class=\"close-btn close_mega-menu\" aria-label=\"Close Sidebar\" onClick={this.toggleSubMenu}>\r\n                            <i class=\"material-icons\">close</i>\r\n                          </button>\r\n                        </div>\r\n                      </div>\r\n                    )}\r\n                  </li>\r\n                ))}\r\n              </div>\r\n            </div>\r\n            {/* Toolbar Menu */}\r\n            <div class=\"dda-toolbar-menu\">\r\n              <ul>\r\n                <li>\r\n                  <dda-tooltip title_text=\"Search\" description=\"\" position=\"top\">\r\n                    <div class=\"dda-search dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle tool-btn\">\r\n                      <i class=\"material-icons\">search</i>\r\n                      <input type=\"text\" class=\"\" placeholder=\"Search\" />\r\n                    </div>\r\n                  </dda-tooltip>\r\n                </li>\r\n\r\n                <li>\r\n                  <dda-tooltip title_text=\"Accessibility\" position=\"top\">\r\n                    <button class=\"tool-btn dda-btn btn-color-onsurface-secondary btn-size-sm btn-shape-circle accessibility-btn\" type=\"button\" onClick={this.toggleAccessibilty}>\r\n                      <i class=\"material-icons\">accessibility</i>\r\n                      <span class=\"visually-hidden\">Accessibility</span>\r\n                    </button>\r\n                  </dda-tooltip>\r\n                  <div class=\"dda-accessibility-wrap\">\r\n                    <div class=\"dda-accessibility hide-accessibility\" style={{ display: this.isAccessibiltyOpen ? 'block' : 'none' }}>\r\n                      <div class=\"dda-row\">\r\n                        <div class=\"dda-col-md-4 dda-accessibility-item\">\r\n                          <h2 class=\"dda-fs-body-lg dda-fw-700 mb-1\">Contrast</h2>\r\n                          <p class=\"mb-3\">Select your preferred contrast setting </p>\r\n                          <div class=\"dda-theme-list\">\r\n                            <dda-radiobutton\r\n                              title_text=\"Normal\"\r\n                              checked={true}\r\n                              size=\"sm\"\r\n                              variants=\"normal\"\r\n                              supporting=\"\"\r\n                              group_name=\"themeselection\"\r\n                              input_id=\"Normal\"\r\n                              custom_class=\"\"\r\n                              component_mode=\"\"\r\n                              aria_label=\"radio-button\"\r\n                              onClick={this.normalContrasthandler}\r\n                            ></dda-radiobutton>\r\n                            <dda-radiobutton\r\n                              title_text=\"Colours Blind\"\r\n                              checked={false}\r\n                              size=\"sm\"\r\n                              variants=\"normal\"\r\n                              supporting=\"\"\r\n                              group_name=\"themeselection\"\r\n                              input_id=\"ColoursBlind\"\r\n                              custom_class=\"\"\r\n                              component_mode=\"\"\r\n                              aria_label=\"radio-button\"\r\n                              onClick={this.blindContrasthandler}\r\n                            ></dda-radiobutton>\r\n                            <dda-radiobutton\r\n                              title_text=\"Red Weakness\"\r\n                              checked={false}\r\n                              size=\"sm\"\r\n                              variants=\"normal\"\r\n                              supporting=\"\"\r\n                              group_name=\"themeselection\"\r\n                              input_id=\"RedWeakness\"\r\n                              custom_class=\"\"\r\n                              component_mode=\"\"\r\n                              aria_label=\"radio-button\"\r\n                              onClick={this.redContrasthandler}\r\n                            ></dda-radiobutton>\r\n                            <dda-radiobutton\r\n                              title_text=\"Green Weakness\"\r\n                              checked={false}\r\n                              size=\"sm\"\r\n                              variants=\"normal\"\r\n                              supporting=\"\"\r\n                              group_name=\"themeselection\"\r\n                              input_id=\"GreenWeakness\"\r\n                              custom_class=\"\"\r\n                              component_mode=\"\"\r\n                              aria_label=\"radio-button\"\r\n                              onClick={this.greenContrasthandler}\r\n                            ></dda-radiobutton>\r\n                          </div>\r\n                        </div>\r\n                        <div class=\"dda-col-md-4 dda-accessibility-item\">\r\n                          <h2 class=\"dda-fs-body-lg dda-fw-700 mb-1\">Screen Reader</h2>\r\n                          <p class=\"mb-3\">Listen to the content of the page by clicking play or listen</p>\r\n                          <div class=\"rs_skip rsbtn rs_preserve\" id=\"readspeaker_button1\">\r\n                            <a href={this.readSpeakerLink} rel=\"nofollow\" class=\"rsbtn_play circle readspeaker\" accessKey=\"L\" aria-label=\"Listen to this page using ReadSpeaker\">\r\n                              <i class=\"material-icons\">volume_up</i>\r\n                            </a>\r\n                          </div>\r\n                        </div>\r\n                        <div class=\"dda-col-md-4 dda-accessibility-item\">\r\n                          <h2 class=\"dda-fs-body-lg dda-fw-700 mb-1\">Text Size</h2>\r\n                          <p class=\"mb-3\">Use the buttons below to increase or decrease the text size</p>\r\n                          <div class=\"d-flex dda-gap-4\">\r\n                            <dda-button button_color=\"default-secondary\" icon_button_shape=\"circle\" custom_class=\"\" size=\"lg\" onClick={this.baseTexthandler}>\r\n                              A\r\n                            </dda-button>\r\n                            <dda-button button_color=\"default-secondary\" icon_button_shape=\"circle\" custom_class=\"\" size=\"lg\" onClick={this.lgTexthandler}>\r\n                              A+\r\n                            </dda-button>\r\n                            <dda-button button_color=\"default-secondary\" icon_button_shape=\"circle\" custom_class=\"\" size=\"lg\" onClick={this.smTexthandler}>\r\n                              A-\r\n                            </dda-button>\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <button class=\"close-btn close_accessibility\" aria-label=\"Close Sidebar\" onClick={this.toggleAccessibilty}>\r\n                        <i class=\"materinal-icons\">close</i>\r\n                      </button>\r\n                    </div>\r\n                  </div>\r\n                </li>\r\n                <li>\r\n                  <dda-tooltip title_text=\"Language\" position=\"top\">\r\n                    <dda-button button_color=\"onsurface-secondary\" custom_class=\"tool-btn\" button_shape=\"circle\" size=\"sm\" onClick={this.languagehandler}>\r\n                      العربية\r\n                    </dda-button>\r\n                  </dda-tooltip>\r\n                </li>\r\n                <li>\r\n                  <dda-tooltip title_text=\"Login\" position=\"top\">\r\n                    <dda-link-button\r\n                      button_color=\"onsurface-secondary\"\r\n                      start_icon=\"sentiment_satisfied\"\r\n                      custom_class=\"tool-btn\"\r\n                      href={this.loginLink}\r\n                      button_shape=\"circle\"\r\n                      size=\"sm\"\r\n                    >\r\n                      Login\r\n                    </dda-link-button>\r\n                  </dda-tooltip>\r\n                </li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </header>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dda-horizontal-stepper.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-horizontal-stepper.entry.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,2zDAA2zD,CAAC;AAC51D,mCAAe,uBAAuB;;ACDtC,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,mCAAe,SAAS;;MCMX,oBAAoB;IALjC;;QAOU,iBAAY,GAAW,CAAC,CAAC;QAGxB,gBAAW,GAA+D,EAAE,CAAC;KA0BvF;IAxBC,iBAAiB;QACf,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC3C;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,sBAAsB,IAC1E,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAChC,WAAK,KAAK,EAAE,UAAU,KAAK,KAAK,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,EAAE,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,GAAI,WAAW,GAAG,EAAE,EAAE,IAClH,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WAAK,KAAK,EAAC,QAAQ,GAAO,CACtB,EACN,WAAK,KAAK,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAO,EAC5C,WAAK,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAO,EAClD,WAAK,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAO,CACpD,CACF,CACP,CAAC,CACE,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.css?tag=dda-horizontal-stepper","src/global/global.css?tag=dda-horizontal-stepper","src/components/stepper/dda-horizontal-stepper/dda-horizontal-stepper.tsx"],"sourcesContent":[".h-stepper-container {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  width: 100%;\r\n}\r\n\r\n.h-step {\r\n  width: 100%;\r\n  text-align: center;\r\n  padding: 0px 0px 16px 0px;\r\n}\r\n\r\n.h-step-indicator {\r\n  position: relative;\r\n}\r\n\r\n.h-step-indicator .circle {\r\n  width: 16px;\r\n  height: 16px;\r\n  margin: 0 auto;\r\n  border-radius: 50%;\r\n  background-color: var(--dda-neutral-80);\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  z-index: 3;\r\n}\r\n\r\n.h-step-indicator::before {\r\n  content: \"\";\r\n  width: calc(100% - 3px);\r\n  height: 1px;\r\n  border-top: dashed 1px var(--dda-neutral-variant-80);\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 0;\r\n  z-index: 1;\r\n  transform: translate(0%, -50%);\r\n}\r\n.h-step .h-step-content {\r\n  padding: 8px 16px 0px 16px;\r\n}\r\n\r\n.h-step .h-step-title {\r\n  font-size: 14px;\r\n  font-weight: var(--dda-fw-400);\r\n  color: var(--dda-neutral-variant-30);\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.h-step .h-step-subtitle {\r\n  font-size: 18px;\r\n  color: var(--dda-neutral-60);\r\n  font-weight: var(--dda-fw-500);\r\n}\r\n\r\n.h-step.completed .h-step-subtitle{\r\n  font-weight: var(--dda-fw-400);\r\n}\r\n\r\n.h-step .h-step-description {\r\n  font-size: 14px;\r\n  color: var(--dda-neutral-60);\r\n}\r\n\r\n.h-step.completed .circle{\r\n  background: var(--dda-color-success-40);\r\n}\r\n\r\n.h-step.active .circle {\r\n  background-color: var(--dda-color-primary-40);\r\n  box-shadow: 0px 0px 0px 3px var(--dda-color-primary-95);\r\n}\r\n\r\n.h-step.completed .h-step-indicator::before,\r\n.h-step.active .h-step-indicator::before {\r\n  width: 100%;\r\n  border-top: solid 1px var(--dda-color-primary-40);\r\n}\r\n\r\n.h-step.active .h-step-indicator::after {\r\n  content: \"\";\r\n  width: calc(50% - 3px);\r\n  height: 1px;\r\n  border-top: solid 1px var(--dda-color-primary-40);\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 100%;\r\n  z-index: 2;\r\n  transform: translate(0%, -50%);\r\n}\r\n\r\n\r\n\r\n.h-step.completed .h-step-title{\r\n  color: var(--dda-color-success-40);\r\n}\r\n.h-step.active .h-step-title{\r\n  color: var(--dda-color-primary-40);\r\n}\r\n.h-step.completed .h-step-subtitle,\r\n.h-step.active .h-step-subtitle{\r\n  color: var(--dda-neutral-0);\r\n}\r\n.h-step.completed .h-step-description,\r\n.h-step.active .h-step-description{\r\n  color: var(--dda-neutral-variant-30);\r\n}","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.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@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:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\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;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\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-black {\r\n  color: var(--dda-on-surface-0);\r\n}\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\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\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","import { Component, Prop,  State, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-horizontal-stepper',\r\n  styleUrls: ['dda-horizontal-stepper.css', '../../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaHorizontalStepper {\r\n  @Prop() steps: string; // JSON string of steps\r\n  @Prop() current_step: number = 1;\r\n  @Prop() custom_class?: string; \r\n  @Prop() component_mode?: string; \r\n  @State() parsedSteps: { title: string, subtitle: string, description: string }[] = [];\r\n\r\n  componentWillLoad() {\r\n    this.parsedSteps = JSON.parse(this.steps);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={`${this.custom_class} ${this.component_mode} h-stepper-container`}>\r\n          {this.parsedSteps.map((step, index) => (\r\n            <div class={`h-step ${index === this.current_step ? 'active' : ''} ${index < this.current_step  ? 'completed' : ''}`}>\r\n              <div class=\"h-step-indicator\">\r\n                <div class=\"circle\"></div>\r\n              </div>\r\n              <div class=\"h-step-content\">\r\n                <div class=\"h-step-title\">{step.title}</div>\r\n                <div class=\"h-step-subtitle\">{step.subtitle}</div>\r\n                <div class=\"h-step-description\">{step.description}</div>\r\n              </div>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"dda-input.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,4pWAA4pW,CAAC;AAC9qW,uBAAe,QAAQ;;ACDvB,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,uBAAe,SAAS;;MCMX,QAAQ;IALrB;;QASU,SAAI,GAAW,MAAM,CAAC;KA8C/B;IAnCC,WAAW,CAAC,KAAK;QACf,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;KACjC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG;YACjB,qBAAqB;YACrB,IAAI,CAAC,eAAe,GAAG,kBAAkB,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE;YACpE,IAAI,CAAC,IAAI,GAAG,kBAAkB,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YAC9C,IAAI,CAAC,YAAY,GAAG,aAAa,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YACzD,IAAI,CAAC,IAAI,KAAK,WAAW,GAAG,sBAAsB,GAAG,EAAE;YACvD,IAAI,CAAC,IAAI,KAAK,UAAU,GAAG,oBAAoB,GAAG,EAAE;YACpD,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE5B,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,UAAU,IACnB,IAAI,CAAC,KAAK,IAAI,8DAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAS,EAC1F,4EACc,IAAI,CAAC,UAAU,EAC3B,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAC3C,KAAK,EAAC,gCAAgC,GACtC,EACD,IAAI,CAAC,WAAW,IAAI,6DAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,WAAW,CAAQ,EAC3E,IAAI,CAAC,aAAa,IAAI,6DAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,aAAa,CAAQ,CAC9E,CACD,EACP;KACH;;;;;;","names":[],"sources":["src/global/input.css?tag=dda-input","src/global/global.css?tag=dda-input","src/components/dda-input/dda-input.tsx"],"sourcesContent":[".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(--dda-fs-title-sm);\r\n    color: var(--dda-on-surface-0);\r\n    line-height: 22px;\r\n    font-weight: var(--dda-fw-400);\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(--dda-fs-body-lg);\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(--dda-fs-body-lg);\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(--dda-fs-body-lg);\r\n    color: var(--dda-on-surface-0);\r\n    font-weight: var(--dda-fw-400);\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.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(--dda-fs-body-lg);\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.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(--dda-fs-body-lg);\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    background-color: var(--dda-neutral-variant-95);\r\n    outline: 0;\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(--dda-fs-body-md);\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(--dda-fs-body-md);\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: 24px;\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}\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\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}\r\n\r\n.dda-input-size-small .dda-search-btngroup {\r\n    top: 4px;\r\n}\r\n\r\n.dda-search-area .icon-close {\r\n    display: flex;\r\n    color: var(--dda-on-surface-variant-30);\r\n    font-size: 20px;\r\n    margin: 0px;\r\n    margin-inline-end: 15px;\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 .icon-close{\r\n    color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-search-field {\r\n    padding: 8px 40px 8px 40px;\r\n}\r\n\r\n.dda-search-action .dda-search-field {\r\n    padding: 8px 110px 8px 40px;\r\n}\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\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\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(--dda-fs-body-lg);\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(--dda-fs-body-lg);\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\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(--dda-fs-body-lg);\r\n}\r\n.dda-file-name {\r\n    font-size: var(--dda-fs-body-lg);\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\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dda-grid.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n@import url('./templates/dda-footer-main.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@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:root{\r\n  --font-family-main: 'Dubai', sans-serif;\r\n}\r\nbody {\r\n  font-family: \"Dubai\", Helvetica, sans-serif;\r\n  font-size: var(--dda-fs-body-lg);\r\n  font-weight: var(--dda-fw-400);\r\n  line-height: 1.5;\r\n  color: var(--dda-on-surface-0);\r\n  margin: 0;\r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\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;\r\n}\r\n\r\nbutton {\r\n  cursor: pointer;\r\n}\r\n\r\nul {\r\n  margin: 0;\r\n  padding: 0;\r\n  list-style: none;\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-black {\r\n  color: var(--dda-on-surface-0);\r\n}\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\r\n::-ms-input-placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n::placeholder {\r\n  color: #8E9191;\r\n}\r\n\r\n.dda-flex {\r\n  display: flex;\r\n}\r\n\r\n.dda-flex-column {\r\n  flex-direction: column;\r\n}\r\n\r\n.dda-inline-flex {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-align-center {\r\n  align-items: center;\r\n}\r\n\r\n.dda-justify-space {\r\n  justify-content: space-between;\r\n}\r\n\r\n.dda-justify-center {\r\n  justify-content: center;\r\n}\r\n\r\n.m-0 {\r\n  margin: 0px !important;\r\n}\r\n\r\n.p-0 {\r\n  padding: 0px !important;\r\n}\r\n\r\n.py-0 {\r\n  padding-top: 0px !important;\r\n  padding-bottom: 0px !important;\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","import { Component, Prop, h, Host } 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  @Prop() label: string;\r\n  @Prop() placeholder: string;\r\n  @Prop() value: string;\r\n  @Prop() type: string = 'text';\r\n  @Prop() helper_text: string;\r\n  @Prop() error_message: string;\r\n  @Prop() validation_type?: string;\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\r\n  handleInput(event) {\r\n    this.value = event.target.value;\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, // Include custom class\r\n      this.component_mode,\r\n    ].filter(Boolean).join(' ');\r\n    \r\n    return (\r\n      <Host>\r\n        <div class={inputClass}>\r\n          {this.label && <label htmlFor={this.input_id} class=\"dda-input-label\">{this.label}</label>}\r\n          <input\r\n            aria-label={this.aria_label}\r\n            id={this.input_id}\r\n            type={this.type}\r\n            placeholder={this.placeholder}\r\n            value={this.value}\r\n            onInput={(event) => this.handleInput(event)}\r\n            class=\"dda-input-field dda-input-text\"\r\n          />\r\n          {this.helper_text && <span class=\"dda-helper-text\">{this.helper_text}</span>}\r\n          {this.error_message && <span class=\"dda-error-message\">{this.error_message}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"],"version":3}