@zywave/zui-dialog - npm Package Compare versions

Comparing version 4.0.27-pre.0 to 4.0.27-pre.1

dist/custom-elements.json

@@ -34,2 +34,18 @@ {
               "kind": "field",
+              "name": "_headerSlottedNodes",
+              "type": {
+                "text": "Array<HTMLCollection>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_footerSlottedNodes",
+              "type": {
+                "text": "Array<HTMLCollection>"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
               "name": "#instances",
@@ -176,2 +192,10 @@ "privacy": "private",
               ]
+            },
+            {
+              "kind": "method",
+              "name": "#toggleHeader"
+            },
+            {
+              "kind": "method",
+              "name": "#toggleFooter"
             }
@@ -178,0 +202,0 @@ ],

dist/zui-dialog-css.js

 import { css } from 'lit';
-export const style = css `@supports(scrollbar-width: thin){dialog{scrollbar-color:var(--zui-gray-400) var(--zui-gray-50);scrollbar-width:thin}}@supports not (scrollbar-width: thin){dialog::-webkit-scrollbar{width:7px;height:7px;background-color:var(--zui-gray-50)}dialog::-webkit-scrollbar-thumb{background-color:var(--zui-gray-400);border-radius:10px}}:host{contain:none;z-index:6000}:host dialog::backdrop{background:var(--zui-dialog-backdrop-color, rgba(0, 0, 0, 0.6))}:host .body-wrapper{display:flex;flex-direction:column;padding:1.875rem}:host .body-wrapper ::slotted(*){margin:0 0 .9375rem}:host .content{min-height:7.5rem;transition:height 1s cubic-bezier(0.25, 0.8, 0.25, 1)}:host footer{display:flex;width:100%;justify-content:flex-end}:host footer ::slotted(*){margin:1.875rem 0 0}:host([hide-backdrop]) dialog::backdrop{background:transparent}:host(:not([opened])){display:none}dialog{--dialog-margin-spacer: 1.0625rem;position:fixed;top:0;bottom:0;left:0;width:100%;max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 42.1875rem);max-height:calc(100% - var(--dialog-margin-spacer)*2);overflow-y:auto;padding:0;background:#fff;border:0;border-radius:4px;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}@media(min-width: 45em){dialog{max-height:calc(100% - (var(--dialog-margin-spacer) * 2) - 1.875rem)}}dialog:-internal-modal{position:fixed;top:0;bottom:0;max-width:calc(100% - 6px - 2em);max-height:calc(100% - 6px - 2em);overflow:auto}:host(.small) dialog{max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 29.6875rem)}:host(.large) dialog{max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 54.6875rem)}:host(.full) dialog{max-width:calc(100% - var(--dialog-margin-spacer)*2)}`;
+export const style = css `@supports(scrollbar-width: thin){dialog{scrollbar-color:var(--zui-gray-400) var(--zui-gray-50);scrollbar-width:thin}}@supports not (scrollbar-width: thin){dialog::-webkit-scrollbar{width:7px;height:7px;background-color:var(--zui-gray-50)}dialog::-webkit-scrollbar-thumb{background-color:var(--zui-gray-400);border-radius:10px}}:host{contain:none;z-index:6000}:host dialog::backdrop{background:var(--zui-dialog-backdrop-color, rgba(0, 0, 0, 0.6))}:host .body-wrapper{display:flex;flex-direction:column;padding:1.875rem}:host .header ::slotted(*),:host .footer ::slotted(*){margin-bottom:0 !important}:host .header{margin-bottom:1.25rem}:host .content{min-height:7.5rem;transition:height 1s cubic-bezier(0.25, 0.8, 0.25, 1)}:host .footer{display:flex;width:100%;justify-content:flex-end;margin-top:1.25rem}:host .footer ::slotted(div){display:flex}:host .footer ::slotted(*:last-child:not(:only-child)){margin-left:.625rem}:host .footer ::slotted(*:nth-last-child(3)){margin-right:auto}:host([hide-backdrop]) dialog::backdrop{background:transparent}:host(:not([opened])){display:none}dialog{--dialog-margin-spacer: 1.0625rem;position:fixed;top:0;bottom:0;left:0;width:100%;max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 42.1875rem);max-height:calc(100% - var(--dialog-margin-spacer)*2);overflow-y:auto;padding:0;background:#fff;border:0;border-radius:4px;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}@media(min-width: 45em){dialog{max-height:calc(100% - (var(--dialog-margin-spacer) * 2) - 1.875rem)}}dialog:-internal-modal{position:fixed;top:0;bottom:0;max-width:calc(100% - 6px - 2em);max-height:calc(100% - 6px - 2em);overflow:auto}:host(.small) dialog{max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 29.6875rem)}:host(.large) dialog{max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 54.6875rem)}:host(.full) dialog{max-width:calc(100% - var(--dialog-margin-spacer)*2)}`;
 //# sourceMappingURL=zui-dialog-css.js.map

dist/zui-dialog.d.ts

@@ -23,2 +23,4 @@ import { ZuiBaseElement } from '@zywave/zui-base';
     #private;
+    private _headerSlottedNodes;
+    private _footerSlottedNodes;
     static get styles(): import("lit").CSSResultGroup[];
@@ -25,0 +27,0 @@ /**

dist/zui-dialog.js

@@ -18,6 +18,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-var _ZuiDialogElement_instances, _a, _ZuiDialogElement_instances_1, _ZuiDialogElement_open, _ZuiDialogElement_canceled, _ZuiDialogElement_ensureDialogState, _ZuiDialogElement_dispatchOpenEvent, _ZuiDialogElement_dispatchCloseEvent, _ZuiDialogElement_footerActionHandler, _ZuiDialogElement_wasBackdropClicked;
+var _ZuiDialogElement_instances, _a, _ZuiDialogElement_instances_1, _ZuiDialogElement_open, _ZuiDialogElement_canceled, _ZuiDialogElement_ensureDialogState, _ZuiDialogElement_dispatchOpenEvent, _ZuiDialogElement_dispatchCloseEvent, _ZuiDialogElement_footerActionHandler, _ZuiDialogElement_wasBackdropClicked, _ZuiDialogElement_toggleHeader, _ZuiDialogElement_toggleFooter;
 import { ZuiBaseElement } from '@zywave/zui-base';
 import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { queryAssignedNodes } from 'lit/decorators.js';
 import { style } from './zui-dialog-css.js';
@@ -121,2 +122,4 @@ /**
         __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_ensureDialogState).call(this, __classPrivateFieldGet(this, _ZuiDialogElement_open, "f"));
+        __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_toggleHeader).call(this);
+        __classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_toggleFooter).call(this);
     }
@@ -130,4 +133,4 @@ render() {
         <article class="body-wrapper" tabindex="0">
-          <header part="header" id="dialogTitle">
-            <slot name="header"></slot>
+          <header class="header" part="header" id="dialogTitle">
+            <slot name="header" @slotchange="${__classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_toggleHeader)}"></slot>
           </header>
@@ -138,4 +141,4 @@ <div class="content" part="content" id="dialogDesc">
           </div>
-          <footer part="footer">
-            <slot name="footer" @click="${__classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_footerActionHandler)}"></slot>
+          <footer class="footer" part="footer">
+            <slot name="footer" @click="${__classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_footerActionHandler)}" @slotchange="${__classPrivateFieldGet(this, _ZuiDialogElement_instances, "m", _ZuiDialogElement_toggleFooter)}"></slot>
           </footer>
@@ -173,5 +176,29 @@ </article>
     }
+}, _ZuiDialogElement_toggleHeader = function _ZuiDialogElement_toggleHeader() {
+    const header = this.shadowRoot.querySelector('.header');
+    if (this._headerSlottedNodes.length === 0) {
+        header.style.display = 'none';
+    }
+    else if (this._headerSlottedNodes.length > 0 && header.style.display === 'none') {
+        header.style.removeProperty('display');
+    }
+    this.requestUpdate();
+}, _ZuiDialogElement_toggleFooter = function _ZuiDialogElement_toggleFooter() {
+    const footer = this.shadowRoot.querySelector('.footer');
+    if (this._footerSlottedNodes.length === 0) {
+        footer.style.display = 'none';
+    }
+    else if (this._footerSlottedNodes.length > 0 && footer.style.display === 'none') {
+        footer.style.removeProperty('display');
+    }
+    this.requestUpdate();
 };
 _ZuiDialogElement_instances_1 = { value: new Map() };
 __decorate([
+    queryAssignedNodes({ slot: 'header' })
+], ZuiDialogElement.prototype, "_headerSlottedNodes", void 0);
+__decorate([
+    queryAssignedNodes({ slot: 'footer' })
+], ZuiDialogElement.prototype, "_footerSlottedNodes", void 0);
+__decorate([
     property({ type: Boolean, reflect: true })
@@ -178,0 +205,0 @@ ], ZuiDialogElement.prototype, "opened", null);

package.json

 {
   "name": "@zywave/zui-dialog",
-  "version": "4.0.27-pre.0",
+  "version": "4.0.27-pre.1",
   "main": "dist/index.js",
@@ -28,3 +28,3 @@ "module": "dist/index.js",
   "customElements": "dist/custom-elements.json",
-  "gitHead": "2f7b09102f2c162ca30aa9fbfa58f6f90328ae3f"
+  "gitHead": "6c8629c65d61cf181d3c12de0b5b77ddf265612e"
 }

src/zui-dialog-css.js

 import { css } from 'lit';
 
-export const style = css`@supports(scrollbar-width: thin){dialog{scrollbar-color:var(--zui-gray-400) var(--zui-gray-50);scrollbar-width:thin}}@supports not (scrollbar-width: thin){dialog::-webkit-scrollbar{width:7px;height:7px;background-color:var(--zui-gray-50)}dialog::-webkit-scrollbar-thumb{background-color:var(--zui-gray-400);border-radius:10px}}:host{contain:none;z-index:6000}:host dialog::backdrop{background:var(--zui-dialog-backdrop-color, rgba(0, 0, 0, 0.6))}:host .body-wrapper{display:flex;flex-direction:column;padding:1.875rem}:host .body-wrapper ::slotted(*){margin:0 0 .9375rem}:host .content{min-height:7.5rem;transition:height 1s cubic-bezier(0.25, 0.8, 0.25, 1)}:host footer{display:flex;width:100%;justify-content:flex-end}:host footer ::slotted(*){margin:1.875rem 0 0}:host([hide-backdrop]) dialog::backdrop{background:transparent}:host(:not([opened])){display:none}dialog{--dialog-margin-spacer: 1.0625rem;position:fixed;top:0;bottom:0;left:0;width:100%;max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 42.1875rem);max-height:calc(100% - var(--dialog-margin-spacer)*2);overflow-y:auto;padding:0;background:#fff;border:0;border-radius:4px;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}@media(min-width: 45em){dialog{max-height:calc(100% - (var(--dialog-margin-spacer) * 2) - 1.875rem)}}dialog:-internal-modal{position:fixed;top:0;bottom:0;max-width:calc(100% - 6px - 2em);max-height:calc(100% - 6px - 2em);overflow:auto}:host(.small) dialog{max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 29.6875rem)}:host(.large) dialog{max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 54.6875rem)}:host(.full) dialog{max-width:calc(100% - var(--dialog-margin-spacer)*2)}`;
+export const style = css`@supports(scrollbar-width: thin){dialog{scrollbar-color:var(--zui-gray-400) var(--zui-gray-50);scrollbar-width:thin}}@supports not (scrollbar-width: thin){dialog::-webkit-scrollbar{width:7px;height:7px;background-color:var(--zui-gray-50)}dialog::-webkit-scrollbar-thumb{background-color:var(--zui-gray-400);border-radius:10px}}:host{contain:none;z-index:6000}:host dialog::backdrop{background:var(--zui-dialog-backdrop-color, rgba(0, 0, 0, 0.6))}:host .body-wrapper{display:flex;flex-direction:column;padding:1.875rem}:host .header ::slotted(*),:host .footer ::slotted(*){margin-bottom:0 !important}:host .header{margin-bottom:1.25rem}:host .content{min-height:7.5rem;transition:height 1s cubic-bezier(0.25, 0.8, 0.25, 1)}:host .footer{display:flex;width:100%;justify-content:flex-end;margin-top:1.25rem}:host .footer ::slotted(div){display:flex}:host .footer ::slotted(*:last-child:not(:only-child)){margin-left:.625rem}:host .footer ::slotted(*:nth-last-child(3)){margin-right:auto}:host([hide-backdrop]) dialog::backdrop{background:transparent}:host(:not([opened])){display:none}dialog{--dialog-margin-spacer: 1.0625rem;position:fixed;top:0;bottom:0;left:0;width:100%;max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 42.1875rem);max-height:calc(100% - var(--dialog-margin-spacer)*2);overflow-y:auto;padding:0;background:#fff;border:0;border-radius:4px;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12)}@media(min-width: 45em){dialog{max-height:calc(100% - (var(--dialog-margin-spacer) * 2) - 1.875rem)}}dialog:-internal-modal{position:fixed;top:0;bottom:0;max-width:calc(100% - 6px - 2em);max-height:calc(100% - 6px - 2em);overflow:auto}:host(.small) dialog{max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 29.6875rem)}:host(.large) dialog{max-width:min(calc(100% - (var(--dialog-margin-spacer) * 2)), 54.6875rem)}:host(.full) dialog{max-width:calc(100% - var(--dialog-margin-spacer)*2)}`;

src/zui-dialog.ts

 import { ZuiBaseElement } from '@zywave/zui-base';
 import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { queryAssignedNodes } from 'lit/decorators.js';
 import { style } from './zui-dialog-css.js';
@@ -27,2 +28,8 @@
 export class ZuiDialogElement extends ZuiBaseElement {
+  @queryAssignedNodes({ slot: 'header' })
+  private _headerSlottedNodes: Array<HTMLCollection>;
+
+  @queryAssignedNodes({ slot: 'footer' })
+  private _footerSlottedNodes: Array<HTMLCollection>;
+
   static #instances = new Map<ZuiDialogElement, boolean>();
@@ -119,2 +126,5 @@ static get styles() {
     this.#ensureDialogState(this.#open);
+
+    this.#toggleHeader();
+    this.#toggleFooter();
   }
@@ -157,2 +167,26 @@
 
+  #toggleHeader() {
+    const header: HTMLElement = this.shadowRoot.querySelector('.header');
+
+    if (this._headerSlottedNodes.length === 0) {
+      header.style.display = 'none';
+    } else if (this._headerSlottedNodes.length > 0 && header.style.display === 'none') {
+      header.style.removeProperty('display');
+    }
+
+    this.requestUpdate();
+  }
+
+  #toggleFooter() {
+    const footer: HTMLElement = this.shadowRoot.querySelector('.footer');
+
+    if (this._footerSlottedNodes.length === 0) {
+      footer.style.display = 'none';
+    } else if (this._footerSlottedNodes.length > 0 && footer.style.display === 'none') {
+      footer.style.removeProperty('display');
+    }
+
+    this.requestUpdate();
+  }
+
   render() {
@@ -165,4 +199,4 @@ return html`
         <article class="body-wrapper" tabindex="0">
-          <header part="header" id="dialogTitle">
-            <slot name="header"></slot>
+          <header class="header" part="header" id="dialogTitle">
+            <slot name="header" @slotchange="${this.#toggleHeader}"></slot>
           </header>
@@ -173,4 +207,4 @@ <div class="content" part="content" id="dialogDesc">
           </div>
-          <footer part="footer">
-            <slot name="footer" @click="${this.#footerActionHandler}"></slot>
+          <footer class="footer" part="footer">
+            <slot name="footer" @click="${this.#footerActionHandler}" @slotchange="${this.#toggleFooter}"></slot>
           </footer>
@@ -177,0 +211,0 @@ </article>

No alert changes

Improved metrics

Total package byte prevSize

103062

increased by20.16%

Lines of code

1076

increased by8.03%

No dependency changes