@aquera/nile-visualization 1.1.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 *,

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

@@ -78,6 +78,8 @@ export declare class NileExecutiveSummary extends NileElement {
      * 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). */
@@ -91,6 +93,7 @@ export declare class NileExecutiveSummary extends NileElement {
     private lockScroll;
     private unlockScroll;
     private animatePanel;
+    private get overlayHidden();
     private animateOverlay;
     private requestClose;
     private startTyping;

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';
@@ -79,6 +80,8 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
          * 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). */
@@ -133,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;
@@ -226,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">
 
@@ -240,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"
@@ -323,6 +339,12 @@ __decorate([
 __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.1.0",
+  "version": "1.2.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",