@kumori/aurora-wui-components 0.0.3 → 0.0.4

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.
Files changed (32) hide show
  1. package/dist/components/cards/aurora-base-card.d.ts +13 -2
  2. package/dist/components/cards/aurora-base-card.d.ts.map +1 -1
  3. package/dist/components/cards/card.types.d.ts +4 -0
  4. package/dist/components/cards/card.types.d.ts.map +1 -1
  5. package/dist/components/cards/parts/aurora-card-attention-banner.d.ts +2 -2
  6. package/dist/components/cards/parts/aurora-card-attention-banner.d.ts.map +1 -1
  7. package/dist/components/cards/parts/aurora-card-cloud-logo.d.ts +8 -0
  8. package/dist/components/cards/parts/aurora-card-cloud-logo.d.ts.map +1 -0
  9. package/dist/components/cards/parts/{aurora-card-status-bar.d.ts → aurora-card-footer.d.ts} +8 -2
  10. package/dist/components/cards/parts/aurora-card-footer.d.ts.map +1 -0
  11. package/dist/components/cards/parts/aurora-card-header.d.ts +5 -2
  12. package/dist/components/cards/parts/aurora-card-header.d.ts.map +1 -1
  13. package/dist/components/cards/parts/aurora-card-resource-row.d.ts +10 -0
  14. package/dist/components/cards/parts/aurora-card-resource-row.d.ts.map +1 -0
  15. package/dist/components/cards/parts/aurora-card-resource-table.d.ts +2 -2
  16. package/dist/components/cards/parts/aurora-card-resource-table.d.ts.map +1 -1
  17. package/dist/components/cards/parts/aurora-card-special-link.d.ts +10 -0
  18. package/dist/components/cards/parts/aurora-card-special-link.d.ts.map +1 -0
  19. package/dist/components/cards/parts/aurora-card-status.d.ts +10 -0
  20. package/dist/components/cards/parts/aurora-card-status.d.ts.map +1 -0
  21. package/dist/components/cards/parts/aurora-card-table-header.d.ts +15 -0
  22. package/dist/components/cards/parts/aurora-card-table-header.d.ts.map +1 -0
  23. package/dist/components/cards/parts/aurora-card-version-selector.d.ts +11 -0
  24. package/dist/components/cards/parts/aurora-card-version-selector.d.ts.map +1 -0
  25. package/dist/index.d.ts +7 -2
  26. package/dist/index.d.ts.map +1 -1
  27. package/dist/index.js +466 -352
  28. package/dist/index.js.map +1 -1
  29. package/package.json +1 -1
  30. package/dist/components/cards/aurora-runtime-card.d.ts +0 -43
  31. package/dist/components/cards/aurora-runtime-card.d.ts.map +0 -1
  32. package/dist/components/cards/parts/aurora-card-status-bar.d.ts.map +0 -1
package/dist/index.js CHANGED
@@ -94,7 +94,7 @@ var STATUS_COLORS = {
94
94
  };
95
95
  //#endregion
96
96
  //#region src/styles/tailwind.css?inline
97
- var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-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: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .75rem;\n --text-xs--line-height: calc(1 / .75);\n --text-sm: .875rem;\n --text-sm--line-height: calc(1.25 / .875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --font-weight-normal: 400;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --leading-snug: 1.375;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n\n .absolute {\n position: absolute;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .top-full {\n top: 100%;\n }\n\n .right-0 {\n right: 0;\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .m-0 {\n margin: 0;\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mb-1 {\n margin-bottom: var(--spacing);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .line-clamp-1 {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .h-2 {\n height: calc(var(--spacing) * 2);\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-6 {\n height: calc(var(--spacing) * 6);\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-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n\n .h-\\[4\\.5rem\\] {\n height: 4.5rem;\n }\n\n .h-full {\n height: 100%;\n }\n\n .max-h-10 {\n max-height: calc(var(--spacing) * 10);\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-10 {\n min-height: calc(var(--spacing) * 10);\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-10 {\n width: calc(var(--spacing) * 10);\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-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .cursor-default {\n cursor: default;\n }\n\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .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 .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 .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 .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-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-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-\\[var\\(--axebow-gray\\)\\] {\n border-color: var(--axebow-gray);\n }\n\n .border-\\[var\\(--axebow-light-gray\\)\\] {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\[var\\(--axebow-secondary\\)\\] {\n border-color: var(--axebow-secondary);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .bg-\\[var\\(--axebow-anti-flash-white\\)\\] {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .bg-\\[var\\(--axebow-error\\)\\] {\n background-color: var(--axebow-error);\n }\n\n .bg-\\[var\\(--axebow-gray\\)\\] {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\[var\\(--axebow-light-gray\\)\\] {\n background-color: var(--axebow-light-gray);\n }\n\n .bg-\\[var\\(--axebow-white\\)\\] {\n background-color: var(--axebow-white);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .px-1 {\n padding-inline: var(--spacing);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .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-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 .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\[var\\(--axebow-error\\)\\] {\n color: var(--axebow-error);\n }\n\n .text-\\[var\\(--axebow-gray\\)\\] {\n color: var(--axebow-gray);\n }\n\n .text-\\[var\\(--axebow-primary\\)\\] {\n color: var(--axebow-primary);\n }\n\n .text-\\[var\\(--axebow-rich-black\\)\\] {\n color: var(--axebow-rich-black);\n }\n\n .text-\\[var\\(--axebow-secondary\\)\\] {\n color: var(--axebow-secondary);\n }\n\n .text-\\[var\\(--axebow-tertiary\\)\\] {\n color: var(--axebow-tertiary);\n }\n\n .italic {\n font-style: italic;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-100 {\n opacity: 1;\n }\n\n .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n @media (hover: hover) {\n .hover\\:rounded-lg:hover {\n border-radius: var(--radius-lg);\n }\n\n .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-\\[var\\(--axebow-light-gray\\)\\]:hover {\n background-color: var(--axebow-light-gray);\n }\n\n .hover\\:bg-gray-100:hover {\n background-color: var(--color-gray-100);\n }\n\n .hover\\:text-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:shadow-\\[0_4px_12px_0_rgba\\(13\\,24\\,33\\,0\\.08\\)\\]:hover {\n --tw-shadow: 0 4px 12px 0 var(--tw-shadow-color, #0d182114);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n\n .disabled\\:pointer-events-none:disabled {\n pointer-events: none;\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: .5;\n }\n}\n\n@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-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";
97
+ var tailwind_default = "/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n@layer properties {\n @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {\n *, :before, :after, ::backdrop {\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-border-style: solid;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-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: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n \"Courier New\", monospace;\n --color-gray-100: oklch(96.7% .003 264.542);\n --color-black: #000;\n --color-white: #fff;\n --spacing: .25rem;\n --text-xs: .75rem;\n --text-xs--line-height: calc(1 / .75);\n --text-sm: .875rem;\n --text-sm--line-height: calc(1.25 / .875);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-xl: 1.25rem;\n --text-xl--line-height: calc(1.75 / 1.25);\n --font-weight-normal: 400;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --leading-snug: 1.375;\n --radius-sm: .25rem;\n --radius-md: .375rem;\n --radius-lg: .5rem;\n --ease-in-out: cubic-bezier(.4, 0, .2, 1);\n --default-transition-duration: .15s;\n --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n }\n}\n\n@layer base {\n *, :after, :before, ::backdrop {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n ::file-selector-button {\n box-sizing: border-box;\n border: 0 solid;\n margin: 0;\n padding: 0;\n }\n\n html, :host {\n -webkit-text-size-adjust: 100%;\n tab-size: 4;\n line-height: 1.5;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n\n b, strong {\n font-weight: bolder;\n }\n\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n\n small {\n font-size: 80%;\n }\n\n sub, sup {\n vertical-align: baseline;\n font-size: 75%;\n line-height: 0;\n position: relative;\n }\n\n sub {\n bottom: -.25em;\n }\n\n sup {\n top: -.5em;\n }\n\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n\n :-moz-focusring {\n outline: auto;\n }\n\n progress {\n vertical-align: baseline;\n }\n\n summary {\n display: list-item;\n }\n\n ol, ul, menu {\n list-style: none;\n }\n\n img, svg, video, canvas, audio, iframe, embed, object {\n vertical-align: middle;\n display: block;\n }\n\n img, video {\n max-width: 100%;\n height: auto;\n }\n\n button, input, select, optgroup, textarea {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n opacity: 1;\n background-color: #0000;\n border-radius: 0;\n }\n\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n\n ::placeholder {\n opacity: 1;\n }\n\n @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {\n ::placeholder {\n color: currentColor;\n }\n\n @supports (color: color-mix(in lab, red, red)) {\n ::placeholder {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n\n textarea {\n resize: vertical;\n }\n\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n\n ::-webkit-datetime-edit {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-year-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-month-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-day-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-hour-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-minute-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-second-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-millisecond-field {\n padding-block: 0;\n }\n\n ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n\n :-moz-ui-invalid {\n box-shadow: none;\n }\n\n button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]) {\n appearance: button;\n }\n\n ::file-selector-button {\n appearance: button;\n }\n\n ::-webkit-inner-spin-button {\n height: auto;\n }\n\n ::-webkit-outer-spin-button {\n height: auto;\n }\n\n [hidden]:where(:not([hidden=\"until-found\"])) {\n display: none !important;\n }\n}\n\n@layer components;\n\n@layer utilities {\n .pointer-events-none {\n pointer-events: none;\n }\n\n .absolute {\n position: absolute;\n }\n\n .relative {\n position: relative;\n }\n\n .static {\n position: static;\n }\n\n .top-full {\n top: 100%;\n }\n\n .right-0 {\n right: 0;\n }\n\n .bottom-full {\n bottom: 100%;\n }\n\n .left-0 {\n left: 0;\n }\n\n .z-10 {\n z-index: 10;\n }\n\n .m-0 {\n margin: 0;\n }\n\n .mt-1 {\n margin-top: var(--spacing);\n }\n\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n\n .mb-1 {\n margin-bottom: var(--spacing);\n }\n\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n\n .box-border {\n box-sizing: border-box;\n }\n\n .line-clamp-1 {\n -webkit-line-clamp: 1;\n -webkit-box-orient: vertical;\n display: -webkit-box;\n overflow: hidden;\n }\n\n .flex {\n display: flex;\n }\n\n .grid {\n display: grid;\n }\n\n .hidden {\n display: none;\n }\n\n .h-2 {\n height: calc(var(--spacing) * 2);\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-6 {\n height: calc(var(--spacing) * 6);\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-10 {\n height: calc(var(--spacing) * 10);\n }\n\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n\n .h-\\[4\\.5rem\\] {\n height: 4.5rem;\n }\n\n .h-full {\n height: 100%;\n }\n\n .max-h-10 {\n max-height: calc(var(--spacing) * 10);\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-10 {\n min-height: calc(var(--spacing) * 10);\n }\n\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-10 {\n width: calc(var(--spacing) * 10);\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-44 {\n min-width: calc(var(--spacing) * 44);\n }\n\n .flex-1 {\n flex: 1;\n }\n\n .shrink-0 {\n flex-shrink: 0;\n }\n\n .transform {\n transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );\n }\n\n .cursor-default {\n cursor: default;\n }\n\n .cursor-not-allowed {\n cursor: not-allowed;\n }\n\n .cursor-pointer {\n cursor: pointer;\n }\n\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n\n .grid-cols-\\[auto_auto_1fr_auto\\] {\n grid-template-columns: auto auto 1fr auto;\n }\n\n .flex-col {\n flex-direction: column;\n }\n\n .flex-row {\n flex-direction: row;\n }\n\n .flex-wrap {\n flex-wrap: wrap;\n }\n\n .items-center {\n align-items: center;\n }\n\n .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 .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 .overflow-hidden {\n overflow: hidden;\n }\n\n .overflow-y-auto {\n overflow-y: auto;\n }\n\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n\n .rounded-md {\n border-radius: var(--radius-md);\n }\n\n .rounded-sm {\n border-radius: var(--radius-sm);\n }\n\n .rounded-b-lg {\n border-bottom-right-radius: var(--radius-lg);\n border-bottom-left-radius: var(--radius-lg);\n }\n\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n\n .border-2 {\n border-style: var(--tw-border-style);\n border-width: 2px;\n }\n\n .border-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-none {\n --tw-border-style: none;\n border-style: none;\n }\n\n .border-\\[var\\(--axebow-gray\\)\\] {\n border-color: var(--axebow-gray);\n }\n\n .border-\\[var\\(--axebow-light-gray\\)\\] {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\[var\\(--axebow-secondary\\)\\] {\n border-color: var(--axebow-secondary);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .bg-\\[var\\(--axebow-anti-flash-white\\)\\] {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .bg-\\[var\\(--axebow-error\\)\\] {\n background-color: var(--axebow-error);\n }\n\n .bg-\\[var\\(--axebow-gray\\)\\] {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\[var\\(--axebow-light-gray\\)\\] {\n background-color: var(--axebow-light-gray);\n }\n\n .bg-\\[var\\(--axebow-white\\)\\] {\n background-color: var(--axebow-white);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .px-1 {\n padding-inline: var(--spacing);\n }\n\n .px-1\\.5 {\n padding-inline: calc(var(--spacing) * 1.5);\n }\n\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n\n .py-0\\.5 {\n padding-block: calc(var(--spacing) * .5);\n }\n\n .py-1 {\n padding-block: var(--spacing);\n }\n\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n\n .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-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 .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xl {\n font-size: var(--text-xl);\n line-height: var(--tw-leading, var(--text-xl--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\[var\\(--axebow-error\\)\\] {\n color: var(--axebow-error);\n }\n\n .text-\\[var\\(--axebow-gray\\)\\] {\n color: var(--axebow-gray);\n }\n\n .text-\\[var\\(--axebow-primary\\)\\] {\n color: var(--axebow-primary);\n }\n\n .text-\\[var\\(--axebow-rich-black\\)\\] {\n color: var(--axebow-rich-black);\n }\n\n .text-\\[var\\(--axebow-secondary\\)\\] {\n color: var(--axebow-secondary);\n }\n\n .text-\\[var\\(--axebow-tertiary\\)\\] {\n color: var(--axebow-tertiary);\n }\n\n .italic {\n font-style: italic;\n }\n\n .opacity-50 {\n opacity: .5;\n }\n\n .opacity-100 {\n opacity: 1;\n }\n\n .shadow-\\[2px_2px_25px_0px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\] {\n --tw-shadow: 2px 2px 25px 0px var(--tw-shadow-color, #0000001a);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );\n }\n\n .transition-all {\n transition-property: all;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .transition-shadow {\n transition-property: box-shadow;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n\n .duration-200 {\n --tw-duration: .2s;\n transition-duration: .2s;\n }\n\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n\n @media (hover: hover) {\n .hover\\:rounded-lg:hover {\n border-radius: var(--radius-lg);\n }\n\n .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-\\[var\\(--axebow-light-gray\\)\\]:hover {\n background-color: var(--axebow-light-gray);\n }\n\n .hover\\:bg-gray-100:hover {\n background-color: var(--color-gray-100);\n }\n\n .hover\\:text-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:shadow-\\[0_4px_12px_0_rgba\\(13\\,24\\,33\\,0\\.08\\)\\]:hover {\n --tw-shadow: 0 4px 12px 0 var(--tw-shadow-color, #0d182114);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n\n .disabled\\:pointer-events-none:disabled {\n pointer-events: none;\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: .5;\n }\n}\n\n@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-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";
98
98
  //#endregion
99
99
  //#region src/components/cards/aurora-more-actions.ts
100
100
  var AuroraMoreActions = class AuroraMoreActions extends LitElement {
@@ -211,6 +211,81 @@ __decorate([property({ type: String })], AuroraMoreActions.prototype, "moreActio
211
211
  __decorate([state()], AuroraMoreActions.prototype, "_fixedPos", void 0);
212
212
  AuroraMoreActions = __decorate([customElement("aurora-more-actions")], AuroraMoreActions);
213
213
  //#endregion
214
+ //#region src/components/cards/parts/aurora-card-cloud-logo.ts
215
+ var AuroraCardCloudLogo = class AuroraCardCloudLogo extends LitElement {
216
+ constructor(..._args) {
217
+ super(..._args);
218
+ this.src = null;
219
+ this.size = "large";
220
+ }
221
+ static {
222
+ this.styles = [unsafeCSS(tailwind_default), css`:host { display: contents; }`];
223
+ }
224
+ render() {
225
+ if (!this.src) return html``;
226
+ return this.size === "small" ? html`<div class="h-4 w-4"><img src=${this.src} class="max-h-full max-w-full object-contain" /></div>` : html`<div class="h-10 w-10 flex items-center justify-center shrink-0"><img src=${this.src} class="max-h-full max-w-full object-contain" /></div>`;
227
+ }
228
+ };
229
+ __decorate([property({ type: String })], AuroraCardCloudLogo.prototype, "src", void 0);
230
+ __decorate([property({ type: String })], AuroraCardCloudLogo.prototype, "size", void 0);
231
+ AuroraCardCloudLogo = __decorate([customElement("aurora-card-cloud-logo")], AuroraCardCloudLogo);
232
+ //#endregion
233
+ //#region src/components/cards/parts/aurora-card-version-selector.ts
234
+ var AuroraCardVersionSelector = class AuroraCardVersionSelector extends LitElement {
235
+ constructor(..._args) {
236
+ super(..._args);
237
+ this.revisions = [];
238
+ this.displayedRevision = "";
239
+ }
240
+ static {
241
+ this.styles = [unsafeCSS(tailwind_default), css`
242
+ :host { display: block; width: 100%; }
243
+ sl-select {
244
+ --sl-input-background-color: transparent;
245
+ --sl-input-border-color: transparent;
246
+ border: none;
247
+ background: transparent;
248
+ padding: 0;
249
+ margin: 0;
250
+ min-width: 0;
251
+ width: 100% !important;
252
+ }
253
+ sl-select::part(base) {
254
+ border: none;
255
+ background-color: transparent;
256
+ padding: 0;
257
+ min-width: 0;
258
+ display: inline-block;
259
+ }
260
+ sl-select::part(display-input) { padding: 0 8px; }
261
+ sl-select::part(combobox) { padding: 0; }
262
+ `];
263
+ }
264
+ _formatRevision(id) {
265
+ if (!id) return "";
266
+ const parts = id.split("/");
267
+ return parts[parts.length - 1] ?? id;
268
+ }
269
+ render() {
270
+ return html`
271
+ <sl-select style="width:100%;" value=${this.displayedRevision} @sl-change=${this._onChange}>
272
+ ${this.revisions.map((rev) => html`<sl-option value=${rev.id}>${this._formatRevision(rev.id)}</sl-option>`)}
273
+ </sl-select>
274
+ `;
275
+ }
276
+ _onChange(e) {
277
+ const revision = e.target.value;
278
+ this.dispatchEvent(new CustomEvent("revision-change", {
279
+ detail: { revision },
280
+ bubbles: true,
281
+ composed: true
282
+ }));
283
+ }
284
+ };
285
+ __decorate([property({ type: Array })], AuroraCardVersionSelector.prototype, "revisions", void 0);
286
+ __decorate([property({ type: String })], AuroraCardVersionSelector.prototype, "displayedRevision", void 0);
287
+ AuroraCardVersionSelector = __decorate([customElement("aurora-card-version-selector")], AuroraCardVersionSelector);
288
+ //#endregion
214
289
  //#region src/components/cards/parts/aurora-card-header.ts
215
290
  var AuroraCardHeader = class AuroraCardHeader extends LitElement {
216
291
  constructor(..._args) {
@@ -221,6 +296,8 @@ var AuroraCardHeader = class AuroraCardHeader extends LitElement {
221
296
  this.badge = "none";
222
297
  this.subtitle = "";
223
298
  this.cardType = "account";
299
+ this.revisions = [];
300
+ this.displayedRevision = "";
224
301
  this.freeIaasLabel = "Free IaaS";
225
302
  this.freeIaasTitle = "Free Infrastructure";
226
303
  this.freeIaasDesc = "This environment uses free infrastructure.";
@@ -254,13 +331,18 @@ var AuroraCardHeader = class AuroraCardHeader extends LitElement {
254
331
  return html``;
255
332
  }
256
333
  render() {
257
- const isAccount = this.cardType === "account";
258
334
  const isTenant = this.cardType === "tenant";
259
- if (isAccount) return html`
260
- <div class="w-full bg-[var(--axebow-anti-flash-white)] rounded-md flex items-center gap-3 py-2 px-3 h-16">
261
- ${this.logoSrc ? html`<div class="h-10 w-10 flex items-center justify-center shrink-0"><img src=${this.logoSrc} class="max-h-full max-w-full object-contain" /></div>` : ""}
335
+ const isCompact = this.cardType === "environment" || isTenant;
336
+ const isRuntime = this.cardType === "runtime";
337
+ if (isCompact) return html`
338
+ <div class="w-full bg-[var(--axebow-anti-flash-white)] rounded-md flex flex-col justify-center px-5 py-3 h-[4.5rem]">
262
339
  <div class="flex flex-col flex-1 min-w-0">
263
- ${this.tenantOrAccount ? html`<span class="font-semibold text-[var(--axebow-primary)] leading-none">${this.tenantOrAccount}</span>` : ""}
340
+ ${this.tenantOrAccount || this.logoSrc ? html`
341
+ <div class="flex gap-2 items-center leading-none mt-1">
342
+ <aurora-card-cloud-logo .src=${this.logoSrc} size="small"></aurora-card-cloud-logo>
343
+ <span class="font-semibold ${isTenant ? "text-[var(--axebow-gray)]" : "text-[var(--axebow-primary)]"} leading-none">${this.tenantOrAccount}</span>
344
+ </div>
345
+ ` : ""}
264
346
  <div class="flex justify-between items-center">
265
347
  <span class="font-bold text-xl text-[var(--axebow-primary)] leading-snug pt-0.5">${this.name}</span>
266
348
  ${this._renderBadge()}
@@ -270,23 +352,34 @@ var AuroraCardHeader = class AuroraCardHeader extends LitElement {
270
352
  </div>
271
353
  `;
272
354
  return html`
273
- <div class="w-full bg-[var(--axebow-anti-flash-white)] rounded-md flex flex-col justify-center px-5 py-3 h-[4.5rem]">
274
- <div class="flex flex-col flex-1 min-w-0">
275
- ${this.tenantOrAccount || this.logoSrc ? html`
276
- <div class="flex gap-2 items-center leading-none mt-1">
277
- ${this.logoSrc ? html`<div class="h-4 w-4"><img src=${this.logoSrc} class="max-h-full max-w-full object-contain" /></div>` : ""}
278
- <span class="font-semibold ${isTenant ? "text-[var(--axebow-gray)]" : "text-[var(--axebow-primary)]"} leading-none">${this.tenantOrAccount}</span>
279
- </div>
280
- ` : ""}
355
+ <div class="w-full bg-[var(--axebow-anti-flash-white)] rounded-md flex items-center gap-3 py-2 px-3 h-16">
356
+ <aurora-card-cloud-logo .src=${this.logoSrc} size="large"></aurora-card-cloud-logo>
357
+ <div class="flex flex-col flex-1 min-w-0 ${isRuntime ? "justify-center" : ""}">
358
+ ${!isRuntime && this.tenantOrAccount ? html`<span class="font-semibold text-[var(--axebow-primary)] leading-none">${this.tenantOrAccount}</span>` : ""}
281
359
  <div class="flex justify-between items-center">
282
360
  <span class="font-bold text-xl text-[var(--axebow-primary)] leading-snug pt-0.5">${this.name}</span>
283
361
  ${this._renderBadge()}
284
362
  </div>
285
- ${this.subtitle ? html`<div class="italic text-[var(--axebow-primary)] flex items-center leading-none">${this.subtitle}<slot name="subtitle-tooltip"></slot></div>` : ""}
363
+ ${isRuntime ? html`
364
+ <div class="revision-wrap italic text-[var(--axebow-primary)] flex items-center">
365
+ <aurora-card-version-selector
366
+ .revisions=${this.revisions}
367
+ .displayedRevision=${this.displayedRevision}
368
+ @revision-change=${this._onRevisionChange}
369
+ ></aurora-card-version-selector>
370
+ </div>
371
+ ` : this.subtitle ? html`<div class="italic text-[var(--axebow-primary)] flex items-center leading-none">${this.subtitle}<slot name="subtitle-tooltip"></slot></div>` : ""}
286
372
  </div>
287
373
  </div>
288
374
  `;
289
375
  }
376
+ _onRevisionChange(e) {
377
+ this.dispatchEvent(new CustomEvent("revision-change", {
378
+ detail: e.detail,
379
+ bubbles: true,
380
+ composed: true
381
+ }));
382
+ }
290
383
  };
291
384
  __decorate([property({ type: String })], AuroraCardHeader.prototype, "logoSrc", void 0);
292
385
  __decorate([property({ type: String })], AuroraCardHeader.prototype, "tenantOrAccount", void 0);
@@ -294,6 +387,8 @@ __decorate([property({ type: String })], AuroraCardHeader.prototype, "name", voi
294
387
  __decorate([property({ type: String })], AuroraCardHeader.prototype, "badge", void 0);
295
388
  __decorate([property({ type: String })], AuroraCardHeader.prototype, "subtitle", void 0);
296
389
  __decorate([property({ type: String })], AuroraCardHeader.prototype, "cardType", void 0);
390
+ __decorate([property({ type: Array })], AuroraCardHeader.prototype, "revisions", void 0);
391
+ __decorate([property({ type: String })], AuroraCardHeader.prototype, "displayedRevision", void 0);
297
392
  __decorate([property({ type: String })], AuroraCardHeader.prototype, "freeIaasLabel", void 0);
298
393
  __decorate([property({ type: String })], AuroraCardHeader.prototype, "freeIaasTitle", void 0);
299
394
  __decorate([property({ type: String })], AuroraCardHeader.prototype, "freeIaasDesc", void 0);
@@ -497,6 +592,119 @@ __decorate([property({ type: Boolean })], AuroraCardFilter.prototype, "isPlainRo
497
592
  __decorate([property({ type: Boolean })], AuroraCardFilter.prototype, "isDisabled", void 0);
498
593
  AuroraCardFilter = __decorate([customElement("aurora-card-filter")], AuroraCardFilter);
499
594
  //#endregion
595
+ //#region src/components/cards/parts/aurora-card-table-header.ts
596
+ var AuroraCardTableHeader = class AuroraCardTableHeader extends LitElement {
597
+ constructor(..._args) {
598
+ super(..._args);
599
+ this.opened = false;
600
+ this.filterDisplayText = "";
601
+ this.allLabel = "All Roles & Instances";
602
+ this.attentionLabel = "Attention needed";
603
+ this.showAttention = false;
604
+ this.filterRoles = [];
605
+ }
606
+ static {
607
+ this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
608
+ }
609
+ render() {
610
+ return html`
611
+ <div class="relative">
612
+ <div
613
+ class="flex justify-between items-center border-b border-[var(--axebow-light-gray)] w-full px-2 cursor-pointer h-7"
614
+ @click=${this._onToggle}
615
+ >
616
+ <span class="text-[var(--axebow-tertiary)]">${this.filterDisplayText || this.allLabel}</span>
617
+ <div class="flex items-center gap-2">
618
+ ${this.showAttention ? html`<p class="text-[var(--axebow-error)] m-0 text-xs">${this.attentionLabel}</p>` : ""}
619
+ <axebow-icon iconName="chevron_right" rotate="90" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
620
+ </div>
621
+ </div>
622
+
623
+ <div class="${this.opened ? "" : "hidden"} absolute top-full left-0 right-0 z-10 flex flex-col bg-white rounded-b-lg border border-[var(--axebow-light-gray)] shadow-[2px_2px_25px_0px_rgba(0,0,0,0.1)] max-h-40 overflow-y-auto">
624
+ <p class="w-full p-2 cursor-pointer m-0 hover:bg-[var(--axebow-light-gray)]" @click=${() => this._onSelect("", "all")}>${this.allLabel}</p>
625
+ ${this.filterRoles.map((role) => html`
626
+ <div
627
+ class="w-full py-1 px-2 flex justify-between items-center border-t border-[var(--axebow-light-gray)] cursor-pointer hover:bg-[var(--axebow-light-gray)]"
628
+ @click=${() => this._onSelect(role.name, "role")}
629
+ >
630
+ <div class="flex items-center gap-2">
631
+ ${role.logo ? html`<img src=${role.logo} class="w-5 h-5" />` : ""}
632
+ <p class="m-0">${role.name}</p>
633
+ </div>
634
+ </div>
635
+ ${role.instances.map((inst) => html`
636
+ <div
637
+ class="w-full py-1 px-2 pl-6 flex justify-between items-center border-t border-[var(--axebow-light-gray)] cursor-pointer hover:bg-[var(--axebow-light-gray)]"
638
+ @click=${() => this._onSelect(inst.name, "instance")}
639
+ >
640
+ <div class="flex items-center gap-2">
641
+ <axebow-icon iconName="subdirectory_arrow_right" size="small"></axebow-icon>
642
+ <p class="m-0">${inst.name}</p>
643
+ </div>
644
+ ${inst.needsAttention ? html`<axebow-icon iconName="warning" iconColor="var(--axebow-error)" size="small"></axebow-icon>` : ""}
645
+ </div>
646
+ `)}
647
+ `)}
648
+ </div>
649
+ </div>
650
+ `;
651
+ }
652
+ _onToggle() {
653
+ this.dispatchEvent(new CustomEvent("toggle-open", {
654
+ bubbles: true,
655
+ composed: true
656
+ }));
657
+ }
658
+ _onSelect(selected, type) {
659
+ this.dispatchEvent(new CustomEvent("filter-change", {
660
+ detail: {
661
+ selected,
662
+ type
663
+ },
664
+ bubbles: true,
665
+ composed: true
666
+ }));
667
+ }
668
+ };
669
+ __decorate([property({ type: Boolean })], AuroraCardTableHeader.prototype, "opened", void 0);
670
+ __decorate([property({ type: String })], AuroraCardTableHeader.prototype, "filterDisplayText", void 0);
671
+ __decorate([property({ type: String })], AuroraCardTableHeader.prototype, "allLabel", void 0);
672
+ __decorate([property({ type: String })], AuroraCardTableHeader.prototype, "attentionLabel", void 0);
673
+ __decorate([property({ type: Boolean })], AuroraCardTableHeader.prototype, "showAttention", void 0);
674
+ __decorate([property({ type: Array })], AuroraCardTableHeader.prototype, "filterRoles", void 0);
675
+ AuroraCardTableHeader = __decorate([customElement("aurora-card-table-header")], AuroraCardTableHeader);
676
+ //#endregion
677
+ //#region src/components/cards/parts/aurora-card-special-link.ts
678
+ var AuroraCardSpecialLink = class AuroraCardSpecialLink extends LitElement {
679
+ constructor(..._args) {
680
+ super(..._args);
681
+ this.label = "";
682
+ this.color = "var(--axebow-error)";
683
+ this.icon = "arrow_forward";
684
+ }
685
+ static {
686
+ this.styles = [unsafeCSS(tailwind_default), css`:host { display: inline-flex; }`];
687
+ }
688
+ render() {
689
+ return html`
690
+ <span class="cursor-pointer" style="color:${this.color};" @click=${this._onClick}>
691
+ ${this.label}
692
+ <axebow-icon iconName=${this.icon} iconColor=${this.color} size="small"></axebow-icon>
693
+ </span>
694
+ `;
695
+ }
696
+ _onClick() {
697
+ this.dispatchEvent(new CustomEvent("link-click", {
698
+ bubbles: true,
699
+ composed: true
700
+ }));
701
+ }
702
+ };
703
+ __decorate([property({ type: String })], AuroraCardSpecialLink.prototype, "label", void 0);
704
+ __decorate([property({ type: String })], AuroraCardSpecialLink.prototype, "color", void 0);
705
+ __decorate([property({ type: String })], AuroraCardSpecialLink.prototype, "icon", void 0);
706
+ AuroraCardSpecialLink = __decorate([customElement("aurora-card-special-link")], AuroraCardSpecialLink);
707
+ //#endregion
500
708
  //#region src/components/cards/parts/aurora-card-attention-banner.ts
501
709
  var AuroraCardAttentionBanner = class AuroraCardAttentionBanner extends LitElement {
502
710
  constructor(..._args) {
@@ -535,10 +743,11 @@ var AuroraCardAttentionBanner = class AuroraCardAttentionBanner extends LitEleme
535
743
  ${this.isPlainRole ? html`<span class="text-[var(--axebow-error)]">${this.askOwnerLabel}</span>` : html`
536
744
  <p class="text-[var(--axebow-error)] m-0">
537
745
  ${this.invalidCredentials ? this.invalidCredsLabel : `${this.limitReachedLabel} ${this._formatList(exceeded)}.`}
538
- <span class="text-[var(--axebow-error)] cursor-pointer" @click=${this._onManage}>
539
- ${this.manageLabel}
540
- <axebow-icon iconName="arrow_forward" iconColor="var(--axebow-error)" size="small"></axebow-icon>
541
- </span>
746
+ <aurora-card-special-link
747
+ .label=${this.manageLabel}
748
+ color="var(--axebow-error)"
749
+ @link-click=${this._onManage}
750
+ ></aurora-card-special-link>
542
751
  </p>
543
752
  `}
544
753
  </div>
@@ -597,6 +806,59 @@ var AuroraCardActionBanner = class AuroraCardActionBanner extends LitElement {
597
806
  __decorate([property({ type: String })], AuroraCardActionBanner.prototype, "label", void 0);
598
807
  AuroraCardActionBanner = __decorate([customElement("aurora-card-action-banner")], AuroraCardActionBanner);
599
808
  //#endregion
809
+ //#region src/components/cards/parts/aurora-card-resource-row.ts
810
+ var AuroraCardResourceRow = class AuroraCardResourceRow extends LitElement {
811
+ constructor(..._args) {
812
+ super(..._args);
813
+ this.attentionThreshold = 90;
814
+ this.isLast = false;
815
+ }
816
+ static {
817
+ this.styles = [unsafeCSS(tailwind_default), css`:host { display: contents; }`];
818
+ }
819
+ render() {
820
+ const stat = this.stat;
821
+ const borderClass = !stat.hidden && !this.isLast ? "border-b border-[var(--axebow-light-gray)]" : "";
822
+ if (stat.hidden) return html`
823
+ <div class="flex items-center w-full px-2 h-8 gap-2 ${borderClass}"></div>
824
+ <div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${borderClass}"></div>
825
+ <div class="flex items-center justify-end w-full px-2 h-8 ${borderClass}"></div>
826
+ <div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${borderClass}"></div>
827
+ `;
828
+ return html`
829
+ <div class="flex items-center w-full px-2 h-8 gap-2 ${borderClass}">
830
+ <div class="flex items-center gap-2 ${stat.isSecondary ? "ml-2" : ""}">
831
+ <axebow-icon iconName=${stat.icon} size="small" rotate=${stat.iconRotation ?? 0}></axebow-icon>
832
+ <span class="text-xs ${stat.isSecondary ? "" : "font-semibold"}">${stat.title}</span>
833
+ </div>
834
+ </div>
835
+
836
+ <div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${borderClass}">
837
+ <p class="${stat.isSecondary ? "font-normal" : "font-semibold"} m-0">${stat.value ?? "-.-"}</p>
838
+ </div>
839
+
840
+ <div class="flex items-center justify-end w-full px-2 h-8 ${borderClass}">
841
+ <div class="h-2 w-full bg-[var(--axebow-light-gray)] rounded-md relative overflow-hidden">
842
+ <div
843
+ class="absolute h-full ${stat.percentage >= this.attentionThreshold ? "bg-[var(--axebow-error)]" : "bg-[var(--axebow-gray)]"}"
844
+ style="width:${stat.percentage}%;"
845
+ ></div>
846
+ </div>
847
+ </div>
848
+
849
+ <div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${borderClass}">
850
+ <p class="${stat.isSecondary ? "font-normal" : "font-semibold"} m-0">
851
+ ${stat.maxValue ?? "-.-"}<span class="font-normal">${stat.tagValue ?? ""}</span>
852
+ </p>
853
+ </div>
854
+ `;
855
+ }
856
+ };
857
+ __decorate([property({ type: Object })], AuroraCardResourceRow.prototype, "stat", void 0);
858
+ __decorate([property({ type: Number })], AuroraCardResourceRow.prototype, "attentionThreshold", void 0);
859
+ __decorate([property({ type: Boolean })], AuroraCardResourceRow.prototype, "isLast", void 0);
860
+ AuroraCardResourceRow = __decorate([customElement("aurora-card-resource-row")], AuroraCardResourceRow);
861
+ //#endregion
600
862
  //#region src/components/cards/parts/aurora-card-resource-table.ts
601
863
  var AuroraCardResourceTable = class AuroraCardResourceTable extends LitElement {
602
864
  constructor(..._args) {
@@ -629,60 +891,14 @@ var AuroraCardResourceTable = class AuroraCardResourceTable extends LitElement {
629
891
  const lastVisible = visibleRows[visibleRows.length - 1];
630
892
  return html`
631
893
  <div>
632
- <div class="flex border-b border-[var(--axebow-light-gray)]">
633
- <!-- Icon + title -->
634
- <div class="flex flex-col justify-between">
635
- ${this.rows.map((stat, i) => html`
636
- <div class="flex items-center w-full px-2 h-8 gap-2 ${!stat.hidden && stat !== lastVisible ? "border-b border-[var(--axebow-light-gray)]" : ""}">
637
- ${!stat.hidden ? html`
638
- <div class="flex items-center gap-2 ${stat.isSecondary ? "ml-2" : ""}">
639
- <axebow-icon iconName=${stat.icon} size="small" rotate=${stat.iconRotation ?? 0}></axebow-icon>
640
- <span class="text-xs ${stat.isSecondary ? "" : "font-semibold"}">${stat.title}</span>
641
- </div>
642
- ` : ""}
643
- </div>
644
- `)}
645
- </div>
646
-
647
- <!-- Current value -->
648
- <div class="flex flex-col justify-between">
649
- ${this.rows.map((stat, i) => html`
650
- <div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${!stat.hidden && stat !== lastVisible ? "border-b border-[var(--axebow-light-gray)]" : ""}">
651
- ${!stat.hidden ? html`
652
- <p class="${stat.isSecondary ? "font-normal" : "font-semibold"} m-0">${stat.value ?? "-.-"}</p>
653
- ` : ""}
654
- </div>
655
- `)}
656
- </div>
657
-
658
- <!-- Progress bar -->
659
- <div class="flex flex-1 flex-col justify-between">
660
- ${this.rows.map((stat, i) => html`
661
- <div class="flex items-center justify-end w-full px-2 h-8 ${!stat.hidden && stat !== lastVisible ? "border-b border-[var(--axebow-light-gray)]" : ""}">
662
- ${!stat.hidden ? html`
663
- <div class="h-2 w-full bg-[var(--axebow-light-gray)] rounded-md relative overflow-hidden">
664
- <div
665
- class="absolute h-full ${stat.percentage >= this.attentionThreshold ? "bg-[var(--axebow-error)]" : "bg-[var(--axebow-gray)]"}"
666
- style="width:${stat.percentage}%;"
667
- ></div>
668
- </div>
669
- ` : ""}
670
- </div>
671
- `)}
672
- </div>
673
-
674
- <!-- Max value -->
675
- <div class="flex flex-col justify-between">
676
- ${this.rows.map((stat, i) => html`
677
- <div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${!stat.hidden && stat !== lastVisible ? "border-b border-[var(--axebow-light-gray)]" : ""}">
678
- ${!stat.hidden ? html`
679
- <p class="${stat.isSecondary ? "font-normal" : "font-semibold"} m-0">
680
- ${stat.maxValue ?? "-.-"}<span class="font-normal">${stat.tagValue ?? ""}</span>
681
- </p>
682
- ` : ""}
683
- </div>
894
+ <div class="grid grid-cols-[auto_auto_1fr_auto] border-b border-[var(--axebow-light-gray)]">
895
+ ${this.rows.map((stat) => html`
896
+ <aurora-card-resource-row
897
+ .stat=${stat}
898
+ .attentionThreshold=${this.attentionThreshold}
899
+ .isLast=${stat === lastVisible}
900
+ ></aurora-card-resource-row>
684
901
  `)}
685
- </div>
686
902
  </div>
687
903
 
688
904
  ${showWarning ? html`<aurora-card-attention-banner
@@ -725,25 +941,73 @@ __decorate([property({ type: String })], AuroraCardResourceTable.prototype, "and
725
941
  __decorate([property({ type: String })], AuroraCardResourceTable.prototype, "actionBannerLabel", void 0);
726
942
  AuroraCardResourceTable = __decorate([customElement("aurora-card-resource-table")], AuroraCardResourceTable);
727
943
  //#endregion
728
- //#region src/components/cards/parts/aurora-card-status-bar.ts
729
- var AuroraCardStatusBar = class AuroraCardStatusBar extends LitElement {
944
+ //#region src/components/cards/parts/aurora-card-status.ts
945
+ var AuroraCardStatus = class AuroraCardStatus extends LitElement {
946
+ constructor(..._args) {
947
+ super(..._args);
948
+ this.statusCode = "";
949
+ this.statusMessage = "";
950
+ this.borderColor = "";
951
+ this.showSpinner = false;
952
+ }
953
+ static {
954
+ this.styles = [unsafeCSS(tailwind_default), css`
955
+ :host { display: block; flex: 1; min-width: 0; }
956
+ sl-tooltip::part(base) { max-width: none; white-space: normal; word-break: break-word; }
957
+ `];
958
+ }
959
+ render() {
960
+ if (!this.statusCode) return html`<div class="w-full whitespace-nowrap overflow-hidden text-ellipsis"><slot></slot></div>`;
961
+ return html`
962
+ <div class="flex items-center gap-1 min-w-0 w-full">
963
+ ${this.showSpinner ? html`<sl-spinner style="--indicator-color:${this.borderColor};"></sl-spinner>` : ""}
964
+ <p class="font-bold text-xs m-0 line-clamp-1" style="color:${this.borderColor};" title=${this.statusCode}>${this.statusCode}</p>
965
+ <sl-tooltip content=${this.statusMessage}>
966
+ <axebow-icon class="cursor-pointer shrink-0" iconColor=${this.borderColor} iconName="info" size="small"></axebow-icon>
967
+ </sl-tooltip>
968
+ </div>
969
+ `;
970
+ }
971
+ };
972
+ __decorate([property({ type: String })], AuroraCardStatus.prototype, "statusCode", void 0);
973
+ __decorate([property({ type: String })], AuroraCardStatus.prototype, "statusMessage", void 0);
974
+ __decorate([property({ type: String })], AuroraCardStatus.prototype, "borderColor", void 0);
975
+ __decorate([property({ type: Boolean })], AuroraCardStatus.prototype, "showSpinner", void 0);
976
+ AuroraCardStatus = __decorate([customElement("aurora-card-status")], AuroraCardStatus);
977
+ //#endregion
978
+ //#region src/components/cards/parts/aurora-card-footer.ts
979
+ var AuroraCardFooter = class AuroraCardFooter extends LitElement {
730
980
  constructor(..._args) {
731
981
  super(..._args);
732
982
  this.isFreeIaaS = false;
733
983
  this.isPlainRole = false;
984
+ this.statusCode = "";
985
+ this.statusMessage = "";
986
+ this.borderColor = "";
987
+ this.showSpinner = false;
734
988
  this.moreActionsOpen = false;
735
989
  this.moreActionsOptions = [];
736
990
  this.closeLabel = "Close";
737
991
  this.moreActionsLabel = "More";
992
+ this.actionLabel = "";
738
993
  }
739
994
  static {
740
995
  this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
741
996
  }
742
997
  render() {
998
+ const showDropdown = !this.isFreeIaaS && !this.isPlainRole && this.moreActionsOptions.length > 0;
999
+ const showAction = !showDropdown && !!this.actionLabel;
743
1000
  return html`
744
1001
  <div class="flex justify-between items-center relative h-6 gap-2 text-xs">
745
- <div class="flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis"><slot></slot></div>
746
- ${!this.isFreeIaaS && !this.isPlainRole && this.moreActionsOptions.length > 0 ? html`
1002
+ <aurora-card-status
1003
+ .statusCode=${this.statusCode}
1004
+ .statusMessage=${this.statusMessage}
1005
+ .borderColor=${this.borderColor}
1006
+ .showSpinner=${this.showSpinner}
1007
+ >
1008
+ <slot></slot>
1009
+ </aurora-card-status>
1010
+ ${showDropdown ? html`
747
1011
  <aurora-more-actions
748
1012
  class="shrink-0 mr-2"
749
1013
  placement="top"
@@ -753,7 +1017,7 @@ var AuroraCardStatusBar = class AuroraCardStatusBar extends LitElement {
753
1017
  .moreActionsLabel=${this.moreActionsLabel}
754
1018
  @toggled=${this._onToggled}
755
1019
  ></aurora-more-actions>
756
- ` : ""}
1020
+ ` : showAction ? html`<axebow-button variant="text" size="medium" @click=${this._onAction}>${this.actionLabel}</axebow-button>` : ""}
757
1021
  </div>
758
1022
  `;
759
1023
  }
@@ -764,14 +1028,25 @@ var AuroraCardStatusBar = class AuroraCardStatusBar extends LitElement {
764
1028
  composed: true
765
1029
  }));
766
1030
  }
1031
+ _onAction() {
1032
+ this.dispatchEvent(new CustomEvent("footer-action-click", {
1033
+ bubbles: true,
1034
+ composed: true
1035
+ }));
1036
+ }
767
1037
  };
768
- __decorate([property({ type: Boolean })], AuroraCardStatusBar.prototype, "isFreeIaaS", void 0);
769
- __decorate([property({ type: Boolean })], AuroraCardStatusBar.prototype, "isPlainRole", void 0);
770
- __decorate([property({ type: Boolean })], AuroraCardStatusBar.prototype, "moreActionsOpen", void 0);
771
- __decorate([property({ type: Array })], AuroraCardStatusBar.prototype, "moreActionsOptions", void 0);
772
- __decorate([property({ type: String })], AuroraCardStatusBar.prototype, "closeLabel", void 0);
773
- __decorate([property({ type: String })], AuroraCardStatusBar.prototype, "moreActionsLabel", void 0);
774
- AuroraCardStatusBar = __decorate([customElement("aurora-card-status-bar")], AuroraCardStatusBar);
1038
+ __decorate([property({ type: Boolean })], AuroraCardFooter.prototype, "isFreeIaaS", void 0);
1039
+ __decorate([property({ type: Boolean })], AuroraCardFooter.prototype, "isPlainRole", void 0);
1040
+ __decorate([property({ type: String })], AuroraCardFooter.prototype, "statusCode", void 0);
1041
+ __decorate([property({ type: String })], AuroraCardFooter.prototype, "statusMessage", void 0);
1042
+ __decorate([property({ type: String })], AuroraCardFooter.prototype, "borderColor", void 0);
1043
+ __decorate([property({ type: Boolean })], AuroraCardFooter.prototype, "showSpinner", void 0);
1044
+ __decorate([property({ type: Boolean })], AuroraCardFooter.prototype, "moreActionsOpen", void 0);
1045
+ __decorate([property({ type: Array })], AuroraCardFooter.prototype, "moreActionsOptions", void 0);
1046
+ __decorate([property({ type: String })], AuroraCardFooter.prototype, "closeLabel", void 0);
1047
+ __decorate([property({ type: String })], AuroraCardFooter.prototype, "moreActionsLabel", void 0);
1048
+ __decorate([property({ type: String })], AuroraCardFooter.prototype, "actionLabel", void 0);
1049
+ AuroraCardFooter = __decorate([customElement("aurora-card-footer")], AuroraCardFooter);
775
1050
  //#endregion
776
1051
  //#region src/components/cards/aurora-base-card.ts
777
1052
  var AuroraBaseCard = class AuroraBaseCard extends LitElement {
@@ -797,6 +1072,17 @@ var AuroraBaseCard = class AuroraBaseCard extends LitElement {
797
1072
  this.isPlainRole = false;
798
1073
  this.isDeleting = false;
799
1074
  this.isDisabled = false;
1075
+ this.revisions = [];
1076
+ this.displayedRevision = "";
1077
+ this.isDeployed = false;
1078
+ this.deployedLabel = "Deployed";
1079
+ this.filterRoles = [];
1080
+ this.filterDisplayText = "";
1081
+ this.allLabel = "All Roles & Instances";
1082
+ this.borderColor = "";
1083
+ this.statusCode = "";
1084
+ this.statusMessage = "";
1085
+ this.serviceDetailLabel = "Service detail";
800
1086
  this.showActionBanner = false;
801
1087
  this.showWarningBanner = false;
802
1088
  this.manageLabel = "Manage";
@@ -819,19 +1105,31 @@ var AuroraBaseCard = class AuroraBaseCard extends LitElement {
819
1105
  static {
820
1106
  this.styles = [unsafeCSS(tailwind_default), css`
821
1107
  :host { display: block; width: 450px; max-width: 100%; }
1108
+ :host([card-type='runtime']) { width: 380px; height: 417px; }
822
1109
  sl-badge::part(base) { background-color: var(--axebow-secondary); color: white; }
823
- sl-dialog::part(panel) { width: 35vw; }
1110
+ sl-dialog::part(panel) { width: 35vw; min-width: 400px; }
824
1111
  sl-dialog::part(body) { padding-top: 0; }
825
1112
  sl-alert::part(base) { border-top: 2px solid var(--axebow-error); }
826
1113
  sl-range, sl-range:hover {
827
1114
  --sl-color-primary-600: var(--axebow-tertiary);
828
1115
  --sl-color-primary-500: var(--axebow-tertiary);
829
1116
  }
1117
+ .deploy-time {
1118
+ display: -webkit-box;
1119
+ -webkit-line-clamp: 2;
1120
+ -webkit-box-orient: vertical;
1121
+ overflow: hidden;
1122
+ }
830
1123
  `];
831
1124
  }
832
1125
  render() {
1126
+ const isRuntime = this.cardType === "runtime";
833
1127
  return html`
834
- <div class="w-full bg-[var(--axebow-white)] rounded-lg px-2 pt-2 pb-4 flex flex-col justify-between gap-2 h-full transition-shadow duration-200 ease-in-out hover:shadow-[0_4px_12px_0_rgba(13,24,33,0.08)]">
1128
+ <div
1129
+ class="w-full h-full bg-[var(--axebow-white)] rounded-lg px-2 pt-2 pb-4 flex flex-col justify-between gap-2 box-border ${isRuntime ? "border-t-4" : ""} transition-shadow duration-200 ease-in-out hover:shadow-[0_4px_12px_0_rgba(13,24,33,0.08)] ${this.isDeleting ? "pointer-events-none cursor-not-allowed grayscale" : ""}"
1130
+ style=${isRuntime ? `border-top-color:${this.borderColor};` : ""}
1131
+ ?inert=${this.isDeleting}
1132
+ >
835
1133
  <div class="flex flex-col gap-2">
836
1134
  <aurora-card-header
837
1135
  .cardType=${this.cardType}
@@ -840,51 +1138,85 @@ var AuroraBaseCard = class AuroraBaseCard extends LitElement {
840
1138
  .name=${this.name}
841
1139
  .badge=${this.badge}
842
1140
  .subtitle=${this.subtitle}
1141
+ .revisions=${this.revisions}
1142
+ .displayedRevision=${this.displayedRevision}
843
1143
  .freeIaasLabel=${this.freeIaasLabel}
844
1144
  .freeIaasTitle=${this.freeIaasTitle}
845
1145
  .freeIaasDesc=${this.freeIaasDesc}
846
1146
  .haLabel=${this.haLabel}
847
1147
  .haTitle=${this.haTitle}
1148
+ @revision-change=${(e) => this.dispatchEvent(new CustomEvent("revision-change", {
1149
+ detail: e.detail,
1150
+ bubbles: true,
1151
+ composed: true
1152
+ }))}
848
1153
  >
849
1154
  <slot slot="subtitle-tooltip" name="subtitle-tooltip"></slot>
850
1155
  </aurora-card-header>
851
1156
 
852
1157
  <div class="w-full px-2 flex flex-col gap-2">
853
- <aurora-card-stats-row
854
- .stats=${this.mainStats}
855
- .compact=${this.compact}
856
- @stat-label-click=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("stat-label-click", {
1158
+ ${isRuntime ? html`
1159
+ <div class="flex flex-row justify-between items-center min-h-10 max-h-10 overflow-hidden">
1160
+ <span class="deploy-time text-[var(--axebow-secondary)]"><slot name="time-elapsed"></slot></span>
1161
+ ${this.isDeployed ? html`<span class="text-[var(--axebow-secondary)] border-2 border-[var(--axebow-secondary)] rounded-lg py-0.5 px-1.5 whitespace-nowrap text-xs">${this.deployedLabel}</span>` : ""}
1162
+ </div>
1163
+ ` : html`
1164
+ <aurora-card-stats-row
1165
+ .stats=${this.mainStats}
1166
+ .compact=${this.compact}
1167
+ @stat-label-click=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("stat-label-click", {
857
1168
  detail: e.detail,
858
1169
  bubbles: true,
859
1170
  composed: true
860
1171
  }))}
861
- ></aurora-card-stats-row>
1172
+ ></aurora-card-stats-row>
1173
+ `}
862
1174
 
863
1175
  <div class="w-full h-full border border-[var(--axebow-light-gray)] rounded-md">
864
- <aurora-card-filter
865
- .items=${this.filterItems}
866
- .selected=${this.selected}
867
- .emptyLabel=${this.emptyLabel}
868
- .emptyActionLabel=${this.emptyActionLabel}
869
- .attentionLabel=${this.attentionLabel}
870
- .showAttention=${this.showAttention}
871
- .opened=${this.filterOpened}
872
- .isPlainRole=${this.isPlainRole}
873
- .isDisabled=${this.isDeleting || this.isDisabled}
874
- @filter-select=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("filter-select", {
1176
+ ${isRuntime ? html`
1177
+ <aurora-card-table-header
1178
+ .opened=${this.filterOpened}
1179
+ .filterDisplayText=${this.filterDisplayText}
1180
+ .allLabel=${this.allLabel}
1181
+ .attentionLabel=${this.attentionLabel}
1182
+ .showAttention=${this.showAttention}
1183
+ .filterRoles=${this.filterRoles}
1184
+ @toggle-open=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("toggle-filter", {
1185
+ bubbles: true,
1186
+ composed: true
1187
+ }))}
1188
+ @filter-change=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("filter-change", {
875
1189
  detail: e.detail,
876
1190
  bubbles: true,
877
1191
  composed: true
878
1192
  }))}
879
- @toggle-open=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("toggle-filter", {
1193
+ ></aurora-card-table-header>
1194
+ ` : html`
1195
+ <aurora-card-filter
1196
+ .items=${this.filterItems}
1197
+ .selected=${this.selected}
1198
+ .emptyLabel=${this.emptyLabel}
1199
+ .emptyActionLabel=${this.emptyActionLabel}
1200
+ .attentionLabel=${this.attentionLabel}
1201
+ .showAttention=${this.showAttention}
1202
+ .opened=${this.filterOpened}
1203
+ .isPlainRole=${this.isPlainRole}
1204
+ .isDisabled=${this.isDeleting || this.isDisabled}
1205
+ @filter-select=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("filter-select", {
1206
+ detail: e.detail,
880
1207
  bubbles: true,
881
1208
  composed: true
882
1209
  }))}
883
- @empty-action-click=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("empty-action-click", {
1210
+ @toggle-open=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("toggle-filter", {
884
1211
  bubbles: true,
885
1212
  composed: true
886
1213
  }))}
887
- ></aurora-card-filter>
1214
+ @empty-action-click=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("empty-action-click", {
1215
+ bubbles: true,
1216
+ composed: true
1217
+ }))}
1218
+ ></aurora-card-filter>
1219
+ `}
888
1220
 
889
1221
  <aurora-card-resource-table
890
1222
  .rows=${this.tableStats}
@@ -914,29 +1246,42 @@ var AuroraBaseCard = class AuroraBaseCard extends LitElement {
914
1246
  </div>
915
1247
  </div>
916
1248
 
917
- <aurora-card-status-bar
1249
+ <aurora-card-footer
918
1250
  class="mb-1 pl-2"
919
1251
  .isFreeIaaS=${this.isFreeIaaS}
920
1252
  .isPlainRole=${this.isPlainRole}
1253
+ .statusCode=${isRuntime ? this.statusCode : ""}
1254
+ .statusMessage=${isRuntime ? this.statusMessage : ""}
1255
+ .borderColor=${this.borderColor}
1256
+ .showSpinner=${isRuntime && this.borderColor === "var(--axebow-gray)"}
921
1257
  .moreActionsOpen=${this.moreActionsOpen}
922
- .moreActionsOptions=${this.moreActionsOptions}
1258
+ .moreActionsOptions=${isRuntime ? [] : this.moreActionsOptions}
923
1259
  .closeLabel=${this.closeLabel}
924
1260
  .moreActionsLabel=${this.moreActionsLabel}
1261
+ .actionLabel=${isRuntime ? this.serviceDetailLabel : ""}
925
1262
  @more-actions-toggled=${(e) => this.dispatchEvent(new CustomEvent("more-actions-toggled", {
926
1263
  detail: e.detail,
927
1264
  bubbles: true,
928
1265
  composed: true
929
1266
  }))}
1267
+ @footer-action-click=${() => this.dispatchEvent(new CustomEvent("service-detail-click", {
1268
+ bubbles: true,
1269
+ composed: true
1270
+ }))}
930
1271
  >
931
1272
  <slot name="status-footer"></slot>
932
- </aurora-card-status-bar>
1273
+ </aurora-card-footer>
933
1274
 
934
1275
  <slot name="dialogs"></slot>
935
1276
  </div>
936
1277
  `;
937
1278
  }
938
1279
  };
939
- __decorate([property({ type: String })], AuroraBaseCard.prototype, "cardType", void 0);
1280
+ __decorate([property({
1281
+ type: String,
1282
+ reflect: true,
1283
+ attribute: "card-type"
1284
+ })], AuroraBaseCard.prototype, "cardType", void 0);
940
1285
  __decorate([property({ type: String })], AuroraBaseCard.prototype, "name", void 0);
941
1286
  __decorate([property({ type: String })], AuroraBaseCard.prototype, "logoSrc", void 0);
942
1287
  __decorate([property({ type: String })], AuroraBaseCard.prototype, "tenantOrAccount", void 0);
@@ -956,6 +1301,17 @@ __decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "showAttenti
956
1301
  __decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isPlainRole", void 0);
957
1302
  __decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isDeleting", void 0);
958
1303
  __decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isDisabled", void 0);
1304
+ __decorate([property({ type: Array })], AuroraBaseCard.prototype, "revisions", void 0);
1305
+ __decorate([property({ type: String })], AuroraBaseCard.prototype, "displayedRevision", void 0);
1306
+ __decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isDeployed", void 0);
1307
+ __decorate([property({ type: String })], AuroraBaseCard.prototype, "deployedLabel", void 0);
1308
+ __decorate([property({ type: Array })], AuroraBaseCard.prototype, "filterRoles", void 0);
1309
+ __decorate([property({ type: String })], AuroraBaseCard.prototype, "filterDisplayText", void 0);
1310
+ __decorate([property({ type: String })], AuroraBaseCard.prototype, "allLabel", void 0);
1311
+ __decorate([property({ type: String })], AuroraBaseCard.prototype, "borderColor", void 0);
1312
+ __decorate([property({ type: String })], AuroraBaseCard.prototype, "statusCode", void 0);
1313
+ __decorate([property({ type: String })], AuroraBaseCard.prototype, "statusMessage", void 0);
1314
+ __decorate([property({ type: String })], AuroraBaseCard.prototype, "serviceDetailLabel", void 0);
959
1315
  __decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "showActionBanner", void 0);
960
1316
  __decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "showWarningBanner", void 0);
961
1317
  __decorate([property({ type: String })], AuroraBaseCard.prototype, "manageLabel", void 0);
@@ -976,248 +1332,6 @@ __decorate([property({ type: String })], AuroraBaseCard.prototype, "haLabel", vo
976
1332
  __decorate([property({ type: String })], AuroraBaseCard.prototype, "haTitle", void 0);
977
1333
  AuroraBaseCard = __decorate([customElement("aurora-base-card")], AuroraBaseCard);
978
1334
  //#endregion
979
- //#region src/components/cards/aurora-runtime-card.ts
980
- var AuroraRuntimeCard = class AuroraRuntimeCard extends LitElement {
981
- constructor(..._args) {
982
- super(..._args);
983
- this.name = "";
984
- this.logo = "";
985
- this.revisions = [];
986
- this.displayedRevision = "";
987
- this.lastDeployed = "";
988
- this.isDeployed = false;
989
- this.tableStats = [];
990
- this.attentionThreshold = 90;
991
- this.filterOpened = false;
992
- this.filterDisplayText = "";
993
- this.filterRoles = [];
994
- this.showAttention = false;
995
- this.borderColor = "";
996
- this.statusCode = "";
997
- this.statusMessage = "";
998
- this.isRemoving = false;
999
- this.deployedLabel = "Deployed";
1000
- this.allLabel = "All Roles & Instances";
1001
- this.attentionLabel = "Attention needed";
1002
- this.serviceDetailLabel = "Service detail";
1003
- this.manageLabel = "Manage";
1004
- this.askOwnerLabel = "Ask your owner";
1005
- this.invalidCredsLabel = "Invalid credentials.";
1006
- this.limitReachedLabel = "Limit reached.";
1007
- this.andLabel = "and";
1008
- }
1009
- static {
1010
- this.styles = [unsafeCSS(tailwind_default), css`
1011
- :host { display: block; width: 380px; height: 417px; max-width: 100%; }
1012
-
1013
- .revision-wrap sl-select {
1014
- --sl-input-background-color: transparent;
1015
- --sl-input-border-color: transparent;
1016
- border: none;
1017
- background: transparent;
1018
- padding: 0;
1019
- margin: 0;
1020
- min-width: 0;
1021
- width: 100% !important;
1022
- }
1023
- .revision-wrap sl-select::part(base) {
1024
- border: none;
1025
- background-color: transparent;
1026
- padding: 0;
1027
- min-width: 0;
1028
- display: inline-block;
1029
- }
1030
- sl-select::part(display-input) { padding: 0 8px; }
1031
- sl-select::part(combobox) { padding: 0; }
1032
- sl-select sl-option[checked] .revision-ts,
1033
- sl-select sl-option[current] .revision-ts,
1034
- sl-select sl-option[aria-selected="true"] .revision-ts { color: white !important; }
1035
- sl-tooltip::part(base) { max-width: none; white-space: normal; word-break: break-word; }
1036
- sl-dialog::part(panel) { width: 35vw; min-width: 400px; }
1037
- sl-dialog::part(body) { padding-top: 0; }
1038
- .deploy-time {
1039
- display: -webkit-box;
1040
- -webkit-line-clamp: 2;
1041
- -webkit-box-orient: vertical;
1042
- overflow: hidden;
1043
- }
1044
- `];
1045
- }
1046
- render() {
1047
- return html`
1048
- <div
1049
- class="w-full h-full bg-[var(--axebow-white)] rounded-lg px-2 pt-2 pb-4 flex flex-col justify-between gap-2 box-border border-t-4 transition-shadow duration-200 ease-in-out hover:shadow-[0_4px_12px_0_rgba(13,24,33,0.08)] ${this.isRemoving ? "pointer-events-none cursor-not-allowed grayscale" : ""}"
1050
- style="border-top-color:${this.borderColor};"
1051
- ?inert=${this.isRemoving}
1052
- >
1053
- <div class="flex flex-col gap-2">
1054
- ${this._renderHeader()}
1055
- <div class="w-full px-2 flex flex-col gap-2">
1056
- ${this._renderDeployInfo()}
1057
- ${this._renderTable()}
1058
- </div>
1059
- </div>
1060
- ${this._renderFooter()}
1061
- <slot name="dialogs"></slot>
1062
- </div>
1063
- `;
1064
- }
1065
- _renderHeader() {
1066
- return html`
1067
- <div class="w-full bg-[var(--axebow-anti-flash-white)] rounded-md py-2 px-3 h-16 flex items-center gap-3">
1068
- ${this.logo ? html`<div class="h-10 w-10 flex items-center justify-center shrink-0"><img src=${this.logo} class="max-h-full max-w-full object-contain" /></div>` : ""}
1069
- <div class="flex flex-col flex-1 min-w-0 justify-center">
1070
- <div class="flex justify-between items-center">
1071
- <span class="font-bold text-xl text-[var(--axebow-primary)] leading-snug">${this.name}</span>
1072
- </div>
1073
- <div class="revision-wrap italic text-[var(--axebow-primary)] flex items-center">
1074
- <sl-select style="width:100%;" value=${this.displayedRevision} @sl-change=${this._onRevisionChange}>
1075
- ${this.revisions.map((rev) => html`<sl-option value=${rev.id}>${this._formatRevision(rev.id)}</sl-option>`)}
1076
- </sl-select>
1077
- </div>
1078
- </div>
1079
- </div>
1080
- `;
1081
- }
1082
- _renderDeployInfo() {
1083
- return html`
1084
- <div class="flex flex-row justify-between items-center min-h-10 max-h-10 overflow-hidden">
1085
- <span class="deploy-time text-[var(--axebow-secondary)]"><slot name="time-elapsed"></slot></span>
1086
- ${this.isDeployed ? html`<span class="text-[var(--axebow-secondary)] border-2 border-[var(--axebow-secondary)] rounded-lg py-0.5 px-1.5 whitespace-nowrap text-xs">${this.deployedLabel}</span>` : ""}
1087
- </div>
1088
- `;
1089
- }
1090
- _renderTable() {
1091
- return html`
1092
- <div class="w-full border border-[var(--axebow-light-gray)] rounded-md">
1093
- <div class="relative">
1094
- <div class="flex justify-between items-center border-b border-[var(--axebow-light-gray)] w-full px-2 cursor-pointer h-7" @click=${this._onToggleFilter}>
1095
- <span class="text-[var(--axebow-tertiary)]">${this.filterDisplayText || this.allLabel}</span>
1096
- <div class="flex items-center gap-2">
1097
- ${this.showAttention ? html`<p class="text-[var(--axebow-error)] m-0 text-xs">${this.attentionLabel}</p>` : ""}
1098
- <axebow-icon iconName="chevron_right" rotate="90" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
1099
- </div>
1100
- </div>
1101
-
1102
- <div class="${this.filterOpened ? "" : "hidden"} absolute top-full left-0 right-0 z-10 flex flex-col bg-white rounded-b-lg border border-[var(--axebow-light-gray)] shadow-[2px_2px_25px_0px_rgba(0,0,0,0.1)] max-h-40 overflow-y-auto">
1103
- <p class="w-full p-2 cursor-pointer m-0 hover:bg-[var(--axebow-light-gray)]" @click=${() => this._onFilterChange("", "all")}>${this.allLabel}</p>
1104
- ${this.filterRoles.map((role) => html`
1105
- <div
1106
- class="w-full py-1 px-2 flex justify-between items-center border-t border-[var(--axebow-light-gray)] cursor-pointer hover:bg-[var(--axebow-light-gray)]"
1107
- @click=${() => this._onFilterChange(role.name, "role")}
1108
- >
1109
- <div class="flex items-center gap-2">
1110
- ${role.logo ? html`<img src=${role.logo} class="w-5 h-5" />` : ""}
1111
- <p class="m-0">${role.name}</p>
1112
- </div>
1113
- </div>
1114
- ${role.instances.map((inst) => html`
1115
- <div
1116
- class="w-full py-1 px-2 pl-6 flex justify-between items-center border-t border-[var(--axebow-light-gray)] cursor-pointer hover:bg-[var(--axebow-light-gray)]"
1117
- @click=${() => this._onFilterChange(inst.name, "instance")}
1118
- >
1119
- <div class="flex items-center gap-2">
1120
- <axebow-icon iconName="subdirectory_arrow_right" size="small"></axebow-icon>
1121
- <p class="m-0">${inst.name}</p>
1122
- </div>
1123
- ${inst.needsAttention ? html`<axebow-icon iconName="warning" iconColor="var(--axebow-error)" size="small"></axebow-icon>` : ""}
1124
- </div>
1125
- `)}
1126
- `)}
1127
- </div>
1128
- </div>
1129
-
1130
- <aurora-card-resource-table
1131
- .rows=${this.tableStats}
1132
- .attentionThreshold=${this.attentionThreshold}
1133
- .manageLabel=${this.manageLabel}
1134
- .askOwnerLabel=${this.askOwnerLabel}
1135
- .invalidCredsLabel=${this.invalidCredsLabel}
1136
- .limitReachedLabel=${this.limitReachedLabel}
1137
- .andLabel=${this.andLabel}
1138
- ></aurora-card-resource-table>
1139
- </div>
1140
- `;
1141
- }
1142
- _renderFooter() {
1143
- return html`
1144
- <div class="flex justify-between items-center px-2 gap-4 h-10 overflow-hidden mb-1">
1145
- <div class="flex items-center gap-1 min-w-0 flex-1">
1146
- ${this.borderColor === "var(--axebow-gray)" ? html`<sl-spinner style="--indicator-color:${this.borderColor};"></sl-spinner>` : ""}
1147
- <p class="font-bold text-xs m-0 line-clamp-1" style="color:${this.borderColor};" title=${this.statusCode}>${this.statusCode}</p>
1148
- ${this.statusCode ? html`
1149
- <sl-tooltip content=${this.statusMessage}>
1150
- <axebow-icon class="cursor-pointer shrink-0" iconColor=${this.borderColor} iconName="info" size="small"></axebow-icon>
1151
- </sl-tooltip>
1152
- ` : ""}
1153
- </div>
1154
- <axebow-button variant="text" size="medium" @click=${this._onServiceDetail}>${this.serviceDetailLabel}</axebow-button>
1155
- </div>
1156
- `;
1157
- }
1158
- _formatRevision(id) {
1159
- if (!id) return "";
1160
- const parts = id.split("/");
1161
- return parts[parts.length - 1] ?? id;
1162
- }
1163
- _onRevisionChange(e) {
1164
- const revision = e.target.value;
1165
- this.dispatchEvent(new CustomEvent("revision-change", {
1166
- detail: { revision },
1167
- bubbles: true,
1168
- composed: true
1169
- }));
1170
- }
1171
- _onToggleFilter() {
1172
- this.dispatchEvent(new CustomEvent("toggle-filter", {
1173
- bubbles: true,
1174
- composed: true
1175
- }));
1176
- }
1177
- _onFilterChange(selected, type) {
1178
- this.dispatchEvent(new CustomEvent("filter-change", {
1179
- detail: {
1180
- selected,
1181
- type
1182
- },
1183
- bubbles: true,
1184
- composed: true
1185
- }));
1186
- }
1187
- _onServiceDetail() {
1188
- this.dispatchEvent(new CustomEvent("service-detail-click", {
1189
- bubbles: true,
1190
- composed: true
1191
- }));
1192
- }
1193
- };
1194
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "name", void 0);
1195
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "logo", void 0);
1196
- __decorate([property({ type: Array })], AuroraRuntimeCard.prototype, "revisions", void 0);
1197
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "displayedRevision", void 0);
1198
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "lastDeployed", void 0);
1199
- __decorate([property({ type: Boolean })], AuroraRuntimeCard.prototype, "isDeployed", void 0);
1200
- __decorate([property({ type: Array })], AuroraRuntimeCard.prototype, "tableStats", void 0);
1201
- __decorate([property({ type: Number })], AuroraRuntimeCard.prototype, "attentionThreshold", void 0);
1202
- __decorate([property({ type: Boolean })], AuroraRuntimeCard.prototype, "filterOpened", void 0);
1203
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "filterDisplayText", void 0);
1204
- __decorate([property({ type: Array })], AuroraRuntimeCard.prototype, "filterRoles", void 0);
1205
- __decorate([property({ type: Boolean })], AuroraRuntimeCard.prototype, "showAttention", void 0);
1206
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "borderColor", void 0);
1207
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "statusCode", void 0);
1208
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "statusMessage", void 0);
1209
- __decorate([property({ type: Boolean })], AuroraRuntimeCard.prototype, "isRemoving", void 0);
1210
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "deployedLabel", void 0);
1211
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "allLabel", void 0);
1212
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "attentionLabel", void 0);
1213
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "serviceDetailLabel", void 0);
1214
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "manageLabel", void 0);
1215
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "askOwnerLabel", void 0);
1216
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "invalidCredsLabel", void 0);
1217
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "limitReachedLabel", void 0);
1218
- __decorate([property({ type: String })], AuroraRuntimeCard.prototype, "andLabel", void 0);
1219
- AuroraRuntimeCard = __decorate([customElement("aurora-runtime-card")], AuroraRuntimeCard);
1220
- //#endregion
1221
- export { AuroraBaseCard, AuroraButton, AuroraCardActionBanner, AuroraCardAttentionBanner, AuroraCardFilter, AuroraCardFilterItem, AuroraCardHeader, AuroraCardResourceTable, AuroraCardStatItem, AuroraCardStatsRow, AuroraCardStatusBar, AuroraMoreActions, AuroraRuntimeCard, STATUS_COLORS, auroraTheme };
1335
+ export { AuroraBaseCard, AuroraButton, AuroraCardActionBanner, AuroraCardAttentionBanner, AuroraCardCloudLogo, AuroraCardFilter, AuroraCardFilterItem, AuroraCardFooter, AuroraCardHeader, AuroraCardResourceRow, AuroraCardResourceTable, AuroraCardSpecialLink, AuroraCardStatItem, AuroraCardStatsRow, AuroraCardStatus, AuroraCardTableHeader, AuroraCardVersionSelector, AuroraMoreActions, STATUS_COLORS, auroraTheme };
1222
1336
 
1223
1337
  //# sourceMappingURL=index.js.map