@xplor-education/core-stencil-components 3.0.0 → 3.1.2
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-DxxjL3sU.js → p-B49oUO_9.js} +3 -3
- package/components/{p-DxxjL3sU.js.map → p-B49oUO_9.js.map} +1 -1
- package/components/{p-DURNLP66.js → p-VIJbFoA4.js} +3 -3
- package/components/{p-DURNLP66.js.map → p-VIJbFoA4.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 +3 -3
- 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-send.js +2 -2
- package/components/xplor-input-text-area.js +6 -3
- package/components/xplor-input-text-area.js.map +1 -1
- package/components/xplor-input-text-secondary.js +2 -2
- package/components/xplor-input-text.js +6 -3
- package/components/xplor-input-text.js.map +1 -1
- 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.js +2 -2
- 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/xplor-alert-dialog_58.cjs.entry.js +56 -50
- package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js.map +1 -1
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.css +3 -8
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js +2 -2
- 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-send/xplor-input-send.js +2 -2
- package/dist/collection/components/xplor-input-text/xplor-input-text.css +41 -13
- package/dist/collection/components/xplor-input-text/xplor-input-text.js +5 -2
- package/dist/collection/components/xplor-input-text/xplor-input-text.js.map +1 -1
- package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.css +39 -13
- package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.js +5 -2
- package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.js.map +1 -1
- 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.js +2 -2
- 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/collection/test-utils/index.js +3 -0
- package/dist/collection/test-utils/index.js.map +1 -0
- package/dist/collection/test-utils/mocks.js +46 -0
- package/dist/collection/test-utils/mocks.js.map +1 -0
- package/dist/collection/test-utils/spec-helpers.js +43 -0
- package/dist/collection/test-utils/spec-helpers.js.map +1 -0
- package/dist/components/{p-Dh0wQJt6.js → p-DQ8MCJFX.js} +3 -3
- package/dist/components/{p-Dh0wQJt6.js.map → p-DQ8MCJFX.js.map} +1 -1
- package/dist/components/{p-oOSnPjGy.js → p-J41B2nOt.js} +3 -3
- package/dist/components/{p-oOSnPjGy.js.map → p-J41B2nOt.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 +3 -3
- 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-send.js +2 -2
- package/dist/components/xplor-input-text-area.js +6 -3
- package/dist/components/xplor-input-text-area.js.map +1 -1
- package/dist/components/xplor-input-text-secondary.js +2 -2
- package/dist/components/xplor-input-text.js +6 -3
- package/dist/components/xplor-input-text.js.map +1 -1
- 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.js +2 -2
- 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/xplor-alert-dialog_58.entry.js +56 -50
- package/dist/esm/xplor-alert-dialog_58.entry.js.map +1 -1
- package/dist/hydrate/index.js +56 -50
- package/dist/hydrate/index.mjs +56 -50
- package/dist/types/test-utils/index.d.ts +2 -0
- package/dist/types/test-utils/mocks.d.ts +16 -0
- package/dist/types/test-utils/spec-helpers.d.ts +26 -0
- package/dist/xplor-component-library/{p-0df9ea5d.entry.js → p-7ecb45dd.entry.js} +2 -2
- package/dist/xplor-component-library/p-7ecb45dd.entry.js.map +1 -0
- package/dist/xplor-component-library/xplor-component-library.esm.js +1 -1
- package/package.json +7 -3
- package/dist/xplor-component-library/p-0df9ea5d.entry.js.map +0 -1
package/dist/hydrate/index.mjs
CHANGED
|
@@ -6368,7 +6368,7 @@ class XplorDatePicker {
|
|
|
6368
6368
|
}; }
|
|
6369
6369
|
}
|
|
6370
6370
|
|
|
6371
|
-
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}";
|
|
6371
|
+
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}\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: 1.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 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.75rem;\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 margin-top: 0.25rem;\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}";
|
|
6372
6372
|
|
|
6373
6373
|
const DEFAULT_ACCEPT_ALL$1 = '*' + '/' + '*';
|
|
6374
6374
|
class XplorDragAndDropInput {
|
|
@@ -6497,9 +6497,9 @@ class XplorDragAndDropInput {
|
|
|
6497
6497
|
'drag-drop-card': true,
|
|
6498
6498
|
'drag-drop-card--dragover': this.dragover,
|
|
6499
6499
|
'drag-drop-card--disabled': this.disabled,
|
|
6500
|
-
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, hAsync("div", { key: '49325fd7ff2d44a045eba593e2cb3708316a5be4', class: "drag-drop-card__content" }, hAsync("svg", { key: '23b8f38df073266201a01ec78a45b1cac924a3e4', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, hAsync("path", { key: 'eb1c750d1657fd578cf15c9bc16d5d1885d703e8', 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" }), hAsync("path", { key: '04dc16407d2abd999fbef9cc02346d499644f0a7', 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" })), hAsync("h3", { key: '82c31b56cb5f17445748e0bfb8668caef4ceea59', class: "drag-drop-card__title" }, this.label), hAsync("p", { key: '
|
|
6500
|
+
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, hAsync("div", { key: '49325fd7ff2d44a045eba593e2cb3708316a5be4', class: "drag-drop-card__content" }, hAsync("svg", { key: '23b8f38df073266201a01ec78a45b1cac924a3e4', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, hAsync("path", { key: 'eb1c750d1657fd578cf15c9bc16d5d1885d703e8', 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" }), hAsync("path", { key: '04dc16407d2abd999fbef9cc02346d499644f0a7', 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" })), hAsync("h3", { key: '82c31b56cb5f17445748e0bfb8668caef4ceea59', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL$1 && (hAsync("p", { key: 'cd9a640967ce9cd8c959000771d78a57fe1df4ea', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())), hAsync("div", { key: 'c9a3987e06aceba90a379f6f5264998c218497a1', class: "drag-drop-card__action" }, hAsync("xplor-button", { key: 'a26dd92027f90fb052ce3fa5cc456b18b5732b41', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (hAsync("div", { key: '75258825a2415d4f78dc05caa4931c2b65675c10', class: "file-info", "aria-live": "polite" }, this.showProgress() && (hAsync("p", { key: '643fca5089d411ac0c2ac7cb2d8548450e18df49', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), hAsync("div", { key: '6829f00a6550dee83fc60496c6534272443c2974', class: "file-info__card" }, hAsync("div", { key: 'cb234a2213fc3ae39993b11cb3d99878d643878f', class: "file-info__icon", "aria-hidden": "true" }, hAsync("svg", { key: 'f657669caa7dd95b095b419908f94cf16e8530d7', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, hAsync("path", { key: 'ef502814c77090e682f8b7e3e2d41dc3434a14fa', 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" }))), hAsync("div", { key: '6bcc15939b14fbcfa71408e733489933e9322efa', class: "file-info__details" }, hAsync("p", { key: '9840cd50a70cfec9ceb8588116677ed0da2d5b14', class: "file-info__name" }, this.currentFile.name), hAsync("p", { key: 'f8aaf5f729278070ebd1d3a8137460dab67a130a', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
|
|
6501
6501
|
? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
|
|
6502
|
-
: ''), this.showProgress() && (hAsync("div", { key: '
|
|
6502
|
+
: ''), this.showProgress() && (hAsync("div", { key: 'e30ab7e1514f72034cac41f748df00cd19423d2d', class: "file-info__progress-row" }, hAsync("div", { key: '4ef4e335b0154adc44d940784ac0f01358fa4fd0', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, hAsync("div", { key: '3328873cc9d457401ccfe46c3cee8c7c7d5280ab', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), hAsync("span", { key: 'f3fab0a39db233a16bb1fefdbb15c2174808543d', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), hAsync("button", { key: '70ff008be7088ff5744130ffecab2694eceff8ff', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, hAsync("svg", { key: '0c6957c250bde4af18641704ba8b248ff8b815b4', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, hAsync("path", { key: '0131e03966350788114f5ac999488c19d0186f90', 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" })))))), hAsync("input", { key: 'a40511c99ac1292d5eb5a37be23a235b5103ab65', 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, "aria-label": `${this.browseLabel} - ${this.label}`, tabindex: -1 })));
|
|
6503
6503
|
}
|
|
6504
6504
|
static get style() { return xplorDragAndDropInputCss; }
|
|
6505
6505
|
static get cmpMeta() { return {
|
|
@@ -6529,7 +6529,7 @@ class XplorDropdown {
|
|
|
6529
6529
|
registerInstance(this, hostRef);
|
|
6530
6530
|
}
|
|
6531
6531
|
render() {
|
|
6532
|
-
return (hAsync(Host, { key: '
|
|
6532
|
+
return (hAsync(Host, { key: '51c3f9372a79efeeffc662149ada3cd50c76fcbf' }, hAsync("select", { key: '5bf6285178fd454f76089f62ad17d49654e88bf8', class: "xplor-dropdown", onChange: this.handleChange }, this.options.map((option) => (hAsync("option", { value: option, selected: this.selected === option }, option))))));
|
|
6533
6533
|
}
|
|
6534
6534
|
static get style() { return xplorDropdownCss; }
|
|
6535
6535
|
static get cmpMeta() { return {
|
|
@@ -6577,16 +6577,16 @@ class XplorExpansionPanel {
|
|
|
6577
6577
|
}
|
|
6578
6578
|
}
|
|
6579
6579
|
render() {
|
|
6580
|
-
return (hAsync(Host, { key: '
|
|
6580
|
+
return (hAsync(Host, { key: '3db1f2fc99643b6c032e49d12c8eedb06ae2ceb9' }, hAsync("div", { key: 'ba08fc1332346fd14e2614184a2da5f99c90e217', class: {
|
|
6581
6581
|
'expansion-panel': true,
|
|
6582
6582
|
'expansion-panel--open': this.open,
|
|
6583
6583
|
'expansion-panel--disabled': this.disabled,
|
|
6584
|
-
} }, hAsync("button", { key: '
|
|
6584
|
+
} }, hAsync("button", { key: 'b370c00ac9b58af67594679a7c28915d7ecaf622', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.panelId}-content`, type: "button" }, hAsync("div", { key: '7a2a65a0189cb9fbdbca615091f6e13e3d94b748', class: "expansion-panel__header-content" }, hAsync("slot", { key: 'a20162d047d41cf219fb412973a92c3f16844640', name: "header" })), hAsync("span", { key: '4dd148cb2d4461285fce95de5bf8cbb3df36e7b7', class: {
|
|
6585
6585
|
'expansion-panel__icon': true,
|
|
6586
6586
|
'expansion-panel__icon--open': this.open,
|
|
6587
|
-
} }, "\u25BC")), hAsync("div", { key: '
|
|
6587
|
+
} }, "\u25BC")), hAsync("div", { key: '9d8a260d927387f5dd1e7e3d429f86d31f2689bf', class: "expansion-panel__content", id: `${this.panelId}-content`, role: "region", "aria-labelledby": this.panelId, style: {
|
|
6588
6588
|
maxHeight: this.open ? `${this.contentHeight}px` : '0',
|
|
6589
|
-
} }, hAsync("div", { key: '
|
|
6589
|
+
} }, hAsync("div", { key: '0ac08b6ca30a0fabc7e44f2c8737ee29fccec08a', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, hAsync("slot", { key: '94753fe13b1378a95cac9cb4c940aedbc127c1b0' }))))));
|
|
6590
6590
|
}
|
|
6591
6591
|
get el() { return getElement(this); }
|
|
6592
6592
|
static get style() { return xplorExpansionPanelCss; }
|
|
@@ -6642,7 +6642,7 @@ class XplorExpansionPanels {
|
|
|
6642
6642
|
this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';
|
|
6643
6643
|
}
|
|
6644
6644
|
render() {
|
|
6645
|
-
return (hAsync(Host, { key: '
|
|
6645
|
+
return (hAsync(Host, { key: '70452b8f734ded39c59a984b6a21e010d6512905' }, hAsync("div", { key: '60ba67dc176b9cc141dd12d56e9f3e977eccd859', class: "expansion-panels", "aria-label": "Accordion" }, hAsync("slot", { key: '99b9f4d51d54b8145ea0964638eecf687c2c8432' }))));
|
|
6646
6646
|
}
|
|
6647
6647
|
static get style() { return xplorExpansionPanelsCss; }
|
|
6648
6648
|
static get cmpMeta() { return {
|
|
@@ -6866,9 +6866,9 @@ class XplorInlineCheckbox {
|
|
|
6866
6866
|
'xplor-inline-checkbox--disabled': this.disabled,
|
|
6867
6867
|
'xplor-inline-checkbox--checked': this.checked,
|
|
6868
6868
|
};
|
|
6869
|
-
return (hAsync(Host, { key: '
|
|
6869
|
+
return (hAsync(Host, { key: '34aa08258f2a12280c9709f94883af3e0423175f' }, hAsync("label", { key: 'fd6fe47c8e1da57aba09a4ce7cbc95f7e1947dfe', class: containerClasses }, hAsync("input", { key: '17a4c41cb304ae9826476d22ffa18d9bf5810ed5', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
|
|
6870
6870
|
accentColor: this.color,
|
|
6871
|
-
} }), this.label && hAsync("span", { key: '
|
|
6871
|
+
} }), this.label && hAsync("span", { key: '31afabdf1498e609f06530f1db28a05b2a0ba00b', class: "xplor-inline-checkbox__label" }, this.label), hAsync("slot", { key: '2a32c92c16906869dd82272590dd83ebc1905e71' }))));
|
|
6872
6872
|
}
|
|
6873
6873
|
static get style() { return xplorInlineCheckboxCss; }
|
|
6874
6874
|
static get cmpMeta() { return {
|
|
@@ -7100,7 +7100,7 @@ class XplorInlineDatePicker {
|
|
|
7100
7100
|
render() {
|
|
7101
7101
|
const sidebarDate = this.getSidebarDate();
|
|
7102
7102
|
const dayHeaders = this.startWeekOnSunday ? this.dayNames : this.dayNamesStartMonday;
|
|
7103
|
-
return (hAsync(Host, { key: '
|
|
7103
|
+
return (hAsync(Host, { key: '031460c16f831f29173bbac372ee4de5b0473828' }, hAsync("div", { key: 'b0d890fec94358a882d10a30b229196ee8fc4ea5', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, hAsync("div", { key: '2d5496299d0091d1960fb8507726f15828d68313', class: "xplor-inline-date-picker__sidebar" }, hAsync("div", { key: 'b1645b35975a52e916eb6d18ccda16c3b90519c3', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), hAsync("div", { key: 'b812bbbd4686d06d6c4c602846c870777847c9ca', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), hAsync("div", { key: 'd78744d1b353ddafa302693ac105837f33be736e', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), hAsync("div", { key: '1e0519719bff8801a3f6a7d23c8140b4017656d8', class: "xplor-inline-date-picker__calendar" }, hAsync("div", { key: '1f13bb35c2bbbc921f6f4d0a4dde12e47d010c81', class: "xplor-inline-date-picker__header" }, hAsync("button", { key: 'dd726c543dc74ed85bb3dd128b45e5a74ffde1f6', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), hAsync("div", { key: 'ffb6cf26f1b1a0ef2c75ccb827f38110a6cfbdbe', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), hAsync("button", { key: '69b0c08aae5b24b2814c37be40de942ed2ff8abb', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), hAsync("div", { key: '25ef6b996fdccc121b44f6dafe018aef316ab09d', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (hAsync("div", { class: "xplor-inline-date-picker__weekday" }, day)))), hAsync("div", { key: '6d092079f76ab7c06fcdb07c8d43d0cd9ace8faa', class: "xplor-inline-date-picker__days", role: "grid" }, this.renderCalendarDays())))));
|
|
7104
7104
|
}
|
|
7105
7105
|
get el() { return getElement(this); }
|
|
7106
7106
|
static get style() { return xplorInlineDatePickerCss; }
|
|
@@ -7159,7 +7159,7 @@ class XplorInlineSwitch {
|
|
|
7159
7159
|
'xplor-inline-switch--disabled': this.disabled,
|
|
7160
7160
|
'xplor-inline-switch--checked': this.checked,
|
|
7161
7161
|
};
|
|
7162
|
-
return (hAsync(Host, { key: '
|
|
7162
|
+
return (hAsync(Host, { key: 'ac7b6e824b55bd184f81fd5a36174ee765bd649d' }, hAsync("label", { key: 'e4042ad1236aba72343231013d9d0784593dcf26', class: containerClasses, style: { '--switch-color': this.color } }, hAsync("input", { key: '9e5b96a0367a55785f0c87f74cf9ba0850e227c6', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), hAsync("span", { key: 'c35a3721624cfddd2448d9420a5e8c85a8a51108', class: "xplor-inline-switch__track" }, hAsync("span", { key: '6b9026daf7d5641378d8243ed7b1b7e424db8171', class: "xplor-inline-switch__thumb" })), this.label && hAsync("span", { key: '46423101cb78df16e84b5b79baa9a2a8c88bc91b', class: "xplor-inline-switch__label" }, this.label), hAsync("slot", { key: '0841e31a5d0a9b27c3e8eeafff0218e92a4bf24a' }))));
|
|
7163
7163
|
}
|
|
7164
7164
|
static get style() { return xplorInlineSwitchCss; }
|
|
7165
7165
|
static get cmpMeta() { return {
|
|
@@ -7261,7 +7261,7 @@ class XplorInputFile {
|
|
|
7261
7261
|
};
|
|
7262
7262
|
const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
|
|
7263
7263
|
const additionalCount = this.selectedFiles.length - this.maxChips;
|
|
7264
|
-
return (hAsync(Host, { key: '
|
|
7264
|
+
return (hAsync(Host, { key: '855205ba51f297ec42d8e0a6e6a8632575f14266' }, hAsync("div", { key: 'b3f5e11bae52b44c70d44964128e7a921002dbb1', class: containerClasses }, this.label && (hAsync("label", { key: '8ed4472b4d74227d3f383733d70fdce13724b3c2', class: "xplor-input-file__label", htmlFor: this.inputId }, this.label)), hAsync("div", { key: '3796c38f41eb6cabb61a71341e2172d6afe588da', class: "xplor-input-file__field" }, hAsync("span", { key: '5c252125213d25d051549308974241fa1764e77c', class: "xplor-input-file__icon" }, this.prependInnerIcon), hAsync("div", { key: 'eb7e79be04bd2c7d6c5a38669486fafa79da2886', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (hAsync("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (hAsync("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (hAsync("div", { class: "xplor-input-file__chip", key: file.name }, hAsync("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (hAsync("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (hAsync("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (hAsync("button", { key: '3de68e44d93f65880e9db5d94a285bc36f5a5b27', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), hAsync("input", { key: '2744056445124a7c857f4b56271cd343e50ed9f2', id: this.inputId, ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange, "aria-label": this.label || 'Choose file' })), this.counter && this.selectedFiles.length > 0 && (hAsync("div", { key: '3bd470d17e927b0fbe7776ad67513bb52d91109e', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
|
|
7265
7265
|
}
|
|
7266
7266
|
static get style() { return xplorInputFileCss; }
|
|
7267
7267
|
static get cmpMeta() { return {
|
|
@@ -7339,9 +7339,9 @@ class XplorInputSearch {
|
|
|
7339
7339
|
'xplor-input-search--focused': this.isFocused,
|
|
7340
7340
|
'xplor-input-search--disabled': this.disabled,
|
|
7341
7341
|
};
|
|
7342
|
-
return (hAsync(Host, { key: '
|
|
7342
|
+
return (hAsync(Host, { key: '159334f666a4d38aaeeba61788fc73ae85511f1c' }, hAsync("div", { key: 'de6a7c4d9097bdabc955bd2f85ce9c6f9f35aa19', class: containerClasses }, hAsync("div", { key: 'b14ca74cb368ef4efa67330f5b5fc76b54828c33', class: "xplor-input-search__field" }, hAsync("input", { key: '1f8e4d2842d4f45fa3ca7e2b3de7b697a75abd02', id: this.inputId, type: "search", 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: {
|
|
7343
7343
|
backgroundColor: this.bgColor,
|
|
7344
|
-
}, role: "searchbox", "aria-label": "Search" }), hAsync("slot", { key: '
|
|
7344
|
+
}, role: "searchbox", "aria-label": "Search" }), hAsync("slot", { key: '3b914900d3b529b142ec31d8835ebfa83497b877', name: "append-inner" }, hAsync("button", { key: '83ffab122b79d64e5fadb6ff0abf508847ecb721', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button", "aria-label": "Search" }, hAsync("svg", { key: 'b0d8e393c391b3ca214bb1cd8b1673eb3b634a88', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, hAsync("path", { key: '78d38f7b9e578cf8519edcc7eea19ffa294aba74', 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" }))))))));
|
|
7345
7345
|
}
|
|
7346
7346
|
static get style() { return xplorInputSearchCss; }
|
|
7347
7347
|
static get cmpMeta() { return {
|
|
@@ -7677,10 +7677,10 @@ class XplorInputSend {
|
|
|
7677
7677
|
this.internalValue = this.value;
|
|
7678
7678
|
}
|
|
7679
7679
|
render() {
|
|
7680
|
-
return (hAsync(Host, { key: '
|
|
7680
|
+
return (hAsync(Host, { key: 'bcce41da602a265f2ee48f278e1f173dcb7a478c' }, hAsync("div", { key: '5db92c3276ea1e021fa872d8f7b34e0c20b6d6ea', class: {
|
|
7681
7681
|
'input-send': true,
|
|
7682
7682
|
'input-send--disabled': this.disabled,
|
|
7683
|
-
} }, hAsync("input", { key: '
|
|
7683
|
+
} }, hAsync("input", { key: '9395e4d6f8190e3010fd9c0323a4a4c51643c998', 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, "aria-label": this.placeholder || 'Type a message' }), hAsync("xplor-button", { key: 'f4d9784400fd7c31c2766af49fe3971216f5828f', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
|
|
7684
7684
|
}
|
|
7685
7685
|
static get style() { return xplorInputSendCss; }
|
|
7686
7686
|
static get cmpMeta() { return {
|
|
@@ -7701,7 +7701,7 @@ class XplorInputSend {
|
|
|
7701
7701
|
}; }
|
|
7702
7702
|
}
|
|
7703
7703
|
|
|
7704
|
-
const xplorInputTextCss = "@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-text {\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-text {\n width: 600px !important;\n }\n}\nh1.sc-xplor-input-text {\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-text {\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-text {\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-text {\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-text, ul.sc-xplor-input-text {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-input-text li.sc-xplor-input-text, ul.sc-xplor-input-text li.sc-xplor-input-text {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text {\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-text {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text {\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-text {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text .mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\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-text .mdc-notched-outline__notch.sc-xplor-input-text {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\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-text {\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-text: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-text {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-h {\n display: block;\n}\n\n.xplor-input-text.sc-xplor-input-text {\n display: flex;\n flex-direction: column;\n
|
|
7704
|
+
const xplorInputTextCss = "@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-text {\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-text {\n width: 600px !important;\n }\n}\nh1.sc-xplor-input-text {\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-text {\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-text {\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-text {\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-text, ul.sc-xplor-input-text {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-input-text li.sc-xplor-input-text, ul.sc-xplor-input-text li.sc-xplor-input-text {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text, ul.mdc-list.sc-xplor-input-text li.mdc-list-item.sc-xplor-input-text {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text {\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-text {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text {\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-text {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text .mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\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-text .mdc-notched-outline__notch.sc-xplor-input-text {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text .mdc-notched-outline.sc-xplor-input-text .mdc-notched-outline__notch.sc-xplor-input-text {\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-text {\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-text: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-text {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-h {\n display: block;\n}\n\n.xplor-input-text.sc-xplor-input-text {\n display: flex;\n flex-direction: column;\n}\n.xplor-input-text__required.sc-xplor-input-text {\n color: #d32f2f;\n margin-left: 0.25rem;\n}\n.xplor-input-text__field.sc-xplor-input-text {\n position: relative;\n display: flex;\n align-items: center;\n}\n.xplor-input-text__label.sc-xplor-input-text {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1rem;\n color: rgba(0, 0, 0, 0.6);\n pointer-events: none;\n padding: 0 0.25rem;\n transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n max-width: calc(100% - 2rem);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.xplor-input-text__input.sc-xplor-input-text {\n width: 100%;\n padding: 0.875rem 1rem;\n font-size: 1rem;\n font-family: inherit;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n outline: none;\n transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 3rem;\n}\n.xplor-input-text__input.sc-xplor-input-text::placeholder {\n color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text__input.sc-xplor-input-text:hover:not(:disabled) {\n border-color: rgba(0, 0, 0, 0.87);\n}\n.xplor-input-text__input.sc-xplor-input-text:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.38);\n cursor: not-allowed;\n}\n.xplor-input-text__input.sc-xplor-input-text:read-only {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text--floating.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {\n top: 0;\n transform: translateY(-50%);\n font-size: 0.75rem;\n}\n.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {\n color: #008480;\n}\n.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {\n border-color: #d32f2f;\n}\n.xplor-input-text--error.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {\n color: #d32f2f;\n}\n.xplor-input-text--error.xplor-input-text--focused.sc-xplor-input-text .xplor-input-text__input.sc-xplor-input-text {\n border-color: #d32f2f;\n border-width: 2px;\n}\n.xplor-input-text--disabled.sc-xplor-input-text .xplor-input-text__label.sc-xplor-input-text {\n color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text__details.sc-xplor-input-text {\n min-height: 1.25rem;\n padding: 0 1rem;\n font-size: 0.75rem;\n}\n.xplor-input-text__error-message.sc-xplor-input-text {\n color: #d32f2f;\n}\n.xplor-input-text__helper-text.sc-xplor-input-text {\n color: rgba(0, 0, 0, 0.6);\n}";
|
|
7705
7705
|
|
|
7706
7706
|
let inputTextIdCounter = 0;
|
|
7707
7707
|
class XplorInputText {
|
|
@@ -7783,16 +7783,19 @@ class XplorInputText {
|
|
|
7783
7783
|
};
|
|
7784
7784
|
}
|
|
7785
7785
|
render() {
|
|
7786
|
+
const hasValue = this.value != null && this.value !== '';
|
|
7787
|
+
const isFloating = this.isFocused || hasValue;
|
|
7786
7788
|
const containerClasses = {
|
|
7787
7789
|
'xplor-input-text': true,
|
|
7788
7790
|
'xplor-input-text--focused': this.isFocused,
|
|
7791
|
+
'xplor-input-text--floating': isFloating,
|
|
7789
7792
|
'xplor-input-text--disabled': this.disabled,
|
|
7790
7793
|
'xplor-input-text--error': !!this.error,
|
|
7791
7794
|
};
|
|
7792
7795
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
7793
|
-
return (hAsync(Host, { key: '
|
|
7796
|
+
return (hAsync(Host, { key: 'ad1ea36a553bd5e2f5f20c22d890bfad0c26acb3' }, hAsync("div", { key: 'e4c0a0a4c63b1a5c8396004e79274b67ecf739eb', class: containerClasses }, hAsync("div", { key: 'fae83f51d4cce2ff16c4a62c18ca824c6fa3dca8', class: "xplor-input-text__field" }, hAsync("input", { key: '333a51d2b0be3015c8ea73f968c15af7932c60b5', id: this.inputId, type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: isFloating ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
7794
7797
|
backgroundColor: this.bgColor,
|
|
7795
|
-
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), hAsync("slot", { key: '
|
|
7798
|
+
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), this.label && (hAsync("label", { key: '0b09ac4c387ebbab0ff3f347af7f9d9f3c4eecee', class: "xplor-input-text__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && hAsync("span", { key: 'df37f253d33b836f4c3d314c91dcd175afaa78ea', class: "xplor-input-text__required" }, "*"))), hAsync("slot", { key: '3a45420f690eb79f22788a26e2b3dcb3b72c4a55', name: "append-inner" })), showDetails && (hAsync("div", { key: '4b9ab78e1362a44e9d9f0297424b8069a3f69840', class: "xplor-input-text__details" }, this.error && hAsync("div", { key: 'eb69eade9944edb5f088b279603d6c98800122a2', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && hAsync("div", { key: '433ad514edd52b3eb544fd1f5ec7e0ab96fae3b1', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), hAsync("slot", { key: '05881a3abae9226639eb0ffe646f9bd5cd92343c', name: "append" }))));
|
|
7796
7799
|
}
|
|
7797
7800
|
static get style() { return xplorInputTextCss; }
|
|
7798
7801
|
static get cmpMeta() { return {
|
|
@@ -7819,7 +7822,7 @@ class XplorInputText {
|
|
|
7819
7822
|
}; }
|
|
7820
7823
|
}
|
|
7821
7824
|
|
|
7822
|
-
const xplorInputTextAreaCss = "@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-text-area {\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-text-area {\n width: 600px !important;\n }\n}\nh1.sc-xplor-input-text-area {\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-text-area {\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-text-area {\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-text-area {\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-text-area, ul.sc-xplor-input-text-area {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-input-text-area li.sc-xplor-input-text-area, ul.sc-xplor-input-text-area li.sc-xplor-input-text-area {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-input-text-area, ul.mdc-list.sc-xplor-input-text-area {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area, ul.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text-area {\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-text-area {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text-area {\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-text-area {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text-area .mdc-text-field--outlined.sc-xplor-input-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\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-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text-area .mdc-notched-outline.sc-xplor-input-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\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-text-area {\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-text-area: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-text-area {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-area-h {\n display: block;\n}\n\n.xplor-input-text-area.sc-xplor-input-text-area {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n}\n.xplor-input-text-area__label.sc-xplor-input-text-area {\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n margin-bottom: 0.25rem;\n}\n.xplor-input-text-area__required.sc-xplor-input-text-area {\n color: #d32f2f;\n margin-left: 0.25rem;\n}\n.xplor-input-text-area__field.sc-xplor-input-text-area {\n position: relative;\n display: flex;\n align-items: flex-start;\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area {\n width: 100%;\n padding: 0.875rem 1rem;\n font-size: 1rem;\n font-family: inherit;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n outline: none;\n resize: vertical;\n min-height: 56px;\n transition: border-color 0.2s ease;\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area::placeholder {\n color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:hover:not(:disabled) {\n border-color: rgba(0, 0, 0, 0.6);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:focus {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.38);\n cursor: not-allowed;\n resize: none;\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:read-only {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area {\n position: absolute;\n right: 0.75rem;\n top: 0.75rem;\n width: 1.5rem;\n height: 1.5rem;\n border: none;\n background: transparent;\n color: rgba(0, 0, 0, 0.54);\n cursor: pointer;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area:active {\n background-color: rgba(0, 0, 0, 0.08);\n}\n.xplor-input-text-area--error.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {\n border-color: #d32f2f;\n}\n.xplor-input-text-area__details.sc-xplor-input-text-area {\n min-height: 1.25rem;\n padding: 0 1rem;\n font-size: 0.75rem;\n}\n.xplor-input-text-area__error-message.sc-xplor-input-text-area {\n color: #d32f2f;\n}\n.xplor-input-text-area__helper-text.sc-xplor-input-text-area {\n color: rgba(0, 0, 0, 0.6);\n}";
|
|
7825
|
+
const xplorInputTextAreaCss = "@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-text-area {\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-text-area {\n width: 600px !important;\n }\n}\nh1.sc-xplor-input-text-area {\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-text-area {\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-text-area {\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-text-area {\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-text-area, ul.sc-xplor-input-text-area {\n list-style: none;\n margin: 1rem;\n padding: 0;\n}\nol.sc-xplor-input-text-area li.sc-xplor-input-text-area, ul.sc-xplor-input-text-area li.sc-xplor-input-text-area {\n margin: 1rem;\n padding: 0;\n}\nol.mdc-list.sc-xplor-input-text-area, ul.mdc-list.sc-xplor-input-text-area {\n list-style-type: none;\n list-style: none;\n}\nol.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area, ul.mdc-list.sc-xplor-input-text-area li.mdc-list-item.sc-xplor-input-text-area {\n list-style-type: none;\n list-style: none !important;\n}\n\n.orange-label.sc-xplor-input-text-area {\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-text-area {\n background-color: #fefcfb;\n}\n\n#spinnerLoader.sc-xplor-input-text-area {\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-text-area {\n background-color: white;\n}\n\n.mdc-ripple-upgraded.sc-xplor-input-text-area .mdc-text-field--outlined.sc-xplor-input-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\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-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\n border: 0px solid transparent !important;\n border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined.sc-xplor-input-text-area .mdc-notched-outline.sc-xplor-input-text-area .mdc-notched-outline__notch.sc-xplor-input-text-area {\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-text-area {\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-text-area: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-text-area {\n background: var(--Cyan-700-Secondary, #00776b);\n}\n\n.sc-xplor-input-text-area-h {\n display: block;\n}\n\n.xplor-input-text-area.sc-xplor-input-text-area {\n display: flex;\n flex-direction: column;\n}\n.xplor-input-text-area__required.sc-xplor-input-text-area {\n color: #d32f2f;\n margin-left: 0.25rem;\n}\n.xplor-input-text-area__field.sc-xplor-input-text-area {\n position: relative;\n display: flex;\n align-items: flex-start;\n}\n.xplor-input-text-area__label.sc-xplor-input-text-area {\n position: absolute;\n left: 1rem;\n top: 0.875rem;\n font-size: 1rem;\n color: rgba(0, 0, 0, 0.6);\n pointer-events: none;\n padding: 0 0.25rem;\n transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n max-width: calc(100% - 2rem);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area {\n width: 100%;\n padding: 0.875rem 1rem;\n font-size: 1rem;\n font-family: inherit;\n border: 1px solid rgba(0, 0, 0, 0.23);\n border-radius: 1rem;\n outline: none;\n resize: vertical;\n min-height: 56px;\n transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area::placeholder {\n color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:hover:not(:disabled) {\n border-color: rgba(0, 0, 0, 0.87);\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:disabled {\n background-color: rgba(0, 0, 0, 0.04);\n color: rgba(0, 0, 0, 0.38);\n cursor: not-allowed;\n resize: none;\n}\n.xplor-input-text-area__input.sc-xplor-input-text-area:read-only {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area {\n position: absolute;\n right: 0.75rem;\n top: 0.75rem;\n width: 1.5rem;\n height: 1.5rem;\n border: none;\n background: transparent;\n color: rgba(0, 0, 0, 0.54);\n cursor: pointer;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area:hover {\n background-color: rgba(0, 0, 0, 0.04);\n}\n.xplor-input-text-area__clear.sc-xplor-input-text-area:active {\n background-color: rgba(0, 0, 0, 0.08);\n}\n.xplor-input-text-area--floating.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {\n top: 0;\n transform: translateY(-50%);\n font-size: 0.75rem;\n}\n.xplor-input-text-area--focused.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {\n border-color: #008480;\n border-width: 2px;\n padding: calc(0.875rem - 1px) calc(1rem - 1px);\n}\n.xplor-input-text-area--focused.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {\n color: #008480;\n}\n.xplor-input-text-area--error.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {\n border-color: #d32f2f;\n}\n.xplor-input-text-area--error.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {\n color: #d32f2f;\n}\n.xplor-input-text-area--error.xplor-input-text-area--focused.sc-xplor-input-text-area .xplor-input-text-area__input.sc-xplor-input-text-area {\n border-color: #d32f2f;\n border-width: 2px;\n}\n.xplor-input-text-area--disabled.sc-xplor-input-text-area .xplor-input-text-area__label.sc-xplor-input-text-area {\n color: rgba(0, 0, 0, 0.38);\n}\n.xplor-input-text-area__details.sc-xplor-input-text-area {\n min-height: 1.25rem;\n padding: 0 1rem;\n font-size: 0.75rem;\n}\n.xplor-input-text-area__error-message.sc-xplor-input-text-area {\n color: #d32f2f;\n}\n.xplor-input-text-area__helper-text.sc-xplor-input-text-area {\n color: rgba(0, 0, 0, 0.6);\n}";
|
|
7823
7826
|
|
|
7824
7827
|
let inputTextAreaIdCounter = 0;
|
|
7825
7828
|
class XplorInputTextArea {
|
|
@@ -7901,17 +7904,20 @@ class XplorInputTextArea {
|
|
|
7901
7904
|
};
|
|
7902
7905
|
}
|
|
7903
7906
|
render() {
|
|
7907
|
+
const hasValue = this.value != null && this.value !== '';
|
|
7908
|
+
const isFloating = this.isFocused || hasValue;
|
|
7904
7909
|
const containerClasses = {
|
|
7905
7910
|
'xplor-input-text-area': true,
|
|
7906
7911
|
'xplor-input-text-area--focused': this.isFocused,
|
|
7912
|
+
'xplor-input-text-area--floating': isFloating,
|
|
7907
7913
|
'xplor-input-text-area--disabled': this.disabled,
|
|
7908
7914
|
'xplor-input-text-area--error': !!this.error,
|
|
7909
7915
|
};
|
|
7910
7916
|
const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;
|
|
7911
7917
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
7912
|
-
return (hAsync(Host, { key: '
|
|
7918
|
+
return (hAsync(Host, { key: '03e7821b3945d7d8e00a5ce1551a6b26d21001fa' }, hAsync("div", { key: '36f0e99d90b1adb5cb38a8ca8d987511569b39e6', class: containerClasses }, hAsync("div", { key: '7f8880ab17fdfd446f7bf08dc3db46584cb5419e', class: "xplor-input-text-area__field" }, hAsync("textarea", { key: 'fd8941771e1378818d9b668315013fa66ed49c78', id: this.inputId, class: "xplor-input-text-area__input", value: this.value, placeholder: isFloating ? 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: {
|
|
7913
7919
|
backgroundColor: this.bgColor,
|
|
7914
|
-
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), showClearButton && (hAsync("button", { key: '
|
|
7920
|
+
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), this.label && (hAsync("label", { key: '6df4ae89eff4ff09d6b2e09a9c002c60d1ca8b27', class: "xplor-input-text-area__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && hAsync("span", { key: 'd5e01ae02bdd95ba101f4e335c01557d0c49247b', class: "xplor-input-text-area__required" }, "*"))), showClearButton && (hAsync("button", { key: 'e38945bc2f3e46d0583d2c28e0b03d659eb4887a', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (hAsync("div", { key: 'e9deb3dfb6d8fbe9e677cf726c21bcee9b7cf5e5', class: "xplor-input-text-area__details" }, this.error && hAsync("div", { key: 'cdb4c09dd0e9b2e5f71e10b01b7662d6cbfe5fe9', class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && hAsync("div", { key: 'baa31eb60d09957f394f839f86bca1d1d90e9d9c', class: "xplor-input-text-area__helper-text", id: this.helperId }, this.helperText))))));
|
|
7915
7921
|
}
|
|
7916
7922
|
static get style() { return xplorInputTextAreaCss; }
|
|
7917
7923
|
static get cmpMeta() { return {
|
|
@@ -7993,9 +7999,9 @@ class XplorInputTextSecondary {
|
|
|
7993
7999
|
'input-secondary--dirty': this.isDirty,
|
|
7994
8000
|
};
|
|
7995
8001
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
7996
|
-
return (hAsync(Host, { key: '
|
|
8002
|
+
return (hAsync(Host, { key: '805c82be35d46be51ebc3e29e78345ae81bf1368' }, hAsync("div", { key: 'df8e81a6553efbd0dade36a7d5871e8d1d789213', class: containerClasses }, this.label && (hAsync("label", { key: '289689dbe52f2ae19af90664ae99240eee499d61', class: "input-secondary__label", htmlFor: this.inputId }, this.label, this.required && hAsync("span", { key: '7e711647c5cdc04033f2f774eee8d810835685ae', class: "input-secondary__required" }, "*"))), hAsync("div", { key: '6cab22daaade60aa7e5130afda2f2692c1ae73b1', class: "input-secondary__field" }, hAsync("input", { key: 'eb9cc2994c5f68d15683c4584ac270bcb5c20664', id: this.inputId, 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: {
|
|
7997
8003
|
backgroundColor: this.bgColor,
|
|
7998
|
-
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), hAsync("slot", { key: '
|
|
8004
|
+
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), hAsync("slot", { key: 'e51cb67efac2e7037c2a903d78164348ce56998d', name: "append-inner" })), showDetails && (hAsync("div", { key: '5c490ba173da365e8b9393ffee34a4259e9b3dbd', class: "input-secondary__details" }, this.error && hAsync("div", { key: '4415c1feb83542ef0f0202fc48dfb13effc9d4c4', class: "input-secondary__error-message", id: this.errorId }, this.error), !this.error && this.helperText && hAsync("div", { key: 'fb7e6c208fef2ea8139325438c19612538e1d845', class: "input-secondary__helper-text", id: this.helperId }, this.helperText))), hAsync("slot", { key: 'e2479a9561cb0bf63f1115b2fc0b1d768bc705ed', name: "append" }))));
|
|
7999
8005
|
}
|
|
8000
8006
|
static get style() { return xplorInputTextSecondaryCss; }
|
|
8001
8007
|
static get cmpMeta() { return {
|
|
@@ -8061,7 +8067,7 @@ class XplorInputTitle {
|
|
|
8061
8067
|
};
|
|
8062
8068
|
}
|
|
8063
8069
|
render() {
|
|
8064
|
-
return (hAsync(Host, { key: '
|
|
8070
|
+
return (hAsync(Host, { key: 'ef2d69909fe74019c12da557fa136e0389336e05' }, hAsync("input", { key: 'dfdc0a0072ec511a1edfc68a6fad9e4169064f8f', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, "aria-label": this.ariaLabel, onInput: this.handleInput, onChange: this.handleChange })));
|
|
8065
8071
|
}
|
|
8066
8072
|
static get style() { return xplorInputTitleCss; }
|
|
8067
8073
|
static get cmpMeta() { return {
|
|
@@ -8089,7 +8095,7 @@ class XplorLinks {
|
|
|
8089
8095
|
this.imageAlt = '';
|
|
8090
8096
|
}
|
|
8091
8097
|
render() {
|
|
8092
|
-
return (hAsync(Host, { key: '
|
|
8098
|
+
return (hAsync(Host, { key: '1d0963855eaf79dacbae5d6a5b86cc6b6ae84632', class: `theme-${this.brand}` }, hAsync("a", { key: 'd95d148b5745909e17a51e7d44e6412956a4844b', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), hAsync("div", { key: '05c27ca582f5d298e00a46240700088f3ef1c250', class: "bg-black p-2 rounded-md flex justify-center" }, hAsync("h1", { key: '9f4180eef39b9006277a72534d385ce3b742e40c', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), hAsync("div", { key: 'fe5ffb8f988e0df18e53a04873d6dfe63e7ca26e', class: "bg-white py-24 sm:py-32" }, hAsync("div", { key: '09bd7b00cd955c991e662f3f71addac329d4b189', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, hAsync("div", { key: '36f6bd91ab4db26df78b21e533c2f584ba656d26', class: "max-w-xl" }, hAsync("h2", { key: '165380866054da7add2a455b15370f4cd8a7ad65', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), hAsync("p", { key: '726b4e94c27bafe707c6a48f6604a28cb15d1c47', 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.")), hAsync("ul", { key: 'a884c969151b0b935d40e5a98d9418d5a8bcc415', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, hAsync("li", { key: 'c5b4adca7d9a2038462dcd2958b95b5a7c661314' }, hAsync("div", { key: '4a013658a1982d345000bbce12ace33b5e6bd2d8', class: "flex items-center gap-x-6" }, hAsync("img", { key: 'c93cc4184e758ca5d1b9942bbbec8a5afb219732', 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: this.imageAlt }), hAsync("div", { key: 'a05b6b18dbf663af70b0c7840d034973b2cc15df' }, hAsync("h3", { key: '7d6ff8ca21af23e69497e067f346b3b0b61de42c', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), hAsync("p", { key: '33528098f6f09a748251f49a8e0b377992f2c4e1', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
|
|
8093
8099
|
}
|
|
8094
8100
|
static get style() { return xplorLinksCss; }
|
|
8095
8101
|
static get cmpMeta() { return {
|
|
@@ -8294,7 +8300,7 @@ class XplorModalPersistent {
|
|
|
8294
8300
|
this.loading = false;
|
|
8295
8301
|
}
|
|
8296
8302
|
render() {
|
|
8297
|
-
return (hAsync(Host, { key: '
|
|
8303
|
+
return (hAsync(Host, { key: '884f843600d455676714efef74a7102467cf7fe5' }, hAsync("xplor-modal", { key: 'c3886708722829887adb5213f4eb98470ad16132', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, hAsync("slot", { key: '0f6b7f60e3f9354994b00f15ee7056c2b5f4a454', name: "title", slot: "title" }), hAsync("slot", { key: '03a625acfe4a23677d1e532d56b0797c9d0f6457', name: "subtitle", slot: "subtitle" }), hAsync("slot", { key: '57d9c7c4897299b0bb84de291e202d6c00d3914f', name: "body", slot: "body" }), hAsync("slot", { key: '9290ae4fede095d8e11f32396029e59da7212e16', name: "actions", slot: "actions" }))));
|
|
8298
8304
|
}
|
|
8299
8305
|
static get cmpMeta() { return {
|
|
8300
8306
|
"$flags$": 4,
|
|
@@ -8474,10 +8480,10 @@ class XplorRadioBtn {
|
|
|
8474
8480
|
return all.filter(radio => radio !== this.el);
|
|
8475
8481
|
}
|
|
8476
8482
|
render() {
|
|
8477
|
-
return (hAsync("label", { key: '
|
|
8483
|
+
return (hAsync("label", { key: '305a0c3d610686e8c11180c15db8d1ce4ca98c60', class: {
|
|
8478
8484
|
'radio-wrapper': true,
|
|
8479
8485
|
'radio-wrapper--disabled': this.disabled,
|
|
8480
|
-
} }, hAsync("div", { key: '
|
|
8486
|
+
} }, hAsync("div", { key: 'ed0dd418bf295430c8cf1edd4b43519b3cf04018', class: this.getRadioClass(), onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onMouseDown: () => (this.isPressed = true), onMouseUp: () => (this.isPressed = false), onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "radio", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label }, hAsync("div", { key: 'ae6dd96a65601ba50d3e6e919b95983d3e47e8e5', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (hAsync("span", { key: 'b5647a8ad15d03187ba2f8c670846e9025ffba7e', class: "label" }, this.label))));
|
|
8481
8487
|
}
|
|
8482
8488
|
get el() { return getElement(this); }
|
|
8483
8489
|
static get watchers() { return {
|
|
@@ -8516,11 +8522,11 @@ class XplorSectionCard {
|
|
|
8516
8522
|
this.padding = '1.5rem';
|
|
8517
8523
|
}
|
|
8518
8524
|
render() {
|
|
8519
|
-
return (hAsync(Host, { key: '
|
|
8525
|
+
return (hAsync(Host, { key: 'f0bb8af2883a5441f3e325c4267ad3cec5716c9a' }, hAsync("div", { key: 'a7611e3f28ca8d84782146adb2b906c789f4a338', class: {
|
|
8520
8526
|
'section-card': true,
|
|
8521
8527
|
'section-card--outlined': this.outlined,
|
|
8522
8528
|
'section-card--rounded': this.rounded,
|
|
8523
|
-
}, style: { padding: this.padding } }, hAsync("slot", { key: '
|
|
8529
|
+
}, style: { padding: this.padding } }, hAsync("slot", { key: 'e1a7153c70bf52f1d539dfc4f0b95d571aaa97da', name: "title" }), hAsync("slot", { key: '90d1df5bf54fc04271e0f762a6f6df09f9a5cc32', name: "subtitle" }), hAsync("div", { key: '81c011fa1950cee54769b7940b92722d3dcdd4d5', class: "section-card__body" }, hAsync("slot", { key: '5c8bba79d0900c8db7feb677ff1a6dc379bcad65', name: "body" }), hAsync("slot", { key: '75faafcde4f79d7c7df0be49986420f147ccfde5' })), hAsync("div", { key: 'f1f14d4cacef1580309321953d95d6b64825332e', class: "section-card__actions" }, hAsync("slot", { key: '8e0520be390119389ac64f7fddd86c9e81ccd47c', name: "actions" })))));
|
|
8524
8530
|
}
|
|
8525
8531
|
static get style() { return xplorSectionCardCss; }
|
|
8526
8532
|
static get cmpMeta() { return {
|
|
@@ -8550,11 +8556,11 @@ class XplorSectionHeading {
|
|
|
8550
8556
|
}
|
|
8551
8557
|
render() {
|
|
8552
8558
|
const HeadingTag = `h${this.level}`;
|
|
8553
|
-
return (hAsync(Host, { key: '
|
|
8559
|
+
return (hAsync(Host, { key: '8d792fa1f7111c3de496e616c6c0d59a9f3bff0d' }, hAsync(HeadingTag, { key: '56cc9b857b645d2b6de1d9b736b77c47011bc0aa', class: {
|
|
8554
8560
|
'section-heading': true,
|
|
8555
8561
|
'section-heading--small': this.size === 'small',
|
|
8556
8562
|
'section-heading--large': this.size === 'large',
|
|
8557
|
-
} }, hAsync("slot", { key: '
|
|
8563
|
+
} }, hAsync("slot", { key: 'c5820f563cbb67872c43018493553d9f1fe703f3' }, this.text))));
|
|
8558
8564
|
}
|
|
8559
8565
|
static get style() { return xplorSectionHeadingCss; }
|
|
8560
8566
|
static get cmpMeta() { return {
|
|
@@ -8754,11 +8760,11 @@ class XplorTable {
|
|
|
8754
8760
|
if (this.hasScrolled)
|
|
8755
8761
|
className += ' xpl-table--has-scrolled';
|
|
8756
8762
|
const paginatedData = this.getPaginatedData();
|
|
8757
|
-
return (hAsync(Host, { key: '
|
|
8763
|
+
return (hAsync(Host, { key: '34a091e309fac05f19d2e895d6eaf9bcd6bd52b2', class: "xplor-table" }, hAsync("div", { key: '63f1baa12c4a579a94e88b6afa955cedc55ebcbc', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, hAsync("div", { key: 'a51f74e5a00e6286dc69d1cf63cbedbc52cf2323', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
|
|
8758
8764
|
this.container = el;
|
|
8759
|
-
} }, hAsync("div", { key: '
|
|
8765
|
+
} }, hAsync("div", { key: 'dd162973f151d437264803738951403fd118a325', class: "mb-6" }, hAsync("h1", { key: 'cd20f65851fe73c7e22eca544c19460d1e8cfa41', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), hAsync("div", { key: '4ccbb826c4d36a04d7abb229cb30b33b721302aa', class: "flex flex-wrap items-center gap-4 mb-6" }, hAsync("div", { key: '2ec4358cab245173935bfd10750d426a95327649', class: "flex items-center gap-2" }, hAsync("label", { key: '8a42d1fc73b38675efbb4d489ef52f490d355155', class: "text-sm text-gray-600 font-medium" }, "Date Range"), hAsync("select", { key: 'bf158ae8de2d8350cb4a17882e876374f56d1191', 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",
|
|
8760
8766
|
// value={this.selectedDateRange}
|
|
8761
|
-
onInput: this.handleDateRangeChange }, hAsync("option", { key: '
|
|
8767
|
+
onInput: this.handleDateRangeChange }, hAsync("option", { key: '8d30107e14b3ae11283eab5c0dc5bb5e1625f206', value: "All" }, "All"), hAsync("option", { key: 'e6ff573c014679027844de6fa074987c2af2747b', value: "Today" }, "Today"), hAsync("option", { key: 'b2442d598fd4901bee4864d5eafb73fc36defed6', value: "This Week" }, "This Week"), hAsync("option", { key: 'b8d65f2882d81ba062e005c19d8969df2ddf541b', value: "This Month" }, "This Month"), hAsync("option", { key: 'e64697e70ba6daa1cedb3d4b35318cd473ad55ff', value: "Custom" }, "Custom Range")), hAsync("button", { key: '5aca4cd7f522efa1fb6669a281c2f124a5f3c08a', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, hAsync("svg", { key: 'c64b7b245059c5c93abb2f8d1fba598d59d2697e', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: 'd7f81604c3df7684dd33105f369ece2f25002426', "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" })))), hAsync("button", { key: '77e48fda9b868095074045507842dcb32a7ac3fb', 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"), hAsync("button", { key: '7f7a214ecb2e66828438dce866e134fe75910ebb', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, hAsync("svg", { key: 'af830e634d4115487fb3e5ebc4ab085a864990ff', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '396c756b2fbe057f019872573f0fb44a6ef882f2', "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"))), hAsync("table", { key: '984119ef9ca031d2cf21f40f888653e508157176', class: `w-full ${className}` }, this.columns && (hAsync("thead", { key: 'a3ffca2c981bfbc8323d537507c2b416f4f39306' }, this.columns.map((column, i) => {
|
|
8762
8768
|
const iconType = getIconType(this.sortTypeArray[i]);
|
|
8763
8769
|
const isColumnSortable = !!(this.isSortable &&
|
|
8764
8770
|
this.sortableColumns[i]);
|
|
@@ -8796,11 +8802,11 @@ class XplorTable {
|
|
|
8796
8802
|
// id="__xpl-icon-sort"
|
|
8797
8803
|
// ></xpl-icon>
|
|
8798
8804
|
)))));
|
|
8799
|
-
}))), hAsync("tbody", { key: '
|
|
8805
|
+
}))), hAsync("tbody", { key: 'b1794bf469839753599bca48a72153c8f53544e6' }, paginatedData.map((row, rowNum) => (hAsync("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (hAsync("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (hAsync("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, hAsync("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
|
|
8800
8806
|
.length > 0
|
|
8801
8807
|
? this
|
|
8802
8808
|
.selectedValues[rowNum]
|
|
8803
|
-
: `xpl-table-checkbox-${rowNum}` }), hAsync("div", { innerHTML: cell }))) : (hAsync("div", { innerHTML: cell })))))))))), hAsync("div", { key: '
|
|
8809
|
+
: `xpl-table-checkbox-${rowNum}` }), hAsync("div", { innerHTML: cell }))) : (hAsync("div", { innerHTML: cell })))))))))), hAsync("div", { key: '130cceed1d88934092f1a3a92a67d984b8bd465b', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, hAsync("div", { key: '616ce36b0aa536f161eb9aa30b41acb18153208b', class: "flex items-center gap-2" }, hAsync("button", { key: '10977dacc1cf364504c1cff031beb62a423f48be', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, hAsync("svg", { key: '3e7fe6e2411178be935d7c210eb5c6cf081a2d54', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '167a9ccaac38d293a86ff3983e5d0d6a222c91b4', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), hAsync("button", { key: '9ee908d6b52468a365c7173e3e3367b7b1945061', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, hAsync("svg", { key: '286915694ecc0b480bf25e15baf3eb6423b68919', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: 'f6983747c83e973f777bcadb9045c53da5d10674', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), hAsync("span", { key: '1c619cd20140f8d73d461b4f2b661116b0059353', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), hAsync("div", { key: '1201039d99ac6d48f1075b36a602333dfe6d54e5', class: "flex items-center gap-2" }, hAsync("button", { key: '828195335b1064d85f625f476b63da21ff37af71', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, hAsync("svg", { key: '7c2770e6e31871e8ded8b3831695f1f39bd5b7ec', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '2f260f911a89596b76826930f2d4c5f25aab180a', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), hAsync("button", { key: 'aed318f01b51e8f78ab7b2d10543b00154970b0e', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, hAsync("svg", { key: '70e04a5ce5106d5c1b3c3f653d156608c03dc0f8', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, hAsync("path", { key: '25d7d949b2aa75ce8d268d8a472becd75b9eb3cb', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
|
|
8804
8810
|
}
|
|
8805
8811
|
get el() { return getElement(this); }
|
|
8806
8812
|
static get watchers() { return {
|
|
@@ -8841,11 +8847,11 @@ class XplorTextBubble {
|
|
|
8841
8847
|
this.color = 'orange';
|
|
8842
8848
|
}
|
|
8843
8849
|
render() {
|
|
8844
|
-
return (hAsync(Host, { key: '
|
|
8850
|
+
return (hAsync(Host, { key: '935620a5fe11efe0b04bb35b1f2a61782f628fef' }, hAsync("div", { key: '54efffa810a98239e535863a74bbcaa13dddb01e', class: {
|
|
8845
8851
|
'text-bubble': true,
|
|
8846
8852
|
'text-bubble--green': this.color === 'green',
|
|
8847
8853
|
'text-bubble--orange': this.color === 'orange',
|
|
8848
|
-
} }, hAsync("slot", { key: '
|
|
8854
|
+
} }, hAsync("slot", { key: 'c44912756dc8798305a68fa9ef2496610e0b73dd' }))));
|
|
8849
8855
|
}
|
|
8850
8856
|
static get style() { return xplorTextBubbleCss; }
|
|
8851
8857
|
static get cmpMeta() { return {
|
|
@@ -8992,10 +8998,10 @@ class XplorTextField {
|
|
|
8992
8998
|
}
|
|
8993
8999
|
render() {
|
|
8994
9000
|
const labelFloating = this.isFocused || this.hasValue;
|
|
8995
|
-
return (hAsync(Host, { key: '
|
|
9001
|
+
return (hAsync(Host, { key: '7f96fd0fd49e24f55f29c839ce949ed4852ccd09' }, hAsync("div", { key: 'a92aff2394b383f4e2189d239928b09e83df69c9', class: this.computedClasses }, hAsync("div", { key: '80a9df3c874ba25b6d9072b01f113bd3615291de', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, hAsync("div", { key: '42de5abcd54384fd509d9788eb9534a1de2cc65a', class: "xplor-text-field__input-wrapper" }, this.label && (hAsync("label", { key: '4668b75b97b1e95c3817924bd8d3a9c1355ba7ab', class: {
|
|
8996
9002
|
'xplor-text-field__label': true,
|
|
8997
9003
|
'xplor-text-field__label--floating': labelFloating,
|
|
8998
|
-
} }, hAsync("slot", { key: '
|
|
9004
|
+
} }, hAsync("slot", { key: 'c6f596aa30b8d263072a43f133bd2f049c22ed36', name: "label" }, this.label), this.required && hAsync("span", { key: '4efc5c1726c5e0841502bb85726eb638391c60d1', class: "xplor-text-field__required" }, "*"))), hAsync("input", { key: '2f226f284910e76ecc23e6cc3416c32782678a73', 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 }), hAsync("div", { key: '6068500f640c4144b8bbf1dcaaf8b216de9281c1', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (hAsync("button", { key: '94eedd8a810932066690bf5dc6613d54dc7377e6', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, hAsync("svg", { key: 'c325d1129f9987992183ffd1ce7e585e70fb3db3', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, hAsync("path", { key: '02845166093ed8edc7670149cedb4e042d8626f4', 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" })))), hAsync("slot", { key: 'af66e74670e30d12a5dc2f94bce768fc32a9716a', name: "append-inner" })), hAsync("fieldset", { key: '3c4b60c284876a8c198d9a332db6fca5e9d91c81', class: "xplor-text-field__outline" }, hAsync("legend", { key: '9d97a8b65d1787f5e8f4d0a4892fb9c85f839553', class: { 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating } }, labelFloating && this.label ? hAsync("span", null, this.label, this.required && '*') : hAsync("span", null, "\u200B")))), hAsync("div", { key: '53440d0311b2147598fa1dbf241629d7ec401d82', class: "xplor-text-field__append" }, hAsync("slot", { key: '71caef9c6e34db94282fcb36ee341477c7523023', name: "append" }))), this.showDetails && (hAsync("div", { key: '2b468deb8dabcd038e7728512cf68702cfad7d02', class: "xplor-text-field__details" }, this.hasError && (hAsync("div", { key: '103e96cac4c46e52bbb5700fc9c64fc3ef7dc114', id: "error-messages", class: "xplor-text-field__error-messages" }, this.errorMessages.map((error) => (hAsync("div", { class: "xplor-text-field__error" }, error))))))))));
|
|
8999
9005
|
}
|
|
9000
9006
|
get el() { return getElement(this); }
|
|
9001
9007
|
static get watchers() { return {
|
|
@@ -9323,16 +9329,16 @@ class XplorTimePicker {
|
|
|
9323
9329
|
}
|
|
9324
9330
|
render() {
|
|
9325
9331
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
|
|
9326
|
-
const clockIcon = (hAsync("svg", { key: '
|
|
9327
|
-
return (hAsync(Host, { key: '
|
|
9332
|
+
const clockIcon = (hAsync("svg", { key: '17e815e14889cbd5a7b8d9f2fc7a119c38978245', 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" }, hAsync("circle", { key: 'f2dd15cf2d0e2dd5e83665b268729ad42bd2f691', cx: "12", cy: "12", r: "10" }), hAsync("polyline", { key: '1a75a6347d834e0709e4dd44ad0afd32520615ff', points: "12 6 12 12 16 14" })));
|
|
9333
|
+
return (hAsync(Host, { key: '0b7f26197f0e8a6b6b26aa07f623cc4a64ba0ea4' }, hAsync("div", { key: 'f6e15abeed537c65f0e690d44cd8ce8412426a23', class: {
|
|
9328
9334
|
'time-picker': true,
|
|
9329
9335
|
'time-picker--disabled': this.disabled,
|
|
9330
9336
|
'time-picker--error': !!this.error,
|
|
9331
9337
|
'time-picker--open': this.isOpen,
|
|
9332
|
-
} }, this.label && (hAsync("label", { key: '
|
|
9333
|
-
hAsync("div", { key: '
|
|
9334
|
-
hAsync("div", { key: '
|
|
9335
|
-
], hAsync("div", { key: '
|
|
9338
|
+
} }, this.label && (hAsync("label", { key: '3a824d847af9373e93bb72026fddaa899633462f', class: "time-picker__label" }, this.label, this.required && hAsync("span", { key: '70a02a316b6a610178d0d67912d285585f778d35', class: "time-picker__required" }, "*"))), hAsync("div", { key: '99f32b42a52ab84ad9399b5eebd4fc3dd52c03c7', class: "time-picker__field" }, hAsync("input", { key: '48ad49c0173ebfebdb2cf328cd8658df40824068', 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 } }), hAsync("div", { key: '375560c783c400b52bcf96ac3b14ac285ab26b40', class: "time-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (hAsync("button", { key: '0716d483500bd91e0ae289568b6e22d80e667cd5', type: "button", class: "time-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), hAsync("button", { key: '118766793e1c508c0acccc1b9a3ea486c4e2d1dc', type: "button", class: "time-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open time picker" }, clockIcon))), showDetails && (hAsync("div", { key: 'b758cd4077af9f46c95ae9aee64cca1610cc6246', class: "time-picker__details" }, this.error && hAsync("div", { key: '37f5fe76dbb2c39147202e549ed24ceaf74da530', class: "time-picker__error-message" }, this.error))), this.isOpen && (hAsync("div", { key: 'cad94d2b88058f488951c437e6a1c77601f7fc2e', class: "time-picker__dropdown" }, hAsync("div", { key: '1a2a60fc179eeacaf4891a8e99cbb7d0a871686c', class: "time-picker__columns" }, hAsync("div", { key: 'e9b84703525a010884064c1b7a61f5db726b7dff', class: "time-picker__column" }, hAsync("button", { key: '155f2c76f63b8ad0be071456fc1ac8ed36c28912', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementHours, "aria-label": "Increase hours" }, this.renderChevronUp()), hAsync("div", { key: '6f49e3b3ebed597ef27b61e0144bf65f288620a8', class: "time-picker__value" }, String(this.hours).padStart(2, '0')), hAsync("button", { key: '7d14a1f6dd7ab392a76d936e054ca3c308da7666', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementHours, "aria-label": "Decrease hours" }, this.renderChevronDown())), hAsync("div", { key: '9244f886b97f2ae29e71ada6070b75bcec71e22b', class: "time-picker__separator" }, ":"), hAsync("div", { key: '34a8f59c8fa8486c947e0d6079b6df773a86f187', class: "time-picker__column" }, hAsync("button", { key: 'f996fa4638ae84bbcd3bce34c0c40669021a0e61', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementMinutes, "aria-label": "Increase minutes" }, this.renderChevronUp()), hAsync("div", { key: '161581c941572a3d0390b0efdbbf6c24e0ca4830', class: "time-picker__value" }, String(this.minutes).padStart(2, '0')), hAsync("button", { key: '9fa3ee821b78caf94b388b335980ab7cc28110a5', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementMinutes, "aria-label": "Decrease minutes" }, this.renderChevronDown())), this.showSeconds && [
|
|
9339
|
+
hAsync("div", { key: '4362983fe6d9ce187354b5423ff352ac13ee8917', class: "time-picker__separator" }, ":"),
|
|
9340
|
+
hAsync("div", { key: '8dda8c23ab9774bd946136054c537dd0adb8e45b', class: "time-picker__column" }, hAsync("button", { key: '40338612d17dc3a8cf323e6c29942cb0cc0233c7', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementSeconds, "aria-label": "Increase seconds" }, this.renderChevronUp()), hAsync("div", { key: 'ff2d19c8f91070d5b53264266ff6541924613c38', class: "time-picker__value" }, String(this.seconds).padStart(2, '0')), hAsync("button", { key: '985894586447b8e62c4c7c4075cfae8f8cc2eacf', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementSeconds, "aria-label": "Decrease seconds" }, this.renderChevronDown()))
|
|
9341
|
+
], hAsync("div", { key: '22ea57820f5e2fb0beea1f2302efc009daf9b687', class: "time-picker__column time-picker__column--period" }, hAsync("button", { key: '2d9bd33e505e980debd0fc692ddf072b3bb3eacd', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronUp()), hAsync("div", { key: 'd7540347cfa54e16f25e506701d1f1ff03452537', class: "time-picker__value time-picker__value--period" }, this.period), hAsync("button", { key: '31b927a17b3be2749ac62968539fb7873bcd2f0e', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronDown()))))))));
|
|
9336
9342
|
}
|
|
9337
9343
|
get el() { return getElement(this); }
|
|
9338
9344
|
static get style() { return xplorTimePickerCss; }
|