@operato/popup - npm Package Compare versions

Comparing version 7.0.43 to 7.0.46

dist/src/ox-popup.d.ts

@@ -19,2 +19,3 @@ import { LitElement } from 'lit';
     preventCloseOnBlur: boolean;
+    backdrop: boolean;
     private lastActive;
@@ -48,4 +49,5 @@ protected removeAfterUse: boolean;
      * @property {boolean} preventCloseOnBlur Flag to prevent closing the popup on blur
+     * @property {boolean} backdrop If true, a semi-transparent background will be applied behind the popup, dimming the rest of the page.
      */
-    static open({ template, top, left, right, bottom, width, height, parent, style, preventCloseOnBlur }: {
+    static open({ template, top, left, right, bottom, width, height, parent, style, preventCloseOnBlur, backdrop }: {
         template: unknown;
@@ -61,2 +63,3 @@ top?: number;
         preventCloseOnBlur?: boolean;
+        backdrop?: boolean;
     }): OxPopup;
@@ -63,0 +66,0 @@ /**

dist/src/ox-popup.js

 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { render } from 'lit-html';
@@ -20,2 +20,3 @@ import { customElement, property } from 'lit/decorators.js';
         this.preventCloseOnBlur = false;
+        this.backdrop = false;
         this.lastActive = document.activeElement;
@@ -91,6 +92,19 @@ this.removeAfterUse = false;
       }
+
+      #backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: black;
+        opacity: 0.5;
+      }
     `
     ]; }
     render() {
-        return html `<slot />`;
+        return html `
+      ${this.backdrop ? html `<div id="backdrop" @click=${() => this.close()}></div>` : nothing}
+      <slot></slot>
+    `;
     }
@@ -125,4 +139,5 @@ connectedCallback() {
      * @property {boolean} preventCloseOnBlur Flag to prevent closing the popup on blur
+     * @property {boolean} backdrop If true, a semi-transparent background will be applied behind the popup, dimming the rest of the page.
      */
-    static open({ template, top, left, right, bottom, width, height, parent, style, preventCloseOnBlur }) {
+    static open({ template, top, left, right, bottom, width, height, parent, style, preventCloseOnBlur, backdrop }) {
         const target = document.createElement('ox-popup');
@@ -132,2 +147,5 @@ if (preventCloseOnBlur) {
         }
+        if (backdrop) {
+            target.backdrop = backdrop;
+        }
         if (style) {
@@ -298,2 +316,5 @@ target.style.cssText = style;
 ], OxPopup.prototype, "preventCloseOnBlur", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'backdrop' })
+], OxPopup.prototype, "backdrop", void 0);
 OxPopup = __decorate([
@@ -300,0 +321,0 @@ customElement('ox-popup')

dist/stories/ox-popup.stories.js

@@ -16,2 +16,3 @@ import '@material/web/all.js';
         left: e.offsetX,
+        backdrop: true,
         parent: e.target
@@ -18,0 +19,0 @@ });

package.json

@@ -5,3 +5,3 @@ {
   "author": "heartyoh",
-  "version": "7.0.43",
+  "version": "7.0.46",
   "main": "dist/src/index.js",
@@ -104,3 +104,3 @@ "module": "dist/src/index.js",
   },
-  "gitHead": "e397910b22a569c393598ae6feab9b799942d431"
+  "gitHead": "5892b07f7a48da54dff8c13c1edc9e1c19c54cfd"
 }

src/ox-popup.ts

@@ -1,2 +0,2 @@
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, nothing } from 'lit'
 import { render } from 'lit-html'
@@ -52,2 +52,12 @@ import { customElement, property, state } from 'lit/decorators.js'
       }
+
+      #backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: black;
+        opacity: 0.5;
+      }
     `
@@ -57,2 +67,3 @@ ]
   @property({ type: Boolean, attribute: 'prevent-close-on-blur' }) preventCloseOnBlur: boolean = false
+  @property({ type: Boolean, attribute: 'backdrop' }) backdrop: boolean = false
 
@@ -63,3 +74,6 @@ private lastActive: HTMLElement = document.activeElement as HTMLElement
   render() {
-    return html`<slot />`
+    return html`
+      ${this.backdrop ? html`<div id="backdrop" @click=${() => this.close()}></div>` : nothing}
+      <slot></slot>
+    `
   }
@@ -151,2 +165,3 @@
    * @property {boolean} preventCloseOnBlur Flag to prevent closing the popup on blur
+   * @property {boolean} backdrop If true, a semi-transparent background will be applied behind the popup, dimming the rest of the page.
    */
@@ -163,3 +178,4 @@ static open({
     style,
-    preventCloseOnBlur
+    preventCloseOnBlur,
+    backdrop
   }: {
@@ -176,2 +192,3 @@ template: unknown
     preventCloseOnBlur?: boolean
+    backdrop?: boolean
   }): OxPopup {
@@ -183,2 +200,6 @@ const target = document.createElement('ox-popup') as OxPopup
 
+    if (backdrop) {
+      target.backdrop = backdrop
+    }
+
     if (style) {
@@ -185,0 +206,0 @@ target.style.cssText = style

stories/ox-popup.stories.ts

@@ -28,2 +28,3 @@ import '@material/web/all.js'
     left: e.offsetX,
+    backdrop: true,
     parent: e.target as HTMLElement
@@ -30,0 +31,0 @@ })

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

645360

increased by0.49%

Lines of code

7836

increased by0.56%

No dependency changes