@vandeurenglenn/lite-elements 0.3.19 → 0.3.21

package/exports/bundle/dialog.js

@@ -1,4 +1,4 @@
-import{_ as e,a as t,e as s}from"./custom-element-c2e883ba.js";import{t as o,j as a,v as n,D as r}from"./property-c909a6bf.js";import"./elevation.js";import"./icon.js";import"./index-3c006227.js";let i=(()=>{let i,l,c,h,d,m,p,u=[s("custom-dialog")],g=[],f=r,y=[],v=[],x=[],_=[],b=[],H=[],w=[],k=[],A=[],j=[];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},x,_),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},b,H),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},w,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,j),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,!1);get open(){return this.#e}set open(e){this.#e=e}#t=(t(this,v),t(this,x,!1));get fullscreen(){return this.#t}set fullscreen(e){this.#t=e}#s=(t(this,_),t(this,b,!1));get hasActions(){return this.#s}set hasActions(e){this.#s=e}#o=(t(this,H),t(this,w,!1));get hasHeader(){return this.#o}set hasHeader(e){this.#o=e}#a=(t(this,k),t(this,A,!1));get hasHero(){return this.#a}set hasHero(e){this.#a=e}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=(t(this,j),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-c2e883ba.js";import{t as o,j as a,v as n,D as r}from"./property-c909a6bf.js";import"./elevation.js";import"./icon.js";import"./index-3c006227.js";let i=(()=>{let i,l,c,h,d,m,p,u=[s("custom-dialog")],g=[],f=r,y=[],v=[],x=[],_=[],b=[],w=[],H=[],k=[],A=[],j=[];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},x,_),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},b,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,j),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,x,void 0));get fullscreen(){return this.#t}set fullscreen(e){this.#t=e}#s=(t(this,_),t(this,b,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}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=(t(this,j),e=>{const t=e.composedPath()[0];this.dispatchEvent(new CustomEvent("close",{detail:t.getAttribute("action")||"close"})),this.open=!1});static styles=[a`
       :host {
         position: fixed;
         inset: 0;
@@ -31,8 +31,8 @@ import{_ as e,a as t,e as s}from"./custom-element-c2e883ba.js";import{t as o,j a
       dialog {
         pointer-events: none;
         border: none;
-        min-width: 280px;
-        max-width: 560px;
+        min-width: var('--custom-dialog-min-width', 280px);
+        max-width: var('--custom-dialog-max-width', 560px);
         width: fit-content;
         border-radius: var(--md-sys-shape-corner-extra-large);
         background-color: var(--md-sys-color-surface-container-high);

package/exports/bundle/icon-set.js

@@ -2,4 +2,4 @@ import{_ as e,a as t,e as s}from"./custom-element-c2e883ba.js";import{j as n,D a
       :host {
         display: none;
       }
-    `];#e(e){return this.querySelector("template").content.querySelector(`span[name="${e}"]`).children[0]}getIcon(e){const t=this.#e(e);return t?t.cloneNode(!0):(console.warn(`missing icon ${e}`),e)}get setName(){return this.getAttribute("set-name")||"icons"}connectedCallback(){globalThis.pubsub.subscribe(`custom-icon-set-${this.setName}-connected`,(()=>{})),globalThis.pubsub.publish(`custom-icon-set-${this.setName}-connected`,this)}static{t(l,i)}},l})();export{l as CustomIconSet};
+    `];#e(e){return this.querySelector("template").content.querySelector(`span[name="${e}"]`)?.children[0]}getIcon(e){const t=this.#e(e);return t?t.cloneNode(!0):(console.warn(`missing icon ${e}`),e)}get setName(){return this.getAttribute("set-name")||"icons"}connectedCallback(){globalThis.pubsub.subscribe(`custom-icon-set-${this.setName}-connected`,(()=>{})),globalThis.pubsub.publish(`custom-icon-set-${this.setName}-connected`,this)}static{t(l,i)}},l})();export{l as CustomIconSet};

package/exports/bundle/theme.js

@@ -1 +1 @@
-import{_ as t,a as e,e as a}from"./custom-element-c2e883ba.js";import{t as s,D as o}from"./property-c909a6bf.js";let r=(()=>{let r,n,i,l,c,g=[a("custom-theme")],d=[],h=o,m=[],u=[],p=[],y=[],b=[],w=[];return class extends h{static{n=this}static{const a="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;i=[s({type:Boolean})],l=[s({type:String,attribute:"mobile-trigger"})],c=[s({type:Boolean})],t(this,null,i,{kind:"accessor",name:"loadFont",static:!1,private:!1,access:{has:t=>"loadFont"in t,get:t=>t.loadFont,set:(t,e)=>{t.loadFont=e}},metadata:a},m,u),t(this,null,l,{kind:"accessor",name:"narrowTrigger",static:!1,private:!1,access:{has:t=>"narrowTrigger"in t,get:t=>t.narrowTrigger,set:(t,e)=>{t.narrowTrigger=e}},metadata:a},p,y),t(this,null,c,{kind:"accessor",name:"narrow",static:!1,private:!1,access:{has:t=>"narrow"in t,get:t=>t.narrow,set:(t,e)=>{t.narrow=e}},metadata:a},b,w),t(null,r={value:n},g,{kind:"class",name:n.name,metadata:a},null,d),n=r.value,a&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a}),e(n,d)}#t=e(this,m,!0);get loadFont(){return this.#t}set loadFont(t){this.#t=t}#e=(e(this,u),e(this,p,"(max-width: 860px)"));get narrowTrigger(){return this.#e}set narrowTrigger(t){this.#e=t}#a=(e(this,y),e(this,b,void 0));get narrow(){return this.#a}set narrow(t){this.#a=t}#s(t,e,a){let s=document.createElement("link");if(s.rel=e,s.href=t,a)for(const t of a)s.setAttribute(t,"");document.head.appendChild(s)}#o(){let t="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap";return globalThis.symbols&&(t+=`&text=${globalThis.symbols}`),t}constructor(){super();const t=matchMedia("(max-width: 860px)");t.onchange=this.#r,this.#r({matches:t.matches}),this.load("./themes/default/theme.css");const e=document.createElement("style");e.innerHTML="\n    html, body {\n      inset: 0;\n      position: absolute;\n      margin: 0;\n      background: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n      overflow: hidden;\n    }",document.head.appendChild(e);const a=!this.hasAttribute("load-symbols")||"false"!==this.getAttribute("load-symbols");(this.loadFont||a)&&this.#s("https://fonts.googleapis.com","preconnect"),this.#s("https://fonts.gstatic.com","preconnect",["crossorigin"]),this.loadFont&&this.#s("https://fonts.googleapis.com/css2?family=Roboto&display=swap","stylesheet"),a&&this.#s(this.#o(),"stylesheet")}#r=(e(this,w),({matches:t})=>{this.narrow=t,document.dispatchEvent(new CustomEvent("custom-theme-narrow",{detail:this.narrow}))});set language(t){this.setAttribute("language",t)}get language(){return this.getAttribute("language")||"css"}async load(t){if("js"===this.language){const e=await import(t);for(const[t,a]of Object.entries(e)){const e=`--${t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}`;document.body.style.setProperty(e,a)}}else if("css"===this.language){const e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)}}},n})();export{r as CustomTheme};
+import{_ as t,a as e,e as a}from"./custom-element-c2e883ba.js";import{t as s,D as o}from"./property-c909a6bf.js";let r=(()=>{let r,n,i,l,c,d,m=[a("custom-theme")],g=[],h=o,u=[],y=[],b=[],p=[],w=[],_=[],f=[],S=[];return class extends h{static{n=this}static{const a="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;i=[s({type:Boolean,attribute:"load-font"})],l=[s({type:Boolean,attribute:"load-symbols"})],c=[s({type:String,attribute:"mobile-trigger"})],d=[s({type:Boolean})],t(this,null,i,{kind:"accessor",name:"loadFont",static:!1,private:!1,access:{has:t=>"loadFont"in t,get:t=>t.loadFont,set:(t,e)=>{t.loadFont=e}},metadata:a},u,y),t(this,null,l,{kind:"accessor",name:"loadSymbols",static:!1,private:!1,access:{has:t=>"loadSymbols"in t,get:t=>t.loadSymbols,set:(t,e)=>{t.loadSymbols=e}},metadata:a},b,p),t(this,null,c,{kind:"accessor",name:"narrowTrigger",static:!1,private:!1,access:{has:t=>"narrowTrigger"in t,get:t=>t.narrowTrigger,set:(t,e)=>{t.narrowTrigger=e}},metadata:a},w,_),t(this,null,d,{kind:"accessor",name:"narrow",static:!1,private:!1,access:{has:t=>"narrow"in t,get:t=>t.narrow,set:(t,e)=>{t.narrow=e}},metadata:a},f,S),t(null,r={value:n},m,{kind:"class",name:n.name,metadata:a},null,g),n=r.value,a&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a}),e(n,g)}#t=e(this,u,!0);get loadFont(){return this.#t}set loadFont(t){this.#t=t}#e=(e(this,y),e(this,b,!0));get loadSymbols(){return this.#e}set loadSymbols(t){this.#e=t}#a=(e(this,p),e(this,w,"(max-width: 860px)"));get narrowTrigger(){return this.#a}set narrowTrigger(t){this.#a=t}#s=(e(this,_),e(this,f,void 0));get narrow(){return this.#s}set narrow(t){this.#s=t}#o(t,e,a){let s=document.createElement("link");if(s.rel=e,s.href=t,a)for(const t of a)s.setAttribute(t,"");document.head.appendChild(s)}#r(){let t="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap";return globalThis.symbols&&(t+=`&text=${globalThis.symbols}`),t}connectedCallback(){const t=matchMedia("(max-width: 860px)");t.onchange=this.#n,this.#n({matches:t.matches}),this.load("./themes/default/theme.css");const e=document.createElement("style");e.innerHTML="\n    html, body {\n      inset: 0;\n      position: absolute;\n      margin: 0;\n      background: var(--md-sys-color-background);\n      color: var(--md-sys-color-on-background);\n      overflow: hidden;\n    }",document.head.appendChild(e),(this.loadFont||this.loadSymbols)&&this.#o("https://fonts.googleapis.com","preconnect"),this.#o("https://fonts.gstatic.com","preconnect",["crossorigin"]),this.loadFont&&this.#o("https://fonts.googleapis.com/css2?family=Roboto&display=swap","stylesheet"),this.loadSymbols&&this.#o(this.#r(),"stylesheet")}#n=(e(this,S),({matches:t})=>{this.narrow=t,document.dispatchEvent(new CustomEvent("custom-theme-narrow",{detail:this.narrow}))});set language(t){this.setAttribute("language",t)}get language(){return this.getAttribute("language")||"css"}async load(t){if("js"===this.language){const e=await import(t);for(const[t,a]of Object.entries(e)){const e=`--${t.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}`;document.body.style.setProperty(e,a)}}else if("css"===this.language){const e=document.createElement("link");e.rel="stylesheet",e.href=t,document.head.appendChild(e)}}},n})();export{r as CustomTheme};

package/exports/bundle/upload-file.js

@@ -0,0 +1,9 @@
+import{_ as t,a as e,e as l}from"./custom-element-c2e883ba.js";import{t as a,j as s,v as i,D as r}from"./property-c909a6bf.js";let o=(()=>{let o,u,m,n=[l("custom-upload-file")],p=[],c=r,d=[],y=[];return class extends c{static{u=this}static{const l="function"==typeof Symbol&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;m=[a({type:Boolean})],t(this,null,m,{kind:"accessor",name:"multiple",static:!1,private:!1,access:{has:t=>"multiple"in t,get:t=>t.multiple,set:(t,e)=>{t.multiple=e}},metadata:l},d,y),t(null,o={value:u},n,{kind:"class",name:u.name,metadata:l},null,p),u=o.value,l&&Object.defineProperty(u,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:l}),e(u,p)}#t=e(this,d,void 0);get multiple(){return this.#t}set multiple(t){this.#t=t}static get styles(){return[s`
+        :host {
+          display: flex;
+        }
+
+        input {
+          display: hidden;
+        }
+      `]}render(){return i`<input type="file" ?multiple=${this.multiple} />`}constructor(){super(...arguments),e(this,y)}},u})();export{o as CustomUploadFile};

package/exports/bundle/upload.js

@@ -0,0 +1 @@
+import{_ as t,a,e}from"./custom-element-c2e883ba.js";import{t as r,v as s,D as i}from"./property-c909a6bf.js";let m=(()=>{let m,o,c,l=[e("custom-upload")],n=[],u=i,h=[],d=[];return class extends u{static{o=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(u[Symbol.metadata]??null):void 0;c=[r({attribute:"with-camera"})],t(this,null,c,{kind:"accessor",name:"withCamera",static:!1,private:!1,access:{has:t=>"withCamera"in t,get:t=>t.withCamera,set:(t,a)=>{t.withCamera=a}},metadata:e},h,d),t(null,m={value:o},l,{kind:"class",name:o.name,metadata:e},null,n),o=m.value,e&&Object.defineProperty(o,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e}),a(o,n)}#t=a(this,h,void 0);get withCamera(){return this.#t}set withCamera(t){this.#t=t}render(){return s` <custom-pages> </custom-pages> `}constructor(){super(...arguments),a(this,d)}},o})();export{m as CustomUpload};

package/exports/dialog.js

@@ -43,19 +43,19 @@ let CustomDialog = (() => {
             _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        #open_accessor_storage = __runInitializers(this, _open_initializers, false);
+        #open_accessor_storage = __runInitializers(this, _open_initializers, void 0);
         get open() { return this.#open_accessor_storage; }
         set open(value) { this.#open_accessor_storage = value; }
-        #fullscreen_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _fullscreen_initializers, false));
+        #fullscreen_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _fullscreen_initializers, void 0));
         get fullscreen() { return this.#fullscreen_accessor_storage; }
         set fullscreen(value) { this.#fullscreen_accessor_storage = value; }
-        #hasActions_accessor_storage = (__runInitializers(this, _fullscreen_extraInitializers), __runInitializers(this, _hasActions_initializers, false));
+        #hasActions_accessor_storage = (__runInitializers(this, _fullscreen_extraInitializers), __runInitializers(this, _hasActions_initializers, void 0));
         get hasActions() { return this.#hasActions_accessor_storage; }
         set hasActions(value) { this.#hasActions_accessor_storage = value; }
-        #hasHeader_accessor_storage = (__runInitializers(this, _hasActions_extraInitializers), __runInitializers(this, _hasHeader_initializers, false));
+        #hasHeader_accessor_storage = (__runInitializers(this, _hasActions_extraInitializers), __runInitializers(this, _hasHeader_initializers, void 0));
         get hasHeader() { return this.#hasHeader_accessor_storage; }
         set hasHeader(value) { this.#hasHeader_accessor_storage = value; }
-        #hasHero_accessor_storage = (__runInitializers(this, _hasHeader_extraInitializers), __runInitializers(this, _hasHero_initializers, false));
+        #hasHero_accessor_storage = (__runInitializers(this, _hasHeader_extraInitializers), __runInitializers(this, _hasHero_initializers, void 0));
         get hasHero() { return this.#hasHero_accessor_storage; }
         set hasHero(value) { this.#hasHero_accessor_storage = value; }
         connectedCallback() {
@@ -122,8 +122,8 @@ let CustomDialog = (() => {
       dialog {
         pointer-events: none;
         border: none;
-        min-width: 280px;
-        max-width: 560px;
+        min-width: var('--custom-dialog-min-width', 280px);
+        max-width: var('--custom-dialog-max-width', 560px);
         width: fit-content;
         border-radius: var(--md-sys-shape-corner-extra-large);
         background-color: var(--md-sys-color-surface-container-high);

package/exports/icon-set.js

@@ -25,7 +25,7 @@ let CustomIconSet = (() => {
     `
         ];
         #getIcon(name) {
-            return this.querySelector('template').content.querySelector(`span[name="${name}"]`).children[0];
+            return this.querySelector('template').content.querySelector(`span[name="${name}"]`)?.children[0];
         }
         getIcon(name) {
             const node = this.#getIcon(name);

package/exports/theme/theme.d.ts

@@ -2,9 +2,10 @@ import { LiteElement } from '@vandeurenglenn/lite';
 export declare class CustomTheme extends LiteElement {
     #private;
     accessor loadFont: boolean;
+    accessor loadSymbols: boolean;
     accessor narrowTrigger: string;
     accessor narrow: boolean;
-    constructor();
+    connectedCallback(): void;
     set language(value: string);
     get language(): string;
     /**

package/exports/theme.js

@@ -11,6 +11,9 @@ let CustomTheme = (() => {
     let _loadFont_decorators;
     let _loadFont_initializers = [];
     let _loadFont_extraInitializers = [];
+    let _loadSymbols_decorators;
+    let _loadSymbols_initializers = [];
+    let _loadSymbols_extraInitializers = [];
     let _narrowTrigger_decorators;
     let _narrowTrigger_initializers = [];
     let _narrowTrigger_extraInitializers = [];
@@ -21,10 +24,12 @@ let CustomTheme = (() => {
         static { _classThis = this; }
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-            _loadFont_decorators = [property({ type: Boolean })];
+            _loadFont_decorators = [property({ type: Boolean, attribute: 'load-font' })];
+            _loadSymbols_decorators = [property({ type: Boolean, attribute: 'load-symbols' })];
             _narrowTrigger_decorators = [property({ type: String, attribute: 'mobile-trigger' })];
             _narrow_decorators = [property({ type: Boolean })];
             __esDecorate(this, null, _loadFont_decorators, { kind: "accessor", name: "loadFont", static: false, private: false, access: { has: obj => "loadFont" in obj, get: obj => obj.loadFont, set: (obj, value) => { obj.loadFont = value; } }, metadata: _metadata }, _loadFont_initializers, _loadFont_extraInitializers);
+            __esDecorate(this, null, _loadSymbols_decorators, { kind: "accessor", name: "loadSymbols", static: false, private: false, access: { has: obj => "loadSymbols" in obj, get: obj => obj.loadSymbols, set: (obj, value) => { obj.loadSymbols = value; } }, metadata: _metadata }, _loadSymbols_initializers, _loadSymbols_extraInitializers);
             __esDecorate(this, null, _narrowTrigger_decorators, { kind: "accessor", name: "narrowTrigger", static: false, private: false, access: { has: obj => "narrowTrigger" in obj, get: obj => obj.narrowTrigger, set: (obj, value) => { obj.narrowTrigger = value; } }, metadata: _metadata }, _narrowTrigger_initializers, _narrowTrigger_extraInitializers);
             __esDecorate(this, null, _narrow_decorators, { kind: "accessor", name: "narrow", static: false, private: false, access: { has: obj => "narrow" in obj, get: obj => obj.narrow, set: (obj, value) => { obj.narrow = value; } }, metadata: _metadata }, _narrow_initializers, _narrow_extraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
@@ -35,7 +40,10 @@ let CustomTheme = (() => {
         #loadFont_accessor_storage = __runInitializers(this, _loadFont_initializers, true);
         get loadFont() { return this.#loadFont_accessor_storage; }
         set loadFont(value) { this.#loadFont_accessor_storage = value; }
-        #narrowTrigger_accessor_storage = (__runInitializers(this, _loadFont_extraInitializers), __runInitializers(this, _narrowTrigger_initializers, '(max-width: 860px)'));
+        #loadSymbols_accessor_storage = (__runInitializers(this, _loadFont_extraInitializers), __runInitializers(this, _loadSymbols_initializers, true));
+        get loadSymbols() { return this.#loadSymbols_accessor_storage; }
+        set loadSymbols(value) { this.#loadSymbols_accessor_storage = value; }
+        #narrowTrigger_accessor_storage = (__runInitializers(this, _loadSymbols_extraInitializers), __runInitializers(this, _narrowTrigger_initializers, '(max-width: 860px)'));
         get narrowTrigger() { return this.#narrowTrigger_accessor_storage; }
         set narrowTrigger(value) { this.#narrowTrigger_accessor_storage = value; }
         #narrow_accessor_storage = (__runInitializers(this, _narrowTrigger_extraInitializers), __runInitializers(this, _narrow_initializers, void 0));
@@ -59,8 +67,7 @@ let CustomTheme = (() => {
             }
             return link;
         }
-        constructor() {
-            super();
+        connectedCallback() {
             const media = matchMedia('(max-width: 860px)');
             media.onchange = this.#mediaQueryChange;
             this.#mediaQueryChange({ matches: media.matches });
@@ -77,13 +84,12 @@ let CustomTheme = (() => {
       overflow: hidden;
     }`;
             document.head.appendChild(style);
-            const loadSymbols = this.hasAttribute('load-symbols') ? this.getAttribute('load-symbols') !== 'false' : true;
-            if (this.loadFont || loadSymbols)
+            if (this.loadFont || this.loadSymbols)
                 this.#loadLink('https://fonts.googleapis.com', 'preconnect');
             this.#loadLink('https://fonts.gstatic.com', 'preconnect', ['crossorigin']);
             if (this.loadFont)
                 this.#loadLink('https://fonts.googleapis.com/css2?family=Roboto&display=swap', 'stylesheet');
-            if (loadSymbols)
+            if (this.loadSymbols)
                 this.#loadLink(this.#generateSymbolsLink(), 'stylesheet');
         }
         #mediaQueryChange = (__runInitializers(this, _narrow_extraInitializers), ({ matches }) => {

package/exports/upload/upload-file.d.ts

@@ -0,0 +1,6 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class CustomUploadFile extends LiteElement {
+    accessor multiple: any;
+    static get styles(): import("@lit/reactive-element/css-tag.js").CSSResult[];
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/upload/upload.d.ts

@@ -0,0 +1,5 @@
+import { LiteElement } from '@vandeurenglenn/lite';
+export declare class CustomUpload extends LiteElement {
+    accessor withCamera: any;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/exports/upload-file.js

@@ -0,0 +1,51 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, css, html, LiteElement } from '@vandeurenglenn/lite';
+
+let CustomUploadFile = (() => {
+    let _classDecorators = [customElement('custom-upload-file')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _multiple_decorators;
+    let _multiple_initializers = [];
+    let _multiple_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _multiple_decorators = [property({ type: Boolean })];
+            __esDecorate(this, null, _multiple_decorators, { kind: "accessor", name: "multiple", static: false, private: false, access: { has: obj => "multiple" in obj, get: obj => obj.multiple, set: (obj, value) => { obj.multiple = value; } }, metadata: _metadata }, _multiple_initializers, _multiple_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 });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #multiple_accessor_storage = __runInitializers(this, _multiple_initializers, void 0);
+        get multiple() { return this.#multiple_accessor_storage; }
+        set multiple(value) { this.#multiple_accessor_storage = value; }
+        static get styles() {
+            return [
+                css `
+        :host {
+          display: flex;
+        }
+
+        input {
+          display: hidden;
+        }
+      `
+            ];
+        }
+        render() {
+            return html `<input type="file" ?multiple=${this.multiple} />`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _multiple_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomUploadFile };

package/exports/upload.js

@@ -0,0 +1,38 @@
+import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
+import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
+
+let CustomUpload = (() => {
+    let _classDecorators = [customElement('custom-upload')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LiteElement;
+    let _withCamera_decorators;
+    let _withCamera_initializers = [];
+    let _withCamera_extraInitializers = [];
+    (class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _withCamera_decorators = [property({ attribute: 'with-camera' })];
+            __esDecorate(this, null, _withCamera_decorators, { kind: "accessor", name: "withCamera", static: false, private: false, access: { has: obj => "withCamera" in obj, get: obj => obj.withCamera, set: (obj, value) => { obj.withCamera = value; } }, metadata: _metadata }, _withCamera_initializers, _withCamera_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 });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #withCamera_accessor_storage = __runInitializers(this, _withCamera_initializers, void 0);
+        get withCamera() { return this.#withCamera_accessor_storage; }
+        set withCamera(value) { this.#withCamera_accessor_storage = value; }
+        render() {
+            return html ` <custom-pages> </custom-pages> `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _withCamera_extraInitializers);
+        }
+    });
+    return _classThis;
+})();
+
+export { CustomUpload };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vandeurenglenn/lite-elements",
-	"version": "0.3.19",
+	"version": "0.3.21",
 	"description": "set of lite elements following Material Design 3 spec",
 	"type": "module",
 	"scripts": {
@@ -440,6 +440,22 @@
 		"./typography.js": {
 			"import": "./exports/typography.js",
 			"types": "./exports/typography/typography.d.ts"
+		},
+		"./upload-file": {
+			"import": "./exports/upload-file.js",
+			"types": "./exports/upload/upload-file.d.ts"
+		},
+		"./upload-file.js": {
+			"import": "./exports/upload-file.js",
+			"types": "./exports/upload/upload-file.d.ts"
+		},
+		"./upload": {
+			"import": "./exports/upload.js",
+			"types": "./exports/upload/upload.d.ts"
+		},
+		"./upload.js": {
+			"import": "./exports/upload.js",
+			"types": "./exports/upload/upload.d.ts"
 		}
 	}
 }