@bgoodman/dialog-box - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

dist/index.d.ts

@@ -29,2 +29,6 @@ declare class DialogBox extends HTMLElement {
     get cancelLbl(): string;
+    get dialogTitle(): string;
+    set dialogTitle(newTitle: string);
+    get dialogContent(): string;
+    set dialogContent(newContent: string);
     private _cancelBtnRef?;
@@ -34,2 +38,4 @@ private _confirmBtnRef?;
     private _cancelBtnClickEvent;
+    private _titleRef;
+    private _contentRef;
     private _handleCancelBtnClick;
@@ -36,0 +42,0 @@ private _handleConfirmBtnClick;

dist/index.js

@@ -1,2 +0,2 @@
-var css = ".row{display:flex;justify-content:center}.row div:not(:last-of-type){margin:0 5px 0 0}.btn,::slotted(.btn){font-size:16px;width:70px;height:30px;border:1px solid #000;border-radius:3px;text-align:center;line-height:30px;cursor:pointer}.btn:active,::slotted(.btn:active){box-shadow:inset 1px 1px grey}.primary,::slotted(.primary){background:#d4e8ea}.secondary,::slotted(.secondary){background:#ead4d4}div#dialog-title,slot[name=dialog-title]{font-weight:600;font-size:18px}div#dialog-content,slot[name=dialog-content]::slotted(div){padding:10px}:host([open=true]) #box{display:unset}:host([open=true]) #mask{display:unset;opacity:.5}:host{font-family:sans-serif}:host #box{padding:5px;height:auto;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #000;background:#fff;width:300px;max-height:300px;min-height:100px;z-index:999}:host #box,:host #mask{display:none;position:absolute}:host #mask{top:0;left:0;background-color:rgba(0,0,0,.5);opacity:0;width:100vw;height:100vh;z-index:998;transition:opacity .4s ease-out}";
+var css = ".row{display:flex;justify-content:center}.row div:not(:last-of-type){margin:0 5px 0 0}.btn,::slotted(.btn){font-size:16px;min-width:70px;height:30px;padding:0 3px;border:1px solid #000;border-radius:3px;text-align:center;line-height:30px;cursor:pointer}.btn:active,::slotted(.btn:active){box-shadow:inset 1px 1px grey}.primary,::slotted(.primary){background:#d4e8ea}.secondary,::slotted(.secondary){background:#ead4d4}div#dialog-title,slot[name=dialog-title]{font-weight:600;font-size:18px}div#dialog-content,slot[name=dialog-content]::slotted(div){padding:10px}:host([open=true]) #box{display:unset}:host([open=true]) #mask{display:unset;opacity:.5}:host{font-family:sans-serif}:host #box{padding:5px;height:auto;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #000;background:#fff;width:300px;max-height:300px;min-height:100px;z-index:999}:host #box,:host #mask{display:none;position:absolute}:host #mask{top:0;left:0;background-color:rgba(0,0,0,.5);opacity:0;width:100vw;height:100vh;z-index:998;transition:opacity .4s ease-out}";
 
@@ -35,8 +35,4 @@ class DialogBox extends HTMLElement {
                 <div id="dialog-content-wrapper">
-                    ${this.querySelector("[slot='dialog-title']") === null
-            ? `<div id="dialog-title">${(_u = opts) === null || _u === void 0 ? void 0 : _u.title}</div>` || ``
-            : `<slot name="dialog-title"></slot>`}
-                    ${this.querySelector("[slot='dialog-content']") === null
-            ? `<div id="dialog-content">${(_v = opts) === null || _v === void 0 ? void 0 : _v.content}</div>` || ``
-            : `<slot name="dialog-content"></slot>`}
+                    <slot name="dialog-title"></slot>
+                    <slot name="dialog-content"></slot>
                 </div>
@@ -55,4 +51,18 @@
         shadowRoot.appendChild(template.content.cloneNode(true));
+        if (this.querySelector("[slot='dialog-title']") === null) {
+            const title = document.createElement("div");
+            title.slot = "dialog-title";
+            title.innerText = ((_u = opts) === null || _u === void 0 ? void 0 : _u.title) || "";
+            this.appendChild(title);
+        }
+        if (this.querySelector("[slot='dialog-content']") === null) {
+            const content = document.createElement("div");
+            content.slot = "dialog-content";
+            content.innerText = ((_v = opts) === null || _v === void 0 ? void 0 : _v.content) || "";
+            this.appendChild(content);
+        }
         this._cancelBtnRef = shadowRoot.querySelector("#cancel_btn") || undefined;
         this._confirmBtnRef = shadowRoot.querySelector("#confirm_btn") || undefined;
+        this._titleRef = this.querySelector("[slot='dialog-title']");
+        this._contentRef = this.querySelector("[slot='dialog-content']");
     }
@@ -106,2 +116,14 @@ static get observedAttributes() {
     }
+    get dialogTitle() {
+        return this._titleRef.innerHTML;
+    }
+    set dialogTitle(newTitle) {
+        this._titleRef.innerText = newTitle;
+    }
+    get dialogContent() {
+        return this._contentRef.innerHTML;
+    }
+    set dialogContent(newContent) {
+        this._contentRef.innerHTML = newContent;
+    }
 }
@@ -108,0 +130,0 @@ window.customElements.define("dialog-box", DialogBox);

package.json

 {
   "name": "@bgoodman/dialog-box",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Popup dialog for displaying information.",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -92,2 +92,16 @@ # dialog-box
 
+---
+
+## Properties
+
+### `dialogTitle`
+
+Gets the current title or can be set to a new value;
+
+### `dialogContent`
+
+Gets the current content or can be set to a new value;
+
+---
+
 ## Events
@@ -94,0 +108,0 @@

src/index.ts

@@ -40,8 +40,4 @@ import style from "./index.scss";
                 <div id="dialog-content-wrapper">
-                    ${this.querySelector("[slot='dialog-title']") === null
-                        ? `<div id="dialog-title">${opts?.title}</div>` || ``
-                        : `<slot name="dialog-title"></slot>`}
-                    ${this.querySelector("[slot='dialog-content']") === null
-                        ? `<div id="dialog-content">${opts?.content}</div>` || ``
-                        : `<slot name="dialog-content"></slot>`}
+                    <slot name="dialog-title"></slot>
+                    <slot name="dialog-content"></slot>
                 </div>
@@ -63,4 +59,21 @@
 
+        if (this.querySelector("[slot='dialog-title']") === null) {
+            const title = document.createElement("div");
+            title.slot = "dialog-title";
+            title.innerText = opts?.title || "";
+            this.appendChild(title);
+        };
+
+        if (this.querySelector("[slot='dialog-content']") === null) {
+            const content = document.createElement("div");
+            content.slot = "dialog-content";
+            content.innerText = opts?.content || "";
+            this.appendChild(content);
+        }
+
         this._cancelBtnRef = shadowRoot.querySelector<HTMLDivElement>("#cancel_btn") || undefined;
         this._confirmBtnRef = shadowRoot.querySelector<HTMLDivElement>("#confirm_btn") || undefined;
+
+        this._titleRef = this.querySelector<HTMLDivElement>("[slot='dialog-title']")!;
+        this._contentRef = this.querySelector<HTMLDivElement>("[slot='dialog-content']")!;
     }
@@ -129,3 +142,19 @@
 
+    get dialogTitle(){
+        return this._titleRef.innerHTML;
+    }
 
+    set dialogTitle(newTitle: string){
+        this._titleRef.innerText = newTitle;
+    }
+
+    get dialogContent(){
+        return this._contentRef.innerHTML;
+    }
+
+    set dialogContent(newContent: string){
+        this._contentRef.innerHTML = newContent;
+    }
+
+
     private _cancelBtnRef?: HTMLDivElement;
@@ -136,2 +165,5 @@ private _confirmBtnRef?: HTMLDivElement;
 
+    private _titleRef: HTMLDivElement;
+    private _contentRef: HTMLDivElement;
+
     private _handleCancelBtnClick = (_event: MouseEvent) => {
@@ -138,0 +170,0 @@ this.dispatchEvent(this._cancelBtnClickEvent);

No alert changes

Improved metrics

Total package byte prevSize

24124

increased by9.13%

Lines of code

385

increased by15.96%

Number of lines in readme file

115

increased by13.86%

No dependency changes