@kumori/aurora-wui-components 0.0.281-dev4205.22 → 0.0.281-dev4205.24

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

@@ -7,9 +7,14 @@ export declare class AxebowCallToActionFeature extends LitElement {
     noActionsLabel: string;
     lastUpdatedText: string;
     private expanded;
+    private refreshing;
+    private static readonly REFRESH_DURATION_MS;
+    private static readonly REFRESH_SKELETON_ROWS;
     static styles: import('lit').CSSResult[];
     private get _highestCriticality();
     private _toggle;
+    private _handleRefresh;
+    private _renderSkeletonRow;
     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;AAEvD,OAAO,+BAA+B,CAAC;AAGvC,OAAO,2DAA2D,CAAC;AAUnE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6DAA6D,CAAC;AAE5G,YAAY,EAAE,wBAAwB,EAAE,8BAA8B,EAAE,MAAM,6DAA6D,CAAC;AAE5I,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,aAAa,EAAE,wBAAwB,EAAE,CAAM;IAC9C,iBAAiB,SAAmB;IACpC,cAAc,SAAuB;IACrC,eAAe,SAAM;IAExC,OAAO,CAAC,QAAQ,CAAS;IAElC,MAAM,CAAC,MAAM,4BASX;IAEF,OAAO,KAAK,mBAAmB,GAE9B;IAED,OAAO,CAAC,OAAO;IAKf,MAAM;CAkEP"}
+{"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;AAEvD,OAAO,+BAA+B,CAAC;AAGvC,OAAO,2DAA2D,CAAC;AAUnE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,6DAA6D,CAAC;AAE5G,YAAY,EAAE,wBAAwB,EAAE,8BAA8B,EAAE,MAAM,6DAA6D,CAAC;AAE5I,qBACa,yBAA0B,SAAQ,UAAU;IAC5B,aAAa,EAAE,wBAAwB,EAAE,CAAM;IAC9C,iBAAiB,SAAmB;IACpC,cAAc,SAAuB;IACrC,eAAe,SAAM;IAExC,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAQ;IACnD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,qBAAqB,CAAK;IAElD,MAAM,CAAC,MAAM,4BAuBX;IAEF,OAAO,KAAK,mBAAmB,GAE9B;IAED,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,kBAAkB;IAiB1B,MAAM;CA8EP"}

package/dist/index.js

@@ -13778,7 +13778,11 @@ function buildCtaButtons(notification, dispatch) {
 }
 //#endregion
 //#region src/components/axebow-call-to-action-feature/axebow-call-to-action-feature.ts
+var _AxebowCallToActionFeature;
 var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitElement {
+	static {
+		_AxebowCallToActionFeature = this;
+	}
 	constructor(..._args) {
 		super(..._args);
 		this.callToActions = [];
@@ -13786,6 +13790,13 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
 		this.noActionsLabel = "No action needed!";
 		this.lastUpdatedText = "";
 		this.expanded = false;
+		this.refreshing = false;
+	}
+	static {
+		this.REFRESH_DURATION_MS = 2500;
+	}
+	static {
+		this.REFRESH_SKELETON_ROWS = 4;
 	}
 	static {
 		this.styles = [
@@ -13796,6 +13807,20 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
         display: block;
         width: 100%;
       }
+
+      @keyframes cta-skeleton-pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.4;
+        }
+      }
+
+      .cta-skeleton-bar {
+        animation: cta-skeleton-pulse 1.5s ease-in-out infinite;
+      }
     `
 		];
 	}
@@ -13806,6 +13831,29 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
 		if (this.callToActions.length === 0) return;
 		this.expanded = !this.expanded;
 	}
+	_handleRefresh() {
+		if (this.refreshing) return;
+		this.refreshing = true;
+		setTimeout(() => {
+			this.refreshing = false;
+		}, _AxebowCallToActionFeature.REFRESH_DURATION_MS);
+	}
+	_renderSkeletonRow() {
+		return html`
+      <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"
+      >
+        <div
+          class="cta-skeleton-bar w-10 h-10 rounded-md shrink-0"
+          style="background-color: var(--axebow-base);"
+        ></div>
+        <div class="flex-1 min-w-0 flex flex-col gap-2">
+          <div class="cta-skeleton-bar h-4 rounded" style="background-color: var(--axebow-base); width: 40%;"></div>
+          <div class="cta-skeleton-bar h-3 rounded" style="background-color: var(--axebow-base); width: 70%;"></div>
+        </div>
+      </div>
+    `;
+	}
 	render() {
 		const { color: criticalityColor, iconName } = CRITICALITY_STYLES[this._highestCriticality];
 		const chevronIconName = this.expanded ? "keyboard_arrow_down" : "chevron_right";
@@ -13814,14 +13862,14 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
       <div class="w-full box-border border border-solid border-(--axebow-table-header-border) rounded-lg overflow-hidden 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)"};"
+          style="background-color: ${this.expanded || this.refreshing ? "var(--axebow-base)" : "var(--axebow-white)"};"
         >
           <div class="flex flex-row items-center gap-2">
             ${hasCallToActions ? html`<axebow-icon iconName=${iconName} iconColor=${criticalityColor} size="2xl"></axebow-icon>` : ""}
             <span class="text-base font-semibold">${hasCallToActions ? this.actionNeededLabel : this.noActionsLabel}</span>
             <div
               class="w-6 h-6 shrink-0 rounded-full flex items-center justify-center"
-              style="background-color: #0ECD9A;"
+              style="background-color: ${hasCallToActions ? this.expanded ? "var(--axebow-white)" : "var(--axebow-base)" : "#0ECD9A"};"
             >
               <span class="text-base">${this.callToActions.length}</span>
             </div>
@@ -13830,8 +13878,9 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
           <div class="flex flex-row items-center gap-3">
             <span class="text-sm text-(--axebow-gray) whitespace-nowrap">${this.lastUpdatedText}</span>
             <div
-              class="w-7 h-7 shrink-0 rounded-md border border-solid flex items-center justify-center"
+              class="w-7 h-7 shrink-0 rounded-md border border-solid flex items-center justify-center cursor-pointer"
               style="border-color: var(--axebow-gray);"
+              @click=${() => this._handleRefresh()}
             >
               <axebow-icon iconName="refresh" iconColor="var(--axebow-gray)" size="md"></axebow-icon>
             </div>
@@ -13843,7 +13892,12 @@ var AxebowCallToActionFeature = class AxebowCallToActionFeature extends LitEleme
           </div>
         </div>
 
-        ${this.expanded && hasCallToActions ? html`
+        ${this.refreshing ? html`
+              <div class="w-full flex flex-col">
+                ${Array.from({ length: _AxebowCallToActionFeature.REFRESH_SKELETON_ROWS }, () => this._renderSkeletonRow())}
+              </div>
+            ` : ""}
+        ${!this.refreshing && this.expanded && hasCallToActions ? html`
               <div class="w-full flex flex-col">
                 ${groupCallToActionNotifications(this.callToActions).map(({ notification, count }) => html`
                     <axebow-call-to-action-row
@@ -13871,7 +13925,8 @@ __decorate([property({ type: String })], AxebowCallToActionFeature.prototype, "a
 __decorate([property({ type: String })], AxebowCallToActionFeature.prototype, "noActionsLabel", void 0);
 __decorate([property({ type: String })], AxebowCallToActionFeature.prototype, "lastUpdatedText", void 0);
 __decorate([state()], AxebowCallToActionFeature.prototype, "expanded", void 0);
-AxebowCallToActionFeature = __decorate([customElement("axebow-call-to-action-feature")], AxebowCallToActionFeature);
+__decorate([state()], AxebowCallToActionFeature.prototype, "refreshing", void 0);
+AxebowCallToActionFeature = _AxebowCallToActionFeature = __decorate([customElement("axebow-call-to-action-feature")], AxebowCallToActionFeature);
 //#endregion
 //#region src/components/axebow-cta-dialog/axebow-cta-dialog.ts
 var AxebowCtaDialog = class AxebowCtaDialog extends LitElement {