@kumori/aurora-wui-components 0.0.49 → 0.0.51
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-header/axebow-header.d.ts +4 -38
- package/dist/components/axebow-header/axebow-header.d.ts.map +1 -1
- package/dist/components/axebow-header/parts/axebow-header-actions.d.ts +50 -0
- package/dist/components/axebow-header/parts/axebow-header-actions.d.ts.map +1 -0
- package/dist/components/axebow-header/parts/axebow-quick-action-card.d.ts +9 -0
- package/dist/components/axebow-header/parts/axebow-quick-action-card.d.ts.map +1 -0
- package/dist/components/axebow-header/parts/axebow-quick-actions.d.ts +24 -0
- package/dist/components/axebow-header/parts/axebow-quick-actions.d.ts.map +1 -0
- package/dist/index.js +309 -222
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -110,7 +110,7 @@ var STATUS_COLORS = {
|
|
|
110
110
|
};
|
|
111
111
|
//#endregion
|
|
112
112
|
//#region src/styles/tailwind.css?inline
|
|
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";
|
|
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-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 .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-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 .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\\: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";
|
|
114
114
|
//#endregion
|
|
115
115
|
//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
|
|
116
116
|
function __decorate(decorators, target, key, desc) {
|
|
@@ -279,34 +279,128 @@ var AxebowFilterBar = class AxebowFilterBar extends LitElement {
|
|
|
279
279
|
__decorate([property({ type: Array })], AxebowFilterBar.prototype, "items", void 0);
|
|
280
280
|
AxebowFilterBar = __decorate([customElement("axebow-filter-bar")], AxebowFilterBar);
|
|
281
281
|
//#endregion
|
|
282
|
-
//#region src/components/axebow-header/axebow-
|
|
283
|
-
var
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
282
|
+
//#region src/components/axebow-header/parts/axebow-quick-action-card.ts
|
|
283
|
+
var AxebowQuickActionCard = class AxebowQuickActionCard extends LitElement {
|
|
284
|
+
constructor(..._args) {
|
|
285
|
+
super(..._args);
|
|
286
|
+
this.icon = "";
|
|
287
|
+
this.label = "";
|
|
288
|
+
}
|
|
289
|
+
static {
|
|
290
|
+
this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
|
|
291
|
+
}
|
|
292
|
+
render() {
|
|
293
|
+
return html`
|
|
294
|
+
<div
|
|
295
|
+
class="flex flex-col items-center justify-center gap-1 w-[10.5rem] px-4 py-3 rounded bg-white hover:bg-(--axebow-base) cursor-pointer transition-colors duration-150"
|
|
296
|
+
@click=${this._onClick}
|
|
297
|
+
>
|
|
298
|
+
<axebow-icon iconName=${this.icon} iconColor="var(--axebow-primary)" size="medium"></axebow-icon>
|
|
299
|
+
<span class="text-base font-semibold text-(--axebow-primary) text-center whitespace-nowrap">${this.label}</span>
|
|
300
|
+
</div>
|
|
301
|
+
`;
|
|
302
|
+
}
|
|
303
|
+
_onClick() {
|
|
304
|
+
this.dispatchEvent(new CustomEvent("card-click", {
|
|
305
|
+
bubbles: true,
|
|
306
|
+
composed: true
|
|
307
|
+
}));
|
|
308
|
+
}
|
|
309
|
+
};
|
|
310
|
+
__decorate([property({ type: String })], AxebowQuickActionCard.prototype, "icon", void 0);
|
|
311
|
+
__decorate([property({ type: String })], AxebowQuickActionCard.prototype, "label", void 0);
|
|
312
|
+
AxebowQuickActionCard = __decorate([customElement("axebow-quick-action-card")], AxebowQuickActionCard);
|
|
313
|
+
//#endregion
|
|
314
|
+
//#region src/components/axebow-header/parts/axebow-quick-actions.ts
|
|
315
|
+
var AxebowQuickActions = class AxebowQuickActions extends LitElement {
|
|
316
|
+
constructor(..._args) {
|
|
317
|
+
super(..._args);
|
|
318
|
+
this.label = "";
|
|
319
|
+
this.actions = [];
|
|
320
|
+
this.open = false;
|
|
321
|
+
this._handleOutsideClick = (e) => {
|
|
322
|
+
if (this.open && !this.contains(e.target)) this.open = false;
|
|
323
|
+
};
|
|
324
|
+
}
|
|
325
|
+
static {
|
|
326
|
+
this.styles = [unsafeCSS(tailwind_default), css`:host { display: inline-block; }`];
|
|
327
|
+
}
|
|
328
|
+
connectedCallback() {
|
|
329
|
+
super.connectedCallback();
|
|
330
|
+
document.addEventListener("click", this._handleOutsideClick);
|
|
331
|
+
}
|
|
332
|
+
disconnectedCallback() {
|
|
333
|
+
super.disconnectedCallback();
|
|
334
|
+
document.removeEventListener("click", this._handleOutsideClick);
|
|
335
|
+
}
|
|
336
|
+
_toggle(e) {
|
|
337
|
+
e.stopPropagation();
|
|
338
|
+
this.open = !this.open;
|
|
339
|
+
}
|
|
340
|
+
_select(action) {
|
|
341
|
+
action.onClick();
|
|
342
|
+
this.open = false;
|
|
343
|
+
}
|
|
344
|
+
render() {
|
|
345
|
+
const row1 = this.actions.slice(0, 3).filter((a) => a.visible);
|
|
346
|
+
const row2 = this.actions.slice(3, 7).filter((a) => a.visible);
|
|
347
|
+
return html`
|
|
348
|
+
<div class="relative">
|
|
349
|
+
<button
|
|
350
|
+
type="button"
|
|
351
|
+
class="group flex flex-col items-center justify-center gap-1 w-20 h-16 border-none cursor-pointer transition-colors duration-150 ${this.open ? "bg-(--axebow-base)" : "bg-(--axebow-primary) hover:bg-(--axebow-base)"}"
|
|
352
|
+
@click=${this._toggle}
|
|
353
|
+
>
|
|
354
|
+
<span
|
|
355
|
+
class="flex flex-col items-center justify-center gap-1 ${this.open ? "text-(--axebow-primary)" : "text-white group-hover:text-(--axebow-primary)"}"
|
|
356
|
+
>
|
|
357
|
+
<axebow-icon iconName="apps" iconColor="currentColor" size="medium"></axebow-icon>
|
|
358
|
+
<span
|
|
359
|
+
class="text-xs whitespace-nowrap ${this.open ? "font-semibold" : "font-normal group-hover:font-semibold"}"
|
|
360
|
+
>${this.label}</span
|
|
361
|
+
>
|
|
362
|
+
</span>
|
|
363
|
+
</button>
|
|
364
|
+
|
|
365
|
+
${this.open ? html`
|
|
366
|
+
<div class="absolute top-full left-0 mt-2 z-2000 flex flex-col gap-1 p-1 bg-white rounded-lg axebow-shadow">
|
|
367
|
+
<div class="flex gap-1">
|
|
368
|
+
${row1.map((action) => html`
|
|
369
|
+
<axebow-quick-action-card
|
|
370
|
+
icon=${action.icon}
|
|
371
|
+
label=${action.label}
|
|
372
|
+
@card-click=${() => this._select(action)}
|
|
373
|
+
></axebow-quick-action-card>
|
|
374
|
+
`)}
|
|
375
|
+
</div>
|
|
376
|
+
${row2.length ? html`
|
|
377
|
+
<div class="h-[0.0625rem] w-full bg-(--axebow-light-gray)"></div>
|
|
378
|
+
<div class="flex flex-wrap gap-x-1 gap-y-[0.1875rem]">
|
|
379
|
+
${row2.map((action) => html`
|
|
380
|
+
<axebow-quick-action-card
|
|
381
|
+
icon=${action.icon}
|
|
382
|
+
label=${action.label}
|
|
383
|
+
@card-click=${() => this._select(action)}
|
|
384
|
+
></axebow-quick-action-card>
|
|
385
|
+
`)}
|
|
386
|
+
</div>
|
|
387
|
+
` : ""}
|
|
388
|
+
</div>
|
|
389
|
+
` : ""}
|
|
390
|
+
</div>
|
|
391
|
+
`;
|
|
392
|
+
}
|
|
393
|
+
};
|
|
394
|
+
__decorate([property({ type: String })], AxebowQuickActions.prototype, "label", void 0);
|
|
395
|
+
__decorate([property({ type: Array })], AxebowQuickActions.prototype, "actions", void 0);
|
|
396
|
+
__decorate([state()], AxebowQuickActions.prototype, "open", void 0);
|
|
397
|
+
AxebowQuickActions = __decorate([customElement("axebow-quick-actions")], AxebowQuickActions);
|
|
398
|
+
//#endregion
|
|
399
|
+
//#region src/components/axebow-header/parts/axebow-header-actions.ts
|
|
400
|
+
var AxebowHeaderActions = class AxebowHeaderActions extends LitElement {
|
|
301
401
|
constructor(..._args) {
|
|
302
402
|
super(..._args);
|
|
303
|
-
this.minimal = false;
|
|
304
|
-
this.logoUrl = "";
|
|
305
|
-
this.logoAlt = "";
|
|
306
|
-
this.onLogoClick = () => {};
|
|
307
403
|
this.userName = "";
|
|
308
|
-
this.quickActionsLabel = "";
|
|
309
|
-
this.quickActions = [];
|
|
310
404
|
this.profileMenuItems = [];
|
|
311
405
|
this.logoutLabel = "";
|
|
312
406
|
this.onLogout = () => {};
|
|
@@ -323,23 +417,10 @@ var AxebowHeader = class AxebowHeader extends LitElement {
|
|
|
323
417
|
this.offLabel = "";
|
|
324
418
|
this.markAllAsReadLabel = "";
|
|
325
419
|
this.onMarkAllAsRead = () => {};
|
|
326
|
-
this.quickActionsOpen = false;
|
|
327
420
|
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
421
|
}
|
|
338
422
|
static {
|
|
339
|
-
this.styles = [
|
|
340
|
-
unsafeCSS(tailwind_default),
|
|
341
|
-
axebowTheme,
|
|
342
|
-
css`
|
|
423
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
343
424
|
sl-dropdown::part(panel) {
|
|
344
425
|
max-width: 500px;
|
|
345
426
|
}
|
|
@@ -351,24 +432,7 @@ var AxebowHeader = class AxebowHeader extends LitElement {
|
|
|
351
432
|
.notification-description pre {
|
|
352
433
|
white-space: pre-wrap;
|
|
353
434
|
}
|
|
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;
|
|
435
|
+
`];
|
|
372
436
|
}
|
|
373
437
|
handleShowUnreadOnlyChange(e) {
|
|
374
438
|
this.showUnreadOnly = e.target.checked;
|
|
@@ -377,174 +441,100 @@ var AxebowHeader = class AxebowHeader extends LitElement {
|
|
|
377
441
|
const unreadNotifications = this.notifications.filter((n) => n.status === "unread");
|
|
378
442
|
const notificationsToShow = this.showUnreadOnly ? unreadNotifications : this.notifications;
|
|
379
443
|
return html`
|
|
380
|
-
<
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
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"}"
|
|
444
|
+
<div class="flex items-center gap-2 z-10 shrink-0 min-w-0 ml-auto">
|
|
445
|
+
<sl-dropdown>
|
|
446
|
+
<div
|
|
447
|
+
class="relative group w-9 h-9 rounded-lg flex items-center justify-center cursor-pointer transition-colors duration-150 hover:bg-[#344966]"
|
|
448
|
+
slot="trigger"
|
|
449
|
+
>
|
|
450
|
+
<span class="inline-block transition-transform duration-200 group-hover:rotate-15">
|
|
451
|
+
<axebow-icon iconName="notifications" iconColor="white"></axebow-icon>
|
|
452
|
+
</span>
|
|
453
|
+
${unreadNotifications.length > 0 ? html`<div
|
|
454
|
+
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"}"
|
|
422
455
|
>
|
|
423
|
-
${
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
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>
|
|
456
|
+
${unreadNotifications.length > 99 ? "99+" : unreadNotifications.length}
|
|
457
|
+
</div>` : ""}
|
|
458
|
+
<span
|
|
459
|
+
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"
|
|
460
|
+
>${this.notificationsLabel}</span
|
|
461
|
+
>
|
|
462
|
+
</div>
|
|
463
|
+
<sl-tab-group class="bg-white rounded-lg w-120 text-base">
|
|
464
|
+
<sl-tab slot="nav" panel="my_notifications">${this.myNotificationsTabLabel}</sl-tab>
|
|
465
|
+
<sl-tab slot="nav" panel="action_needed">${this.actionNeededTabLabel}</sl-tab>
|
|
471
466
|
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
467
|
+
<sl-tab-panel class="bg-gray-100" name="my_notifications">
|
|
468
|
+
<div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
|
|
469
|
+
${this.notifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center w-117">
|
|
470
|
+
<axebow-icon iconName="info"></axebow-icon>
|
|
471
|
+
<p class="text-black">${this.noNotificationsLabel}</p>
|
|
472
|
+
</div>` : html`
|
|
473
|
+
<div class="flex flex-col text-black gap-4">
|
|
474
|
+
<div class="flex justify-between items-center flex-wrap gap-4">
|
|
475
|
+
<div class="flex items-center py-1">
|
|
476
|
+
<p class="mr-4 text-base">${this.showUnreadOnlyLabel}</p>
|
|
477
|
+
<sl-switch @sl-change=${(e) => this.handleShowUnreadOnlyChange(e)}></sl-switch>
|
|
478
|
+
<p class="italic text-gray-400 text-base">
|
|
479
|
+
${this.showUnreadOnly ? this.onLabel : this.offLabel}
|
|
480
|
+
</p>
|
|
481
|
+
</div>
|
|
482
|
+
<button class="text-gray-500 cursor-pointer text-base" @click=${() => this.onMarkAllAsRead()}>
|
|
483
|
+
${this.markAllAsReadLabel}
|
|
484
|
+
</button>
|
|
485
|
+
</div>
|
|
486
|
+
${this.showUnreadOnly && unreadNotifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center w-117">
|
|
475
487
|
<axebow-icon iconName="info"></axebow-icon>
|
|
476
|
-
<p class="text-black">${this.
|
|
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
|
-
`}
|
|
488
|
+
<p class="text-black">${this.noUnreadNotificationsLabel}</p>
|
|
489
|
+
</div>` : html` ${notificationsToShow.map((item) => this.renderNotificationCard(item))} `}
|
|
500
490
|
</div>
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
491
|
+
`}
|
|
492
|
+
</div>
|
|
493
|
+
</sl-tab-panel>
|
|
494
|
+
<sl-tab-panel class="bg-gray-100" name="action_needed">
|
|
495
|
+
<div class="flex flex-col gap-2 px-4 max-h-[40vh] overflow-auto w-full">
|
|
496
|
+
${this.actionNeededNotifications.length === 0 ? html`<div class="flex flex-row gap-4 items-center p-4">
|
|
497
|
+
<axebow-icon iconName="info"></axebow-icon>
|
|
498
|
+
<p class="text-black">${this.noActionNotificationsLabel}</p>
|
|
499
|
+
</div>` : html`
|
|
500
|
+
<div class="flex flex-col text-black gap-4">
|
|
501
|
+
${this.actionNeededNotifications.map((item) => this.renderNotificationCard(item))}
|
|
512
502
|
</div>
|
|
513
|
-
|
|
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>
|
|
503
|
+
`}
|
|
545
504
|
</div>
|
|
546
|
-
|
|
547
|
-
|
|
505
|
+
</sl-tab-panel>
|
|
506
|
+
</sl-tab-group>
|
|
507
|
+
</sl-dropdown>
|
|
508
|
+
<sl-dropdown class="shrink-0">
|
|
509
|
+
<div
|
|
510
|
+
slot="trigger"
|
|
511
|
+
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"
|
|
512
|
+
>
|
|
513
|
+
<span class="text-white group-hover:text-(--axebow-primary) transition-colors duration-150">
|
|
514
|
+
<axebow-icon iconName="account_circle" iconColor="currentColor" size="medium"></axebow-icon>
|
|
515
|
+
</span>
|
|
516
|
+
${this.userName}
|
|
517
|
+
</div>
|
|
518
|
+
<sl-menu class="bg-white rounded-lg p-2 min-w-55 axebow-shadow">
|
|
519
|
+
${this.profileMenuItems.map((item) => html`
|
|
520
|
+
<button
|
|
521
|
+
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)"
|
|
522
|
+
@click=${() => item.onClick()}
|
|
523
|
+
>
|
|
524
|
+
<span class="text-(--axebow-primary)">${item.name}</span>
|
|
525
|
+
<axebow-icon iconName="arrow_right_alt" size="medium"></axebow-icon>
|
|
526
|
+
</button>
|
|
527
|
+
`)}
|
|
528
|
+
<button
|
|
529
|
+
class="ml-auto flex items-center justify-between w-full px-4 py-2 text-(--axebow-error) cursor-pointer rounded-lg text-base"
|
|
530
|
+
@click=${() => this.onLogout()}
|
|
531
|
+
>
|
|
532
|
+
<span class="text-(--axebow-error) mt-1">${this.logoutLabel}</span>
|
|
533
|
+
<axebow-icon iconName="mode_off_on" iconColor="var(--axebow-error)" size="small"></axebow-icon>
|
|
534
|
+
</button>
|
|
535
|
+
</sl-menu>
|
|
536
|
+
</sl-dropdown>
|
|
537
|
+
</div>
|
|
548
538
|
`;
|
|
549
539
|
}
|
|
550
540
|
renderNotificationCard(item) {
|
|
@@ -582,6 +572,105 @@ var AxebowHeader = class AxebowHeader extends LitElement {
|
|
|
582
572
|
`;
|
|
583
573
|
}
|
|
584
574
|
};
|
|
575
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "userName", void 0);
|
|
576
|
+
__decorate([property({ type: Array })], AxebowHeaderActions.prototype, "profileMenuItems", void 0);
|
|
577
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "logoutLabel", void 0);
|
|
578
|
+
__decorate([property({ attribute: false })], AxebowHeaderActions.prototype, "onLogout", void 0);
|
|
579
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "notificationsLabel", void 0);
|
|
580
|
+
__decorate([property({ type: Array })], AxebowHeaderActions.prototype, "notifications", void 0);
|
|
581
|
+
__decorate([property({ type: Array })], AxebowHeaderActions.prototype, "actionNeededNotifications", void 0);
|
|
582
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "myNotificationsTabLabel", void 0);
|
|
583
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "actionNeededTabLabel", void 0);
|
|
584
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "noNotificationsLabel", void 0);
|
|
585
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "noUnreadNotificationsLabel", void 0);
|
|
586
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "noActionNotificationsLabel", void 0);
|
|
587
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "showUnreadOnlyLabel", void 0);
|
|
588
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "onLabel", void 0);
|
|
589
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "offLabel", void 0);
|
|
590
|
+
__decorate([property({ type: String })], AxebowHeaderActions.prototype, "markAllAsReadLabel", void 0);
|
|
591
|
+
__decorate([property({ attribute: false })], AxebowHeaderActions.prototype, "onMarkAllAsRead", void 0);
|
|
592
|
+
__decorate([state()], AxebowHeaderActions.prototype, "showUnreadOnly", void 0);
|
|
593
|
+
AxebowHeaderActions = __decorate([customElement("axebow-header-actions")], AxebowHeaderActions);
|
|
594
|
+
//#endregion
|
|
595
|
+
//#region src/components/axebow-header/axebow-header.ts
|
|
596
|
+
var AxebowHeader = class AxebowHeader extends LitElement {
|
|
597
|
+
constructor(..._args) {
|
|
598
|
+
super(..._args);
|
|
599
|
+
this.minimal = false;
|
|
600
|
+
this.logoUrl = "";
|
|
601
|
+
this.logoAlt = "";
|
|
602
|
+
this.onLogoClick = () => {};
|
|
603
|
+
this.userName = "";
|
|
604
|
+
this.quickActionsLabel = "";
|
|
605
|
+
this.quickActions = [];
|
|
606
|
+
this.profileMenuItems = [];
|
|
607
|
+
this.logoutLabel = "";
|
|
608
|
+
this.onLogout = () => {};
|
|
609
|
+
this.notificationsLabel = "";
|
|
610
|
+
this.notifications = [];
|
|
611
|
+
this.actionNeededNotifications = [];
|
|
612
|
+
this.myNotificationsTabLabel = "";
|
|
613
|
+
this.actionNeededTabLabel = "";
|
|
614
|
+
this.noNotificationsLabel = "";
|
|
615
|
+
this.noUnreadNotificationsLabel = "";
|
|
616
|
+
this.noActionNotificationsLabel = "";
|
|
617
|
+
this.showUnreadOnlyLabel = "";
|
|
618
|
+
this.onLabel = "";
|
|
619
|
+
this.offLabel = "";
|
|
620
|
+
this.markAllAsReadLabel = "";
|
|
621
|
+
this.onMarkAllAsRead = () => {};
|
|
622
|
+
}
|
|
623
|
+
static {
|
|
624
|
+
this.styles = [unsafeCSS(tailwind_default), axebowTheme];
|
|
625
|
+
}
|
|
626
|
+
render() {
|
|
627
|
+
return html`
|
|
628
|
+
<header class="relative flex items-center justify-between h-full pe-4 py-2">
|
|
629
|
+
${this.minimal ? html`
|
|
630
|
+
<div
|
|
631
|
+
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"
|
|
632
|
+
@click=${() => this.onLogoClick()}
|
|
633
|
+
>
|
|
634
|
+
<div class="flex items-center gap-2 text-white">
|
|
635
|
+
<img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
|
|
636
|
+
</div>
|
|
637
|
+
</div>
|
|
638
|
+
` : html`
|
|
639
|
+
<axebow-quick-actions .label=${this.quickActionsLabel} .actions=${this.quickActions}></axebow-quick-actions>
|
|
640
|
+
|
|
641
|
+
<div
|
|
642
|
+
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"
|
|
643
|
+
@click=${() => this.onLogoClick()}
|
|
644
|
+
>
|
|
645
|
+
<div class="flex items-center gap-2 text-white">
|
|
646
|
+
<img src="${this.logoUrl}" alt="${this.logoAlt}" class="h-10" />
|
|
647
|
+
</div>
|
|
648
|
+
</div>
|
|
649
|
+
|
|
650
|
+
<axebow-header-actions
|
|
651
|
+
.userName=${this.userName}
|
|
652
|
+
.profileMenuItems=${this.profileMenuItems}
|
|
653
|
+
.logoutLabel=${this.logoutLabel}
|
|
654
|
+
.onLogout=${this.onLogout}
|
|
655
|
+
.notificationsLabel=${this.notificationsLabel}
|
|
656
|
+
.notifications=${this.notifications}
|
|
657
|
+
.actionNeededNotifications=${this.actionNeededNotifications}
|
|
658
|
+
.myNotificationsTabLabel=${this.myNotificationsTabLabel}
|
|
659
|
+
.actionNeededTabLabel=${this.actionNeededTabLabel}
|
|
660
|
+
.noNotificationsLabel=${this.noNotificationsLabel}
|
|
661
|
+
.noUnreadNotificationsLabel=${this.noUnreadNotificationsLabel}
|
|
662
|
+
.noActionNotificationsLabel=${this.noActionNotificationsLabel}
|
|
663
|
+
.showUnreadOnlyLabel=${this.showUnreadOnlyLabel}
|
|
664
|
+
.onLabel=${this.onLabel}
|
|
665
|
+
.offLabel=${this.offLabel}
|
|
666
|
+
.markAllAsReadLabel=${this.markAllAsReadLabel}
|
|
667
|
+
.onMarkAllAsRead=${this.onMarkAllAsRead}
|
|
668
|
+
></axebow-header-actions>
|
|
669
|
+
`}
|
|
670
|
+
</header>
|
|
671
|
+
`;
|
|
672
|
+
}
|
|
673
|
+
};
|
|
585
674
|
__decorate([property({
|
|
586
675
|
type: Boolean,
|
|
587
676
|
reflect: true
|
|
@@ -608,8 +697,6 @@ __decorate([property({ type: String })], AxebowHeader.prototype, "onLabel", void
|
|
|
608
697
|
__decorate([property({ type: String })], AxebowHeader.prototype, "offLabel", void 0);
|
|
609
698
|
__decorate([property({ type: String })], AxebowHeader.prototype, "markAllAsReadLabel", void 0);
|
|
610
699
|
__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
700
|
AxebowHeader = __decorate([customElement("axebow-header")], AxebowHeader);
|
|
614
701
|
//#endregion
|
|
615
702
|
//#region src/components/axebow-sidebar/axebow-sidebar.ts
|