@vandeurenglenn/lite-elements 0.3.51 → 0.3.52

package/exports/bundle/dialog.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{r as o,i as a,k as n,s as r}from"./property-DL093_VN.js";import"./elevation.js";import"./icon.js";let i=(()=>{let i,l,c,h,d,m,p,u=[s("custom-dialog")],g=[],f=r,y=[],v=[],_=[],b=[],x=[],w=[],H=[],k=[],A=[],S=[];return class extends f{static{l=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;c=[o({type:Boolean,reflect:!0})],h=[o({type:Boolean,reflect:!0})],d=[o({type:Boolean,reflect:!0,attribute:"has-actions"})],m=[o({type:Boolean,reflect:!0,attribute:"has-header"})],p=[o({type:Boolean,reflect:!0,attribute:"has-hero"})],e(this,null,c,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:e=>"open"in e,get:e=>e.open,set:(e,t)=>{e.open=t}},metadata:t},y,v),e(this,null,h,{kind:"accessor",name:"fullscreen",static:!1,private:!1,access:{has:e=>"fullscreen"in e,get:e=>e.fullscreen,set:(e,t)=>{e.fullscreen=t}},metadata:t},_,b),e(this,null,d,{kind:"accessor",name:"hasActions",static:!1,private:!1,access:{has:e=>"hasActions"in e,get:e=>e.hasActions,set:(e,t)=>{e.hasActions=t}},metadata:t},x,w),e(this,null,m,{kind:"accessor",name:"hasHeader",static:!1,private:!1,access:{has:e=>"hasHeader"in e,get:e=>e.hasHeader,set:(e,t)=>{e.hasHeader=t}},metadata:t},H,k),e(this,null,p,{kind:"accessor",name:"hasHero",static:!1,private:!1,access:{has:e=>"hasHero"in e,get:e=>e.hasHero,set:(e,t)=>{e.hasHero=t}},metadata:t},A,S),e(null,i={value:l},u,{kind:"class",name:l.name,metadata:t},null,g),l=i.value,t&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,y,void 0);get open(){return this.#e}set open(e){this.#e=e}#t=(t(this,v),t(this,_,void 0));get fullscreen(){return this.#t}set fullscreen(e){this.#t=e}#s=(t(this,b),t(this,x,void 0));get hasActions(){return this.#s}set hasActions(e){this.#s=e}#o=(t(this,w),t(this,H,void 0));get hasHeader(){return this.#o}set hasHeader(e){this.#o=e}#a=(t(this,k),t(this,A,void 0));get hasHero(){return this.#a}set hasHero(e){this.#a=e}constructor(){super(),t(this,S),this._close=this._close.bind(this)}connectedCallback(){const e=this.shadowRoot.querySelector('slot[name="actions"]');this.hasActions=0!==Array.from(e?.assignedNodes()||[]).length;let t=this.shadowRoot.querySelector('slot[name="header"]');const s=["title","header-start","header-end"];let o=0;for(;0===Array.from(t.assignedElements()).length&&o<s.length;)t=this.shadowRoot.querySelector(`slot[name="${s[o]}"]`),o+=1;this.hasHeader=0!==t.assignedElements().length;const a=this.shadowRoot.querySelector('slot[name="hero-icon"]');this.hashero=0!==Array.from(a?.assignedNodes()||[]).length}onChange(e,t){"open"===e&&(this.open?this.querySelector('[slot="actions"]')?.addEventListener("click",this._close):this.querySelector('[slot="actions"]')?.removeEventListener("click",this._close))}_close(e){const t=e.composedPath()[0];this.dispatchEvent(new CustomEvent("close",{detail:t.getAttribute("action")||"close"})),this.open=!1}static styles=[a`
+import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{r as o,i as a,k as r,s as n}from"./property-DL093_VN.js";import"./elevation.js";import"./icon.js";let i=(()=>{let i,l,c,h,m,d,p,u=[s("custom-dialog")],g=[],f=n,y=[],v=[],b=[],x=[],_=[],w=[],H=[],k=[],A=[],S=[];return class extends f{static{l=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;c=[o({type:Boolean,reflect:!0})],h=[o({type:Boolean,reflect:!0})],m=[o({type:Boolean,reflect:!0,attribute:"has-actions"})],d=[o({type:Boolean,reflect:!0,attribute:"has-header"})],p=[o({type:Boolean,reflect:!0,attribute:"has-hero"})],e(this,null,c,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:e=>"open"in e,get:e=>e.open,set:(e,t)=>{e.open=t}},metadata:t},y,v),e(this,null,h,{kind:"accessor",name:"fullscreen",static:!1,private:!1,access:{has:e=>"fullscreen"in e,get:e=>e.fullscreen,set:(e,t)=>{e.fullscreen=t}},metadata:t},b,x),e(this,null,m,{kind:"accessor",name:"hasActions",static:!1,private:!1,access:{has:e=>"hasActions"in e,get:e=>e.hasActions,set:(e,t)=>{e.hasActions=t}},metadata:t},_,w),e(this,null,d,{kind:"accessor",name:"hasHeader",static:!1,private:!1,access:{has:e=>"hasHeader"in e,get:e=>e.hasHeader,set:(e,t)=>{e.hasHeader=t}},metadata:t},H,k),e(this,null,p,{kind:"accessor",name:"hasHero",static:!1,private:!1,access:{has:e=>"hasHero"in e,get:e=>e.hasHero,set:(e,t)=>{e.hasHero=t}},metadata:t},A,S),e(null,i={value:l},u,{kind:"class",name:l.name,metadata:t},null,g),l=i.value,t&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,y,void 0);get open(){return this.#e}set open(e){this.#e=e}#t=(t(this,v),t(this,b,void 0));get fullscreen(){return this.#t}set fullscreen(e){this.#t=e}#s=(t(this,x),t(this,_,void 0));get hasActions(){return this.#s}set hasActions(e){this.#s=e}#o=(t(this,w),t(this,H,void 0));get hasHeader(){return this.#o}set hasHeader(e){this.#o=e}#a=(t(this,k),t(this,A,void 0));get hasHero(){return this.#a}set hasHero(e){this.#a=e}constructor(){super(),t(this,S),this._close=this._close.bind(this)}connectedCallback(){const e=this.shadowRoot.querySelector('slot[name="actions"]');this.hasActions=0!==Array.from(e?.assignedNodes()||[]).length;let t=this.shadowRoot.querySelector('slot[name="header"]');const s=["title","header-start","header-end"];let o=0;for(;0===Array.from(t.assignedElements()).length&&o<s.length;)t=this.shadowRoot.querySelector(`slot[name="${s[o]}"]`),o+=1;this.hasHeader=0!==t.assignedElements().length;const a=this.shadowRoot.querySelector('slot[name="hero-icon"]');this.hashero=0!==Array.from(a?.assignedNodes()||[]).length}onChange(e,t){"open"===e&&(this.open?this.querySelector('[slot="actions"]')?.addEventListener("click",this._close):this.querySelector('[slot="actions"]')?.removeEventListener("click",this._close))}_close(e){const t=e.composedPath()[0];this.dispatchEvent(new CustomEvent("close",{detail:t.getAttribute("action")||"close"})),this.open=!1}static styles=[a`
       :host {
         position: absolute;
         inset: 0;
@@ -45,12 +45,14 @@ import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{r as o,i a
       }
 
       .body {
+        margin-top: 16px;
+        margin-bottom: 24px;
         overflow-y: auto;
       }
 
       :host([has-actions]) .body {
-        padding-top: 16px;
-        padding-bottom: 24px;
+        margin-top: 16px;
+        margin-bottom: 24px;
       }
 
       :host([has-header][has-hero]) .header {
@@ -115,7 +117,7 @@ import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{r as o,i a
       slot[name='actions'] {
         align-items: flex-end;
       }
-    `];render(){return n`
+    `];render(){return r`
       <span class="scrim" @click=${this._close}></span>
       <dialog ?open=${this.open}>
         <custom-elevation level=${this.fullscreen?0:3}></custom-elevation>
@@ -125,15 +127,15 @@ import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{r as o,i a
           <flex-row class="header" center>
             <flex-row center style="width: 100%">
               <slot name="header-start">
-                ${this.fullscreen?n`<custom-button @click=${this._close}
+                ${this.fullscreen?r`<custom-button @click=${this._close}
                       ><custom-icon slot="icon">close</custom-icon></custom-button
                     >`:""}
               </slot>
               <slot name="title"></slot>
               <flex-it></flex-it>
               <slot name="header-end">
-                ${this.fullscreen?n`<slot name="actions"></slot>`:""}
-                ${this.fullscreen?"":n`<custom-button @click=${this._close}
+                ${this.fullscreen?r`<slot name="actions"></slot>`:""}
+                ${this.fullscreen?"":r`<custom-button @click=${this._close}
                       ><custom-icon slot="icon">close</custom-icon></custom-button
                     >`}
               </slot>
@@ -144,6 +146,6 @@ import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{r as o,i a
           <slot></slot>
         </flex-column>
 
-        ${this.fullscreen?"":n`<slot name="actions"></slot>`}
+        ${this.fullscreen?"":r`<slot name="actions"></slot>`}
       </dialog>
     `}static{t(l,g)}},l})();export{i as CustomDialog};

package/exports/dialog.js

@@ -141,12 +141,14 @@ let CustomDialog = (() => {
       }
 
       .body {
+        margin-top: 16px;
+        margin-bottom: 24px;
         overflow-y: auto;
       }
 
       :host([has-actions]) .body {
-        padding-top: 16px;
-        padding-bottom: 24px;
+        margin-top: 16px;
+        margin-bottom: 24px;
       }
 
       :host([has-header][has-hero]) .header {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.51",
+	"version": "0.3.52",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {