npm - @dubai-design-system/components-js - Versions diffs - 3.12.9 → 3.12.11 - Mend

@dubai-design-system/components-js 3.12.9 → 3.12.11

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 (925) hide show

package/dist/components/dda-select.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-select.js","mappings":"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","names":[],"sources":["src/global/input.css?tag=dda-select","src/global/global.css?tag=dda-select","src/components/dda-select/dda-select.tsx"],"sourcesContent":[".dda-input-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n position: relative;\r\n}\r\n\r\n.dda-input-label {\r\n font-size: var(--font-body);\r\n color: var(--dda-on-surface-0);\r\n line-height: 24px;\r\n font-weight: var(--font-weight-regular);\r\n}\r\n.light-mode .dda-input-label {\r\n color: var(--dda-neutral-0);\r\n}\r\n.dda-input-field-wrapper {\r\n position: relative;\r\n}\r\n\r\n.dda-field-group-input {\r\n height: 32px;\r\n background-color: transparent;\r\n flex: 1;\r\n font-size: var(--font-caption);\r\n font-weight: var(--dda-fw-400);\r\n padding: 0px;\r\n color: var(--dda-on-surface-0);\r\n border: none;\r\n outline: none;\r\n}\r\n.light-mode .dda-field-group-input{\r\n color: var(--dda-neutral-0);\r\n} \r\n.dda-input-field-group {\r\n width: 100%;\r\n height: 55px;\r\n padding: 8px 16px;\r\n background: var(--dda-surface-100);\r\n border: 1px solid var(--dda-surface-90);\r\n border-radius: 8px;\r\n font-size: var(--font-caption);\r\n color: var(--dda-on-surface-0);\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n.light-mode .dda-input-field-group{\r\n background: var(--dda-neutral-100);\r\n border: 1px solid var(--dda-neutral-90);\r\n color: var(--dda-neutral-0);\r\n}\r\n.dda-input-field {\r\n width: 100%;\r\n height: 55px;\r\n padding: 8px 16px;\r\n background: var(--dda-surface-100);\r\n border: 1px solid var(--dda-surface-90);\r\n border-radius: 8px;\r\n font-size: var(--font-body);\r\n color: var(--dda-on-surface-0);\r\n font-weight: var(--dda-fw-400);\r\n}\r\n.dda-date-picker input{\r\n color: var(--dda-on-surface-40)\r\n}\r\n.dda-date-picker input[type=\"date\"]::-webkit-calendar-picker-indicator {\r\n color: var(--dda-on-surface-40);\r\n}\r\n.dda-date-picker input[type=\"date\"]::-moz-calendar-picker-indicator {\r\n /* filter: invert(20%) sepia(90%) saturate(300%) hue-rotate(180deg); */\r\n}\r\n.dda-date-picker input[type=\"date\"].has-value {\r\n color: var(--dda-on-surface-0);\r\n}\r\n.light-mode .dda-input-field{\r\n background: var(--dda-neutral-100);\r\n border: 1px solid var(--dda-neutral-90);\r\n color: var(--dda-neutral-0);\r\n}\r\n.dda-input-size-small .dda-input-field-group,\r\n.dda-input-size-small .dda-input-field {\r\n height: 48px;\r\n padding: 8px 12px;\r\n}\r\n\r\n.dda-input-focus-filled .dda-phone-field, \r\n.dda-input-focus .dda-input-field-group,\r\n.dda-input-field:focus {\r\n /* outline: none; */\r\n border-color: var(--dda-color-primary-40);\r\n box-shadow: 0px 0px 0px 3px var(--dda-primary-variant-95);\r\n}\r\n.dda-input-field:focus-visible {\r\n outline: 1px solid var(--dda-color-primary-40);\r\n outline-offset: -1px;\r\n}\r\n.light-mode.dda-input-focus-filled .dda-phone-field,\r\n.light-mode.dda-input-focus .dda-input-field-group,\r\n.light-mode .dda-input-field:focus {\r\n outline: none;\r\n border-color: var(--dda-primary-40);\r\n box-shadow: 0px 0px 0px 3px var(--dda-primary-95);\r\n}\r\n\r\n.dda-input-dropdown-btn {\r\n min-width: 110px;\r\n position: relative;\r\n display: inline-block;\r\n padding: 0;\r\n}\r\n\r\n.dda-dropdown-select {\r\n width: 100%;\r\n height: 32px;\r\n display: flex;\r\n justify-content: space-between;\r\n background: transparent;\r\n border: transparent;\r\n font-size: var(--font-caption);\r\n color: var(--dda-on-surface-0);\r\n padding: 0;\r\n align-items: center;\r\n cursor: pointer;\r\n gap: 6px;\r\n}\r\n.dda-dropdown-select:focus-visible{\r\n outline: 1px solid var(--dda-color-primary-40);\r\n outline-offset: 1px;\r\n}\r\n.light-mode .dda-dropdown-select{\r\n color: var(--dda-neutral-0);\r\n}\r\n\r\n.dda-dropdown-select img {\r\n width: 24px;\r\n}\r\n\r\n\r\n.dda-dropdown-container {\r\n position: relative;\r\n width: auto;\r\n /* min-width: 140px; */\r\n}\r\n.dda-dropdown-container.bg-transparent .dda-dropdown-header{\r\n padding: 0px;\r\n height: auto;\r\n background: transparent;\r\n border: transparent;\r\n box-shadow: none;\r\n}\r\n.dda-dropdown-header {\r\n width: auto;\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n}\r\n.dda-dropdown-header .three-dots{\r\n font-size: 25px;\r\n color: var(--dda-neutral-variant-60);\r\n}\r\n.dda-dropdown-header .three-dots path{\r\n fill: var(--dda-neutral-variant-60);\r\n}\r\n.dda-dropdown-header .dda-dropdown-text{\r\n flex: 1;\r\n display: flex;\r\n justify-content: space-between;\r\n gap: 15px;\r\n}\r\n.dda-dropdown-header .dda-dropdown-text span{\r\n color: var(--dda-on-surface-variant-30);\r\n display: flex;\r\n align-items: center;\r\n}\r\n.light-mode .dda-dropdown-text span{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-dropdown-header .dda-dropdown-text i{\r\n font-size: 31px;\r\n}\r\n.dda-dropdown-header .dda-dropdown-text path{\r\n fill: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-dropdown-header .dda-dropdown-text path{\r\n fill: var(--dda-neutral-variant-30);\r\n}\r\n.dda-dropdown-header:focus .three-dots path{\r\n fill: var(--dda-on-surface-variant-30);\r\n}\r\n.dda-input-dropdown-list {\r\n width: 100%;\r\n min-width: 150px;\r\n max-height: 200px;\r\n background-color: var(--dda-neutral-100);\r\n border: 1px solid var(--dda-neutral-90);\r\n border-radius: 8px;\r\n overflow-y: auto;\r\n position: absolute;\r\n top: 100%;\r\n margin-top: 1px;\r\n inset-inline-start: 0px;\r\n z-index: 9999;\r\n box-shadow: 0px 8px 10px -6px #1018281A;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar-track {\r\n border-radius: 4px;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar {\r\n width: 4px;\r\n}\r\n\r\n.dda-input-dropdown-list::-webkit-scrollbar-thumb {\r\n border-radius: 4px;\r\n background-color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-input-dropdown-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 7px;\r\n width: 100%;\r\n font-size: var(--font-caption);\r\n background: transparent;\r\n border: transparent;\r\n padding: 10px;\r\n cursor: pointer;\r\n}\r\n\r\n.dda-input-dropdown-item:focus-visible,\r\n.dda-input-dropdown-item:hover,\r\n.dda-input-dropdown-item.selected {\r\n background-color: var(--dda-neutral-variant-95);\r\n outline: 0;\r\n}\r\n.dda-input-dropdown-list .country-select img{\r\n width: 20px;\r\n}\r\n\r\n.dda-helper-text {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n font-size: var(--font-caption);\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-helper-text{\r\n color: var(--dda-neutral-30);\r\n}\r\n.dda-error-message {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: var(--font-caption);\r\n color: var(--dda-color-error-40);\r\n}\r\n\r\n.dda-helper-text i,\r\n.dda-helper-text svg,\r\n.dda-error-message i,\r\n.dda-error-message svg {\r\n font-size: 21px;\r\n}\r\n\r\n.dda-success-text {\r\n display: flex;\r\n justify-content: space-between;\r\n font-size: var(--font-caption);\r\n color: var(--dda-color-success-40);\r\n}\r\n\r\n.dda-validation-error .dda-input-field-group,\r\n.dda-validation-error .dda-input-field {\r\n color: var(--dda-color-error-40);\r\n border-color: var(--dda-color-error-40);\r\n box-shadow: none;\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field-group,\r\n.light-mode.dda-validation-error .dda-input-field {\r\n color: var(--dda-error-40);\r\n border-color: var(--dda-error-40);\r\n box-shadow: none;\r\n}\r\n\r\n.dda-validation-error .icon-close,\r\n.dda-validation-error .dda-error-message,\r\n.dda-validation-error .dda-field-group-input,\r\n.dda-validation-error .dda-file-input span {\r\n color: var(--dda-color-error-40) !important;\r\n}\r\n\r\n.light-mode.dda-validation-error .icon-close,\r\n.light-mode.dda-validation-error .dda-error-message,\r\n.light-mode.dda-validation-error .dda-field-group-input,\r\n.light-mode.dda-validation-error .dda-file-input span {\r\n color: var(--dda-error-40) !important;\r\n}\r\n\r\n.dda-validation-error .dda-input-field::-ms-input-placeholder,\r\n.dda-validation-error .dda-field-group-input::-ms-input-placeholder {\r\n color: var(--dda-color-error-40);\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field::-ms-input-placeholder,\r\n.light-mode.dda-validation-error .dda-field-group-input::-ms-input-placeholder {\r\n color: var(--dda-error-40);\r\n}\r\n\r\n.dda-validation-error .dda-input-field::placeholder,\r\n.dda-validation-error .dda-field-group-input::placeholder {\r\n color: var(--dda-color-error-40);\r\n}\r\n\r\n.light-mode.dda-validation-error .dda-input-field::placeholder,\r\n.light-mode.dda-validation-error .dda-field-group-input::placeholder {\r\n color: var(--dda-error-40);\r\n}\r\n\r\n.dda-input-disabled .dda-input-label,\r\n.dda-input-disabled .dda-helper-text,\r\n.dda-input-disabled .dda-error-message,\r\n.dda-input-disabled i,\r\n.dda-input-disabled .dda-dropdown-select,\r\n.dda-input-disabled .dda-file-input span,\r\n.dda-input-disabled .dda-file-choose {\r\n color: var(--dda-neutral-60) !important;\r\n}\r\n\r\n.dda-input-disabled .dda-input-field-group,\r\n.dda-input-disabled .dda-input-field {\r\n background: var(--dda-neutral-92);\r\n border-color: var(--dda-neutral-90);\r\n color: var(--dda-neutral-60) !important;\r\n box-shadow: none;\r\n pointer-events: none;\r\n outline: none;\r\n}\r\n.dda-input-disabled i{\r\n color: var(--dda-neutral-variant-60);\r\n}\r\n.dda-input-disabled svg path{\r\n fill: var(--dda-neutral-variant-60);\r\n}\r\n.dda-input-disabled .dda-input-field::-ms-input-placeholder {\r\n color: var(--dda-neutral-60);\r\n}\r\n\r\n.dda-input-disabled .dda-input-field::placeholder {\r\n color: var(--dda-neutral-60);\r\n}\r\n\r\n.dda-input-disabled .dda-btn {\r\n background-color: var(--dda-neutral-70) !important;\r\n border-color: var(--dda-neutral-70) !important;\r\n}\r\n\r\n.dda-input-disabled .dda-dropdown-select img,\r\n.dda-input-disabled .dda-input-field-wrapper img {\r\n filter: grayscale(1);\r\n}\r\n\r\n/*Specifications*/\r\n\r\n/*Number Field*/\r\n.dda-number-field .dda-field-group-input {\r\n padding-inline-end: 10px;\r\n border-inline-end: solid 1px var(--dda-neutral-90);\r\n}\r\n\r\n.dda-number-field .dda-field-group-input:focus,\r\n.dda-phone-field .dda-field-group-input:focus {\r\n border-inline-start: solid 1px var(--dda-color-primary-40);\r\n} \r\n.dda-number-field .dda-field-group-input:focus-visible,\r\n.dda-phone-field .dda-field-group-input:focus-visible {\r\n outline: 1px solid var(--dda-surface-100);\r\n outline-offset: -1px;\r\n}\r\n.dda-number-field .dda-input-dropdown-btn {\r\n min-width: 80px;\r\n}\r\n\r\n.dda-number-field .dda-input-dropdown-list {\r\n top: 44px;\r\n}\r\n\r\n.dda-input-size-small .dda-number-field .dda-input-dropdown-list {\r\n top: 41px;\r\n}\r\n\r\n/*text ares*/\r\n.dda-input-textarea {\r\n height: auto;\r\n min-height: 120px;\r\n resize: vertical;\r\n}\r\n\r\n/*Search Field*/\r\n.dda-search-area {\r\n position: relative;\r\n}\r\n\r\n.dda-search-area .icon-left {\r\n position: absolute;\r\n top: 16px;\r\n inset-inline-start: 15px;\r\n font-size: 24px;\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n\r\n.light-mode .dda-search-area .icon-left{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-input-size-small .dda-search-area .icon-left {\r\n top: 14px;\r\n}\r\n\r\n.dda-search-area .dda-search-btngroup {\r\n height: 40px;\r\n position: absolute;\r\n top: 7px;\r\n inset-inline-end: 7px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 5px;\r\n}\r\n\r\n.dda-input-size-small .dda-search-btngroup {\r\n top: 4px;\r\n}\r\n\r\n.dda-search-area .dda-search-close-icon {\r\n display: flex;\r\n color: var(--dda-on-surface-variant-30);\r\n font-size: 20px;\r\n margin: 0px;\r\n padding: 0px;\r\n background: none;\r\n border: 0;\r\n cursor: pointer;\r\n}\r\n\r\n.light-mode .dda-search-area .dda-search-close-icon{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n\r\n.dda-search-field {\r\n padding: 8px 26px 8px 40px;\r\n}\r\n\r\n.dda-search-action .dda-search-field {\r\n padding-top: 8px;\r\n padding-bottom: 8px;\r\n padding-inline-start: 40px;\r\n}\r\n.dda-search-action .dda-search-field.has-search-button{\r\n padding-inline-end: 110px;\r\n}\r\n.dda-search-sm .icon-left {\r\n top: 14px;\r\n}\r\n\r\n.dda-search-sm .dda-search-btngroup {\r\n top: 4px;\r\n}\r\n\r\n/*Phone Field*/\r\n.dda-phone-field-group {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.dda-phone-field-group.dda-phone-field-small {\r\n height: 48px;\r\n}\r\n\r\n.dda-phone-field-group.focused,\r\n.dda-phone-field-group.filled {\r\n outline: none;\r\n border-color: var(--dda-color-primary-40);\r\n box-shadow: 0px 0px 0px 3px var(--dda-primary-variant-95);\r\n}\r\n\r\n.dda-phone-field-group.error {\r\n border-color: var(--dda-color-error-40);\r\n box-shadow: none;\r\n}\r\n\r\n.phone-field-country-code {\r\n border: none;\r\n background: none;\r\n margin-inline-end: 0.5rem;\r\n font-size: 1rem;\r\n color: var(--dda-on-surface-0);\r\n}\r\n\r\n.phone-field-country-code:focus-within {\r\n outline: 0;\r\n}\r\n\r\n.dda-phone-field .dda-input-dropdown-list {\r\n top: 44px;\r\n}\r\n\r\n.dda-input-size-small .dda-phone-field .dda-input-dropdown-list {\r\n top: 41px;\r\n}\r\n\r\n/*Credit Card Field*/\r\n.dda-credit-card-field .dda-creditcard-icon {\r\n width: 40px;\r\n position: absolute;\r\n top: 14px;\r\n inset-inline-start: 15px;\r\n}\r\n\r\n.dda-input-size-small .dda-creditcard-icon {\r\n top: 11px;\r\n}\r\n\r\n.dda-credit-card-field .dda-input-field {\r\n padding: 8px 16px 8px 65px;\r\n}\r\n[dir=\"rtl\"] .dda-credit-card-field .dda-input-field {\r\n padding: 8px 65px 8px 16px;\r\n}\r\n/*Select Field*/\r\n.dda-select-header {\r\n cursor: pointer;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.dda-select-header i {\r\n font-size: 28px;\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.dda-select-header .dda-select-button-label:empty {\r\n flex-grow: 1;\r\n}\r\n/*Rich Text Editor*/\r\n.dda-input-container.dda-richtext-editor {\r\n gap: 0px;\r\n}\r\n\r\n.dda-richtext-editor .dda-input-label {\r\n margin-bottom: 8px;\r\n}\r\n\r\n.dda-richtext-editor .dda-helper-text,\r\n.dda-richtext-editor .dda-error-message {\r\n margin-top: 8px;\r\n}\r\n\r\n.dda-richtext-editor .ql-toolbar.ql-snow {\r\n border: 1px solid var(--dda-neutral-90) !important;\r\n border-radius: 8px 8px 0 0;\r\n}\r\n\r\n.dda-richeditor-field {\r\n border: 1px solid var(--dda-neutral-90) !important;\r\n border-radius: 0 0 8px 8px;\r\n}\r\n\r\n.dda-richeditor-field .ql-editor {\r\n height: 100px;\r\n font-size: var(--font-caption);\r\n}\r\n\r\n/*Attach Files*/\r\n\r\n.dda-input-field-group.dda-attach-file {\r\n padding-inline-end: 6px;\r\n}\r\n\r\n.dda-file-input {\r\n width: 100%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.dda-file-input span {\r\n font-size: var(--font-caption);\r\n color: var(--dda-on-surface-variant-30);\r\n}\r\n.light-mode .dda-file-input span{\r\n color: var(--dda-neutral-variant-30);\r\n}\r\n.dda-file-choose {\r\n height: 40px;\r\n background-color: var(--dda-neutral-100);\r\n border: solid 1px var(--dda-neutral-90);\r\n color: var(--dda-color-primary-40);\r\n font-weight: var(--dda-fw-500);\r\n padding: 8px 16px;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n}\r\n.dda-file-choose:focus{\r\n outline: solid 1px var(--dda-color-primary-40);\r\n outline-offset: -1px;\r\n}\r\n\r\n.light-mode .dda-file-choose {\r\n color: var(--dda-primary-40);\r\n}\r\n\r\n.dda-input-disabled .dda-file-choose {\r\n background-color: var(--dda-neutral-95);\r\n}\r\n\r\n.dda-file-choose input {\r\n display: none;\r\n}\r\n\r\n.dda-file-details {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n padding-inline-end: 10px;\r\n}\r\n\r\n.dda-file-icon {\r\n width: 34px;\r\n height: 34px;\r\n}\r\n\r\n.dda-items {\r\n width: calc(100% - 30px);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n.dda-file-details .remove-file{\r\n margin: 0;\r\n padding: 0;\r\n background: transparent;\r\n border: transparent;\r\n}\r\n.dda-file-details .remove-file svg{\r\n font-size: var(--font-caption);\r\n}\r\n.dda-file-name {\r\n width: 100%;\r\n font-size: var(--font-caption);\r\n white-space: nowrap;\r\n overflow-x: auto;\r\n -ms-overflow-style: none;\r\n scrollbar-width: none;\r\n position: relative;\r\n text-overflow: ellipsis\r\n}\r\n.dda-file-name::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n\r\n\r\n\r\n.dda-remove-file {\r\n font-size: 20px;\r\n background: transparent;\r\n border: transparent;\r\n color: var(--dda-on-surface-variant-30);\r\n cursor: pointer;\r\n padding: 0px;\r\n}\r\n\r\ninput[type=\"date\"]::-webkit-input-placeholder {\r\n color: transparent;\r\n}\r\n\r\ninput[type=\"date\"]::-moz-placeholder {\r\n color: transparent;\r\n}\r\n\r\ninput[type=\"date\"]::placeholder {\r\n color: transparent;\r\n}\r\n","@import url('./color.css');\r\n@import url('./typography.css');\r\n@import url('./dda.css');\r\n@import url('./templates/dda-grid.css');\r\n\r\n@import url('./templates/cards.css');\r\n@import url('./templates/dashboard-navigation.css');\r\n/* @import url('./templates/dda-sticky-footer.css'); */\r\n@import url('./templates/side-navigation.css');\r\n@import url('./templates/table.css');\r\n@import url('./templates/website-footer.css');\r\n/* @import url('./templates/dda-header-main.css'); */\r\n\r\n\r\n.material-flat-icon {\r\n font-variation-settings:\r\n 'FILL' 1,\r\n 'wght' 400,\r\n 'GRAD' 0,\r\n 'opsz' 24\r\n}\r\n\r\n.material-symbols-outlined {\r\n font-family: 'Material Symbols Outlined';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n display: inline-block;\r\n line-height: 1;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n.material-icons {\r\n font-family: 'Material Icons';\r\n font-weight: normal;\r\n font-style: normal;\r\n font-size: 24px;\r\n line-height: 1;\r\n letter-spacing: normal;\r\n text-transform: none;\r\n display: inline-block;\r\n white-space: nowrap;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\n:root{\r\n --font-family-main: system-ui, sans-serif;\r\n}\r\nbody {\r\n background-color: var(--dda-surface-100) !important;\r\n font-family: var(--font-family-main) !important;\r\n font-size: var(--font-caption) !important;\r\n font-weight: var(--font-weight-regular) !important;\r\n line-height: 1.5;\r\n color: var(--dda-on-surface-0) !important;\r\n margin: 0;\r\n}\r\nlegend{\r\n font-size: inherit !important;\r\n}\r\n* {\r\n box-sizing: border-box;\r\n}\r\n\r\nul{\r\n margin: 0;\r\n}\r\na{\r\n text-decoration: none;\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nh1, .dda-h1 { font-size: var(--dda-h1); font-weight: 400; }\r\n\r\nh2, .dda-h2 { font-size: var(--dda-h2); font-weight: 400; }\r\n\r\nh3, .dda-h3 { font-size: var(--dda-h3); font-weight: 400; }\r\n\r\nh4, .dda-h4 { font-size: var(--dda-h4); font-weight: 400; }\r\n\r\nh5, .dda-h5 { font-size: var(--dda-h5); font-weight: 400; }\r\n\r\nh6, .dda-h6 { font-size: var(--dda-h6); font-weight: 400; }\r\n\r\n.dda-title { font-size: var(--dda-title); font-weight: 500; }\r\n\r\n.dda-body { font-size: var(--dda-body); font-weight: 400; }\r\n\r\n.dda-caption { font-size: var(--dda-caption); font-weight: 400; }\r\n\r\n.dda-label { font-size: var(--dda-label); font-weight: 400; }\r\n\r\n\r\na,\r\na:hover {\r\n text-decoration: none !important;\r\n}\r\n\r\nbutton {\r\n cursor: pointer;\r\n}\r\n\r\nul {\r\n margin: 0 !important;\r\n padding: 0 !important;\r\n list-style: none;\r\n}\r\n.dda-btn.cta-transparent{\r\n background: none;\r\n color: #ffffff;\r\n border: 0px;\r\n}\r\n.dda-btn.cta-transparent:hover{\r\n background: #ffffff;\r\n color: inherit;\r\n}\r\n\r\n/*Colors*/\r\n.dda-bg-primary {\r\n background-color: var(--dda-color-primary-40);\r\n}\r\n\r\n.dda-bg-secondary {\r\n background-color: var(--dda-color-secondary);\r\n}\r\n\r\n.dda-color-primary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-secondary {\r\n color: var(--dda-color-primary-40);\r\n}\r\n.dda-color-error {\r\n color: var(--dda-color-error-40);\r\n}\r\n.dda-color-warning{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-success{\r\n color: var(--dda-color-warning-40);\r\n}\r\n.dda-color-info{\r\n color: var(--dda-color-info-40);\r\n}\r\n.dda-color-neutral{\r\n color: var(--dda-on-surface-40);\r\n}\r\n.dda-color-neutralvariant{\r\n color: var(--dda-on-surface-variant-40);\r\n}\r\n\r\n.dda-color-black {\r\n color: var(--dda-on-surface-0);\r\n}\r\n\r\n/**/\r\n.visualy-hidden {\r\n position: absolute;\r\n opacity: 0;\r\n width: 0px;\r\n overflow: hidden;\r\n}\r\n/* Border-radius classes */\r\n.dda-rounded-sm {\r\n border-radius: 4px !important;\r\n}\r\n\r\n.dda-rounded-md {\r\n border-radius: 8px !important;\r\n}\r\n\r\n.dda-rounded-lg {\r\n border-radius: 12px !important;\r\n}\r\n\r\n.dda-rounded-circle {\r\n border-radius: 100px !important;\r\n}\r\n\r\n.dda-gap-16 {\r\n gap: 4rem !important;\r\n}\r\n\r\n.dda-gap-12 {\r\n gap: 3rem !important;\r\n}\r\n\r\n.dda-gap-10 {\r\n gap: 2.5rem !important;\r\n}\r\n\r\n.dda-gap-8 {\r\n gap: 2rem !important;\r\n}\r\n\r\n.dda-gap-6 {\r\n gap: 1.5rem !important;\r\n}\r\n\r\n.dda-gap-5 {\r\n gap: 1.25rem !important;\r\n}\r\n\r\n.dda-gap-4 {\r\n gap: 1rem !important;\r\n}\r\n\r\n.dda-gap-3 {\r\n gap: .75rem !important;\r\n}\r\n\r\n.dda-gap-2 {\r\n gap: .5rem !important;\r\n}\r\n\r\n.dda-gap-1 {\r\n gap: 0.375rem !important;\r\n}\r\n\r\n.dda-text-center{\r\n text-align: center;\r\n}\r\n::-ms-input-placeholder {\r\n color: #8E9191;\r\n}\r\n::placeholder {\r\n color: #8E9191;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n.dda-items-start {\r\n align-items: flex-start;\r\n}\r\n\r\n.dda-items-end {\r\n align-items: flex-end;\r\n}\r\n\r\n.dda-items-center {\r\n align-items: center;\r\n}\r\n\r\n.dda-items-baseline {\r\n align-items: baseline;\r\n}\r\n\r\n.dda-items-stretch {\r\n align-items: stretch;\r\n}\r\n\r\n\r\n.dda-position-static {\r\n position: static !important;\r\n}\r\n\r\n.dda-position-relative {\r\n position: relative !important;\r\n}\r\n\r\n.dda-position-absolute {\r\n position: absolute !important;\r\n}\r\n\r\n.dda-position-fixed {\r\n position: fixed !important;\r\n}\r\n\r\n.dda-position-sticky {\r\n position: -webkit-sticky !important;\r\n position: sticky !important;\r\n}\r\n\r\n.top-0 {\r\n top: 0 !important;\r\n}\r\n\r\n.top-50 {\r\n top: 50% !important;\r\n}\r\n\r\n.top-100 {\r\n top: 100% !important;\r\n}\r\n\r\n.bottom-0 {\r\n bottom: 0 !important;\r\n}\r\n\r\n.bottom-50 {\r\n bottom: 50% !important;\r\n}\r\n\r\n.bottom-100 {\r\n bottom: 100% !important;\r\n}\r\n\r\n.start-0 {\r\n left: 0 !important;\r\n}\r\n\r\n.start-50 {\r\n left: 50% !important;\r\n}\r\n\r\n.start-100 {\r\n left: 100% !important;\r\n}\r\n\r\n.end-0 {\r\n right: 0 !important;\r\n}\r\n\r\n.end-50 {\r\n right: 50% !important;\r\n}\r\n\r\n.end-100 {\r\n right: 100% !important;\r\n}\r\n\r\n\r\n.border-right {\r\n border-inline-end: solid 1px #E5E5E5;\r\n}\r\n\r\n.visually-hidden{\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n margin: -1px;\r\n padding: 0;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.maincontent{\r\n padding-top: 170px;\r\n padding-bottom: 100px;\r\n}\r\n\r\n@media screen and (max-width: 767px) {\r\n .maincontent {\r\n padding-top: 100px;\r\n }\r\n}\r\n/*Temporary*/\r\n/* body{\r\n height: 1550px;\r\n} */\r\n","import { Component, Prop, State, h, Host, Element, Event, EventEmitter, Watch, Method } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-select',\r\n styleUrls: ['../../global/input.css', '../../global/global.css'],\r\n shadow: false,\r\n})\r\nexport class Ddaselect {\r\n @Element() el: HTMLElement;\r\n\r\n @Prop() label: string;\r\n @Prop() options: string;\r\n @Prop() selected: string; // can be id or text\r\n @Prop() disabled: boolean = false;\r\n @Prop() error?: string;\r\n @Prop() error_message: string;\r\n @Prop() helper_text: string;\r\n @Prop() validation_type?: string;\r\n @Prop() validation_id: string = 'text';\r\n @Prop() size?: string;\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() button_id: string;\r\n @Prop() toggle_button_name: string;\r\n @Prop() option_select_button_name: string;\r\n @Prop() placeholder: string = '';\r\n @Prop() main_aria_label: string = '';\r\n @Prop() input_name: string = '';\r\n\r\n @State() is_open: boolean = false;\r\n @State() selectedId: number;\r\n @State() selectedText: string;\r\n\r\n @Event() selectChanged: EventEmitter<{ id: number; text: string }>;\r\n @Event() onChanged: EventEmitter<any>;\r\n\r\n @Event() selectBlurred: EventEmitter<{ name: string; value: string }>;\r\n @Event() onBlurred: EventEmitter<any>;\r\n\r\n private get parsedOptions(): { id: number; text: 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 componentWillLoad() {\r\n const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === this.selected || opt.text === this.selected);\r\n if (selectedOption) {\r\n this.selectedId = selectedOption.id;\r\n this.selectedText = selectedOption.text;\r\n }\r\n if (this.selected) {\r\n this.watchSelected(this.selected);\r\n }\r\n }\r\n\r\n toggleSelect() {\r\n if (!this.disabled) {\r\n this.is_open = !this.is_open;\r\n }\r\n }\r\n\r\n selectOption(option: { id: any; text: string }) {\r\n if (!this.disabled) {\r\n this.selectedId = option.id;\r\n this.selectedText = option.text;\r\n this.is_open = false;\r\n this.selectChanged.emit(option);\r\n this.onChanged.emit(option.id);\r\n\r\n this.el.dispatchEvent(\r\n new InputEvent('input', {\r\n bubbles: true,\r\n composed: true,\r\n data: option.id,\r\n inputType: 'select',\r\n }),\r\n );\r\n }\r\n }\r\n\r\n handleClickOutside = (event: MouseEvent) => {\r\n if (this.is_open && !this.el.contains(event.target as Node)) {\r\n this.is_open = false;\r\n }\r\n };\r\n\r\n handleBlur = () => {\r\n this.selectBlurred.emit({\r\n name: this.input_name || this.button_id,\r\n value: this.selectedText || '',\r\n });\r\n this.onBlurred.emit(this.selectedId);\r\n\r\n this.el.dispatchEvent(\r\n new FocusEvent('blur', {\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n };\r\n\r\n connectedCallback() {\r\n document.addEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n disconnectedCallback() {\r\n document.removeEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n @Method()\r\n async setSelected(value: string | number) {\r\n const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);\r\n\r\n if (selectedOption) {\r\n this.selectedId = selectedOption.id;\r\n this.selectedText = selectedOption.text;\r\n this.selected = selectedOption.id.toString();\r\n } else {\r\n this.selectedId = undefined;\r\n this.selectedText = '';\r\n this.selected = '';\r\n }\r\n }\r\n\r\n async setValue(value: string | number) {\r\n const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === value.toString() || opt.text === value);\r\n\r\n if (selectedOption) {\r\n this.selectedId = selectedOption.id;\r\n this.selectedText = selectedOption.text;\r\n this.selected = selectedOption.id.toString();\r\n } else {\r\n this.selectedId = undefined;\r\n this.selectedText = '';\r\n this.selected = '';\r\n }\r\n }\r\n\r\n @Method()\r\n async getSelectedText() {\r\n return this.selectedText;\r\n }\r\n\r\n async getValue() {\r\n return this.selectedText || '';\r\n }\r\n\r\n @Watch('selected')\r\n watchSelected(newVal: string) {\r\n const selectedOption = this.parsedOptions.find(opt => opt.id.toString() === newVal || opt.text === newVal);\r\n\r\n if (selectedOption) {\r\n this.selectedId = selectedOption.id;\r\n this.selectedText = selectedOption.text;\r\n } else {\r\n this.selectedId = undefined;\r\n this.selectedText = '';\r\n }\r\n }\r\n\r\n private numberToWord(num: number): string {\r\n const words = ['One', 'Two', 'Three', 'Four', 'Five'];\r\n return words[num - 1] || num.toString();\r\n }\r\n\r\n render() {\r\n const labelId = `${this.button_id}-label`;\r\n const valueId = `${this.button_id}-value`;\r\n\r\n return (\r\n <Host>\r\n <div\r\n class={`\r\n dda-input-container ${this.custom_class} \r\n ${this.component_mode} \r\n ${this.disabled ? 'dda-input-disabled' : ''} \r\n dda-input-size-${this.size} dda-validation-${this.validation_type}\r\n `}\r\n >\r\n {this.label && (\r\n <span id={labelId} class=\"dda-input-label\">\r\n {this.label}\r\n </span>\r\n )}\r\n <div class=\"dda-dropdown-container\">\r\n <button\r\n name={this.toggle_button_name}\r\n id={this.button_id}\r\n type=\"button\"\r\n class=\"dda-input-field dda-select-header\"\r\n aria-labelledby={`${labelId} ${this.button_id}`}\r\n disabled={this.disabled}\r\n onClick={() => this.toggleSelect()}\r\n onBlur={this.handleBlur}\r\n >\r\n <span id={valueId} class=\"dda-select-button-label\">\r\n {this.selectedText || this.placeholder}\r\n </span>\r\n <i class=\"material-icons\" aria-hidden=\"true\">\r\n {this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n </i>\r\n </button>\r\n\r\n {this.is_open && (\r\n <div class=\"dda-input-dropdown-list dda-select-list\">\r\n {this.parsedOptions.length > 0 ? (\r\n this.parsedOptions.map((option, index) => (\r\n <button\r\n name={`option${this.numberToWord(index + 1)}`}\r\n type=\"button\"\r\n class={`dda-input-dropdown-item ${this.selectedId === option.id ? 'selected' : ''}`}\r\n role=\"option\"\r\n aria-selected={this.selectedId === option.id ? 'true' : 'false'}\r\n onClick={() => this.selectOption(option)}\r\n >\r\n {option.text}\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\r\n {this.validation_type === 'error' && this.error_message ? (\r\n <span class=\"dda-error-message\" id={this.validation_id} role=\"alert\">\r\n {this.error_message}\r\n </span>\r\n ) : (\r\n this.helper_text && (\r\n <span class=\"dda-helper-text\" id={this.validation_id}>\r\n {this.helper_text}\r\n </span>\r\n )\r\n )}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dda-slider.js DELETED Viewed

@@ -1,279 +0,0 @@
-import { p as proxyCustomElement, H, h } from './p-f6588843.js';
-const ddaSliderCss = ".dda-slider-container{position:relative;width:100%;background-color:#fff;box-shadow:0 0 20px rgba(0, 0, 0, 0.1);overflow:hidden;border-radius:8px}.dda-slider{position:relative;width:100%;height:450px}.dda-slide{position:absolute;width:100%;height:100%;opacity:0;display:flex;justify-content:center;align-items:center}.dda-slide.active{opacity:1;z-index:1}.dda-slide img{width:100%;height:100%;object-fit:cover}.dda-slide video{width:100%;height:100%;object-fit:cover}.dda-video-play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;cursor:pointer;z-index:5;background-color:rgba(0, 0, 0, 0.2)}.dda-video-play-overlay svg{width:64px;height:64px;}.dda-video-play-overlay:hover svg{transform:scale(1.2)}.dda-slider-controls-container{display:flex;justify-content:center;align-items:center;width:100%;padding:15px}.dda-slider-prev,.dda-slider-next{background-color:rgba(255, 255, 255, 0.2);color:black;padding:10px 15px;cursor:pointer;font-size:18px;border:none;border-radius:5px;z-index:2}.dda-slider-prev:hover,.dda-slider-next:hover{background-color:rgba(255, 255, 255, 0.4)}.dda-slider-indicator-container{display:flex;justify-content:center}.dda-slider-indicator{width:24px;height:24px;margin:0 5px;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center}.dda-slider-indicator svg{width:24px;height:24px;display:block}.dda-slider-timer-circle{stroke-dasharray:63;stroke-dashoffset:63;}.dda-slider-play-icon,.dda-slider-pause-icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:12px;height:12px}.dda-slider-play-pause-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:pointer;z-index:2}@media (prefers-reduced-motion: no-preference){.dda-slide{transition:opacity 0.5s ease-in-out}.dda-video-play-overlay svg{transition:transform 0.3s ease}.dda-slider-prev,.dda-slider-next{transition:background-color 0.3s}.dda-slider-indicator{transition:all 0.3s}.dda-slider-timer-circle{transition:none}}";
-const DdaSliderStyle0 = ddaSliderCss;
-const DDASlider = /*@__PURE__*/ proxyCustomElement(class DDASlider extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.slides = [];
-        this.interval = 5000;
-        this.autoplay = true;
-        this.currentSlide = 0;
-        this.isPaused = false;
-        this.videoElements = [];
-        this.playIcon = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="play-icon">
-    <polygon points="10,8 16,12 10,16" fill="white" stroke="white" stroke-width="1"/>
-  </svg>`;
-        this.pauseIcon = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pause-icon">
-    <rect x="9" y="8" width="2" height="8" fill="white" stroke="white" stroke-width="0"/>
-    <rect x="13" y="8" width="2" height="8" fill="white" stroke="white" stroke-width="0"/>
-  </svg>`;
-        this.svgIndicators = {
-            inactive: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="10" fill="#ccc" stroke="#ccc" stroke-width="2"/>
-    </svg>`,
-            active: (isPaused, isVideo) => `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="10" fill="#ccc" stroke="#ccc" stroke-width="4"/>
-      ${!isVideo ? `<circle cx="12" cy="12" r="10" class="dda-slider-timer-circle" fill="none" stroke="white" stroke-width="2"
-              stroke-dasharray="63" stroke-dashoffset="63" transform="rotate(-90 12 12)"/>` : ''}
-      ${isPaused ? this.playIcon : this.pauseIcon}
-    </svg>`
-        };
-        this.prevSlide = () => {
-            this.goToSlide(this.currentSlide - 1);
-        };
-        this.nextSlide = () => {
-            this.goToSlide(this.currentSlide + 1);
-        };
-        this.handleIndicatorClick = (index) => {
-            this.goToSlide(index);
-        };
-        this.togglePlayPause = (event) => {
-            var _a;
-            event.stopPropagation();
-            this.isPaused = !this.isPaused;
-            const currentSlideType = (_a = this.slides[this.currentSlide]) === null || _a === void 0 ? void 0 : _a.type;
-            if (currentSlideType === 'video') {
-                const currentVideo = this.videoElements[this.currentSlide];
-                if (currentVideo) {
-                    if (this.isPaused) {
-                        currentVideo.pause();
-                    }
-                    else {
-                        const playPromise = currentVideo.play();
-                        if (playPromise !== undefined) {
-                            playPromise.catch(error => {
-                                console.error('Error toggling video play:', error);
-                                this.isPaused = true;
-                                this.createPlayButtonOverlay(currentVideo);
-                            });
-                        }
-                    }
-                }
-            }
-            if (this.isPaused) {
-                this.resetTimer();
-                const activeIndicator = this.el.shadowRoot.querySelector('.dda-slider-indicator.active');
-                if (activeIndicator) {
-                    const svgContainer = activeIndicator.querySelector('div');
-                    if (svgContainer) {
-                        svgContainer.innerHTML = this.svgIndicators.active(this.isPaused, currentSlideType === 'video');
-                    }
-                }
-            }
-            else {
-                const activeIndicator = this.el.shadowRoot.querySelector('.dda-slider-indicator.active');
-                if (activeIndicator) {
-                    const svgContainer = activeIndicator.querySelector('div');
-                    if (svgContainer) {
-                        svgContainer.innerHTML = this.svgIndicators.active(this.isPaused, currentSlideType === 'video');
-                    }
-                }
-                if (currentSlideType === 'image') {
-                    this.startTimer();
-                }
-            }
-        };
-    }
-    componentDidLoad() {
-        setTimeout(() => {
-            var _a;
-            this.slides.forEach((slide, index) => {
-                if (slide.type === 'video') {
-                    const videoEl = this.el.shadowRoot.querySelector(`.dda-slide[data-index="${index}"] video`);
-                    if (videoEl) {
-                        this.videoElements[index] = videoEl;
-                        videoEl.addEventListener('ended', () => {
-                            if (this.currentSlide === index) {
-                                this.nextSlide();
-                            }
-                        });
-                    }
-                }
-            });
-            if (((_a = this.slides[this.currentSlide]) === null || _a === void 0 ? void 0 : _a.type) === 'video') {
-                const currentVideo = this.videoElements[this.currentSlide];
-                if (currentVideo && !this.isPaused) {
-                    currentVideo.play()
-                        .catch(error => console.warn('Initial video play failed, may need user interaction:', error));
-                }
-            }
-            if (this.autoplay && !this.isPaused) {
-                this.startTimer();
-            }
-        }, 100);
-    }
-    disconnectedCallback() {
-        this.resetTimer();
-        this.videoElements.forEach(video => {
-            if (video) {
-                video.removeEventListener('ended', this.nextSlide);
-            }
-        });
-    }
-    watchCurrentSlide() {
-        var _a;
-        this.handleVideoPlayback();
-        const currentSlideType = ((_a = this.slides[this.currentSlide]) === null || _a === void 0 ? void 0 : _a.type) || 'image';
-        if (this.autoplay && !this.isPaused && currentSlideType === 'image') {
-            setTimeout(() => {
-                this.resetTimer();
-                this.startTimer();
-            }, 50);
-        }
-    }
-    handleVideoPlayback() {
-        var _a;
-        this.videoElements.forEach(videoEl => {
-            if (videoEl) {
-                videoEl.pause();
-            }
-        });
-        const currentSlideType = (_a = this.slides[this.currentSlide]) === null || _a === void 0 ? void 0 : _a.type;
-        if (currentSlideType === 'video' && !this.isPaused) {
-            const currentVideo = this.videoElements[this.currentSlide];
-            if (currentVideo) {
-                if (currentVideo.readyState >= 2) {
-                    currentVideo.currentTime = 0;
-                    const playPromise = currentVideo.play();
-                    if (playPromise !== undefined) {
-                        playPromise.catch(error => {
-                            console.error('Error playing video:', error);
-                            this.createPlayButtonOverlay(currentVideo);
-                        });
-                    }
-                }
-                else {
-                    currentVideo.addEventListener('canplay', () => {
-                        if (this.currentSlide === this.slides.indexOf(this.slides[this.currentSlide]) && !this.isPaused) {
-                            currentVideo.play().catch(error => console.error('Error playing video on canplay:', error));
-                        }
-                    }, { once: true });
-                }
-            }
-        }
-    }
-    createPlayButtonOverlay(videoElement) {
-        const overlay = document.createElement('div');
-        overlay.className = 'dda-video-play-overlay';
-        overlay.innerHTML = `
-      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
-        <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)" />
-        <polygon points="10,8 16,12 10,16" fill="white" />
-      </svg>
-    `;
-        const videoContainer = videoElement.parentElement;
-        if (videoContainer) {
-            videoContainer.style.position = 'relative';
-            videoContainer.appendChild(overlay);
-            overlay.addEventListener('click', () => {
-                videoElement.play()
-                    .then(() => {
-                    overlay.remove();
-                })
-                    .catch(error => console.error('Play from overlay failed:', error));
-            });
-        }
-    }
-    startTimer() {
-        var _a;
-        if (this.isPaused)
-            return;
-        this.resetTimer();
-        const currentSlideType = (_a = this.slides[this.currentSlide]) === null || _a === void 0 ? void 0 : _a.type;
-        if (currentSlideType === 'video')
-            return;
-        requestAnimationFrame(() => {
-            const timerCircle = this.el.shadowRoot.querySelector('.dda-slider-indicator.active .dda-slider-timer-circle');
-            if (timerCircle) {
-                timerCircle.style.transition = 'none';
-                timerCircle.style.strokeDashoffset = '63';
-                void timerCircle.getBoundingClientRect();
-                setTimeout(() => {
-                    if (!this.isPaused) {
-                        timerCircle.style.transition = `stroke-dashoffset ${this.interval}ms linear`;
-                        timerCircle.style.strokeDashoffset = '0';
-                    }
-                }, 20);
-            }
-        });
-        this.slideInterval = window.setInterval(() => {
-            if (!this.isPaused) {
-                this.nextSlide();
-            }
-        }, this.interval);
-    }
-    resetTimer() {
-        if (this.slideInterval) {
-            window.clearInterval(this.slideInterval);
-            this.slideInterval = null;
-        }
-        const timerCircles = this.el.shadowRoot.querySelectorAll('.dda-slider-timer-circle');
-        timerCircles.forEach(circle => {
-            circle.style.transition = 'none';
-            circle.style.strokeDashoffset = '63';
-        });
-    }
-    goToSlide(index) {
-        this.currentSlide = index;
-        if (this.currentSlide < 0) {
-            this.currentSlide = this.slides.length - 1;
-        }
-        else if (this.currentSlide >= this.slides.length) {
-            this.currentSlide = 0;
-        }
-    }
-    render() {
-        return (h("div", { key: 'c913cd71be462a1c4f312570db0fe99dab591a97', class: "dda-slider-container" }, h("div", { key: '0fc9861bffb8e4bb74bd79350b75d635838a4fc2', class: "dda-slider" }, this.slides.map((slide, index) => (h("div", { class: `dda-slide ${index === this.currentSlide ? 'active' : ''}`, "data-index": index }, slide.type === 'image' ? (h("img", { src: slide.url, alt: `Slide ${index + 1}` })) : (h("video", { src: slide.url, controls: false, playsInline: true, preload: "auto", muted: false })))))), h("div", { key: '5dc1aebec849a521a75b7caa971b5e54182369c9', class: "dda-slider-controls-container" }, h("button", { key: 'dfe66b5522ae27085bd48f3f83a336bdc64250a5', class: "dda-slider-prev", onClick: this.prevSlide }, "\u276E"), h("div", { key: '99e06b7a61e2ec5f6848bee62c8b727b96e4eb32', class: "dda-slider-indicator-container" }, this.slides.map((slide, index) => (h("div", { class: `dda-slider-indicator ${index === this.currentSlide ? 'active' : ''}`, onClick: () => this.handleIndicatorClick(index) }, h("div", { innerHTML: index === this.currentSlide ?
-                this.svgIndicators.active(this.isPaused, slide.type === 'video') :
-                this.svgIndicators.inactive }), index === this.currentSlide &&
-            h("div", { class: "dda-slider-play-pause-overlay", onClick: this.togglePlayPause }))))), h("button", { key: 'a3c550c247c8c4c1362182daef81944f9c9682c2', class: "dda-slider-next", onClick: this.nextSlide }, "\u276F"))));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "currentSlide": ["watchCurrentSlide"]
-    }; }
-    static get style() { return DdaSliderStyle0; }
-}, [1, "dda-slider", {
-        "slides": [16],
-        "interval": [2],
-        "autoplay": [4],
-        "currentSlide": [32],
-        "isPaused": [32]
-    }, undefined, {
-        "currentSlide": ["watchCurrentSlide"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dda-slider"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dda-slider":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DDASlider);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-const DdaSlider = DDASlider;
-const defineCustomElement = defineCustomElement$1;
-export { DdaSlider, defineCustomElement };
-//# sourceMappingURL=dda-slider.js.map

package/dist/components/dda-slider.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-slider.js","mappings":"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","names":[],"sources":["src/components/dda-slider/dda-slider.css?tag=dda-slider&encapsulation=shadow","src/components/dda-slider/dda-slider.tsx"],"sourcesContent":[".dda-slider-container {\r\n position: relative;\r\n width: 100%;\r\n background-color: #fff;\r\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);\r\n overflow: hidden;\r\n border-radius: 8px;\r\n}\r\n\r\n.dda-slider {\r\n position: relative;\r\n width: 100%;\r\n height: 450px;\r\n}\r\n\r\n.dda-slide {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n /* transition: opacity 0.5s ease-in-out; */\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.dda-slide.active {\r\n opacity: 1;\r\n z-index: 1;\r\n}\r\n\r\n.dda-slide img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.dda-slide video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n}\r\n\r\n.dda-video-play-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n cursor: pointer;\r\n z-index: 5;\r\n background-color: rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n.dda-video-play-overlay svg {\r\n width: 64px;\r\n height: 64px;\r\n /* transition: transform 0.3s ease; */\r\n}\r\n\r\n.dda-video-play-overlay:hover svg {\r\n transform: scale(1.2);\r\n}\r\n\r\n.dda-slider-controls-container {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n padding: 15px;\r\n}\r\n\r\n.dda-slider-prev, .dda-slider-next {\r\n background-color: rgba(255, 255, 255, 0.2);\r\n color: black;\r\n padding: 10px 15px;\r\n cursor: pointer;\r\n font-size: 18px;\r\n border: none;\r\n border-radius: 5px;\r\n /* transition: background-color 0.3s; */\r\n z-index: 2;\r\n}\r\n\r\n.dda-slider-prev:hover, .dda-slider-next:hover {\r\n background-color: rgba(255, 255, 255, 0.4);\r\n}\r\n\r\n.dda-slider-indicator-container {\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.dda-slider-indicator {\r\n width: 24px;\r\n height: 24px;\r\n margin: 0 5px;\r\n cursor: pointer;\r\n /* transition: all 0.3s; */\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.dda-slider-indicator svg {\r\n width: 24px;\r\n height: 24px;\r\n display: block;\r\n}\r\n\r\n.dda-slider-timer-circle {\r\n stroke-dasharray: 63;\r\n stroke-dashoffset: 63;\r\n /* transition: none; */\r\n}\r\n\r\n.dda-slider-play-icon, .dda-slider-pause-icon {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 12px;\r\n height: 12px;\r\n}\r\n\r\n.dda-slider-play-pause-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n cursor: pointer;\r\n z-index: 2;\r\n}\r\n\r\n@media (prefers-reduced-motion: no-preference) {\r\n .dda-slide {\r\n transition: opacity 0.5s ease-in-out;\r\n }\r\n .dda-video-play-overlay svg {\r\n transition: transform 0.3s ease;\r\n }\r\n .dda-slider-prev, .dda-slider-next {\r\n transition: background-color 0.3s;\r\n }\r\n .dda-slider-indicator {\r\n transition: all 0.3s;\r\n }\r\n .dda-slider-timer-circle {\r\n transition: none;\r\n }\r\n}","import { Component, Prop, h, State, Watch, Element } from '@stencil/core';\r\n\r\nexport interface SlideData {\r\n url: string;\r\n type: 'image' | 'video';\r\n}\r\n\r\n@Component({\r\n tag: 'dda-slider',\r\n styleUrl: 'dda-slider.css',\r\n shadow: true\r\n})\r\nexport class DDASlider {\r\n @Element() el: HTMLElement;\r\n @Prop() slides: SlideData[] = [];\r\n @Prop() interval: number = 5000;\r\n @Prop() autoplay: boolean = true;\r\n @State() currentSlide: number = 0;\r\n @State() isPaused: boolean = false;\r\n \r\n private slideInterval: number;\r\n private videoElements: HTMLVideoElement[] = [];\r\n \r\n private playIcon = `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" class=\"play-icon\">\r\n <polygon points=\"10,8 16,12 10,16\" fill=\"white\" stroke=\"white\" stroke-width=\"1\"/>\r\n </svg>`;\r\n \r\n private pauseIcon = `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" class=\"pause-icon\">\r\n <rect x=\"9\" y=\"8\" width=\"2\" height=\"8\" fill=\"white\" stroke=\"white\" stroke-width=\"0\"/>\r\n <rect x=\"13\" y=\"8\" width=\"2\" height=\"8\" fill=\"white\" stroke=\"white\" stroke-width=\"0\"/>\r\n </svg>`;\r\n \r\n private svgIndicators = {\r\n inactive: `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#ccc\" stroke=\"#ccc\" stroke-width=\"2\"/>\r\n </svg>`,\r\n active: (isPaused: boolean, isVideo: boolean) => `<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"#ccc\" stroke=\"#ccc\" stroke-width=\"4\"/>\r\n ${!isVideo ? `<circle cx=\"12\" cy=\"12\" r=\"10\" class=\"dda-slider-timer-circle\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" \r\n stroke-dasharray=\"63\" stroke-dashoffset=\"63\" transform=\"rotate(-90 12 12)\"/>` : ''}\r\n ${isPaused ? this.playIcon : this.pauseIcon}\r\n </svg>`\r\n }; \r\n \r\n componentDidLoad() {\r\n setTimeout(() => {\r\n this.slides.forEach((slide, index) => {\r\n if (slide.type === 'video') {\r\n const videoEl = this.el.shadowRoot.querySelector(`.dda-slide[data-index=\"${index}\"] video`) as HTMLVideoElement;\r\n if (videoEl) {\r\n this.videoElements[index] = videoEl;\r\n \r\n videoEl.addEventListener('ended', () => {\r\n if (this.currentSlide === index) {\r\n this.nextSlide();\r\n }\r\n });\r\n }\r\n }\r\n });\r\n \r\n if (this.slides[this.currentSlide]?.type === 'video') {\r\n const currentVideo = this.videoElements[this.currentSlide];\r\n if (currentVideo && !this.isPaused) {\r\n currentVideo.play()\r\n .catch(error => console.warn('Initial video play failed, may need user interaction:', error));\r\n }\r\n }\r\n \r\n if (this.autoplay && !this.isPaused) {\r\n this.startTimer();\r\n }\r\n }, 100);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resetTimer();\r\n \r\n this.videoElements.forEach(video => {\r\n if (video) {\r\n video.removeEventListener('ended', this.nextSlide);\r\n }\r\n });\r\n }\r\n \r\n @Watch('currentSlide')\r\n watchCurrentSlide() {\r\n this.handleVideoPlayback();\r\n \r\n const currentSlideType = this.slides[this.currentSlide]?.type || 'image';\r\n if (this.autoplay && !this.isPaused && currentSlideType === 'image') {\r\n setTimeout(() => {\r\n this.resetTimer();\r\n this.startTimer();\r\n }, 50);\r\n }\r\n }\r\n \r\n private handleVideoPlayback() {\r\n this.videoElements.forEach(videoEl => {\r\n if (videoEl) {\r\n videoEl.pause();\r\n }\r\n });\r\n \r\n const currentSlideType = this.slides[this.currentSlide]?.type;\r\n if (currentSlideType === 'video' && !this.isPaused) {\r\n const currentVideo = this.videoElements[this.currentSlide];\r\n if (currentVideo) {\r\n if (currentVideo.readyState >= 2) {\r\n currentVideo.currentTime = 0;\r\n const playPromise = currentVideo.play();\r\n if (playPromise !== undefined) {\r\n playPromise.catch(error => {\r\n console.error('Error playing video:', error);\r\n this.createPlayButtonOverlay(currentVideo);\r\n });\r\n }\r\n } else {\r\n currentVideo.addEventListener('canplay', () => {\r\n if (this.currentSlide === this.slides.indexOf(this.slides[this.currentSlide]) && !this.isPaused) {\r\n currentVideo.play().catch(error => console.error('Error playing video on canplay:', error));\r\n }\r\n }, { once: true });\r\n }\r\n }\r\n }\r\n }\r\n \r\n private createPlayButtonOverlay(videoElement: HTMLVideoElement) {\r\n const overlay = document.createElement('div');\r\n overlay.className = 'dda-video-play-overlay';\r\n overlay.innerHTML = `\r\n <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\" fill=\"rgba(0,0,0,0.5)\" />\r\n <polygon points=\"10,8 16,12 10,16\" fill=\"white\" />\r\n </svg>\r\n `;\r\n \r\n const videoContainer = videoElement.parentElement;\r\n if (videoContainer) {\r\n videoContainer.style.position = 'relative';\r\n videoContainer.appendChild(overlay);\r\n \r\n overlay.addEventListener('click', () => {\r\n videoElement.play()\r\n .then(() => {\r\n overlay.remove();\r\n })\r\n .catch(error => console.error('Play from overlay failed:', error));\r\n });\r\n }\r\n }\r\n \r\n private startTimer() {\r\n if (this.isPaused) return;\r\n this.resetTimer();\r\n \r\n const currentSlideType = this.slides[this.currentSlide]?.type;\r\n if (currentSlideType === 'video') return;\r\n \r\n requestAnimationFrame(() => {\r\n const timerCircle = this.el.shadowRoot.querySelector('.dda-slider-indicator.active .dda-slider-timer-circle') as SVGCircleElement;\r\n \r\n if (timerCircle) {\r\n timerCircle.style.transition = 'none';\r\n timerCircle.style.strokeDashoffset = '63';\r\n \r\n void timerCircle.getBoundingClientRect();\r\n \r\n setTimeout(() => {\r\n if (!this.isPaused) {\r\n timerCircle.style.transition = `stroke-dashoffset ${this.interval}ms linear`;\r\n timerCircle.style.strokeDashoffset = '0';\r\n }\r\n }, 20);\r\n }\r\n });\r\n \r\n this.slideInterval = window.setInterval(() => {\r\n if (!this.isPaused) {\r\n this.nextSlide();\r\n }\r\n }, this.interval);\r\n }\r\n \r\n private resetTimer() {\r\n if (this.slideInterval) {\r\n window.clearInterval(this.slideInterval);\r\n this.slideInterval = null;\r\n }\r\n \r\n const timerCircles = this.el.shadowRoot.querySelectorAll('.dda-slider-timer-circle');\r\n timerCircles.forEach(circle => {\r\n (circle as SVGCircleElement).style.transition = 'none';\r\n (circle as SVGCircleElement).style.strokeDashoffset = '63';\r\n });\r\n }\r\n \r\n private goToSlide(index: number) {\r\n this.currentSlide = index;\r\n if (this.currentSlide < 0) {\r\n this.currentSlide = this.slides.length - 1;\r\n } else if (this.currentSlide >= this.slides.length) {\r\n this.currentSlide = 0;\r\n }\r\n }\r\n \r\n private prevSlide = () => {\r\n this.goToSlide(this.currentSlide - 1);\r\n }\r\n \r\n private nextSlide = () => {\r\n this.goToSlide(this.currentSlide + 1);\r\n }\r\n \r\n private handleIndicatorClick = (index: number) => {\r\n this.goToSlide(index);\r\n }\r\n \r\n private togglePlayPause = (event: Event) => {\r\n event.stopPropagation();\r\n \r\n this.isPaused = !this.isPaused;\r\n \r\n const currentSlideType = this.slides[this.currentSlide]?.type;\r\n if (currentSlideType === 'video') {\r\n const currentVideo = this.videoElements[this.currentSlide];\r\n if (currentVideo) {\r\n if (this.isPaused) {\r\n currentVideo.pause();\r\n } else {\r\n const playPromise = currentVideo.play();\r\n if (playPromise !== undefined) {\r\n playPromise.catch(error => {\r\n console.error('Error toggling video play:', error);\r\n this.isPaused = true;\r\n this.createPlayButtonOverlay(currentVideo);\r\n });\r\n }\r\n }\r\n }\r\n }\r\n \r\n if (this.isPaused) {\r\n this.resetTimer();\r\n \r\n const activeIndicator = this.el.shadowRoot.querySelector('.dda-slider-indicator.active');\r\n if (activeIndicator) {\r\n const svgContainer = activeIndicator.querySelector('div');\r\n if (svgContainer) {\r\n svgContainer.innerHTML = this.svgIndicators.active(this.isPaused, currentSlideType === 'video');\r\n }\r\n }\r\n } else {\r\n const activeIndicator = this.el.shadowRoot.querySelector('.dda-slider-indicator.active');\r\n if (activeIndicator) {\r\n const svgContainer = activeIndicator.querySelector('div');\r\n if (svgContainer) {\r\n svgContainer.innerHTML = this.svgIndicators.active(this.isPaused, currentSlideType === 'video');\r\n }\r\n }\r\n \r\n if (currentSlideType === 'image') {\r\n this.startTimer();\r\n }\r\n }\r\n }\r\n \r\n render() {\r\n return (\r\n <div class=\"dda-slider-container\">\r\n <div class=\"dda-slider\">\r\n {this.slides.map((slide, index) => (\r\n <div class={`dda-slide ${index === this.currentSlide ? 'active' : ''}`} data-index={index}>\r\n {slide.type === 'image' ? (\r\n <img src={slide.url} alt={`Slide ${index + 1}`} />\r\n ) : (\r\n <video \r\n src={slide.url} \r\n controls={false}\r\n playsInline={true}\r\n preload=\"auto\"\r\n muted={false}\r\n />\r\n )}\r\n </div>\r\n ))}\r\n </div>\r\n \r\n <div class=\"dda-slider-controls-container\">\r\n <button class=\"dda-slider-prev\" onClick={this.prevSlide}>\r\n ❮\r\n </button>\r\n \r\n <div class=\"dda-slider-indicator-container\">\r\n {this.slides.map((slide, index) => (\r\n <div \r\n class={`dda-slider-indicator ${index === this.currentSlide ? 'active' : ''}`}\r\n onClick={() => this.handleIndicatorClick(index)}\r\n >\r\n <div innerHTML={index === this.currentSlide ? \r\n this.svgIndicators.active(this.isPaused, slide.type === 'video') : \r\n this.svgIndicators.inactive}>\r\n </div>\r\n {index === this.currentSlide && \r\n <div class=\"dda-slider-play-pause-overlay\" onClick={this.togglePlayPause}></div>\r\n }\r\n </div>\r\n ))}\r\n </div>\r\n \r\n <button class=\"dda-slider-next\" onClick={this.nextSlide}>\r\n ❯\r\n </button>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}"],"version":3}

package/dist/components/dda-split-button.d.ts DELETED Viewed

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-interface DdaSplitButton extends Components.DdaSplitButton, HTMLElement {}
-export const DdaSplitButton: {
-    prototype: DdaSplitButton;
-    new (): DdaSplitButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/dda-split-button.js DELETED Viewed

@@ -1,136 +0,0 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-f6588843.js';
-const DdaSplitButton$1 = /*@__PURE__*/ proxyCustomElement(class DdaSplitButton extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.buttonClick = createEvent(this, "buttonClick", 7);
-        this.text_button_type = 'button';
-        this.disabled = false;
-        this.start_icon_family = '';
-        this.start_icon = '';
-        this.button_text = '';
-        this.aria_label = '';
-        this.button_color = 'primary';
-        this.button_shape = '';
-        this.toggle_button_shape = '';
-        this.custom_class = '';
-        this.text_button_name = '';
-        this.is_open = false;
-        this.handleClick = (event) => {
-            if (this.disabled)
-                return;
-            this.buttonClick.emit({
-                event,
-                id: this.text_button_id,
-                value: this.value,
-                name: this.text_button_name,
-            });
-        };
-        this.handleClickOutside = (event) => {
-            if (this.is_open && !this.el.contains(event.target)) {
-                this.is_open = false;
-            }
-        };
-    }
-    toggleSelect() {
-        if (!this.disabled) {
-            this.is_open = !this.is_open;
-        }
-    }
-    connectedCallback() {
-        document.addEventListener('click', this.handleClickOutside);
-    }
-    disconnectedCallback() {
-        document.removeEventListener('click', this.handleClickOutside);
-    }
-    componentDidLoad() {
-        // after first render, move slotted menu inside container
-        this.moveMenuToContainer();
-    }
-    componentDidRender() {
-        // ensure menu stays inside container after re-renders (defensive)
-        this.moveMenuToContainer();
-    }
-    moveMenuToContainer() {
-        // find the visible container inside this component
-        const container = this.el.querySelector('.split-btn-list');
-        if (!container)
-            return;
-        // Only consider direct children of host that carry slot="menu".
-        const hostChildren = Array.from(this.el.children);
-        const slotted = hostChildren.filter((c) => c.getAttribute && c.getAttribute('slot') === 'menu');
-        slotted.forEach((node) => {
-            // if it's already inside container, skip
-            if (node.parentElement !== container) {
-                container.appendChild(node);
-            }
-        });
-    }
-    render() {
-        const textButtonClass = [
-            'dda-split-btn', // unique for main button
-            `btn-color-${this.button_color}`,
-            this.size ? `btn-size-${this.size}` : '',
-            this.button_shape ? `split-btn-main-shape-${this.button_shape}` : '',
-            this.gap ? `dda-gap-${this.gap}` : '',
-            this.custom_class,
-            this.component_mode,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const toggleButtonClass = [
-            'dda-split-btn dda-split-btn-toggle', // unique for toggle button
-            `btn-color-${this.button_color}`,
-            this.size ? `btn-size-${this.size}` : '',
-            this.button_shape ? `split-icon-btn-shape-${this.button_shape}` : '',
-            this.gap ? `dda-gap-${this.gap}` : '',
-            this.custom_class,
-            this.component_mode,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const listClass = `split-btn-list ${this.is_open ? 'open' : 'closed'}`;
-        return (h(Host, { key: '557dd738ecda2ea9b887f26a649545d636739162' }, h("div", { key: '8cf1af27d4518266bcfa3ad973e5caf747752e4a', class: "split-btn-container" }, h("button", { key: '7d37f0b271365ad447a605f87f4933ade5c51bba', id: this.text_button_id, type: this.text_button_type, class: textButtonClass, disabled: this.disabled, "aria-label": this.aria_label || this.button_text, name: this.text_button_name, value: this.value, onClick: this.handleClick }, this.start_icon && (h("i", { key: 'f6244bede898854205902c83febd164f2a8c7772', class: "material-icons material-symbols-outlined", "aria-hidden": "true" }, this.start_icon)), h("span", { key: '5785f0550374e9b71225111c1473bc3a40808490' }, this.button_text)), h("button", { key: 'a8158ad76834a12c564771a91237a452ae917323', type: "button", class: toggleButtonClass, disabled: this.disabled, onClick: () => this.toggleSelect() }, h("i", { key: '632d4c992c4da668770292d9b2b0881d0d85a557', class: "material-icons", "aria-hidden": "true" }, this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down')), h("div", { key: '88988abe9f2a3173f34356a030fdd03055c94139', class: listClass, "aria-hidden": !this.is_open, role: "menu" }, h("slot", { key: 'b7c9e16e3c36b64d6aa185ced7da41ff1f02cc76', name: "menu" })))));
-    }
-    get el() { return this; }
-}, [4, "dda-split-button", {
-        "text_button_type": [1],
-        "disabled": [4],
-        "start_icon_family": [1],
-        "start_icon": [1],
-        "button_text": [1],
-        "aria_label": [1],
-        "button_color": [1],
-        "size": [1],
-        "button_shape": [1],
-        "toggle_button_shape": [1],
-        "gap": [2],
-        "custom_class": [1],
-        "component_mode": [1],
-        "text_button_id": [1],
-        "text_button_name": [1],
-        "value": [1],
-        "is_open": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dda-split-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dda-split-button":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DdaSplitButton$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-const DdaSplitButton = DdaSplitButton$1;
-const defineCustomElement = defineCustomElement$1;
-export { DdaSplitButton, defineCustomElement };
-//# sourceMappingURL=dda-split-button.js.map

package/dist/components/dda-split-button.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"dda-split-button.js","mappings":";;MAOaA,gBAAc;IAL3B;;;;QAMU,qBAAgB,GAAW,QAAQ,CAAC;QACpC,aAAQ,GAAY,KAAK,CAAC;QAC1B,sBAAiB,GAAW,EAAE,CAAC;QAC/B,eAAU,GAAW,EAAE,CAAC;QACxB,gBAAW,GAAW,EAAE,CAAC;QACzB,eAAU,GAAY,EAAE,CAAC;QACzB,iBAAY,GAAW,SAAS,CAAC;QAEjC,iBAAY,GAAY,EAAE,CAAC;QAC3B,wBAAmB,GAAY,EAAE,CAAC;QAElC,iBAAY,GAAY,EAAE,CAAC;QAG3B,qBAAgB,GAAY,EAAE,CAAC;QAO9B,YAAO,GAAY,KAAK,CAAC;QAE1B,gBAAW,GAAG,CAAC,KAAiB;YACtC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK;gBACL,EAAE,EAAE,IAAI,CAAC,cAAc;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,IAAI,EAAE,IAAI,CAAC,gBAAgB;aAC5B,CAAC,CAAC;SACJ,CAAC;QAOF,uBAAkB,GAAG,CAAC,KAAiB;YACrC,IAAI,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC3D,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;aACtB;SACF,CAAC;KAkHH;IA3HC,YAAY;QACV,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;SAC9B;KACF;IAOD,iBAAiB;QACf,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAC7D;IAED,oBAAoB;QAClB,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC;KAChE;IAED,gBAAgB;;QAEd,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAED,kBAAkB;;QAEhB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC5B;IAEO,mBAAmB;;QAEzB,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAuB,CAAC;QACjF,IAAI,CAAC,SAAS;YAAE,OAAO;;QAGvB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAc,CAAC;QAC/D,MAAM,OAAO,GAAG,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,CAAC;QAEhG,OAAO,CAAC,OAAO,CAAC,CAAC,IAAI;;YAEnB,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;gBACpC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;aAC7B;SACF,CAAC,CAAC;KACJ;IAID,MAAM;QACN,MAAM,eAAe,GAAG;YACtB,eAAe;YACf,aAAa,IAAI,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,IAAI,GAAG,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YACxC,IAAI,CAAC,YAAY,GAAG,wBAAwB,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YACpE,IAAI,CAAC,GAAG,GAAG,WAAW,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB;aACA,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEX,MAAM,iBAAiB,GAAG;YACxB,oCAAoC;YACpC,aAAa,IAAI,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,IAAI,GAAG,YAAY,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;YACxC,IAAI,CAAC,YAAY,GAAG,wBAAwB,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;YACpE,IAAI,CAAC,GAAG,GAAG,WAAW,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,YAAY;YACjB,IAAI,CAAC,cAAc;SACpB;aACA,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,CAAC;QAEV,MAAM,SAAS,GAAG,kBAAkB,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,QAAQ,EAAE,CAAC;QAExE,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,qBAAqB,IAE9B,+DACE,EAAE,EAAE,IAAI,CAAC,cAAc,EACvB,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAC3B,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,WAAW,EAC/C,IAAI,EAAE,IAAI,CAAC,gBAAgB,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,UAAU,KACd,0DAAG,KAAK,EAAC,0CAA0C,iBAAa,MAAM,IACnE,IAAI,CAAC,UAAU,CACd,CACL,EACD,+DAAO,IAAI,CAAC,WAAW,CAAQ,CACxB,EAGT,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,IAElC,0DAAG,KAAK,EAAC,gBAAgB,iBAAa,MAAM,IACzC,IAAI,CAAC,OAAO,GAAG,mBAAmB,GAAG,qBAAqB,CACzD,CACG,EAET,4DAAK,KAAK,EAAE,SAAS,iBAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,EAAC,MAAM,IAC1D,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACvB,CAQF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["DdaSplitButton"],"sources":["src/components/dda-split-button/dda-split-button.tsx"],"sourcesContent":["import { Host, Component, Prop, h, Event, EventEmitter, State, Element } from '@stencil/core';\r\n\r\n@Component({\r\n tag: 'dda-split-button',\r\n // styleUrls: ['dda-split-button.css'],\r\n shadow: false,\r\n})\r\nexport class DdaSplitButton {\r\n @Prop() text_button_type: string = 'button';\r\n @Prop() disabled: boolean = false;\r\n @Prop() start_icon_family: string = '';\r\n @Prop() start_icon: string = '';\r\n @Prop() button_text: string = '';\r\n @Prop() aria_label?: string = '';\r\n @Prop() button_color: string = 'primary';\r\n @Prop() size?: string;\r\n @Prop() button_shape?: string = '';\r\n @Prop() toggle_button_shape?: string = '';\r\n @Prop() gap?: number;\r\n @Prop() custom_class?: string = '';\r\n @Prop() component_mode?: string;\r\n @Prop() text_button_id: string;\r\n @Prop() text_button_name?: string = '';\r\n @Prop() value?: string;\r\n\r\n @Event() buttonClick: EventEmitter<{ event: MouseEvent, id: string, value: string, name: string }>;\r\n\r\n /*toogle Button*/\r\n @Element() el: HTMLElement;\r\n @State() is_open: boolean = false;\r\n\r\n private handleClick = (event: MouseEvent) => {\r\n if (this.disabled) return;\r\n\r\n this.buttonClick.emit({\r\n event,\r\n id: this.text_button_id,\r\n value: this.value,\r\n name: this.text_button_name,\r\n });\r\n };\r\n \r\n toggleSelect() {\r\n if (!this.disabled) {\r\n this.is_open = !this.is_open;\r\n }\r\n }\r\n handleClickOutside = (event: MouseEvent) => {\r\n if (this.is_open && !this.el.contains(event.target as Node)) {\r\n this.is_open = false;\r\n }\r\n };\r\n\r\n connectedCallback() {\r\n document.addEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n disconnectedCallback() {\r\n document.removeEventListener('click', this.handleClickOutside);\r\n }\r\n\r\n componentDidLoad() {\r\n // after first render, move slotted menu inside container\r\n this.moveMenuToContainer();\r\n }\r\n\r\n componentDidRender() {\r\n // ensure menu stays inside container after re-renders (defensive)\r\n this.moveMenuToContainer();\r\n }\r\n\r\n private moveMenuToContainer() {\r\n // find the visible container inside this component\r\n const container = this.el.querySelector('.split-btn-list') as HTMLElement | null;\r\n if (!container) return;\r\n\r\n // Only consider direct children of host that carry slot=\"menu\".\r\n const hostChildren = Array.from(this.el.children) as Element[];\r\n const slotted = hostChildren.filter((c) => c.getAttribute && c.getAttribute('slot') === 'menu');\r\n\r\n slotted.forEach((node) => {\r\n // if it's already inside container, skip\r\n if (node.parentElement !== container) {\r\n container.appendChild(node);\r\n }\r\n });\r\n }\r\n\r\n\r\n\r\n render() {\r\n const textButtonClass = [\r\n 'dda-split-btn', // unique for main button\r\n `btn-color-${this.button_color}`,\r\n this.size ? `btn-size-${this.size}` : '',\r\n this.button_shape ? `split-btn-main-shape-${this.button_shape}` : '',\r\n this.gap ? `dda-gap-${this.gap}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n const toggleButtonClass = [\r\n 'dda-split-btn dda-split-btn-toggle', // unique for toggle button\r\n `btn-color-${this.button_color}`,\r\n this.size ? `btn-size-${this.size}` : '',\r\n this.button_shape ? `split-icon-btn-shape-${this.button_shape}` : '',\r\n this.gap ? `dda-gap-${this.gap}` : '',\r\n this.custom_class,\r\n this.component_mode,\r\n ]\r\n .filter(Boolean)\r\n .join(' ');\r\n\r\n const listClass = `split-btn-list ${this.is_open ? 'open' : 'closed'}`;\r\n\r\n return (\r\n <Host>\r\n <div class=\"split-btn-container\">\r\n {/* Main action button */}\r\n <button\r\n id={this.text_button_id}\r\n type={this.text_button_type}\r\n class={textButtonClass}\r\n disabled={this.disabled}\r\n aria-label={this.aria_label || this.button_text}\r\n name={this.text_button_name}\r\n value={this.value}\r\n onClick={this.handleClick}\r\n >\r\n {this.start_icon && (\r\n <i class=\"material-icons material-symbols-outlined\" aria-hidden=\"true\">\r\n {this.start_icon}\r\n </i>\r\n )}\r\n <span>{this.button_text}</span>\r\n </button>\r\n\r\n {/* Dropdown toggle button */}\r\n <button \r\n type=\"button\"\r\n class={toggleButtonClass}\r\n disabled={this.disabled}\r\n onClick={() => this.toggleSelect()}\r\n >\r\n <i class=\"material-icons\" aria-hidden=\"true\">\r\n {this.is_open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'}\r\n </i>\r\n </button>\r\n\r\n <div class={listClass} aria-hidden={!this.is_open} role=\"menu\">\r\n <slot name=\"menu\"></slot>\r\n </div>\r\n\r\n\r\n {/* {this.is_open && (\r\n <div class=\"split-btn-list\">\r\n <slot name=\"menu\"></slot>\r\n </div>\r\n )} */}\r\n </div>\r\n </Host>\r\n );\r\n}\r\n}\r\n"],"version":3}