npm - @dubai-design-system/components-js - Versions diffs - 4.1.0 → 5.0.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (595) hide show

package/dist/cjs/dda-dropdown.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-dropdown.entry.cjs.js","mappings":"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","names":["h","Host"],"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/cjs/dda-footer.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-footer.entry.cjs.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,QACEA,qEAAQ,KAAK,EAAC,WAAW,IACvBA,kEAAK,KAAK,EAAC,8BAA8B,IACvCA,kEAAK,KAAK,EAAC,iDAAiD,IAC1DA,iEAAI,KAAK,EAAC,8CAA8C,IAAE,IAAI,CAAC,WAAW,CAAM,EAChFA,gEAAG,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAC,WAAW,CAAK,EACjEA,kEAAK,KAAK,EAAC,oBAAoB,IAC7BA,yEAAY,YAAY,EAAC,iBAAiB,EAAC,IAAI,EAAC,IAAI,IACjD,IAAI,CAAC,gBAAgB,CACX,EACbA,yEAAY,YAAY,EAAC,kBAAkB,EAAC,IAAI,EAAC,IAAI,IAClD,IAAI,CAAC,eAAe,CACV,CACT,CACF,CACF,EAENA,kEAAK,KAAK,EAAC,8BAA8B,IACvCA,kEAAK,KAAK,EAAC,SAAS,IAClBA,kEAAK,KAAK,EAAC,mBAAmB,IAC5BA,kEAAK,KAAK,EAAC,aAAa,IACtBA,kEAAK,KAAK,EAAC,WAAW,EAAC,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,GAAI,EAC/DA,gEAAG,KAAK,EAAC,iBAAiB,yFAEtB,CACA,CACF,EACNA,kEAAK,KAAK,EAAC,cAAc,IACvBA,kEAAK,KAAK,EAAC,SAAS,IACjB,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACpBA,iBAAK,KAAK,EAAC,0CAA0C,IACnDA,eAAG,KAAK,EAAC,iDAAiD,IAAE,OAAO,CAAC,KAAK,CAAK,EAC9EA,gBAAI,KAAK,EAAC,aAAa,IACpB,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACtBA,oBACEA,eAAG,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,EAENA,kEAAK,KAAK,EAAC,oBAAoB,IAC7BA,kEAAK,KAAK,EAAC,6CAA6C,IACtDA,gEAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,aAAa,CAAK,EACnDA,iEAAI,KAAK,EAAC,qCAAqC,IAC5C,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACdA,oBACEA,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,IAChBA,iBAAK,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":["h"],"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/cjs/dda-header.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-header.entry.cjs.js","mappings":"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","names":["h"],"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/cjs/dda-horizontal-stepper.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-horizontal-stepper.entry.cjs.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,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,sBAAsB,IAC1E,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEE,OAAK,MAChCF,iBAAK,KAAK,EAAE,UAAUE,OAAK,KAAK,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,EAAE,IAAIA,OAAK,GAAG,IAAI,CAAC,YAAY,GAAI,WAAW,GAAG,EAAE,EAAE,IAClHF,iBAAK,KAAK,EAAC,kBAAkB,IAC3BA,iBAAK,KAAK,EAAC,QAAQ,GAAO,CACtB,EACNA,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,iBAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAO,EAC5CA,iBAAK,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,QAAQ,CAAO,EAClDA,iBAAK,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAO,CACpD,CACF,CACP,CAAC,CACE,CACD,EACP;KACH;;;;;;","names":["h","Host","index"],"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/cjs/dda-input.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-input.entry.cjs.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,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,UAAU,IACnB,IAAI,CAAC,KAAK,IAAIA,oEAAO,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAS,EAC1FA,kFACc,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,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-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}

package/dist/cjs/dda-link-button_2.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-link-button.dda-tooltip.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,64ZAA64Z,CAAC;AACn6Z,4BAAe,YAAY;;ACD3B,MAAMA,WAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,4BAAeA,WAAS;;MCMX,aAAa;IAL1B;;;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;QAC3B,SAAI,GAAY,GAAG,CAAC;KAmC7B;IA/BC,MAAM;QACJ,MAAM,eAAe,GAAG;YACtB,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;QAI5B,QACEC,QAACC,UAAI,uDACHD;;YAEE,EAAE,EAAE,IAAI,CAAC,SAAS,EAClB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,eAAe,gBAEV,IAAI,CAAC,UAAU,IAE1B,IAAI,CAAC,UAAU,IAAIA,gEAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,UAAU,CAAK,EACnEA,oEAAQ,EACP,IAAI,CAAC,QAAQ,IAAIA,gEAAG,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,QAAQ,CAAM,CAC9D,CACC,EACP;KACH;;;;ACxDH,MAAM,SAAS,GAAG,y6uDAAy6uD,CAAC;AAC57uD,yBAAe,SAAS;;ACDxB,MAAM,aAAa,GAAG,i5EAAi5E,CAAC;AACx6E,yBAAe,aAAa;;MCMf,UAAU;IALvB;;QAQU,aAAQ,GAAwC,KAAK,CAAC;QACtD,iBAAY,GAAY,EAAE,CAAC;KAgBpC;IAbC,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAE,yBAAyB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,cAAc,EAAE,IAC7EA,oEAAa,EACbA,kEAAK,KAAK,EAAE,mBAAmB,IAAI,CAAC,QAAQ,EAAE,IAC5CA,uEAAS,IAAI,CAAC,UAAU,CAAU,EAClCA,kEAAI,IAAI,CAAC,WAAW,CAAK,CACrB,CACF,CACD,EACP;KACH;;;;;;;","names":["globalCss","h","Host"],"sources":["src/global/dda-button.css?tag=dda-link-button","src/global/global.css?tag=dda-link-button","src/components/dda-link-button/dda-link-button.tsx","src/global/global.css?tag=dda-tooltip","src/components/dda-tooltip/dda-tooltip.css?tag=dda-tooltip","src/components/dda-tooltip/dda-tooltip.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-link-button',\r\n styleUrls: ['../../global/dda-button.css', '../../global/global.css',],\r\n shadow: false,\r\n})\r\nexport class DdaLinkButton {\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() href?: string = '#'; // Custom class prop\r\n @Prop() component_mode?: string; \r\n @Prop() button_id: string;\r\n\r\n render() {\r\n const linkbuttonClass = [\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 \r\n\r\n return (\r\n <Host>\r\n <a\r\n // type={this.type}\r\n id={this.button_id}\r\n href={this.href}\r\n class={linkbuttonClass}\r\n // disabled={this.disabled}\r\n aria-label={this.aria_label}\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 </a>\r\n </Host>\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",".dda-tooltip-container {\r\n position: relative;\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n.dda-tooltip-box {\r\n position: absolute;\r\n visibility: hidden;\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 text-align: center;\r\n padding: 5px 12px;\r\n border-radius: 6px;\r\n z-index: 1;\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n}\r\n.dda-tooltip-container:hover .dda-tooltip-box {\r\n visibility: visible;\r\n opacity: 1;\r\n}\r\n.dda-tooltip-box strong{\r\n font-size: 16px;\r\n color: var(--dda-neutral-0);\r\n white-space: nowrap;\r\n}\r\n.dda-tooltip-box p{\r\n font-size: 14px;\r\n color: var(--dda-neutral-variant-30);\r\n white-space: nowrap;\r\n margin: 0;\r\n}\r\n\r\n.dda-tooltip-box.top {\r\n bottom: 100%;\r\n left: 50%;\r\n transform: translate(-50%);\r\n margin-bottom: 7px;\r\n}\r\n.dda-tooltip-box.top::before, .dda-tooltip-box.top::after {\r\n content: \"\";\r\n border-left: 10px solid transparent;\r\n border-right: 10px solid transparent;\r\n position: absolute;\r\n left: 50%;\r\n margin-inline-start: -10px;\r\n}\r\n.dda-tooltip-box.top::before {\r\n top: 100%;\r\n border-top: 8px solid var(--dda-neutral-90);\r\n margin-top: 0px;\r\n}\r\n.dda-tooltip-box.top::after {\r\n top: 100%;\r\n border-top: 8px solid var(--dda-neutral-100);\r\n margin-top: -2px;\r\n z-index: 1;\r\n}\r\n\r\n\r\n.dda-tooltip-box.bottom {\r\n top: 100%;\r\n left: 50%;\r\n transform: translate(-50%);\r\n margin-top: 7px;\r\n}\r\n.dda-tooltip-box.bottom::before, .dda-tooltip-box.bottom::after {\r\n content: \"\";\r\n border-left: 10px solid transparent;\r\n border-right: 10px solid transparent;\r\n position: absolute;\r\n left: 50%;\r\n margin-inline-start: -10px;\r\n}\r\n.dda-tooltip-box.bottom::before {\r\n bottom: 100%;\r\n border-bottom: 8px solid var(--dda-neutral-90);\r\n margin-bottom: 0px;\r\n}\r\n.dda-tooltip-box.bottom::after {\r\n bottom: 100%;\r\n border-bottom: 8px solid var(--dda-neutral-100);\r\n margin-bottom: -2px;\r\n z-index: 1;\r\n}\r\n\r\n.dda-tooltip-box.left {\r\n top: 50%;\r\n right: 100%;\r\n margin-inline-end: 13px;\r\n transform: translate(0%, -50%);\r\n}\r\n.dda-tooltip-box.left::before, .dda-tooltip-box.left::after,\r\n.dda-tooltip-box.right::before, .dda-tooltip-box.right::after {\r\n content: \"\";\r\n border-top: 10px solid transparent;\r\n border-bottom: 10px solid transparent;\r\n position: absolute;\r\n top: 50%;\r\n transform: translate(0%, -50%);\r\n}\r\n.dda-tooltip-box.left::before {\r\n bottom: 100%;\r\n border-left: 8px solid var(--dda-neutral-90);\r\n right: -9px;\r\n}\r\n.dda-tooltip-box.left::after {\r\n bottom: 100%;\r\n border-left: 8px solid var(--dda-neutral-100);\r\n z-index: 1;\r\n right: -8px;\r\n}\r\n\r\n.dda-tooltip-box.right {\r\n top: 50%;\r\n left: 100%;\r\n margin-inline-start: 13px;\r\n transform: translate(0%, -50%);\r\n}\r\n.dda-tooltip-box.right::before {\r\n bottom: 100%;\r\n border-right: 8px solid var(--dda-neutral-90);\r\n left: -9px;\r\n}\r\n.dda-tooltip-box.right::after {\r\n bottom: 100%;\r\n border-right: 8px solid var(--dda-neutral-100);\r\n z-index: 1;\r\n left: -8px;\r\n}","import { Component, Prop, h, Host } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-tooltip',\r\n styleUrls: ['../../global/global.css', 'dda-tooltip.css'],\r\n shadow: false,\r\n})\r\nexport class DdaTooltip {\r\n @Prop() title_text: string;\r\n @Prop() description: string;\r\n @Prop() position: 'top' | 'bottom' | 'left' | 'right' = 'top'; // Default to top position\r\n @Prop() custom_class?: string = ''; \r\n @Prop() component_mode?: string; \r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class={`dda-tooltip-container ${this.custom_class} ${this.component_mode}`}>\r\n <slot></slot>\r\n <div class={`dda-tooltip-box ${this.position}`}>\r\n <strong>{this.title_text}</strong>\r\n <p>{this.description}</p>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}"],"version":3}

package/dist/cjs/dda-number-field.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-number-field.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/global/input.css?tag=dda-number-field","src/global/global.css?tag=dda-number-field","src/components/dda-number-field/dda-number-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-number-field',\r\n styleUrls: ['../../global/input.css', '../../global/global.css'],\r\n shadow: false,\r\n})\r\nexport class DdaNumberField {\r\n @Prop() placeholder: string;\r\n @Prop() label: string;\r\n @Prop() value: string;\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; // JSON string of currency options\r\n @Prop() currencies: string;\r\n @Prop() selected_currency: string = 'USD';\r\n @State() is_focused: boolean = false;\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 @State() isCurrencyDropdownOpen: boolean = false;\r\n\r\n handleInput(event) {\r\n const inputElement = event.target as HTMLInputElement\r\n const inputValue = inputElement.value.replace(/[^0-9.]/g, '');\r\n inputElement.value = inputValue;\r\n }\r\n handleFocus() {\r\n this.is_focused = true;\r\n }\r\n\r\n handleBlur() {\r\n this.is_focused = false;\r\n }\r\n toggleCurrencyDropdown() {\r\n this.isCurrencyDropdownOpen = !this.isCurrencyDropdownOpen;\r\n this.handleFocus();\r\n this.handleBlur();\r\n }\r\n\r\n selectCurrency(currency: string) {\r\n this.selected_currency = currency;\r\n this.isCurrencyDropdownOpen = false;\r\n }\r\n\r\n private get parsedCurrencies(): string[] {\r\n try {\r\n return JSON.parse(this.currencies);\r\n } catch {\r\n return [];\r\n }\r\n }\r\n\r\n render() {\r\n const containerClass = [\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.is_focused ? 'dda-input-focus' : '',\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={containerClass}>\r\n {this.label && <label htmlFor={this.input_id} class=\"dda-input-label\">{this.label}</label>}\r\n <div class=\"dda-input-field-group dda-number-field\">\r\n <input\r\n id={this.input_id}\r\n aria-label={this.aria_label}\r\n type=\"text\"\r\n placeholder={this.placeholder}\r\n value={this.value}\r\n pattern={\"[0-9]*\"}\r\n onInput={event => this.handleInput(event)}\r\n onFocus={this.handleFocus.bind(this)}\r\n onBlur={this.handleBlur.bind(this)}\r\n class=\"dda-field-group-input\"\r\n />\r\n <div class=\"dda-input-dropdown-btn\">\r\n <button type=\"button\" class=\"dda-dropdown-select\" onClick={() => this.toggleCurrencyDropdown()}>\r\n {this.selected_currency} <i class={`material-icons`}>{this.isCurrencyDropdownOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}</i>\r\n </button>\r\n {this.isCurrencyDropdownOpen && (\r\n <div class=\"dda-input-dropdown-list\">\r\n {this.parsedCurrencies.length > 0 ? (\r\n this.parsedCurrencies.map(option => (\r\n <button type=\"button\" class={`dda-input-dropdown-item ${this.selected_currency === option ? 'selected' : ''}`} onClick={() => this.selectCurrency(option)}>\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 </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-pagination.cjs.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-pagination.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/dda-pagination/dda-pagination.css?tag=dda-pagination","src/global/global.css?tag=dda-pagination","src/components/dda-pagination/dda-pagination.tsx"],"sourcesContent":[".dda-pagination-container {\r\n min-width: 380px;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 20px;\r\n}\r\n\r\n.dda-pagination {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n.dda-pagination button {\r\n height: 40px;\r\n min-width: 40px;\r\n border: transparent;\r\n border-radius: 5px;\r\n background-color: var(--dda-surface-100);\r\n font-size: 16px;\r\n color: var(--dda-on-surface-variant-30);\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.light-mode.dda-pagination button{\r\n background-color: var(--dda-neutral-100);\r\n color: var(--dda-neutral-variant-30);\r\n} \r\n\r\n.dda-pagination span{\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode.dda-pagination span {\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-pagination-simple-slider {\r\n width: 100%;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n\r\n.dda-pagination-simple-slider button {\r\n background-color: transparent;\r\n border: transparent;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.dda-pagination-simple-slider span {\r\n padding: 0 20px;\r\n}\r\n\r\n.dda-pagination-buttons button {\r\n background-color: transparent;\r\n border: transparent;\r\n display: inline-flex;\r\n gap: 10px;\r\n}\r\n\r\n.dda-pagination-buttons button.active {\r\n background-color: transparent;\r\n color: var(--dda-color-primary-40)\r\n}\r\n.light-mode.dda-pagination-buttons button.active {\r\n color: var(--dda-primary-40)\r\n}\r\n\r\n.dda-pagination-text {\r\n width: 100%;\r\n justify-content: space-between;\r\n}\r\n.dda-pagination-text button{\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n.dda-pagination-text-pages {\r\n width: 100%;\r\n justify-content: space-between;\r\n gap: 8px;\r\n}\r\n.dda-pagination-text-pages button{\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n.dda-pagination-text-pages button.active {\r\n background-color: var(--dda-color-primary-40);\r\n color: var(--dda-surface-100)\r\n}\r\n.light-mode.dda-pagination-text-pages button.active {\r\n background-color: var(--dda-primary-40);\r\n color: var(--dda-neutral-100)\r\n}\r\n.dda-pagination-button-text {\r\n width: 100%;\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n\r\n.dda-pagination-button-text button {\r\n min-width: 50px;\r\n border: 0px;\r\n border-right: solid 1px var(--dda-neutral-90);\r\n border-top: solid 1px var(--dda-neutral-90);\r\n border-bottom: solid 1px var(--dda-neutral-90);\r\n border-radius: 0px;\r\n}\r\n\r\n.dda-pagination-button-text button.active {\r\n color: var(--dda-color-primary-40);\r\n font-weight: var(--dda-fw-700);\r\n}\r\n.light-mode.dda-pagination-button-text button.active {\r\n color: var(--dda-primary-40);\r\n}\r\n.dda-pagination-button-text button.prev {\r\n border-left: solid 1px var(--dda-neutral-90);\r\n border-radius: 5px 0 0 5px;\r\n}\r\n\r\n.dda-pagination-button-text button.next {\r\n border-radius: 0 5px 5px 0;\r\n}\r\n.dda-pagination-buttons-pages{\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.04);\r\n}\r\n.dda-pagination-buttons-pages button {\r\n border: 0px;\r\n border-right: solid 1px var(--dda-neutral-90);\r\n border-top: solid 1px var(--dda-neutral-90);\r\n border-bottom: solid 1px var(--dda-neutral-90);\r\n border-radius: 0px;\r\n}\r\n\r\n.dda-pagination-buttons-pages button.prev {\r\n border-left: solid 1px var(--dda-neutral-90);\r\n border-radius: 5px 0 0 5px;\r\n}\r\n\r\n.dda-pagination-buttons-pages button.next {\r\n border-radius: 0 5px 5px 0;\r\n}\r\n\r\n.dda-pagination-full {\r\n gap: 8px;\r\n}\r\n\r\n.dda-pagination-full button {\r\n min-width: auto;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 10px;\r\n padding: 0px;\r\n overflow: hidden;\r\n text-indent: -100px;\r\n border: solid 1px var(--dda-surface-90);\r\n}\r\n.light-mode.dda-pagination-full button{\r\n border: solid 1px var(--dda-neutral-90);\r\n}\r\n.dda-pagination-full button.active {\r\n background-color: var(--dda-color-primary-40);\r\n border: transparent;\r\n}\r\n.light-mode.dda-pagination-full button.active {\r\n background-color: var(--dda-primary-40);\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, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-pagination',\r\n styleUrls: ['dda-pagination.css', '../../global/global.css'],\r\n shadow: false,\r\n})\r\nexport class DdaPagination {\r\n @Prop() total_pages: number = 8;\r\n @Prop() current_page: number = 1;\r\n @Prop() type: 'simple-slider' | 'buttons' | 'text' | 'text-pages' | 'button-text' | 'buttons-pages' | 'full' = 'simple-slider';\r\n @Prop() custom_class: string = '';\r\n @Prop() component_mode?: string; \r\n\r\n @Watch('total_pages')\r\n validateTotalPages(newValue: number) {\r\n if (newValue < 1) {\r\n this.total_pages = 1;\r\n }\r\n }\r\n\r\n @Watch('current_page')\r\n validateCurrentPage(newValue: number) {\r\n if (newValue < 1) {\r\n this.current_page = 1;\r\n } else if (newValue > this.total_pages) {\r\n this.current_page = this.total_pages;\r\n }\r\n }\r\n\r\n componentWillLoad() {\r\n this.validateTotalPages(this.total_pages);\r\n this.validateCurrentPage(this.current_page);\r\n }\r\n\r\n private renderPagination() {\r\n switch (this.type) {\r\n case 'simple-slider':\r\n return (\r\n <div class={`dda-pagination dda-pagination-simple-slider ${this.custom_class} ${this.component_mode}`}>\r\n <button class=\"prev\" disabled={this.current_page === 1} onClick={() => this.setcurrentpage(this.current_page - 1)}><i class=\"material-icons\">arrow_back</i> Prev</button>\r\n <span>Page {this.current_page} of {this.total_pages}</span>\r\n <button class=\"next\" disabled={this.current_page === this.total_pages} onClick={() => this.setcurrentpage(this.current_page + 1)}>Next <i class=\"material-icons\">arrow_forward</i></button>\r\n </div>\r\n );\r\n case 'buttons':\r\n return (\r\n <div class={`dda-pagination dda-pagination-buttons ${this.custom_class} ${this.component_mode}`}>\r\n <button class=\"prev\" disabled={this.current_page === 1} onClick={() => this.setcurrentpage(this.current_page - 1)}><i class=\"material-icons\">arrow_back</i> Prev</button>\r\n {this.renderPageButtons()}\r\n <button class=\"next\" disabled={this.current_page === this.total_pages} onClick={() => this.setcurrentpage(this.current_page + 1)}>Next <i class=\"material-icons\">arrow_forward</i></button>\r\n </div>\r\n );\r\n case 'text':\r\n return (\r\n <div class={`dda-pagination dda-pagination-text ${this.custom_class} ${this.component_mode}`}>\r\n <button class=\"prev\" disabled={this.current_page === 1} onClick={() => this.setcurrentpage(this.current_page - 1)}><i class=\"material-icons\">arrow_back</i></button>\r\n <span>Page {this.current_page} of {this.total_pages}</span>\r\n <button class=\"next\" disabled={this.current_page === this.total_pages} onClick={() => this.setcurrentpage(this.current_page + 1)}><i class=\"material-icons\">arrow_forward</i></button>\r\n </div>\r\n );\r\n case 'text-pages':\r\n return (\r\n <div class={`dda-pagination dda-pagination-text-pages ${this.custom_class} ${this.component_mode}`}>\r\n <button class=\"prev\" disabled={this.current_page === 1} onClick={() => this.setcurrentpage(this.current_page - 1)}><i class=\"material-icons\">arrow_back</i></button>\r\n {this.renderPageButtons()}\r\n <button class=\"next\" disabled={this.current_page === this.total_pages} onClick={() => this.setcurrentpage(this.current_page + 1)}><i class=\"material-icons\">arrow_forward</i></button>\r\n </div>\r\n );\r\n case 'button-text':\r\n return (\r\n <div class={`dda-pagination dda-pagination-button-text ${this.custom_class} ${this.component_mode}`}>\r\n <button class=\"prev\" disabled={this.current_page === 1} onClick={() => this.setcurrentpage(this.current_page - 1)}><i class=\"material-icons\">arrow_back</i></button>\r\n {this.renderPageButtons()}\r\n <button class=\"next\" disabled={this.current_page === this.total_pages} onClick={() => this.setcurrentpage(this.current_page + 1)}><i class=\"material-icons\">arrow_forward</i></button>\r\n </div>\r\n );\r\n case 'buttons-pages':\r\n return (\r\n <div class={`dda-pagination dda-pagination-buttons-pages ${this.custom_class} ${this.component_mode}`}>\r\n <button class=\"prev\" disabled={this.current_page === 1} onClick={() => this.setcurrentpage(this.current_page - 1)}><i class=\"material-icons\">arrow_back</i></button>\r\n <button class=\"next\" disabled={this.current_page === this.total_pages} onClick={() => this.setcurrentpage(this.current_page + 1)}><i class=\"material-icons\">arrow_forward</i></button>\r\n </div>\r\n );\r\n case 'full':\r\n return (\r\n <div class={`dda-pagination dda-pagination-full ${this.custom_class} ${this.component_mode}`}>\r\n {this.renderPageButtons()}\r\n </div>\r\n );\r\n }\r\n }\r\n\r\n\r\n private renderPageButtons() {\r\n const buttons = [];\r\n for (let i = 1; i <= this.total_pages; i++) {\r\n buttons.push(\r\n <button class={i === this.current_page ? 'active' : ''} onClick={() => this.setcurrentpage(i)}>\r\n {i}\r\n </button>\r\n );\r\n }\r\n return buttons;\r\n }\r\n\r\n private setcurrentpage(page: number) {\r\n if (page >= 1 && page <= this.total_pages) {\r\n this.current_page = page;\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <div class={`dda-pagination-container`}>\r\n {this.renderPagination()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}