@vandeurenglenn/lite-elements 0.3.80 → 0.3.82

package/exports/bundle/button.js

@@ -1,8 +1,8 @@
-import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s,r as a,x as o}from"./dark-mode-m29sAj4H.js";import{e as l}from"./custom-element-B_TPyPQO.js";import"./elevation.js";import c from"./button.css.js";let r=(()=>{let r,i,n,h,b,m,u=[l("custom-button")],g=[],d=s,_=[],p=[],y=[],f=[],v=[],L=[],I=[],j=[];return class extends d{static{i=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;n=[a({attribute:"has-icon",reflect:!0})],h=[a({attribute:"type",reflect:!0})],b=[a({attribute:!0})],m=[a({attribute:"has-label",reflect:!0})],t(this,null,n,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:t=>"hasIcon"in t,get:t=>t.hasIcon,set:(t,e)=>{t.hasIcon=e}},metadata:e},_,p),t(this,null,h,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:t=>"type"in t,get:t=>t.type,set:(t,e)=>{t.type=e}},metadata:e},y,f),t(this,null,b,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:t=>"label"in t,get:t=>t.label,set:(t,e)=>{t.label=e}},metadata:e},v,L),t(this,null,m,{kind:"accessor",name:"hasLabel",static:!1,private:!1,access:{has:t=>"hasLabel"in t,get:t=>t.hasLabel,set:(t,e)=>{t.hasLabel=e}},metadata:e},I,j),t(null,r={value:i},u,{kind:"class",name:i.name,metadata:e},null,g),i=r.value,e&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,_,void 0);get hasIcon(){return this.#t}set hasIcon(t){this.#t=t}#e=(e(this,p),e(this,y,"text"));get type(){return this.#e}set type(t){this.#e=t}#s=(e(this,f),e(this,v,void 0));get label(){return this.#s}set label(t){this.#s=t}#a=(e(this,L),e(this,I,void 0));get hasLabel(){return this.#a}set hasLabel(t){this.#a=t}static styles=[c];firstRender(){const t=Array.from(this.shadowRoot.querySelectorAll("slot"));for(const e of t)e.addEventListener("slotchange",(()=>this.#o(e)));if(t?.length>0)for(const e of t)this.#o(e)}onChange(t,e){"label"===t&&(this.hasLabel=!!e)}#o=(e(this,j),t=>{"icon"===t.getAttribute("name")&&(this.hasIcon=0!==Array.from(t?.assignedNodes()||[]).length)});render(){return o`
+import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{s,r as a,x as o}from"./dark-mode-m29sAj4H.js";import{e as l}from"./custom-element-B_TPyPQO.js";import"./elevation.js";import c from"./button.css.js";let r=(()=>{let r,i,n,h,b,m,u=[l("custom-button")],g=[],d=s,p=[],_=[],y=[],f=[],v=[],L=[],I=[],j=[];return class extends d{static{i=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;n=[a({attribute:"has-icon",reflect:!0})],h=[a({attribute:"type",reflect:!0})],b=[a({attribute:!0})],m=[a({attribute:"has-label",reflect:!0})],t(this,null,n,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:t=>"hasIcon"in t,get:t=>t.hasIcon,set:(t,e)=>{t.hasIcon=e}},metadata:e},p,_),t(this,null,h,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:t=>"type"in t,get:t=>t.type,set:(t,e)=>{t.type=e}},metadata:e},y,f),t(this,null,b,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:t=>"label"in t,get:t=>t.label,set:(t,e)=>{t.label=e}},metadata:e},v,L),t(this,null,m,{kind:"accessor",name:"hasLabel",static:!1,private:!1,access:{has:t=>"hasLabel"in t,get:t=>t.hasLabel,set:(t,e)=>{t.hasLabel=e}},metadata:e},I,j),t(null,r={value:i},u,{kind:"class",name:i.name,metadata:e},null,g),i=r.value,e&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,p,void 0);get hasIcon(){return this.#t}set hasIcon(t){this.#t=t}#e=(e(this,_),e(this,y,"text"));get type(){return this.#e}set type(t){this.#e=t}#s=(e(this,f),e(this,v,void 0));get label(){return this.#s}set label(t){this.#s=t}#a=(e(this,L),e(this,I,void 0));get hasLabel(){return this.#a}set hasLabel(t){this.#a=t}static styles=[c];firstRender(){const t=Array.from(this.shadowRoot.querySelectorAll("slot"));for(const e of t)e.addEventListener("slotchange",(()=>this.#o(e)));if(t?.length>0)for(const e of t)this.#o(e)}onChange(t,e){"label"===t&&(this.hasLabel=!!e)}#o=(e(this,j),t=>{"icon"===t.getAttribute("name")&&(this.hasIcon=0!==Array.from(t?.assignedNodes()||[]).length)});render(){return o`
       <button label=${this.label}>
         <custom-elevation></custom-elevation>
         <slot name="icon"></slot>
-        ${this.label}
+        <span class="label">${this.label}</span>
         <span class="hover"></span>
       </button>
     `}static{e(i,g)}},i})();export{r as CustomButton};

package/exports/bundle/drawer-button.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s,r as a,i as o,x as i}from"./dark-mode-m29sAj4H.js";import{e as r}from"./custom-element-B_TPyPQO.js";import"./icon-button.js";import"./button.js";import"./elevation.js";import"./button.css.js";import"./icon.js";let n=(()=>{let n,c,l,d,m,p=[r("custom-drawer-button")],u=[],b=s,h=[],_=[],g=[],w=[],v=[],y=[];return class extends b{static{c=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(b[Symbol.metadata]??null):void 0;l=[a({type:Boolean,reflect:!0})],d=[a({type:Boolean,reflect:!0,attribute:"drawer-open"})],m=[a()],e(this,null,l,{kind:"accessor",name:"mobile",static:!1,private:!1,access:{has:e=>"mobile"in e,get:e=>e.mobile,set:(e,t)=>{e.mobile=t}},metadata:t},h,_),e(this,null,d,{kind:"accessor",name:"drawerOpen",static:!1,private:!1,access:{has:e=>"drawerOpen"in e,get:e=>e.drawerOpen,set:(e,t)=>{e.drawerOpen=t}},metadata:t},g,w),e(this,null,m,{kind:"accessor",name:"id",static:!1,private:!1,access:{has:e=>"id"in e,get:e=>e.id,set:(e,t)=>{e.id=t}},metadata:t},v,y),e(null,n={value:c},p,{kind:"class",name:c.name,metadata:t},null,u),c=n.value,t&&Object.defineProperty(c,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,h,!1);get mobile(){return this.#e}set mobile(e){this.#e=e}#t=(t(this,_),t(this,g,void 0));get drawerOpen(){return this.#t}set drawerOpen(e){this.#t=e}#s=(t(this,w),t(this,v,void 0));get id(){return this.#s}set id(e){this.#s=e}openPane(){document.dispatchEvent(new CustomEvent("custom-pane-open",{detail:this.id}))}static styles=[o`
+import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s as a,r as s,i as r,x as o}from"./dark-mode-m29sAj4H.js";import{e as i}from"./custom-element-B_TPyPQO.js";import"./icon-button.js";import"./button.js";import"./elevation.js";import"./button.css.js";import"./icon.js";let n=(()=>{let n,c,l,d,p,m=[i("custom-drawer-button")],u=[],b=a,h=[],_=[],g=[],w=[],v=[],y=[];return class extends b{static{c=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(b[Symbol.metadata]??null):void 0;l=[s({type:Boolean,reflect:!0,attribute:"drawer-open"})],d=[s()],p=[s({type:String,reflect:!0})],e(this,null,l,{kind:"accessor",name:"drawerOpen",static:!1,private:!1,access:{has:e=>"drawerOpen"in e,get:e=>e.drawerOpen,set:(e,t)=>{e.drawerOpen=t}},metadata:t},h,_),e(this,null,d,{kind:"accessor",name:"id",static:!1,private:!1,access:{has:e=>"id"in e,get:e=>e.id,set:(e,t)=>{e.id=t}},metadata:t},g,w),e(this,null,p,{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},v,y),e(null,n={value:c},m,{kind:"class",name:c.name,metadata:t},null,u),c=n.value,t&&Object.defineProperty(c,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,h,void 0);get drawerOpen(){return this.#e}set drawerOpen(e){this.#e=e}#t=(t(this,_),t(this,g,void 0));get id(){return this.#t}set id(e){this.#t=e}#a=(t(this,w),t(this,v,"menu"));get label(){return this.#a}set label(e){this.#a=e}openPane(){document.dispatchEvent(new CustomEvent("custom-pane-open",{detail:this.id}))}static styles=[r`
       :host {
         display: block;
         opacity: 1;
@@ -11,4 +11,6 @@ import{_ as e,a as t}from"./tslib.es6-B87RQr7F.js";import{s,r as a,i as o,x as i
         pointer-events: none;
         width: 0;
       }
-    `];render(){return i` <custom-icon-button @click=${()=>this.openPane()} icon="menu"> </custom-icon-button> `}constructor(){super(...arguments),t(this,y)}static{t(c,u)}},c})();export{n as CustomDrawerButton};
+    `];render(){return o`
+      <custom-icon-button @click=${()=>this.openPane()} label="Open drawer" icon="menu"> </custom-icon-button>
+    `}constructor(){super(...arguments),t(this,y)}static{t(c,u)}},c})();export{n as CustomDrawerButton};

package/exports/bundle/drawer.js

@@ -37,7 +37,7 @@ import{_ as t,a as e}from"./tslib.es6-B87RQr7F.js";import{i as s,s as a,r as o,x
   ::slotted(*) {
     pointer-events: none;
   }
-`;let l=(()=>{let s,l,c,m,d,p,h,g=[r("custom-drawer")],u=[],y=a,b=[],v=[],f=[],_=[],x=[],w=[],j=[],k=[],S=[],z=[];return class extends y{static{l=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;c=[o({type:Boolean,reflect:!0})],m=[o({type:Boolean,reflect:!0})],d=[o({type:String,reflect:!0})],p=[o({type:Boolean})],h=[o({type:String})],t(this,null,c,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:t=>"open"in t,get:t=>t.open,set:(t,e)=>{t.open=e}},metadata:e},b,v),t(this,null,m,{kind:"accessor",name:"mobile",static:!1,private:!1,access:{has:t=>"mobile"in t,get:t=>t.mobile,set:(t,e)=>{t.mobile=e}},metadata:e},f,_),t(this,null,d,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:t=>"type"in t,get:t=>t.type,set:(t,e)=>{t.type=e}},metadata:e},x,w),t(this,null,p,{kind:"accessor",name:"right",static:!1,private:!1,access:{has:t=>"right"in t,get:t=>t.right,set:(t,e)=>{t.right=e}},metadata:e},j,k),t(this,null,h,{kind:"accessor",name:"id",static:!1,private:!1,access:{has:t=>"id"in t,get:t=>t.id,set:(t,e)=>{t.id=e}},metadata:e},S,z),t(null,s={value:l},g,{kind:"class",name:l.name,metadata:e},null,u),l=s.value,e&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,b,void 0);get open(){return this.#t}set open(t){this.#t=t}#e=(e(this,v),e(this,f,void 0));get mobile(){return this.#e}set mobile(t){this.#e=t}#s=(e(this,_),e(this,x,void 0));get type(){return this.#s}set type(t){this.#s=t}#a=(e(this,w),e(this,j,void 0));get right(){return this.#a}set right(t){this.#a=t}#o=(e(this,k),e(this,S,void 0));get id(){return this.#o}set id(t){this.#o=t}connectedCallback(){document.addEventListener("custom-pane-close",(({detail:t})=>{this.id===t&&(this.open=!1)})),document.addEventListener("custom-pane-open",(({detail:t})=>{this.id===t&&(this.open=!0)}))}static styles=[n];render(){return i`
+`;let l=(()=>{let s,l,c,m,d,p,h,g=[r("custom-drawer")],u=[],y=a,b=[],v=[],f=[],_=[],x=[],w=[],j=[],k=[],S=[],z=[];return class extends y{static{l=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;c=[o({type:Boolean,reflect:!0})],m=[o({type:Boolean,reflect:!0})],d=[o({type:String,reflect:!0})],p=[o({type:Boolean})],h=[o({type:String})],t(this,null,c,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:t=>"open"in t,get:t=>t.open,set:(t,e)=>{t.open=e}},metadata:e},b,v),t(this,null,m,{kind:"accessor",name:"mobile",static:!1,private:!1,access:{has:t=>"mobile"in t,get:t=>t.mobile,set:(t,e)=>{t.mobile=e}},metadata:e},f,_),t(this,null,d,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:t=>"type"in t,get:t=>t.type,set:(t,e)=>{t.type=e}},metadata:e},x,w),t(this,null,p,{kind:"accessor",name:"right",static:!1,private:!1,access:{has:t=>"right"in t,get:t=>t.right,set:(t,e)=>{t.right=e}},metadata:e},j,k),t(this,null,h,{kind:"accessor",name:"id",static:!1,private:!1,access:{has:t=>"id"in t,get:t=>t.id,set:(t,e)=>{t.id=e}},metadata:e},S,z),t(null,s={value:l},g,{kind:"class",name:l.name,metadata:e},null,u),l=s.value,e&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,b,void 0);get open(){return this.#t}set open(t){this.#t=t}#e=(e(this,v),e(this,f,void 0));get mobile(){return this.#e}set mobile(t){this.#e=t}#s=(e(this,_),e(this,x,void 0));get type(){return this.#s}set type(t){this.#s=t}#a=(e(this,w),e(this,j,void 0));get right(){return this.#a}set right(t){this.#a=t}#o=(e(this,k),e(this,S,void 0));get id(){return this.#o}set id(t){this.#o=t}firstRender(){document.addEventListener("custom-pane-close",(({detail:t})=>{this.id===t&&(this.open=!1)})),document.addEventListener("custom-pane-open",(({detail:t})=>{this.id===t&&(this.open=!0)}))}static styles=[n];render(){return i`
       <custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type} .id=${this.id}>
         <slot name="headline" slot="headline"></slot>
         <slot name="menu-button" slot="menu-button"></slot>

package/exports/bundle/icon-button.js

@@ -36,9 +36,9 @@ import{_ as t,a as o}from"./tslib.es6-B87RQr7F.js";import{r as s,i as e,x as a}f
         --custom-icon-color: var(--md-sys-color-on-secondary-container);
       }
     `];render(){return a`
-      <button label=${this.label}>
+      <button label=${this.label||this.icon}>
         <custom-elevation></custom-elevation>
-        <slot name="icon"> <custom-icon .icon=${this.icon}></custom-icon></slot>
+        <slot name="icon"> <custom-icon .icon=${this.icon||this.label}></custom-icon></slot>
         <span class="label">${this.label}</span>
         <span class="hover"></span>
       </button>

package/exports/button.js

@@ -77,7 +77,7 @@ let CustomButton = (() => {
       <button label=${this.label}>
         <custom-elevation></custom-elevation>
         <slot name="icon"></slot>
-        ${this.label}
+        <span class="label">${this.label}</span>
         <span class="hover"></span>
       </button>
     `;

package/exports/drawer/drawer-button.d.ts

@@ -1,9 +1,9 @@
 import { LiteElement } from '@vandeurenglenn/lite';
 import '../button/icon-button.js';
 export declare class CustomDrawerButton extends LiteElement {
-    accessor mobile: boolean;
     accessor drawerOpen: boolean;
     accessor id: string;
+    accessor label: string;
     openPane(): void;
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;

package/exports/drawer/drawer.d.ts

@@ -8,7 +8,7 @@ export declare class CustomDrawer extends LiteElement {
     accessor type: 'modal' | undefined;
     accessor right: boolean;
     accessor id: string;
-    connectedCallback(): void;
-    static styles?: import("lit").CSSResultOrNative[];
+    firstRender(): void;
+    static styles: import("lit").CSSResultOrNative[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/exports/drawer-button.js

@@ -13,38 +13,38 @@ let CustomDrawerButton = (() => {
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = LiteElement;
-    let _mobile_decorators;
-    let _mobile_initializers = [];
-    let _mobile_extraInitializers = [];
     let _drawerOpen_decorators;
     let _drawerOpen_initializers = [];
     let _drawerOpen_extraInitializers = [];
     let _id_decorators;
     let _id_initializers = [];
     let _id_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
     (class extends _classSuper {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _mobile_decorators = [property({ type: Boolean, reflect: true })];
             _drawerOpen_decorators = [property({ type: Boolean, reflect: true, attribute: 'drawer-open' })];
             _id_decorators = [property()];
-            __esDecorate(this, null, _mobile_decorators, { kind: "accessor", name: "mobile", static: false, private: false, access: { has: obj => "mobile" in obj, get: obj => obj.mobile, set: (obj, value) => { obj.mobile = value; } }, metadata: _metadata }, _mobile_initializers, _mobile_extraInitializers);
+            _label_decorators = [property({ type: String, reflect: true })];
             __esDecorate(this, null, _drawerOpen_decorators, { kind: "accessor", name: "drawerOpen", static: false, private: false, access: { has: obj => "drawerOpen" in obj, get: obj => obj.drawerOpen, set: (obj, value) => { obj.drawerOpen = value; } }, metadata: _metadata }, _drawerOpen_initializers, _drawerOpen_extraInitializers);
             __esDecorate(this, null, _id_decorators, { kind: "accessor", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        #mobile_accessor_storage = __runInitializers(this, _mobile_initializers, false);
-        get mobile() { return this.#mobile_accessor_storage; }
-        set mobile(value) { this.#mobile_accessor_storage = value; }
-        #drawerOpen_accessor_storage = (__runInitializers(this, _mobile_extraInitializers), __runInitializers(this, _drawerOpen_initializers, void 0));
+        #drawerOpen_accessor_storage = __runInitializers(this, _drawerOpen_initializers, void 0);
         get drawerOpen() { return this.#drawerOpen_accessor_storage; }
         set drawerOpen(value) { this.#drawerOpen_accessor_storage = value; }
         #id_accessor_storage = (__runInitializers(this, _drawerOpen_extraInitializers), __runInitializers(this, _id_initializers, void 0));
         get id() { return this.#id_accessor_storage; }
         set id(value) { this.#id_accessor_storage = value; }
+        #label_accessor_storage = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _label_initializers, 'menu'));
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
         openPane() {
             document.dispatchEvent(new CustomEvent('custom-pane-open', { detail: this.id }));
         }
@@ -65,11 +65,13 @@ let CustomDrawerButton = (() => {
     `
         ];
         render() {
-            return html ` <custom-icon-button @click=${() => this.openPane()} icon="menu"> </custom-icon-button> `;
+            return html `
+      <custom-icon-button @click=${() => this.openPane()} label="Open drawer" icon="menu"> </custom-icon-button>
+    `;
         }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _id_extraInitializers);
+            __runInitializers(this, _label_extraInitializers);
         }
         static {
             __runInitializers(_classThis, _classExtraInitializers);

package/exports/drawer.js

@@ -64,7 +64,7 @@ let CustomDrawer = (() => {
         #id_accessor_storage = (__runInitializers(this, _right_extraInitializers), __runInitializers(this, _id_initializers, void 0));
         get id() { return this.#id_accessor_storage; }
         set id(value) { this.#id_accessor_storage = value; }
-        connectedCallback() {
+        firstRender() {
             document.addEventListener('custom-pane-close', ({ detail }) => {
                 if (this.id === detail)
                     this.open = false;

package/exports/icon-button.js

@@ -71,9 +71,9 @@ let CustomIconButton = (() => {
         ];
         render() {
             return html `
-      <button label=${this.label}>
+      <button label=${this.label || this.icon}>
         <custom-elevation></custom-elevation>
-        <slot name="icon"> <custom-icon .icon=${this.icon}></custom-icon></slot>
+        <slot name="icon"> <custom-icon .icon=${this.icon || this.label}></custom-icon></slot>
         <span class="label">${this.label}</span>
         <span class="hover"></span>
       </button>

package/package.json

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