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

package/dist/cjs/dda-select.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-select.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,4pWAA4pW,CAAC;AAC9qW,wBAAe,QAAQ;;ACDvB,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,wBAAe,SAAS;;MCMX,SAAS;IALtB;;QAUU,aAAQ,GAAY,KAAK,CAAC;QAIzB,YAAO,GAAY,KAAK,CAAC;;QAG1B,iBAAY,GAAY,EAAE,CAAC;KA6DpC;IAxDC,IAAY,aAAa;QACvB,IAAI;YACF,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;SACjC;QAAC,WAAM;YACN,OAAO,EAAE,CAAC;SACX;KACF;IAED,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;KACF;IAED,YAAY,CAAC,MAAc;QACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;YACvB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;SACtB;KACF;IAED,MAAM;QAGJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,EAAE,IAAI,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,MAAM,mBAAmB,IAAI,CAAC,IAAI,mBAAmB,IAAI,CAAC,KAAK,GAAG,IACnN,IAAI,CAAC,KAAK,IAAIA,oEAAO,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAS,EAC3FA,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,mFAAoB,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,mCAAmC,EAAC,OAAO,EAAE,QAAO,IAAI,CAAC,YAAY,EAAE,CAAA,EAAC,IAClJ,IAAI,CAAC,QAAQ,IAAI,kBAAkB,EACpCA,gEAAG,KAAK,EAAE,gBAAgB,IAAG,IAAI,CAAC,OAAO,GAAG,mBAAmB,GAAG,qBAAqB,CAAK,CACrF,EACR,IAAI,CAAC,OAAO,KACXA,kEAAK,KAAK,EAAC,yCAAyC,IACjD,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,IAC5B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,MAAM,KAC3BA,oBAAQ,IAAI,EAAC,QAAQ,EACnB,KAAK,EAAE,2BAA2B,IAAI,CAAC,QAAQ,KAAK,MAAM,GAAG,UAAU,GAAG,EAAE,EAAE,EAC9E,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAEvC,MAAM,CACA,CACV,CAAC,KAEFA,iBAAK,KAAK,EAAC,yBAAyB,2BAA2B,CAChE,CACG,CACP,CACG,EACL,IAAI,CAAC,WAAW,IAAIA,mEAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,WAAW,CAAQ,EAC3E,IAAI,CAAC,aAAa,IAAIA,mEAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,aAAa,CAAQ,CAC9E,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/global/input.css?tag=dda-select","src/global/global.css?tag=dda-select","src/components/dda-select/dda-select.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-select',\r\n  styleUrls: ['../../global/input.css', '../../global/global.css',],\r\n  shadow: false,\r\n})\r\nexport class Ddaselect {\r\n  @Prop() label: string;\r\n  @Prop() options: string; // Receive options as a string\r\n    // @Prop() options: { title: string }[];\r\n  @Prop() selected: string;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() error?: string;\r\n  @Prop() error_message: string;\r\n  @Prop() helper_text: string;\r\n  @State() is_open: boolean = false;\r\n  @Prop() size?: string;\r\n  //@Prop() validationtype?: string;\r\n  @Prop() custom_class?: string = ''; \r\n  @Prop() component_mode?: string; \r\n  @Prop() aria_label?: string;\r\n  @Prop() button_id: string;\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  toggleSelect() {\r\n    if (!this.disabled) {\r\n      this.is_open = !this.is_open;\r\n    }\r\n  }\r\n\r\n  selectOption(option: string) {\r\n    if (!this.disabled) {\r\n      this.selected = option;\r\n      this.is_open = false;\r\n    }\r\n  }\r\n\r\n  render() {\r\n\r\n    \r\n    return (\r\n      <Host>\r\n        <div class={`dda-input-container ${this.custom_class} ${this.component_mode} ${this.disabled ? 'dda-input-disabled' : ''} ${this.is_open ? 'show' : 'hide'} dda-input-size-${this.size} dda-validation-${this.error} `}>\r\n          {this.label && <label htmlFor={this.button_id} class=\"dda-input-label\">{this.label}</label>}\r\n          <div class=\"dda-dropdown-container\">\r\n            <button aria-label={this.aria_label} id={this.button_id} type=\"button\" class=\"dda-input-field dda-select-header\" onClick={() => {this.toggleSelect()}}>\r\n              {this.selected || 'Select an option'}\r\n              <i class={`material-icons`}>{this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</i>\r\n            </button>\r\n            {this.is_open && (\r\n              <div class=\"dda-input-dropdown-list dda-select-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_message && <span class=\"dda-error-message\">{this.error_message}</span>}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-sticky-footer.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-sticky-footer.entry.cjs.js","mappings":"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","names":["h"],"sources":["src/components/dda-sticky-footer/dda-sticky-footer.css?tag=dda-sticky-footer&encapsulation=shadow","src/components/dda-sticky-footer/dda-sticky-footer.tsx"],"sourcesContent":["","import { Component, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'dda-sticky-footer',\r\n  styleUrl: 'dda-sticky-footer.css',\r\n  shadow: true,\r\n})\r\nexport class DdaStickyFooter {\r\n  /** Left Section Props */\r\n  @Prop() happinessIconHref: string;\r\n  @Prop() happinessIconSrc: string;\r\n  @Prop() happinessIconAlt: string;\r\n  @Prop() happinessIconTooltip: string;\r\n\r\n  @Prop() accessibilityIconHref: string;\r\n  @Prop() accessibilityIconSrc: string;\r\n  @Prop() accessibilityIconAlt: string;\r\n  @Prop() accessibilityIconTooltip: string;\r\n\r\n  @Prop() servicesIconHref: string;\r\n  @Prop() servicesIconSrc: string;\r\n  @Prop() servicesIconAlt: string;\r\n  @Prop() servicesIconTooltip: string;\r\n  @Prop() servicesIconText: string;\r\n\r\n  /** Middle Section Props */\r\n  @Prop() firstLogoHref: string;\r\n  @Prop() firstLogoSrc: string;\r\n  @Prop() firstLogoAlt: string;\r\n  @Prop() firstLogoTooltip: string;\r\n\r\n  @Prop() secondLogoHref: string;\r\n  @Prop() secondLogoSrc: string;\r\n  @Prop() secondLogoAlt: string;\r\n  @Prop() secondLogoTooltip: string;\r\n\r\n  @Prop() thirdLogoHref: string;\r\n  @Prop() thirdLogoSrc: string;\r\n  @Prop() thirdLogoAlt: string;\r\n  @Prop() thirdLogoTooltip: string;\r\n\r\n  /** Right Section Props */\r\n  @Prop() locationButtonHref: string;\r\n  @Prop() locationButtonText: string;\r\n  @Prop() locationButtonIcon: string;\r\n\r\n  @Prop() newsButtonHref: string;\r\n  @Prop() newsButtonText: string;\r\n  @Prop() newsButtonIcon: string;\r\n\r\n  @Prop() aiIconHref: string;\r\n  @Prop() aiIconSrc: string;\r\n  @Prop() aiIconAlt: string;\r\n  @Prop() aiIconTooltip: string;\r\n\r\n  @Prop() chatIconHref: string;\r\n  @Prop() chatIconSrc: string;\r\n  @Prop() chatIconAlt: string;\r\n  @Prop() chatIconTooltip: string;\r\n\r\n  render() {\r\n    return (\r\n      <footer class=\"dda-footer\">\r\n        <div class=\"footer-content\">\r\n          {/* Left Section */}\r\n          <div class=\"dda-footer-item dda-footer-left\">\r\n            <ul>\r\n              <li class=\"foot-icon-btn\">\r\n                <dda-tooltip title_text={this.happinessIconTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.happinessIconHref}>\r\n                    <img src={this.happinessIconSrc} alt={this.happinessIconAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n              <li class=\"foot-icon-btn\">\r\n                <dda-tooltip title_text={this.accessibilityIconTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.accessibilityIconHref}>\r\n                    <img src={this.accessibilityIconSrc} alt={this.accessibilityIconAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n              <li class=\"foot-icon-btn\">\r\n                <dda-tooltip title_text={this.servicesIconTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.servicesIconHref}>\r\n                    <img src={this.servicesIconSrc} alt={this.servicesIconAlt} />\r\n                    {this.servicesIconText && <span>{this.servicesIconText}</span>}\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n\r\n          {/* Middle Section */}\r\n          <div class=\"dda-footer-item dda-footer-middle\">\r\n            <ul class=\"foot-logo\">\r\n              <li>\r\n                <dda-tooltip title_text={this.firstLogoTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.firstLogoHref}>\r\n                    <img src={this.firstLogoSrc} alt={this.firstLogoAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n              <li>\r\n                <dda-tooltip title_text={this.secondLogoTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.secondLogoHref}>\r\n                    <img src={this.secondLogoSrc} alt={this.secondLogoAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n              <li>\r\n                <dda-tooltip title_text={this.thirdLogoTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.thirdLogoHref}>\r\n                    <img src={this.thirdLogoSrc} alt={this.thirdLogoAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n\r\n          {/* Right Section */}\r\n          <div class=\"dda-footer-item dda-footer-right\">\r\n            <ul>\r\n              <li class=\"foot-menu\">\r\n                <dda-link-button\r\n                  button_color=\"onsurface-link\"\r\n                  start_icon={this.locationButtonIcon}\r\n                  href={this.locationButtonHref}\r\n                  size=\"sm\"\r\n                >\r\n                  {this.locationButtonText}\r\n                </dda-link-button>\r\n              </li>\r\n              <li class=\"foot-menu\">\r\n                <dda-link-button\r\n                  button_color=\"onsurface-link\"\r\n                  start_icon={this.newsButtonIcon}\r\n                  href={this.newsButtonHref}\r\n                  size=\"sm\"\r\n                >\r\n                  {this.newsButtonText}\r\n                </dda-link-button>\r\n              </li>\r\n              <li class=\"foot-icon-btn\">\r\n                <dda-tooltip title_text={this.aiIconTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.aiIconHref}>\r\n                    <img src={this.aiIconSrc} alt={this.aiIconAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n              <li class=\"foot-icon-btn\">\r\n                <dda-tooltip title_text={this.chatIconTooltip} description=\"\" position=\"top\">\r\n                  <a href={this.chatIconHref}>\r\n                    <img src={this.chatIconSrc} alt={this.chatIconAlt} />\r\n                  </a>\r\n                </dda-tooltip>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </div>\r\n      </footer>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dda-tabs.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"dda-tabs.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,UAAU,GAAG,24FAA24F,CAAC;AAC/5F,sBAAe,UAAU;;ACDzB,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,sBAAe,SAAS;;MCMX,OAAO;IALpB;;QAMU,SAAI,GAAyB,MAAM,CAAC;QACpC,gBAAW,GAA0F,iBAAiB,CAAC;QACvH,kBAAa,GAAY,KAAK,CAAC;QAC/B,iBAAY,GAAY,EAAE,CAAC;QAK1B,eAAU,GAAW,CAAC,CAAC;QAEhC,SAAI,GAAG;YACL,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE;YAC/C,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE;YAC/C,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,qBAAqB,EAAE;SAChD,CAAC;KAuBH;IArBC,YAAY,CAAC,KAAa;QACxB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;KACzB;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,sBAAsB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,IAC7F,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAEE,OAAK,MACxBF,oBAAQ,EAAE,EAAE,IAAI,CAAC,SAAS,gBAAc,IAAI,CAAC,UAAU,EAAE,IAAI,EAAC,QAAQ,EACpE,KAAK,EAAE,iBAAiB,IAAI,CAAC,UAAU,KAAKE,OAAK,GAAG,QAAQ,GAAG,EAAE,EAAE,EACnE,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,CAACA,OAAK,CAAC,IAEtC,IAAI,CAAC,IAAI,KAAK,WAAW,IAAIF,eAAG,KAAK,EAAE,gBAAgB,IAAG,GAAG,CAAC,IAAI,CAAK,EACxEA,sBAAO,GAAG,CAAC,KAAK,CAAQ,CACjB,CACV,CAAC,CACE,CACD,EACP;KACH;;;;;;","names":["h","Host","index"],"sources":["src/components/dda-tabs/dda-tabs.css?tag=dda-tabs","src/global/global.css?tag=dda-tabs","src/components/dda-tabs/dda-tabs.tsx"],"sourcesContent":[".dda-tabs-container {\r\n  display: inline-flex;\r\n}\r\n\r\n.dda-tab-item {\r\n  background: transparent;\r\n  display: inline-flex;\r\n  font-size: 16px;\r\n  color: var(--dda-on-surface-0);\r\n  gap: 6px;\r\n  align-items: center;\r\n  border: 0;\r\n  border-radius: 8px;\r\n  padding: 10px 16px;\r\n  cursor: pointer;\r\n  position: relative;\r\n  transition: all 0.25s ease-in-out;\r\n}\r\n\r\n.light-mode .dda-tab-item{\r\n  color: var(--dda-neutral-0);\r\n}\r\n\r\n.dda-tab-item i {\r\n  font-size: 22px;\r\n  color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-tab-item.active span,\r\n.dda-tab-item:hover span {\r\n  font-weight: var(--dda-fw-500);\r\n}\r\n\r\n.dda-tab-default .dda-tab-item.active,\r\n.dda-tab-default .dda-tab-item:hover {\r\n  background: var(--dda-neutral-variant-94);\r\n  color: var(--dda-color-primary-40);\r\n}\r\n\r\n.light-mode.dda-tab-default .dda-tab-item.active,\r\n.light-mode.dda-tab-default .dda-tab-item:hover {\r\n  color: var(--dda-primary-40);\r\n}\r\n\r\n.dda-tab-default .dda-tab-item.active i,\r\n.dda-tab-default .dda-tab-item:hover i {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-tab-filed .dda-tab-item.active,\r\n.dda-tab-filed .dda-tab-item:hover {\r\n  background: var(--dda-color-primary-40);\r\n  color: var(--dda-neutral-100);\r\n}\r\n\r\n.light-mode.dda-tab-filed .dda-tab-item.active,\r\n.light-mode.dda-tab-filed .dda-tab-item:hover {\r\n  background: var(--dda-primary-40);\r\n}\r\n\r\n.dda-tab-filed .dda-tab-item.active i,\r\n.dda-tab-filed .dda-tab-item:hover i {\r\n  color: var(--dda-neutral-100);\r\n}\r\n\r\n.dda-tab-underline {\r\n  border-bottom: solid 1px var(--dda-neutral-90);\r\n}\r\n\r\n\r\n.dda-tab-underline .dda-tab-item::after,\r\n.dda-tab-underline-filled .dda-tab-item::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 50%;\r\n  width: 0;\r\n  height: 4px;\r\n  background-color: var(--dda-color-primary-40);\r\n  border-radius: 8px 8px 0px 0px;\r\n  transform: translateX(-50%);\r\n  transition: all 0.25s ease-in-out;\r\n}\r\n.light-mode.dda-tab-underline .dda-tab-item::after,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item::after{\r\n  background-color: var(--dda-primary-40);\r\n}\r\n.dda-tab-underline .dda-tab-item:hover::after,\r\n.dda-tab-underline .dda-tab-item.active::after,\r\n.dda-tab-underline-filled .dda-tab-item:hover::after,\r\n.dda-tab-underline-filled .dda-tab-item.active::after{\r\n  width: calc(100% - 32px);\r\n}\r\n\r\n.dda-tab-underline .dda-tab-item.active,\r\n.dda-tab-underline .dda-tab-item.active i,\r\n.dda-tab-underline-filled .dda-tab-item.active,\r\n.dda-tab-underline-filled .dda-tab-item.active i,\r\n.dda-tab-underline .dda-tab-item:hover,\r\n.dda-tab-underline .dda-tab-item:hover i,\r\n.dda-tab-underline-filled .dda-tab-item:hover,\r\n.dda-tab-underline-filled .dda-tab-item:hover i {\r\n  color: var(--dda-color-primary-40);\r\n}\r\n\r\n.light-mode.dda-tab-underline .dda-tab-item.active,\r\n.light-mode.dda-tab-underline .dda-tab-item.active i,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item.active,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item.active i,\r\n.light-mode.dda-tab-underline .dda-tab-item:hover,\r\n.light-mode.dda-tab-underline .dda-tab-item:hover i,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item:hover,\r\n.light-mode.dda-tab-underline-filled .dda-tab-item:hover i {\r\n  color: var(--dda-primary-40);\r\n}\r\n\r\n.dda-tab-underline-filled .dda-tab-item.active,\r\n.dda-tab-underline-filled .dda-tab-item:hover {\r\n  background: var(--dda-neutral-variant-94);\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-tabs',\r\n  styleUrls: ['dda-tabs.css', '../../global/global.css'],\r\n  shadow: false,\r\n})\r\nexport class DdaTabs {\r\n  @Prop() type: 'text' | 'text-icon' = 'text'; // Default to text type\r\n  @Prop() hover_style: 'dda-tab-default' | 'dda-tab-filed' | 'dda-tab-underline' |'dda-tab-underline-filled' = 'dda-tab-default'; // Default to light background hover style\r\n  @Prop() border_bottom: boolean = false; // Default to no border-bottom\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() active_tab: number = 0;\r\n\r\n  tabs = [\r\n    { title: 'Tab 1', icon: 'sentiment_satisfied' },\r\n    { title: 'Tab 2', icon: 'sentiment_satisfied' },\r\n    { title: 'Tab 3', icon: 'sentiment_satisfied' },\r\n  ];\r\n\r\n  setActiveTab(index: number) {\r\n    this.active_tab = index;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class={`dda-tabs-container ${this.hover_style} ${this.custom_class} ${this.component_mode}`}>\r\n          {this.tabs.map((tab, index) => (\r\n            <button id={this.button_id} aria-label={this.aria_label} type=\"button\"\r\n              class={`dda-tab-item  ${this.active_tab === index ? 'active' : ''}`}\r\n              onClick={() => this.setActiveTab(index)}\r\n            >\r\n              {this.type === 'text-icon' && <i class={`material-icons`}>{tab.icon}</i>}\r\n              <span>{tab.title}</span>\r\n            </button>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}"],"version":3}