@kumori/aurora-wui-components 0.0.48 → 0.0.49
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-footer/axebow-footer.d.ts +21 -0
- package/dist/components/axebow-footer/axebow-footer.d.ts.map +1 -0
- package/dist/components/axebow-header/axebow-header.d.ts +70 -0
- package/dist/components/axebow-header/axebow-header.d.ts.map +1 -0
- package/dist/components/axebow-sidebar/axebow-sidebar.d.ts +36 -0
- package/dist/components/axebow-sidebar/axebow-sidebar.d.ts.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +521 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2,6 +2,13 @@ import { LitElement, css, html, unsafeCSS } from "lit";
|
|
|
2
2
|
import { customElement, property, state } from "lit/decorators.js";
|
|
3
3
|
import "@shoelace-style/shoelace/dist/components/select/select.js";
|
|
4
4
|
import "@shoelace-style/shoelace/dist/components/option/option.js";
|
|
5
|
+
import "@shoelace-style/shoelace/dist/components/dropdown/dropdown.js";
|
|
6
|
+
import "@shoelace-style/shoelace/dist/components/menu/menu.js";
|
|
7
|
+
import "@shoelace-style/shoelace/dist/components/switch/switch.js";
|
|
8
|
+
import "@shoelace-style/shoelace/dist/components/tab-group/tab-group.js";
|
|
9
|
+
import "@shoelace-style/shoelace/dist/components/tab/tab.js";
|
|
10
|
+
import "@shoelace-style/shoelace/dist/components/tab-panel/tab-panel.js";
|
|
11
|
+
import "@shoelace-style/shoelace/dist/components/divider/divider.js";
|
|
5
12
|
import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
|
|
6
13
|
import "@shoelace-style/shoelace/dist/components/badge/badge.js";
|
|
7
14
|
import "@shoelace-style/shoelace/dist/components/spinner/spinner.js";
|
|
@@ -103,7 +110,7 @@ var STATUS_COLORS = {
|
|
|
103
110
|
};
|
|
104
111
|
//#endregion
|
|
105
112
|
//#region src/styles/tailwind.css?inline
|
|
106
|
-
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-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-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-3xl: 1.875rem;\n --text-5xl: 3rem;\n --font-weight-normal: 400;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --leading-snug: 1.375;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\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 }\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 .absolute {\n position: absolute;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .top-full {\n top: 100%;\n }\n\n .right-0 {\n right: 0;\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .z-10 {\n z-index: 10;\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 .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 .mb-1 {\n margin-bottom: var(--spacing);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\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-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-11\\.25 {\n height: calc(var(--spacing) * 11.25);\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-full {\n height: 100%;\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-full {\n max-height: 100%;\n }\n\n .min-h-10 {\n min-height: calc(var(--spacing) * 10);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\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-full {\n width: 100%;\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-36 {\n min-width: calc(var(--spacing) * 36);\n }\n\n .min-w-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\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 .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\\.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-2 {\n column-gap: calc(var(--spacing) * 2);\n }\n\n .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\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-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-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-\\(--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-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-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-white\\) {\n background-color: var(--axebow-white);\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-2 {\n padding: calc(var(--spacing) * 2);\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-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-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 .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-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 .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 .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\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-black {\n color: var(--color-black);\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-100 {\n opacity: 1;\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 .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 .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-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 .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 .hover\\:rounded-lg:hover {\n border-radius: var(--radius-lg);\n }\n\n .hover\\:bg-\\(--axebow-light-gray\\):hover {\n background-color: var(--axebow-light-gray);\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\\:text-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\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\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-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";
|
|
113
|
+
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-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-18: 4.5rem;\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 .invisible {\n visibility: hidden;\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-\\[50\\%\\] {\n top: 50%;\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-18 {\n left: var(--spacing-18);\n }\n\n .left-\\[-7px\\] {\n left: -7px;\n }\n\n .left-\\[calc\\(100\\%\\+0\\.5rem\\)\\] {\n left: calc(100% + .5rem);\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-0\\.75 {\n margin-block: calc(var(--spacing) * .75);\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-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-16 {\n width: calc(var(--spacing) * 16);\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-\\[calc\\(100\\%-10px\\)\\] {\n width: calc(100% - 10px);\n }\n\n .w-auto {\n width: auto;\n }\n\n .w-full {\n width: 100%;\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-99 {\n min-width: calc(var(--spacing) * 99);\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-2 {\n column-gap: calc(var(--spacing) * 2);\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-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-gray-200 {\n background-color: var(--color-gray-200);\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 .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-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\\:visible:is(:where(.group):hover *) {\n visibility: visible;\n }\n\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\\: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";
|
|
107
114
|
//#endregion
|
|
108
115
|
//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
|
|
109
116
|
function __decorate(decorators, target, key, desc) {
|
|
@@ -272,6 +279,518 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
272
279
|
__decorate([property({ type: Array })], AxebowFilterBar.prototype, "items", void 0);
|
|
273
280
|
AxebowFilterBar = __decorate([customElement("axebow-filter-bar")], AxebowFilterBar);
|
|
274
281
|
//#endregion
|
|
282
|
+
//#region src/components/axebow-header/axebow-header.ts
|
|
283
|
+
var QUICK_ACTIONS_ROWS = [
|
|
284
|
+
[
|
|
285
|
+
0,
|
|
286
|
+
1,
|
|
287
|
+
2
|
|
288
|
+
],
|
|
289
|
+
[
|
|
290
|
+
3,
|
|
291
|
+
null,
|
|
292
|
+
null
|
|
293
|
+
],
|
|
294
|
+
[
|
|
295
|
+
null,
|
|
296
|
+
null,
|
|
297
|
+
null
|
|
298
|
+
]
|
|
299
|
+
];
|
|
300
|
+
var AxebowHeader = class AxebowHeader extends LitElement {
|
|
301
|
+
constructor(..._args) {
|
|
302
|
+
super(..._args);
|
|
303
|
+
this.minimal = false;
|
|
304
|
+
this.logoUrl = "";
|
|
305
|
+
this.logoAlt = "";
|
|
306
|
+
this.onLogoClick = () => {};
|
|
307
|
+
this.userName = "";
|
|
308
|
+
this.quickActionsLabel = "";
|
|
309
|
+
this.quickActions = [];
|
|
310
|
+
this.profileMenuItems = [];
|
|
311
|
+
this.logoutLabel = "";
|
|
312
|
+
this.onLogout = () => {};
|
|
313
|
+
this.notificationsLabel = "";
|
|
314
|
+
this.notifications = [];
|
|
315
|
+
this.actionNeededNotifications = [];
|
|
316
|
+
this.myNotificationsTabLabel = "";
|
|
317
|
+
this.actionNeededTabLabel = "";
|
|
318
|
+
this.noNotificationsLabel = "";
|
|
319
|
+
this.noUnreadNotificationsLabel = "";
|
|
320
|
+
this.noActionNotificationsLabel = "";
|
|
321
|
+
this.showUnreadOnlyLabel = "";
|
|
322
|
+
this.onLabel = "";
|
|
323
|
+
this.offLabel = "";
|
|
324
|
+
this.markAllAsReadLabel = "";
|
|
325
|
+
this.onMarkAllAsRead = () => {};
|
|
326
|
+
this.quickActionsOpen = false;
|
|
327
|
+
this.showUnreadOnly = false;
|
|
328
|
+
this.handleClickOutside = (event) => {
|
|
329
|
+
if (!this.quickActionsOpen) return;
|
|
330
|
+
const target = event.target;
|
|
331
|
+
const quickActionsContainer = this.shadowRoot?.querySelector("[data-quick-actions-trigger]");
|
|
332
|
+
if (quickActionsContainer && !quickActionsContainer.contains(target)) {
|
|
333
|
+
this.quickActionsOpen = false;
|
|
334
|
+
this.requestUpdate();
|
|
335
|
+
}
|
|
336
|
+
};
|
|
337
|
+
}
|
|
338
|
+
static {
|
|
339
|
+
this.styles = [
|
|
340
|
+
unsafeCSS(tailwind_default),
|
|
341
|
+
axebowTheme,
|
|
342
|
+
css`
|
|
343
|
+
sl-dropdown::part(panel) {
|
|
344
|
+
max-width: 500px;
|
|
345
|
+
}
|
|
346
|
+
.notification-description code {
|
|
347
|
+
display: inline-block;
|
|
348
|
+
white-space: pre-wrap;
|
|
349
|
+
word-break: break-all;
|
|
350
|
+
}
|
|
351
|
+
.notification-description pre {
|
|
352
|
+
white-space: pre-wrap;
|
|
353
|
+
}
|
|
354
|
+
`
|
|
355
|
+
];
|
|
356
|
+
}
|
|
357
|
+
connectedCallback() {
|
|
358
|
+
super.connectedCallback();
|
|
359
|
+
document.addEventListener("click", this.handleClickOutside);
|
|
360
|
+
}
|
|
361
|
+
disconnectedCallback() {
|
|
362
|
+
super.disconnectedCallback();
|
|
363
|
+
document.removeEventListener("click", this.handleClickOutside);
|
|
364
|
+
}
|
|
365
|
+
toggleQuickActions(event) {
|
|
366
|
+
event.stopPropagation();
|
|
367
|
+
this.quickActionsOpen = !this.quickActionsOpen;
|
|
368
|
+
}
|
|
369
|
+
handleQuickActionClick(action) {
|
|
370
|
+
action.onClick();
|
|
371
|
+
this.quickActionsOpen = false;
|
|
372
|
+
}
|
|
373
|
+
handleShowUnreadOnlyChange(e) {
|
|
374
|
+
this.showUnreadOnly = e.target.checked;
|
|
375
|
+
}
|
|
376
|
+
render() {
|
|
377
|
+
const unreadNotifications = this.notifications.filter((n) => n.status === "unread");
|
|
378
|
+
const notificationsToShow = this.showUnreadOnly ? unreadNotifications : this.notifications;
|
|
379
|
+
return html`
|
|
380
|
+
<header class="relative flex items-center justify-between h-full pe-4 py-2">
|
|
381
|
+
${this.minimal ? html`
|
|
382
|
+
<div
|
|
383
|
+
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-5 cursor-pointer hover:opacity-80 transition-opacity duration-200"
|
|
384
|
+
@click=${() => this.onLogoClick()}
|
|
385
|
+
>
|
|
386
|
+
<div class="flex items-center gap-2 text-white">
|
|
387
|
+
<img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
` : html`
|
|
391
|
+
<div
|
|
392
|
+
class="flex flex-col items-center justify-center text-xs relative group w-16 h-16 cursor-pointer"
|
|
393
|
+
data-quick-actions-trigger
|
|
394
|
+
@click="${(e) => this.toggleQuickActions(e)}"
|
|
395
|
+
>
|
|
396
|
+
<div class="pointer-events-none">
|
|
397
|
+
<axebow-icon iconName="apps" iconColor="white" size="medium"></axebow-icon>
|
|
398
|
+
</div>
|
|
399
|
+
|
|
400
|
+
<span class="whitespace-nowrap">${this.quickActionsLabel}</span>
|
|
401
|
+
|
|
402
|
+
${!this.quickActionsOpen ? html`
|
|
403
|
+
<span
|
|
404
|
+
class="absolute left-[calc(100%+0.5rem)]
|
|
405
|
+
top-[50%] -translate-y-1/2
|
|
406
|
+
invisible opacity-0
|
|
407
|
+
group-hover:visible group-hover:opacity-100
|
|
408
|
+
transition-opacity duration-150
|
|
409
|
+
bg-[#b4cded] text-[#344966]
|
|
410
|
+
font-semibold
|
|
411
|
+
text-base
|
|
412
|
+
px-3.5 py-2 rounded-lg
|
|
413
|
+
whitespace-nowrap
|
|
414
|
+
pointer-events-none z-2001"
|
|
415
|
+
>
|
|
416
|
+
${this.quickActionsLabel}
|
|
417
|
+
</span>
|
|
418
|
+
` : ""}
|
|
419
|
+
|
|
420
|
+
<div
|
|
421
|
+
class="absolute w-auto min-w-99 top-full left-18 mt-2 border border-solid rounded-lg border-gray-300 bg-white p-4 z-2000 shadow-lg ${this.quickActionsOpen ? "" : "hidden"}"
|
|
422
|
+
>
|
|
423
|
+
${QUICK_ACTIONS_ROWS.map((row, i) => html`
|
|
424
|
+
<div class="flex gap-4">
|
|
425
|
+
${row.map((idx) => {
|
|
426
|
+
const item = idx === null ? null : this.quickActions[idx];
|
|
427
|
+
return item && item.visible ? html`<div
|
|
428
|
+
class="flex flex-col items-center justify-center text-center cursor-pointer text-(--axebow-primary) p-2 flex-1 hover:bg-(--axebow-base) hover:rounded-lg"
|
|
429
|
+
@click="${() => this.handleQuickActionClick(item)}"
|
|
430
|
+
>
|
|
431
|
+
<axebow-icon iconName="${item.icon}" size="medium"></axebow-icon>
|
|
432
|
+
<span class="text-sm">${item.label}</span>
|
|
433
|
+
</div>` : html`<div class="flex flex-col items-center justify-center text-center p-2 flex-1 invisible"></div>`;
|
|
434
|
+
})}
|
|
435
|
+
</div>
|
|
436
|
+
${i < QUICK_ACTIONS_ROWS.length - 1 ? html`<sl-divider class="w-full h-px bg-gray-200 my-0.75"></sl-divider>` : ""}
|
|
437
|
+
`)}
|
|
438
|
+
</div>
|
|
439
|
+
</div>
|
|
440
|
+
|
|
441
|
+
<div
|
|
442
|
+
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-5 cursor-pointer hover:opacity-80 transition-opacity duration-200"
|
|
443
|
+
@click=${() => this.onLogoClick()}
|
|
444
|
+
>
|
|
445
|
+
<div class="flex items-center gap-2 text-white">
|
|
446
|
+
<img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
|
|
447
|
+
</div>
|
|
448
|
+
</div>
|
|
449
|
+
<div class="flex items-center gap-2 z-10 shrink-0 min-w-0 ml-auto">
|
|
450
|
+
<sl-dropdown>
|
|
451
|
+
<div
|
|
452
|
+
class="relative group w-9 h-9 rounded-lg flex items-center justify-center cursor-pointer transition-colors duration-150 hover:bg-[#344966]"
|
|
453
|
+
slot="trigger"
|
|
454
|
+
>
|
|
455
|
+
<span class="inline-block transition-transform duration-200 group-hover:rotate-15">
|
|
456
|
+
<axebow-icon iconName="notifications" iconColor="white"></axebow-icon>
|
|
457
|
+
</span>
|
|
458
|
+
${unreadNotifications.length > 0 ? html`<div
|
|
459
|
+
class="absolute bottom-0.5 right-0.5 flex items-center justify-center rounded-full bg-(--axebow-error) text-white font-bold z-10 pointer-events-none ${unreadNotifications.length < 10 ? "w-4 h-4 text-sm" : "h-4 min-w-4 px-0.5 text-sm"}"
|
|
460
|
+
>
|
|
461
|
+
${unreadNotifications.length > 99 ? "99+" : unreadNotifications.length}
|
|
462
|
+
</div>` : ""}
|
|
463
|
+
<span
|
|
464
|
+
class="absolute top-1/2 -translate-y-1/2 right-[calc(100%+10px)] translate-x-1 opacity-0 group-hover:opacity-100 group-hover:translate-x-0 text-base transition-all duration-120 bg-[#b4cded] text-[#344966] font-semibold leading-none px-3.5 py-2 rounded-lg whitespace-nowrap shadow-[0_6px_16px_rgba(13,24,33,0.18)] pointer-events-none z-2001"
|
|
465
|
+
>${this.notificationsLabel}</span
|
|
466
|
+
>
|
|
467
|
+
</div>
|
|
468
|
+
<sl-tab-group class="bg-white rounded-lg w-120 text-base">
|
|
469
|
+
<sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
|
|
470
|
+
<sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
|
|
471
|
+
|
|
472
|
+
<sl-tab-panel class="bg-gray-100" name="my_notifications">
|
|
473
|
+
<div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
|
|
474
|
+
${this.notifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center w-117">
|
|
475
|
+
<axebow-icon iconName="info"></axebow-icon>
|
|
476
|
+
<p class="text-black">${this.noNotificationsLabel}</p>
|
|
477
|
+
</div>` : html`
|
|
478
|
+
<div class="flex flex-col text-black gap-4">
|
|
479
|
+
<div class="flex justify-between items-center flex-wrap gap-4">
|
|
480
|
+
<div class="flex items-center py-1">
|
|
481
|
+
<p class="mr-4 text-base">${this.showUnreadOnlyLabel}</p>
|
|
482
|
+
<sl-switch @sl-change=${(e) => this.handleShowUnreadOnlyChange(e)}></sl-switch>
|
|
483
|
+
<p class="italic text-gray-400 text-base">
|
|
484
|
+
${this.showUnreadOnly ? this.onLabel : this.offLabel}
|
|
485
|
+
</p>
|
|
486
|
+
</div>
|
|
487
|
+
<button
|
|
488
|
+
class="text-gray-500 cursor-pointer text-base"
|
|
489
|
+
@click=${() => this.onMarkAllAsRead()}
|
|
490
|
+
>
|
|
491
|
+
${this.markAllAsReadLabel}
|
|
492
|
+
</button>
|
|
493
|
+
</div>
|
|
494
|
+
${this.showUnreadOnly && unreadNotifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center w-117">
|
|
495
|
+
<axebow-icon iconName="info"></axebow-icon>
|
|
496
|
+
<p class="text-black">${this.noUnreadNotificationsLabel}</p>
|
|
497
|
+
</div>` : html` ${notificationsToShow.map((item) => this.renderNotificationCard(item))} `}
|
|
498
|
+
</div>
|
|
499
|
+
`}
|
|
500
|
+
</div>
|
|
501
|
+
</sl-tab-panel>
|
|
502
|
+
<sl-tab-panel class="bg-gray-100" name="action_needed">
|
|
503
|
+
<div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
|
|
504
|
+
${this.actionNeededNotifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center p-4">
|
|
505
|
+
<axebow-icon iconName="info"></axebow-icon>
|
|
506
|
+
<p class="text-black">${this.noActionNotificationsLabel}</p>
|
|
507
|
+
</div>` : html`
|
|
508
|
+
<div class="flex flex-col text-black gap-4">
|
|
509
|
+
${this.actionNeededNotifications.map((item) => this.renderNotificationCard(item))}
|
|
510
|
+
</div>
|
|
511
|
+
`}
|
|
512
|
+
</div>
|
|
513
|
+
</sl-tab-panel>
|
|
514
|
+
</sl-tab-group>
|
|
515
|
+
</sl-dropdown>
|
|
516
|
+
<sl-dropdown class="shrink-0">
|
|
517
|
+
<div
|
|
518
|
+
slot="trigger"
|
|
519
|
+
class="group flex items-center gap-2 h-9 px-3 rounded-lg text-white font-semibold cursor-pointer whitespace-nowrap transition-all duration-150 hover:bg-white hover:text-[#344966] hover:shadow-[0_2px_6px_rgba(13,24,33,0.14)] text-base"
|
|
520
|
+
>
|
|
521
|
+
<span class="text-white group-hover:text-(--axebow-primary) transition-colors duration-150">
|
|
522
|
+
<axebow-icon iconName="account_circle" iconColor="currentColor" size="medium"></axebow-icon>
|
|
523
|
+
</span>
|
|
524
|
+
${this.userName}
|
|
525
|
+
</div>
|
|
526
|
+
<sl-menu class="bg-white rounded-lg p-2 min-w-55 axebow-shadow">
|
|
527
|
+
${this.profileMenuItems.map((item) => html`
|
|
528
|
+
<button
|
|
529
|
+
class="w-full flex text-base items-center justify-between ml-auto px-4 py-2 cursor-pointer rounded-lg hover:bg-gray-200 transition-colors ease-in-out duration-200 hover:text-(--axebow-tertiary)"
|
|
530
|
+
@click=${() => item.onClick()}
|
|
531
|
+
>
|
|
532
|
+
<span class="text-(--axebow-primary)">${item.name}</span>
|
|
533
|
+
<axebow-icon iconName="arrow_right_alt" size="medium"></axebow-icon>
|
|
534
|
+
</button>
|
|
535
|
+
`)}
|
|
536
|
+
<button
|
|
537
|
+
class="ml-auto flex items-center justify-between w-full px-4 py-2 text-(--axebow-error) cursor-pointer rounded-lg text-base"
|
|
538
|
+
@click=${() => this.onLogout()}
|
|
539
|
+
>
|
|
540
|
+
<span class="text-(--axebow-error) mt-1">${this.logoutLabel}</span>
|
|
541
|
+
<axebow-icon iconName="mode_off_on" iconColor="var(--axebow-error)" size="small"></axebow-icon>
|
|
542
|
+
</button>
|
|
543
|
+
</sl-menu>
|
|
544
|
+
</sl-dropdown>
|
|
545
|
+
</div>
|
|
546
|
+
`}
|
|
547
|
+
</header>
|
|
548
|
+
`;
|
|
549
|
+
}
|
|
550
|
+
renderNotificationCard(item) {
|
|
551
|
+
return html`
|
|
552
|
+
<div
|
|
553
|
+
class="relative flex gap-2 p-2 w-full rounded-md border-2 border-solid text-base ${item.status === "unread" ? "border-gray-500 hover:border-(--axebow-tertiary) text-gray-600" : "border-gray-300 text-gray-400"} "
|
|
554
|
+
@click=${() => item.onClick()}
|
|
555
|
+
>
|
|
556
|
+
${item.status === "unread" ? html` <div class="absolute top-[-7px] left-[-7px] h-3.5 w-3.5 rounded-full bg-(--axebow-success)"></div>` : ""}
|
|
557
|
+
<axebow-icon
|
|
558
|
+
iconName=${item.icon}
|
|
559
|
+
size="medium"
|
|
560
|
+
iconColor=${item.status === "unread" ? item.color : "gray"}
|
|
561
|
+
></axebow-icon>
|
|
562
|
+
<div class="flex flex-1 flex-col gap-1 py-1.25 min-w-0 overflow-hidden">
|
|
563
|
+
<div class="flex justify-between gap-2">
|
|
564
|
+
<h4 class="font-semibold wrap-break-word">${item.title}</h4>
|
|
565
|
+
<span class="ms-auto min-w-fit shrink-0 text-gray-400">${item.date}</span>
|
|
566
|
+
</div>
|
|
567
|
+
<div
|
|
568
|
+
class="notification-description leading-tight max-w-full pe-4 overflow-x-hidden overflow-y-auto max-h-75 wrap-break-word"
|
|
569
|
+
.innerHTML=${item.description}
|
|
570
|
+
></div>
|
|
571
|
+
${item.actions && item.actions.length > 0 ? html`
|
|
572
|
+
<div class="flex gap-4 ml-auto pe-4 flex-wrap">
|
|
573
|
+
${item.actions.map((action) => html`
|
|
574
|
+
<button class="text-sm font-semibold text-[${action.color}] hover:underline" @click=${action.action}>
|
|
575
|
+
${action.label}
|
|
576
|
+
</button>
|
|
577
|
+
`)}
|
|
578
|
+
</div>
|
|
579
|
+
` : ""}
|
|
580
|
+
</div>
|
|
581
|
+
</div>
|
|
582
|
+
`;
|
|
583
|
+
}
|
|
584
|
+
};
|
|
585
|
+
__decorate([property({
|
|
586
|
+
type: Boolean,
|
|
587
|
+
reflect: true
|
|
588
|
+
})], AxebowHeader.prototype, "minimal", void 0);
|
|
589
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "logoUrl", void 0);
|
|
590
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "logoAlt", void 0);
|
|
591
|
+
__decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogoClick", void 0);
|
|
592
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "userName", void 0);
|
|
593
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "quickActionsLabel", void 0);
|
|
594
|
+
__decorate([property({ type: Array })], AxebowHeader.prototype, "quickActions", void 0);
|
|
595
|
+
__decorate([property({ type: Array })], AxebowHeader.prototype, "profileMenuItems", void 0);
|
|
596
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "logoutLabel", void 0);
|
|
597
|
+
__decorate([property({ attribute: false })], AxebowHeader.prototype, "onLogout", void 0);
|
|
598
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "notificationsLabel", void 0);
|
|
599
|
+
__decorate([property({ type: Array })], AxebowHeader.prototype, "notifications", void 0);
|
|
600
|
+
__decorate([property({ type: Array })], AxebowHeader.prototype, "actionNeededNotifications", void 0);
|
|
601
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "myNotificationsTabLabel", void 0);
|
|
602
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "actionNeededTabLabel", void 0);
|
|
603
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "noNotificationsLabel", void 0);
|
|
604
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "noUnreadNotificationsLabel", void 0);
|
|
605
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "noActionNotificationsLabel", void 0);
|
|
606
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "showUnreadOnlyLabel", void 0);
|
|
607
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "onLabel", void 0);
|
|
608
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "offLabel", void 0);
|
|
609
|
+
__decorate([property({ type: String })], AxebowHeader.prototype, "markAllAsReadLabel", void 0);
|
|
610
|
+
__decorate([property({ attribute: false })], AxebowHeader.prototype, "onMarkAllAsRead", void 0);
|
|
611
|
+
__decorate([state()], AxebowHeader.prototype, "quickActionsOpen", void 0);
|
|
612
|
+
__decorate([state()], AxebowHeader.prototype, "showUnreadOnly", void 0);
|
|
613
|
+
AxebowHeader = __decorate([customElement("axebow-header")], AxebowHeader);
|
|
614
|
+
//#endregion
|
|
615
|
+
//#region src/components/axebow-sidebar/axebow-sidebar.ts
|
|
616
|
+
var AxebowSidebar = class AxebowSidebar extends LitElement {
|
|
617
|
+
constructor(..._args) {
|
|
618
|
+
super(..._args);
|
|
619
|
+
this.items = [];
|
|
620
|
+
this.bottomItems = [];
|
|
621
|
+
this.selectedKey = null;
|
|
622
|
+
this.paddingBottom = 10;
|
|
623
|
+
this.hoveredItem = null;
|
|
624
|
+
this.tooltipTop = 0;
|
|
625
|
+
this.tooltipLeft = 0;
|
|
626
|
+
}
|
|
627
|
+
static {
|
|
628
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
629
|
+
:host {
|
|
630
|
+
position: relative;
|
|
631
|
+
width: 4rem;
|
|
632
|
+
}
|
|
633
|
+
`];
|
|
634
|
+
}
|
|
635
|
+
handleMouseEnter(event, item) {
|
|
636
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
637
|
+
this.tooltipTop = rect.top + 10;
|
|
638
|
+
this.tooltipLeft = rect.right - 8;
|
|
639
|
+
this.hoveredItem = item;
|
|
640
|
+
}
|
|
641
|
+
handleMouseLeave() {
|
|
642
|
+
this.hoveredItem = null;
|
|
643
|
+
}
|
|
644
|
+
_isSelected(item) {
|
|
645
|
+
return this.selectedKey === item.key || !!item.isRoot && this.selectedKey === null;
|
|
646
|
+
}
|
|
647
|
+
render() {
|
|
648
|
+
return html`
|
|
649
|
+
<nav
|
|
650
|
+
style="padding-bottom: ${this.paddingBottom}px;"
|
|
651
|
+
class="h-full flex flex-col justify-between overflow-x-hidden pt-2"
|
|
652
|
+
>
|
|
653
|
+
<ul class="flex flex-col gap-0 w-full pb-4">
|
|
654
|
+
${this.items.map((entry) => "divider" in entry ? html` <sl-divider class="w-[calc(100%-10px)] my-2 h-px bg-(--axebow-light-gray)"></sl-divider> ` : this._renderNavItem(entry, this._isSelected(entry)))}
|
|
655
|
+
</ul>
|
|
656
|
+
<ul>
|
|
657
|
+
${this.bottomItems.map((item) => this._renderBottomItem(item))}
|
|
658
|
+
</ul>
|
|
659
|
+
</nav>
|
|
660
|
+
|
|
661
|
+
${this.hoveredItem ? html`
|
|
662
|
+
<div
|
|
663
|
+
class="fixed ps-4 flex items-center pointer-events-none z-9999"
|
|
664
|
+
style="left: ${this.tooltipLeft}px; top: ${this.tooltipTop}px; height: 3rem;"
|
|
665
|
+
>
|
|
666
|
+
<span
|
|
667
|
+
class="flex items-center gap-1 px-2 py-1 bg-white rounded-lg text-base border border-solid border-(--axebow-gray) shadow-lg"
|
|
668
|
+
>${this.hoveredItem.label}${this.hoveredItem.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="xx-small"></axebow-icon>` : ""}</span
|
|
669
|
+
>
|
|
670
|
+
</div>
|
|
671
|
+
` : ""}
|
|
672
|
+
`;
|
|
673
|
+
}
|
|
674
|
+
_renderNavItem(item, selected) {
|
|
675
|
+
return html`
|
|
676
|
+
<li
|
|
677
|
+
class="${selected ? "bg-(--axebow-base) rounded-l-xl cursor-default" : "cursor-pointer"} flex flex-col w-full h-16 items-center justify-center relative group"
|
|
678
|
+
@click="${() => item.onClick()}"
|
|
679
|
+
@mouseenter="${(e) => this.handleMouseEnter(e, item)}"
|
|
680
|
+
@mouseleave="${() => this.handleMouseLeave()}"
|
|
681
|
+
title="${item.label}"
|
|
682
|
+
>
|
|
683
|
+
<div class="flex flex-col items-center justify-center">
|
|
684
|
+
<axebow-icon iconName="${item.icon}" size="medium"></axebow-icon>
|
|
685
|
+
<span class="text-xs overflow-hidden whitespace-nowrap opacity-100 max-w-full">${item.label}</span>
|
|
686
|
+
</div>
|
|
687
|
+
|
|
688
|
+
${!selected ? html`
|
|
689
|
+
<div
|
|
690
|
+
class="absolute top-0 right-0 h-full w-2.5 rounded-l-xl bg-(--axebow-base) opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200"
|
|
691
|
+
></div>
|
|
692
|
+
` : ""}
|
|
693
|
+
</li>
|
|
694
|
+
`;
|
|
695
|
+
}
|
|
696
|
+
_renderBottomItem(item) {
|
|
697
|
+
return html`
|
|
698
|
+
<li
|
|
699
|
+
class="flex flex-col w-full items-center justify-center cursor-pointer relative group"
|
|
700
|
+
@click="${() => item.onClick()}"
|
|
701
|
+
@mouseenter="${(e) => this.handleMouseEnter(e, item)}"
|
|
702
|
+
@mouseleave="${() => this.handleMouseLeave()}"
|
|
703
|
+
title="${item.label}"
|
|
704
|
+
>
|
|
705
|
+
<div class="flex flex-col items-center justify-center py-3">
|
|
706
|
+
<axebow-icon iconName="${item.icon}" size="medium"></axebow-icon>
|
|
707
|
+
<span class="text-sm overflow-hidden whitespace-nowrap opacity-100 max-w-full"
|
|
708
|
+
>${item.label}${item.openInNewTab ? html`<axebow-icon iconName="open_in_new" size="xx-small"></axebow-icon>` : ""}</span
|
|
709
|
+
>
|
|
710
|
+
</div>
|
|
711
|
+
|
|
712
|
+
<div
|
|
713
|
+
class="absolute top-0 right-0 h-full w-2.5 rounded-l-xl bg-(--axebow-base) opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity duration-200"
|
|
714
|
+
></div>
|
|
715
|
+
</li>
|
|
716
|
+
`;
|
|
717
|
+
}
|
|
718
|
+
};
|
|
719
|
+
__decorate([property({ type: Array })], AxebowSidebar.prototype, "items", void 0);
|
|
720
|
+
__decorate([property({ type: Array })], AxebowSidebar.prototype, "bottomItems", void 0);
|
|
721
|
+
__decorate([property({ type: String })], AxebowSidebar.prototype, "selectedKey", void 0);
|
|
722
|
+
__decorate([property({ type: Number })], AxebowSidebar.prototype, "paddingBottom", void 0);
|
|
723
|
+
__decorate([state()], AxebowSidebar.prototype, "hoveredItem", void 0);
|
|
724
|
+
__decorate([state()], AxebowSidebar.prototype, "tooltipTop", void 0);
|
|
725
|
+
__decorate([state()], AxebowSidebar.prototype, "tooltipLeft", void 0);
|
|
726
|
+
AxebowSidebar = __decorate([customElement("axebow-sidebar")], AxebowSidebar);
|
|
727
|
+
//#endregion
|
|
728
|
+
//#region src/components/axebow-footer/axebow-footer.ts
|
|
729
|
+
var AxebowFooter = class AxebowFooter extends LitElement {
|
|
730
|
+
constructor(..._args) {
|
|
731
|
+
super(..._args);
|
|
732
|
+
this.links = [];
|
|
733
|
+
this.emitFooterHeight = () => {
|
|
734
|
+
const rect = this.getBoundingClientRect();
|
|
735
|
+
const windowHeight = window.innerHeight;
|
|
736
|
+
let visible = 0;
|
|
737
|
+
if (rect.top < windowHeight && rect.bottom > 0) visible = Math.min(rect.bottom, windowHeight) - Math.max(rect.top, 0);
|
|
738
|
+
visible = Math.max(0, visible);
|
|
739
|
+
this.dispatchEvent(new CustomEvent("footer-height-changed", {
|
|
740
|
+
detail: { height: visible },
|
|
741
|
+
bubbles: true,
|
|
742
|
+
composed: true
|
|
743
|
+
}));
|
|
744
|
+
};
|
|
745
|
+
}
|
|
746
|
+
static {
|
|
747
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
748
|
+
:host {
|
|
749
|
+
display: block;
|
|
750
|
+
width: 100%;
|
|
751
|
+
position: relative;
|
|
752
|
+
z-index: 1001;
|
|
753
|
+
overflow: hidden;
|
|
754
|
+
}
|
|
755
|
+
`];
|
|
756
|
+
}
|
|
757
|
+
connectedCallback() {
|
|
758
|
+
super.connectedCallback();
|
|
759
|
+
this.resizeObserver = new ResizeObserver(() => {
|
|
760
|
+
this.emitFooterHeight();
|
|
761
|
+
});
|
|
762
|
+
this.resizeObserver.observe(this);
|
|
763
|
+
window.addEventListener("resize", this.emitFooterHeight);
|
|
764
|
+
window.addEventListener("scroll", this.emitFooterHeight, true);
|
|
765
|
+
setTimeout(() => this.emitFooterHeight(), 0);
|
|
766
|
+
}
|
|
767
|
+
disconnectedCallback() {
|
|
768
|
+
super.disconnectedCallback();
|
|
769
|
+
this.resizeObserver?.disconnect();
|
|
770
|
+
window.removeEventListener("resize", this.emitFooterHeight);
|
|
771
|
+
window.removeEventListener("scroll", this.emitFooterHeight, true);
|
|
772
|
+
}
|
|
773
|
+
render() {
|
|
774
|
+
return html`
|
|
775
|
+
<footer
|
|
776
|
+
class="text-center text-sm flex w-full bg-(--axebow-primary) text-white justify-center items-center h-8 px-2 md:gap-8 gap-4 flex-wrap"
|
|
777
|
+
>
|
|
778
|
+
${this.links.map((link) => html`
|
|
779
|
+
<button
|
|
780
|
+
class="h-7 text-sm p-1 inline-flex items-center gap-1 opacity-70 hover:opacity-100 transition-opacity duration-150 text-(--axebow-anti-flash-white) bg-transparent border-0 cursor-pointer"
|
|
781
|
+
@click=${link.onClick}
|
|
782
|
+
>
|
|
783
|
+
${link.label}
|
|
784
|
+
<axebow-icon iconName="open_in_new" iconColor="var(--axebow-anti-flash-white)" size="small"></axebow-icon>
|
|
785
|
+
</button>
|
|
786
|
+
`)}
|
|
787
|
+
</footer>
|
|
788
|
+
`;
|
|
789
|
+
}
|
|
790
|
+
};
|
|
791
|
+
__decorate([property({ type: Array })], AxebowFooter.prototype, "links", void 0);
|
|
792
|
+
AxebowFooter = __decorate([customElement("axebow-footer")], AxebowFooter);
|
|
793
|
+
//#endregion
|
|
275
794
|
//#region src/components/axebow-more-actions/axebow-more-actions.ts
|
|
276
795
|
var AxebowMoreActions = class AxebowMoreActions extends LitElement {
|
|
277
796
|
constructor(..._args) {
|
|
@@ -1636,6 +2155,6 @@ __decorate([property({ type: String })], AxebowCardSpecialLink.prototype, "color
|
|
|
1636
2155
|
__decorate([property({ type: String })], AxebowCardSpecialLink.prototype, "icon", void 0);
|
|
1637
2156
|
AxebowCardSpecialLink = __decorate([customElement("axebow-card-special-link")], AxebowCardSpecialLink);
|
|
1638
2157
|
//#endregion
|
|
1639
|
-
export { AxebowBaseCard, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowFilterBar, AxebowIcon, AxebowMoreActions, AxebowRoleTooltip, STATUS_COLORS, axebowTheme };
|
|
2158
|
+
export { AxebowBaseCard, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowFilterBar, AxebowFooter, AxebowHeader, AxebowIcon, AxebowMoreActions, AxebowRoleTooltip, AxebowSidebar, STATUS_COLORS, axebowTheme };
|
|
1640
2159
|
|
|
1641
2160
|
//# sourceMappingURL=index.js.map
|