@xplor-education/core-stencil-components 2.0.0 → 2.1.0
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.
- package/components/{p-x30CgLRv.js → p-BaDLDCH5.js} +3 -3
- package/components/{p-x30CgLRv.js.map → p-BaDLDCH5.js.map} +1 -1
- package/components/{p-BK_ATKuB.js → p-DxxjL3sU.js} +3 -3
- package/components/{p-BK_ATKuB.js.map → p-DxxjL3sU.js.map} +1 -1
- package/components/xplor-chat-widget.js +1 -1
- package/components/xplor-date-picker.js +1 -1
- package/components/xplor-drag-and-drop-input.js +39 -4
- package/components/xplor-drag-and-drop-input.js.map +1 -1
- package/components/xplor-dropdown.js +1 -1
- package/components/xplor-expansion-panel.js +4 -4
- package/components/xplor-expansion-panels.js +1 -1
- package/components/xplor-inline-checkbox.js +2 -2
- package/components/xplor-inline-date-picker.js +1 -1
- package/components/xplor-inline-switch.js +1 -1
- package/components/xplor-input-file.js +1 -1
- package/components/xplor-input-search.js +2 -2
- package/components/xplor-input-select.js +24 -4
- package/components/xplor-input-select.js.map +1 -1
- package/components/xplor-input-send.js +2 -2
- package/components/xplor-input-text-area.js +2 -2
- package/components/xplor-input-text-secondary.js +2 -2
- package/components/xplor-input-text.js +2 -2
- package/components/xplor-input-title.js +1 -1
- package/components/xplor-links.js +1 -1
- package/components/xplor-modal-persistent.js +1 -1
- package/components/xplor-radio-btn.d.ts +11 -0
- package/components/xplor-radio-btn.js +36 -0
- package/components/xplor-radio-btn.js.map +1 -0
- package/components/xplor-section-card.js +2 -2
- package/components/xplor-section-heading.js +2 -2
- package/components/xplor-table.js +5 -5
- package/components/xplor-text-bubble.js +2 -2
- package/components/xplor-text-field.js +2 -2
- package/components/xplor-time-picker.js +6 -6
- package/dist/cjs/index-Bc5o_4vY.js +2 -2
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{xplor-alert-dialog_57.cjs.entry.js → xplor-alert-dialog_58.cjs.entry.js} +118 -52
- package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js.map +1 -0
- package/dist/cjs/xplor-component-library.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.css +125 -21
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js +58 -4
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js.map +1 -1
- package/dist/collection/components/xplor-dropdown/xplor-dropdown.js +1 -1
- package/dist/collection/components/xplor-expansion-panel/xplor-expansion-panel.js +4 -4
- package/dist/collection/components/xplor-expansion-panels/xplor-expansion-panels.js +1 -1
- package/dist/collection/components/xplor-inline-checkbox/xplor-inline-checkbox.js +2 -2
- package/dist/collection/components/xplor-inline-date-picker/xplor-inline-date-picker.js +1 -1
- package/dist/collection/components/xplor-inline-switch/xplor-inline-switch.js +1 -1
- package/dist/collection/components/xplor-input-file/xplor-input-file.js +1 -1
- package/dist/collection/components/xplor-input-search/xplor-input-search.js +2 -2
- package/dist/collection/components/xplor-input-select/xplor-input-select.css +1 -6
- package/dist/collection/components/xplor-input-select/xplor-input-select.js +23 -3
- package/dist/collection/components/xplor-input-select/xplor-input-select.js.map +1 -1
- package/dist/collection/components/xplor-input-send/xplor-input-send.js +2 -2
- package/dist/collection/components/xplor-input-text/xplor-input-text.js +2 -2
- package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.js +2 -2
- package/dist/collection/components/xplor-input-text-secondary/xplor-input-text-secondary.js +2 -2
- package/dist/collection/components/xplor-input-title/xplor-input-title.js +1 -1
- package/dist/collection/components/xplor-links/xplor-links.js +1 -1
- package/dist/collection/components/xplor-modal-persistent/xplor-modal-persistent.js +1 -1
- package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.css +271 -0
- package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.js +19 -0
- package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.js.map +1 -0
- package/dist/collection/components/xplor-section-card/xplor-section-card.js +2 -2
- package/dist/collection/components/xplor-section-heading/xplor-section-heading.js +2 -2
- package/dist/collection/components/xplor-table/xplor-table.js +5 -5
- package/dist/collection/components/xplor-text-bubble/xplor-text-bubble.js +2 -2
- package/dist/collection/components/xplor-text-field/xplor-text-field.js +2 -2
- package/dist/collection/components/xplor-time-picker/xplor-time-picker.js +6 -6
- package/dist/components/{p-BIFlTsO8.js → p-CXJd350E.js} +3 -3
- package/dist/components/{p-BIFlTsO8.js.map → p-CXJd350E.js.map} +1 -1
- package/dist/components/{p-CJGP2_5k.js → p-oOSnPjGy.js} +3 -3
- package/dist/components/{p-CJGP2_5k.js.map → p-oOSnPjGy.js.map} +1 -1
- package/dist/components/xplor-chat-widget.js +1 -1
- package/dist/components/xplor-date-picker.js +1 -1
- package/dist/components/xplor-drag-and-drop-input.js +39 -4
- package/dist/components/xplor-drag-and-drop-input.js.map +1 -1
- package/dist/components/xplor-dropdown.js +1 -1
- package/dist/components/xplor-expansion-panel.js +4 -4
- package/dist/components/xplor-expansion-panels.js +1 -1
- package/dist/components/xplor-inline-checkbox.js +2 -2
- package/dist/components/xplor-inline-date-picker.js +1 -1
- package/dist/components/xplor-inline-switch.js +1 -1
- package/dist/components/xplor-input-file.js +1 -1
- package/dist/components/xplor-input-search.js +2 -2
- package/dist/components/xplor-input-select.js +24 -4
- package/dist/components/xplor-input-select.js.map +1 -1
- package/dist/components/xplor-input-send.js +2 -2
- package/dist/components/xplor-input-text-area.js +2 -2
- package/dist/components/xplor-input-text-secondary.js +2 -2
- package/dist/components/xplor-input-text.js +2 -2
- package/dist/components/xplor-input-title.js +1 -1
- package/dist/components/xplor-links.js +1 -1
- package/dist/components/xplor-modal-persistent.js +1 -1
- package/dist/components/xplor-radio-btn.d.ts +11 -0
- package/dist/components/xplor-radio-btn.js +37 -0
- package/dist/components/xplor-radio-btn.js.map +1 -0
- package/dist/components/xplor-section-card.js +2 -2
- package/dist/components/xplor-section-heading.js +2 -2
- package/dist/components/xplor-table.js +5 -5
- package/dist/components/xplor-text-bubble.js +2 -2
- package/dist/components/xplor-text-field.js +2 -2
- package/dist/components/xplor-time-picker.js +6 -6
- package/dist/esm/index-Zkk2NJif.js +2 -2
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{xplor-alert-dialog_57.entry.js → xplor-alert-dialog_58.entry.js} +118 -53
- package/dist/esm/xplor-alert-dialog_58.entry.js.map +1 -0
- package/dist/esm/xplor-component-library.js +1 -1
- package/dist/hydrate/index.js +127 -51
- package/dist/hydrate/index.mjs +127 -51
- package/dist/types/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.d.ts +7 -0
- package/dist/types/components/xplor-input-select/xplor-input-select.d.ts +7 -0
- package/dist/types/components/xplor-radio-btn/xplor-radio-btn.d.ts +3 -0
- package/dist/types/components.d.ts +25 -2
- package/dist/xplor-component-library/{p-25fa8553.entry.js → p-07d83c17.entry.js} +2 -2
- package/dist/xplor-component-library/p-07d83c17.entry.js.map +1 -0
- package/dist/xplor-component-library/xplor-component-library.esm.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/xplor-alert-dialog_57.cjs.entry.js.map +0 -1
- package/dist/esm/xplor-alert-dialog_57.entry.js.map +0 -1
- package/dist/xplor-component-library/p-25fa8553.entry.js.map +0 -1
|
@@ -2451,7 +2451,7 @@ const XplorDatePicker = class {
|
|
|
2451
2451
|
};
|
|
2452
2452
|
XplorDatePicker.style = xplorDatePickerCss;
|
|
2453
2453
|
|
|
2454
|
-
const xplorDragAndDropInputCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: #db3b03;\n --color-primary-50: rgba(255, 152, 0, 1);\n --color-secondary: rgb(0, 119, 107);\n --color-secondary-50: rgba(1, 163, 157, 1);\n --color-tertiary: rgb(128, 104, 186);\n --color-tertiary: rgb(223, 242, 241);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 600px !important;\n }\n}\nh1.sc-xplor-drag-and-drop-input {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-drag-and-drop-input {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-drag-and-drop-input {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-drag-and-drop-input {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-drag-and-drop-input {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-drag-and-drop-input .mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-drag-and-drop-input {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-drag-and-drop-input:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-drag-and-drop-input {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-drag-and-drop-input {\n margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-drag-and-drop-input {\n margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-drag-and-drop-input {\n margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-drag-and-drop-input {\n margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-drag-and-drop-input {\n margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-drag-and-drop-input {\n margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-drag-and-drop-input {\n margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-drag-and-drop-input {\n margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-drag-and-drop-input {\n margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-drag-and-drop-input {\n margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-drag-and-drop-input {\n margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-drag-and-drop-input {\n margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-drag-and-drop-input {\n margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-drag-and-drop-input {\n margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-drag-and-drop-input {\n margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-drag-and-drop-input {\n margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-drag-and-drop-input {\n margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-drag-and-drop-input {\n margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-drag-and-drop-input {\n margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-drag-and-drop-input {\n margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-drag-and-drop-input {\n margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-drag-and-drop-input {\n margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-drag-and-drop-input {\n margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-drag-and-drop-input {\n margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-drag-and-drop-input {\n margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-drag-and-drop-input {\n margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-drag-and-drop-input {\n margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-drag-and-drop-input {\n margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-drag-and-drop-input {\n margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-drag-and-drop-input {\n margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-drag-and-drop-input {\n margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-drag-and-drop-input {\n margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-drag-and-drop-input {\n margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-drag-and-drop-input {\n padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-drag-and-drop-input {\n padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-drag-and-drop-input {\n padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-drag-and-drop-input {\n padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-drag-and-drop-input {\n padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-drag-and-drop-input {\n padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-drag-and-drop-input {\n padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-drag-and-drop-input {\n padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-drag-and-drop-input {\n padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-drag-and-drop-input {\n padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-drag-and-drop-input {\n padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-drag-and-drop-input {\n padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-drag-and-drop-input {\n padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-drag-and-drop-input {\n padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-drag-and-drop-input {\n padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-drag-and-drop-input {\n padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-drag-and-drop-input {\n padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-drag-and-drop-input {\n padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-drag-and-drop-input {\n padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-drag-and-drop-input {\n padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-drag-and-drop-input {\n padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-drag-and-drop-input {\n padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-drag-and-drop-input {\n padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-drag-and-drop-input {\n padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-drag-and-drop-input {\n padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-drag-and-drop-input {\n padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-drag-and-drop-input {\n padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-drag-and-drop-input {\n padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-drag-and-drop-input {\n padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-drag-and-drop-input {\n padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-drag-and-drop-input {\n padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-drag-and-drop-input {\n padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-drag-and-drop-input {\n padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-drag-and-drop-input {\n padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.sc-xplor-drag-and-drop-input-h {\n display: block;\n}\n\n.drag-drop-wrapper.sc-xplor-drag-and-drop-input {\n position: relative;\n padding-bottom: 2.5rem;\n}\n\n.drag-drop-input-hidden.sc-xplor-drag-and-drop-input {\n display: none;\n}\n\n.drag-drop-card.sc-xplor-drag-and-drop-input {\n background-color: var(--color-secondary-50, #f3e5f5);\n border-radius: 8px;\n border: 3px dashed #e0e0e0;\n min-height: 240px;\n padding: 1rem 1.5rem 2.5rem;\n text-align: center;\n transition: all 0.2s ease;\n cursor: default;\n}\n.drag-drop-card.sc-xplor-drag-and-drop-input:hover:not(.drag-drop-card--disabled) {\n border-color: var(--color-secondary);\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n border: 3px dashed var(--color-secondary);\n background-color: var(--color-secondary-100, #e1bee7);\n}\n.drag-drop-card--disabled.sc-xplor-drag-and-drop-input {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.drag-drop-card__content.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n padding: 0.5rem 0 0;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n color: var(--color-secondary);\n width: 68px;\n height: 68px;\n}\n\n.drag-drop-card__title.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 24px;\n font-weight: 700;\n line-height: 32px;\n letter-spacing: 0;\n margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n position: absolute;\n left: 50%;\n bottom: 0;\n transform: translateX(-50%);\n}\n\n.drag-drop-card__file-info.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n color: #616161;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n padding: 0.25rem;\n text-align: center;\n}\n\n@media (max-width: 768px) {\n .drag-drop-card.sc-xplor-drag-and-drop-input {\n min-height: 200px;\n }\n .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n font-size: 20px;\n line-height: 28px;\n }\n .drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n font-size: 13px;\n line-height: 18px;\n }\n}";
|
|
2454
|
+
const xplorDragAndDropInputCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: #db3b03;\n --color-primary-50: rgba(255, 152, 0, 1);\n --color-secondary: rgb(0, 119, 107);\n --color-secondary-50: rgba(1, 163, 157, 1);\n --color-tertiary: rgb(128, 104, 186);\n --color-tertiary: rgb(223, 242, 241);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-drag-and-drop-input {\n width: 600px !important;\n }\n}\nh1.sc-xplor-drag-and-drop-input {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-drag-and-drop-input {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input, ul.sc-xplor-drag-and-drop-input li.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input, ul.mdc-list.sc-xplor-drag-and-drop-input li.mdc-list-item.sc-xplor-drag-and-drop-input {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-drag-and-drop-input {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-drag-and-drop-input {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-drag-and-drop-input {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-drag-and-drop-input {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-drag-and-drop-input .mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-drag-and-drop-input .mdc-notched-outline.sc-xplor-drag-and-drop-input .mdc-notched-outline__notch.sc-xplor-drag-and-drop-input {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-drag-and-drop-input {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-drag-and-drop-input:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-drag-and-drop-input {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-drag-and-drop-input {\n margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-drag-and-drop-input {\n margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-drag-and-drop-input {\n margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-drag-and-drop-input {\n margin-left: 8rem;\n margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-drag-and-drop-input {\n margin-top: 8rem;\n margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-drag-and-drop-input {\n margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-drag-and-drop-input {\n margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-drag-and-drop-input {\n margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-drag-and-drop-input {\n margin-left: 5rem;\n margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-drag-and-drop-input {\n margin-top: 5rem;\n margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-drag-and-drop-input {\n margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-drag-and-drop-input {\n margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-drag-and-drop-input {\n margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-drag-and-drop-input {\n margin-left: 4rem;\n margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-drag-and-drop-input {\n margin-top: 4rem;\n margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-drag-and-drop-input {\n margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-drag-and-drop-input {\n margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-drag-and-drop-input {\n margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-drag-and-drop-input {\n margin-left: 3.5rem;\n margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-drag-and-drop-input {\n margin-top: 3.5rem;\n margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-drag-and-drop-input {\n margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-drag-and-drop-input {\n margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-drag-and-drop-input {\n margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-drag-and-drop-input {\n margin-left: 3rem;\n margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-drag-and-drop-input {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-drag-and-drop-input {\n margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-drag-and-drop-input {\n margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-drag-and-drop-input {\n margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-drag-and-drop-input {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-drag-and-drop-input {\n margin-top: 2.5rem;\n margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-drag-and-drop-input {\n margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-drag-and-drop-input {\n margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-drag-and-drop-input {\n margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-drag-and-drop-input {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-drag-and-drop-input {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-drag-and-drop-input {\n margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-drag-and-drop-input {\n margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-drag-and-drop-input {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-drag-and-drop-input {\n margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-drag-and-drop-input {\n margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-drag-and-drop-input {\n margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-drag-and-drop-input {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-drag-and-drop-input {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-drag-and-drop-input {\n margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-drag-and-drop-input {\n margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-drag-and-drop-input {\n margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-drag-and-drop-input {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-drag-and-drop-input {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-drag-and-drop-input {\n margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-drag-and-drop-input {\n margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-drag-and-drop-input {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-drag-and-drop-input {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-drag-and-drop-input {\n margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-drag-and-drop-input {\n margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-drag-and-drop-input {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-drag-and-drop-input {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-drag-and-drop-input {\n margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-drag-and-drop-input {\n margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-drag-and-drop-input {\n margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-drag-and-drop-input {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-drag-and-drop-input {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-drag-and-drop-input {\n padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-drag-and-drop-input {\n padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-drag-and-drop-input {\n padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-drag-and-drop-input {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-drag-and-drop-input {\n padding-top: 8rem;\n padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-drag-and-drop-input {\n padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-drag-and-drop-input {\n padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-drag-and-drop-input {\n padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-drag-and-drop-input {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-drag-and-drop-input {\n padding-top: 5rem;\n padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-drag-and-drop-input {\n padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-drag-and-drop-input {\n padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-drag-and-drop-input {\n padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-drag-and-drop-input {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-drag-and-drop-input {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-drag-and-drop-input {\n padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-drag-and-drop-input {\n padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-drag-and-drop-input {\n padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-drag-and-drop-input {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-drag-and-drop-input {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-drag-and-drop-input {\n padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-drag-and-drop-input {\n padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-drag-and-drop-input {\n padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-drag-and-drop-input {\n padding-left: 3rem;\n padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-drag-and-drop-input {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-drag-and-drop-input {\n padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-drag-and-drop-input {\n padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-drag-and-drop-input {\n padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-drag-and-drop-input {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-drag-and-drop-input {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-drag-and-drop-input {\n padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-drag-and-drop-input {\n padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-drag-and-drop-input {\n padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-drag-and-drop-input {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-drag-and-drop-input {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-drag-and-drop-input {\n padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-drag-and-drop-input {\n padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-drag-and-drop-input {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-drag-and-drop-input {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-drag-and-drop-input {\n padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-drag-and-drop-input {\n padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-drag-and-drop-input {\n padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-drag-and-drop-input {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-drag-and-drop-input {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-drag-and-drop-input {\n padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-drag-and-drop-input {\n padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-drag-and-drop-input {\n padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-drag-and-drop-input {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-drag-and-drop-input {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-drag-and-drop-input {\n padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-drag-and-drop-input {\n padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-drag-and-drop-input {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-drag-and-drop-input {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-drag-and-drop-input {\n padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-drag-and-drop-input {\n padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-drag-and-drop-input {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-drag-and-drop-input {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-drag-and-drop-input {\n padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-drag-and-drop-input {\n padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-drag-and-drop-input {\n padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-drag-and-drop-input {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-drag-and-drop-input {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.sc-xplor-drag-and-drop-input-h {\n display: block;\n}\n\n.drag-drop-zone.sc-xplor-drag-and-drop-input {\n position: relative;\n padding-bottom: 2.5rem;\n}\n\n.drag-drop-input-hidden.sc-xplor-drag-and-drop-input {\n display: none;\n}\n\n.drag-drop-card.sc-xplor-drag-and-drop-input {\n background-color: #f5f5f5;\n border-radius: 8px;\n border: 2px dashed var(--color-secondary);\n min-height: 160px;\n padding: 1rem 1.5rem 2rem;\n text-align: center;\n transition: all 0.2s ease;\n cursor: default;\n}\n.drag-drop-card.sc-xplor-drag-and-drop-input:hover:not(.drag-drop-card--disabled) {\n border-color: var(--color-secondary);\n background-color: #eeeeee;\n}\n.drag-drop-card--dragover.sc-xplor-drag-and-drop-input {\n border: 2px dashed var(--color-secondary);\n background-color: #eeeeee;\n}\n.drag-drop-card--disabled.sc-xplor-drag-and-drop-input {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.drag-drop-card__content.sc-xplor-drag-and-drop-input {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.25rem;\n padding: 0.25rem 0 0;\n}\n\n.drag-drop-card__icon.sc-xplor-drag-and-drop-input {\n color: var(--color-secondary);\n width: 40px;\n height: 40px;\n}\n\n.drag-drop-card__title.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 18px;\n font-weight: 700;\n line-height: 24px;\n letter-spacing: 0;\n margin: 0;\n}\n\n.drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n color: #000000;\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n margin: 0;\n}\n\n.drag-drop-card__action.sc-xplor-drag-and-drop-input {\n position: absolute;\n left: 50%;\n bottom: 0;\n transform: translateX(-50%);\n}\n\n.file-info.sc-xplor-drag-and-drop-input {\n margin-top: 1.5rem;\n}\n\n.file-info__status.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 400;\n line-height: 20px;\n color: #616161;\n margin: 0 0 0.5rem 0;\n}\n\n.file-info__card.sc-xplor-drag-and-drop-input {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n background-color: #ffffff;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n padding: 0.75rem 1rem;\n}\n\n.file-info__icon.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 8px;\n background-color: var(--color-secondary-50, #f3e5f5);\n color: var(--color-secondary);\n}\n\n.file-info__details.sc-xplor-drag-and-drop-input {\n flex: 1;\n min-width: 0;\n}\n\n.file-info__name.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 20px;\n color: #000000;\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.file-info__meta.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: var(--color-secondary);\n margin: 0.25rem 0 0 0;\n}\n\n.file-info__progress-row.sc-xplor-drag-and-drop-input {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n margin-top: 0.5rem;\n}\n\n.file-info__progress-bar.sc-xplor-drag-and-drop-input {\n flex: 1;\n height: 6px;\n background-color: #eeeeee;\n border-radius: 3px;\n overflow: hidden;\n}\n\n.file-info__progress-fill.sc-xplor-drag-and-drop-input {\n height: 100%;\n background-color: var(--color-secondary);\n border-radius: 3px;\n transition: width 0.3s ease;\n}\n\n.file-info__progress-text.sc-xplor-drag-and-drop-input {\n font-family: Inter, sans-serif;\n font-size: 12px;\n font-weight: 400;\n line-height: 18px;\n color: #757575;\n flex-shrink: 0;\n min-width: 32px;\n text-align: right;\n}\n\n.file-info__remove.sc-xplor-drag-and-drop-input {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n border: none;\n background-color: #eeeeee;\n color: #757575;\n cursor: pointer;\n padding: 0;\n transition: background-color 0.2s ease;\n}\n.file-info__remove.sc-xplor-drag-and-drop-input:hover {\n background-color: #e0e0e0;\n color: #424242;\n}\n\n@media (max-width: 768px) {\n .drag-drop-card.sc-xplor-drag-and-drop-input {\n min-height: 140px;\n }\n .drag-drop-card__title.sc-xplor-drag-and-drop-input {\n font-size: 16px;\n line-height: 22px;\n }\n .drag-drop-card__accepts.sc-xplor-drag-and-drop-input, .drag-drop-card__divider.sc-xplor-drag-and-drop-input {\n font-size: 13px;\n line-height: 18px;\n }\n}";
|
|
2455
2455
|
|
|
2456
2456
|
const DEFAULT_ACCEPT_ALL$1 = '*' + '/' + '*';
|
|
2457
2457
|
const XplorDragAndDropInput = class {
|
|
@@ -2470,11 +2470,15 @@ const XplorDragAndDropInput = class {
|
|
|
2470
2470
|
/**
|
|
2471
2471
|
* Instruction text displayed in the drop zone
|
|
2472
2472
|
*/
|
|
2473
|
-
this.label = 'Drag and drop your
|
|
2473
|
+
this.label = 'Drag and drop your files here';
|
|
2474
2474
|
/**
|
|
2475
2475
|
* Browse button label text
|
|
2476
2476
|
*/
|
|
2477
2477
|
this.browseLabel = 'Browse Files';
|
|
2478
|
+
/**
|
|
2479
|
+
* Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.
|
|
2480
|
+
*/
|
|
2481
|
+
this.progress = -1;
|
|
2478
2482
|
this.dragover = false;
|
|
2479
2483
|
this.currentFile = null;
|
|
2480
2484
|
this.onDrop = (e) => {
|
|
@@ -2530,6 +2534,34 @@ const XplorDragAndDropInput = class {
|
|
|
2530
2534
|
}
|
|
2531
2535
|
return accepts;
|
|
2532
2536
|
};
|
|
2537
|
+
this.formatFileSize = (bytes) => {
|
|
2538
|
+
if (bytes === 0)
|
|
2539
|
+
return '0 Bytes';
|
|
2540
|
+
const k = 1024;
|
|
2541
|
+
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
2542
|
+
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
2543
|
+
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
2544
|
+
};
|
|
2545
|
+
this.formatDate = (timestamp) => {
|
|
2546
|
+
const date = new Date(timestamp);
|
|
2547
|
+
const day = date.getDate();
|
|
2548
|
+
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
2549
|
+
const month = months[date.getMonth()];
|
|
2550
|
+
const year = date.getFullYear();
|
|
2551
|
+
const suffix = (day === 1 || day === 21 || day === 31) ? 'st'
|
|
2552
|
+
: (day === 2 || day === 22) ? 'nd'
|
|
2553
|
+
: (day === 3 || day === 23) ? 'rd'
|
|
2554
|
+
: 'th';
|
|
2555
|
+
const hours = date.getHours();
|
|
2556
|
+
const minutes = date.getMinutes().toString().padStart(2, '0');
|
|
2557
|
+
const seconds = date.getSeconds().toString().padStart(2, '0');
|
|
2558
|
+
const ampm = hours >= 12 ? 'PM' : 'AM';
|
|
2559
|
+
const displayHours = hours % 12 || 12;
|
|
2560
|
+
return `${day}${suffix} ${month} ${year}, ${displayHours}:${minutes}:${seconds} ${ampm}`;
|
|
2561
|
+
};
|
|
2562
|
+
this.showProgress = () => {
|
|
2563
|
+
return this.progress >= 0 && this.progress <= 100;
|
|
2564
|
+
};
|
|
2533
2565
|
}
|
|
2534
2566
|
/**
|
|
2535
2567
|
* Clears the currently selected file
|
|
@@ -2542,11 +2574,13 @@ const XplorDragAndDropInput = class {
|
|
|
2542
2574
|
this.fileClear.emit();
|
|
2543
2575
|
}
|
|
2544
2576
|
render() {
|
|
2545
|
-
return (index.h(index.Host, { key: '
|
|
2577
|
+
return (index.h(index.Host, { key: '1996cf8e0d65afed803bb07a2f7a54adb5bbfaa5' }, index.h("div", { key: '6fcf52a709e3d6b7e64583f201260e1841076cef', class: "drag-drop-zone" }, index.h("div", { key: 'a9c8bd35981166cf075bd9f0d215914ff87a0ff0', class: {
|
|
2546
2578
|
'drag-drop-card': true,
|
|
2547
2579
|
'drag-drop-card--dragover': this.dragover,
|
|
2548
2580
|
'drag-drop-card--disabled': this.disabled,
|
|
2549
|
-
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave }, index.h("div", { key: '
|
|
2581
|
+
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave }, index.h("div", { key: 'eec73d07cce31d43151a6af27a584f764cf104ec', class: "drag-drop-card__content" }, index.h("svg", { key: '75fe85db121bdf98d91872f847235e42f3505021', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none" }, index.h("path", { key: '454bda7cf271281374b965182d15120ab00059e1', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), index.h("path", { key: '8bc44934968795b791cd4183e18f3d72f7a195de', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), index.h("h3", { key: 'e17238c5e6bdb38ef75c5513c88154696a046273', class: "drag-drop-card__title" }, this.label), index.h("p", { key: 'b6aa94f6624a1fb09a56ca26dd31981aa56c3e8a', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel()), index.h("p", { key: '0a6cb23bff2f8512e961cf3fae65463aec2f829e', class: "drag-drop-card__divider" }, "or"))), index.h("div", { key: '8ad03f8da13062f5915005c80f88d41d4adc7e83', class: "drag-drop-card__action" }, index.h("xplor-button", { key: '37dd6e0f4d61a6e4aa3e0648227b5c06b101d7f3', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog }))), this.currentFile && (index.h("div", { key: '7ab8ffd9e6fa79c3adb83127c2263dbf1c8356af', class: "file-info" }, this.showProgress() && (index.h("p", { key: '34e1f54d42c866012faad5462935400ad64fd69a', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), index.h("div", { key: '891749a5bc2d928226cdcdf855b992a94c46ec0e', class: "file-info__card" }, index.h("div", { key: 'df6230a7fed1e37536756d0d2ca79a7fa0f3f3b0', class: "file-info__icon" }, index.h("svg", { key: '6f740a420e16cf0b8e1a008ac1e69a5356db1789', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '0cc9aa35e50ec4c04662abcef793175d56337e71', d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" }))), index.h("div", { key: 'cf0dc9b9592721a4e488fb852515273bdb5f75ad', class: "file-info__details" }, index.h("p", { key: '082e3dc60b75a1b889c3390c140e32e232b57bff', class: "file-info__name" }, this.currentFile.name), index.h("p", { key: '79da132f579221a718e4725e12dff7efb7b5f82f', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
|
|
2582
|
+
? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
|
|
2583
|
+
: ''), this.showProgress() && (index.h("div", { key: 'ff641e3fb53d0089c9392f1c77e7943783fa4745', class: "file-info__progress-row" }, index.h("div", { key: '57bade7b09cd9700d6cdfe123b79b1f59d049b3e', class: "file-info__progress-bar" }, index.h("div", { key: '8119c5937118adab06ae53257374964ced4b8446', class: "file-info__progress-fill", style: { width: `${Math.min(Math.max(this.progress, 0), 100)}%` } })), index.h("span", { key: 'dca1ccade071119e10b724a8d0047ec966c78ed4', class: "file-info__progress-text" }, Math.round(this.progress), "%")))), index.h("button", { key: 'e9142fab6e8f708cdd6063c6ff3659bd8e6f77e6', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": "Remove file" }, index.h("svg", { key: 'bc48ad8ce10fbed57c5bcbed53d8f2931461b90e', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: '514e5299c4f288807c557035a0fa6c28fa770e3d', d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z" })))))), index.h("input", { key: '38d92776629e98032272631ed3a26a018c2ea7cc', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect })));
|
|
2550
2584
|
}
|
|
2551
2585
|
};
|
|
2552
2586
|
XplorDragAndDropInput.style = xplorDragAndDropInputCss;
|
|
@@ -2558,7 +2592,7 @@ const XplorDropdown = class {
|
|
|
2558
2592
|
index.registerInstance(this, hostRef);
|
|
2559
2593
|
}
|
|
2560
2594
|
render() {
|
|
2561
|
-
return (index.h(index.Host, { key: '
|
|
2595
|
+
return (index.h(index.Host, { key: 'bfd5bc76c18f4c7882ec47389978338eec81b1d1' }, index.h("select", { key: '54310c80fdda944ca6d9cc8faaf643e79d4a5f32', class: "xplor-dropdown", onChange: this.handleChange }, this.options.map((option) => (index.h("option", { value: option, selected: this.selected === option }, option))))));
|
|
2562
2596
|
}
|
|
2563
2597
|
};
|
|
2564
2598
|
XplorDropdown.style = xplorDropdownCss;
|
|
@@ -2594,16 +2628,16 @@ const XplorExpansionPanel = class {
|
|
|
2594
2628
|
}
|
|
2595
2629
|
}
|
|
2596
2630
|
render() {
|
|
2597
|
-
return (index.h(index.Host, { key: '
|
|
2631
|
+
return (index.h(index.Host, { key: 'f2b19e6a1ad6315341e0840e2c000a1123caa7e0' }, index.h("div", { key: '1cb9ca368efb2f9e16c64c3987546f3d16981a2b', class: {
|
|
2598
2632
|
'expansion-panel': true,
|
|
2599
2633
|
'expansion-panel--open': this.open,
|
|
2600
2634
|
'expansion-panel--disabled': this.disabled,
|
|
2601
|
-
} }, index.h("button", { key: '
|
|
2635
|
+
} }, index.h("button", { key: '4970230eb38600f662441cf741b1266af1c94221', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', type: "button" }, index.h("div", { key: '5e3330870f44e2f0d0e9546cc3921f999c585ad2', class: "expansion-panel__header-content" }, index.h("slot", { key: 'f8cf1d3dcc8201c311adb40544adc59dc10643b2', name: "header" })), index.h("span", { key: 'bed27404d65c83a0aed80b6f63847a3b221756c4', class: {
|
|
2602
2636
|
'expansion-panel__icon': true,
|
|
2603
2637
|
'expansion-panel__icon--open': this.open,
|
|
2604
|
-
} }, "\u25BC")), index.h("div", { key: '
|
|
2638
|
+
} }, "\u25BC")), index.h("div", { key: '2c39930ed945844bde37acd8eb76cc5d321fb9e1', class: "expansion-panel__content", style: {
|
|
2605
2639
|
maxHeight: this.open ? `${this.contentHeight}px` : '0',
|
|
2606
|
-
} }, index.h("div", { key: '
|
|
2640
|
+
} }, index.h("div", { key: 'db622a60396115228e0a3929f1a0765b7a0bf87f', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, index.h("slot", { key: 'd88edfbce0ab807cdb3d21230e1e97caf6183cce' }))))));
|
|
2607
2641
|
}
|
|
2608
2642
|
get el() { return index.getElement(this); }
|
|
2609
2643
|
};
|
|
@@ -2646,7 +2680,7 @@ const XplorExpansionPanels = class {
|
|
|
2646
2680
|
this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';
|
|
2647
2681
|
}
|
|
2648
2682
|
render() {
|
|
2649
|
-
return (index.h(index.Host, { key: '
|
|
2683
|
+
return (index.h(index.Host, { key: 'c55c8eef4f6f134c83f2f8dffcb434401596a095' }, index.h("div", { key: '6611efdac4749c89180d34af7893577e09356ed1', class: "expansion-panels" }, index.h("slot", { key: 'ef8283e142cbd8fd6535c85a939455d99bdcc33e' }))));
|
|
2650
2684
|
}
|
|
2651
2685
|
};
|
|
2652
2686
|
XplorExpansionPanels.style = xplorExpansionPanelsCss;
|
|
@@ -2839,9 +2873,9 @@ const XplorInlineCheckbox = class {
|
|
|
2839
2873
|
'xplor-inline-checkbox--disabled': this.disabled,
|
|
2840
2874
|
'xplor-inline-checkbox--checked': this.checked,
|
|
2841
2875
|
};
|
|
2842
|
-
return (index.h(index.Host, { key: '
|
|
2876
|
+
return (index.h(index.Host, { key: '2273357108dc65e665f9fdd9dcece4d4ed8edac3' }, index.h("label", { key: '630091008ad489a1cc4c0e71ef1ae802ef4b0c89', class: containerClasses }, index.h("input", { key: '0c823ba53cb0d25d4823e42bcb037efaeddff405', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
|
|
2843
2877
|
accentColor: this.color,
|
|
2844
|
-
} }), this.label && index.h("span", { key: '
|
|
2878
|
+
} }), this.label && index.h("span", { key: '9e1bbb0bd85cc7cfe7d760501507d68dcc3bf3c2', class: "xplor-inline-checkbox__label" }, this.label), index.h("slot", { key: '7a95d78de68af2887149bd6eb9f08330b9c57d6b' }))));
|
|
2845
2879
|
}
|
|
2846
2880
|
};
|
|
2847
2881
|
XplorInlineCheckbox.style = xplorInlineCheckboxCss;
|
|
@@ -2995,7 +3029,7 @@ const XplorInlineDatePicker = class {
|
|
|
2995
3029
|
render() {
|
|
2996
3030
|
const sidebarDate = this.getSidebarDate();
|
|
2997
3031
|
const dayHeaders = this.startWeekOnSunday ? this.dayNames : this.dayNamesStartMonday;
|
|
2998
|
-
return (index.h(index.Host, { key: '
|
|
3032
|
+
return (index.h(index.Host, { key: '0a63c50c59ddc6ca12df01ba421b351ba7fa163a' }, index.h("div", { key: '961a428446372ebab3e7ca008100742d5452a137', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, index.h("div", { key: '5ff94e618f8f292e13dcc3898c6b6be40536d64e', class: "xplor-inline-date-picker__sidebar" }, index.h("div", { key: '1e96cb361882d9e58d9b720beff37d211d1552aa', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), index.h("div", { key: 'ce3bc570cc6ff6b4063cce28ada4da65cc97b3bb', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), index.h("div", { key: 'bcf8017b90193d0eed5b10d72454f9dc1051756e', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), index.h("div", { key: '7f36d03964d552ee8201493c920c0ec2d1119f89', class: "xplor-inline-date-picker__calendar" }, index.h("div", { key: '05eca5f4d4b0a0bc7ef237185a3d31ca7202b2ff', class: "xplor-inline-date-picker__header" }, index.h("button", { key: '91db152c009b87605a9fb21949d8cad5ef40a230', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), index.h("div", { key: '86299244563f9338281b5f107b3fef04053ec164', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), index.h("button", { key: 'f6a9e7caa26114c06e0b10e1e5fddebe9388efcb', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), index.h("div", { key: 'f8de6b4d65c8ad58beeb97455c71d75c55668c6d', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (index.h("div", { class: "xplor-inline-date-picker__weekday" }, day)))), index.h("div", { key: '267c3f7076c41ad34873501151b567fdda572dcd', class: "xplor-inline-date-picker__days" }, this.renderCalendarDays())))));
|
|
2999
3033
|
}
|
|
3000
3034
|
};
|
|
3001
3035
|
XplorInlineDatePicker.style = xplorInlineDatePickerCss;
|
|
@@ -3034,7 +3068,7 @@ const XplorInlineSwitch = class {
|
|
|
3034
3068
|
'xplor-inline-switch--disabled': this.disabled,
|
|
3035
3069
|
'xplor-inline-switch--checked': this.checked,
|
|
3036
3070
|
};
|
|
3037
|
-
return (index.h(index.Host, { key: '
|
|
3071
|
+
return (index.h(index.Host, { key: 'd881ff0653ee51f1ddc8c146ccc6f70f3c128e3b' }, index.h("label", { key: '2ffe4cdf99f925c5973657769f056cffb8bea283', class: containerClasses, style: { '--switch-color': this.color } }, index.h("input", { key: '60fb990d1dce371c3579da91bd0d9fd4dd50f82b', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), index.h("span", { key: '28e9f5444653009f4b56d510c2d73ba710e93115', class: "xplor-inline-switch__track" }, index.h("span", { key: 'f002449aa843c0b268dbc38d94dbf44a0e68d0de', class: "xplor-inline-switch__thumb" })), this.label && index.h("span", { key: 'f460d55e6cbaab94806c8025a1d17cd4d4b6790b', class: "xplor-inline-switch__label" }, this.label), index.h("slot", { key: '59e3248368aab93dd48287f3facdbe9221a39f5b' }))));
|
|
3038
3072
|
}
|
|
3039
3073
|
};
|
|
3040
3074
|
XplorInlineSwitch.style = xplorInlineSwitchCss;
|
|
@@ -3120,7 +3154,7 @@ const XplorInputFile = class {
|
|
|
3120
3154
|
};
|
|
3121
3155
|
const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
|
|
3122
3156
|
const additionalCount = this.selectedFiles.length - this.maxChips;
|
|
3123
|
-
return (index.h(index.Host, { key: '
|
|
3157
|
+
return (index.h(index.Host, { key: 'b8022fdd28a3e0087bc2a044856c3013d1f32245' }, index.h("div", { key: '11c0494c76f5aed1fe03cff7b706c7bc809becda', class: containerClasses }, this.label && (index.h("label", { key: 'fca295123c0766e9ff4b1ae28abfc2662a345992', class: "xplor-input-file__label" }, this.label)), index.h("div", { key: 'a63356f0857b420f1f707caa2e5e6ac587616949', class: "xplor-input-file__field" }, index.h("span", { key: 'f2b6f89f35d36a71a4c2bae38175cd16f897102d', class: "xplor-input-file__icon" }, this.prependInnerIcon), index.h("div", { key: '0b6b59139696a1a1e9aee3f10b7069743f4d1934', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (index.h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (index.h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (index.h("div", { class: "xplor-input-file__chip", key: file.name }, index.h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (index.h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (index.h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (index.h("button", { key: 'b0f312f157de2caf74c8c630d7c109fb6af4d7c0', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), index.h("input", { key: '1b36ee20fe74f12cb0634fa8a6f11f0b18a8869c', ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange })), this.counter && this.selectedFiles.length > 0 && (index.h("div", { key: '3db41f5660476718819e7315edbc59a9fa834178', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
|
|
3124
3158
|
}
|
|
3125
3159
|
};
|
|
3126
3160
|
XplorInputFile.style = xplorInputFileCss;
|
|
@@ -3176,14 +3210,14 @@ const XplorInputSearch = class {
|
|
|
3176
3210
|
'xplor-input-search--focused': this.isFocused,
|
|
3177
3211
|
'xplor-input-search--disabled': this.disabled,
|
|
3178
3212
|
};
|
|
3179
|
-
return (index.h(index.Host, { key: '
|
|
3213
|
+
return (index.h(index.Host, { key: '5b56e2a7105a8046e9d8a0260e4ccc3e3f74f2d1' }, index.h("div", { key: '1056cd0367b2a02a9ca0b6327ee64fe451aa822f', class: containerClasses }, index.h("div", { key: 'b52566008beabead371696c73213c0c44d71caad', class: "xplor-input-search__field" }, index.h("input", { key: '59c5434a7cedc56128d8acb5d3718e89a4521f60', type: "text", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
|
|
3180
3214
|
backgroundColor: this.bgColor,
|
|
3181
|
-
} }), index.h("slot", { key: '
|
|
3215
|
+
} }), index.h("slot", { key: '8a1ff9183e52e0b1907a2d592cf26ce92b8c3eb2', name: "append-inner" }, index.h("button", { key: '9680a805a44074e1ca6544fc6cc1b6dc56b3cd3c', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button" }, index.h("svg", { key: 'b5889fd0aed963aa7f31a11fa705597caaa3d000', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, index.h("path", { key: '78cd1c79a24b46b662d3be5bea287db253c0abe9', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
|
|
3182
3216
|
}
|
|
3183
3217
|
};
|
|
3184
3218
|
XplorInputSearch.style = xplorInputSearchCss;
|
|
3185
3219
|
|
|
3186
|
-
const xplorInputSelectCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: #db3b03;\n --color-primary-50: rgba(255, 152, 0, 1);\n --color-secondary: rgb(0, 119, 107);\n --color-secondary-50: rgba(1, 163, 157, 1);\n --color-tertiary: rgb(128, 104, 186);\n --color-tertiary: rgb(223, 242, 241);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-input-select {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-input-select {\n width: 600px !important;\n }\n}\nh1.sc-xplor-input-select {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-input-select {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-select {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-input-select {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-input-select, ul.sc-xplor-input-select {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-input-select li.sc-xplor-input-select, ul.sc-xplor-input-select li.sc-xplor-input-select {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-select {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-select {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-select {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-select {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-select .mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-select {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-select:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-select {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-select-h {\n display: block;\n}\n\n.xplor-input-select.sc-xplor-input-select {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n.xplor-input-select__label.sc-xplor-input-select {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n margin-bottom: 0.25rem;\n}\n.xplor-input-select__required.sc-xplor-input-select {\n color: #d32f2f;\n margin-left: 0.25rem;\n}\n.xplor-input-select__field.sc-xplor-input-select {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.875rem 1rem;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n background-color: white;\n cursor: pointer;\n transition: border-color 0.2s ease;\n gap: 0.5rem;\n}\n.xplor-input-select__field.sc-xplor-input-select:hover:not(.xplor-input-select--disabled .xplor-input-select__field) {\n border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select--open.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-select--error.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n border-color: #d32f2f;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n background-color: rgba(0, 0, 0, 0.04);\n cursor: not-allowed;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__value.sc-xplor-input-select {\n color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-select__value.sc-xplor-input-select {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.87);\n}\n.xplor-input-select__arrow.sc-xplor-input-select {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.54);\n transition: transform 0.2s ease;\n flex-shrink: 0;\n}\n.xplor-input-select__menu.sc-xplor-input-select {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: 0.25rem;\n max-height: 300px;\n overflow-y: auto;\n background-color: white;\n border-radius: 0.5rem;\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n z-index: 1000;\n}\n.xplor-input-select__empty.sc-xplor-input-select {\n padding: 1rem;\n text-align: center;\n color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select__option.sc-xplor-input-select {\n display: flex;\n align-items: center;\n padding: 0.875rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.2s ease;\n gap: 0.75rem;\n}\n.xplor-input-select__option.sc-xplor-input-select:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-select__option--selected.sc-xplor-input-select {\n background-color: rgba(0, 132, 128, 0.08);\n}\n.xplor-input-select__checkbox.sc-xplor-input-select {\n flex-shrink: 0;\n width: 1.125rem;\n height: 1.125rem;\n cursor: pointer;\n}\n.xplor-input-select__option-content.sc-xplor-input-select {\n flex: 1;\n min-width: 0;\n}\n.xplor-input-select__option-title.sc-xplor-input-select {\n font-size: 1rem;\n color: rgba(0, 0, 0, 0.87);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.xplor-input-select__option-subtitle.sc-xplor-input-select {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.xplor-input-select__details.sc-xplor-input-select {\n min-height: 1.25rem;\n padding: 0 1rem;\n font-size: 0.75rem;\n}\n.xplor-input-select__error-message.sc-xplor-input-select {\n color: #d32f2f;\n}\n.xplor-input-select__helper-text.sc-xplor-input-select {\n color: rgba(0, 0, 0, 0.6);\n}";
|
|
3220
|
+
const xplorInputSelectCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: #db3b03;\n --color-primary-50: rgba(255, 152, 0, 1);\n --color-secondary: rgb(0, 119, 107);\n --color-secondary-50: rgba(1, 163, 157, 1);\n --color-tertiary: rgb(128, 104, 186);\n --color-tertiary: rgb(223, 242, 241);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-input-select {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-input-select {\n width: 600px !important;\n }\n}\nh1.sc-xplor-input-select {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-input-select {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-input-select {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-input-select {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-input-select, ul.sc-xplor-input-select {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-input-select li.sc-xplor-input-select, ul.sc-xplor-input-select li.sc-xplor-input-select {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select, ul.mdc-list.sc-xplor-input-select li.mdc-list-item.sc-xplor-input-select {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-select {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-input-select {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-select {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-input-select {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-select .mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-select .mdc-notched-outline.sc-xplor-input-select .mdc-notched-outline__notch.sc-xplor-input-select {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-input-select {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-input-select:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-input-select {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-select-h {\n display: block;\n}\n\n.xplor-input-select.sc-xplor-input-select {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n.xplor-input-select__label.sc-xplor-input-select {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n margin-bottom: 0.25rem;\n}\n.xplor-input-select__required.sc-xplor-input-select {\n color: #d32f2f;\n margin-left: 0.25rem;\n}\n.xplor-input-select__field.sc-xplor-input-select {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0.875rem 1rem;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n background-color: white;\n cursor: pointer;\n transition: border-color 0.2s ease;\n gap: 0.5rem;\n}\n.xplor-input-select__field.sc-xplor-input-select:hover:not(.xplor-input-select--disabled .xplor-input-select__field) {\n border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select--open.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-select--error.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n border-color: #d32f2f;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__field.sc-xplor-input-select {\n background-color: rgba(0, 0, 0, 0.04);\n cursor: not-allowed;\n}\n.xplor-input-select--disabled.sc-xplor-input-select .xplor-input-select__value.sc-xplor-input-select {\n color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-select__value.sc-xplor-input-select {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: rgba(0, 0, 0, 0.87);\n}\n.xplor-input-select__arrow.sc-xplor-input-select {\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.54);\n transition: transform 0.2s ease;\n flex-shrink: 0;\n}\n.xplor-input-select__menu.sc-xplor-input-select {\n max-height: 300px;\n overflow-y: auto;\n background-color: white;\n border-radius: 0.5rem;\n box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n z-index: 9999;\n}\n.xplor-input-select__empty.sc-xplor-input-select {\n padding: 1rem;\n text-align: center;\n color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-select__option.sc-xplor-input-select {\n display: flex;\n align-items: center;\n padding: 0.875rem 1.25rem;\n cursor: pointer;\n transition: background-color 0.2s ease;\n gap: 0.75rem;\n}\n.xplor-input-select__option.sc-xplor-input-select:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-select__option--selected.sc-xplor-input-select {\n background-color: rgba(0, 132, 128, 0.08);\n}\n.xplor-input-select__checkbox.sc-xplor-input-select {\n flex-shrink: 0;\n width: 1.125rem;\n height: 1.125rem;\n cursor: pointer;\n}\n.xplor-input-select__option-content.sc-xplor-input-select {\n flex: 1;\n min-width: 0;\n}\n.xplor-input-select__option-title.sc-xplor-input-select {\n font-size: 1rem;\n color: rgba(0, 0, 0, 0.87);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.xplor-input-select__option-subtitle.sc-xplor-input-select {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.xplor-input-select__details.sc-xplor-input-select {\n min-height: 1.25rem;\n padding: 0 1rem;\n font-size: 0.75rem;\n}\n.xplor-input-select__error-message.sc-xplor-input-select {\n color: #d32f2f;\n}\n.xplor-input-select__helper-text.sc-xplor-input-select {\n color: rgba(0, 0, 0, 0.6);\n}";
|
|
3187
3221
|
|
|
3188
3222
|
const XplorInputSelect = class {
|
|
3189
3223
|
constructor(hostRef) {
|
|
@@ -3243,6 +3277,17 @@ const XplorInputSelect = class {
|
|
|
3243
3277
|
this.required = false;
|
|
3244
3278
|
this.isOpen = false;
|
|
3245
3279
|
this.isFocused = false;
|
|
3280
|
+
this.menuPosition = null;
|
|
3281
|
+
this.updateMenuPosition = () => {
|
|
3282
|
+
if (this.fieldRef) {
|
|
3283
|
+
const rect = this.fieldRef.getBoundingClientRect();
|
|
3284
|
+
this.menuPosition = {
|
|
3285
|
+
top: rect.bottom + 4,
|
|
3286
|
+
left: rect.left,
|
|
3287
|
+
width: rect.width,
|
|
3288
|
+
};
|
|
3289
|
+
}
|
|
3290
|
+
};
|
|
3246
3291
|
this.handleOutsideClick = (event) => {
|
|
3247
3292
|
if (this.selectRef && !this.selectRef.contains(event.target)) {
|
|
3248
3293
|
this.isOpen = false;
|
|
@@ -3250,6 +3295,9 @@ const XplorInputSelect = class {
|
|
|
3250
3295
|
};
|
|
3251
3296
|
this.toggleDropdown = () => {
|
|
3252
3297
|
if (!this.disabled && !this.readonly) {
|
|
3298
|
+
if (!this.isOpen) {
|
|
3299
|
+
this.updateMenuPosition();
|
|
3300
|
+
}
|
|
3253
3301
|
this.isOpen = !this.isOpen;
|
|
3254
3302
|
}
|
|
3255
3303
|
};
|
|
@@ -3304,10 +3352,15 @@ const XplorInputSelect = class {
|
|
|
3304
3352
|
'xplor-input-select--error': !!this.error,
|
|
3305
3353
|
};
|
|
3306
3354
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
3307
|
-
return (index.h(index.Host, { key: '
|
|
3355
|
+
return (index.h(index.Host, { key: 'e5865a9d55129458a5357cf05f15115f1007019b' }, index.h("div", { key: '66d54f5d1bb7514301427de3ad5bbf7746309cec', class: containerClasses, ref: (el) => (this.selectRef = el) }, this.label && (index.h("label", { key: 'dfa166182add3a83872a05e4a20b77f654921231', class: "xplor-input-select__label" }, this.label, this.required && index.h("span", { key: '0da6997f30e1861b35e67e80974fce115560cc9b', class: "xplor-input-select__required" }, "*"))), index.h("div", { key: 'f828546abc6121bcabcdbc905a0e43aa012bb5a9', class: "xplor-input-select__field", onClick: this.toggleDropdown, ref: (el) => (this.fieldRef = el) }, index.h("div", { key: '13692cc57a5c3c1da3915ca80f8324d091732ebb', class: "xplor-input-select__value" }, this.getDisplayValue()), index.h("span", { key: '0a372cf751bc459d957130c50fb4387405e9f21f', class: "xplor-input-select__arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && this.menuPosition && (index.h("div", { key: '13e8536c6ce8220041364675d459dc2ee3ef7613', class: "xplor-input-select__menu", style: {
|
|
3356
|
+
position: 'fixed',
|
|
3357
|
+
top: `${this.menuPosition.top}px`,
|
|
3358
|
+
left: `${this.menuPosition.left}px`,
|
|
3359
|
+
width: `${this.menuPosition.width}px`,
|
|
3360
|
+
} }, this.options.length === 0 ? (index.h("div", { class: "xplor-input-select__empty" }, "No options available")) : (this.options.map((option) => (index.h("div", { key: option.value, class: {
|
|
3308
3361
|
'xplor-input-select__option': true,
|
|
3309
3362
|
'xplor-input-select__option--selected': this.isSelected(option),
|
|
3310
|
-
}, onClick: () => this.handleOptionClick(option) }, this.multiple && (index.h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), index.h("div", { class: "xplor-input-select__option-content" }, index.h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (index.h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (index.h("div", { key: '
|
|
3363
|
+
}, onClick: () => this.handleOptionClick(option) }, this.multiple && (index.h("input", { type: "checkbox", class: "xplor-input-select__checkbox", checked: this.isSelected(option), readOnly: true })), index.h("div", { class: "xplor-input-select__option-content" }, index.h("div", { class: "xplor-input-select__option-title" }, option.title), option.subtitle && (index.h("div", { class: "xplor-input-select__option-subtitle" }, option.subtitle))))))))), showDetails && (index.h("div", { key: '240b60564cf80cc66b879bb4431885270c64db5b', class: "xplor-input-select__details" }, this.error && index.h("div", { key: 'bbb2a2e796650c153e901aa87188a386c2f5b9f7', class: "xplor-input-select__error-message" }, this.error), !this.error && this.helperText && index.h("div", { key: 'a36ccb1626e1b5a9d19f2ee106213fd943177aa8', class: "xplor-input-select__helper-text" }, this.helperText))))));
|
|
3311
3364
|
}
|
|
3312
3365
|
};
|
|
3313
3366
|
XplorInputSelect.style = xplorInputSelectCss;
|
|
@@ -3354,10 +3407,10 @@ const XplorInputSend = class {
|
|
|
3354
3407
|
this.internalValue = this.value;
|
|
3355
3408
|
}
|
|
3356
3409
|
render() {
|
|
3357
|
-
return (index.h(index.Host, { key: '
|
|
3410
|
+
return (index.h(index.Host, { key: '87d0d49d2a9e9061152b294e6b7a91ffae7f39b0' }, index.h("div", { key: 'ef857693127c5945ff78c20e431609b051df32e7', class: {
|
|
3358
3411
|
'input-send': true,
|
|
3359
3412
|
'input-send--disabled': this.disabled,
|
|
3360
|
-
} }, index.h("input", { key: '
|
|
3413
|
+
} }, index.h("input", { key: '93aca7121d132bb72d812db77f8ff85be31a00aa', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength }), index.h("xplor-button", { key: '92b64ec5e3c14cace28aacb12f58185e07b63f71', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
|
|
3361
3414
|
}
|
|
3362
3415
|
};
|
|
3363
3416
|
XplorInputSend.style = xplorInputSendCss;
|
|
@@ -3447,9 +3500,9 @@ const XplorInputText = class {
|
|
|
3447
3500
|
'xplor-input-text--error': !!this.error,
|
|
3448
3501
|
};
|
|
3449
3502
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
3450
|
-
return (index.h(index.Host, { key: '
|
|
3503
|
+
return (index.h(index.Host, { key: 'eefd18f18a4a0303cccca87db9256d2d7033e767' }, index.h("div", { key: 'cf152d49ce4ed953162467a4cc6d9e8392380d4c', class: containerClasses }, this.label && (index.h("label", { key: '78e7c0178ec1dedda68f6fdce7cb1f1dd13840fd', class: "xplor-input-text__label" }, this.label, this.required && index.h("span", { key: '1eaf01ca583263e7047444bbfe6b2636d8fde241', class: "xplor-input-text__required" }, "*"))), index.h("div", { key: '7318153a1c55ad38196cea03555238b8f2c37d51', class: "xplor-input-text__field" }, index.h("input", { key: '41c1c60d8dbdea750477a17d32b110ef826e73a6', type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
3451
3504
|
backgroundColor: this.bgColor,
|
|
3452
|
-
} }), index.h("slot", { key: '
|
|
3505
|
+
} }), index.h("slot", { key: '48461bf663591d51ebd1ee4b6fbdc25680b322fb', name: "append-inner" })), showDetails && (index.h("div", { key: '5ed0aecf6e5751e771882f9ab9cd58aafb44ba01', class: "xplor-input-text__details" }, this.error && index.h("div", { key: 'b34fffee42d3f663b923a1b9fe14c7a0a19539b2', class: "xplor-input-text__error-message" }, this.error), !this.error && this.helperText && index.h("div", { key: '7bf60893cc66f8916ebe3bc3bace1e827812541d', class: "xplor-input-text__helper-text" }, this.helperText))), index.h("slot", { key: 'c10099eb2c41e38cc65170a5acb6897b949b8173', name: "append" }))));
|
|
3453
3506
|
}
|
|
3454
3507
|
};
|
|
3455
3508
|
XplorInputText.style = xplorInputTextCss;
|
|
@@ -3540,9 +3593,9 @@ const XplorInputTextArea = class {
|
|
|
3540
3593
|
};
|
|
3541
3594
|
const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;
|
|
3542
3595
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
3543
|
-
return (index.h(index.Host, { key: '
|
|
3596
|
+
return (index.h(index.Host, { key: '310d900ed96c59bc8b0f19d40fc1573c1a08c220' }, index.h("div", { key: '0a1903c53b92932e7a98bf910c00b912a1fa078e', class: containerClasses }, this.label && (index.h("label", { key: '9c86a8f36b0007ecfdba4c70e3c76fa65a34d4e6', class: "xplor-input-text-area__label" }, this.label, this.required && index.h("span", { key: '5d57cbb3cd28c4533cfd42286bf16924f9937b4c', class: "xplor-input-text-area__required" }, "*"))), index.h("div", { key: '09feb36c8fe79b5a366d8c0f93495a363ec6596f', class: "xplor-input-text-area__field" }, index.h("textarea", { key: 'e05d3c094930b2993b5c959b1dfce569ad1b01d0', class: "xplor-input-text-area__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
|
|
3544
3597
|
backgroundColor: this.bgColor,
|
|
3545
|
-
} }), showClearButton && (index.h("button", { key: '
|
|
3598
|
+
} }), showClearButton && (index.h("button", { key: '3e95a44af498eb259fab45a653ed3ed2ce7ef3b7', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (index.h("div", { key: 'cf21757ef973e21a44abba969baad7b88c0a273a', class: "xplor-input-text-area__details" }, this.error && index.h("div", { key: 'bdfd559501f15f928a44ed7cfe797bb47b614092', class: "xplor-input-text-area__error-message" }, this.error), !this.error && this.helperText && index.h("div", { key: '0eb05a84b610b3971e76cbd5f566f32ba260eacb', class: "xplor-input-text-area__helper-text" }, this.helperText))))));
|
|
3546
3599
|
}
|
|
3547
3600
|
};
|
|
3548
3601
|
XplorInputTextArea.style = xplorInputTextAreaCss;
|
|
@@ -3597,9 +3650,9 @@ const XplorInputTextSecondary = class {
|
|
|
3597
3650
|
'input-secondary--dirty': this.isDirty,
|
|
3598
3651
|
};
|
|
3599
3652
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
3600
|
-
return (index.h(index.Host, { key: '
|
|
3653
|
+
return (index.h(index.Host, { key: 'd6c2b61f7fc153bd32577086f5c0ffcc335cbf4a' }, index.h("div", { key: 'b7cfabd013e84a7b72e6ca4cd7cd592bcd9de4df', class: containerClasses }, this.label && (index.h("label", { key: 'd5dfe32ab50128b1a3ff824e82b98f4ae75fcd17', class: "input-secondary__label" }, this.label, this.required && index.h("span", { key: '5de6c309872715b1bdd1f0aad9f577618f43f63f', class: "input-secondary__required" }, "*"))), index.h("div", { key: '5295e7d9cc7ee5ab401ee5a1182241791f2d81db', class: "input-secondary__field" }, index.h("input", { key: '146cf2b3413de110e7aaadd19fc8da7bb824af4a', type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
3601
3654
|
backgroundColor: this.bgColor,
|
|
3602
|
-
} }), index.h("slot", { key: '
|
|
3655
|
+
} }), index.h("slot", { key: '8b72be3ae83c0de2f8c9f70198c012c0a25fb470', name: "append-inner" })), showDetails && (index.h("div", { key: 'a540ae6fd62ca09ca1ce337fd71d9b93950071d0', class: "input-secondary__details" }, this.error && index.h("div", { key: '1b899f4df036b2d648d7d6f87767d0ced8202a73', class: "input-secondary__error-message" }, this.error), !this.error && this.helperText && index.h("div", { key: 'ec2ba7e7cfc715235360bf9444bb054301537dc3', class: "input-secondary__helper-text" }, this.helperText))), index.h("slot", { key: '8dfc77b85e9d89c8c3fdbae4569e7b1ddc6ccb0d', name: "append" }))));
|
|
3603
3656
|
}
|
|
3604
3657
|
};
|
|
3605
3658
|
XplorInputTextSecondary.style = xplorInputTextSecondaryCss;
|
|
@@ -3639,7 +3692,7 @@ const XplorInputTitle = class {
|
|
|
3639
3692
|
};
|
|
3640
3693
|
}
|
|
3641
3694
|
render() {
|
|
3642
|
-
return (index.h(index.Host, { key: '
|
|
3695
|
+
return (index.h(index.Host, { key: '8aaf2d386451218e3261ffec5c37d512905776ef' }, index.h("input", { key: '0b79c0e500edcbd89a1e6f7bf4e1ea1b584b7a3e', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onInput: this.handleInput, onChange: this.handleChange })));
|
|
3643
3696
|
}
|
|
3644
3697
|
};
|
|
3645
3698
|
XplorInputTitle.style = xplorInputTitleCss;
|
|
@@ -3651,7 +3704,7 @@ const XplorLinks = class {
|
|
|
3651
3704
|
index.registerInstance(this, hostRef);
|
|
3652
3705
|
}
|
|
3653
3706
|
render() {
|
|
3654
|
-
return (index.h(index.Host, { key: '
|
|
3707
|
+
return (index.h(index.Host, { key: '4e672b4eb8d386705f07f8d647a4a4cdabde607f', class: `theme-${this.brand}` }, index.h("a", { key: '8b23a97b669f6682588a568cc644a17cc92c8364', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), index.h("div", { key: '0b6bc1a1c77648137899cb8e554a93f1e56e4a15', class: "bg-black p-2 rounded-md flex justify-center" }, index.h("h1", { key: 'c2f23df8712e1763bf9d6910c0bea40a5ff476bf', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), index.h("div", { key: 'e09c835f279ae0c2f70f2864ab4afa5942e1c900', class: "bg-white py-24 sm:py-32" }, index.h("div", { key: '5b390160da6205dc508018ab53a5f09ab80602d1', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, index.h("div", { key: 'd7cf64efb0c15d643a74f67c11a3b9bc0807cd6d', class: "max-w-xl" }, index.h("h2", { key: '78c877f919bd7098a79de55f2ef65d7538f418c5', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), index.h("p", { key: '74b69e6d9f0d99b8653704e9fac32fa4ce50f211', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), index.h("ul", { key: 'c8e457f3529ad8340c84d5bad80431b3c42318c8', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, index.h("li", { key: '7cc055d330ab0ef28a10965f4fae52ba48b0f957' }, index.h("div", { key: '47faf4cf76fe5363bde5c318abd8a9ff21972f00', class: "flex items-center gap-x-6" }, index.h("img", { key: 'ecea3e92117d535dbd3c97d0868d5888c61a3b26', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: "" }), index.h("div", { key: '4978dd776ab303b667c5a5a8e2c90e2a51b30829' }, index.h("h3", { key: 'f49b65df05b1659a27dd6a5c82c11e1b9e18306d', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), index.h("p", { key: 'e74b5a0caf90fef101dcbdf01e2aa6d823f0e36d', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
|
|
3655
3708
|
}
|
|
3656
3709
|
};
|
|
3657
3710
|
XplorLinks.style = xplorLinksCss;
|
|
@@ -3768,7 +3821,7 @@ const XplorModalPersistent = class {
|
|
|
3768
3821
|
this.loading = false;
|
|
3769
3822
|
}
|
|
3770
3823
|
render() {
|
|
3771
|
-
return (index.h(index.Host, { key: '
|
|
3824
|
+
return (index.h(index.Host, { key: '60cd29fcdff8efad4d0b24f4532acb86e4f6220b' }, index.h("xplor-modal", { key: '6252525de022fcc1098e2e179c4aedb81ebb15d3', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, index.h("slot", { key: '484eeecc00f647e920878512f5e6bd61b41ba825', name: "title", slot: "title" }), index.h("slot", { key: 'e3fb52e2f19fdd4346fc4d014a0391dcc3e7c156', name: "subtitle", slot: "subtitle" }), index.h("slot", { key: 'aa8a47b1afa24229269c08783fe0b69c5a258adc', name: "body", slot: "body" }), index.h("slot", { key: '8d1711d5e3223922596a26ce4eb9d30288c259ed', name: "actions", slot: "actions" }))));
|
|
3772
3825
|
}
|
|
3773
3826
|
};
|
|
3774
3827
|
|
|
@@ -3802,6 +3855,18 @@ const XplorNavTabs = class {
|
|
|
3802
3855
|
};
|
|
3803
3856
|
XplorNavTabs.style = xplorNavTabsCss;
|
|
3804
3857
|
|
|
3858
|
+
const xplorRadioBtnCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n /* html[data-theme='office'] {\n --color-primary: rgb(219, 59, 3);\n --color-secondary: rgb(0, 119, 107);\n --color-buttons: #89da59;\n --color-typography: #ff320e;\n }\n\n html {\n --color-primary: #db3b03;\n --color-primary-50: #db3b03;\n --color-secondary: rgb(0, 119, 107);\n --color-secondary-50: rgb(0, 119, 107);\n --color-tertiary: rgb(128, 104, 186);\n } */\n :root {\n --color-primary: #db3b03;\n --color-primary-50: rgba(255, 152, 0, 1);\n --color-secondary: rgb(0, 119, 107);\n --color-secondary-50: rgba(1, 163, 157, 1);\n --color-tertiary: rgb(128, 104, 186);\n --color-tertiary: rgb(223, 242, 241);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n /* Fallback */\n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n /* Fallback */\n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce {\n width: 600px !important;\n }\n}\nh1 {\n color: var(--color-primary);\n /* Header/H1 */\n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; /* 116.667% */\n}\n\nh2 {\n color: var(--grey-1100252525, #252525);\n /* Header/H2 Bold */\n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; /* 118.75% */\n letter-spacing: 0.25px;\n}\n\nh3 {\n color: var(--grey-1100252525, #252525);\n /* Header/H3 */\n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; /* 133.333% */\n}\n\n.overline {\n color: var(--grey-1100252525, #252525);\n /* Overline/Regular */\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; /* 133.333% */\n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol,\nul {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol li,\nul li {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label {\n color: var(--Orange-900-Primary, #db3b03);\n /* Caption 1/Regular */\n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; /* 133.333% */\n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg {\n background-color: #fefcfb;\n}\n\n#spinnerLoader {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label {\n background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused .mdc-notched-outline__notch {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n:host {\n display: block;\n}";
|
|
3859
|
+
|
|
3860
|
+
const XplorRadioBtn = class {
|
|
3861
|
+
constructor(hostRef) {
|
|
3862
|
+
index.registerInstance(this, hostRef);
|
|
3863
|
+
}
|
|
3864
|
+
render() {
|
|
3865
|
+
return (index.h(index.Host, { key: '350aae21c138b87e3dfce7ebdb2d74747d5abc93' }, index.h("h1", { key: 'f7546bbab5c85aa0ed4d180116200790444f8c5f' }, "I'm a button"), index.h("slot", { key: '79492d83d93da17775f56c21e2a600cafdea2c44' })));
|
|
3866
|
+
}
|
|
3867
|
+
};
|
|
3868
|
+
XplorRadioBtn.style = xplorRadioBtnCss;
|
|
3869
|
+
|
|
3805
3870
|
const xplorSectionCardCss = "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n \n :root {\n --color-primary: #db3b03;\n --color-primary-50: rgba(255, 152, 0, 1);\n --color-secondary: rgb(0, 119, 107);\n --color-secondary-50: rgba(1, 163, 157, 1);\n --color-tertiary: rgb(128, 104, 186);\n --color-tertiary: rgb(223, 242, 241);\n --color-white: white;\n --color-emphasis: rgb(8, 8, 9);\n --color-supergiant: rgb(213, 66, 99);\n --color-orange: rgb(250, 200, 127);\n --color-buttons: #fbbc05;\n --color-typography: #ea4335;\n --background: 20 66% 99%;\n --foreground: 20 51% 4%;\n --muted: 20 25% 86%;\n --muted-foreground: 20 7% 25%;\n --popover: 20 66% 98%;\n --popover-foreground: 20 51% 3%;\n --card: 20 66% 98%;\n --card-foreground: 20 51% 3%;\n --border: 20 15% 94%;\n --input: 20 15% 94%;\n --primary: 20 48% 72%;\n --primary-foreground: 20 48% 12%;\n --secondary: 20 12% 92%;\n --secondary-foreground: 20 12% 32%;\n --accent: 20 12% 92%;\n --accent-foreground: 20 12% 32%;\n --destructive: 11 80% 22%;\n --destructive-foreground: 11 80% 82%;\n --ring: 20 48% 72%;\n --radius: 0.5rem;\n --chart-1: 12 76% 61%;\n --chart-2: 173 58% 39%;\n --chart-3: 197 37% 24%;\n --chart-4: 43 74% 66%;\n --chart-5: 27 87% 67%;\n }\n .dark {\n --background: 253 43% 3%;\n --foreground: 253 31% 98%;\n --muted: 253 7% 13%;\n --muted-foreground: 253 13% 63%;\n --popover: 253 43% 3%;\n --popover-foreground: 253 31% 98%;\n --card: 253 43% 4%;\n --card-foreground: 253 31% 99%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --primary: 253 91% 58%;\n --primary-foreground: 253 91% 98%;\n --secondary: 253 7% 9%;\n --secondary-foreground: 253 7% 69%;\n --accent: 253 13% 14%;\n --accent-foreground: 253 13% 74%;\n --destructive: 339.2 90.36% 51.18%;\n --destructive-foreground: 0 0% 100%;\n --ring: 253 91% 58%;\n --chart-1: 220 70% 50%;\n --chart-2: 160 60% 45%;\n --chart-3: 30 80% 55%;\n --chart-4: 280 65% 60%;\n --chart-5: 340 75% 55%;\n }\n}\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply box-border bg-background text-foreground;\n }\n}\n@layer utilities {\n .min-h-screen {\n min-height: 100vh;\n \n min-height: 100dvh;\n }\n .h-screen {\n height: 100vh;\n \n height: 100dvh;\n }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n .glass {\n border: none;\n backdrop-filter: blur(var(--glass-blur, 40px));\n background-color: transparent;\n background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n }\n}\n.tox.tox-tinymce.sc-xplor-section-card {\n width: 50% !important;\n height: 400px !important;\n display: inline-flex;\n}\n\n\n@media only screen and (min-width: 600px) {\n .tox.tox-tinymce.sc-xplor-section-card {\n width: 600px !important;\n }\n}\nh1.sc-xplor-section-card {\n color: var(--color-primary);\n \n font-family: Inter;\n font-size: 48px;\n font-style: normal;\n font-weight: 400;\n line-height: 56px; \n}\n\nh2.sc-xplor-section-card {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 32px;\n font-style: normal;\n font-weight: 600;\n line-height: 38px; \n letter-spacing: 0.25px;\n}\n\nh3.sc-xplor-section-card {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 32px; \n}\n\n.overline.sc-xplor-section-card {\n color: var(--grey-1100252525, #252525);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px; \n letter-spacing: 3.2px;\n text-transform: uppercase;\n}\n\nol.sc-xplor-section-card, ul.sc-xplor-section-card {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-section-card li.sc-xplor-section-card, ul.sc-xplor-section-card li.sc-xplor-section-card {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-section-card, ul.mdc-list.sc-xplor-section-card {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-section-card li.mdc-list-item.sc-xplor-section-card, ul.mdc-list.sc-xplor-section-card li.mdc-list-item.sc-xplor-section-card {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-section-card {\n color: var(--Orange-900-Primary, #db3b03);\n \n font-family: Inter;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: 16px; \n letter-spacing: 0.4px;\n margin: 0px 0 -9px 16px;\n z-index: 1 !important;\n position: relative;\n width: fit-content;\n}\n.orange-label.grey-bg.sc-xplor-section-card {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-section-card {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background-color: #fff;\n padding: 20px;\n border-radius: 5px;\n box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n pointer-events: none;\n}\n\n#textfield-Title-label.sc-xplor-section-card {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-section-card .mdc-text-field--outlined.sc-xplor-section-card .mdc-notched-outline__notch.sc-xplor-section-card {\n border: 0px solid transparent !important;\n border-bottom: 1px solid #db3b03 !important;\n padding: 0;\n height: 0;\n}\n\n.mdc-text-field--focused.sc-xplor-section-card .mdc-notched-outline__notch.sc-xplor-section-card {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-section-card .mdc-notched-outline.sc-xplor-section-card .mdc-notched-outline__notch.sc-xplor-section-card {\n max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n border-top: transparent;\n}\n\n.generate-btn.sc-xplor-section-card {\n display: flex;\n height: 48px;\n padding: 12px 24px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 16px;\n}\n.generate-btn.link.sc-xplor-section-card:hover {\n background-color: var(--Cyan-700-Secondary, #e27046);\n color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green.sc-xplor-section-card {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.margin-128.sc-xplor-section-card {\n margin: 8rem;\n}\n\n.margin-t-128.sc-xplor-section-card {\n margin-top: 8rem;\n}\n\n.margin-r-128.sc-xplor-section-card {\n margin-right: 8rem;\n}\n\n.margin-b-128.sc-xplor-section-card {\n margin-bottom: 8rem;\n}\n\n.margin-l-128.sc-xplor-section-card {\n margin-left: 8rem;\n}\n\n.margin-x-128.sc-xplor-section-card {\n margin-left: 8rem;\n margin-right: 8rem;\n}\n\n.margin-y-128.sc-xplor-section-card {\n margin-top: 8rem;\n margin-bottom: 8rem;\n}\n\n.margin-80.sc-xplor-section-card {\n margin: 5rem;\n}\n\n.margin-t-80.sc-xplor-section-card {\n margin-top: 5rem;\n}\n\n.margin-r-80.sc-xplor-section-card {\n margin-right: 5rem;\n}\n\n.margin-b-80.sc-xplor-section-card {\n margin-bottom: 5rem;\n}\n\n.margin-l-80.sc-xplor-section-card {\n margin-left: 5rem;\n}\n\n.margin-x-80.sc-xplor-section-card {\n margin-left: 5rem;\n margin-right: 5rem;\n}\n\n.margin-y-80.sc-xplor-section-card {\n margin-top: 5rem;\n margin-bottom: 5rem;\n}\n\n.margin-64.sc-xplor-section-card {\n margin: 4rem;\n}\n\n.margin-t-64.sc-xplor-section-card {\n margin-top: 4rem;\n}\n\n.margin-r-64.sc-xplor-section-card {\n margin-right: 4rem;\n}\n\n.margin-b-64.sc-xplor-section-card {\n margin-bottom: 4rem;\n}\n\n.margin-l-64.sc-xplor-section-card {\n margin-left: 4rem;\n}\n\n.margin-x-64.sc-xplor-section-card {\n margin-left: 4rem;\n margin-right: 4rem;\n}\n\n.margin-y-64.sc-xplor-section-card {\n margin-top: 4rem;\n margin-bottom: 4rem;\n}\n\n.margin-56.sc-xplor-section-card {\n margin: 3.5rem;\n}\n\n.margin-t-56.sc-xplor-section-card {\n margin-top: 3.5rem;\n}\n\n.margin-r-56.sc-xplor-section-card {\n margin-right: 3.5rem;\n}\n\n.margin-b-56.sc-xplor-section-card {\n margin-bottom: 3.5rem;\n}\n\n.margin-l-56.sc-xplor-section-card {\n margin-left: 3.5rem;\n}\n\n.margin-x-56.sc-xplor-section-card {\n margin-left: 3.5rem;\n margin-right: 3.5rem;\n}\n\n.margin-y-56.sc-xplor-section-card {\n margin-top: 3.5rem;\n margin-bottom: 3.5rem;\n}\n\n.margin-48.sc-xplor-section-card {\n margin: 3rem;\n}\n\n.margin-t-48.sc-xplor-section-card {\n margin-top: 3rem;\n}\n\n.margin-r-48.sc-xplor-section-card {\n margin-right: 3rem;\n}\n\n.margin-b-48.sc-xplor-section-card {\n margin-bottom: 3rem;\n}\n\n.margin-l-48.sc-xplor-section-card {\n margin-left: 3rem;\n}\n\n.margin-x-48.sc-xplor-section-card {\n margin-left: 3rem;\n margin-right: 3rem;\n}\n\n.margin-y-48.sc-xplor-section-card {\n margin-top: 3rem;\n margin-bottom: 3rem;\n}\n\n.margin-40.sc-xplor-section-card {\n margin: 2.5rem;\n}\n\n.margin-t-40.sc-xplor-section-card {\n margin-top: 2.5rem;\n}\n\n.margin-r-40.sc-xplor-section-card {\n margin-right: 2.5rem;\n}\n\n.margin-b-40.sc-xplor-section-card {\n margin-bottom: 2.5rem;\n}\n\n.margin-l-40.sc-xplor-section-card {\n margin-left: 2.5rem;\n}\n\n.margin-x-40.sc-xplor-section-card {\n margin-left: 2.5rem;\n margin-right: 2.5rem;\n}\n\n.margin-y-40.sc-xplor-section-card {\n margin-top: 2.5rem;\n margin-bottom: 2.5rem;\n}\n\n.margin-32.sc-xplor-section-card {\n margin: 2rem;\n}\n\n.margin-t-32.sc-xplor-section-card {\n margin-top: 2rem;\n}\n\n.margin-r-32.sc-xplor-section-card {\n margin-right: 2rem;\n}\n\n.margin-b-32.sc-xplor-section-card {\n margin-bottom: 2rem;\n}\n\n.margin-l-32.sc-xplor-section-card {\n margin-left: 2rem;\n}\n\n.margin-x-32.sc-xplor-section-card {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n.margin-y-32.sc-xplor-section-card {\n margin-top: 2rem;\n margin-bottom: 2rem;\n}\n\n.margin-24.sc-xplor-section-card {\n margin: 1.5rem;\n}\n\n.margin-t-24.sc-xplor-section-card {\n margin-top: 1.5rem;\n}\n\n.margin-r-24.sc-xplor-section-card {\n margin-right: 1.5rem;\n}\n\n.margin-b-24.sc-xplor-section-card {\n margin-bottom: 1.5rem;\n}\n\n.margin-l-24.sc-xplor-section-card {\n margin-left: 1.5rem;\n}\n\n.margin-x-24.sc-xplor-section-card {\n margin-left: 1.5rem;\n margin-right: 1.5rem;\n}\n\n.margin-y-24.sc-xplor-section-card {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem;\n}\n\n.margin-20.sc-xplor-section-card {\n margin: 1.25rem;\n}\n\n.margin-t-20.sc-xplor-section-card {\n margin-top: 1.25rem;\n}\n\n.margin-r-20.sc-xplor-section-card {\n margin-right: 1.25rem;\n}\n\n.margin-b-20.sc-xplor-section-card {\n margin-bottom: 1.25rem;\n}\n\n.margin-l-20.sc-xplor-section-card {\n margin-left: 1.25rem;\n}\n\n.margin-x-20.sc-xplor-section-card {\n margin-left: 1.25rem;\n margin-right: 1.25rem;\n}\n\n.margin-y-20.sc-xplor-section-card {\n margin-top: 1.25rem;\n margin-bottom: 1.25rem;\n}\n\n.margin-16.sc-xplor-section-card {\n margin: 1rem;\n}\n\n.margin-t-16.sc-xplor-section-card {\n margin-top: 1rem;\n}\n\n.margin-r-16.sc-xplor-section-card {\n margin-right: 1rem;\n}\n\n.margin-b-16.sc-xplor-section-card {\n margin-bottom: 1rem;\n}\n\n.margin-l-16.sc-xplor-section-card {\n margin-left: 1rem;\n}\n\n.margin-x-16.sc-xplor-section-card {\n margin-left: 1rem;\n margin-right: 1rem;\n}\n\n.margin-y-16.sc-xplor-section-card {\n margin-top: 1rem;\n margin-bottom: 1rem;\n}\n\n.margin-12.sc-xplor-section-card {\n margin: 0.75rem;\n}\n\n.margin-t-12.sc-xplor-section-card {\n margin-top: 0.75rem;\n}\n\n.margin-r-12.sc-xplor-section-card {\n margin-right: 0.75rem;\n}\n\n.margin-b-12.sc-xplor-section-card {\n margin-bottom: 0.75rem;\n}\n\n.margin-l-12.sc-xplor-section-card {\n margin-left: 0.75rem;\n}\n\n.margin-x-12.sc-xplor-section-card {\n margin-left: 0.75rem;\n margin-right: 0.75rem;\n}\n\n.margin-y-12.sc-xplor-section-card {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n}\n\n.margin-8.sc-xplor-section-card {\n margin: 0.5rem;\n}\n\n.margin-t-8.sc-xplor-section-card {\n margin-top: 0.5rem;\n}\n\n.margin-r-8.sc-xplor-section-card {\n margin-right: 0.5rem;\n}\n\n.margin-b-8.sc-xplor-section-card {\n margin-bottom: 0.5rem;\n}\n\n.margin-l-8.sc-xplor-section-card {\n margin-left: 0.5rem;\n}\n\n.margin-x-8.sc-xplor-section-card {\n margin-left: 0.5rem;\n margin-right: 0.5rem;\n}\n\n.margin-y-8.sc-xplor-section-card {\n margin-top: 0.5rem;\n margin-bottom: 0.5rem;\n}\n\n.margin-4.sc-xplor-section-card {\n margin: 0.25rem;\n}\n\n.margin-t-4.sc-xplor-section-card {\n margin-top: 0.25rem;\n}\n\n.margin-r-4.sc-xplor-section-card {\n margin-right: 0.25rem;\n}\n\n.margin-b-4.sc-xplor-section-card {\n margin-bottom: 0.25rem;\n}\n\n.margin-l-4.sc-xplor-section-card {\n margin-left: 0.25rem;\n}\n\n.margin-x-4.sc-xplor-section-card {\n margin-left: 0.25rem;\n margin-right: 0.25rem;\n}\n\n.margin-y-4.sc-xplor-section-card {\n margin-top: 0.25rem;\n margin-bottom: 0.25rem;\n}\n\n.padding-128.sc-xplor-section-card {\n padding: 8rem;\n}\n\n.padding-t-128.sc-xplor-section-card {\n padding-top: 8rem;\n}\n\n.padding-r-128.sc-xplor-section-card {\n padding-right: 8rem;\n}\n\n.padding-b-128.sc-xplor-section-card {\n padding-bottom: 8rem;\n}\n\n.padding-l-128.sc-xplor-section-card {\n padding-left: 8rem;\n}\n\n.padding-x-128.sc-xplor-section-card {\n padding-left: 8rem;\n padding-right: 8rem;\n}\n\n.padding-y-128.sc-xplor-section-card {\n padding-top: 8rem;\n padding-bottom: 8rem;\n}\n\n.padding-80.sc-xplor-section-card {\n padding: 5rem;\n}\n\n.padding-t-80.sc-xplor-section-card {\n padding-top: 5rem;\n}\n\n.padding-r-80.sc-xplor-section-card {\n padding-right: 5rem;\n}\n\n.padding-b-80.sc-xplor-section-card {\n padding-bottom: 5rem;\n}\n\n.padding-l-80.sc-xplor-section-card {\n padding-left: 5rem;\n}\n\n.padding-x-80.sc-xplor-section-card {\n padding-left: 5rem;\n padding-right: 5rem;\n}\n\n.padding-y-80.sc-xplor-section-card {\n padding-top: 5rem;\n padding-bottom: 5rem;\n}\n\n.padding-64.sc-xplor-section-card {\n padding: 4rem;\n}\n\n.padding-t-64.sc-xplor-section-card {\n padding-top: 4rem;\n}\n\n.padding-r-64.sc-xplor-section-card {\n padding-right: 4rem;\n}\n\n.padding-b-64.sc-xplor-section-card {\n padding-bottom: 4rem;\n}\n\n.padding-l-64.sc-xplor-section-card {\n padding-left: 4rem;\n}\n\n.padding-x-64.sc-xplor-section-card {\n padding-left: 4rem;\n padding-right: 4rem;\n}\n\n.padding-y-64.sc-xplor-section-card {\n padding-top: 4rem;\n padding-bottom: 4rem;\n}\n\n.padding-56.sc-xplor-section-card {\n padding: 3.5rem;\n}\n\n.padding-t-56.sc-xplor-section-card {\n padding-top: 3.5rem;\n}\n\n.padding-r-56.sc-xplor-section-card {\n padding-right: 3.5rem;\n}\n\n.padding-b-56.sc-xplor-section-card {\n padding-bottom: 3.5rem;\n}\n\n.padding-l-56.sc-xplor-section-card {\n padding-left: 3.5rem;\n}\n\n.padding-x-56.sc-xplor-section-card {\n padding-left: 3.5rem;\n padding-right: 3.5rem;\n}\n\n.padding-y-56.sc-xplor-section-card {\n padding-top: 3.5rem;\n padding-bottom: 3.5rem;\n}\n\n.padding-48.sc-xplor-section-card {\n padding: 3rem;\n}\n\n.padding-t-48.sc-xplor-section-card {\n padding-top: 3rem;\n}\n\n.padding-r-48.sc-xplor-section-card {\n padding-right: 3rem;\n}\n\n.padding-b-48.sc-xplor-section-card {\n padding-bottom: 3rem;\n}\n\n.padding-l-48.sc-xplor-section-card {\n padding-left: 3rem;\n}\n\n.padding-x-48.sc-xplor-section-card {\n padding-left: 3rem;\n padding-right: 3rem;\n}\n\n.padding-y-48.sc-xplor-section-card {\n padding-top: 3rem;\n padding-bottom: 3rem;\n}\n\n.padding-40.sc-xplor-section-card {\n padding: 2.5rem;\n}\n\n.padding-t-40.sc-xplor-section-card {\n padding-top: 2.5rem;\n}\n\n.padding-r-40.sc-xplor-section-card {\n padding-right: 2.5rem;\n}\n\n.padding-b-40.sc-xplor-section-card {\n padding-bottom: 2.5rem;\n}\n\n.padding-l-40.sc-xplor-section-card {\n padding-left: 2.5rem;\n}\n\n.padding-x-40.sc-xplor-section-card {\n padding-left: 2.5rem;\n padding-right: 2.5rem;\n}\n\n.padding-y-40.sc-xplor-section-card {\n padding-top: 2.5rem;\n padding-bottom: 2.5rem;\n}\n\n.padding-32.sc-xplor-section-card {\n padding: 2rem;\n}\n\n.padding-t-32.sc-xplor-section-card {\n padding-top: 2rem;\n}\n\n.padding-r-32.sc-xplor-section-card {\n padding-right: 2rem;\n}\n\n.padding-b-32.sc-xplor-section-card {\n padding-bottom: 2rem;\n}\n\n.padding-l-32.sc-xplor-section-card {\n padding-left: 2rem;\n}\n\n.padding-x-32.sc-xplor-section-card {\n padding-left: 2rem;\n padding-right: 2rem;\n}\n\n.padding-y-32.sc-xplor-section-card {\n padding-top: 2rem;\n padding-bottom: 2rem;\n}\n\n.padding-24.sc-xplor-section-card {\n padding: 1.5rem;\n}\n\n.padding-t-24.sc-xplor-section-card {\n padding-top: 1.5rem;\n}\n\n.padding-r-24.sc-xplor-section-card {\n padding-right: 1.5rem;\n}\n\n.padding-b-24.sc-xplor-section-card {\n padding-bottom: 1.5rem;\n}\n\n.padding-l-24.sc-xplor-section-card {\n padding-left: 1.5rem;\n}\n\n.padding-x-24.sc-xplor-section-card {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n}\n\n.padding-y-24.sc-xplor-section-card {\n padding-top: 1.5rem;\n padding-bottom: 1.5rem;\n}\n\n.padding-20.sc-xplor-section-card {\n padding: 1.25rem;\n}\n\n.padding-t-20.sc-xplor-section-card {\n padding-top: 1.25rem;\n}\n\n.padding-r-20.sc-xplor-section-card {\n padding-right: 1.25rem;\n}\n\n.padding-b-20.sc-xplor-section-card {\n padding-bottom: 1.25rem;\n}\n\n.padding-l-20.sc-xplor-section-card {\n padding-left: 1.25rem;\n}\n\n.padding-x-20.sc-xplor-section-card {\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n}\n\n.padding-y-20.sc-xplor-section-card {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n\n.padding-16.sc-xplor-section-card {\n padding: 1rem;\n}\n\n.padding-t-16.sc-xplor-section-card {\n padding-top: 1rem;\n}\n\n.padding-r-16.sc-xplor-section-card {\n padding-right: 1rem;\n}\n\n.padding-b-16.sc-xplor-section-card {\n padding-bottom: 1rem;\n}\n\n.padding-l-16.sc-xplor-section-card {\n padding-left: 1rem;\n}\n\n.padding-x-16.sc-xplor-section-card {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n\n.padding-y-16.sc-xplor-section-card {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.padding-12.sc-xplor-section-card {\n padding: 0.75rem;\n}\n\n.padding-t-12.sc-xplor-section-card {\n padding-top: 0.75rem;\n}\n\n.padding-r-12.sc-xplor-section-card {\n padding-right: 0.75rem;\n}\n\n.padding-b-12.sc-xplor-section-card {\n padding-bottom: 0.75rem;\n}\n\n.padding-l-12.sc-xplor-section-card {\n padding-left: 0.75rem;\n}\n\n.padding-x-12.sc-xplor-section-card {\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n}\n\n.padding-y-12.sc-xplor-section-card {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n\n.padding-8.sc-xplor-section-card {\n padding: 0.5rem;\n}\n\n.padding-t-8.sc-xplor-section-card {\n padding-top: 0.5rem;\n}\n\n.padding-r-8.sc-xplor-section-card {\n padding-right: 0.5rem;\n}\n\n.padding-b-8.sc-xplor-section-card {\n padding-bottom: 0.5rem;\n}\n\n.padding-l-8.sc-xplor-section-card {\n padding-left: 0.5rem;\n}\n\n.padding-x-8.sc-xplor-section-card {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n\n.padding-y-8.sc-xplor-section-card {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem;\n}\n\n.padding-4.sc-xplor-section-card {\n padding: 0.25rem;\n}\n\n.padding-t-4.sc-xplor-section-card {\n padding-top: 0.25rem;\n}\n\n.padding-r-4.sc-xplor-section-card {\n padding-right: 0.25rem;\n}\n\n.padding-b-4.sc-xplor-section-card {\n padding-bottom: 0.25rem;\n}\n\n.padding-l-4.sc-xplor-section-card {\n padding-left: 0.25rem;\n}\n\n.padding-x-4.sc-xplor-section-card {\n padding-left: 0.25rem;\n padding-right: 0.25rem;\n}\n\n.padding-y-4.sc-xplor-section-card {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem;\n}\n\n.sc-xplor-section-card-h {\n display: block;\n}\n\n.section-card.sc-xplor-section-card {\n background: white;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n.section-card--outlined.sc-xplor-section-card {\n border: 2px solid #D0C7E5;\n}\n.section-card--rounded.sc-xplor-section-card {\n border-radius: 1rem;\n}\n.section-card__body.sc-xplor-section-card {\n flex: 1;\n}\n.section-card__actions.sc-xplor-section-card {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding-top: 0.5rem;\n}\n.section-card__actions.sc-xplor-section-card:empty {\n display: none;\n}";
|
|
3806
3871
|
|
|
3807
3872
|
const XplorSectionCard = class {
|
|
@@ -3812,11 +3877,11 @@ const XplorSectionCard = class {
|
|
|
3812
3877
|
this.padding = '1.5rem';
|
|
3813
3878
|
}
|
|
3814
3879
|
render() {
|
|
3815
|
-
return (index.h(index.Host, { key: '
|
|
3880
|
+
return (index.h(index.Host, { key: 'f0bb8af2883a5441f3e325c4267ad3cec5716c9a' }, index.h("div", { key: 'a7611e3f28ca8d84782146adb2b906c789f4a338', class: {
|
|
3816
3881
|
'section-card': true,
|
|
3817
3882
|
'section-card--outlined': this.outlined,
|
|
3818
3883
|
'section-card--rounded': this.rounded,
|
|
3819
|
-
}, style: { padding: this.padding } }, index.h("slot", { key: '
|
|
3884
|
+
}, style: { padding: this.padding } }, index.h("slot", { key: 'e1a7153c70bf52f1d539dfc4f0b95d571aaa97da', name: "title" }), index.h("slot", { key: '90d1df5bf54fc04271e0f762a6f6df09f9a5cc32', name: "subtitle" }), index.h("div", { key: '81c011fa1950cee54769b7940b92722d3dcdd4d5', class: "section-card__body" }, index.h("slot", { key: '5c8bba79d0900c8db7feb677ff1a6dc379bcad65', name: "body" })), index.h("div", { key: 'd71137c24f428c4001c06c3038565368423e71cd', class: "section-card__actions" }, index.h("slot", { key: '06b994a9fb3626a0054b6192b5bb666b89710f54', name: "actions" })))));
|
|
3820
3885
|
}
|
|
3821
3886
|
};
|
|
3822
3887
|
XplorSectionCard.style = xplorSectionCardCss;
|
|
@@ -3829,11 +3894,11 @@ const XplorSectionHeading = class {
|
|
|
3829
3894
|
this.size = 'medium';
|
|
3830
3895
|
}
|
|
3831
3896
|
render() {
|
|
3832
|
-
return (index.h(index.Host, { key: '
|
|
3897
|
+
return (index.h(index.Host, { key: '6ee4041528bf178feb4b641c6f6f937c28ed2e8e' }, index.h("span", { key: 'e9758f23fe78a18f5ebf77092225c4d3b2a29965', class: {
|
|
3833
3898
|
'section-heading': true,
|
|
3834
3899
|
'section-heading--small': this.size === 'small',
|
|
3835
3900
|
'section-heading--large': this.size === 'large',
|
|
3836
|
-
} }, index.h("slot", { key: '
|
|
3901
|
+
} }, index.h("slot", { key: 'e0191f9f23da9858ffbb204554fec2c1012d1cd3' }, this.text))));
|
|
3837
3902
|
}
|
|
3838
3903
|
};
|
|
3839
3904
|
XplorSectionHeading.style = xplorSectionHeadingCss;
|
|
@@ -4021,11 +4086,11 @@ const XplorTable = class {
|
|
|
4021
4086
|
if (this.hasScrolled)
|
|
4022
4087
|
className += ' xpl-table--has-scrolled';
|
|
4023
4088
|
const paginatedData = this.getPaginatedData();
|
|
4024
|
-
return (index.h(index.Host, { key: '
|
|
4089
|
+
return (index.h(index.Host, { key: '3f20eb245a5a7cb281d4d62c4decd5479a4a172f', class: "xplor-table" }, index.h("div", { key: '1a28e8efbe4743b4dc77cfe62eeb21f317a9cbea', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, index.h("div", { key: 'a20608a0f5d4cde341974fb887f6bf0fcd1bce2d', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
|
|
4025
4090
|
this.container = el;
|
|
4026
|
-
} }, index.h("div", { key: '
|
|
4091
|
+
} }, index.h("div", { key: '179d76f9152adf12775024ab4b8a272539ae1931', class: "mb-6" }, index.h("h1", { key: '636955cf3e3b34e0dfd96d61b1dc055a8bd25421', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), index.h("div", { key: 'dbb17a39f87faf48f840cb0a0912e766d26fd3c6', class: "flex flex-wrap items-center gap-4 mb-6" }, index.h("div", { key: '093859d4da39cdbda7c9d2bdde59dbe18e6379bc', class: "flex items-center gap-2" }, index.h("label", { key: '01a133d35d6b97bb2c4e231ae6ebe8f4082f2955', class: "text-sm text-gray-600 font-medium" }, "Date Range"), index.h("select", { key: 'df99b873a684c2ae59f4d8ee5f2df68de8d0424d', class: "border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500",
|
|
4027
4092
|
// value={this.selectedDateRange}
|
|
4028
|
-
onInput: this.handleDateRangeChange }, index.h("option", { key: '
|
|
4093
|
+
onInput: this.handleDateRangeChange }, index.h("option", { key: '7886a61f2329e9ed9cc8ee7a2cf6addea173cca1', value: "All" }, "All"), index.h("option", { key: '582f916607bb0cf80e0bae5bc0d6a2a555629139', value: "Today" }, "Today"), index.h("option", { key: 'e6b1b8b081ee25a4ed86a41e2de2e18a904b0696', value: "This Week" }, "This Week"), index.h("option", { key: '9db97f27a005fe23d2e5c60f8920b867a8f6c6e5', value: "This Month" }, "This Month"), index.h("option", { key: '3328f1c88fe0da23ede3010441f0fe4e2063b2ec', value: "Custom" }, "Custom Range")), index.h("button", { key: '31041e09d90e476f7c795b29eb6f11b014ff7bfd', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, index.h("svg", { key: '1bafb7b5f685358f03d9c4aab68ae30eb49118dd', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: 'e59bce624afdfb75f2c0118fc6ff83daab003246', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })))), index.h("button", { key: '67ff7cd34e44e071f73d5d4e4f46df5ae386aa00', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), index.h("button", { key: '5b23efc3355a5e4907b06696e29ca1f5b9d5c4f2', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, index.h("svg", { key: 'f787cf0f0759c4536786bc3e1ce2db99324ba085', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: '1a21159e06c0371d4d43abc98a1e5d2c4919fa2f', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })), "Download All"))), index.h("table", { key: '7ba170b68b794cd1dc031e801405d0f09c8d0e8f', class: `w-full ${className}` }, this.columns && (index.h("thead", { key: 'e79458ad7b197620a6ba37084fd009a3685340cc' }, this.columns.map((column, i) => {
|
|
4029
4094
|
const iconType = getIconType(this.sortTypeArray[i]);
|
|
4030
4095
|
const isColumnSortable = !!(this.isSortable &&
|
|
4031
4096
|
this.sortableColumns[i]);
|
|
@@ -4058,11 +4123,11 @@ const XplorTable = class {
|
|
|
4058
4123
|
// id="__xpl-icon-sort"
|
|
4059
4124
|
// ></xpl-icon>
|
|
4060
4125
|
)))));
|
|
4061
|
-
}))), index.h("tbody", { key: '
|
|
4126
|
+
}))), index.h("tbody", { key: '138ffddb19a8573fc00894a5e9b981cecbe3ac40' }, paginatedData.map((row, rowNum) => (index.h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (index.h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (index.h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, index.h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
|
|
4062
4127
|
.length > 0
|
|
4063
4128
|
? this
|
|
4064
4129
|
.selectedValues[rowNum]
|
|
4065
|
-
: `xpl-table-checkbox-${rowNum}` }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell })))))))))), index.h("div", { key: '
|
|
4130
|
+
: `xpl-table-checkbox-${rowNum}` }), index.h("div", { innerHTML: cell }))) : (index.h("div", { innerHTML: cell })))))))))), index.h("div", { key: 'e82751ff914c2279cecdfbaa176e97f6e935732a', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, index.h("div", { key: '4ed42566de46b43af24a36884832017947f117ef', class: "flex items-center gap-2" }, index.h("button", { key: 'a0c61305cbcace0eda2964da23085f58a8fc31a7', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, index.h("svg", { key: '322225c61fc14d0c6d8a201a3ff07cce094822c7', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: 'ae66792c0cf51383d2657ff5302383e4067761ce', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), index.h("button", { key: 'bc660dbbcf14d7ddf25820c337d212c11804b988', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, index.h("svg", { key: '365d59f74128819af1f163f125e393994a2e69ad', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: '0b7c6305962e722c161d30e3b3ffe804c5d4c73e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), index.h("span", { key: '2e0245cf9e2d23a944492432cd5c33bb915ecd2b', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), index.h("div", { key: '5692bf81ffa24c2e10c8edb7d7a5ff6655816f7a', class: "flex items-center gap-2" }, index.h("button", { key: 'f60c4847070a3eb4e19e59c7c25141ce68ddbe81', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, index.h("svg", { key: '5f45f52d2dd1718691f582e765dd7cc3aa476dce', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: 'ad63a63e8956c6648781d7160761f8e310c5becc', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), index.h("button", { key: '2ee1f6498fb0ccb4e2ea9a4e4d7651053b97851c', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, index.h("svg", { key: 'e247cc56f3cfc8d870a7891fd0c457645473e3e1', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, index.h("path", { key: '791f2af81bce193fbfcb41985feccec5338cee80', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
|
|
4066
4131
|
}
|
|
4067
4132
|
get el() { return index.getElement(this); }
|
|
4068
4133
|
static get watchers() { return {
|
|
@@ -4078,11 +4143,11 @@ const XplorTextBubble = class {
|
|
|
4078
4143
|
this.color = 'orange';
|
|
4079
4144
|
}
|
|
4080
4145
|
render() {
|
|
4081
|
-
return (index.h(index.Host, { key: '
|
|
4146
|
+
return (index.h(index.Host, { key: '61174051f7acc2747a0c95e1599a8ca04a9bc5e6' }, index.h("div", { key: 'fe266a910f906422a4e5d9e73d4f4d0570fa8c79', class: {
|
|
4082
4147
|
'text-bubble': true,
|
|
4083
4148
|
'text-bubble--green': this.color === 'green',
|
|
4084
4149
|
'text-bubble--orange': this.color === 'orange',
|
|
4085
|
-
} }, index.h("slot", { key: '
|
|
4150
|
+
} }, index.h("slot", { key: '1286ac72861f5da019bece897343778d40acdc36' }))));
|
|
4086
4151
|
}
|
|
4087
4152
|
};
|
|
4088
4153
|
XplorTextBubble.style = xplorTextBubbleCss;
|
|
@@ -4219,10 +4284,10 @@ const XplorTextField = class {
|
|
|
4219
4284
|
}
|
|
4220
4285
|
render() {
|
|
4221
4286
|
const labelFloating = this.isFocused || this.hasValue;
|
|
4222
|
-
return (index.h(index.Host, { key: '
|
|
4287
|
+
return (index.h(index.Host, { key: '93fdd30e48260ae52b33c18368637b1e7fdd7b6b' }, index.h("div", { key: 'ef93e7bc3588c225dfb7fef553f1146aecfcc027', class: this.computedClasses }, index.h("div", { key: '5ffdd5634f410b2432e549403040e9ce7fdb0da4', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, index.h("div", { key: '08ab012b2ccb2698256f149563cc1ed47052e694', class: "xplor-text-field__input-wrapper" }, this.label && (index.h("label", { key: 'c4f359a167cb4cb47ba39355c56f7249523d8ef7', class: {
|
|
4223
4288
|
'xplor-text-field__label': true,
|
|
4224
4289
|
'xplor-text-field__label--floating': labelFloating,
|
|
4225
|
-
} }, index.h("slot", { key: '
|
|
4290
|
+
} }, index.h("slot", { key: 'cfd751bb2bbe51c6a847b6ac6317559b06feae39', name: "label" }, this.label), this.required && index.h("span", { key: '0d53dea42c4b288ec44c699aac77670ff45167b9', class: "xplor-text-field__required" }, "*"))), index.h("input", { key: 'cbb7810c082c222a6aebe67fbfdfcce7804ff82c', ref: (el) => (this.inputElement = el), class: "xplor-text-field__input", type: this.type, value: this.value, placeholder: this.isFocused ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, maxlength: this.maxlength, min: this.min, max: this.max, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-invalid": this.hasError ? 'true' : 'false', "aria-describedby": this.hasError ? 'error-messages' : undefined }), index.h("div", { key: '24a63d349c6a425854ed76c6ddb4a30ed5e91566', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (index.h("button", { key: '9145e93c91f67f98f0759370515552c66aeaae28', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, index.h("svg", { key: '8dc823a286290bc563939bdee1b13bac39a6596d', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, index.h("path", { key: 'd2f82e862b8331992aadd769366ef4bae2b744fd', d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })))), index.h("slot", { key: '40cc5d4ba05c8e13a4697af6da86069b8f8d0003', name: "append-inner" })), index.h("fieldset", { key: 'd066e7b23972b722cd9e1dca0a008ba3e412cde7', class: "xplor-text-field__outline" }, index.h("legend", { key: 'b8a3597b17f85b6877499cf7d984a874b0a124eb', class: { 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating } }, labelFloating && this.label ? index.h("span", null, this.label, this.required && '*') : index.h("span", null, "\u200B")))), index.h("div", { key: 'b116ffbdb2e0fa04aee252137c3300c5939df4e4', class: "xplor-text-field__append" }, index.h("slot", { key: '5ff712dd69e453d488f3fc3cdad49a72ed9d5779', name: "append" }))), this.showDetails && (index.h("div", { key: '48ffb972bfb61eab4c33c61a4610f54ab6172cf6', class: "xplor-text-field__details" }, this.hasError && (index.h("div", { key: '301bcf461bc00f3c4f5c5a322781f43a8451a597', id: "error-messages", class: "xplor-text-field__error-messages" }, this.errorMessages.map((error) => (index.h("div", { class: "xplor-text-field__error" }, error))))))))));
|
|
4226
4291
|
}
|
|
4227
4292
|
get el() { return index.getElement(this); }
|
|
4228
4293
|
static get watchers() { return {
|
|
@@ -4521,16 +4586,16 @@ const XplorTimePicker = class {
|
|
|
4521
4586
|
}
|
|
4522
4587
|
render() {
|
|
4523
4588
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
|
|
4524
|
-
const clockIcon = (index.h("svg", { key: '
|
|
4525
|
-
return (index.h(index.Host, { key: '
|
|
4589
|
+
const clockIcon = (index.h("svg", { key: '9b8bc8f441d31aaa0c92e49e5c1a669f48c7ca6e', class: "time-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("circle", { key: 'a21fb969eeb8690b82879ebc9a6c51b1cd7aafa7', cx: "12", cy: "12", r: "10" }), index.h("polyline", { key: '3a9baa3e13e7b8c34291a3755122262d868c61ed', points: "12 6 12 12 16 14" })));
|
|
4590
|
+
return (index.h(index.Host, { key: 'd33be9ec453c217585e40c0eb8b0c0960c7bb382' }, index.h("div", { key: '7ab538480696c0f08acd0855801f800bfe8c8862', class: {
|
|
4526
4591
|
'time-picker': true,
|
|
4527
4592
|
'time-picker--disabled': this.disabled,
|
|
4528
4593
|
'time-picker--error': !!this.error,
|
|
4529
4594
|
'time-picker--open': this.isOpen,
|
|
4530
|
-
} }, this.label && (index.h("label", { key: '
|
|
4531
|
-
index.h("div", { key: '
|
|
4532
|
-
index.h("div", { key: '
|
|
4533
|
-
], index.h("div", { key: '
|
|
4595
|
+
} }, this.label && (index.h("label", { key: '360dc161f783af2b499223cdadac2232e3e78ba5', class: "time-picker__label" }, this.label, this.required && index.h("span", { key: '78a2e4b030a913d992580d6ce1651a74ad5aab5e', class: "time-picker__required" }, "*"))), index.h("div", { key: 'e17649b5447152ea129bd56d491c878fca99a2bd', class: "time-picker__field" }, index.h("input", { key: '4d14139c735efafc6267e0a08e7087e61f38fea1', type: "text", class: "time-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), index.h("div", { key: '84d7dbcc0f16b6f99453998b9daa27e6106cfc40', class: "time-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (index.h("button", { key: 'a70fedda5e74f4940fe098c9d78fe68a1bc0b54d', type: "button", class: "time-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), index.h("button", { key: 'a1fd37c75457a5dd93da61318e6ee40c206cf5e1', type: "button", class: "time-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open time picker" }, clockIcon))), showDetails && (index.h("div", { key: '32d5afad7a12bbe4fe427f095d8683c80f91982e', class: "time-picker__details" }, this.error && index.h("div", { key: 'd8b06c272ddc8f89b629a4829d72268853f2de59', class: "time-picker__error-message" }, this.error))), this.isOpen && (index.h("div", { key: 'e32482cb95af8020176a98d430da82cd14e22d47', class: "time-picker__dropdown" }, index.h("div", { key: 'fda4e88d54bbe1aee73c559ed4739d8af92a1312', class: "time-picker__columns" }, index.h("div", { key: 'f6b11e869323e3ead50450c50c1513917e7d54b8', class: "time-picker__column" }, index.h("button", { key: '006920c8b6f9482c71e86e51b57941ba9b01ac1a', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementHours, "aria-label": "Increase hours" }, this.renderChevronUp()), index.h("div", { key: '8d24980d4686acb684198234be4e5795bb260a68', class: "time-picker__value" }, String(this.hours).padStart(2, '0')), index.h("button", { key: 'd3bacc27468fce121f8fd9d33bbdc017471d186a', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementHours, "aria-label": "Decrease hours" }, this.renderChevronDown())), index.h("div", { key: '47b37a654b39d927bc8d61631f37b1f4668ddf4f', class: "time-picker__separator" }, ":"), index.h("div", { key: '06338eaa14004fe3db215d8dd3aab3148e187e1e', class: "time-picker__column" }, index.h("button", { key: '2ef570ff9b18c21d5380a4d84b04ce9ae2e2b29a', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementMinutes, "aria-label": "Increase minutes" }, this.renderChevronUp()), index.h("div", { key: 'd6b0499440d0316ef9ce34564b3430580890a3d4', class: "time-picker__value" }, String(this.minutes).padStart(2, '0')), index.h("button", { key: 'da3cae735a153e422c8916575e6450ff60944b84', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementMinutes, "aria-label": "Decrease minutes" }, this.renderChevronDown())), this.showSeconds && [
|
|
4596
|
+
index.h("div", { key: 'ac3ae8aaeff962e05ce23463e38ce8e1757125d6', class: "time-picker__separator" }, ":"),
|
|
4597
|
+
index.h("div", { key: 'bacd826ab467fcfbe31bb0bfb0e14482792a83a7', class: "time-picker__column" }, index.h("button", { key: '9f5160fbe4c64aabd12b7b1b0a862ad67b5d1c0b', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementSeconds, "aria-label": "Increase seconds" }, this.renderChevronUp()), index.h("div", { key: 'e0de300ff5896edefc657e0c700ef63022896ba0', class: "time-picker__value" }, String(this.seconds).padStart(2, '0')), index.h("button", { key: 'ddd4a3851c3b95fbb204df8be210ff45770a5d4a', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementSeconds, "aria-label": "Decrease seconds" }, this.renderChevronDown()))
|
|
4598
|
+
], index.h("div", { key: '9475cca4161ce49d5542f9e80e67cca0fa8d6e47', class: "time-picker__column time-picker__column--period" }, index.h("button", { key: '478377c07a24bf7d42efb8ead573f212fd71a5e5', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronUp()), index.h("div", { key: 'c1f4614e726d95eea32c5b02ad906a9455588594', class: "time-picker__value time-picker__value--period" }, this.period), index.h("button", { key: '26c95e4dcec81c18808ff42861a3ac319e43ea73', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronDown()))))))));
|
|
4534
4599
|
}
|
|
4535
4600
|
get el() { return index.getElement(this); }
|
|
4536
4601
|
};
|
|
@@ -4738,6 +4803,7 @@ exports.xplor_links = XplorLinks;
|
|
|
4738
4803
|
exports.xplor_modal = XplorModal;
|
|
4739
4804
|
exports.xplor_modal_persistent = XplorModalPersistent;
|
|
4740
4805
|
exports.xplor_nav_tabs = XplorNavTabs;
|
|
4806
|
+
exports.xplor_radio_btn = XplorRadioBtn;
|
|
4741
4807
|
exports.xplor_section_card = XplorSectionCard;
|
|
4742
4808
|
exports.xplor_section_heading = XplorSectionHeading;
|
|
4743
4809
|
exports.xplor_table = XplorTable;
|
|
@@ -4745,6 +4811,6 @@ exports.xplor_text_bubble = XplorTextBubble;
|
|
|
4745
4811
|
exports.xplor_text_field = XplorTextField;
|
|
4746
4812
|
exports.xplor_time_picker = XplorTimePicker;
|
|
4747
4813
|
exports.xplor_tooltip = XplorTooltip;
|
|
4748
|
-
//# sourceMappingURL=xplor-alert-dialog.xplor-alert-message.xplor-assistant.xplor-autocomplete.xplor-avatar.xplor-avatar-and-name.xplor-badge.xplor-badge-active.xplor-badge-archived.xplor-badge-deleted.xplor-badge-expired.xplor-badge-inactive.xplor-badge-recalled.xplor-badge-session-booking.xplor-badge-upcoming.xplor-badge-waitlist.xplor-btn-back.xplor-btn-back-to-parent.xplor-btn-icon.xplor-btn-menu.xplor-btn-toggle.xplor-btn-toggle-group.xplor-btn-toggle-secondary.xplor-btn-tooltip.xplor-button.xplor-chat-widget.xplor-checkbox.xplor-combobox.xplor-datatable.xplor-date-picker.xplor-drag-and-drop-input.xplor-dropdown.xplor-expansion-panel.xplor-expansion-panels.xplor-file-upload.xplor-inline-checkbox.xplor-inline-date-picker.xplor-inline-switch.xplor-input-file.xplor-input-search.xplor-input-select.xplor-input-send.xplor-input-text.xplor-input-text-area.xplor-input-text-secondary.xplor-input-title.xplor-links.xplor-modal.xplor-modal-persistent.xplor-nav-tabs.xplor-section-card.xplor-section-heading.xplor-table.xplor-text-bubble.xplor-text-field.xplor-time-picker.xplor-tooltip.entry.cjs.js.map
|
|
4814
|
+
//# sourceMappingURL=xplor-alert-dialog.xplor-alert-message.xplor-assistant.xplor-autocomplete.xplor-avatar.xplor-avatar-and-name.xplor-badge.xplor-badge-active.xplor-badge-archived.xplor-badge-deleted.xplor-badge-expired.xplor-badge-inactive.xplor-badge-recalled.xplor-badge-session-booking.xplor-badge-upcoming.xplor-badge-waitlist.xplor-btn-back.xplor-btn-back-to-parent.xplor-btn-icon.xplor-btn-menu.xplor-btn-toggle.xplor-btn-toggle-group.xplor-btn-toggle-secondary.xplor-btn-tooltip.xplor-button.xplor-chat-widget.xplor-checkbox.xplor-combobox.xplor-datatable.xplor-date-picker.xplor-drag-and-drop-input.xplor-dropdown.xplor-expansion-panel.xplor-expansion-panels.xplor-file-upload.xplor-inline-checkbox.xplor-inline-date-picker.xplor-inline-switch.xplor-input-file.xplor-input-search.xplor-input-select.xplor-input-send.xplor-input-text.xplor-input-text-area.xplor-input-text-secondary.xplor-input-title.xplor-links.xplor-modal.xplor-modal-persistent.xplor-nav-tabs.xplor-radio-btn.xplor-section-card.xplor-section-heading.xplor-table.xplor-text-bubble.xplor-text-field.xplor-time-picker.xplor-tooltip.entry.cjs.js.map
|
|
4749
4815
|
|
|
4750
|
-
//# sourceMappingURL=xplor-alert-
|
|
4816
|
+
//# sourceMappingURL=xplor-alert-dialog_58.cjs.entry.js.map
|