@kumori/aurora-wui-components 0.0.281-dev4205.7 → 0.0.281-dev4205.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/axebow-call-to-action-feature/axebow-call-to-action-feature.d.ts +2 -30
- package/dist/components/axebow-call-to-action-feature/axebow-call-to-action-feature.d.ts.map +1 -1
- package/dist/components/axebow-call-to-action-row/call-to-action-notification.d.ts +39 -0
- package/dist/components/axebow-call-to-action-row/call-to-action-notification.d.ts.map +1 -0
- package/dist/components/axebow-cta-dialog/axebow-cta-dialog.d.ts +2 -1
- package/dist/components/axebow-cta-dialog/axebow-cta-dialog.d.ts.map +1 -1
- package/dist/components/axebow-tenant-card/axebow-tenant-card.d.ts +5 -0
- package/dist/components/axebow-tenant-card/axebow-tenant-card.d.ts.map +1 -1
- package/dist/components/axebow-tenant-resource-table/axebow-tenant-resource-table.d.ts +3 -0
- package/dist/components/axebow-tenant-resource-table/axebow-tenant-resource-table.d.ts.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +217 -177
- package/dist/index.js.map +1 -1
- package/dist/playground/schemas/axebow-call-to-action-feature.schema.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -8507,12 +8507,17 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
8507
8507
|
}
|
|
8508
8508
|
_renderStatusIcon(icon) {
|
|
8509
8509
|
if (!icon) return "";
|
|
8510
|
-
const iconEl =
|
|
8511
|
-
|
|
8512
|
-
|
|
8513
|
-
|
|
8514
|
-
|
|
8515
|
-
|
|
8510
|
+
const iconEl = html`
|
|
8511
|
+
<div
|
|
8512
|
+
class="w-5 h-5 shrink-0 flex items-center justify-center cursor-pointer"
|
|
8513
|
+
@click=${icon.onClick ? (e) => {
|
|
8514
|
+
e.stopPropagation();
|
|
8515
|
+
icon.onClick();
|
|
8516
|
+
} : null}
|
|
8517
|
+
>
|
|
8518
|
+
${icon.spinner ? html`<sl-spinner style="font-size: 0.85rem; --indicator-color: var(--axebow-tertiary);"></sl-spinner>` : html`<axebow-icon iconName=${icon.iconName} iconColor=${icon.iconColor} size="md"></axebow-icon>`}
|
|
8519
|
+
</div>
|
|
8520
|
+
`;
|
|
8516
8521
|
return icon.tooltip ? html`<axebow-tooltip content=${icon.tooltip}>${iconEl}</axebow-tooltip>` : iconEl;
|
|
8517
8522
|
}
|
|
8518
8523
|
_renderTableRow(row, index) {
|
|
@@ -8540,6 +8545,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
8540
8545
|
` : html`<span class="w-4 inline-block"></span>`}
|
|
8541
8546
|
${row.logoUrl ? html`<img src=${row.logoUrl} alt="logo" class="w-5 h-5 object-contain shrink-0" />` : ""}
|
|
8542
8547
|
<span class="truncate">${row.name}</span>
|
|
8548
|
+
${this._renderStatusIcon(row.ctaIcon)}
|
|
8543
8549
|
${this._renderStatusIcon(row.statusIcon)}
|
|
8544
8550
|
<span class="flex-1"></span>
|
|
8545
8551
|
${this._renderStatusIcon(row.warningIcon)}
|
|
@@ -8597,6 +8603,7 @@ var AxebowTenantResourceTable = class AxebowTenantResourceTable extends LitEleme
|
|
|
8597
8603
|
></axebow-icon>
|
|
8598
8604
|
${subRow.logoUrl ? html`<img src=${subRow.logoUrl} class="w-5 h-5 object-contain shrink-0" />` : ""}
|
|
8599
8605
|
<span class="font-normal text-gray-700 truncate">${subRow.name}</span>
|
|
8606
|
+
${this._renderStatusIcon(subRow.ctaIcon)}
|
|
8600
8607
|
<span class="flex-1"></span>
|
|
8601
8608
|
${this._renderStatusIcon(subRow.warningIcon)}
|
|
8602
8609
|
</div>
|
|
@@ -8970,6 +8977,137 @@ __decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "a
|
|
|
8970
8977
|
__decorate([property({ type: String })], AxebowServiceDetailHeader.prototype, "deployLabel", void 0);
|
|
8971
8978
|
AxebowServiceDetailHeader = __decorate([customElement("axebow-service-detail-header")], AxebowServiceDetailHeader);
|
|
8972
8979
|
//#endregion
|
|
8980
|
+
//#region src/components/axebow-badge/axebow-badge.ts
|
|
8981
|
+
var AxebowBadge = class AxebowBadge extends LitElement {
|
|
8982
|
+
constructor(..._args) {
|
|
8983
|
+
super(..._args);
|
|
8984
|
+
this.bgColor = "var(--axebow-base)";
|
|
8985
|
+
this.textColor = "var(--axebow-secondary)";
|
|
8986
|
+
}
|
|
8987
|
+
static {
|
|
8988
|
+
this.styles = [unsafeCSS(tailwind_default), css`
|
|
8989
|
+
:host {
|
|
8990
|
+
display: inline-block;
|
|
8991
|
+
}
|
|
8992
|
+
`];
|
|
8993
|
+
}
|
|
8994
|
+
render() {
|
|
8995
|
+
return html`
|
|
8996
|
+
<div
|
|
8997
|
+
class="inline-flex items-center justify-center px-2 py-px rounded border border-solid text-xs leading-3 font-semibold whitespace-nowrap"
|
|
8998
|
+
style="background-color: ${this.bgColor}; color: ${this.textColor}; border-color: ${this.textColor};"
|
|
8999
|
+
>
|
|
9000
|
+
<slot></slot>
|
|
9001
|
+
</div>
|
|
9002
|
+
`;
|
|
9003
|
+
}
|
|
9004
|
+
};
|
|
9005
|
+
__decorate([property({ type: String })], AxebowBadge.prototype, "bgColor", void 0);
|
|
9006
|
+
__decorate([property({ type: String })], AxebowBadge.prototype, "textColor", void 0);
|
|
9007
|
+
AxebowBadge = __decorate([customElement("axebow-badge")], AxebowBadge);
|
|
9008
|
+
//#endregion
|
|
9009
|
+
//#region src/components/axebow-call-to-action-row/axebow-call-to-action-row.ts
|
|
9010
|
+
var CRITICALITY_STYLES = {
|
|
9011
|
+
critical: {
|
|
9012
|
+
bg: "var(--axebow-critical-bg)",
|
|
9013
|
+
color: "var(--axebow-error)",
|
|
9014
|
+
iconName: "error"
|
|
9015
|
+
},
|
|
9016
|
+
high: {
|
|
9017
|
+
bg: "var(--axebow-high-bg)",
|
|
9018
|
+
color: "var(--axebow-dark-yellow)",
|
|
9019
|
+
iconName: "warning"
|
|
9020
|
+
},
|
|
9021
|
+
low: {
|
|
9022
|
+
bg: "var(--axebow-base)",
|
|
9023
|
+
color: "var(--axebow-secondary)",
|
|
9024
|
+
iconName: "info"
|
|
9025
|
+
}
|
|
9026
|
+
};
|
|
9027
|
+
var AxebowCallToActionRow = class AxebowCallToActionRow extends LitElement {
|
|
9028
|
+
constructor(..._args) {
|
|
9029
|
+
super(..._args);
|
|
9030
|
+
this.criticality = "low";
|
|
9031
|
+
this.heading = "";
|
|
9032
|
+
this.badgeLabel = "";
|
|
9033
|
+
this.description = "";
|
|
9034
|
+
this.buttons = [];
|
|
9035
|
+
this.lowNoteText = "";
|
|
9036
|
+
}
|
|
9037
|
+
static {
|
|
9038
|
+
this.styles = [
|
|
9039
|
+
unsafeCSS(tailwind_default),
|
|
9040
|
+
axebowTheme,
|
|
9041
|
+
css`
|
|
9042
|
+
:host {
|
|
9043
|
+
display: block;
|
|
9044
|
+
width: 100%;
|
|
9045
|
+
}
|
|
9046
|
+
`
|
|
9047
|
+
];
|
|
9048
|
+
}
|
|
9049
|
+
render() {
|
|
9050
|
+
const { bg, color, iconName } = CRITICALITY_STYLES[this.criticality] ?? CRITICALITY_STYLES.low;
|
|
9051
|
+
return html`
|
|
9052
|
+
<div class="w-full box-border border-t border-solid border-(--axebow-table-header-border) bg-white p-4 flex flex-row items-center gap-4">
|
|
9053
|
+
<div class="w-10 h-10 rounded-md shrink-0 flex items-center justify-center" style="background-color: ${bg};">
|
|
9054
|
+
<div class="w-6 h-6 flex items-center justify-center">
|
|
9055
|
+
<axebow-icon iconName=${iconName} iconColor=${color} size="2xl"></axebow-icon>
|
|
9056
|
+
</div>
|
|
9057
|
+
</div>
|
|
9058
|
+
|
|
9059
|
+
<div class="flex-1 min-w-0 flex flex-col gap-1">
|
|
9060
|
+
<div class="w-full flex flex-row items-center gap-2">
|
|
9061
|
+
<span class="text-base font-semibold truncate">${this.heading}</span>
|
|
9062
|
+
${this.badgeLabel ? html`<axebow-badge bgColor=${bg} textColor=${color}>${this.badgeLabel}</axebow-badge>` : ""}
|
|
9063
|
+
</div>
|
|
9064
|
+
<div class="w-full text-(--axebow-gray)">${this.description}</div>
|
|
9065
|
+
</div>
|
|
9066
|
+
|
|
9067
|
+
${this.criticality === "low" ? this._renderLowNote() : this._renderButtons()}
|
|
9068
|
+
</div>
|
|
9069
|
+
`;
|
|
9070
|
+
}
|
|
9071
|
+
_renderLowNote() {
|
|
9072
|
+
return html`
|
|
9073
|
+
<div
|
|
9074
|
+
class="w-91 h-11 shrink-0 box-border rounded-md py-1 px-3 flex items-center text-(--axebow-gray)"
|
|
9075
|
+
style="background-color: var(--axebow-base);"
|
|
9076
|
+
>
|
|
9077
|
+
${this.lowNoteText}
|
|
9078
|
+
</div>
|
|
9079
|
+
`;
|
|
9080
|
+
}
|
|
9081
|
+
_renderButtons() {
|
|
9082
|
+
if (!this.buttons.length) return "";
|
|
9083
|
+
return html`
|
|
9084
|
+
<div class="flex flex-row items-center gap-4 shrink-0">
|
|
9085
|
+
${this.buttons.map((button) => html`
|
|
9086
|
+
<axebow-button
|
|
9087
|
+
variant=${button.variant ?? "primary"}
|
|
9088
|
+
?outline=${button.outline ?? false}
|
|
9089
|
+
@click=${() => button.onClick?.()}
|
|
9090
|
+
>
|
|
9091
|
+
${button.label}
|
|
9092
|
+
${button.iconName ? html`<axebow-icon
|
|
9093
|
+
slot="suffix"
|
|
9094
|
+
iconName=${button.iconName}
|
|
9095
|
+
iconColor=${button.iconColor ?? "currentColor"}
|
|
9096
|
+
></axebow-icon>` : ""}
|
|
9097
|
+
</axebow-button>
|
|
9098
|
+
`)}
|
|
9099
|
+
</div>
|
|
9100
|
+
`;
|
|
9101
|
+
}
|
|
9102
|
+
};
|
|
9103
|
+
__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "criticality", void 0);
|
|
9104
|
+
__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "heading", void 0);
|
|
9105
|
+
__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "badgeLabel", void 0);
|
|
9106
|
+
__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "description", void 0);
|
|
9107
|
+
__decorate([property({ type: Array })], AxebowCallToActionRow.prototype, "buttons", void 0);
|
|
9108
|
+
__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "lowNoteText", void 0);
|
|
9109
|
+
AxebowCallToActionRow = __decorate([customElement("axebow-call-to-action-row")], AxebowCallToActionRow);
|
|
9110
|
+
//#endregion
|
|
8973
9111
|
//#region src/components/axebow-tenant-card/axebow-tenant-card.ts
|
|
8974
9112
|
var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
8975
9113
|
constructor(..._args) {
|
|
@@ -8992,6 +9130,9 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
|
8992
9130
|
this.invitedNoticeText = "";
|
|
8993
9131
|
this.showNoAccountsWarning = false;
|
|
8994
9132
|
this.noAccountsWarningText = "";
|
|
9133
|
+
this.showCallToActionIssues = false;
|
|
9134
|
+
this.callToActionIssuesText = "";
|
|
9135
|
+
this.callToActionCriticality = "low";
|
|
8995
9136
|
this.contentState = "table";
|
|
8996
9137
|
this.invitationText = "";
|
|
8997
9138
|
this.emptyTextPrefix = "";
|
|
@@ -9125,7 +9266,20 @@ var AxebowTenantCard = class AxebowTenantCard extends LitElement {
|
|
|
9125
9266
|
${this.showInvitedNotice ? html`<span class="text-base text-black">${this.invitedNoticeText}</span>` : this.showNoAccountsWarning ? html`<span class="flex items-center gap-1 text-base text-black">
|
|
9126
9267
|
<axebow-icon iconName="warning" iconColor="var(--axebow-warning)" size="md"></axebow-icon>
|
|
9127
9268
|
${this.noAccountsWarningText}
|
|
9128
|
-
</span>` :
|
|
9269
|
+
</span>` : this.showCallToActionIssues ? html`<span
|
|
9270
|
+
class="flex items-center gap-1 text-base cursor-pointer"
|
|
9271
|
+
style="color: ${CRITICALITY_STYLES[this.callToActionCriticality].color};"
|
|
9272
|
+
@click=${() => this.onCallToActionClick?.()}
|
|
9273
|
+
>
|
|
9274
|
+
<div class="w-5 h-5 shrink-0 flex items-center justify-center">
|
|
9275
|
+
<axebow-icon
|
|
9276
|
+
iconName=${CRITICALITY_STYLES[this.callToActionCriticality].iconName}
|
|
9277
|
+
iconColor=${CRITICALITY_STYLES[this.callToActionCriticality].color}
|
|
9278
|
+
size="md"
|
|
9279
|
+
></axebow-icon>
|
|
9280
|
+
</div>
|
|
9281
|
+
${this.callToActionIssuesText}
|
|
9282
|
+
</span>` : ""}
|
|
9129
9283
|
</div>
|
|
9130
9284
|
|
|
9131
9285
|
<div class="w-full">
|
|
@@ -9158,6 +9312,10 @@ __decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showInvit
|
|
|
9158
9312
|
__decorate([property({ type: String })], AxebowTenantCard.prototype, "invitedNoticeText", void 0);
|
|
9159
9313
|
__decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showNoAccountsWarning", void 0);
|
|
9160
9314
|
__decorate([property({ type: String })], AxebowTenantCard.prototype, "noAccountsWarningText", void 0);
|
|
9315
|
+
__decorate([property({ type: Boolean })], AxebowTenantCard.prototype, "showCallToActionIssues", void 0);
|
|
9316
|
+
__decorate([property({ type: String })], AxebowTenantCard.prototype, "callToActionIssuesText", void 0);
|
|
9317
|
+
__decorate([property({ type: String })], AxebowTenantCard.prototype, "callToActionCriticality", void 0);
|
|
9318
|
+
__decorate([property({ attribute: false })], AxebowTenantCard.prototype, "onCallToActionClick", void 0);
|
|
9161
9319
|
__decorate([property({ type: String })], AxebowTenantCard.prototype, "contentState", void 0);
|
|
9162
9320
|
__decorate([property({ type: String })], AxebowTenantCard.prototype, "invitationText", void 0);
|
|
9163
9321
|
__decorate([property({ type: String })], AxebowTenantCard.prototype, "emptyTextPrefix", void 0);
|
|
@@ -13568,143 +13726,42 @@ __decorate([property()], AxebowModal.prototype, "description", void 0);
|
|
|
13568
13726
|
__decorate([state()], AxebowModal.prototype, "_hasFooterSlotContent", void 0);
|
|
13569
13727
|
AxebowModal = __decorate([customElement("axebow-modal")], AxebowModal);
|
|
13570
13728
|
//#endregion
|
|
13571
|
-
//#region src/components/axebow-
|
|
13572
|
-
var
|
|
13573
|
-
constructor(..._args) {
|
|
13574
|
-
super(..._args);
|
|
13575
|
-
this.bgColor = "var(--axebow-base)";
|
|
13576
|
-
this.textColor = "var(--axebow-secondary)";
|
|
13577
|
-
}
|
|
13578
|
-
static {
|
|
13579
|
-
this.styles = [unsafeCSS(tailwind_default), css`
|
|
13580
|
-
:host {
|
|
13581
|
-
display: inline-block;
|
|
13582
|
-
}
|
|
13583
|
-
`];
|
|
13584
|
-
}
|
|
13585
|
-
render() {
|
|
13586
|
-
return html`
|
|
13587
|
-
<div
|
|
13588
|
-
class="inline-flex items-center justify-center px-2 py-px rounded border border-solid text-xs leading-3 font-semibold whitespace-nowrap"
|
|
13589
|
-
style="background-color: ${this.bgColor}; color: ${this.textColor}; border-color: ${this.textColor};"
|
|
13590
|
-
>
|
|
13591
|
-
<slot></slot>
|
|
13592
|
-
</div>
|
|
13593
|
-
`;
|
|
13594
|
-
}
|
|
13595
|
-
};
|
|
13596
|
-
__decorate([property({ type: String })], AxebowBadge.prototype, "bgColor", void 0);
|
|
13597
|
-
__decorate([property({ type: String })], AxebowBadge.prototype, "textColor", void 0);
|
|
13598
|
-
AxebowBadge = __decorate([customElement("axebow-badge")], AxebowBadge);
|
|
13599
|
-
//#endregion
|
|
13600
|
-
//#region src/components/axebow-call-to-action-row/axebow-call-to-action-row.ts
|
|
13601
|
-
var CRITICALITY_STYLES = {
|
|
13602
|
-
critical: {
|
|
13603
|
-
bg: "var(--axebow-critical-bg)",
|
|
13604
|
-
color: "var(--axebow-error)",
|
|
13605
|
-
iconName: "error"
|
|
13606
|
-
},
|
|
13607
|
-
high: {
|
|
13608
|
-
bg: "var(--axebow-high-bg)",
|
|
13609
|
-
color: "var(--axebow-dark-yellow)",
|
|
13610
|
-
iconName: "warning"
|
|
13611
|
-
},
|
|
13612
|
-
low: {
|
|
13613
|
-
bg: "var(--axebow-base)",
|
|
13614
|
-
color: "var(--axebow-secondary)",
|
|
13615
|
-
iconName: "info"
|
|
13616
|
-
}
|
|
13617
|
-
};
|
|
13618
|
-
var AxebowCallToActionRow = class AxebowCallToActionRow extends LitElement {
|
|
13619
|
-
constructor(..._args) {
|
|
13620
|
-
super(..._args);
|
|
13621
|
-
this.criticality = "low";
|
|
13622
|
-
this.heading = "";
|
|
13623
|
-
this.badgeLabel = "";
|
|
13624
|
-
this.description = "";
|
|
13625
|
-
this.buttons = [];
|
|
13626
|
-
this.lowNoteText = "";
|
|
13627
|
-
}
|
|
13628
|
-
static {
|
|
13629
|
-
this.styles = [
|
|
13630
|
-
unsafeCSS(tailwind_default),
|
|
13631
|
-
axebowTheme,
|
|
13632
|
-
css`
|
|
13633
|
-
:host {
|
|
13634
|
-
display: block;
|
|
13635
|
-
width: 100%;
|
|
13636
|
-
}
|
|
13637
|
-
`
|
|
13638
|
-
];
|
|
13639
|
-
}
|
|
13640
|
-
render() {
|
|
13641
|
-
const { bg, color, iconName } = CRITICALITY_STYLES[this.criticality] ?? CRITICALITY_STYLES.low;
|
|
13642
|
-
return html`
|
|
13643
|
-
<div class="w-full box-border border-t border-solid border-(--axebow-table-header-border) bg-white p-4 flex flex-row items-center gap-4">
|
|
13644
|
-
<div class="w-10 h-10 rounded-md shrink-0 flex items-center justify-center" style="background-color: ${bg};">
|
|
13645
|
-
<div class="w-6 h-6 flex items-center justify-center">
|
|
13646
|
-
<axebow-icon iconName=${iconName} iconColor=${color} size="2xl"></axebow-icon>
|
|
13647
|
-
</div>
|
|
13648
|
-
</div>
|
|
13649
|
-
|
|
13650
|
-
<div class="flex-1 min-w-0 flex flex-col gap-1">
|
|
13651
|
-
<div class="w-full flex flex-row items-center gap-2">
|
|
13652
|
-
<span class="text-base font-semibold truncate">${this.heading}</span>
|
|
13653
|
-
${this.badgeLabel ? html`<axebow-badge bgColor=${bg} textColor=${color}>${this.badgeLabel}</axebow-badge>` : ""}
|
|
13654
|
-
</div>
|
|
13655
|
-
<div class="w-full text-(--axebow-gray)">${this.description}</div>
|
|
13656
|
-
</div>
|
|
13657
|
-
|
|
13658
|
-
${this.criticality === "low" ? this._renderLowNote() : this._renderButtons()}
|
|
13659
|
-
</div>
|
|
13660
|
-
`;
|
|
13661
|
-
}
|
|
13662
|
-
_renderLowNote() {
|
|
13663
|
-
return html`
|
|
13664
|
-
<div
|
|
13665
|
-
class="w-91 h-11 shrink-0 box-border rounded-md py-1 px-3 flex items-center text-(--axebow-gray)"
|
|
13666
|
-
style="background-color: var(--axebow-base);"
|
|
13667
|
-
>
|
|
13668
|
-
${this.lowNoteText}
|
|
13669
|
-
</div>
|
|
13670
|
-
`;
|
|
13671
|
-
}
|
|
13672
|
-
_renderButtons() {
|
|
13673
|
-
if (!this.buttons.length) return "";
|
|
13674
|
-
return html`
|
|
13675
|
-
<div class="flex flex-row items-center gap-4 shrink-0">
|
|
13676
|
-
${this.buttons.map((button) => html`
|
|
13677
|
-
<axebow-button
|
|
13678
|
-
variant=${button.variant ?? "primary"}
|
|
13679
|
-
?outline=${button.outline ?? false}
|
|
13680
|
-
@click=${() => button.onClick?.()}
|
|
13681
|
-
>
|
|
13682
|
-
${button.label}
|
|
13683
|
-
${button.iconName ? html`<axebow-icon
|
|
13684
|
-
slot="suffix"
|
|
13685
|
-
iconName=${button.iconName}
|
|
13686
|
-
iconColor=${button.iconColor ?? "currentColor"}
|
|
13687
|
-
></axebow-icon>` : ""}
|
|
13688
|
-
</axebow-button>
|
|
13689
|
-
`)}
|
|
13690
|
-
</div>
|
|
13691
|
-
`;
|
|
13692
|
-
}
|
|
13693
|
-
};
|
|
13694
|
-
__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "criticality", void 0);
|
|
13695
|
-
__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "heading", void 0);
|
|
13696
|
-
__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "badgeLabel", void 0);
|
|
13697
|
-
__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "description", void 0);
|
|
13698
|
-
__decorate([property({ type: Array })], AxebowCallToActionRow.prototype, "buttons", void 0);
|
|
13699
|
-
__decorate([property({ type: String })], AxebowCallToActionRow.prototype, "lowNoteText", void 0);
|
|
13700
|
-
AxebowCallToActionRow = __decorate([customElement("axebow-call-to-action-row")], AxebowCallToActionRow);
|
|
13701
|
-
//#endregion
|
|
13702
|
-
//#region src/components/axebow-call-to-action-feature/axebow-call-to-action-feature.ts
|
|
13729
|
+
//#region src/components/axebow-call-to-action-row/call-to-action-notification.ts
|
|
13730
|
+
var DEFAULT_LOW_NOTE_TEXT = "No action needed";
|
|
13703
13731
|
var BUTTON_TYPE_TO_VARIANT = {
|
|
13704
13732
|
primary: "primary",
|
|
13705
13733
|
secondary: "tertiary",
|
|
13706
13734
|
text: "text"
|
|
13707
13735
|
};
|
|
13736
|
+
function getHighestCriticality(notifications) {
|
|
13737
|
+
if (notifications.some((n) => n.criticality === "critical")) return "critical";
|
|
13738
|
+
if (notifications.some((n) => n.criticality === "high")) return "high";
|
|
13739
|
+
return "low";
|
|
13740
|
+
}
|
|
13741
|
+
function getCtaHeading(notification) {
|
|
13742
|
+
return (notification.info_content?.code || notification.subtype).replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
|
13743
|
+
}
|
|
13744
|
+
function getCtaDescription(notification) {
|
|
13745
|
+
return notification.info_content?.message ?? "";
|
|
13746
|
+
}
|
|
13747
|
+
function getCtaBadgeLabel(notification) {
|
|
13748
|
+
return notification.criticality.charAt(0).toUpperCase() + notification.criticality.slice(1);
|
|
13749
|
+
}
|
|
13750
|
+
function buildCtaButtons(notification, dispatch) {
|
|
13751
|
+
return (notification.actions ?? []).map((action) => ({
|
|
13752
|
+
label: action.label,
|
|
13753
|
+
variant: BUTTON_TYPE_TO_VARIANT[action.buttonType] ?? "primary",
|
|
13754
|
+
outline: action.outlined,
|
|
13755
|
+
iconName: action.icon,
|
|
13756
|
+
iconColor: action.iconColor,
|
|
13757
|
+
onClick: () => dispatch({
|
|
13758
|
+
notification,
|
|
13759
|
+
action
|
|
13760
|
+
})
|
|
13761
|
+
}));
|
|
13762
|
+
}
|
|
13763
|
+
//#endregion
|
|
13764
|
+
//#region src/components/axebow-call-to-action-feature/axebow-call-to-action-feature.ts
|
|
13708
13765
|
var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitElement {
|
|
13709
13766
|
constructor(..._args) {
|
|
13710
13767
|
super(..._args);
|
|
@@ -13726,37 +13783,12 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
|
|
|
13726
13783
|
];
|
|
13727
13784
|
}
|
|
13728
13785
|
get _highestCriticality() {
|
|
13729
|
-
|
|
13730
|
-
if (this.callToActions.some((n) => n.criticality === "high")) return "high";
|
|
13731
|
-
return "low";
|
|
13786
|
+
return getHighestCriticality(this.callToActions);
|
|
13732
13787
|
}
|
|
13733
13788
|
_toggle() {
|
|
13734
13789
|
if (this.callToActions.length === 0) return;
|
|
13735
13790
|
this.expanded = !this.expanded;
|
|
13736
13791
|
}
|
|
13737
|
-
_heading(notification) {
|
|
13738
|
-
return notification.subtype.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
|
|
13739
|
-
}
|
|
13740
|
-
_badgeLabel(notification) {
|
|
13741
|
-
return notification.criticality.charAt(0).toUpperCase() + notification.criticality.slice(1);
|
|
13742
|
-
}
|
|
13743
|
-
_buttons(notification) {
|
|
13744
|
-
return (notification.actions ?? []).map((action) => ({
|
|
13745
|
-
label: action.label,
|
|
13746
|
-
variant: BUTTON_TYPE_TO_VARIANT[action.buttonType] ?? "primary",
|
|
13747
|
-
outline: action.outlined,
|
|
13748
|
-
iconName: action.icon,
|
|
13749
|
-
iconColor: action.iconColor,
|
|
13750
|
-
onClick: () => this.dispatchEvent(new CustomEvent("cta-action", {
|
|
13751
|
-
detail: {
|
|
13752
|
-
notification,
|
|
13753
|
-
action
|
|
13754
|
-
},
|
|
13755
|
-
bubbles: true,
|
|
13756
|
-
composed: true
|
|
13757
|
-
}))
|
|
13758
|
-
}));
|
|
13759
|
-
}
|
|
13760
13792
|
render() {
|
|
13761
13793
|
const { color: criticalityColor, iconName } = CRITICALITY_STYLES[this._highestCriticality];
|
|
13762
13794
|
const chevronIconName = this.expanded ? "keyboard_arrow_down" : "chevron_right";
|
|
@@ -13800,11 +13832,15 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
|
|
|
13800
13832
|
${this.callToActions.map((notification) => html`
|
|
13801
13833
|
<axebow-call-to-action-row
|
|
13802
13834
|
criticality=${notification.criticality}
|
|
13803
|
-
heading=${
|
|
13804
|
-
badgeLabel=${
|
|
13805
|
-
description=${
|
|
13806
|
-
lowNoteText=${
|
|
13807
|
-
.buttons=${this.
|
|
13835
|
+
heading=${getCtaHeading(notification)}
|
|
13836
|
+
badgeLabel=${getCtaBadgeLabel(notification)}
|
|
13837
|
+
description=${getCtaDescription(notification)}
|
|
13838
|
+
lowNoteText=${DEFAULT_LOW_NOTE_TEXT}
|
|
13839
|
+
.buttons=${buildCtaButtons(notification, (detail) => this.dispatchEvent(new CustomEvent("cta-action", {
|
|
13840
|
+
detail,
|
|
13841
|
+
bubbles: true,
|
|
13842
|
+
composed: true
|
|
13843
|
+
})))}
|
|
13808
13844
|
></axebow-call-to-action-row>
|
|
13809
13845
|
`)}
|
|
13810
13846
|
</div>
|
|
@@ -13851,12 +13887,16 @@ var AxebowCtaDialog = class AxebowCtaDialog extends LitElement {
|
|
|
13851
13887
|
<div class="flex flex-col gap-2 p-6">
|
|
13852
13888
|
${this.notifications.map((notification) => html`
|
|
13853
13889
|
<axebow-call-to-action-row
|
|
13854
|
-
criticality=${
|
|
13855
|
-
heading=${
|
|
13856
|
-
badgeLabel=${
|
|
13857
|
-
description=${
|
|
13858
|
-
lowNoteText=${
|
|
13859
|
-
.buttons=${notification
|
|
13890
|
+
criticality=${notification.criticality}
|
|
13891
|
+
heading=${getCtaHeading(notification)}
|
|
13892
|
+
badgeLabel=${getCtaBadgeLabel(notification)}
|
|
13893
|
+
description=${getCtaDescription(notification)}
|
|
13894
|
+
lowNoteText=${DEFAULT_LOW_NOTE_TEXT}
|
|
13895
|
+
.buttons=${buildCtaButtons(notification, (detail) => this.dispatchEvent(new CustomEvent("cta-action", {
|
|
13896
|
+
detail,
|
|
13897
|
+
bubbles: true,
|
|
13898
|
+
composed: true
|
|
13899
|
+
})))}
|
|
13860
13900
|
></axebow-call-to-action-row>
|
|
13861
13901
|
`)}
|
|
13862
13902
|
</div>
|
|
@@ -13878,6 +13918,6 @@ __decorate([property({ type: Array })], AxebowCtaDialog.prototype, "notification
|
|
|
13878
13918
|
__decorate([property({ attribute: false })], AxebowCtaDialog.prototype, "onClose", void 0);
|
|
13879
13919
|
AxebowCtaDialog = __decorate([customElement("axebow-cta-dialog")], AxebowCtaDialog);
|
|
13880
13920
|
//#endregion
|
|
13881
|
-
export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBadge, AxebowBanner, AxebowBaseCard, AxebowBoxSection, AxebowBreadcrumbHeader, AxebowButton, AxebowCallToActionFeature, AxebowCallToActionRow, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowCopyBox, AxebowCtaDialog, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDivider, AxebowDragDropUploadFile, AxebowDraggableService, AxebowEmptyState, AxebowExpandableCard, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowFormPanelField, AxebowGettingStartedCard, AxebowGraph, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowInstancesTable, AxebowLimitsCounter, AxebowManageHyperlinks, AxebowMarketplaceCard, AxebowModal, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowObservabilityContainer, AxebowPill, AxebowPlanSelectField, AxebowProgressBar, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowRefreshPeriodPanel, AxebowRegistrySelector, AxebowResourceBar, AxebowResourceBoxForm, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleCard, AxebowRoleContainerDropdown, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSearchBarFilters, AxebowSelectInput, AxebowSelectInputWithDivider, AxebowSelectorCard, AxebowSelectorSlider, AxebowServiceDetailHeader, AxebowServicesPanel, AxebowSidebar, AxebowStatus, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTabsSubmenu, AxebowTagsInput, AxebowTenantCard, AxebowTenantResourceTable, AxebowTenantsTable, AxebowTextInput, AxebowTimeRangePanel, AxebowTooltip, AxebowUndeployCard, AxebowUnderlineTabSelector, AxebowUsageTooltip, CRITICALITY_STYLES, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, TableChart, axebowTheme, buildAddButton, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon };
|
|
13921
|
+
export { AxebowActionsFooter, AxebowAdjustmentResourcesCounter, AxebowAlert, AxebowBadge, AxebowBanner, AxebowBaseCard, AxebowBoxSection, AxebowBreadcrumbHeader, AxebowButton, AxebowCallToActionFeature, AxebowCallToActionRow, AxebowCardActionBanner, AxebowCardAttentionBanner, AxebowCardCloudLogo, AxebowCardFilter, AxebowCardFilterItem, AxebowCardFooter, AxebowCardHeader, AxebowCardResourceRow, AxebowCardResourceTable, AxebowCardSpecialLink, AxebowCardStatItem, AxebowCardStatsRow, AxebowCardStatus, AxebowCardTableHeader, AxebowCardVersionSelector, AxebowCarouselInput, AxebowCarouselSelectorItem, AxebowCarouselSelectorTenant, AxebowChannelConfigPanel, AxebowCheckboxInput, AxebowCollaboratorsDialog, AxebowCopyBox, AxebowCtaDialog, AxebowDeployCard, AxebowDeploySummary, AxebowDialog, AxebowDivider, AxebowDragDropUploadFile, AxebowDraggableService, AxebowEmptyState, AxebowExpandableCard, AxebowExpandableHeader, AxebowFilterBar, AxebowFooter, AxebowFormPanelField, AxebowGettingStartedCard, AxebowGraph, AxebowHeader, AxebowHelpBubble, AxebowIcon, AxebowInfrastructureCard, AxebowInput, AxebowInputBase, AxebowInstancesTable, AxebowLimitsCounter, AxebowManageHyperlinks, AxebowMarketplaceCard, AxebowModal, AxebowModalsConfirmation, AxebowMoreActions, AxebowNumberCard, AxebowNumbersSection, AxebowNumericInput, AxebowObservabilityContainer, AxebowPill, AxebowPlanSelectField, AxebowProgressBar, AxebowProvidersInput, AxebowQuickTipButton, AxebowQuickTipSection, AxebowRefreshPeriodPanel, AxebowRegistrySelector, AxebowResourceBar, AxebowResourceBoxForm, AxebowResourceCard, AxebowResourceLimitInput, AxebowResourceLimitsPanel, AxebowResourcesCounter, AxebowRoleCard, AxebowRoleContainerDropdown, AxebowRoleTooltip, AxebowRuntimeZipDialog, AxebowSearch, AxebowSearchBarFilters, AxebowSelectInput, AxebowSelectInputWithDivider, AxebowSelectorCard, AxebowSelectorSlider, AxebowServiceDetailHeader, AxebowServicesPanel, AxebowSidebar, AxebowStatus, AxebowStepHeader, AxebowSummaryCard, AxebowSummaryFlavors, AxebowSummaryKeyValue, AxebowSummaryLimits, AxebowSummaryStep, AxebowSummaryStepHeader, AxebowSwitch, AxebowSwitchInput, AxebowTabSelector, AxebowTabsSubmenu, AxebowTagsInput, AxebowTenantCard, AxebowTenantResourceTable, AxebowTenantsTable, AxebowTextInput, AxebowTimeRangePanel, AxebowTooltip, AxebowUndeployCard, AxebowUnderlineTabSelector, AxebowUsageTooltip, CRITICALITY_STYLES, CustomHomePageBody, DEFAULT_ADD_DIALOG_LABELS, DEFAULT_LOW_NOTE_TEXT, DeployModalComponent, DeployModalFooter, DeployModalHeader, DeployPageBody, STATUS_COLORS, TableChart, axebowTheme, buildAddButton, buildCtaButtons, buildExternalNodeContent, buildMainNodeContent, createElement, createIcon, getCtaBadgeLabel, getCtaDescription, getCtaHeading, getHighestCriticality };
|
|
13882
13922
|
|
|
13883
13923
|
//# sourceMappingURL=index.js.map
|