@vandeurenglenn/lite-elements 0.3.50 → 0.3.52

package/exports/banner.js

@@ -23,42 +23,42 @@ let CustomBanner = (() => {
             super();
         }
         render() {
-            return html `
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-          box-sizing: border-box;
-          width: 100%;
-          height: 40px;
-          padding: 8px 16px;
-          background: var(--md-sys-color-tertiary);
-          color: var(--md-sys-color-on-tertiary);
-        }
-
-        :host([inset]) {
-          margin-left: 16px;
-          margin-right: 0;
-        }
-
-        :host([middle-inset]) {
-          margin-left: 16px;
-          margin-right: 16px;
-        }
-        custom-icon {
-          --custom-icon-size: 12px;
-        }
-
-        custom-button {
-          height: 24px;
-          width: 24px;
-        }
-      </style>
-      <slot></slot>
-      <flex-it flex="1"></flex-it>
-      <custom-button type="tertiary">
-        <custom-icon slot="icon">close</custom-icon>
-      </custom-button>
+            return html `
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+          box-sizing: border-box;
+          width: 100%;
+          height: 40px;
+          padding: 8px 16px;
+          background: var(--md-sys-color-tertiary);
+          color: var(--md-sys-color-on-tertiary);
+        }
+
+        :host([inset]) {
+          margin-left: 16px;
+          margin-right: 0;
+        }
+
+        :host([middle-inset]) {
+          margin-left: 16px;
+          margin-right: 16px;
+        }
+        custom-icon {
+          --custom-icon-size: 12px;
+        }
+
+        custom-button {
+          height: 24px;
+          width: 24px;
+        }
+      </style>
+      <slot></slot>
+      <flex-it flex="1"></flex-it>
+      <custom-button type="tertiary">
+        <custom-icon slot="icon">close</custom-icon>
+      </custom-button>
     `;
         }
     });

package/exports/bundle/button.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t,e as a}from"./custom-element-CAdbJRVg.js";import{r as s,i as o,k as l,s as r}from"./property-DL093_VN.js";import"./elevation.js";let n=(()=>{let n,i,c,d,h,y,b=[a("custom-button")],p=[],m=r,v=[],u=[],g=[],f=[],_=[],x=[],k=[],L=[];return class extends m{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;c=[s({attribute:"has-icon",reflect:!0})],d=[s({attribute:"has-label",reflect:!0})],h=[s({attribute:"type",reflect:!0})],y=[s({attribute:!0})],e(this,null,c,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:e=>"hasIcon"in e,get:e=>e.hasIcon,set:(e,t)=>{e.hasIcon=t}},metadata:t},v,u),e(this,null,d,{kind:"accessor",name:"hasLabel",static:!1,private:!1,access:{has:e=>"hasLabel"in e,get:e=>e.hasLabel,set:(e,t)=>{e.hasLabel=t}},metadata:t},g,f),e(this,null,h,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},_,x),e(this,null,y,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},k,L),e(null,n={value:i},b,{kind:"class",name:i.name,metadata:t},null,p),i=n.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,v,void 0);get hasIcon(){return this.#e}set hasIcon(e){this.#e=e}#t=(t(this,u),t(this,g,void 0));get hasLabel(){return this.#t}set hasLabel(e){this.#t=e}#a=(t(this,f),t(this,_,"text"));get type(){return this.#a}set type(e){this.#a=e}#s=(t(this,x),t(this,k,void 0));get label(){return this.#s}set label(e){this.#s=e}static styles=[o`
+import{_ as e,a as t,e as a}from"./custom-element-CAdbJRVg.js";import{r as s,i as o,k as l,s as r}from"./property-DL093_VN.js";import"./elevation.js";let n=(()=>{let n,i,c,d,h,y,b=[a("custom-button")],p=[],m=r,v=[],g=[],u=[],f=[],_=[],x=[],k=[],L=[];return class extends m{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;c=[s({attribute:"has-icon",reflect:!0})],d=[s({attribute:"has-label",reflect:!0})],h=[s({attribute:"type",reflect:!0})],y=[s({attribute:!0})],e(this,null,c,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:e=>"hasIcon"in e,get:e=>e.hasIcon,set:(e,t)=>{e.hasIcon=t}},metadata:t},v,g),e(this,null,d,{kind:"accessor",name:"hasLabel",static:!1,private:!1,access:{has:e=>"hasLabel"in e,get:e=>e.hasLabel,set:(e,t)=>{e.hasLabel=t}},metadata:t},u,f),e(this,null,h,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},_,x),e(this,null,y,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},k,L),e(null,n={value:i},b,{kind:"class",name:i.name,metadata:t},null,p),i=n.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,v,void 0);get hasIcon(){return this.#e}set hasIcon(e){this.#e=e}#t=(t(this,g),t(this,u,void 0));get hasLabel(){return this.#t}set hasLabel(e){this.#t=e}#a=(t(this,f),t(this,_,"text"));get type(){return this.#a}set type(e){this.#a=e}#s=(t(this,x),t(this,k,void 0));get label(){return this.#s}set label(e){this.#s=e}static styles=[o`
       :host {
         color: var(--custom-button-color, --md-sys-color-on-background);
         display: flex;
@@ -30,6 +30,11 @@ import{_ as e,a as t,e as a}from"./custom-element-CAdbJRVg.js";import{r as s,i a
         pointer-events: none;
       }
 
+      .label {
+        flex: 1;
+        text-align: end;
+      }
+
       .label,
       ::slotted(*) {
         font-family: var(--md-sys-typescale-label-large-font-family-name);

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};