@aquera/nile-visualization 1.0.0 → 1.2.0

package/dist/src/nile-executive-summary/nile-executive-summary-config.d.ts

@@ -36,4 +36,6 @@ export interface NileExecutiveSummaryConfig {
     closeOnEscape?: boolean;
     /** Prevent the drawer from closing when the overlay is clicked. Default: false */
     preventOverlayClose?: boolean;
+    zIndex?: number;
+    hideOverlay?: boolean;
 }

package/dist/src/nile-executive-summary/nile-executive-summary.css.js

@@ -11,8 +11,7 @@ export const styles = css `
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
-    display: inline-block;
-    position: relative;
+    display: contents;
   }
 
   :host *,
@@ -186,6 +185,14 @@ export const styles = css `
     word-break: break-word;
   }
 
+  /* ─── Skeleton loading state ───────────────────────────────────────────── */
+
+  .es-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
 @media (forced-colors: active) {
     .es-panel {
       border: 1px solid ButtonText;

package/dist/src/nile-executive-summary/nile-executive-summary.d.ts

@@ -71,6 +71,15 @@ export declare class NileExecutiveSummary extends NileElement {
      * Can be set programmatically; use `show()` / `hide()` for animated transitions.
      */
     open: boolean;
+    /**
+     * Whether the drawer body is in a loading state. When `true`, the body renders
+     * `nile-skeleton-loader` placeholders instead of the typed summary. Toggle it
+     * off (set to `false`) once data arrives from the API — at which point the
+     * typewriter animation begins if the drawer is already open.
+     */
+    loading: boolean;
+    zIndex: number | null;
+    hideOverlay: boolean;
     /** @internal Characters revealed so far during typing. */
     private displayedText;
     /** @internal Whether typing is still in progress (drives cursor visibility). */
@@ -84,12 +93,14 @@ export declare class NileExecutiveSummary extends NileElement {
     private lockScroll;
     private unlockScroll;
     private animatePanel;
+    private get overlayHidden();
     private animateOverlay;
     private requestClose;
     private startTyping;
     private stopTyping;
     /** Opens the drawer with animation. Resolves when the animation completes. */
     show(): Promise<void>;
+    updated(changed: Map<string, unknown>): void;
     /** Closes the drawer with animation. Resolves when the animation completes. */
     hide(): Promise<void>;
     render(): TemplateResult;

package/dist/src/nile-executive-summary/nile-executive-summary.js

@@ -7,6 +7,7 @@
 import { __decorate } from "tslib";
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import NileElement from '../internal/nile-element.js';
@@ -72,6 +73,15 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
          * Can be set programmatically; use `show()` / `hide()` for animated transitions.
          */
         this.open = false;
+        /**
+         * Whether the drawer body is in a loading state. When `true`, the body renders
+         * `nile-skeleton-loader` placeholders instead of the typed summary. Toggle it
+         * off (set to `false`) once data arrives from the API — at which point the
+         * typewriter animation begins if the drawer is already open.
+         */
+        this.loading = false;
+        this.zIndex = null;
+        this.hideOverlay = false;
         /** @internal Characters revealed so far during typing. */
         this.displayedText = '';
         /** @internal Whether typing is still in progress (drives cursor visibility). */
@@ -126,7 +136,12 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
         const to = show ? { opacity: '1', translate: '0' } : { opacity: '0', translate: '100%' };
         await this.panel.animate([from, to], { duration: 250, easing: 'ease', fill: 'forwards' }).finished;
     }
+    get overlayHidden() {
+        return this.hideOverlay || (this.config?.hideOverlay ?? false);
+    }
     async animateOverlay(show) {
+        if (!this.overlay)
+            return;
         const from = show ? { opacity: '0' } : { opacity: '1' };
         const to = show ? { opacity: '1' } : { opacity: '0' };
         await this.overlay.animate([from, to], { duration: 250, fill: 'forwards' }).finished;
@@ -185,7 +200,13 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
         await Promise.all([this.animatePanel(true), this.animateOverlay(true)]);
         requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));
         this.emit('nile-after-show');
-        this.startTyping();
+        if (!this.loading)
+            this.startTyping();
+    }
+    updated(changed) {
+        if (changed.has('loading') && changed.get('loading') === true && !this.loading && this.open) {
+            this.startTyping();
+        }
     }
     /** Closes the drawer with animation. Resolves when the animation completes. */
     async hide() {
@@ -213,6 +234,10 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
         const buttonLabel = this.config?.buttonLabel ?? 'Executive Summary';
         const buttonVariant = this.config?.buttonVariant ?? 'primary';
         const drawerLabel = this.config?.drawerLabel ?? 'Executive Summary';
+        const resolvedZ = this.zIndex ?? this.config?.zIndex;
+        const backdropStyles = resolvedZ != null
+            ? { '--executive-summary-z-index': String(resolvedZ), zIndex: String(resolvedZ) }
+            : {};
         return html `
       <div part="base">
 
@@ -227,14 +252,18 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
         >${buttonLabel}</nile-button>
 
         <!-- Fixed backdrop: overlay + panel -->
-        <div class="es-backdrop">
+        <div class="es-backdrop" style=${styleMap(backdropStyles)}>
 
-          <div
-            part="overlay"
-            class="es-overlay"
-            @click=${() => this.requestClose('overlay')}
-            tabindex="-1"
-          ></div>
+          ${this.overlayHidden
+            ? ''
+            : html `
+                <div
+                  part="overlay"
+                  class="es-overlay"
+                  @click=${() => this.requestClose('overlay')}
+                  tabindex="-1"
+                ></div>
+              `}
 
           <div
             part="panel"
@@ -264,12 +293,24 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
             </header>
 
             <div part="body" class="es-body">
-              <div
-                class=${classMap({
-            'es-typed-text': true,
-            'es-typed-text--typing': this.isTyping,
-        })}
-              >${unsafeHTML(this.displayedText)}</div>
+              ${this.loading
+            ? html `
+                    <div part="skeleton" class="es-skeleton" aria-busy="true" aria-live="polite">
+                      <nile-skeleton-loader variant="text" width="90%"></nile-skeleton-loader>
+                      <nile-skeleton-loader variant="text" width="95%"></nile-skeleton-loader>
+                      <nile-skeleton-loader variant="text" width="80%"></nile-skeleton-loader>
+                      <nile-skeleton-loader variant="text" width="70%"></nile-skeleton-loader>
+                      <nile-skeleton-loader variant="text" width="85%"></nile-skeleton-loader>
+                    </div>
+                  `
+            : html `
+                    <div
+                      class=${classMap({
+                'es-typed-text': true,
+                'es-typed-text--typing': this.isTyping,
+            })}
+                    >${unsafeHTML(this.displayedText)}</div>
+                  `}
               <slot></slot>
             </div>
 
@@ -295,6 +336,15 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileExecutiveSummary.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileExecutiveSummary.prototype, "loading", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'z-index' })
+], NileExecutiveSummary.prototype, "zIndex", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-overlay' })
+], NileExecutiveSummary.prototype, "hideOverlay", void 0);
 __decorate([
     state()
 ], NileExecutiveSummary.prototype, "displayedText", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",