@kumori/aurora-wui-components 0.0.61 → 0.0.63
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/dist/components/axebow-input/axebow-carousel-input.d.ts +19 -0
- package/dist/components/axebow-input/axebow-carousel-input.d.ts.map +1 -0
- package/dist/components/axebow-input/axebow-checkbox-input.d.ts +11 -0
- package/dist/components/axebow-input/axebow-checkbox-input.d.ts.map +1 -0
- package/dist/components/axebow-input/axebow-input-base.d.ts +24 -0
- package/dist/components/axebow-input/axebow-input-base.d.ts.map +1 -0
- package/dist/components/axebow-input/axebow-input.d.ts +49 -0
- package/dist/components/axebow-input/axebow-input.d.ts.map +1 -0
- package/dist/components/axebow-input/axebow-numeric-input.d.ts +11 -0
- package/dist/components/axebow-input/axebow-numeric-input.d.ts.map +1 -0
- package/dist/components/axebow-input/axebow-providers-input.d.ts +9 -0
- package/dist/components/axebow-input/axebow-providers-input.d.ts.map +1 -0
- package/dist/components/axebow-input/axebow-select-input.d.ts +49 -0
- package/dist/components/axebow-input/axebow-select-input.d.ts.map +1 -0
- package/dist/components/axebow-input/axebow-text-input.d.ts +7 -0
- package/dist/components/axebow-input/axebow-text-input.d.ts.map +1 -0
- package/dist/index.d.ts +8 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +754 -2
- package/dist/index.js.map +1 -1
- package/dist/playground/schemas/axebow-breadcrumb-header.schema.d.ts +9 -0
- package/dist/playground/schemas/axebow-breadcrumb-header.schema.d.ts.map +1 -0
- package/dist/playground/schemas/axebow-button.schema.d.ts +8 -0
- package/dist/playground/schemas/axebow-button.schema.d.ts.map +1 -0
- package/dist/playground/schemas/axebow-filter-bar.schema.d.ts +10 -0
- package/dist/playground/schemas/axebow-filter-bar.schema.d.ts.map +1 -0
- package/dist/playground/schemas/axebow-footer.schema.d.ts +9 -0
- package/dist/playground/schemas/axebow-footer.schema.d.ts.map +1 -0
- package/dist/playground/schemas/axebow-header.schema.d.ts +12 -0
- package/dist/playground/schemas/axebow-header.schema.d.ts.map +1 -0
- package/dist/playground/schemas/axebow-icon.schema.d.ts +8 -0
- package/dist/playground/schemas/axebow-icon.schema.d.ts.map +1 -0
- package/dist/playground/schemas/axebow-search.schema.d.ts +8 -0
- package/dist/playground/schemas/axebow-search.schema.d.ts.map +1 -0
- package/dist/playground/schemas/axebow-sidebar.schema.d.ts +9 -0
- package/dist/playground/schemas/axebow-sidebar.schema.d.ts.map +1 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -12,6 +12,11 @@ import "@shoelace-style/shoelace/dist/components/divider/divider.js";
|
|
|
12
12
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
13
13
|
import "@shoelace-style/shoelace/dist/components/button/button.js";
|
|
14
14
|
import "@shoelace-style/shoelace/dist/components/input/input.js";
|
|
15
|
+
import { live } from "lit/directives/live.js";
|
|
16
|
+
import "@shoelace-style/shoelace/dist/components/checkbox/checkbox.js";
|
|
17
|
+
import "@shoelace-style/shoelace/dist/components/carousel/carousel.js";
|
|
18
|
+
import "@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.js";
|
|
19
|
+
import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
|
|
15
20
|
import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
|
|
16
21
|
import "@shoelace-style/shoelace/dist/components/badge/badge.js";
|
|
17
22
|
import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
|
|
@@ -113,7 +118,7 @@ var STATUS_COLORS = {
|
|
|
113
118
|
};
|
|
114
119
|
//#endregion
|
|
115
120
|
//#region src/styles/tailwind.css?inline
|
|
116
|
-
var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Open Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-gray-200: oklch(92.8% .006 264.531);\n --color-gray-300: oklch(87.2% .01 258.338);\n --color-gray-400: oklch(70.7% .022 261.325);\n --color-gray-500: oklch(55.1% .027 264.364);\n --color-gray-600: oklch(44.6% .03 256.802);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-3xl: 1.875rem;\n --text-5xl: 3rem;\n --font-weight-normal: 400;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --text-md: 1rem;\n --spacing-30: 7.5rem;\n --spacing-75: 18.75rem;\n --spacing-117: 29.25rem;\n --spacing-120: 30rem;\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n\n .visible {\n visibility: visible;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .top-0 {\n top: 0;\n }\n\n .top-1\\/2 {\n top: 50%;\n }\n\n .top-\\[-7px\\] {\n top: -7px;\n }\n\n .top-full {\n top: 100%;\n }\n\n .right-0 {\n right: 0;\n }\n\n .right-0\\.5 {\n right: calc(var(--spacing) * .5);\n }\n\n .right-\\[calc\\(100\\%\\+10px\\)\\] {\n right: calc(100% + 10px);\n }\n\n .bottom-0\\.5 {\n bottom: calc(var(--spacing) * .5);\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .left-1\\/2 {\n left: 50%;\n }\n\n .left-\\[-7px\\] {\n left: -7px;\n }\n\n .left-full {\n left: 100%;\n }\n\n .z-5 {\n z-index: 5;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-2000 {\n z-index: 2000;\n }\n\n .z-2001 {\n z-index: 2001;\n }\n\n .z-9999 {\n z-index: 9999;\n }\n\n .col-span-4 {\n grid-column: span 4 / span 4;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .m-0 {\n margin: 0;\n }\n\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n\n .ms-auto {\n margin-inline-start: auto;\n }\n\n .mt-0 {\n margin-top: 0;\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-1\\.5 {\n margin-top: calc(var(--spacing) * 1.5);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mr-4 {\n margin-right: calc(var(--spacing) * 4);\n }\n\n .mb-1 {\n margin-bottom: var(--spacing);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .line-clamp-1 {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .h-2\\.25 {\n height: calc(var(--spacing) * 2.25);\n }\n\n .h-2\\.75 {\n height: calc(var(--spacing) * 2.75);\n }\n\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-5\\.75 {\n height: calc(var(--spacing) * 5.75);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-6\\.5 {\n height: calc(var(--spacing) * 6.5);\n }\n\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-11\\.25 {\n height: calc(var(--spacing) * 11.25);\n }\n\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n\n .h-17\\.25 {\n height: calc(var(--spacing) * 17.25);\n }\n\n .h-92\\.25 {\n height: calc(var(--spacing) * 92.25);\n }\n\n .h-94\\.75 {\n height: calc(var(--spacing) * 94.75);\n }\n\n .h-101\\.5 {\n height: calc(var(--spacing) * 101.5);\n }\n\n .h-103\\.25 {\n height: calc(var(--spacing) * 103.25);\n }\n\n .h-\\[0\\.0625rem\\] {\n height: .0625rem;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-px {\n height: 1px;\n }\n\n .max-h-10 {\n max-height: calc(var(--spacing) * 10);\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-75 {\n max-height: var(--spacing-75);\n }\n\n .max-h-\\[40vh\\] {\n max-height: 40vh;\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-10 {\n min-height: calc(var(--spacing) * 10);\n }\n\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-30 {\n width: var(--spacing-30);\n }\n\n .w-35 {\n width: calc(var(--spacing) * 35);\n }\n\n .w-87 {\n width: calc(var(--spacing) * 87);\n }\n\n .w-91 {\n width: calc(var(--spacing) * 91);\n }\n\n .w-95 {\n width: calc(var(--spacing) * 95);\n }\n\n .w-117 {\n width: var(--spacing-117);\n }\n\n .w-120 {\n width: var(--spacing-120);\n }\n\n .w-\\[10\\.5rem\\] {\n width: 10.5rem;\n }\n\n .w-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-full {\n width: 100%;\n }\n\n .max-w-\\[23\\.75rem\\] {\n max-width: 23.75rem;\n }\n\n .max-w-full {\n max-width: 100%;\n }\n\n .min-w-0 {\n min-width: 0;\n }\n\n .min-w-4 {\n min-width: calc(var(--spacing) * 4);\n }\n\n .min-w-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .min-w-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-fit {\n min-width: fit-content;\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-x-1 {\n --tw-translate-x: var(--spacing);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .cursor-default {\n cursor: default;\n }\n\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .resize {\n resize: both;\n }\n\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .grid-cols-\\[auto_auto_1fr_auto\\] {\n grid-template-columns: auto auto 1fr auto;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-center {\n align-items: center;\n }\n\n .items-end {\n align-items: flex-end;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .justify-start {\n justify-content: flex-start;\n }\n\n .gap-0 {\n gap: 0;\n }\n\n .gap-0\\.5 {\n gap: calc(var(--spacing) * .5);\n }\n\n .gap-1 {\n gap: var(--spacing);\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .gap-x-1 {\n column-gap: var(--spacing);\n }\n\n .gap-x-2 {\n column-gap: calc(var(--spacing) * 2);\n }\n\n .gap-y-\\[0\\.1875rem\\] {\n row-gap: .1875rem;\n }\n\n .overflow-auto {\n overflow: auto;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n\n .rounded-l-xl {\n border-top-left-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-x {\n border-inline-style: var(--tw-border-style);\n border-inline-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-t-4 {\n border-top-style: var(--tw-border-style);\n border-top-width: 4px;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .border-\\(--axebow-gray\\) {\n border-color: var(--axebow-gray);\n }\n\n .border-\\(--axebow-light-gray\\) {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\(--axebow-secondary\\) {\n border-color: var(--axebow-secondary);\n }\n\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n\n .border-gray-500 {\n border-color: var(--color-gray-500);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .bg-\\(--axebow-anti-flash-white\\) {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .bg-\\(--axebow-base\\) {\n background-color: var(--axebow-base);\n }\n\n .bg-\\(--axebow-error\\) {\n background-color: var(--axebow-error);\n }\n\n .bg-\\(--axebow-gray\\) {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\(--axebow-light-gray\\) {\n background-color: var(--axebow-light-gray);\n }\n\n .bg-\\(--axebow-primary\\) {\n background-color: var(--axebow-primary);\n }\n\n .bg-\\(--axebow-success\\) {\n background-color: var(--axebow-success);\n }\n\n .bg-\\(--axebow-white\\) {\n background-color: var(--axebow-white);\n }\n\n .bg-\\[\\#b4cded\\] {\n background-color: #b4cded;\n }\n\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .p-1 {\n padding: var(--spacing);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * .5);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-3\\.5 {\n padding-inline: calc(var(--spacing) * 3.5);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-1\\.25 {\n padding-block: calc(var(--spacing) * 1.25);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n\n .ps-4 {\n padding-inline-start: calc(var(--spacing) * 4);\n }\n\n .ps-8 {\n padding-inline-start: calc(var(--spacing) * 8);\n }\n\n .pe-4 {\n padding-inline-end: calc(var(--spacing) * 4);\n }\n\n .pt-0\\.5 {\n padding-top: calc(var(--spacing) * .5);\n }\n\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .pl-1 {\n padding-left: var(--spacing);\n }\n\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n\n .pl-6 {\n padding-left: calc(var(--spacing) * 6);\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-\\[Material_Symbols_Outlined\\] {\n font-family: Material Symbols Outlined;\n }\n\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\(--axebow-anti-flash-white\\) {\n color: var(--axebow-anti-flash-white);\n }\n\n .text-\\(--axebow-error\\) {\n color: var(--axebow-error);\n }\n\n .text-\\(--axebow-gray\\) {\n color: var(--axebow-gray);\n }\n\n .text-\\(--axebow-primary\\) {\n color: var(--axebow-primary);\n }\n\n .text-\\(--axebow-rich-black\\) {\n color: var(--axebow-rich-black);\n }\n\n .text-\\(--axebow-secondary\\) {\n color: var(--axebow-secondary);\n }\n\n .text-\\(--axebow-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .text-\\[\\#344966\\] {\n color: #344966;\n }\n\n .text-black {\n color: var(--color-black);\n }\n\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n\n .text-white {\n color: var(--color-white);\n }\n\n .italic {\n font-style: italic;\n }\n\n .opacity-0 {\n opacity: 0;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-70 {\n opacity: .7;\n }\n\n .opacity-100 {\n opacity: 1;\n }\n\n .shadow-\\[0_6px_16px_rgba\\(13\\,24\\,33\\,0\\.18\\)\\] {\n --tw-shadow: 0 6px 16px var(--tw-shadow-color, #0d18212e);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .duration-120 {\n --tw-duration: .12s;\n transition-duration: .12s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_0\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_1\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n @media (hover: hover) {\n .group-hover\\:translate-x-0:is(:where(.group):hover *) {\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-hover\\:rotate-15:is(:where(.group):hover *) {\n rotate: 15deg;\n }\n\n .group-hover\\:font-semibold:is(:where(.group):hover *) {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .group-hover\\:text-\\(--axebow-primary\\):is(:where(.group):hover *) {\n color: var(--axebow-primary);\n }\n\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .hover\\:rounded-lg:hover {\n border-radius: var(--radius-lg);\n }\n\n .hover\\:border-\\(--axebow-tertiary\\):hover {\n border-color: var(--axebow-tertiary);\n }\n\n .hover\\:bg-\\(--axebow-base\\):hover {\n background-color: var(--axebow-base);\n }\n\n .hover\\:bg-\\(--axebow-light-gray\\):hover {\n background-color: var(--axebow-light-gray);\n }\n\n .hover\\:bg-\\[\\#344966\\]:hover {\n background-color: #344966;\n }\n\n .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-gray-100:hover {\n background-color: var(--color-gray-100);\n }\n\n .hover\\:bg-gray-200:hover {\n background-color: var(--color-gray-200);\n }\n\n .hover\\:bg-white:hover {\n background-color: var(--color-white);\n }\n\n .hover\\:text-\\(--axebow-tertiary\\):hover {\n color: var(--axebow-tertiary);\n }\n\n .hover\\:text-\\[\\#344966\\]:hover {\n color: #344966;\n }\n\n .hover\\:text-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .hover\\:opacity-80:hover {\n opacity: .8;\n }\n\n .hover\\:opacity-100:hover {\n opacity: 1;\n }\n\n .hover\\:shadow-\\[0_2px_6px_rgba\\(13\\,24\\,33\\,0\\.14\\)\\]:hover {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0d182124);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .hover\\:shadow-\\[0_4px_12px_0_rgba\\(13\\,24\\,33\\,0\\.08\\)\\]:hover {\n --tw-shadow: 0 4px 12px 0 var(--tw-shadow-color, #0d182114);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n\n .disabled\\:pointer-events-none:disabled {\n pointer-events: none;\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: .5;\n }\n\n @media (min-width: 48rem) {\n .md\\:gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n }\n}\n\n:host {\n font-family: var(--font-sans);\n font-size: var(--text-base);\n line-height: var(--text-base--line-height);\n --font-sans: \"Open Sans\", sans-serif;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-2xl: 1.5rem;\n --text-2xl--line-height: 2rem;\n --text-3xl: 1.875rem;\n --text-3xl--line-height: 2.25rem;\n --text-4xl: 2.25rem;\n --text-4xl--line-height: 2.5rem;\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --text-6xl: 3.75rem;\n --text-6xl--line-height: 1;\n --text-7xl: 4.5rem;\n --text-7xl--line-height: 1;\n --text-8xl: 4.625rem;\n --text-8xl--line-height: 1;\n --text-9xl: 6.125rem;\n --text-9xl--line-height: 1;\n}\n\n:root {\n --sl-font-sans: \"Open Sans\", sans-serif;\n --sl-font-size-2x-small: var(--text-xs);\n --sl-font-size-x-small: var(--text-xs);\n --sl-font-size-small: var(--text-sm);\n --sl-font-size-medium: var(--text-base);\n --sl-font-size-large: var(--text-md);\n --sl-font-size-x-large: var(--text-lg);\n --sl-font-size-2x-large: var(--text-xl);\n --sl-font-size-3x-large: var(--text-3xl);\n --sl-font-size-4x-large: var(--text-5xl);\n --sl-input-font-size-small: var(--text-sm);\n --sl-input-font-size-medium: var(--text-base);\n --sl-input-font-size-large: var(--text-md);\n --sl-button-font-size-small: var(--text-sm);\n --sl-button-font-size-medium: var(--text-base);\n --sl-button-font-size-large: var(--text-md);\n --sl-tooltip-font-size: var(--text-base);\n}\n\nbutton, input, select, textarea {\n font-family: inherit;\n font-size: inherit;\n}\n\ninput, select, textarea, sl-menu-item::part(label), sl-option::part(label) {\n font-size: var(--text-base);\n}\n\n.axebow-blue-button::part(base) {\n background-color: var(--axebow-tertiary);\n}\n\n.info-container-page {\n flex-wrap: wrap;\n gap: 2rem;\n display: flex;\n}\n\nsl-divider {\n background: var(--axebow-light-gray);\n height: 1px;\n margin-top: .5rem;\n margin-bottom: .5rem;\n}\n\n.axebow-shadow {\n box-shadow: 2px 2px 25px #0000001a;\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-leading {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-blur {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-invert {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-duration {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ease {\n syntax: \"*\";\n inherits: false\n}\n";
|
|
121
|
+
var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n }\n }\n}\n\n@layer theme {\n :root, :host {\n --font-sans: \"Open Sans\", sans-serif;\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-gray-200: oklch(92.8% .006 264.531);\n --color-gray-300: oklch(87.2% .01 258.338);\n --color-gray-400: oklch(70.7% .022 261.325);\n --color-gray-500: oklch(55.1% .027 264.364);\n --color-gray-600: oklch(44.6% .03 256.802);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-3xl: 1.875rem;\n --text-5xl: 3rem;\n --font-weight-normal: 400;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --radius-xl: .75rem;\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --text-md: 1rem;\n --spacing-30: 7.5rem;\n --spacing-75: 18.75rem;\n --spacing-117: 29.25rem;\n --spacing-120: 30rem;\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n\n .visible {\n visibility: visible;\n }\n\n .absolute {\n position: absolute;\n }\n\n .fixed {\n position: fixed;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .top-0 {\n top: 0;\n }\n\n .top-1\\/2 {\n top: 50%;\n }\n\n .top-\\[-7px\\] {\n top: -7px;\n }\n\n .top-full {\n top: 100%;\n }\n\n .right-0 {\n right: 0;\n }\n\n .right-0\\.5 {\n right: calc(var(--spacing) * .5);\n }\n\n .right-\\[calc\\(100\\%\\+10px\\)\\] {\n right: calc(100% + 10px);\n }\n\n .bottom-0\\.5 {\n bottom: calc(var(--spacing) * .5);\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .left-1\\/2 {\n left: 50%;\n }\n\n .left-\\[-7px\\] {\n left: -7px;\n }\n\n .left-full {\n left: 100%;\n }\n\n .z-5 {\n z-index: 5;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .z-2000 {\n z-index: 2000;\n }\n\n .z-2001 {\n z-index: 2001;\n }\n\n .z-9999 {\n z-index: 9999;\n }\n\n .col-span-4 {\n grid-column: span 4 / span 4;\n }\n\n .container {\n width: 100%;\n }\n\n @media (min-width: 40rem) {\n .container {\n max-width: 40rem;\n }\n }\n\n @media (min-width: 48rem) {\n .container {\n max-width: 48rem;\n }\n }\n\n @media (min-width: 64rem) {\n .container {\n max-width: 64rem;\n }\n }\n\n @media (min-width: 80rem) {\n .container {\n max-width: 80rem;\n }\n }\n\n @media (min-width: 96rem) {\n .container {\n max-width: 96rem;\n }\n }\n\n .m-0 {\n margin: 0;\n }\n\n .my-2 {\n margin-block: calc(var(--spacing) * 2);\n }\n\n .ms-auto {\n margin-inline-start: auto;\n }\n\n .mt-0 {\n margin-top: 0;\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-1\\.5 {\n margin-top: calc(var(--spacing) * 1.5);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mt-6 {\n margin-top: calc(var(--spacing) * 6);\n }\n\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mr-4 {\n margin-right: calc(var(--spacing) * 4);\n }\n\n .mb-1 {\n margin-bottom: var(--spacing);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .ml-12 {\n margin-left: calc(var(--spacing) * 12);\n }\n\n .ml-auto {\n margin-left: auto;\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .line-clamp-1 {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .line-clamp-2 {\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .inline-block {\n display: inline-block;\n }\n\n .inline-flex {\n display: inline-flex;\n }\n\n .h-2\\.25 {\n height: calc(var(--spacing) * 2.25);\n }\n\n .h-2\\.75 {\n height: calc(var(--spacing) * 2.75);\n }\n\n .h-3\\.5 {\n height: calc(var(--spacing) * 3.5);\n }\n\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n\n .h-5\\.75 {\n height: calc(var(--spacing) * 5.75);\n }\n\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n\n .h-6\\.5 {\n height: calc(var(--spacing) * 6.5);\n }\n\n .h-7 {\n height: calc(var(--spacing) * 7);\n }\n\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n\n .h-9 {\n height: calc(var(--spacing) * 9);\n }\n\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-11\\.25 {\n height: calc(var(--spacing) * 11.25);\n }\n\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n\n .h-17\\.25 {\n height: calc(var(--spacing) * 17.25);\n }\n\n .h-92\\.25 {\n height: calc(var(--spacing) * 92.25);\n }\n\n .h-94\\.75 {\n height: calc(var(--spacing) * 94.75);\n }\n\n .h-101\\.5 {\n height: calc(var(--spacing) * 101.5);\n }\n\n .h-103\\.25 {\n height: calc(var(--spacing) * 103.25);\n }\n\n .h-\\[0\\.0625rem\\] {\n height: .0625rem;\n }\n\n .h-full {\n height: 100%;\n }\n\n .h-px {\n height: 1px;\n }\n\n .max-h-10 {\n max-height: calc(var(--spacing) * 10);\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-75 {\n max-height: var(--spacing-75);\n }\n\n .max-h-\\[40vh\\] {\n max-height: 40vh;\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-5 {\n min-height: calc(var(--spacing) * 5);\n }\n\n .min-h-10 {\n min-height: calc(var(--spacing) * 10);\n }\n\n .w-2\\.5 {\n width: calc(var(--spacing) * 2.5);\n }\n\n .w-3\\.5 {\n width: calc(var(--spacing) * 3.5);\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n\n .w-20 {\n width: calc(var(--spacing) * 20);\n }\n\n .w-30 {\n width: var(--spacing-30);\n }\n\n .w-35 {\n width: calc(var(--spacing) * 35);\n }\n\n .w-87 {\n width: calc(var(--spacing) * 87);\n }\n\n .w-91 {\n width: calc(var(--spacing) * 91);\n }\n\n .w-95 {\n width: calc(var(--spacing) * 95);\n }\n\n .w-117 {\n width: var(--spacing-117);\n }\n\n .w-120 {\n width: var(--spacing-120);\n }\n\n .w-\\[10\\.5rem\\] {\n width: 10.5rem;\n }\n\n .w-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-full {\n width: 100%;\n }\n\n .max-w-\\[23\\.75rem\\] {\n max-width: 23.75rem;\n }\n\n .max-w-full {\n max-width: 100%;\n }\n\n .min-w-0 {\n min-width: 0;\n }\n\n .min-w-4 {\n min-width: calc(var(--spacing) * 4);\n }\n\n .min-w-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .min-w-55 {\n min-width: calc(var(--spacing) * 55);\n }\n\n .min-w-fit {\n min-width: fit-content;\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .translate-x-1 {\n --tw-translate-x: var(--spacing);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .cursor-default {\n cursor: default;\n }\n\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .resize {\n resize: both;\n }\n\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .grid-cols-\\[auto_auto_1fr_auto\\] {\n grid-template-columns: auto auto 1fr auto;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-baseline {\n align-items: baseline;\n }\n\n .items-center {\n align-items: center;\n }\n\n .items-end {\n align-items: flex-end;\n }\n\n .justify-between {\n justify-content: space-between;\n }\n\n .justify-center {\n justify-content: center;\n }\n\n .justify-end {\n justify-content: flex-end;\n }\n\n .justify-start {\n justify-content: flex-start;\n }\n\n .gap-0 {\n gap: 0;\n }\n\n .gap-0\\.5 {\n gap: calc(var(--spacing) * .5);\n }\n\n .gap-1 {\n gap: var(--spacing);\n }\n\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n\n .gap-5 {\n gap: calc(var(--spacing) * 5);\n }\n\n .gap-12 {\n gap: calc(var(--spacing) * 12);\n }\n\n .gap-x-1 {\n column-gap: var(--spacing);\n }\n\n .gap-x-2 {\n column-gap: calc(var(--spacing) * 2);\n }\n\n .gap-y-\\[0\\.1875rem\\] {\n row-gap: .1875rem;\n }\n\n .overflow-auto {\n overflow: auto;\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-x-hidden {\n overflow-x: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .rounded {\n border-radius: .25rem;\n }\n\n .rounded-full {\n border-radius: 3.40282e38px;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-t-md {\n border-top-left-radius: var(--radius-md);\n border-top-right-radius: var(--radius-md);\n }\n\n .rounded-l-xl {\n border-top-left-radius: var(--radius-xl);\n border-bottom-left-radius: var(--radius-xl);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .rounded-b-md {\n border-bottom-right-radius: var(--radius-md);\n border-bottom-left-radius: var(--radius-md);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-0 {\n border-style: var(--tw-border-style);\n border-width: 0;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-x {\n border-inline-style: var(--tw-border-style);\n border-inline-width: 1px;\n }\n\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n\n .border-t-4 {\n border-top-style: var(--tw-border-style);\n border-top-width: 4px;\n }\n\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n\n .border-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-solid {\n --tw-border-style: solid;\n border-style: solid;\n }\n\n .border-\\(--axebow-gray\\) {\n border-color: var(--axebow-gray);\n }\n\n .border-\\(--axebow-light-gray\\) {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\(--axebow-secondary\\) {\n border-color: var(--axebow-secondary);\n }\n\n .border-gray-300 {\n border-color: var(--color-gray-300);\n }\n\n .border-gray-500 {\n border-color: var(--color-gray-500);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .bg-\\(--axebow-anti-flash-white\\) {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .bg-\\(--axebow-base\\) {\n background-color: var(--axebow-base);\n }\n\n .bg-\\(--axebow-error\\) {\n background-color: var(--axebow-error);\n }\n\n .bg-\\(--axebow-gray\\) {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\(--axebow-light-gray\\) {\n background-color: var(--axebow-light-gray);\n }\n\n .bg-\\(--axebow-primary\\) {\n background-color: var(--axebow-primary);\n }\n\n .bg-\\(--axebow-success\\) {\n background-color: var(--axebow-success);\n }\n\n .bg-\\(--axebow-white\\) {\n background-color: var(--axebow-white);\n }\n\n .bg-\\[\\#b4cded\\] {\n background-color: #b4cded;\n }\n\n .bg-gray-100 {\n background-color: var(--color-gray-100);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .p-1 {\n padding: var(--spacing);\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n\n .px-0\\.5 {\n padding-inline: calc(var(--spacing) * .5);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-3\\.5 {\n padding-inline: calc(var(--spacing) * 3.5);\n }\n\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-1\\.25 {\n padding-block: calc(var(--spacing) * 1.25);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n\n .ps-4 {\n padding-inline-start: calc(var(--spacing) * 4);\n }\n\n .ps-8 {\n padding-inline-start: calc(var(--spacing) * 8);\n }\n\n .pe-4 {\n padding-inline-end: calc(var(--spacing) * 4);\n }\n\n .pt-0\\.5 {\n padding-top: calc(var(--spacing) * .5);\n }\n\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n\n .pl-1 {\n padding-left: var(--spacing);\n }\n\n .pl-2 {\n padding-left: calc(var(--spacing) * 2);\n }\n\n .pl-6 {\n padding-left: calc(var(--spacing) * 6);\n }\n\n .text-center {\n text-align: center;\n }\n\n .text-left {\n text-align: left;\n }\n\n .align-middle {\n vertical-align: middle;\n }\n\n .font-\\[Material_Symbols_Outlined\\] {\n font-family: Material Symbols Outlined;\n }\n\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .leading-\\[1\\.0625rem\\] {\n --tw-leading: 1.0625rem;\n line-height: 1.0625rem;\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .wrap-break-word {\n overflow-wrap: break-word;\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\(--axebow-anti-flash-white\\) {\n color: var(--axebow-anti-flash-white);\n }\n\n .text-\\(--axebow-error\\) {\n color: var(--axebow-error);\n }\n\n .text-\\(--axebow-gray\\) {\n color: var(--axebow-gray);\n }\n\n .text-\\(--axebow-primary\\) {\n color: var(--axebow-primary);\n }\n\n .text-\\(--axebow-rich-black\\) {\n color: var(--axebow-rich-black);\n }\n\n .text-\\(--axebow-secondary\\) {\n color: var(--axebow-secondary);\n }\n\n .text-\\(--axebow-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .text-\\[\\#344966\\] {\n color: #344966;\n }\n\n .text-black {\n color: var(--color-black);\n }\n\n .text-gray-400 {\n color: var(--color-gray-400);\n }\n\n .text-gray-500 {\n color: var(--color-gray-500);\n }\n\n .text-gray-600 {\n color: var(--color-gray-600);\n }\n\n .text-white {\n color: var(--color-white);\n }\n\n .italic {\n font-style: italic;\n }\n\n .opacity-0 {\n opacity: 0;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-70 {\n opacity: .7;\n }\n\n .opacity-100 {\n opacity: 1;\n }\n\n .shadow-\\[0_6px_16px_rgba\\(13\\,24\\,33\\,0\\.18\\)\\] {\n --tw-shadow: 0 6px 16px var(--tw-shadow-color, #0d18212e);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .shadow-lg {\n --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .filter {\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .duration-120 {\n --tw-duration: .12s;\n transition-duration: .12s;\n }\n\n .duration-150 {\n --tw-duration: .15s;\n transition-duration: .15s;\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .duration-300 {\n --tw-duration: .3s;\n transition-duration: .3s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_0\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 0,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n .\\[font-variation-settings\\:\\'FILL\\'_1\\,\\'wght\\'_400\\,\\'GRAD\\'_0\\,\\'opsz\\'_24\\] {\n font-variation-settings: \"FILL\" 1,\"wght\" 400,\"GRAD\" 0,\"opsz\" 24;\n }\n\n @media (hover: hover) {\n .group-hover\\:translate-x-0:is(:where(.group):hover *) {\n --tw-translate-x: 0;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n\n .group-hover\\:rotate-15:is(:where(.group):hover *) {\n rotate: 15deg;\n }\n\n .group-hover\\:font-semibold:is(:where(.group):hover *) {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .group-hover\\:text-\\(--axebow-primary\\):is(:where(.group):hover *) {\n color: var(--axebow-primary);\n }\n\n .group-hover\\:opacity-100:is(:where(.group):hover *) {\n opacity: 1;\n }\n\n .hover\\:rounded-lg:hover {\n border-radius: var(--radius-lg);\n }\n\n .hover\\:border-\\(--axebow-tertiary\\):hover {\n border-color: var(--axebow-tertiary);\n }\n\n .hover\\:bg-\\(--axebow-base\\):hover {\n background-color: var(--axebow-base);\n }\n\n .hover\\:bg-\\(--axebow-light-gray\\):hover {\n background-color: var(--axebow-light-gray);\n }\n\n .hover\\:bg-\\[\\#344966\\]:hover {\n background-color: #344966;\n }\n\n .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-gray-100:hover {\n background-color: var(--color-gray-100);\n }\n\n .hover\\:bg-gray-200:hover {\n background-color: var(--color-gray-200);\n }\n\n .hover\\:bg-white:hover {\n background-color: var(--color-white);\n }\n\n .hover\\:text-\\(--axebow-tertiary\\):hover {\n color: var(--axebow-tertiary);\n }\n\n .hover\\:text-\\[\\#344966\\]:hover {\n color: #344966;\n }\n\n .hover\\:text-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:underline:hover {\n text-decoration-line: underline;\n }\n\n .hover\\:opacity-80:hover {\n opacity: .8;\n }\n\n .hover\\:opacity-100:hover {\n opacity: 1;\n }\n\n .hover\\:shadow-\\[0_2px_6px_rgba\\(13\\,24\\,33\\,0\\.14\\)\\]:hover {\n --tw-shadow: 0 2px 6px var(--tw-shadow-color, #0d182124);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .hover\\:shadow-\\[0_4px_12px_0_rgba\\(13\\,24\\,33\\,0\\.08\\)\\]:hover {\n --tw-shadow: 0 4px 12px 0 var(--tw-shadow-color, #0d182114);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n\n .disabled\\:pointer-events-none:disabled {\n pointer-events: none;\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: .5;\n }\n\n @media (min-width: 48rem) {\n .md\\:gap-8 {\n gap: calc(var(--spacing) * 8);\n }\n }\n}\n\n:host {\n font-family: var(--font-sans);\n font-size: var(--text-base);\n line-height: var(--text-base--line-height);\n --font-sans: \"Open Sans\", sans-serif;\n --text-xs: .625rem;\n --text-xs--line-height: .875rem;\n --text-sm: .75rem;\n --text-sm--line-height: 1rem;\n --text-base: .875rem;\n --text-base--line-height: 1.25rem;\n --text-md: 1rem;\n --text-md--line-height: 1.5rem;\n --text-lg: 1.125rem;\n --text-lg--line-height: 1.75rem;\n --text-xl: 1.25rem;\n --text-xl--line-height: 1.75rem;\n --text-2xl: 1.5rem;\n --text-2xl--line-height: 2rem;\n --text-3xl: 1.875rem;\n --text-3xl--line-height: 2.25rem;\n --text-4xl: 2.25rem;\n --text-4xl--line-height: 2.5rem;\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --text-6xl: 3.75rem;\n --text-6xl--line-height: 1;\n --text-7xl: 4.5rem;\n --text-7xl--line-height: 1;\n --text-8xl: 4.625rem;\n --text-8xl--line-height: 1;\n --text-9xl: 6.125rem;\n --text-9xl--line-height: 1;\n}\n\n:root {\n --sl-font-sans: \"Open Sans\", sans-serif;\n --sl-font-size-2x-small: var(--text-xs);\n --sl-font-size-x-small: var(--text-xs);\n --sl-font-size-small: var(--text-sm);\n --sl-font-size-medium: var(--text-base);\n --sl-font-size-large: var(--text-md);\n --sl-font-size-x-large: var(--text-lg);\n --sl-font-size-2x-large: var(--text-xl);\n --sl-font-size-3x-large: var(--text-3xl);\n --sl-font-size-4x-large: var(--text-5xl);\n --sl-input-font-size-small: var(--text-sm);\n --sl-input-font-size-medium: var(--text-base);\n --sl-input-font-size-large: var(--text-md);\n --sl-button-font-size-small: var(--text-sm);\n --sl-button-font-size-medium: var(--text-base);\n --sl-button-font-size-large: var(--text-md);\n --sl-tooltip-font-size: var(--text-base);\n}\n\nbutton, input, select, textarea {\n font-family: inherit;\n font-size: inherit;\n}\n\ninput, select, textarea, sl-menu-item::part(label), sl-option::part(label) {\n font-size: var(--text-base);\n}\n\n.axebow-blue-button::part(base) {\n background-color: var(--axebow-tertiary);\n}\n\n.info-container-page {\n flex-wrap: wrap;\n gap: 2rem;\n display: flex;\n}\n\nsl-divider {\n background: var(--axebow-light-gray);\n height: 1px;\n margin-top: .5rem;\n margin-bottom: .5rem;\n}\n\n.axebow-shadow {\n box-shadow: 2px 2px 25px #0000001a;\n}\n\n@property --tw-translate-x {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-y {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-translate-z {\n syntax: \"*\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-rotate-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-rotate-z {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-x {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-skew-y {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-border-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-leading {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-font-weight {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-inset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-inset-ring-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-inset-ring-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-ring-inset {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ring-offset-width {\n syntax: \"<length>\";\n inherits: false;\n initial-value: 0;\n}\n\n@property --tw-ring-offset-color {\n syntax: \"*\";\n inherits: false;\n initial-value: #fff;\n}\n\n@property --tw-ring-offset-shadow {\n syntax: \"*\";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n\n@property --tw-outline-style {\n syntax: \"*\";\n inherits: false;\n initial-value: solid;\n}\n\n@property --tw-blur {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-brightness {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-contrast {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-grayscale {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-hue-rotate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-invert {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-opacity {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-saturate {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-sepia {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-color {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-drop-shadow-alpha {\n syntax: \"<percentage>\";\n inherits: false;\n initial-value: 100%;\n}\n\n@property --tw-drop-shadow-size {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-duration {\n syntax: \"*\";\n inherits: false\n}\n\n@property --tw-ease {\n syntax: \"*\";\n inherits: false\n}\n";
|
|
117
122
|
//#endregion
|
|
118
123
|
//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
|
|
119
124
|
function __decorate(decorators, target, key, desc) {
|
|
@@ -1218,6 +1223,753 @@ __decorate([property({ type: String })], AxebowSearch.prototype, "value", void 0
|
|
|
1218
1223
|
__decorate([property({ type: String })], AxebowSearch.prototype, "placeholder", void 0);
|
|
1219
1224
|
AxebowSearch = __decorate([customElement("axebow-search")], AxebowSearch);
|
|
1220
1225
|
//#endregion
|
|
1226
|
+
//#region src/components/axebow-input/axebow-input-base.ts
|
|
1227
|
+
/**
|
|
1228
|
+
* Template-method base for every axebow-*-input control: owns the shared
|
|
1229
|
+
* label/description/error wrapper markup and the disabled-aware value
|
|
1230
|
+
* change plumbing. Concrete inputs only implement their own field markup
|
|
1231
|
+
* via render().
|
|
1232
|
+
*/
|
|
1233
|
+
var AxebowInputBase = class extends LitElement {
|
|
1234
|
+
constructor(..._args) {
|
|
1235
|
+
super(..._args);
|
|
1236
|
+
this.value = "";
|
|
1237
|
+
this.placeholder = "";
|
|
1238
|
+
this.label = "";
|
|
1239
|
+
this.description = "";
|
|
1240
|
+
this.required = false;
|
|
1241
|
+
this.disabled = false;
|
|
1242
|
+
this.hasError = false;
|
|
1243
|
+
this.errorMessage = "";
|
|
1244
|
+
this.compact = false;
|
|
1245
|
+
}
|
|
1246
|
+
static {
|
|
1247
|
+
this.baseStyles = [
|
|
1248
|
+
unsafeCSS(tailwind_default),
|
|
1249
|
+
axebowTheme,
|
|
1250
|
+
css`
|
|
1251
|
+
sl-input,
|
|
1252
|
+
sl-select {
|
|
1253
|
+
width: 100%;
|
|
1254
|
+
}
|
|
1255
|
+
sl-input::part(base),
|
|
1256
|
+
sl-select::part(combobox) {
|
|
1257
|
+
--sl-input-focus-ring-color: transparent;
|
|
1258
|
+
--sl-color-primary-600: transparent;
|
|
1259
|
+
--sl-input-border-color-focus: transparent;
|
|
1260
|
+
}
|
|
1261
|
+
.input-error sl-input,
|
|
1262
|
+
.input-error sl-select {
|
|
1263
|
+
--sl-input-border-color: var(--axebow-error, #e53e3e);
|
|
1264
|
+
--sl-input-border-color-focus: var(--axebow-error, #e53e3e);
|
|
1265
|
+
--sl-input-border-color-hover: var(--axebow-error, #e53e3e);
|
|
1266
|
+
}
|
|
1267
|
+
`
|
|
1268
|
+
];
|
|
1269
|
+
}
|
|
1270
|
+
handleChange(e) {
|
|
1271
|
+
if (this.disabled) return;
|
|
1272
|
+
const target = e.target;
|
|
1273
|
+
this.value = target.value;
|
|
1274
|
+
this.callback?.(e);
|
|
1275
|
+
}
|
|
1276
|
+
renderWrapper(content) {
|
|
1277
|
+
return html`
|
|
1278
|
+
<div class="flex flex-col justify-end gap-2 w-full relative">
|
|
1279
|
+
${!this.compact || this.label ? html`<div class="flex items-baseline gap-2 ${this.description ? "my-2" : ""}">
|
|
1280
|
+
<p class="text-(--axebow-error)">${this.required ? "*" : ""}</p>
|
|
1281
|
+
<h4 class="${this.compact ? "font-normal text-sm" : "font-bold text-base"}">${this.label}</h4>
|
|
1282
|
+
</div>` : ""}
|
|
1283
|
+
${this.description ? html`<p class="text-m h-12 overflow-hidden line-clamp-2 mb-1" title="${this.description}">
|
|
1284
|
+
${this.description}
|
|
1285
|
+
</p>` : ""}
|
|
1286
|
+
${content}
|
|
1287
|
+
${!this.compact && this.hasError && this.errorMessage ? html`<div class="mt-1 min-h-5 text-(--axebow-error) text-sm flex items-center gap-1">
|
|
1288
|
+
<span class="text-base shrink-0"
|
|
1289
|
+
><axebow-icon iconName="error" iconColor="var(--axebow-error)"></axebow-icon
|
|
1290
|
+
></span>
|
|
1291
|
+
${this.errorMessage}
|
|
1292
|
+
</div>` : ""}
|
|
1293
|
+
</div>
|
|
1294
|
+
`;
|
|
1295
|
+
}
|
|
1296
|
+
};
|
|
1297
|
+
__decorate([property({ type: String })], AxebowInputBase.prototype, "value", void 0);
|
|
1298
|
+
__decorate([property({ type: String })], AxebowInputBase.prototype, "placeholder", void 0);
|
|
1299
|
+
__decorate([property({ type: String })], AxebowInputBase.prototype, "label", void 0);
|
|
1300
|
+
__decorate([property({ type: String })], AxebowInputBase.prototype, "description", void 0);
|
|
1301
|
+
__decorate([property({ type: Boolean })], AxebowInputBase.prototype, "required", void 0);
|
|
1302
|
+
__decorate([property({ type: Boolean })], AxebowInputBase.prototype, "disabled", void 0);
|
|
1303
|
+
__decorate([property({ type: Boolean })], AxebowInputBase.prototype, "hasError", void 0);
|
|
1304
|
+
__decorate([property({ type: String })], AxebowInputBase.prototype, "errorMessage", void 0);
|
|
1305
|
+
__decorate([property({ type: Number })], AxebowInputBase.prototype, "maxlength", void 0);
|
|
1306
|
+
__decorate([property({ attribute: false })], AxebowInputBase.prototype, "callback", void 0);
|
|
1307
|
+
__decorate([property({ type: Boolean })], AxebowInputBase.prototype, "compact", void 0);
|
|
1308
|
+
//#endregion
|
|
1309
|
+
//#region src/components/axebow-input/axebow-text-input.ts
|
|
1310
|
+
var AxebowTextInput = class AxebowTextInput extends AxebowInputBase {
|
|
1311
|
+
static {
|
|
1312
|
+
this.styles = [...AxebowInputBase.baseStyles, css`
|
|
1313
|
+
/* Exact anatomy for the label+description text-input case:
|
|
1314
|
+
label 265.5x17, 4px gap, description 265.5x17, 8px gap,
|
|
1315
|
+
input box 265.5x40 - total 265.5x86. */
|
|
1316
|
+
.fixed-field {
|
|
1317
|
+
display: flex;
|
|
1318
|
+
flex-direction: column;
|
|
1319
|
+
width: 16.59375rem;
|
|
1320
|
+
}
|
|
1321
|
+
.fixed-field .field-label,
|
|
1322
|
+
.fixed-field .field-description {
|
|
1323
|
+
width: 16.59375rem;
|
|
1324
|
+
height: 1.0625rem;
|
|
1325
|
+
overflow: hidden;
|
|
1326
|
+
white-space: nowrap;
|
|
1327
|
+
text-overflow: ellipsis;
|
|
1328
|
+
}
|
|
1329
|
+
.fixed-field .field-label {
|
|
1330
|
+
margin-bottom: 0.25rem;
|
|
1331
|
+
}
|
|
1332
|
+
.fixed-field .field-description {
|
|
1333
|
+
margin-bottom: 0.5rem;
|
|
1334
|
+
}
|
|
1335
|
+
.fixed-field sl-input {
|
|
1336
|
+
width: 16.59375rem;
|
|
1337
|
+
}
|
|
1338
|
+
.fixed-field sl-input::part(base) {
|
|
1339
|
+
height: 2.5rem;
|
|
1340
|
+
}
|
|
1341
|
+
.fixed-field sl-input::part(input) {
|
|
1342
|
+
font-size: 0.875rem;
|
|
1343
|
+
}
|
|
1344
|
+
`];
|
|
1345
|
+
}
|
|
1346
|
+
renderFixedField() {
|
|
1347
|
+
const containerClass = this.hasError ? "input-error" : "";
|
|
1348
|
+
return html`
|
|
1349
|
+
<div class="fixed-field">
|
|
1350
|
+
<div class="flex items-baseline gap-2 field-label">
|
|
1351
|
+
<p class="text-(--axebow-error) text-base leading-[1.0625rem] m-0">${this.required ? "*" : ""}</p>
|
|
1352
|
+
<h4 class="font-semibold text-base leading-[1.0625rem] m-0 overflow-hidden text-ellipsis">${this.label}</h4>
|
|
1353
|
+
</div>
|
|
1354
|
+
<p class="field-description text-base leading-[1.0625rem] m-0" title="${this.description}">
|
|
1355
|
+
${this.description}
|
|
1356
|
+
</p>
|
|
1357
|
+
<div class="${containerClass}">
|
|
1358
|
+
<sl-input
|
|
1359
|
+
@sl-input="${this.handleChange}"
|
|
1360
|
+
placeholder="${this.placeholder}"
|
|
1361
|
+
.value="${this.value}"
|
|
1362
|
+
?disabled="${this.disabled}"
|
|
1363
|
+
maxlength="${this.maxlength ?? 255}"
|
|
1364
|
+
></sl-input>
|
|
1365
|
+
</div>
|
|
1366
|
+
${this.hasError && this.errorMessage ? html`<div class="mt-1 min-h-5 text-(--axebow-error) text-sm flex items-center gap-1">
|
|
1367
|
+
<span class="text-base shrink-0"
|
|
1368
|
+
><axebow-icon iconName="error" iconColor="var(--axebow-error)"></axebow-icon
|
|
1369
|
+
></span>
|
|
1370
|
+
${this.errorMessage}
|
|
1371
|
+
</div>` : ""}
|
|
1372
|
+
</div>
|
|
1373
|
+
`;
|
|
1374
|
+
}
|
|
1375
|
+
render() {
|
|
1376
|
+
if (this.label && this.description && !this.compact) return this.renderFixedField();
|
|
1377
|
+
const containerClass = this.hasError ? "input-error" : "";
|
|
1378
|
+
return this.renderWrapper(html`
|
|
1379
|
+
<div class="${containerClass}">
|
|
1380
|
+
<sl-input
|
|
1381
|
+
@sl-input="${this.handleChange}"
|
|
1382
|
+
placeholder="${this.placeholder}"
|
|
1383
|
+
.value="${this.value}"
|
|
1384
|
+
?disabled="${this.disabled}"
|
|
1385
|
+
maxlength="${this.maxlength ?? 255}"
|
|
1386
|
+
></sl-input>
|
|
1387
|
+
</div>
|
|
1388
|
+
`);
|
|
1389
|
+
}
|
|
1390
|
+
};
|
|
1391
|
+
AxebowTextInput = __decorate([customElement("axebow-text-input")], AxebowTextInput);
|
|
1392
|
+
//#endregion
|
|
1393
|
+
//#region src/components/axebow-input/axebow-numeric-input.ts
|
|
1394
|
+
var AxebowNumericInput = class AxebowNumericInput extends AxebowInputBase {
|
|
1395
|
+
constructor(..._args) {
|
|
1396
|
+
super(..._args);
|
|
1397
|
+
this.max = Number.MAX_SAFE_INTEGER;
|
|
1398
|
+
this.min = 0;
|
|
1399
|
+
this.integerOnly = false;
|
|
1400
|
+
}
|
|
1401
|
+
static {
|
|
1402
|
+
this.styles = [...AxebowInputBase.baseStyles];
|
|
1403
|
+
}
|
|
1404
|
+
handleChange(e) {
|
|
1405
|
+
if (this.disabled) return;
|
|
1406
|
+
if (this.integerOnly) {
|
|
1407
|
+
const target = e.target;
|
|
1408
|
+
let truncated = Math.trunc(Number(target.value));
|
|
1409
|
+
if (truncated > this.max) truncated = this.max;
|
|
1410
|
+
target.value = truncated.toString();
|
|
1411
|
+
this.value = target.value;
|
|
1412
|
+
this.callback?.(e);
|
|
1413
|
+
return;
|
|
1414
|
+
}
|
|
1415
|
+
super.handleChange(e);
|
|
1416
|
+
}
|
|
1417
|
+
handleKeyDown(e) {
|
|
1418
|
+
if (this.integerOnly && (e.key === "." || e.key === "," || e.key === "e" || e.key === "E")) e.preventDefault();
|
|
1419
|
+
}
|
|
1420
|
+
render() {
|
|
1421
|
+
const containerClass = this.hasError ? "input-error" : "";
|
|
1422
|
+
return this.renderWrapper(html`
|
|
1423
|
+
<div class="${containerClass}">
|
|
1424
|
+
<sl-input
|
|
1425
|
+
type="number"
|
|
1426
|
+
placeholder="${this.placeholder}"
|
|
1427
|
+
@sl-input="${this.handleChange}"
|
|
1428
|
+
@keydown="${this.handleKeyDown}"
|
|
1429
|
+
.value="${live(this.value)}"
|
|
1430
|
+
?disabled="${this.disabled}"
|
|
1431
|
+
max=${this.max}
|
|
1432
|
+
min=${this.min}
|
|
1433
|
+
step=${this.integerOnly ? "1" : "any"}
|
|
1434
|
+
></sl-input>
|
|
1435
|
+
</div>
|
|
1436
|
+
`);
|
|
1437
|
+
}
|
|
1438
|
+
};
|
|
1439
|
+
__decorate([property({ type: Number })], AxebowNumericInput.prototype, "max", void 0);
|
|
1440
|
+
__decorate([property({ type: Number })], AxebowNumericInput.prototype, "min", void 0);
|
|
1441
|
+
__decorate([property({ type: Boolean })], AxebowNumericInput.prototype, "integerOnly", void 0);
|
|
1442
|
+
AxebowNumericInput = __decorate([customElement("axebow-numeric-input")], AxebowNumericInput);
|
|
1443
|
+
//#endregion
|
|
1444
|
+
//#region src/components/axebow-input/axebow-checkbox-input.ts
|
|
1445
|
+
var AxebowCheckboxInput = class AxebowCheckboxInput extends AxebowInputBase {
|
|
1446
|
+
constructor(..._args) {
|
|
1447
|
+
super(..._args);
|
|
1448
|
+
this.options = [];
|
|
1449
|
+
}
|
|
1450
|
+
static {
|
|
1451
|
+
this.styles = [...AxebowInputBase.baseStyles, css`
|
|
1452
|
+
sl-checkbox::part(base) {
|
|
1453
|
+
display: flex;
|
|
1454
|
+
align-items: flex-start;
|
|
1455
|
+
margin-bottom: 20px;
|
|
1456
|
+
margin-top: 0;
|
|
1457
|
+
}
|
|
1458
|
+
sl-checkbox::part(control) {
|
|
1459
|
+
margin-top: 0 !important;
|
|
1460
|
+
margin-bottom: 0 !important;
|
|
1461
|
+
}
|
|
1462
|
+
sl-checkbox::part(label) {
|
|
1463
|
+
display: flex;
|
|
1464
|
+
align-items: center;
|
|
1465
|
+
}
|
|
1466
|
+
`];
|
|
1467
|
+
}
|
|
1468
|
+
render() {
|
|
1469
|
+
return this.renderWrapper(html`
|
|
1470
|
+
<div class="flex items-center gap-12 mt-6 ml-12">
|
|
1471
|
+
${this.options.map((opt) => html`
|
|
1472
|
+
<sl-checkbox
|
|
1473
|
+
.value=${opt.value}
|
|
1474
|
+
.checked=${this.value === opt.value}
|
|
1475
|
+
@sl-input=${(e) => {
|
|
1476
|
+
if (this.disabled) return;
|
|
1477
|
+
this.value = e.target.value;
|
|
1478
|
+
this.requestUpdate();
|
|
1479
|
+
this.callback?.(e);
|
|
1480
|
+
}}
|
|
1481
|
+
?disabled=${this.disabled}
|
|
1482
|
+
>
|
|
1483
|
+
${opt.label}
|
|
1484
|
+
</sl-checkbox>
|
|
1485
|
+
`)}
|
|
1486
|
+
</div>
|
|
1487
|
+
`);
|
|
1488
|
+
}
|
|
1489
|
+
};
|
|
1490
|
+
__decorate([property({ type: Array })], AxebowCheckboxInput.prototype, "options", void 0);
|
|
1491
|
+
AxebowCheckboxInput = __decorate([customElement("axebow-checkbox-input")], AxebowCheckboxInput);
|
|
1492
|
+
//#endregion
|
|
1493
|
+
//#region src/components/axebow-input/axebow-carousel-input.ts
|
|
1494
|
+
var AxebowCarouselInput = class AxebowCarouselInput extends AxebowInputBase {
|
|
1495
|
+
constructor(..._args) {
|
|
1496
|
+
super(..._args);
|
|
1497
|
+
this.carouselItems = [];
|
|
1498
|
+
this.slidesPerPage = 3.4;
|
|
1499
|
+
}
|
|
1500
|
+
static {
|
|
1501
|
+
this.styles = [...AxebowInputBase.baseStyles, css`
|
|
1502
|
+
sl-carousel-item > div {
|
|
1503
|
+
width: 100%;
|
|
1504
|
+
box-sizing: border-box;
|
|
1505
|
+
}
|
|
1506
|
+
`];
|
|
1507
|
+
}
|
|
1508
|
+
connectedCallback() {
|
|
1509
|
+
super.connectedCallback();
|
|
1510
|
+
this.updateSlidesPerPage();
|
|
1511
|
+
this.resizeObserver = new ResizeObserver(() => this.updateSlidesPerPage());
|
|
1512
|
+
this.resizeObserver.observe(document.body);
|
|
1513
|
+
}
|
|
1514
|
+
disconnectedCallback() {
|
|
1515
|
+
super.disconnectedCallback();
|
|
1516
|
+
this.resizeObserver?.disconnect();
|
|
1517
|
+
}
|
|
1518
|
+
updateSlidesPerPage() {
|
|
1519
|
+
const width = window.innerWidth;
|
|
1520
|
+
let newSlidesPerPage;
|
|
1521
|
+
if (width < 480) newSlidesPerPage = 1.5;
|
|
1522
|
+
else if (width < 640) newSlidesPerPage = 2;
|
|
1523
|
+
else if (width < 768) newSlidesPerPage = 3;
|
|
1524
|
+
else if (width < 1024) newSlidesPerPage = 4;
|
|
1525
|
+
else if (width < 1400) newSlidesPerPage = 5;
|
|
1526
|
+
else newSlidesPerPage = 6;
|
|
1527
|
+
if (this.slidesPerPage !== newSlidesPerPage) {
|
|
1528
|
+
this.slidesPerPage = newSlidesPerPage;
|
|
1529
|
+
this.requestUpdate();
|
|
1530
|
+
}
|
|
1531
|
+
}
|
|
1532
|
+
render() {
|
|
1533
|
+
return this.renderWrapper(html`
|
|
1534
|
+
<div class="flex flex-wrap gap-4 justify-between">
|
|
1535
|
+
<sl-carousel
|
|
1536
|
+
class="flex gap-5 w-full"
|
|
1537
|
+
navigation
|
|
1538
|
+
slides-per-page="${this.slidesPerPage}"
|
|
1539
|
+
@sl-input="${this.handleChange}"
|
|
1540
|
+
.value="${this.value}"
|
|
1541
|
+
?disabled="${this.disabled}"
|
|
1542
|
+
>
|
|
1543
|
+
${this.carouselItems.map((item) => this.carouselItemRenderer ? this.carouselItemRenderer(item) : html`
|
|
1544
|
+
<sl-carousel-item>
|
|
1545
|
+
<div
|
|
1546
|
+
class="rounded-lg border-2 border-solid border-transparent p-4 transition-all duration-300 cursor-pointer text-center flex gap-4 items-center"
|
|
1547
|
+
>
|
|
1548
|
+
${item.content}
|
|
1549
|
+
</div>
|
|
1550
|
+
</sl-carousel-item>
|
|
1551
|
+
`)}
|
|
1552
|
+
</sl-carousel>
|
|
1553
|
+
</div>
|
|
1554
|
+
`);
|
|
1555
|
+
}
|
|
1556
|
+
};
|
|
1557
|
+
__decorate([property({ type: Array })], AxebowCarouselInput.prototype, "carouselItems", void 0);
|
|
1558
|
+
__decorate([property({ attribute: false })], AxebowCarouselInput.prototype, "carouselItemRenderer", void 0);
|
|
1559
|
+
__decorate([state()], AxebowCarouselInput.prototype, "slidesPerPage", void 0);
|
|
1560
|
+
AxebowCarouselInput = __decorate([customElement("axebow-carousel-input")], AxebowCarouselInput);
|
|
1561
|
+
//#endregion
|
|
1562
|
+
//#region src/components/axebow-input/axebow-providers-input.ts
|
|
1563
|
+
var AxebowProvidersInput = class AxebowProvidersInput extends AxebowInputBase {
|
|
1564
|
+
constructor(..._args) {
|
|
1565
|
+
super(..._args);
|
|
1566
|
+
this.carouselItems = [];
|
|
1567
|
+
}
|
|
1568
|
+
static {
|
|
1569
|
+
this.styles = [...AxebowInputBase.baseStyles];
|
|
1570
|
+
}
|
|
1571
|
+
render() {
|
|
1572
|
+
return this.renderWrapper(html`
|
|
1573
|
+
<div class="flex flex-wrap gap-3 mt-0">
|
|
1574
|
+
${this.carouselItems.map((item) => this.carouselItemRenderer ? this.carouselItemRenderer(item) : html`
|
|
1575
|
+
<div>
|
|
1576
|
+
<img src="${item.content}" alt="${item.id}" />
|
|
1577
|
+
<p>${item.id}</p>
|
|
1578
|
+
</div>
|
|
1579
|
+
`)}
|
|
1580
|
+
</div>
|
|
1581
|
+
`);
|
|
1582
|
+
}
|
|
1583
|
+
};
|
|
1584
|
+
__decorate([property({ type: Array })], AxebowProvidersInput.prototype, "carouselItems", void 0);
|
|
1585
|
+
__decorate([property({ attribute: false })], AxebowProvidersInput.prototype, "carouselItemRenderer", void 0);
|
|
1586
|
+
AxebowProvidersInput = __decorate([customElement("axebow-providers-input")], AxebowProvidersInput);
|
|
1587
|
+
//#endregion
|
|
1588
|
+
//#region src/components/axebow-input/axebow-select-input.ts
|
|
1589
|
+
var DEFAULT_ADD_DIALOG_LABELS = {
|
|
1590
|
+
title: "Add New Item",
|
|
1591
|
+
intro: "Enter the information for the new item.",
|
|
1592
|
+
nameLabel: "Name",
|
|
1593
|
+
namePlaceholder: "",
|
|
1594
|
+
requiredField: "This field is required",
|
|
1595
|
+
duplicateItem: "An item with this name already exists",
|
|
1596
|
+
cancel: "Cancel",
|
|
1597
|
+
save: "Save"
|
|
1598
|
+
};
|
|
1599
|
+
var AxebowSelectInput = class AxebowSelectInput extends AxebowInputBase {
|
|
1600
|
+
constructor(..._args) {
|
|
1601
|
+
super(..._args);
|
|
1602
|
+
this.options = [];
|
|
1603
|
+
this.allowAddNew = false;
|
|
1604
|
+
this.addNewLabel = "+ Add new...";
|
|
1605
|
+
this.emptyOptionLabel = "Select option";
|
|
1606
|
+
this.showAddDialogInside = true;
|
|
1607
|
+
this.clearable = true;
|
|
1608
|
+
this.addDialogLabels = DEFAULT_ADD_DIALOG_LABELS;
|
|
1609
|
+
this.showAddDialog = false;
|
|
1610
|
+
this.newItemName = "";
|
|
1611
|
+
this.newItemDescription = "";
|
|
1612
|
+
}
|
|
1613
|
+
static {
|
|
1614
|
+
this.styles = [...AxebowInputBase.baseStyles, css`
|
|
1615
|
+
.add-option {
|
|
1616
|
+
font-weight: bold;
|
|
1617
|
+
color: var(--axebow-tertiary);
|
|
1618
|
+
}
|
|
1619
|
+
`];
|
|
1620
|
+
}
|
|
1621
|
+
handleSelectChange(e) {
|
|
1622
|
+
if (this.disabled) return;
|
|
1623
|
+
const target = e.target;
|
|
1624
|
+
if (this.allowAddNew && target.value === "__add_new__") {
|
|
1625
|
+
setTimeout(() => {
|
|
1626
|
+
target.value = this.value;
|
|
1627
|
+
}, 0);
|
|
1628
|
+
if (this.showAddDialogInside) {
|
|
1629
|
+
this.showAddDialog = true;
|
|
1630
|
+
this.updateComplete.then(() => {
|
|
1631
|
+
const input = this.shadowRoot?.querySelector("#new-item-input");
|
|
1632
|
+
setTimeout(() => input?.focus(), 100);
|
|
1633
|
+
});
|
|
1634
|
+
} else this.onAddNew?.({
|
|
1635
|
+
value: "__add_new__",
|
|
1636
|
+
label: this.addNewLabel
|
|
1637
|
+
});
|
|
1638
|
+
return;
|
|
1639
|
+
}
|
|
1640
|
+
this.handleChange(e);
|
|
1641
|
+
}
|
|
1642
|
+
createSlug(name) {
|
|
1643
|
+
return name.toLowerCase().normalize("NFD").replace(/* @__PURE__ */ new RegExp("[\\u0300-\\u036f]", "g"), "").replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
|
|
1644
|
+
}
|
|
1645
|
+
saveNewItem() {
|
|
1646
|
+
const input = this.shadowRoot?.querySelector("#new-item-input");
|
|
1647
|
+
if (!this.newItemName.trim()) {
|
|
1648
|
+
input?.setCustomValidity(this.addDialogLabels.requiredField);
|
|
1649
|
+
input?.reportValidity();
|
|
1650
|
+
return;
|
|
1651
|
+
}
|
|
1652
|
+
input?.setCustomValidity("");
|
|
1653
|
+
const itemValue = this.createSlug(this.newItemName);
|
|
1654
|
+
if (this.options.find((opt) => opt.value === itemValue)) {
|
|
1655
|
+
input?.setCustomValidity(this.addDialogLabels.duplicateItem);
|
|
1656
|
+
input?.reportValidity();
|
|
1657
|
+
return;
|
|
1658
|
+
}
|
|
1659
|
+
const newItem = {
|
|
1660
|
+
value: itemValue,
|
|
1661
|
+
label: this.newItemName.trim(),
|
|
1662
|
+
description: this.newItemDescription.trim()
|
|
1663
|
+
};
|
|
1664
|
+
this.onAddNew?.(newItem);
|
|
1665
|
+
this.closeAddDialog();
|
|
1666
|
+
}
|
|
1667
|
+
cancelNewItem() {
|
|
1668
|
+
this.closeAddDialog();
|
|
1669
|
+
}
|
|
1670
|
+
closeAddDialog() {
|
|
1671
|
+
this.showAddDialog = false;
|
|
1672
|
+
this.newItemName = "";
|
|
1673
|
+
this.newItemDescription = "";
|
|
1674
|
+
(this.shadowRoot?.querySelector("#new-item-input"))?.setCustomValidity("");
|
|
1675
|
+
}
|
|
1676
|
+
handleDialogKeydown(e) {
|
|
1677
|
+
if (e.key === "Enter" && !e.shiftKey) {
|
|
1678
|
+
e.preventDefault();
|
|
1679
|
+
this.saveNewItem();
|
|
1680
|
+
}
|
|
1681
|
+
}
|
|
1682
|
+
render() {
|
|
1683
|
+
const containerClass = this.hasError ? "input-error" : "";
|
|
1684
|
+
const selectOptions = this.allowAddNew ? [...this.options, {
|
|
1685
|
+
value: "__add_new__",
|
|
1686
|
+
label: this.addNewLabel
|
|
1687
|
+
}] : this.options;
|
|
1688
|
+
const selectTemplate = html`
|
|
1689
|
+
<div class="${containerClass}">
|
|
1690
|
+
<sl-select
|
|
1691
|
+
placeholder="${this.placeholder || this.emptyOptionLabel}"
|
|
1692
|
+
@sl-input="${this.allowAddNew ? this.handleSelectChange : this.handleChange}"
|
|
1693
|
+
.value="${this.value}"
|
|
1694
|
+
?disabled="${this.disabled}"
|
|
1695
|
+
?clearable=${this.clearable}
|
|
1696
|
+
>
|
|
1697
|
+
${selectOptions.map((opt) => html`<sl-option value="${opt.value}" class="${opt.value === "__add_new__" ? "add-option" : ""}"
|
|
1698
|
+
>${opt.label}</sl-option
|
|
1699
|
+
>`)}
|
|
1700
|
+
</sl-select>
|
|
1701
|
+
</div>
|
|
1702
|
+
`;
|
|
1703
|
+
const dialogTemplate = this.allowAddNew ? html`
|
|
1704
|
+
<sl-dialog
|
|
1705
|
+
?open="${this.showAddDialog}"
|
|
1706
|
+
label="${this.addDialogLabels.title}"
|
|
1707
|
+
@sl-after-hide="${this.closeAddDialog}"
|
|
1708
|
+
>
|
|
1709
|
+
<div class="flex flex-col gap-4">
|
|
1710
|
+
<p>${this.addDialogLabels.intro}</p>
|
|
1711
|
+
<sl-input
|
|
1712
|
+
id="new-item-input"
|
|
1713
|
+
label="${this.addDialogLabels.nameLabel}"
|
|
1714
|
+
placeholder="${this.addDialogLabels.namePlaceholder}"
|
|
1715
|
+
.value="${this.newItemName}"
|
|
1716
|
+
@sl-input="${(e) => {
|
|
1717
|
+
this.newItemName = e.target.value;
|
|
1718
|
+
}}"
|
|
1719
|
+
@keydown="${this.handleDialogKeydown}"
|
|
1720
|
+
required
|
|
1721
|
+
maxlength="100"
|
|
1722
|
+
></sl-input>
|
|
1723
|
+
</div>
|
|
1724
|
+
<div class="flex justify-end gap-3 mt-6" slot="footer">
|
|
1725
|
+
<axebow-button variant="default" @click="${this.cancelNewItem}"
|
|
1726
|
+
>${this.addDialogLabels.cancel}</axebow-button
|
|
1727
|
+
>
|
|
1728
|
+
<axebow-button variant="primary" @click="${this.saveNewItem}"
|
|
1729
|
+
>${this.addDialogLabels.save}</axebow-button
|
|
1730
|
+
>
|
|
1731
|
+
</div>
|
|
1732
|
+
</sl-dialog>
|
|
1733
|
+
` : "";
|
|
1734
|
+
return this.renderWrapper(html`${selectTemplate}${dialogTemplate}`);
|
|
1735
|
+
}
|
|
1736
|
+
};
|
|
1737
|
+
__decorate([property({ type: Array })], AxebowSelectInput.prototype, "options", void 0);
|
|
1738
|
+
__decorate([property({ type: Boolean })], AxebowSelectInput.prototype, "allowAddNew", void 0);
|
|
1739
|
+
__decorate([property({ type: String })], AxebowSelectInput.prototype, "addNewLabel", void 0);
|
|
1740
|
+
__decorate([property({ type: String })], AxebowSelectInput.prototype, "emptyOptionLabel", void 0);
|
|
1741
|
+
__decorate([property({ type: Boolean })], AxebowSelectInput.prototype, "showAddDialogInside", void 0);
|
|
1742
|
+
__decorate([property({ type: Boolean })], AxebowSelectInput.prototype, "clearable", void 0);
|
|
1743
|
+
__decorate([property({ attribute: false })], AxebowSelectInput.prototype, "onAddNew", void 0);
|
|
1744
|
+
__decorate([property({ attribute: false })], AxebowSelectInput.prototype, "addDialogLabels", void 0);
|
|
1745
|
+
__decorate([state()], AxebowSelectInput.prototype, "showAddDialog", void 0);
|
|
1746
|
+
__decorate([state()], AxebowSelectInput.prototype, "newItemName", void 0);
|
|
1747
|
+
__decorate([state()], AxebowSelectInput.prototype, "newItemDescription", void 0);
|
|
1748
|
+
AxebowSelectInput = __decorate([customElement("axebow-select-input")], AxebowSelectInput);
|
|
1749
|
+
//#endregion
|
|
1750
|
+
//#region src/components/axebow-input/axebow-input.ts
|
|
1751
|
+
var AxebowInput = class AxebowInput extends LitElement {
|
|
1752
|
+
constructor(..._args) {
|
|
1753
|
+
super(..._args);
|
|
1754
|
+
this.value = "";
|
|
1755
|
+
this.placeholder = "";
|
|
1756
|
+
this.label = "";
|
|
1757
|
+
this.description = "";
|
|
1758
|
+
this.required = false;
|
|
1759
|
+
this.controlType = "input";
|
|
1760
|
+
this.options = [];
|
|
1761
|
+
this.carouselItems = [];
|
|
1762
|
+
this.disabled = false;
|
|
1763
|
+
this.errorMessage = "";
|
|
1764
|
+
this.hasError = false;
|
|
1765
|
+
this.max = Number.MAX_SAFE_INTEGER;
|
|
1766
|
+
this.min = 0;
|
|
1767
|
+
this.allowAddNew = false;
|
|
1768
|
+
this.addNewLabel = "+ Add new...";
|
|
1769
|
+
this.emptyOptionLabel = "Select option";
|
|
1770
|
+
this.showAddDialogInside = true;
|
|
1771
|
+
this.clearable = true;
|
|
1772
|
+
this.addDialogLabels = DEFAULT_ADD_DIALOG_LABELS;
|
|
1773
|
+
this.compact = false;
|
|
1774
|
+
this.integerOnly = false;
|
|
1775
|
+
}
|
|
1776
|
+
static {
|
|
1777
|
+
this.styles = [
|
|
1778
|
+
unsafeCSS(tailwind_default),
|
|
1779
|
+
axebowTheme,
|
|
1780
|
+
css`
|
|
1781
|
+
sl-input,
|
|
1782
|
+
sl-select {
|
|
1783
|
+
width: 100%;
|
|
1784
|
+
}
|
|
1785
|
+
`
|
|
1786
|
+
];
|
|
1787
|
+
}
|
|
1788
|
+
render() {
|
|
1789
|
+
switch (this.controlType) {
|
|
1790
|
+
case "input": return html`
|
|
1791
|
+
<axebow-text-input
|
|
1792
|
+
.value=${this.value}
|
|
1793
|
+
.placeholder=${this.placeholder}
|
|
1794
|
+
.label=${this.label}
|
|
1795
|
+
.description=${this.description}
|
|
1796
|
+
.required=${this.required}
|
|
1797
|
+
.disabled=${this.disabled}
|
|
1798
|
+
.hasError=${this.hasError}
|
|
1799
|
+
.errorMessage=${this.errorMessage}
|
|
1800
|
+
.callback=${this.callback}
|
|
1801
|
+
.maxlength=${this.maxlength}
|
|
1802
|
+
.compact=${this.compact}
|
|
1803
|
+
></axebow-text-input>
|
|
1804
|
+
`;
|
|
1805
|
+
case "numeric": return html`
|
|
1806
|
+
<axebow-numeric-input
|
|
1807
|
+
.value=${this.value}
|
|
1808
|
+
.placeholder=${this.placeholder}
|
|
1809
|
+
.label=${this.label}
|
|
1810
|
+
.description=${this.description}
|
|
1811
|
+
.required=${this.required}
|
|
1812
|
+
.disabled=${this.disabled}
|
|
1813
|
+
.hasError=${this.hasError}
|
|
1814
|
+
.errorMessage=${this.errorMessage}
|
|
1815
|
+
.callback=${this.callback}
|
|
1816
|
+
.max=${this.max}
|
|
1817
|
+
.min=${this.min}
|
|
1818
|
+
.compact=${this.compact}
|
|
1819
|
+
></axebow-numeric-input>
|
|
1820
|
+
`;
|
|
1821
|
+
case "integer": return html`
|
|
1822
|
+
<axebow-numeric-input
|
|
1823
|
+
.value=${this.value}
|
|
1824
|
+
.placeholder=${this.placeholder}
|
|
1825
|
+
.label=${this.label}
|
|
1826
|
+
.description=${this.description}
|
|
1827
|
+
.required=${this.required}
|
|
1828
|
+
.disabled=${this.disabled}
|
|
1829
|
+
.hasError=${this.hasError}
|
|
1830
|
+
.errorMessage=${this.errorMessage}
|
|
1831
|
+
.callback=${this.callback}
|
|
1832
|
+
.max=${this.max}
|
|
1833
|
+
.min=${this.min}
|
|
1834
|
+
.integerOnly=${true}
|
|
1835
|
+
.compact=${this.compact}
|
|
1836
|
+
></axebow-numeric-input>
|
|
1837
|
+
`;
|
|
1838
|
+
case "select": return html`
|
|
1839
|
+
<axebow-select-input
|
|
1840
|
+
.value=${this.value}
|
|
1841
|
+
.placeholder=${this.placeholder}
|
|
1842
|
+
.label=${this.label}
|
|
1843
|
+
.description=${this.description}
|
|
1844
|
+
.required=${this.required}
|
|
1845
|
+
.disabled=${this.disabled}
|
|
1846
|
+
.hasError=${this.hasError}
|
|
1847
|
+
.errorMessage=${this.errorMessage}
|
|
1848
|
+
.callback=${this.callback}
|
|
1849
|
+
.options=${this.options}
|
|
1850
|
+
.allowAddNew=${this.allowAddNew}
|
|
1851
|
+
.addNewLabel=${this.addNewLabel}
|
|
1852
|
+
.emptyOptionLabel=${this.emptyOptionLabel}
|
|
1853
|
+
.showAddDialogInside=${this.showAddDialogInside}
|
|
1854
|
+
.clearable=${this.clearable}
|
|
1855
|
+
.onAddNew=${this.onAddNew}
|
|
1856
|
+
.addDialogLabels=${this.addDialogLabels}
|
|
1857
|
+
></axebow-select-input>
|
|
1858
|
+
`;
|
|
1859
|
+
case "checkbox": return html`
|
|
1860
|
+
<axebow-checkbox-input
|
|
1861
|
+
.value=${this.value}
|
|
1862
|
+
.label=${this.label}
|
|
1863
|
+
.description=${this.description}
|
|
1864
|
+
.required=${this.required}
|
|
1865
|
+
.disabled=${this.disabled}
|
|
1866
|
+
.hasError=${this.hasError}
|
|
1867
|
+
.errorMessage=${this.errorMessage}
|
|
1868
|
+
.callback=${this.callback}
|
|
1869
|
+
.options=${this.options}
|
|
1870
|
+
></axebow-checkbox-input>
|
|
1871
|
+
`;
|
|
1872
|
+
case "carousel": return html`
|
|
1873
|
+
<axebow-carousel-input
|
|
1874
|
+
.value=${this.value}
|
|
1875
|
+
.label=${this.label}
|
|
1876
|
+
.description=${this.description}
|
|
1877
|
+
.required=${this.required}
|
|
1878
|
+
.disabled=${this.disabled}
|
|
1879
|
+
.hasError=${this.hasError}
|
|
1880
|
+
.errorMessage=${this.errorMessage}
|
|
1881
|
+
.callback=${this.callback}
|
|
1882
|
+
.carouselItems=${this.carouselItems}
|
|
1883
|
+
.carouselItemRenderer=${this.carouselItemRenderer}
|
|
1884
|
+
></axebow-carousel-input>
|
|
1885
|
+
`;
|
|
1886
|
+
case "small-input": return html`
|
|
1887
|
+
<sl-input
|
|
1888
|
+
type="number"
|
|
1889
|
+
size="small"
|
|
1890
|
+
min=${this.min}
|
|
1891
|
+
max=${this.max}
|
|
1892
|
+
step=${this.integerOnly ? "1" : "any"}
|
|
1893
|
+
.value=${this.value}
|
|
1894
|
+
?disabled=${this.disabled}
|
|
1895
|
+
style="${this.hasError ? "--sl-input-border-color: var(--axebow-error, #e53e3e); --sl-input-border-color-focus: var(--axebow-error, #e53e3e); --sl-input-border-color-hover: var(--axebow-error, #e53e3e);" : ""}"
|
|
1896
|
+
@sl-input=${(e) => {
|
|
1897
|
+
if (this.disabled) return;
|
|
1898
|
+
if (this.integerOnly) {
|
|
1899
|
+
const target = e.target;
|
|
1900
|
+
let truncated = Math.trunc(Number(target.value));
|
|
1901
|
+
if (truncated > this.max) truncated = this.max;
|
|
1902
|
+
target.value = truncated.toString();
|
|
1903
|
+
}
|
|
1904
|
+
if (this.callback) this.callback(e);
|
|
1905
|
+
}}
|
|
1906
|
+
@keydown=${(e) => {
|
|
1907
|
+
if (this.integerOnly && (e.key === "." || e.key === "," || e.key === "e" || e.key === "E")) e.preventDefault();
|
|
1908
|
+
}}
|
|
1909
|
+
></sl-input>
|
|
1910
|
+
`;
|
|
1911
|
+
case "providers": return html`
|
|
1912
|
+
<axebow-providers-input
|
|
1913
|
+
.value=${this.value}
|
|
1914
|
+
.label=${this.label}
|
|
1915
|
+
.description=${this.description}
|
|
1916
|
+
.required=${this.required}
|
|
1917
|
+
.disabled=${this.disabled}
|
|
1918
|
+
.hasError=${this.hasError}
|
|
1919
|
+
.errorMessage=${this.errorMessage}
|
|
1920
|
+
.callback=${this.callback}
|
|
1921
|
+
.carouselItems=${this.carouselItems}
|
|
1922
|
+
.carouselItemRenderer=${this.carouselItemRenderer}
|
|
1923
|
+
></axebow-providers-input>
|
|
1924
|
+
`;
|
|
1925
|
+
default: return html`
|
|
1926
|
+
<axebow-text-input
|
|
1927
|
+
.value=${this.value}
|
|
1928
|
+
.placeholder=${this.placeholder}
|
|
1929
|
+
.label=${this.label}
|
|
1930
|
+
.description=${this.description}
|
|
1931
|
+
.required=${this.required}
|
|
1932
|
+
.disabled=${this.disabled}
|
|
1933
|
+
.hasError=${this.hasError}
|
|
1934
|
+
.errorMessage=${this.errorMessage}
|
|
1935
|
+
.callback=${this.callback}
|
|
1936
|
+
.maxlength=${this.maxlength}
|
|
1937
|
+
.compact=${this.compact}
|
|
1938
|
+
></axebow-text-input>
|
|
1939
|
+
`;
|
|
1940
|
+
}
|
|
1941
|
+
}
|
|
1942
|
+
};
|
|
1943
|
+
__decorate([property({ type: String })], AxebowInput.prototype, "value", void 0);
|
|
1944
|
+
__decorate([property({ type: String })], AxebowInput.prototype, "placeholder", void 0);
|
|
1945
|
+
__decorate([property({ type: String })], AxebowInput.prototype, "label", void 0);
|
|
1946
|
+
__decorate([property({ type: String })], AxebowInput.prototype, "description", void 0);
|
|
1947
|
+
__decorate([property({ type: Boolean })], AxebowInput.prototype, "required", void 0);
|
|
1948
|
+
__decorate([property({ attribute: false })], AxebowInput.prototype, "callback", void 0);
|
|
1949
|
+
__decorate([property({ type: String })], AxebowInput.prototype, "controlType", void 0);
|
|
1950
|
+
__decorate([property({ type: Array })], AxebowInput.prototype, "options", void 0);
|
|
1951
|
+
__decorate([property({ type: Array })], AxebowInput.prototype, "carouselItems", void 0);
|
|
1952
|
+
__decorate([property({
|
|
1953
|
+
type: Boolean,
|
|
1954
|
+
attribute: false
|
|
1955
|
+
})], AxebowInput.prototype, "disabled", void 0);
|
|
1956
|
+
__decorate([property({ attribute: false })], AxebowInput.prototype, "carouselItemRenderer", void 0);
|
|
1957
|
+
__decorate([property({ type: String })], AxebowInput.prototype, "errorMessage", void 0);
|
|
1958
|
+
__decorate([property({ type: Boolean })], AxebowInput.prototype, "hasError", void 0);
|
|
1959
|
+
__decorate([property({ type: Number })], AxebowInput.prototype, "max", void 0);
|
|
1960
|
+
__decorate([property({ type: Number })], AxebowInput.prototype, "min", void 0);
|
|
1961
|
+
__decorate([property({ type: Number })], AxebowInput.prototype, "maxlength", void 0);
|
|
1962
|
+
__decorate([property({ type: Boolean })], AxebowInput.prototype, "allowAddNew", void 0);
|
|
1963
|
+
__decorate([property({ type: String })], AxebowInput.prototype, "addNewLabel", void 0);
|
|
1964
|
+
__decorate([property({ type: String })], AxebowInput.prototype, "emptyOptionLabel", void 0);
|
|
1965
|
+
__decorate([property({ type: Boolean })], AxebowInput.prototype, "showAddDialogInside", void 0);
|
|
1966
|
+
__decorate([property({ type: Boolean })], AxebowInput.prototype, "clearable", void 0);
|
|
1967
|
+
__decorate([property({ attribute: false })], AxebowInput.prototype, "onAddNew", void 0);
|
|
1968
|
+
__decorate([property({ attribute: false })], AxebowInput.prototype, "addDialogLabels", void 0);
|
|
1969
|
+
__decorate([property({ type: Boolean })], AxebowInput.prototype, "compact", void 0);
|
|
1970
|
+
__decorate([property({ type: Boolean })], AxebowInput.prototype, "integerOnly", void 0);
|
|
1971
|
+
AxebowInput = __decorate([customElement("axebow-input")], AxebowInput);
|
|
1972
|
+
//#endregion
|
|
1221
1973
|
//#region src/components/axebow-more-actions/axebow-more-actions.ts
|
|
1222
1974
|
var AxebowMoreActions = class AxebowMoreActions extends LitElement {
|
|
1223
1975
|
constructor(..._args) {
|
|
@@ -2582,6 +3334,6 @@ __decorate([property({ type: String })], AxebowCardSpecialLink.prototype, "color
|
|
|
2582
3334
|
__decorate([property({ type: String })], AxebowCardSpecialLink.prototype, "icon", void 0);
|
|
2583
3335
|
AxebowCardSpecialLink = __decorate([customElement("axebow-card-special-link")], AxebowCardSpecialLink);
|
|
2584
3336
|
//#endregion
|
|
2585
|
-
export { AxebowBaseCard, AxebowBreadcrumbHeader, AxebowButton, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowFilterBar, AxebowFooter, AxebowHeader, AxebowIcon, AxebowMoreActions, AxebowRoleTooltip, AxebowSearch, AxebowSidebar, STATUS_COLORS, axebowTheme };
|
|
3337
|
+
export { AxebowBaseCard, AxebowBreadcrumbHeader, AxebowButton, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCheckboxInput, AxebowFilterBar, AxebowFooter, AxebowHeader, AxebowIcon, AxebowInput, AxebowInputBase, AxebowMoreActions, AxebowNumericInput, AxebowProvidersInput, AxebowRoleTooltip, AxebowSearch, AxebowSelectInput, AxebowSidebar, AxebowTextInput, DEFAULT_ADD_DIALOG_LABELS, STATUS_COLORS, axebowTheme };
|
|
2586
3338
|
|
|
2587
3339
|
//# sourceMappingURL=index.js.map
|