@vandeurenglenn/lite-elements 0.3.42 → 0.3.43
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.
- package/exports/bundle/drawer.js +7 -4
- package/exports/bundle/pane.js +20 -12
- package/package.json +2 -2
package/exports/bundle/drawer.js
CHANGED
|
@@ -6,7 +6,11 @@ import{_ as t,a as e,e as s}from"./custom-element-CAdbJRVg.js";import{i as a,r a
|
|
|
6
6
|
custom-pane {
|
|
7
7
|
box-sizing: border-box;
|
|
8
8
|
height: 100%;
|
|
9
|
-
--custom-pane-width: var(--custom-drawer-
|
|
9
|
+
--custom-pane-width: var(--custom-drawer-width, 320px);
|
|
10
|
+
--custom-pane-header-height: var(--custom-drawer-header-height, 54px);
|
|
11
|
+
--custom-pane-header-padding: var(--custom-drawer-header-padding, 8px);
|
|
12
|
+
--custom-pane-footer-height: var(--custom-drawer-footer-height, 54px);
|
|
13
|
+
--custom-pane-footer-padding: var(--custom-drawer-footer-padding, 8px);
|
|
10
14
|
}
|
|
11
15
|
|
|
12
16
|
slot[name='headline']::slotted(*) {
|
|
@@ -26,7 +30,6 @@ import{_ as t,a as e,e as s}from"./custom-element-CAdbJRVg.js";import{i as a,r a
|
|
|
26
30
|
::slotted([slot='footer']) {
|
|
27
31
|
display: block;
|
|
28
32
|
box-sizing: border-box;
|
|
29
|
-
min-height: 48px;
|
|
30
33
|
border-top: 1px solid rgba(0, 0, 0, 0.14);
|
|
31
34
|
}
|
|
32
35
|
|
|
@@ -47,11 +50,11 @@ import{_ as t,a as e,e as s}from"./custom-element-CAdbJRVg.js";import{i as a,r a
|
|
|
47
50
|
flex-direction: column;
|
|
48
51
|
width: 100%;
|
|
49
52
|
}
|
|
50
|
-
`;let l=(()=>{let a,l,c,m,
|
|
53
|
+
`;let l=(()=>{let a,l,c,d,m,p,h,g=[s("custom-drawer")],u=[],y=r,f=[],v=[],b=[],_=[],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})],d=[o({type:Boolean,reflect:!0})],m=[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},f,v),t(this,null,d,{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},b,_),t(this,null,m,{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,a={value:l},g,{kind:"class",name:l.name,metadata:e},null,u),l=a.value,e&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,f,void 0);get open(){return this.#t}set open(t){this.#t=t}#e=(e(this,v),e(this,b,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`
|
|
51
54
|
<custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type} .id=${this.id}>
|
|
52
55
|
<slot name="headline" slot="headline"></slot>
|
|
53
56
|
<slot name="menu-button" slot="menu-button"></slot>
|
|
54
57
|
<slot name="content" slot="content"></slot>
|
|
55
58
|
<slot name="footer" slot="footer"></slot>
|
|
56
59
|
</custom-pane>
|
|
57
|
-
`}constructor(){super(...arguments),e(this,z)}static{e(l,
|
|
60
|
+
`}constructor(){super(...arguments),e(this,z)}static{e(l,u)}},l})();export{l as CustomDrawer};
|
package/exports/bundle/pane.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{
|
|
1
|
+
import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{L as o,i as a,r as i,x as r,s as n}from"./property-BYA8Sw2t.js";import"./elevation.js";import"./icon-button.js";import"./icon.js";import"./button.js";Symbol.metadata??=Symbol("metadata"),globalThis.pubsub=globalThis.pubsub||new o;var c=a`
|
|
2
2
|
:host {
|
|
3
|
-
--custom-pane-width: 100%;
|
|
4
3
|
display: flex;
|
|
5
4
|
flex-direction: column;
|
|
6
5
|
height: 100%;
|
|
@@ -14,7 +13,7 @@ import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{i as o,r a
|
|
|
14
13
|
pointer-events: none;
|
|
15
14
|
opacity: 0;
|
|
16
15
|
width: 100%;
|
|
17
|
-
max-width: var(--custom-pane-width);
|
|
16
|
+
max-width: var(--custom-pane-width, 100%);
|
|
18
17
|
transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
|
|
19
18
|
var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
|
|
20
19
|
}
|
|
@@ -54,7 +53,7 @@ import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{i as o,r a
|
|
|
54
53
|
}
|
|
55
54
|
|
|
56
55
|
:host([open][mobile]) {
|
|
57
|
-
position:
|
|
56
|
+
position: absolute;
|
|
58
57
|
}
|
|
59
58
|
|
|
60
59
|
aside {
|
|
@@ -65,19 +64,28 @@ import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{i as o,r a
|
|
|
65
64
|
}
|
|
66
65
|
|
|
67
66
|
.content {
|
|
68
|
-
|
|
67
|
+
flex: 1;
|
|
69
68
|
width: 100%;
|
|
70
|
-
overflow-y: auto;
|
|
71
69
|
}
|
|
72
70
|
|
|
73
|
-
|
|
74
|
-
|
|
71
|
+
:host([right]) custom-icon-button {
|
|
72
|
+
transform: rotateZ(180deg);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
slot[name='header']::slotted(flex-row) {
|
|
76
|
+
padding: var(--custom-pane-header-padding, 8px);
|
|
77
|
+
height: var(--custom-pane-header-height, 54px);
|
|
78
|
+
box-sizing: border-box;
|
|
79
|
+
align-items: center;
|
|
75
80
|
}
|
|
76
81
|
|
|
77
|
-
|
|
78
|
-
|
|
82
|
+
slot[name='footer']::slotted(flex-row) {
|
|
83
|
+
padding: var(--custom-pane-footer-padding, 8px);
|
|
84
|
+
height: var(--custom-pane-footer-height, 54px);
|
|
85
|
+
box-sizing: border-box;
|
|
86
|
+
align-items: center;
|
|
79
87
|
}
|
|
80
|
-
`;let
|
|
88
|
+
`;let l=(()=>{let o,a,l,m,d,h,p,g,u=[s("custom-pane")],f=[],b=n,y=[],v=[],_=[],x=[],w=[],k=[],z=[],j=[],S=[],B=[],P=[],X=[];return class extends b{static{a=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(b[Symbol.metadata]??null):void 0;l=[i({type:Boolean,reflect:!0})],m=[i({type:Boolean,reflect:!0})],d=[i({type:String,reflect:!0})],h=[i({type:Boolean,reflect:!0})],p=[i({type:Boolean,reflect:!0})],g=[i({type:String})],e(this,null,l,{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,m,{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},_,x),e(this,null,d,{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},w,k),e(this,null,h,{kind:"accessor",name:"left",static:!1,private:!1,access:{has:e=>"left"in e,get:e=>e.left,set:(e,t)=>{e.left=t}},metadata:t},z,j),e(this,null,p,{kind:"accessor",name:"right",static:!1,private:!1,access:{has:e=>"right"in e,get:e=>e.right,set:(e,t)=>{e.right=t}},metadata:t},S,B),e(this,null,g,{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},P,X),e(null,o={value:a},u,{kind:"class",name:a.name,metadata:t},null,f),a=o.value,t&&Object.defineProperty(a,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,_,!1));get mobile(){return this.#t}set mobile(e){this.#t=e}#s=(t(this,x),t(this,w,void 0));get type(){return this.#s}set type(e){this.#s=e}#o=(t(this,k),t(this,z,!0));get left(){return this.#o}set left(e){this.#o=e}#a=(t(this,j),t(this,S,!1));get right(){return this.#a}set right(e){this.#a=e}#i=(t(this,B),t(this,P,void 0));get id(){return this.#i}set id(e){this.#i=e}closePane(e){e.stopPropagation(),this.open=!1,document.dispatchEvent(new CustomEvent("custom-pane-close",{detail:this.id||""+(this.left?"left":"right")}))}static styles=[c];render(){return r`
|
|
81
89
|
<custom-elevation></custom-elevation>
|
|
82
90
|
<aside>
|
|
83
91
|
<slot name="header">
|
|
@@ -95,4 +103,4 @@ import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{i as o,r a
|
|
|
95
103
|
<slot name="footer"></slot>
|
|
96
104
|
</flex-row>
|
|
97
105
|
</aside>
|
|
98
|
-
`}constructor(){super(...arguments),t(this,X)}static{t(
|
|
106
|
+
`}constructor(){super(...arguments),t(this,X)}static{t(a,f)}},a})();export{l as CustomPane};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vandeurenglenn/lite-elements",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.43",
|
|
4
4
|
"description": "set of lite elements following Material Design 3 spec",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"@material-design-icons/svg": "^0.14.13",
|
|
22
22
|
"@material-symbols/svg-400": "^0.17.0",
|
|
23
23
|
"@material/web": "^1.3.0",
|
|
24
|
-
"@vandeurenglenn/custom-shared-styles": "^0.0.
|
|
24
|
+
"@vandeurenglenn/custom-shared-styles": "^0.0.11",
|
|
25
25
|
"@vandeurenglenn/flex-elements": "^1.3.1",
|
|
26
26
|
"@vandeurenglenn/lite": "^0.2.37",
|
|
27
27
|
"custom-element-decorator": "^0.6.0"
|