@kumori/aurora-wui-components 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/{cards → aurora-more-actions}/aurora-more-actions.d.ts +1 -1
- package/dist/components/aurora-more-actions/aurora-more-actions.d.ts.map +1 -0
- package/dist/components/cards/aurora-base-card.d.ts +13 -2
- package/dist/components/cards/aurora-base-card.d.ts.map +1 -1
- package/dist/components/cards/{card.types.d.ts → card.models.d.ts} +5 -1
- package/dist/components/cards/card.models.d.ts.map +1 -0
- package/dist/components/cards/parts/aurora-card-attention-banner.d.ts +2 -2
- package/dist/components/cards/parts/aurora-card-attention-banner.d.ts.map +1 -1
- package/dist/components/cards/parts/aurora-card-cloud-logo.d.ts +8 -0
- package/dist/components/cards/parts/aurora-card-cloud-logo.d.ts.map +1 -0
- package/dist/components/cards/parts/aurora-card-filter.d.ts +1 -1
- package/dist/components/cards/parts/aurora-card-filter.d.ts.map +1 -1
- package/dist/components/cards/parts/{aurora-card-status-bar.d.ts → aurora-card-footer.d.ts} +9 -3
- package/dist/components/cards/parts/aurora-card-footer.d.ts.map +1 -0
- package/dist/components/cards/parts/aurora-card-header.d.ts +6 -2
- package/dist/components/cards/parts/aurora-card-header.d.ts.map +1 -1
- package/dist/components/cards/parts/aurora-card-resource-row.d.ts +10 -0
- package/dist/components/cards/parts/aurora-card-resource-row.d.ts.map +1 -0
- package/dist/components/cards/parts/aurora-card-resource-table.d.ts +2 -2
- package/dist/components/cards/parts/aurora-card-resource-table.d.ts.map +1 -1
- package/dist/components/cards/parts/aurora-card-special-link.d.ts +10 -0
- package/dist/components/cards/parts/aurora-card-special-link.d.ts.map +1 -0
- package/dist/components/cards/parts/aurora-card-stats-row.d.ts +1 -1
- package/dist/components/cards/parts/aurora-card-stats-row.d.ts.map +1 -1
- package/dist/components/cards/parts/aurora-card-status.d.ts +10 -0
- package/dist/components/cards/parts/aurora-card-status.d.ts.map +1 -0
- package/dist/components/cards/parts/aurora-card-table-header.d.ts +15 -0
- package/dist/components/cards/parts/aurora-card-table-header.d.ts.map +1 -0
- package/dist/components/cards/parts/aurora-card-version-selector.d.ts +11 -0
- package/dist/components/cards/parts/aurora-card-version-selector.d.ts.map +1 -0
- package/dist/index.d.ts +9 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +501 -421
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/aurora-button.d.ts +0 -12
- package/dist/components/aurora-button.d.ts.map +0 -1
- package/dist/components/cards/aurora-more-actions.d.ts.map +0 -1
- package/dist/components/cards/aurora-runtime-card.d.ts +0 -43
- package/dist/components/cards/aurora-runtime-card.d.ts.map +0 -1
- package/dist/components/cards/card.types.d.ts.map +0 -1
- package/dist/components/cards/parts/aurora-card-status-bar.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,55 +1,5 @@
|
|
|
1
1
|
import { LitElement, css, html, unsafeCSS } from "lit";
|
|
2
2
|
import { customElement, property, state } from "lit/decorators.js";
|
|
3
|
-
//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
|
|
4
|
-
function __decorate(decorators, target, key, desc) {
|
|
5
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
6
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
7
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
8
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
9
|
-
}
|
|
10
|
-
//#endregion
|
|
11
|
-
//#region src/components/aurora-button.ts
|
|
12
|
-
var AuroraButton = class AuroraButton extends LitElement {
|
|
13
|
-
constructor(..._args) {
|
|
14
|
-
super(..._args);
|
|
15
|
-
this.disabled = false;
|
|
16
|
-
}
|
|
17
|
-
static {
|
|
18
|
-
this.styles = css`
|
|
19
|
-
:host {
|
|
20
|
-
display: inline-block;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
button {
|
|
24
|
-
font: inherit;
|
|
25
|
-
cursor: pointer;
|
|
26
|
-
border-radius: 6px;
|
|
27
|
-
border: 1px solid transparent;
|
|
28
|
-
padding: 0.5em 1.2em;
|
|
29
|
-
background-color: var(--aurora-button-bg, #1a1a1a);
|
|
30
|
-
color: var(--aurora-button-color, #ffffff);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
button:disabled {
|
|
34
|
-
cursor: not-allowed;
|
|
35
|
-
opacity: 0.5;
|
|
36
|
-
}
|
|
37
|
-
`;
|
|
38
|
-
}
|
|
39
|
-
render() {
|
|
40
|
-
return html`
|
|
41
|
-
<button ?disabled=${this.disabled}>
|
|
42
|
-
<slot></slot>
|
|
43
|
-
</button>
|
|
44
|
-
`;
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
__decorate([property({
|
|
48
|
-
type: Boolean,
|
|
49
|
-
reflect: true
|
|
50
|
-
})], AuroraButton.prototype, "disabled", void 0);
|
|
51
|
-
AuroraButton = __decorate([customElement("aurora-button")], AuroraButton);
|
|
52
|
-
//#endregion
|
|
53
3
|
//#region src/styles/aurora-theme.ts
|
|
54
4
|
var auroraTheme = css`
|
|
55
5
|
.theme {
|
|
@@ -94,9 +44,17 @@ var STATUS_COLORS = {
|
|
|
94
44
|
};
|
|
95
45
|
//#endregion
|
|
96
46
|
//#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";
|
|
47
|
+
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-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\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-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-full {\n height: 100%;\n }\n\n .max-h-10 {\n max-height: calc(var(--spacing) * 10);\n }\n\n .max-h-40 {\n max-height: calc(var(--spacing) * 40);\n }\n\n .max-h-full {\n max-height: 100%;\n }\n\n .min-h-10 {\n min-height: calc(var(--spacing) * 10);\n }\n\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n\n .w-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-\\(--axebow-gray\\) {\n border-color: var(--axebow-gray);\n }\n\n .border-\\(--axebow-light-gray\\) {\n border-color: var(--axebow-light-gray);\n }\n\n .border-\\(--axebow-secondary\\) {\n border-color: var(--axebow-secondary);\n }\n\n .border-\\[var\\(--axebow-light-gray\\)\\] {\n border-color: var(--axebow-light-gray);\n }\n\n .border-transparent {\n border-color: #0000;\n }\n\n .bg-\\(--axebow-anti-flash-white\\) {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .bg-\\(--axebow-error\\) {\n background-color: var(--axebow-error);\n }\n\n .bg-\\(--axebow-gray\\) {\n background-color: var(--axebow-gray);\n }\n\n .bg-\\(--axebow-light-gray\\) {\n background-color: var(--axebow-light-gray);\n }\n\n .bg-\\(--axebow-white\\) {\n background-color: var(--axebow-white);\n }\n\n .bg-transparent {\n background-color: #0000;\n }\n\n .bg-white {\n background-color: var(--color-white);\n }\n\n .object-contain {\n object-fit: contain;\n }\n\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n\n .px-1 {\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-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n\n .leading-snug {\n --tw-leading: var(--leading-snug);\n line-height: var(--leading-snug);\n }\n\n .font-bold {\n --tw-font-weight: var(--font-weight-bold);\n font-weight: var(--font-weight-bold);\n }\n\n .font-normal {\n --tw-font-weight: var(--font-weight-normal);\n font-weight: var(--font-weight-normal);\n }\n\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n\n .text-ellipsis {\n text-overflow: ellipsis;\n }\n\n .whitespace-nowrap {\n white-space: nowrap;\n }\n\n .text-\\(--axebow-error\\) {\n color: var(--axebow-error);\n }\n\n .text-\\(--axebow-gray\\) {\n color: var(--axebow-gray);\n }\n\n .text-\\(--axebow-primary\\) {\n color: var(--axebow-primary);\n }\n\n .text-\\(--axebow-rich-black\\) {\n color: var(--axebow-rich-black);\n }\n\n .text-\\(--axebow-secondary\\) {\n color: var(--axebow-secondary);\n }\n\n .text-\\(--axebow-tertiary\\) {\n color: var(--axebow-tertiary);\n }\n\n .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-\\(--axebow-light-gray\\):hover {\n background-color: var(--axebow-light-gray);\n }\n\n .hover\\:bg-\\[var\\(--axebow-anti-flash-white\\)\\]:hover {\n background-color: var(--axebow-anti-flash-white);\n }\n\n .hover\\:bg-gray-100:hover {\n background-color: var(--color-gray-100);\n }\n\n .hover\\:text-\\[var\\(--axebow-gray\\)\\]:hover {\n color: var(--axebow-gray);\n }\n\n .hover\\:shadow-\\[0_4px_12px_0_rgba\\(13\\,24\\,33\\,0\\.08\\)\\]:hover {\n --tw-shadow: 0 4px 12px 0 var(--tw-shadow-color, #0d182114);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n\n .disabled\\:pointer-events-none:disabled {\n pointer-events: none;\n }\n\n .disabled\\:cursor-not-allowed:disabled {\n cursor: not-allowed;\n }\n\n .disabled\\:opacity-50:disabled {\n opacity: .5;\n }\n}\n\n@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
48
|
//#endregion
|
|
99
|
-
//#region
|
|
49
|
+
//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
|
|
50
|
+
function __decorate(decorators, target, key, desc) {
|
|
51
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
52
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
53
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
54
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
55
|
+
}
|
|
56
|
+
//#endregion
|
|
57
|
+
//#region src/components/aurora-more-actions/aurora-more-actions.ts
|
|
100
58
|
var AuroraMoreActions = class AuroraMoreActions extends LitElement {
|
|
101
59
|
constructor(..._args) {
|
|
102
60
|
super(..._args);
|
|
@@ -165,7 +123,7 @@ var AuroraMoreActions = class AuroraMoreActions extends LitElement {
|
|
|
165
123
|
return html`
|
|
166
124
|
<div class="relative w-full h-full flex justify-end">
|
|
167
125
|
<button
|
|
168
|
-
class="trigger relative font-semibold text-xs text-
|
|
126
|
+
class="trigger relative font-semibold text-xs text-(--axebow-tertiary) cursor-pointer py-1 px-2 h-full bg-transparent border-none transition-all duration-200 flex items-center hover:text-[var(--axebow-gray)] hover:bg-[var(--axebow-anti-flash-white)] hover:rounded-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
|
|
169
127
|
?disabled=${this.disabled}
|
|
170
128
|
@click=${this._toggle}
|
|
171
129
|
>
|
|
@@ -173,7 +131,7 @@ var AuroraMoreActions = class AuroraMoreActions extends LitElement {
|
|
|
173
131
|
</button>
|
|
174
132
|
${this.open ? html`
|
|
175
133
|
<div
|
|
176
|
-
class="absolute right-0 z-10 bg-white border border-
|
|
134
|
+
class="absolute right-0 z-10 bg-white border border-(--axebow-gray) rounded-lg shadow-[2px_2px_25px_0px_rgba(0,0,0,0.1)] p-2 min-w-44 flex flex-col ${placementClass}"
|
|
177
135
|
style=${dropdownStyle}
|
|
178
136
|
@click=${this._handleSlotClick}
|
|
179
137
|
>
|
|
@@ -211,6 +169,81 @@ __decorate([property({ type: String })], AuroraMoreActions.prototype, "moreActio
|
|
|
211
169
|
__decorate([state()], AuroraMoreActions.prototype, "_fixedPos", void 0);
|
|
212
170
|
AuroraMoreActions = __decorate([customElement("aurora-more-actions")], AuroraMoreActions);
|
|
213
171
|
//#endregion
|
|
172
|
+
//#region src/components/cards/parts/aurora-card-cloud-logo.ts
|
|
173
|
+
var AuroraCardCloudLogo = class AuroraCardCloudLogo extends LitElement {
|
|
174
|
+
constructor(..._args) {
|
|
175
|
+
super(..._args);
|
|
176
|
+
this.src = null;
|
|
177
|
+
this.size = "large";
|
|
178
|
+
}
|
|
179
|
+
static {
|
|
180
|
+
this.styles = [unsafeCSS(tailwind_default), css`:host { display: contents; }`];
|
|
181
|
+
}
|
|
182
|
+
render() {
|
|
183
|
+
if (!this.src) return html``;
|
|
184
|
+
return this.size === "small" ? html`<div class="flex items-center justify-center shrink-0" style="height:1.125rem;width:1.125rem;"><img src=${this.src} class="max-h-full max-w-full object-contain" /></div>` : html`<div class="flex items-center justify-center shrink-0" style="height:3.125rem;width:3.125rem;"><img src=${this.src} class="max-h-full max-w-full object-contain" /></div>`;
|
|
185
|
+
}
|
|
186
|
+
};
|
|
187
|
+
__decorate([property({ type: String })], AuroraCardCloudLogo.prototype, "src", void 0);
|
|
188
|
+
__decorate([property({ type: String })], AuroraCardCloudLogo.prototype, "size", void 0);
|
|
189
|
+
AuroraCardCloudLogo = __decorate([customElement("aurora-card-cloud-logo")], AuroraCardCloudLogo);
|
|
190
|
+
//#endregion
|
|
191
|
+
//#region src/components/cards/parts/aurora-card-version-selector.ts
|
|
192
|
+
var AuroraCardVersionSelector = class AuroraCardVersionSelector extends LitElement {
|
|
193
|
+
constructor(..._args) {
|
|
194
|
+
super(..._args);
|
|
195
|
+
this.revisions = [];
|
|
196
|
+
this.displayedRevision = "";
|
|
197
|
+
}
|
|
198
|
+
static {
|
|
199
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
200
|
+
:host { display: block; width: 100%; }
|
|
201
|
+
sl-select {
|
|
202
|
+
--sl-input-background-color: transparent;
|
|
203
|
+
--sl-input-border-color: transparent;
|
|
204
|
+
border: none;
|
|
205
|
+
background: transparent;
|
|
206
|
+
padding: 0;
|
|
207
|
+
margin: 0;
|
|
208
|
+
min-width: 0;
|
|
209
|
+
width: 100% !important;
|
|
210
|
+
}
|
|
211
|
+
sl-select::part(base) {
|
|
212
|
+
border: none;
|
|
213
|
+
background-color: transparent;
|
|
214
|
+
padding: 0;
|
|
215
|
+
min-width: 0;
|
|
216
|
+
display: inline-block;
|
|
217
|
+
}
|
|
218
|
+
sl-select::part(display-input) { padding: 0 8px; font-size: 0.75rem; color: var(--axebow-tertiary); }
|
|
219
|
+
sl-select::part(combobox) { padding: 0; }
|
|
220
|
+
`];
|
|
221
|
+
}
|
|
222
|
+
_formatRevision(id) {
|
|
223
|
+
if (!id) return "";
|
|
224
|
+
const parts = id.split("/");
|
|
225
|
+
return parts[parts.length - 1] ?? id;
|
|
226
|
+
}
|
|
227
|
+
render() {
|
|
228
|
+
return html`
|
|
229
|
+
<sl-select style="width:100%;" value=${this.displayedRevision} @sl-change=${this._onChange}>
|
|
230
|
+
${this.revisions.map((rev) => html`<sl-option value=${rev.id}>${this._formatRevision(rev.id)}</sl-option>`)}
|
|
231
|
+
</sl-select>
|
|
232
|
+
`;
|
|
233
|
+
}
|
|
234
|
+
_onChange(e) {
|
|
235
|
+
const revision = e.target.value;
|
|
236
|
+
this.dispatchEvent(new CustomEvent("revision-change", {
|
|
237
|
+
detail: { revision },
|
|
238
|
+
bubbles: true,
|
|
239
|
+
composed: true
|
|
240
|
+
}));
|
|
241
|
+
}
|
|
242
|
+
};
|
|
243
|
+
__decorate([property({ type: Array })], AuroraCardVersionSelector.prototype, "revisions", void 0);
|
|
244
|
+
__decorate([property({ type: String })], AuroraCardVersionSelector.prototype, "displayedRevision", void 0);
|
|
245
|
+
AuroraCardVersionSelector = __decorate([customElement("aurora-card-version-selector")], AuroraCardVersionSelector);
|
|
246
|
+
//#endregion
|
|
214
247
|
//#region src/components/cards/parts/aurora-card-header.ts
|
|
215
248
|
var AuroraCardHeader = class AuroraCardHeader extends LitElement {
|
|
216
249
|
constructor(..._args) {
|
|
@@ -221,6 +254,8 @@ var AuroraCardHeader = class AuroraCardHeader extends LitElement {
|
|
|
221
254
|
this.badge = "none";
|
|
222
255
|
this.subtitle = "";
|
|
223
256
|
this.cardType = "account";
|
|
257
|
+
this.revisions = [];
|
|
258
|
+
this.displayedRevision = "";
|
|
224
259
|
this.freeIaasLabel = "Free IaaS";
|
|
225
260
|
this.freeIaasTitle = "Free Infrastructure";
|
|
226
261
|
this.freeIaasDesc = "This environment uses free infrastructure.";
|
|
@@ -242,7 +277,7 @@ var AuroraCardHeader = class AuroraCardHeader extends LitElement {
|
|
|
242
277
|
</div>
|
|
243
278
|
<div class="flex items-center gap-2 cursor-pointer">
|
|
244
279
|
<axebow-icon iconName="info" iconColor="var(--axebow-gray)" size="small"></axebow-icon>
|
|
245
|
-
<span class="text-
|
|
280
|
+
<span class="text-(--axebow-rich-black)">${this.freeIaasLabel}</span>
|
|
246
281
|
</div>
|
|
247
282
|
</sl-tooltip>
|
|
248
283
|
`;
|
|
@@ -253,40 +288,64 @@ var AuroraCardHeader = class AuroraCardHeader extends LitElement {
|
|
|
253
288
|
`;
|
|
254
289
|
return html``;
|
|
255
290
|
}
|
|
291
|
+
_headerHeight() {
|
|
292
|
+
switch (this.cardType) {
|
|
293
|
+
case "tenant": return "4.5625rem";
|
|
294
|
+
case "environment": return "3.6875rem";
|
|
295
|
+
default: return "4.125rem";
|
|
296
|
+
}
|
|
297
|
+
}
|
|
256
298
|
render() {
|
|
257
|
-
const isAccount = this.cardType === "account";
|
|
258
299
|
const isTenant = this.cardType === "tenant";
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
300
|
+
const isCompact = this.cardType === "environment" || isTenant;
|
|
301
|
+
const isRuntime = this.cardType === "runtime";
|
|
302
|
+
const heightStyle = `height:${this._headerHeight()}`;
|
|
303
|
+
if (isCompact) return html`
|
|
304
|
+
<div class="w-full bg-(--axebow-anti-flash-white) rounded-lg flex flex-col justify-center px-5 py-3 box-border" style=${heightStyle}>
|
|
262
305
|
<div class="flex flex-col flex-1 min-w-0">
|
|
263
|
-
${this.tenantOrAccount
|
|
306
|
+
${this.tenantOrAccount || this.logoSrc ? html`
|
|
307
|
+
<div class="flex gap-2 items-center leading-none mt-1">
|
|
308
|
+
<aurora-card-cloud-logo .src=${this.logoSrc} size="small"></aurora-card-cloud-logo>
|
|
309
|
+
<span class="text-xs font-semibold text-(--axebow-gray) leading-none">${this.tenantOrAccount}</span>
|
|
310
|
+
</div>
|
|
311
|
+
` : ""}
|
|
264
312
|
<div class="flex justify-between items-center">
|
|
265
|
-
<span class="font-bold text-
|
|
313
|
+
<span class="font-bold text-lg text-(--axebow-primary) leading-snug pt-0.5">${this.name}</span>
|
|
266
314
|
${this._renderBadge()}
|
|
267
315
|
</div>
|
|
268
|
-
${this.subtitle ? html`<div class="
|
|
316
|
+
${this.subtitle ? html`<div class="text-xs text-(--axebow-gray) flex items-center gap-1 mt-1">${this.subtitle}<slot name="subtitle-tooltip"></slot></div>` : ""}
|
|
269
317
|
</div>
|
|
270
318
|
</div>
|
|
271
319
|
`;
|
|
272
320
|
return html`
|
|
273
|
-
<div class="w-full bg-
|
|
274
|
-
<
|
|
275
|
-
|
|
276
|
-
|
|
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
|
-
` : ""}
|
|
321
|
+
<div class="w-full bg-(--axebow-anti-flash-white) rounded-lg flex items-center gap-3 py-2 px-3 box-border" style=${heightStyle}>
|
|
322
|
+
<aurora-card-cloud-logo .src=${this.logoSrc} size="large"></aurora-card-cloud-logo>
|
|
323
|
+
<div class="flex flex-col flex-1 min-w-0 ${isRuntime ? "justify-center" : ""}">
|
|
324
|
+
${!isRuntime && this.tenantOrAccount ? html`<span class="text-xs font-semibold text-(--axebow-gray) leading-none">${this.tenantOrAccount}</span>` : ""}
|
|
281
325
|
<div class="flex justify-between items-center">
|
|
282
|
-
<span class="font-bold text-
|
|
326
|
+
<span class="font-bold ${isRuntime ? "text-base" : "text-lg"} text-(--axebow-primary) leading-snug pt-0.5">${this.name}</span>
|
|
283
327
|
${this._renderBadge()}
|
|
284
328
|
</div>
|
|
285
|
-
${
|
|
329
|
+
${isRuntime ? html`
|
|
330
|
+
<div class="revision-wrap flex items-center mt-1">
|
|
331
|
+
<aurora-card-version-selector
|
|
332
|
+
.revisions=${this.revisions}
|
|
333
|
+
.displayedRevision=${this.displayedRevision}
|
|
334
|
+
@revision-change=${this._onRevisionChange}
|
|
335
|
+
></aurora-card-version-selector>
|
|
336
|
+
</div>
|
|
337
|
+
` : this.subtitle ? html`<div class="text-xs text-(--axebow-gray) flex items-center gap-1 mt-1">${this.subtitle}<slot name="subtitle-tooltip"></slot></div>` : ""}
|
|
286
338
|
</div>
|
|
287
339
|
</div>
|
|
288
340
|
`;
|
|
289
341
|
}
|
|
342
|
+
_onRevisionChange(e) {
|
|
343
|
+
this.dispatchEvent(new CustomEvent("revision-change", {
|
|
344
|
+
detail: e.detail,
|
|
345
|
+
bubbles: true,
|
|
346
|
+
composed: true
|
|
347
|
+
}));
|
|
348
|
+
}
|
|
290
349
|
};
|
|
291
350
|
__decorate([property({ type: String })], AuroraCardHeader.prototype, "logoSrc", void 0);
|
|
292
351
|
__decorate([property({ type: String })], AuroraCardHeader.prototype, "tenantOrAccount", void 0);
|
|
@@ -294,6 +353,8 @@ __decorate([property({ type: String })], AuroraCardHeader.prototype, "name", voi
|
|
|
294
353
|
__decorate([property({ type: String })], AuroraCardHeader.prototype, "badge", void 0);
|
|
295
354
|
__decorate([property({ type: String })], AuroraCardHeader.prototype, "subtitle", void 0);
|
|
296
355
|
__decorate([property({ type: String })], AuroraCardHeader.prototype, "cardType", void 0);
|
|
356
|
+
__decorate([property({ type: Array })], AuroraCardHeader.prototype, "revisions", void 0);
|
|
357
|
+
__decorate([property({ type: String })], AuroraCardHeader.prototype, "displayedRevision", void 0);
|
|
297
358
|
__decorate([property({ type: String })], AuroraCardHeader.prototype, "freeIaasLabel", void 0);
|
|
298
359
|
__decorate([property({ type: String })], AuroraCardHeader.prototype, "freeIaasTitle", void 0);
|
|
299
360
|
__decorate([property({ type: String })], AuroraCardHeader.prototype, "freeIaasDesc", void 0);
|
|
@@ -317,10 +378,10 @@ var AuroraCardStatItem = class AuroraCardStatItem extends LitElement {
|
|
|
317
378
|
render() {
|
|
318
379
|
return html`
|
|
319
380
|
<div class="flex flex-col items-center text-center gap-0.5">
|
|
320
|
-
<h4 class="text-lg text-
|
|
381
|
+
<h4 class="text-lg text-(--axebow-primary) font-bold leading-snug m-0">${this.value}</h4>
|
|
321
382
|
<p class="m-0 leading-snug">${this.title}</p>
|
|
322
383
|
<span
|
|
323
|
-
class="text-
|
|
384
|
+
class="text-(--axebow-gray) font-semibold text-xs ${this.active ? "cursor-pointer opacity-100" : "cursor-not-allowed opacity-50"}"
|
|
324
385
|
@click=${this._onClick}
|
|
325
386
|
>${this.label}</span>
|
|
326
387
|
</div>
|
|
@@ -391,7 +452,7 @@ var AuroraCardFilterItem = class AuroraCardFilterItem extends LitElement {
|
|
|
391
452
|
render() {
|
|
392
453
|
return html`
|
|
393
454
|
<div
|
|
394
|
-
class="w-full py-1 px-2 flex justify-between items-center border-t border-
|
|
455
|
+
class="w-full py-1 px-2 flex justify-between items-center border-t border-(--axebow-light-gray) cursor-pointer hover:bg-(--axebow-light-gray)"
|
|
395
456
|
@click=${this._onClick}
|
|
396
457
|
>
|
|
397
458
|
<p class="m-0">${this.name}</p>
|
|
@@ -431,10 +492,10 @@ var AuroraCardFilter = class AuroraCardFilter extends LitElement {
|
|
|
431
492
|
render() {
|
|
432
493
|
return html`
|
|
433
494
|
<div class="relative">
|
|
434
|
-
<div class="flex justify-between items-center border-b border-
|
|
495
|
+
<div class="flex justify-between items-center border-b border-(--axebow-light-gray) w-full px-2 cursor-pointer h-7">
|
|
435
496
|
${!this.selected && this.items.length === 0 ? html`
|
|
436
497
|
<p
|
|
437
|
-
class="m-0 ${this.isPlainRole || this.isDisabled ? "text-
|
|
498
|
+
class="m-0 ${this.isPlainRole || this.isDisabled ? "text-(--axebow-gray) cursor-default opacity-50" : "text-(--axebow-tertiary) cursor-pointer"}"
|
|
438
499
|
@click=${this.isPlainRole || this.isDisabled ? void 0 : this._onEmptyAction}
|
|
439
500
|
>
|
|
440
501
|
${this.emptyActionLabel}
|
|
@@ -444,17 +505,17 @@ var AuroraCardFilter = class AuroraCardFilter extends LitElement {
|
|
|
444
505
|
class="flex w-full justify-between items-center ${this.isDisabled ? "opacity-50 cursor-not-allowed" : ""}"
|
|
445
506
|
@click=${this.isDisabled ? void 0 : this._onToggle}
|
|
446
507
|
>
|
|
447
|
-
<span class="text-
|
|
508
|
+
<span class="text-(--axebow-tertiary)">${this.selected ?? this.emptyLabel}</span>
|
|
448
509
|
<div class="flex items-center gap-2">
|
|
449
|
-
${this.showAttention ? html`<p class="text-
|
|
510
|
+
${this.showAttention ? html`<p class="text-(--axebow-error) m-0 text-xs">${this.attentionLabel}</p>` : ""}
|
|
450
511
|
<axebow-icon iconName="chevron_right" rotate="90" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
|
|
451
512
|
</div>
|
|
452
513
|
</div>
|
|
453
514
|
`}
|
|
454
515
|
</div>
|
|
455
516
|
|
|
456
|
-
<div class="${this.opened ? "" : "hidden"} absolute top-full left-0 right-0 z-10 flex flex-col bg-white rounded-b-lg border border-
|
|
457
|
-
<p class="w-full p-2 cursor-pointer m-0 hover:bg-
|
|
517
|
+
<div class="${this.opened ? "" : "hidden"} absolute top-full left-0 right-0 z-10 flex flex-col bg-white rounded-b-lg border border-(--axebow-light-gray) shadow-[2px_2px_25px_0px_rgba(0,0,0,0.1)] max-h-40 overflow-y-auto">
|
|
518
|
+
<p class="w-full p-2 cursor-pointer m-0 hover:bg-(--axebow-light-gray)" @click=${() => this._onSelect(null)}>${this.emptyLabel}</p>
|
|
458
519
|
${this.items.map((item) => html`
|
|
459
520
|
<aurora-card-filter-item
|
|
460
521
|
.name=${item.name}
|
|
@@ -497,6 +558,119 @@ __decorate([property({ type: Boolean })], AuroraCardFilter.prototype, "isPlainRo
|
|
|
497
558
|
__decorate([property({ type: Boolean })], AuroraCardFilter.prototype, "isDisabled", void 0);
|
|
498
559
|
AuroraCardFilter = __decorate([customElement("aurora-card-filter")], AuroraCardFilter);
|
|
499
560
|
//#endregion
|
|
561
|
+
//#region src/components/cards/parts/aurora-card-table-header.ts
|
|
562
|
+
var AuroraCardTableHeader = class AuroraCardTableHeader extends LitElement {
|
|
563
|
+
constructor(..._args) {
|
|
564
|
+
super(..._args);
|
|
565
|
+
this.opened = false;
|
|
566
|
+
this.filterDisplayText = "";
|
|
567
|
+
this.allLabel = "All Roles & Instances";
|
|
568
|
+
this.attentionLabel = "Attention needed";
|
|
569
|
+
this.showAttention = false;
|
|
570
|
+
this.filterRoles = [];
|
|
571
|
+
}
|
|
572
|
+
static {
|
|
573
|
+
this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
|
|
574
|
+
}
|
|
575
|
+
render() {
|
|
576
|
+
return html`
|
|
577
|
+
<div class="relative">
|
|
578
|
+
<div
|
|
579
|
+
class="flex justify-between items-center border-b border-(--axebow-light-gray) w-full px-2 cursor-pointer h-7"
|
|
580
|
+
@click=${this._onToggle}
|
|
581
|
+
>
|
|
582
|
+
<span class="text-(--axebow-tertiary)">${this.filterDisplayText || this.allLabel}</span>
|
|
583
|
+
<div class="flex items-center gap-2">
|
|
584
|
+
${this.showAttention ? html`<p class="text-(--axebow-error) m-0 text-xs">${this.attentionLabel}</p>` : ""}
|
|
585
|
+
<axebow-icon iconName="chevron_right" rotate="90" iconColor="var(--axebow-tertiary)" size="small"></axebow-icon>
|
|
586
|
+
</div>
|
|
587
|
+
</div>
|
|
588
|
+
|
|
589
|
+
<div class="${this.opened ? "" : "hidden"} absolute top-full left-0 right-0 z-10 flex flex-col bg-white rounded-b-lg border border-(--axebow-light-gray) shadow-[2px_2px_25px_0px_rgba(0,0,0,0.1)] max-h-40 overflow-y-auto">
|
|
590
|
+
<p class="w-full p-2 cursor-pointer m-0 hover:bg-(--axebow-light-gray)" @click=${() => this._onSelect("", "all")}>${this.allLabel}</p>
|
|
591
|
+
${this.filterRoles.map((role) => html`
|
|
592
|
+
<div
|
|
593
|
+
class="w-full py-1 px-2 flex justify-between items-center border-t border-(--axebow-light-gray) cursor-pointer hover:bg-(--axebow-light-gray)"
|
|
594
|
+
@click=${() => this._onSelect(role.name, "role")}
|
|
595
|
+
>
|
|
596
|
+
<div class="flex items-center gap-2">
|
|
597
|
+
${role.logo ? html`<img src=${role.logo} class="w-5 h-5" />` : ""}
|
|
598
|
+
<p class="m-0">${role.name}</p>
|
|
599
|
+
</div>
|
|
600
|
+
</div>
|
|
601
|
+
${role.instances.map((inst) => html`
|
|
602
|
+
<div
|
|
603
|
+
class="w-full py-1 px-2 pl-6 flex justify-between items-center border-t border-(--axebow-light-gray) cursor-pointer hover:bg-(--axebow-light-gray)"
|
|
604
|
+
@click=${() => this._onSelect(inst.name, "instance")}
|
|
605
|
+
>
|
|
606
|
+
<div class="flex items-center gap-2">
|
|
607
|
+
<axebow-icon iconName="subdirectory_arrow_right" size="small"></axebow-icon>
|
|
608
|
+
<p class="m-0">${inst.name}</p>
|
|
609
|
+
</div>
|
|
610
|
+
${inst.needsAttention ? html`<axebow-icon iconName="warning" iconColor="var(--axebow-error)" size="small"></axebow-icon>` : ""}
|
|
611
|
+
</div>
|
|
612
|
+
`)}
|
|
613
|
+
`)}
|
|
614
|
+
</div>
|
|
615
|
+
</div>
|
|
616
|
+
`;
|
|
617
|
+
}
|
|
618
|
+
_onToggle() {
|
|
619
|
+
this.dispatchEvent(new CustomEvent("toggle-open", {
|
|
620
|
+
bubbles: true,
|
|
621
|
+
composed: true
|
|
622
|
+
}));
|
|
623
|
+
}
|
|
624
|
+
_onSelect(selected, type) {
|
|
625
|
+
this.dispatchEvent(new CustomEvent("filter-change", {
|
|
626
|
+
detail: {
|
|
627
|
+
selected,
|
|
628
|
+
type
|
|
629
|
+
},
|
|
630
|
+
bubbles: true,
|
|
631
|
+
composed: true
|
|
632
|
+
}));
|
|
633
|
+
}
|
|
634
|
+
};
|
|
635
|
+
__decorate([property({ type: Boolean })], AuroraCardTableHeader.prototype, "opened", void 0);
|
|
636
|
+
__decorate([property({ type: String })], AuroraCardTableHeader.prototype, "filterDisplayText", void 0);
|
|
637
|
+
__decorate([property({ type: String })], AuroraCardTableHeader.prototype, "allLabel", void 0);
|
|
638
|
+
__decorate([property({ type: String })], AuroraCardTableHeader.prototype, "attentionLabel", void 0);
|
|
639
|
+
__decorate([property({ type: Boolean })], AuroraCardTableHeader.prototype, "showAttention", void 0);
|
|
640
|
+
__decorate([property({ type: Array })], AuroraCardTableHeader.prototype, "filterRoles", void 0);
|
|
641
|
+
AuroraCardTableHeader = __decorate([customElement("aurora-card-table-header")], AuroraCardTableHeader);
|
|
642
|
+
//#endregion
|
|
643
|
+
//#region src/components/cards/parts/aurora-card-special-link.ts
|
|
644
|
+
var AuroraCardSpecialLink = class AuroraCardSpecialLink extends LitElement {
|
|
645
|
+
constructor(..._args) {
|
|
646
|
+
super(..._args);
|
|
647
|
+
this.label = "";
|
|
648
|
+
this.color = "var(--axebow-error)";
|
|
649
|
+
this.icon = "arrow_forward";
|
|
650
|
+
}
|
|
651
|
+
static {
|
|
652
|
+
this.styles = [unsafeCSS(tailwind_default), css`:host { display: inline-flex; }`];
|
|
653
|
+
}
|
|
654
|
+
render() {
|
|
655
|
+
return html`
|
|
656
|
+
<span class="cursor-pointer" style="color:${this.color};" @click=${this._onClick}>
|
|
657
|
+
${this.label}
|
|
658
|
+
<axebow-icon iconName=${this.icon} iconColor=${this.color} size="small"></axebow-icon>
|
|
659
|
+
</span>
|
|
660
|
+
`;
|
|
661
|
+
}
|
|
662
|
+
_onClick() {
|
|
663
|
+
this.dispatchEvent(new CustomEvent("link-click", {
|
|
664
|
+
bubbles: true,
|
|
665
|
+
composed: true
|
|
666
|
+
}));
|
|
667
|
+
}
|
|
668
|
+
};
|
|
669
|
+
__decorate([property({ type: String })], AuroraCardSpecialLink.prototype, "label", void 0);
|
|
670
|
+
__decorate([property({ type: String })], AuroraCardSpecialLink.prototype, "color", void 0);
|
|
671
|
+
__decorate([property({ type: String })], AuroraCardSpecialLink.prototype, "icon", void 0);
|
|
672
|
+
AuroraCardSpecialLink = __decorate([customElement("aurora-card-special-link")], AuroraCardSpecialLink);
|
|
673
|
+
//#endregion
|
|
500
674
|
//#region src/components/cards/parts/aurora-card-attention-banner.ts
|
|
501
675
|
var AuroraCardAttentionBanner = class AuroraCardAttentionBanner extends LitElement {
|
|
502
676
|
constructor(..._args) {
|
|
@@ -532,13 +706,14 @@ var AuroraCardAttentionBanner = class AuroraCardAttentionBanner extends LitEleme
|
|
|
532
706
|
if (exceeded.length === 0 && !this.invalidCredentials) return html``;
|
|
533
707
|
return html`
|
|
534
708
|
<div class="error-bg flex flex-wrap items-center justify-center gap-1 w-full px-1 text-center">
|
|
535
|
-
${this.isPlainRole ? html`<span class="text-
|
|
536
|
-
<p class="text-
|
|
709
|
+
${this.isPlainRole ? html`<span class="text-(--axebow-error)">${this.askOwnerLabel}</span>` : html`
|
|
710
|
+
<p class="text-(--axebow-error) m-0">
|
|
537
711
|
${this.invalidCredentials ? this.invalidCredsLabel : `${this.limitReachedLabel} ${this._formatList(exceeded)}.`}
|
|
538
|
-
<
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
712
|
+
<aurora-card-special-link
|
|
713
|
+
.label=${this.manageLabel}
|
|
714
|
+
color="var(--axebow-error)"
|
|
715
|
+
@link-click=${this._onManage}
|
|
716
|
+
></aurora-card-special-link>
|
|
542
717
|
</p>
|
|
543
718
|
`}
|
|
544
719
|
</div>
|
|
@@ -597,6 +772,59 @@ var AuroraCardActionBanner = class AuroraCardActionBanner extends LitElement {
|
|
|
597
772
|
__decorate([property({ type: String })], AuroraCardActionBanner.prototype, "label", void 0);
|
|
598
773
|
AuroraCardActionBanner = __decorate([customElement("aurora-card-action-banner")], AuroraCardActionBanner);
|
|
599
774
|
//#endregion
|
|
775
|
+
//#region src/components/cards/parts/aurora-card-resource-row.ts
|
|
776
|
+
var AuroraCardResourceRow = class AuroraCardResourceRow extends LitElement {
|
|
777
|
+
constructor(..._args) {
|
|
778
|
+
super(..._args);
|
|
779
|
+
this.attentionThreshold = 90;
|
|
780
|
+
this.isLast = false;
|
|
781
|
+
}
|
|
782
|
+
static {
|
|
783
|
+
this.styles = [unsafeCSS(tailwind_default), css`:host { display: contents; }`];
|
|
784
|
+
}
|
|
785
|
+
render() {
|
|
786
|
+
const stat = this.stat;
|
|
787
|
+
const borderClass = !stat.hidden && !this.isLast ? "border-b border-[var(--axebow-light-gray)]" : "";
|
|
788
|
+
if (stat.hidden) return html`
|
|
789
|
+
<div class="flex items-center w-full px-2 h-8 gap-2 ${borderClass}"></div>
|
|
790
|
+
<div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${borderClass}"></div>
|
|
791
|
+
<div class="flex items-center justify-end w-full px-2 h-8 ${borderClass}"></div>
|
|
792
|
+
<div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${borderClass}"></div>
|
|
793
|
+
`;
|
|
794
|
+
return html`
|
|
795
|
+
<div class="flex items-center w-full px-2 h-8 gap-2 ${borderClass}">
|
|
796
|
+
<div class="flex items-center gap-2 ${stat.isSecondary ? "ml-2" : ""}">
|
|
797
|
+
<axebow-icon iconName=${stat.icon} size="small" rotate=${stat.iconRotation ?? 0}></axebow-icon>
|
|
798
|
+
<span class="text-xs ${stat.isSecondary ? "" : "font-semibold"}">${stat.title}</span>
|
|
799
|
+
</div>
|
|
800
|
+
</div>
|
|
801
|
+
|
|
802
|
+
<div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${borderClass}">
|
|
803
|
+
<p class="${stat.isSecondary ? "font-normal" : "font-semibold"} m-0">${stat.value ?? "-.-"}</p>
|
|
804
|
+
</div>
|
|
805
|
+
|
|
806
|
+
<div class="flex items-center justify-end w-full px-2 h-8 ${borderClass}">
|
|
807
|
+
<div class="h-2 w-full bg-(--axebow-light-gray) rounded-md relative overflow-hidden">
|
|
808
|
+
<div
|
|
809
|
+
class="absolute h-full ${stat.percentage >= this.attentionThreshold ? "bg-(--axebow-error)" : "bg-(--axebow-gray)"}"
|
|
810
|
+
style="width:${stat.percentage}%;"
|
|
811
|
+
></div>
|
|
812
|
+
</div>
|
|
813
|
+
</div>
|
|
814
|
+
|
|
815
|
+
<div class="flex items-center justify-end w-full px-2 h-8 gap-2 ${borderClass}">
|
|
816
|
+
<p class="${stat.isSecondary ? "font-normal" : "font-semibold"} m-0">
|
|
817
|
+
${stat.maxValue ?? "-.-"}<span class="font-normal">${stat.tagValue ?? ""}</span>
|
|
818
|
+
</p>
|
|
819
|
+
</div>
|
|
820
|
+
`;
|
|
821
|
+
}
|
|
822
|
+
};
|
|
823
|
+
__decorate([property({ type: Object })], AuroraCardResourceRow.prototype, "stat", void 0);
|
|
824
|
+
__decorate([property({ type: Number })], AuroraCardResourceRow.prototype, "attentionThreshold", void 0);
|
|
825
|
+
__decorate([property({ type: Boolean })], AuroraCardResourceRow.prototype, "isLast", void 0);
|
|
826
|
+
AuroraCardResourceRow = __decorate([customElement("aurora-card-resource-row")], AuroraCardResourceRow);
|
|
827
|
+
//#endregion
|
|
600
828
|
//#region src/components/cards/parts/aurora-card-resource-table.ts
|
|
601
829
|
var AuroraCardResourceTable = class AuroraCardResourceTable extends LitElement {
|
|
602
830
|
constructor(..._args) {
|
|
@@ -629,60 +857,14 @@ var AuroraCardResourceTable = class AuroraCardResourceTable extends LitElement {
|
|
|
629
857
|
const lastVisible = visibleRows[visibleRows.length - 1];
|
|
630
858
|
return html`
|
|
631
859
|
<div>
|
|
632
|
-
<div class="
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
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>
|
|
860
|
+
<div class="grid grid-cols-[auto_auto_1fr_auto] border-b border-(--axebow-light-gray)">
|
|
861
|
+
${this.rows.map((stat) => html`
|
|
862
|
+
<aurora-card-resource-row
|
|
863
|
+
.stat=${stat}
|
|
864
|
+
.attentionThreshold=${this.attentionThreshold}
|
|
865
|
+
.isLast=${stat === lastVisible}
|
|
866
|
+
></aurora-card-resource-row>
|
|
684
867
|
`)}
|
|
685
|
-
</div>
|
|
686
868
|
</div>
|
|
687
869
|
|
|
688
870
|
${showWarning ? html`<aurora-card-attention-banner
|
|
@@ -725,25 +907,73 @@ __decorate([property({ type: String })], AuroraCardResourceTable.prototype, "and
|
|
|
725
907
|
__decorate([property({ type: String })], AuroraCardResourceTable.prototype, "actionBannerLabel", void 0);
|
|
726
908
|
AuroraCardResourceTable = __decorate([customElement("aurora-card-resource-table")], AuroraCardResourceTable);
|
|
727
909
|
//#endregion
|
|
728
|
-
//#region src/components/cards/parts/aurora-card-status
|
|
729
|
-
var
|
|
910
|
+
//#region src/components/cards/parts/aurora-card-status.ts
|
|
911
|
+
var AuroraCardStatus = class AuroraCardStatus extends LitElement {
|
|
912
|
+
constructor(..._args) {
|
|
913
|
+
super(..._args);
|
|
914
|
+
this.statusCode = "";
|
|
915
|
+
this.statusMessage = "";
|
|
916
|
+
this.borderColor = "";
|
|
917
|
+
this.showSpinner = false;
|
|
918
|
+
}
|
|
919
|
+
static {
|
|
920
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
921
|
+
:host { display: block; flex: 1; min-width: 0; }
|
|
922
|
+
sl-tooltip::part(base) { max-width: none; white-space: normal; word-break: break-word; }
|
|
923
|
+
`];
|
|
924
|
+
}
|
|
925
|
+
render() {
|
|
926
|
+
if (!this.statusCode) return html`<div class="w-full whitespace-nowrap overflow-hidden text-ellipsis"><slot></slot></div>`;
|
|
927
|
+
return html`
|
|
928
|
+
<div class="flex items-center gap-1 min-w-0 w-full">
|
|
929
|
+
${this.showSpinner ? html`<sl-spinner style="--indicator-color:${this.borderColor};"></sl-spinner>` : ""}
|
|
930
|
+
<p class="font-bold text-xs m-0 line-clamp-1" style="color:${this.borderColor};" title=${this.statusCode}>${this.statusCode}</p>
|
|
931
|
+
<sl-tooltip content=${this.statusMessage}>
|
|
932
|
+
<axebow-icon class="cursor-pointer shrink-0" iconColor=${this.borderColor} iconName="info" size="small"></axebow-icon>
|
|
933
|
+
</sl-tooltip>
|
|
934
|
+
</div>
|
|
935
|
+
`;
|
|
936
|
+
}
|
|
937
|
+
};
|
|
938
|
+
__decorate([property({ type: String })], AuroraCardStatus.prototype, "statusCode", void 0);
|
|
939
|
+
__decorate([property({ type: String })], AuroraCardStatus.prototype, "statusMessage", void 0);
|
|
940
|
+
__decorate([property({ type: String })], AuroraCardStatus.prototype, "borderColor", void 0);
|
|
941
|
+
__decorate([property({ type: Boolean })], AuroraCardStatus.prototype, "showSpinner", void 0);
|
|
942
|
+
AuroraCardStatus = __decorate([customElement("aurora-card-status")], AuroraCardStatus);
|
|
943
|
+
//#endregion
|
|
944
|
+
//#region src/components/cards/parts/aurora-card-footer.ts
|
|
945
|
+
var AuroraCardFooter = class AuroraCardFooter extends LitElement {
|
|
730
946
|
constructor(..._args) {
|
|
731
947
|
super(..._args);
|
|
732
948
|
this.isFreeIaaS = false;
|
|
733
949
|
this.isPlainRole = false;
|
|
950
|
+
this.statusCode = "";
|
|
951
|
+
this.statusMessage = "";
|
|
952
|
+
this.borderColor = "";
|
|
953
|
+
this.showSpinner = false;
|
|
734
954
|
this.moreActionsOpen = false;
|
|
735
955
|
this.moreActionsOptions = [];
|
|
736
956
|
this.closeLabel = "Close";
|
|
737
957
|
this.moreActionsLabel = "More";
|
|
958
|
+
this.actionLabel = "";
|
|
738
959
|
}
|
|
739
960
|
static {
|
|
740
961
|
this.styles = [unsafeCSS(tailwind_default), css`:host { display: block; }`];
|
|
741
962
|
}
|
|
742
963
|
render() {
|
|
964
|
+
const showDropdown = !this.isFreeIaaS && !this.isPlainRole && this.moreActionsOptions.length > 0;
|
|
965
|
+
const showAction = !showDropdown && !!this.actionLabel;
|
|
743
966
|
return html`
|
|
744
967
|
<div class="flex justify-between items-center relative h-6 gap-2 text-xs">
|
|
745
|
-
<
|
|
746
|
-
|
|
968
|
+
<aurora-card-status
|
|
969
|
+
.statusCode=${this.statusCode}
|
|
970
|
+
.statusMessage=${this.statusMessage}
|
|
971
|
+
.borderColor=${this.borderColor}
|
|
972
|
+
.showSpinner=${this.showSpinner}
|
|
973
|
+
>
|
|
974
|
+
<slot></slot>
|
|
975
|
+
</aurora-card-status>
|
|
976
|
+
${showDropdown ? html`
|
|
747
977
|
<aurora-more-actions
|
|
748
978
|
class="shrink-0 mr-2"
|
|
749
979
|
placement="top"
|
|
@@ -753,7 +983,7 @@ var AuroraCardStatusBar = class AuroraCardStatusBar extends LitElement {
|
|
|
753
983
|
.moreActionsLabel=${this.moreActionsLabel}
|
|
754
984
|
@toggled=${this._onToggled}
|
|
755
985
|
></aurora-more-actions>
|
|
756
|
-
` : ""}
|
|
986
|
+
` : showAction ? html`<axebow-button variant="text" size="medium" @click=${this._onAction}>${this.actionLabel}</axebow-button>` : ""}
|
|
757
987
|
</div>
|
|
758
988
|
`;
|
|
759
989
|
}
|
|
@@ -764,14 +994,25 @@ var AuroraCardStatusBar = class AuroraCardStatusBar extends LitElement {
|
|
|
764
994
|
composed: true
|
|
765
995
|
}));
|
|
766
996
|
}
|
|
997
|
+
_onAction() {
|
|
998
|
+
this.dispatchEvent(new CustomEvent("footer-action-click", {
|
|
999
|
+
bubbles: true,
|
|
1000
|
+
composed: true
|
|
1001
|
+
}));
|
|
1002
|
+
}
|
|
767
1003
|
};
|
|
768
|
-
__decorate([property({ type: Boolean })],
|
|
769
|
-
__decorate([property({ type: Boolean })],
|
|
770
|
-
__decorate([property({ type:
|
|
771
|
-
__decorate([property({ type:
|
|
772
|
-
__decorate([property({ type: String })],
|
|
773
|
-
__decorate([property({ type:
|
|
774
|
-
|
|
1004
|
+
__decorate([property({ type: Boolean })], AuroraCardFooter.prototype, "isFreeIaaS", void 0);
|
|
1005
|
+
__decorate([property({ type: Boolean })], AuroraCardFooter.prototype, "isPlainRole", void 0);
|
|
1006
|
+
__decorate([property({ type: String })], AuroraCardFooter.prototype, "statusCode", void 0);
|
|
1007
|
+
__decorate([property({ type: String })], AuroraCardFooter.prototype, "statusMessage", void 0);
|
|
1008
|
+
__decorate([property({ type: String })], AuroraCardFooter.prototype, "borderColor", void 0);
|
|
1009
|
+
__decorate([property({ type: Boolean })], AuroraCardFooter.prototype, "showSpinner", void 0);
|
|
1010
|
+
__decorate([property({ type: Boolean })], AuroraCardFooter.prototype, "moreActionsOpen", void 0);
|
|
1011
|
+
__decorate([property({ type: Array })], AuroraCardFooter.prototype, "moreActionsOptions", void 0);
|
|
1012
|
+
__decorate([property({ type: String })], AuroraCardFooter.prototype, "closeLabel", void 0);
|
|
1013
|
+
__decorate([property({ type: String })], AuroraCardFooter.prototype, "moreActionsLabel", void 0);
|
|
1014
|
+
__decorate([property({ type: String })], AuroraCardFooter.prototype, "actionLabel", void 0);
|
|
1015
|
+
AuroraCardFooter = __decorate([customElement("aurora-card-footer")], AuroraCardFooter);
|
|
775
1016
|
//#endregion
|
|
776
1017
|
//#region src/components/cards/aurora-base-card.ts
|
|
777
1018
|
var AuroraBaseCard = class AuroraBaseCard extends LitElement {
|
|
@@ -797,6 +1038,17 @@ var AuroraBaseCard = class AuroraBaseCard extends LitElement {
|
|
|
797
1038
|
this.isPlainRole = false;
|
|
798
1039
|
this.isDeleting = false;
|
|
799
1040
|
this.isDisabled = false;
|
|
1041
|
+
this.revisions = [];
|
|
1042
|
+
this.displayedRevision = "";
|
|
1043
|
+
this.isDeployed = false;
|
|
1044
|
+
this.deployedLabel = "Deployed";
|
|
1045
|
+
this.filterRoles = [];
|
|
1046
|
+
this.filterDisplayText = "";
|
|
1047
|
+
this.allLabel = "All Roles & Instances";
|
|
1048
|
+
this.borderColor = "";
|
|
1049
|
+
this.statusCode = "";
|
|
1050
|
+
this.statusMessage = "";
|
|
1051
|
+
this.serviceDetailLabel = "Service detail";
|
|
800
1052
|
this.showActionBanner = false;
|
|
801
1053
|
this.showWarningBanner = false;
|
|
802
1054
|
this.manageLabel = "Manage";
|
|
@@ -819,19 +1071,31 @@ var AuroraBaseCard = class AuroraBaseCard extends LitElement {
|
|
|
819
1071
|
static {
|
|
820
1072
|
this.styles = [unsafeCSS(tailwind_default), css`
|
|
821
1073
|
:host { display: block; width: 450px; max-width: 100%; }
|
|
1074
|
+
:host([card-type='runtime']) { width: 380px; height: 417px; }
|
|
822
1075
|
sl-badge::part(base) { background-color: var(--axebow-secondary); color: white; }
|
|
823
|
-
sl-dialog::part(panel) { width: 35vw; }
|
|
1076
|
+
sl-dialog::part(panel) { width: 35vw; min-width: 400px; }
|
|
824
1077
|
sl-dialog::part(body) { padding-top: 0; }
|
|
825
1078
|
sl-alert::part(base) { border-top: 2px solid var(--axebow-error); }
|
|
826
1079
|
sl-range, sl-range:hover {
|
|
827
1080
|
--sl-color-primary-600: var(--axebow-tertiary);
|
|
828
1081
|
--sl-color-primary-500: var(--axebow-tertiary);
|
|
829
1082
|
}
|
|
1083
|
+
.deploy-time {
|
|
1084
|
+
display: -webkit-box;
|
|
1085
|
+
-webkit-line-clamp: 2;
|
|
1086
|
+
-webkit-box-orient: vertical;
|
|
1087
|
+
overflow: hidden;
|
|
1088
|
+
}
|
|
830
1089
|
`];
|
|
831
1090
|
}
|
|
832
1091
|
render() {
|
|
1092
|
+
const isRuntime = this.cardType === "runtime";
|
|
833
1093
|
return html`
|
|
834
|
-
<div
|
|
1094
|
+
<div
|
|
1095
|
+
class="w-full h-full bg-(--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" : ""}"
|
|
1096
|
+
style=${isRuntime ? `border-top-color:${this.borderColor};` : ""}
|
|
1097
|
+
?inert=${this.isDeleting}
|
|
1098
|
+
>
|
|
835
1099
|
<div class="flex flex-col gap-2">
|
|
836
1100
|
<aurora-card-header
|
|
837
1101
|
.cardType=${this.cardType}
|
|
@@ -840,51 +1104,85 @@ var AuroraBaseCard = class AuroraBaseCard extends LitElement {
|
|
|
840
1104
|
.name=${this.name}
|
|
841
1105
|
.badge=${this.badge}
|
|
842
1106
|
.subtitle=${this.subtitle}
|
|
1107
|
+
.revisions=${this.revisions}
|
|
1108
|
+
.displayedRevision=${this.displayedRevision}
|
|
843
1109
|
.freeIaasLabel=${this.freeIaasLabel}
|
|
844
1110
|
.freeIaasTitle=${this.freeIaasTitle}
|
|
845
1111
|
.freeIaasDesc=${this.freeIaasDesc}
|
|
846
1112
|
.haLabel=${this.haLabel}
|
|
847
1113
|
.haTitle=${this.haTitle}
|
|
1114
|
+
@revision-change=${(e) => this.dispatchEvent(new CustomEvent("revision-change", {
|
|
1115
|
+
detail: e.detail,
|
|
1116
|
+
bubbles: true,
|
|
1117
|
+
composed: true
|
|
1118
|
+
}))}
|
|
848
1119
|
>
|
|
849
1120
|
<slot slot="subtitle-tooltip" name="subtitle-tooltip"></slot>
|
|
850
1121
|
</aurora-card-header>
|
|
851
1122
|
|
|
852
1123
|
<div class="w-full px-2 flex flex-col gap-2">
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
1124
|
+
${isRuntime ? html`
|
|
1125
|
+
<div class="flex flex-row justify-between items-center min-h-10 max-h-10 overflow-hidden">
|
|
1126
|
+
<span class="deploy-time text-(--axebow-secondary)"><slot name="time-elapsed"></slot></span>
|
|
1127
|
+
${this.isDeployed ? html`<span class="text-(--axebow-secondary) border-2 border-(--axebow-secondary) rounded-lg py-0.5 px-1.5 whitespace-nowrap text-xs">${this.deployedLabel}</span>` : ""}
|
|
1128
|
+
</div>
|
|
1129
|
+
` : html`
|
|
1130
|
+
<aurora-card-stats-row
|
|
1131
|
+
.stats=${this.mainStats}
|
|
1132
|
+
.compact=${this.compact}
|
|
1133
|
+
@stat-label-click=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("stat-label-click", {
|
|
857
1134
|
detail: e.detail,
|
|
858
1135
|
bubbles: true,
|
|
859
1136
|
composed: true
|
|
860
1137
|
}))}
|
|
861
|
-
|
|
1138
|
+
></aurora-card-stats-row>
|
|
1139
|
+
`}
|
|
862
1140
|
|
|
863
|
-
<div class="w-full h-full border border-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
1141
|
+
<div class="w-full h-full border border-(--axebow-light-gray) rounded-md">
|
|
1142
|
+
${isRuntime ? html`
|
|
1143
|
+
<aurora-card-table-header
|
|
1144
|
+
.opened=${this.filterOpened}
|
|
1145
|
+
.filterDisplayText=${this.filterDisplayText}
|
|
1146
|
+
.allLabel=${this.allLabel}
|
|
1147
|
+
.attentionLabel=${this.attentionLabel}
|
|
1148
|
+
.showAttention=${this.showAttention}
|
|
1149
|
+
.filterRoles=${this.filterRoles}
|
|
1150
|
+
@toggle-open=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("toggle-filter", {
|
|
1151
|
+
bubbles: true,
|
|
1152
|
+
composed: true
|
|
1153
|
+
}))}
|
|
1154
|
+
@filter-change=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("filter-change", {
|
|
875
1155
|
detail: e.detail,
|
|
876
1156
|
bubbles: true,
|
|
877
1157
|
composed: true
|
|
878
1158
|
}))}
|
|
879
|
-
|
|
1159
|
+
></aurora-card-table-header>
|
|
1160
|
+
` : html`
|
|
1161
|
+
<aurora-card-filter
|
|
1162
|
+
.items=${this.filterItems}
|
|
1163
|
+
.selected=${this.selected}
|
|
1164
|
+
.emptyLabel=${this.emptyLabel}
|
|
1165
|
+
.emptyActionLabel=${this.emptyActionLabel}
|
|
1166
|
+
.attentionLabel=${this.attentionLabel}
|
|
1167
|
+
.showAttention=${this.showAttention}
|
|
1168
|
+
.opened=${this.filterOpened}
|
|
1169
|
+
.isPlainRole=${this.isPlainRole}
|
|
1170
|
+
.isDisabled=${this.isDeleting || this.isDisabled}
|
|
1171
|
+
@filter-select=${(e) => !this.isDeleting && this.dispatchEvent(new CustomEvent("filter-select", {
|
|
1172
|
+
detail: e.detail,
|
|
880
1173
|
bubbles: true,
|
|
881
1174
|
composed: true
|
|
882
1175
|
}))}
|
|
883
|
-
|
|
1176
|
+
@toggle-open=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("toggle-filter", {
|
|
884
1177
|
bubbles: true,
|
|
885
1178
|
composed: true
|
|
886
1179
|
}))}
|
|
887
|
-
|
|
1180
|
+
@empty-action-click=${() => !this.isDeleting && this.dispatchEvent(new CustomEvent("empty-action-click", {
|
|
1181
|
+
bubbles: true,
|
|
1182
|
+
composed: true
|
|
1183
|
+
}))}
|
|
1184
|
+
></aurora-card-filter>
|
|
1185
|
+
`}
|
|
888
1186
|
|
|
889
1187
|
<aurora-card-resource-table
|
|
890
1188
|
.rows=${this.tableStats}
|
|
@@ -914,29 +1212,42 @@ var AuroraBaseCard = class AuroraBaseCard extends LitElement {
|
|
|
914
1212
|
</div>
|
|
915
1213
|
</div>
|
|
916
1214
|
|
|
917
|
-
<aurora-card-
|
|
1215
|
+
<aurora-card-footer
|
|
918
1216
|
class="mb-1 pl-2"
|
|
919
1217
|
.isFreeIaaS=${this.isFreeIaaS}
|
|
920
1218
|
.isPlainRole=${this.isPlainRole}
|
|
1219
|
+
.statusCode=${isRuntime ? this.statusCode : ""}
|
|
1220
|
+
.statusMessage=${isRuntime ? this.statusMessage : ""}
|
|
1221
|
+
.borderColor=${this.borderColor}
|
|
1222
|
+
.showSpinner=${isRuntime && this.borderColor === "var(--axebow-gray)"}
|
|
921
1223
|
.moreActionsOpen=${this.moreActionsOpen}
|
|
922
|
-
.moreActionsOptions=${this.moreActionsOptions}
|
|
1224
|
+
.moreActionsOptions=${isRuntime ? [] : this.moreActionsOptions}
|
|
923
1225
|
.closeLabel=${this.closeLabel}
|
|
924
1226
|
.moreActionsLabel=${this.moreActionsLabel}
|
|
1227
|
+
.actionLabel=${isRuntime ? this.serviceDetailLabel : ""}
|
|
925
1228
|
@more-actions-toggled=${(e) => this.dispatchEvent(new CustomEvent("more-actions-toggled", {
|
|
926
1229
|
detail: e.detail,
|
|
927
1230
|
bubbles: true,
|
|
928
1231
|
composed: true
|
|
929
1232
|
}))}
|
|
1233
|
+
@footer-action-click=${() => this.dispatchEvent(new CustomEvent("service-detail-click", {
|
|
1234
|
+
bubbles: true,
|
|
1235
|
+
composed: true
|
|
1236
|
+
}))}
|
|
930
1237
|
>
|
|
931
1238
|
<slot name="status-footer"></slot>
|
|
932
|
-
</aurora-card-
|
|
1239
|
+
</aurora-card-footer>
|
|
933
1240
|
|
|
934
1241
|
<slot name="dialogs"></slot>
|
|
935
1242
|
</div>
|
|
936
1243
|
`;
|
|
937
1244
|
}
|
|
938
1245
|
};
|
|
939
|
-
__decorate([property({
|
|
1246
|
+
__decorate([property({
|
|
1247
|
+
type: String,
|
|
1248
|
+
reflect: true,
|
|
1249
|
+
attribute: "card-type"
|
|
1250
|
+
})], AuroraBaseCard.prototype, "cardType", void 0);
|
|
940
1251
|
__decorate([property({ type: String })], AuroraBaseCard.prototype, "name", void 0);
|
|
941
1252
|
__decorate([property({ type: String })], AuroraBaseCard.prototype, "logoSrc", void 0);
|
|
942
1253
|
__decorate([property({ type: String })], AuroraBaseCard.prototype, "tenantOrAccount", void 0);
|
|
@@ -956,6 +1267,17 @@ __decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "showAttenti
|
|
|
956
1267
|
__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isPlainRole", void 0);
|
|
957
1268
|
__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isDeleting", void 0);
|
|
958
1269
|
__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isDisabled", void 0);
|
|
1270
|
+
__decorate([property({ type: Array })], AuroraBaseCard.prototype, "revisions", void 0);
|
|
1271
|
+
__decorate([property({ type: String })], AuroraBaseCard.prototype, "displayedRevision", void 0);
|
|
1272
|
+
__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "isDeployed", void 0);
|
|
1273
|
+
__decorate([property({ type: String })], AuroraBaseCard.prototype, "deployedLabel", void 0);
|
|
1274
|
+
__decorate([property({ type: Array })], AuroraBaseCard.prototype, "filterRoles", void 0);
|
|
1275
|
+
__decorate([property({ type: String })], AuroraBaseCard.prototype, "filterDisplayText", void 0);
|
|
1276
|
+
__decorate([property({ type: String })], AuroraBaseCard.prototype, "allLabel", void 0);
|
|
1277
|
+
__decorate([property({ type: String })], AuroraBaseCard.prototype, "borderColor", void 0);
|
|
1278
|
+
__decorate([property({ type: String })], AuroraBaseCard.prototype, "statusCode", void 0);
|
|
1279
|
+
__decorate([property({ type: String })], AuroraBaseCard.prototype, "statusMessage", void 0);
|
|
1280
|
+
__decorate([property({ type: String })], AuroraBaseCard.prototype, "serviceDetailLabel", void 0);
|
|
959
1281
|
__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "showActionBanner", void 0);
|
|
960
1282
|
__decorate([property({ type: Boolean })], AuroraBaseCard.prototype, "showWarningBanner", void 0);
|
|
961
1283
|
__decorate([property({ type: String })], AuroraBaseCard.prototype, "manageLabel", void 0);
|
|
@@ -976,248 +1298,6 @@ __decorate([property({ type: String })], AuroraBaseCard.prototype, "haLabel", vo
|
|
|
976
1298
|
__decorate([property({ type: String })], AuroraBaseCard.prototype, "haTitle", void 0);
|
|
977
1299
|
AuroraBaseCard = __decorate([customElement("aurora-base-card")], AuroraBaseCard);
|
|
978
1300
|
//#endregion
|
|
979
|
-
|
|
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 };
|
|
1301
|
+
export { AuroraBaseCard, AuroraCardActionBanner, AuroraCardAttentionBanner, AuroraCardCloudLogo, AuroraCardFilter, AuroraCardFilterItem, AuroraCardFooter, AuroraCardHeader, AuroraCardResourceRow, AuroraCardResourceTable, AuroraCardSpecialLink, AuroraCardStatItem, AuroraCardStatsRow, AuroraCardStatus, AuroraCardTableHeader, AuroraCardVersionSelector, AuroraMoreActions, STATUS_COLORS, auroraTheme };
|
|
1222
1302
|
|
|
1223
1303
|
//# sourceMappingURL=index.js.map
|