@vandeurenglenn/lite-elements 0.3.36 → 0.3.37
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as e,a as t,e as
|
|
1
|
+
import{_ as e,a as t,e as r}from"./custom-element-BOdKJYdz.js";import{a,x as s,s as o}from"./property-D-Y1CFIF.js";import"./drawer.js";import"./drawer-button.js";import"./drawer-item.js";import"./top-app-bar.js";import"./column-CNOGwAhj.js";import"./elevation.js";import"./button.js";import"./pane.js";import"./icon-button.js";import"./icon.js";import"./it-Dft_Rjy-.js";import"./row-BHK6Zell.js";let i=(()=>{let i,n,d,c,l,p,m,h,w,u=[r("custom-drawer-layout")],g=[],b=o,y=[],_=[],T=[],k=[],f=[],v=[],O=[],j=[],D=[],x=[],I=[],B=[],C=[],$=[];return class extends b{static{n=this}static{const r="function"==typeof Symbol&&Symbol.metadata?Object.create(b[Symbol.metadata]??null):void 0;d=[a({type:Boolean,reflect:!0,attribute:"drawer-open"})],c=[a({type:Boolean,reflect:!0,attribute:"keep-closed"})],l=[a({type:Boolean,reflect:!0})],p=[a({type:String})],m=[a({type:String})],h=[a({type:String})],w=[a()],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:r},y,_),e(this,null,c,{kind:"accessor",name:"keepClosed",static:!1,private:!1,access:{has:e=>"keepClosed"in e,get:e=>e.keepClosed,set:(e,t)=>{e.keepClosed=t}},metadata:r},T,k),e(this,null,l,{kind:"accessor",name:"narrow",static:!1,private:!1,access:{has:e=>"narrow"in e,get:e=>e.narrow,set:(e,t)=>{e.narrow=t}},metadata:r},f,v),e(this,null,p,{kind:"accessor",name:"drawerType",static:!1,private:!1,access:{has:e=>"drawerType"in e,get:e=>e.drawerType,set:(e,t)=>{e.drawerType=t}},metadata:r},O,j),e(this,null,m,{kind:"accessor",name:"appBarType",static:!1,private:!1,access:{has:e=>"appBarType"in e,get:e=>e.appBarType,set:(e,t)=>{e.appBarType=t}},metadata:r},D,x),e(this,null,h,{kind:"accessor",name:"mainDrawerId",static:!1,private:!1,access:{has:e=>"mainDrawerId"in e,get:e=>e.mainDrawerId,set:(e,t)=>{e.mainDrawerId=t}},metadata:r},I,B),e(this,null,w,{kind:"accessor",name:"mobileTrigger",static:!1,private:!1,access:{has:e=>"mobileTrigger"in e,get:e=>e.mobileTrigger,set:(e,t)=>{e.mobileTrigger=t}},metadata:r},C,$),e(null,i={value:n},u,{kind:"class",name:n.name,metadata:r},null,g),n=i.value,r&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:r}),t(n,g)}#e=t(this,y,!1);get drawerOpen(){return this.#e}set drawerOpen(e){this.#e=e}#t=(t(this,_),t(this,T,!1));get keepClosed(){return this.#t}set keepClosed(e){this.#t=e}#r=(t(this,k),t(this,f,!1));get narrow(){return this.#r}set narrow(e){this.#r=e}#a=(t(this,v),t(this,O,"modal"));get drawerType(){return this.#a}set drawerType(e){this.#a=e}#s=(t(this,j),t(this,D,"center-aligned"));get appBarType(){return this.#s}set appBarType(e){this.#s=e}#o=(t(this,x),t(this,I,crypto.randomUUID()));get mainDrawerId(){return this.#o}set mainDrawerId(e){this.#o=e}#i=(t(this,B),t(this,C,"(max-width: 860px)"));get mobileTrigger(){return this.#i}set mobileTrigger(e){this.#i=e}onChange(e,t){if("mobileTrigger"===e){const e=matchMedia(t);this._onnarrow({detail:e.matches})}}connectedCallback(){document.addEventListener("custom-pane-close",(({detail:e})=>{this.mainDrawerId===e&&(this.drawerOpen=!1)})),document.addEventListener("custom-pane-open",(({detail:e})=>{this.mainDrawerId!==e||this.keepClosed||(this.drawerOpen=!0)})),document.addEventListener("custom-theme-narrow",this._onnarrow.bind(this))}_onnarrow({detail:e}){if(this.narrow=e,this.keepClosed)return this.drawerOpen=!1;this.drawerOpen=!e}_click=(t(this,$),()=>{this.narrow&&(this.drawerOpen=!this.drawerOpen)});render(){return s`<style>
|
|
2
2
|
:host {
|
|
3
3
|
--custom-drawer-width: 320px;
|
|
4
4
|
display: flex;
|
|
@@ -93,4 +93,4 @@ import{_ as e,a as t,e as a}from"./custom-element-BOdKJYdz.js";import{a as r,x a
|
|
|
93
93
|
<slot></slot>
|
|
94
94
|
</main>
|
|
95
95
|
</slot>
|
|
96
|
-
</flex-column> `}},
|
|
96
|
+
</flex-column> `}},n})();export{i as CustomDrawerLayout};
|
package/exports/bundle/theme.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{_ as e,a as t,e as s}from"./custom-element-BOdKJYdz.js";import{a,s as o}from"./property-D-Y1CFIF.js";let i=(()=>{let i,r,n,l,c,m,d=[s("custom-theme")],g=[],h=o,
|
|
1
|
+
import{_ as e,a as t,e as s}from"./custom-element-BOdKJYdz.js";import{a,s as o}from"./property-D-Y1CFIF.js";let i=(()=>{let i,r,n,l,c,m,d=[s("custom-theme")],g=[],h=o,u=[],b=[],y=[],p=[],_=[],f=[],w=[],S=[];return class extends h{static{r=this}static{const s="function"==typeof Symbol&&Symbol.metadata?Object.create(h[Symbol.metadata]??null):void 0;n=[a({type:Boolean,attribute:"load-font"})],l=[a({type:Boolean,attribute:"load-symbols"})],c=[a({type:String,attribute:"mobile-trigger"})],m=[a({type:Boolean})],e(this,null,n,{kind:"accessor",name:"loadFont",static:!1,private:!1,access:{has:e=>"loadFont"in e,get:e=>e.loadFont,set:(e,t)=>{e.loadFont=t}},metadata:s},u,b),e(this,null,l,{kind:"accessor",name:"loadSymbols",static:!1,private:!1,access:{has:e=>"loadSymbols"in e,get:e=>e.loadSymbols,set:(e,t)=>{e.loadSymbols=t}},metadata:s},y,p),e(this,null,c,{kind:"accessor",name:"mobileTrigger",static:!1,private:!1,access:{has:e=>"mobileTrigger"in e,get:e=>e.mobileTrigger,set:(e,t)=>{e.mobileTrigger=t}},metadata:s},_,f),e(this,null,m,{kind:"accessor",name:"narrow",static:!1,private:!1,access:{has:e=>"narrow"in e,get:e=>e.narrow,set:(e,t)=>{e.narrow=t}},metadata:s},w,S),e(null,i={value:r},d,{kind:"class",name:r.name,metadata:s},null,g),r=i.value,s&&Object.defineProperty(r,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s}),t(r,g)}#e;#t=t(this,u,!0);get loadFont(){return this.#t}set loadFont(e){this.#t=e}#s=(t(this,b),t(this,y,!0));get loadSymbols(){return this.#s}set loadSymbols(e){this.#s=e}#a=(t(this,p),t(this,_,"(max-width: 860px)"));get mobileTrigger(){return this.#a}set mobileTrigger(e){this.#a=e}#o=(t(this,f),t(this,w,void 0));get narrow(){return this.#o}set narrow(e){this.#o=e}#i(e,t,s){let a=document.createElement("link");if(a.rel=t,a.href=e,s)for(const e of s)a.setAttribute(e,"");document.head.appendChild(a)}#r(){let e="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&display=swap";return globalThis.symbols&&(e+=`&text=${globalThis.symbols}`),e}onChange(e,t){"mobileTrigger"===e&&this.#n()}#n(){this.#e=matchMedia(this.mobileTrigger),this.#e.onchange=this.#l,this.#l({matches:this.#e.matches})}connectedCallback(){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.#i("https://fonts.googleapis.com","preconnect"),this.#i("https://fonts.gstatic.com","preconnect",["crossorigin"]),this.loadFont&&this.#i("https://fonts.googleapis.com/css2?family=Roboto&display=swap","stylesheet"),this.loadSymbols&&this.#i(this.#r(),"stylesheet")}#l({matches:e}){this.narrow=e,document.dispatchEvent(new CustomEvent("custom-theme-narrow",{detail:this.narrow}))}set language(e){this.setAttribute("language",e)}get language(){return this.getAttribute("language")||"css"}async load(e){if("js"===this.language){const t=await import(e);for(const[e,s]of Object.entries(t)){const t=`--${e.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase()}`;document.body.style.setProperty(t,s)}}else if("css"===this.language){const t=document.createElement("link");t.rel="stylesheet",t.href=e,document.head.appendChild(t)}}constructor(){super(...arguments),t(this,S)}},r})();export{i as CustomTheme};
|
|
@@ -12,6 +12,8 @@ export declare class CustomDrawerLayout extends LiteElement {
|
|
|
12
12
|
accessor drawerType: 'modal' | undefined;
|
|
13
13
|
accessor appBarType: AppBarTypes;
|
|
14
14
|
accessor mainDrawerId: string;
|
|
15
|
+
accessor mobileTrigger: string;
|
|
16
|
+
onChange(propertyKey: string, value: any): void;
|
|
15
17
|
connectedCallback(): void;
|
|
16
18
|
_onnarrow({ detail }: CustomEvent): boolean;
|
|
17
19
|
private _click;
|
package/exports/drawer-layout.js
CHANGED
|
@@ -39,6 +39,9 @@ let CustomDrawerLayout = (() => {
|
|
|
39
39
|
let _mainDrawerId_decorators;
|
|
40
40
|
let _mainDrawerId_initializers = [];
|
|
41
41
|
let _mainDrawerId_extraInitializers = [];
|
|
42
|
+
let _mobileTrigger_decorators;
|
|
43
|
+
let _mobileTrigger_initializers = [];
|
|
44
|
+
let _mobileTrigger_extraInitializers = [];
|
|
42
45
|
(class extends _classSuper {
|
|
43
46
|
static { _classThis = this; }
|
|
44
47
|
static {
|
|
@@ -49,12 +52,14 @@ let CustomDrawerLayout = (() => {
|
|
|
49
52
|
_drawerType_decorators = [property({ type: String })];
|
|
50
53
|
_appBarType_decorators = [property({ type: String })];
|
|
51
54
|
_mainDrawerId_decorators = [property({ type: String })];
|
|
55
|
+
_mobileTrigger_decorators = [property()];
|
|
52
56
|
__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);
|
|
53
57
|
__esDecorate(this, null, _keepClosed_decorators, { kind: "accessor", name: "keepClosed", static: false, private: false, access: { has: obj => "keepClosed" in obj, get: obj => obj.keepClosed, set: (obj, value) => { obj.keepClosed = value; } }, metadata: _metadata }, _keepClosed_initializers, _keepClosed_extraInitializers);
|
|
54
58
|
__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);
|
|
55
59
|
__esDecorate(this, null, _drawerType_decorators, { kind: "accessor", name: "drawerType", static: false, private: false, access: { has: obj => "drawerType" in obj, get: obj => obj.drawerType, set: (obj, value) => { obj.drawerType = value; } }, metadata: _metadata }, _drawerType_initializers, _drawerType_extraInitializers);
|
|
56
60
|
__esDecorate(this, null, _appBarType_decorators, { kind: "accessor", name: "appBarType", static: false, private: false, access: { has: obj => "appBarType" in obj, get: obj => obj.appBarType, set: (obj, value) => { obj.appBarType = value; } }, metadata: _metadata }, _appBarType_initializers, _appBarType_extraInitializers);
|
|
57
61
|
__esDecorate(this, null, _mainDrawerId_decorators, { kind: "accessor", name: "mainDrawerId", static: false, private: false, access: { has: obj => "mainDrawerId" in obj, get: obj => obj.mainDrawerId, set: (obj, value) => { obj.mainDrawerId = value; } }, metadata: _metadata }, _mainDrawerId_initializers, _mainDrawerId_extraInitializers);
|
|
62
|
+
__esDecorate(this, null, _mobileTrigger_decorators, { kind: "accessor", name: "mobileTrigger", static: false, private: false, access: { has: obj => "mobileTrigger" in obj, get: obj => obj.mobileTrigger, set: (obj, value) => { obj.mobileTrigger = value; } }, metadata: _metadata }, _mobileTrigger_initializers, _mobileTrigger_extraInitializers);
|
|
58
63
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
59
64
|
_classThis = _classDescriptor.value;
|
|
60
65
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
@@ -79,9 +84,16 @@ let CustomDrawerLayout = (() => {
|
|
|
79
84
|
#mainDrawerId_accessor_storage = (__runInitializers(this, _appBarType_extraInitializers), __runInitializers(this, _mainDrawerId_initializers, crypto.randomUUID()));
|
|
80
85
|
get mainDrawerId() { return this.#mainDrawerId_accessor_storage; }
|
|
81
86
|
set mainDrawerId(value) { this.#mainDrawerId_accessor_storage = value; }
|
|
87
|
+
#mobileTrigger_accessor_storage = (__runInitializers(this, _mainDrawerId_extraInitializers), __runInitializers(this, _mobileTrigger_initializers, '(max-width: 860px)'));
|
|
88
|
+
get mobileTrigger() { return this.#mobileTrigger_accessor_storage; }
|
|
89
|
+
set mobileTrigger(value) { this.#mobileTrigger_accessor_storage = value; }
|
|
90
|
+
onChange(propertyKey, value) {
|
|
91
|
+
if (propertyKey === 'mobileTrigger') {
|
|
92
|
+
const media = matchMedia(value);
|
|
93
|
+
this._onnarrow({ detail: media.matches });
|
|
94
|
+
}
|
|
95
|
+
}
|
|
82
96
|
connectedCallback() {
|
|
83
|
-
const media = matchMedia('(max-width: 860px)');
|
|
84
|
-
this._onnarrow({ detail: media.matches });
|
|
85
97
|
document.addEventListener('custom-pane-close', ({ detail }) => {
|
|
86
98
|
if (this.mainDrawerId === detail)
|
|
87
99
|
this.drawerOpen = false;
|
|
@@ -101,7 +113,7 @@ let CustomDrawerLayout = (() => {
|
|
|
101
113
|
else
|
|
102
114
|
this.drawerOpen = true;
|
|
103
115
|
}
|
|
104
|
-
_click = (__runInitializers(this,
|
|
116
|
+
_click = (__runInitializers(this, _mobileTrigger_extraInitializers), () => {
|
|
105
117
|
if (this.narrow)
|
|
106
118
|
this.drawerOpen = !this.drawerOpen;
|
|
107
119
|
});
|
package/exports/theme.js
CHANGED
|
@@ -100,10 +100,10 @@ let CustomTheme = (() => {
|
|
|
100
100
|
if (this.loadSymbols)
|
|
101
101
|
this.#loadLink(this.#generateSymbolsLink(), 'stylesheet');
|
|
102
102
|
}
|
|
103
|
-
#mediaQueryChange
|
|
103
|
+
#mediaQueryChange({ matches }) {
|
|
104
104
|
this.narrow = matches;
|
|
105
105
|
document.dispatchEvent(new CustomEvent('custom-theme-narrow', { detail: this.narrow }));
|
|
106
|
-
}
|
|
106
|
+
}
|
|
107
107
|
set language(value) {
|
|
108
108
|
this.setAttribute('language', value);
|
|
109
109
|
}
|
|
@@ -130,6 +130,10 @@ let CustomTheme = (() => {
|
|
|
130
130
|
document.head.appendChild(link);
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
|
+
constructor() {
|
|
134
|
+
super(...arguments);
|
|
135
|
+
__runInitializers(this, _narrow_extraInitializers);
|
|
136
|
+
}
|
|
133
137
|
});
|
|
134
138
|
return _classThis;
|
|
135
139
|
})();
|