@xplor-education/core-stencil-components 3.1.1 → 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/index.js.map +1 -1
- package/components/xplor-input-text-area.js +6 -3
- package/components/xplor-input-text-area.js.map +1 -1
- package/components/xplor-input-text.js +6 -3
- package/components/xplor-input-text.js.map +1 -1
- package/dist/cjs/index-BjAapk2n.js.map +1 -1
- package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js +12 -6
- package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js.map +1 -1
- package/dist/collection/components/xplor-autocomplete/xplor-autocomplete.js +4 -4
- package/dist/collection/components/xplor-badge-session-booking/xplor-badge-session-booking.js +2 -2
- package/dist/collection/components/xplor-btn-menu/xplor-btn-menu.js +2 -2
- package/dist/collection/components/xplor-combobox/xplor-combobox.js +2 -2
- package/dist/collection/components/xplor-datatable/xplor-datatable.js +3 -3
- package/dist/collection/components/xplor-file-upload/xplor-file-upload.js +2 -2
- package/dist/collection/components/xplor-input-select/xplor-input-select.js +1 -1
- 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-nav-tabs/xplor-nav-tabs.js +1 -1
- package/dist/collection/components/xplor-tooltip/xplor-tooltip.js +2 -2
- package/dist/components/index.js.map +1 -1
- 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.js +6 -3
- package/dist/components/xplor-input-text.js.map +1 -1
- package/dist/esm/index-KRfMjDC2.js.map +1 -1
- package/dist/esm/xplor-alert-dialog_58.entry.js +12 -6
- package/dist/esm/xplor-alert-dialog_58.entry.js.map +1 -1
- package/dist/hydrate/index.js +12 -6
- package/dist/hydrate/index.mjs +12 -6
- package/dist/xplor-component-library/{p-5b0cee73.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/p-KRfMjDC2.js.map +1 -1
- package/dist/xplor-component-library/xplor-component-library.esm.js +1 -1
- package/package.json +1 -1
- package/dist/xplor-component-library/p-5b0cee73.entry.js.map +0 -1
|
@@ -3766,7 +3766,7 @@ const XplorInputSend = class {
|
|
|
3766
3766
|
};
|
|
3767
3767
|
XplorInputSend.style = xplorInputSendCss;
|
|
3768
3768
|
|
|
3769
|
-
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
|
|
3769
|
+
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}";
|
|
3770
3770
|
|
|
3771
3771
|
let inputTextIdCounter = 0;
|
|
3772
3772
|
const XplorInputText = class {
|
|
@@ -3848,21 +3848,24 @@ const XplorInputText = class {
|
|
|
3848
3848
|
};
|
|
3849
3849
|
}
|
|
3850
3850
|
render() {
|
|
3851
|
+
const hasValue = this.value != null && this.value !== '';
|
|
3852
|
+
const isFloating = this.isFocused || hasValue;
|
|
3851
3853
|
const containerClasses = {
|
|
3852
3854
|
'xplor-input-text': true,
|
|
3853
3855
|
'xplor-input-text--focused': this.isFocused,
|
|
3856
|
+
'xplor-input-text--floating': isFloating,
|
|
3854
3857
|
'xplor-input-text--disabled': this.disabled,
|
|
3855
3858
|
'xplor-input-text--error': !!this.error,
|
|
3856
3859
|
};
|
|
3857
3860
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
3858
|
-
return (index.h(index.Host, { key: '
|
|
3861
|
+
return (index.h(index.Host, { key: 'ad1ea36a553bd5e2f5f20c22d890bfad0c26acb3' }, index.h("div", { key: 'e4c0a0a4c63b1a5c8396004e79274b67ecf739eb', class: containerClasses }, index.h("div", { key: 'fae83f51d4cce2ff16c4a62c18ca824c6fa3dca8', class: "xplor-input-text__field" }, index.h("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: {
|
|
3859
3862
|
backgroundColor: this.bgColor,
|
|
3860
|
-
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), index.h("slot", { key: '
|
|
3863
|
+
}, "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 && (index.h("label", { key: '0b09ac4c387ebbab0ff3f347af7f9d9f3c4eecee', class: "xplor-input-text__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && index.h("span", { key: 'df37f253d33b836f4c3d314c91dcd175afaa78ea', class: "xplor-input-text__required" }, "*"))), index.h("slot", { key: '3a45420f690eb79f22788a26e2b3dcb3b72c4a55', name: "append-inner" })), showDetails && (index.h("div", { key: '4b9ab78e1362a44e9d9f0297424b8069a3f69840', class: "xplor-input-text__details" }, this.error && index.h("div", { key: 'eb69eade9944edb5f088b279603d6c98800122a2', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && index.h("div", { key: '433ad514edd52b3eb544fd1f5ec7e0ab96fae3b1', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), index.h("slot", { key: '05881a3abae9226639eb0ffe646f9bd5cd92343c', name: "append" }))));
|
|
3861
3864
|
}
|
|
3862
3865
|
};
|
|
3863
3866
|
XplorInputText.style = xplorInputTextCss;
|
|
3864
3867
|
|
|
3865
|
-
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}";
|
|
3868
|
+
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}";
|
|
3866
3869
|
|
|
3867
3870
|
let inputTextAreaIdCounter = 0;
|
|
3868
3871
|
const XplorInputTextArea = class {
|
|
@@ -3944,17 +3947,20 @@ const XplorInputTextArea = class {
|
|
|
3944
3947
|
};
|
|
3945
3948
|
}
|
|
3946
3949
|
render() {
|
|
3950
|
+
const hasValue = this.value != null && this.value !== '';
|
|
3951
|
+
const isFloating = this.isFocused || hasValue;
|
|
3947
3952
|
const containerClasses = {
|
|
3948
3953
|
'xplor-input-text-area': true,
|
|
3949
3954
|
'xplor-input-text-area--focused': this.isFocused,
|
|
3955
|
+
'xplor-input-text-area--floating': isFloating,
|
|
3950
3956
|
'xplor-input-text-area--disabled': this.disabled,
|
|
3951
3957
|
'xplor-input-text-area--error': !!this.error,
|
|
3952
3958
|
};
|
|
3953
3959
|
const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;
|
|
3954
3960
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
3955
|
-
return (index.h(index.Host, { key: '
|
|
3961
|
+
return (index.h(index.Host, { key: '03e7821b3945d7d8e00a5ce1551a6b26d21001fa' }, index.h("div", { key: '36f0e99d90b1adb5cb38a8ca8d987511569b39e6', class: containerClasses }, index.h("div", { key: '7f8880ab17fdfd446f7bf08dc3db46584cb5419e', class: "xplor-input-text-area__field" }, index.h("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: {
|
|
3956
3962
|
backgroundColor: this.bgColor,
|
|
3957
|
-
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), showClearButton && (index.h("button", { key: '
|
|
3963
|
+
}, "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 && (index.h("label", { key: '6df4ae89eff4ff09d6b2e09a9c002c60d1ca8b27', class: "xplor-input-text-area__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && index.h("span", { key: 'd5e01ae02bdd95ba101f4e335c01557d0c49247b', class: "xplor-input-text-area__required" }, "*"))), showClearButton && (index.h("button", { key: 'e38945bc2f3e46d0583d2c28e0b03d659eb4887a', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (index.h("div", { key: 'e9deb3dfb6d8fbe9e677cf726c21bcee9b7cf5e5', class: "xplor-input-text-area__details" }, this.error && index.h("div", { key: 'cdb4c09dd0e9b2e5f71e10b01b7662d6cbfe5fe9', class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && index.h("div", { key: 'baa31eb60d09957f394f839f86bca1d1d90e9d9c', class: "xplor-input-text-area__helper-text", id: this.helperId }, this.helperText))))));
|
|
3958
3964
|
}
|
|
3959
3965
|
};
|
|
3960
3966
|
XplorInputTextArea.style = xplorInputTextAreaCss;
|