@kumori/aurora-wui-components 0.0.281-dev4205.4 → 0.0.281-dev4205.6

package/dist/components/axebow-call-to-action-feature/axebow-call-to-action-feature.d.ts

@@ -1,12 +1,30 @@
 import { LitElement } from 'lit';
-import { CallToActionButton, CallToActionCriticality } from '../axebow-call-to-action-row/axebow-call-to-action-row.js';
+import { CallToActionCriticality } from '../axebow-call-to-action-row/axebow-call-to-action-row.js';
+export interface CallToActionNotificationAction {
+    label: string;
+    buttonType: string;
+    outlined?: boolean;
+    icon?: string;
+    iconColor?: string;
+    route: string;
+}
 export interface CallToActionNotification {
-    criticality?: CallToActionCriticality;
-    heading?: string;
-    badgeLabel?: string;
-    description?: string;
-    buttons?: CallToActionButton[];
-    lowNoteText?: string;
+    type: string;
+    subtype: string;
+    info_content?: {
+        code: string;
+        message: string;
+        timestamp?: string;
+    };
+    date: string;
+    data?: any;
+    status: 'read' | 'unread';
+    notificationType: 'callToAction';
+    userError?: boolean;
+    criticality: CallToActionCriticality;
+    support?: boolean;
+    noActions?: boolean;
+    actions?: CallToActionNotificationAction[];
 }
 export declare class AxebowCallToActionFeature extends LitElement {
     callToActions: CallToActionNotification[];
@@ -16,6 +34,9 @@ export declare class AxebowCallToActionFeature extends LitElement {
     static styles: import('lit').CSSResult[];
     private get _highestCriticality();
     private _toggle;
+    private _heading;
+    private _badgeLabel;
+    private _buttons;
     render(): import('lit-html').TemplateResult<1>;
 }
 //# sourceMappingURL=axebow-call-to-action-feature.d.ts.map

package/dist/components/axebow-call-to-action-feature/axebow-call-to-action-feature.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axebow-call-to-action-feature.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-call-to-action-feature/axebow-call-to-action-feature.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAGvD,OAAO,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,2DAA2D,CAAC;AAC7H,OAAO,2DAA2D,CAAC;AAEnE,MAAM,WAAW,wBAAwB;IACvC,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,aAAa,EAAE,wBAAwB,EAAE,CAAM;IAC9C,iBAAiB,SAAmB;IACpC,eAAe,SAAM;IAExC,OAAO,CAAC,QAAQ,CAAS;IAElC,MAAM,CAAC,MAAM,4BASX;IAEF,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,CAAC,OAAO;IAIf,MAAM;CA2DP"}
+{"version":3,"file":"axebow-call-to-action-feature.d.ts","sourceRoot":"","sources":["../../../src/components/axebow-call-to-action-feature/axebow-call-to-action-feature.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAwB,MAAM,KAAK,CAAC;AAGvD,OAAO,+BAA+B,CAAC;AAEvC,OAAO,KAAK,EAAsB,uBAAuB,EAAE,MAAM,2DAA2D,CAAC;AAC7H,OAAO,2DAA2D,CAAC;AAEnE,MAAM,WAAW,8BAA8B;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE;QACb,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC1B,gBAAgB,EAAE,cAAc,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,uBAAuB,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,8BAA8B,EAAE,CAAC;CAC5C;AAQD,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,aAAa,EAAE,wBAAwB,EAAE,CAAM;IAC9C,iBAAiB,SAAmB;IACpC,eAAe,SAAM;IAExC,OAAO,CAAC,QAAQ,CAAS;IAElC,MAAM,CAAC,MAAM,4BASX;IAEF,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,QAAQ;IAkBhB,MAAM;CA4DP"}

package/dist/index.js

@@ -13640,7 +13640,7 @@ var AxebowCallToActionRow = class AxebowCallToActionRow extends LitElement {
 	render() {
 		const { bg, color, iconName } = CRITICALITY_STYLES[this.criticality] ?? CRITICALITY_STYLES.low;
 		return html`
-      <div class="w-full bg-white p-4 flex flex-row items-center gap-4">
+      <div class="w-full box-border border border-solid border-(--axebow-table-header-border) bg-white p-4 flex flex-row items-center gap-4">
         <div class="w-10 h-10 rounded-md shrink-0 flex items-center justify-center" style="background-color: ${bg};">
           <div class="w-6 h-6 flex items-center justify-center">
             <axebow-icon iconName=${iconName} iconColor=${color} size="2xl"></axebow-icon>
@@ -13700,6 +13700,11 @@ __decorate([property({ type: String })], AxebowCallToActionRow.prototype, "lowNo
 AxebowCallToActionRow = __decorate([customElement("axebow-call-to-action-row")], AxebowCallToActionRow);
 //#endregion
 //#region src/components/axebow-call-to-action-feature/axebow-call-to-action-feature.ts
+var BUTTON_TYPE_TO_VARIANT = {
+	primary: "primary",
+	secondary: "tertiary",
+	text: "text"
+};
 var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -13721,18 +13726,43 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
 		];
 	}
 	get _highestCriticality() {
-		if (this.callToActions.some((c) => c.criticality === "critical")) return "critical";
-		if (this.callToActions.some((c) => c.criticality === "high")) return "high";
+		if (this.callToActions.some((n) => n.criticality === "critical")) return "critical";
+		if (this.callToActions.some((n) => n.criticality === "high")) return "high";
 		return "low";
 	}
 	_toggle() {
+		if (this.callToActions.length === 0) return;
 		this.expanded = !this.expanded;
 	}
+	_heading(notification) {
+		return notification.subtype.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+	}
+	_badgeLabel(notification) {
+		return notification.criticality.charAt(0).toUpperCase() + notification.criticality.slice(1);
+	}
+	_buttons(notification) {
+		return (notification.actions ?? []).map((action) => ({
+			label: action.label,
+			variant: BUTTON_TYPE_TO_VARIANT[action.buttonType] ?? "primary",
+			outline: action.outlined,
+			iconName: action.icon,
+			iconColor: action.iconColor,
+			onClick: () => this.dispatchEvent(new CustomEvent("cta-action", {
+				detail: {
+					notification,
+					action
+				},
+				bubbles: true,
+				composed: true
+			}))
+		}));
+	}
 	render() {
 		const { color: criticalityColor, iconName } = CRITICALITY_STYLES[this._highestCriticality];
 		const chevronIconName = this.expanded ? "keyboard_arrow_down" : "chevron_right";
+		const hasCallToActions = this.callToActions.length > 0;
 		return html`
-      <div class="w-full flex flex-col">
+      <div class="w-full box-border border border-solid border-(--axebow-table-header-border) flex flex-col">
         <div
           class="w-full box-border py-3 px-5 flex flex-row items-center justify-between"
           style="background-color: ${this.expanded ? "var(--axebow-base)" : "var(--axebow-white)"};"
@@ -13757,7 +13787,7 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
               <axebow-icon iconName="undo" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
             </div>
             <div
-              class="w-5 h-5 shrink-0 flex items-center justify-center cursor-pointer"
+              class="w-5 h-5 shrink-0 flex items-center justify-center ${hasCallToActions ? "cursor-pointer" : "cursor-default opacity-50"}"
               @click=${() => this._toggle()}
             >
               <axebow-icon iconName=${chevronIconName} iconColor="var(--axebow-tertiary)" size="md"></axebow-icon>
@@ -13765,16 +13795,16 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
           </div>
         </div>
 
-        ${this.expanded ? html`
+        ${this.expanded && hasCallToActions ? html`
               <div class="w-full flex flex-col">
-                ${this.callToActions.map((callToAction) => html`
+                ${this.callToActions.map((notification) => html`
                     <axebow-call-to-action-row
-                      criticality=${ifDefined(callToAction.criticality)}
-                      heading=${ifDefined(callToAction.heading)}
-                      badgeLabel=${ifDefined(callToAction.badgeLabel)}
-                      description=${ifDefined(callToAction.description)}
-                      lowNoteText=${ifDefined(callToAction.lowNoteText)}
-                      .buttons=${callToAction.buttons ?? []}
+                      criticality=${notification.criticality}
+                      heading=${this._heading(notification)}
+                      badgeLabel=${this._badgeLabel(notification)}
+                      description=${ifDefined(notification.info_content?.message)}
+                      lowNoteText=${ifDefined(notification.info_content?.message)}
+                      .buttons=${this._buttons(notification)}
                     ></axebow-call-to-action-row>
                   `)}
               </div>