@vandeurenglenn/lite-elements 0.3.18
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/banner/banner.d.ts +7 -0
- package/exports/banner.js +68 -0
- package/exports/bundle/banner.js +37 -0
- package/exports/bundle/button.js +144 -0
- package/exports/bundle/card.js +140 -0
- package/exports/bundle/code.js +35 -0
- package/exports/bundle/custom-element-c2e883ba.js +1 -0
- package/exports/bundle/demo-elements.js +1 -0
- package/exports/bundle/demo-icons.js +16 -0
- package/exports/bundle/demo-shell.js +540 -0
- package/exports/bundle/demo.js +457 -0
- package/exports/bundle/dial.js +1 -0
- package/exports/bundle/dialog.js +149 -0
- package/exports/bundle/divider.js +21 -0
- package/exports/bundle/drawer-button.js +18 -0
- package/exports/bundle/drawer-item.js +39 -0
- package/exports/bundle/drawer-layout.js +96 -0
- package/exports/bundle/drawer.js +56 -0
- package/exports/bundle/dropdown-menu.js +59 -0
- package/exports/bundle/dropdown.js +26 -0
- package/exports/bundle/elements.js +1 -0
- package/exports/bundle/elevation.js +56 -0
- package/exports/bundle/hour-field.js +1 -0
- package/exports/bundle/icon-button.js +13 -0
- package/exports/bundle/icon-set.js +5 -0
- package/exports/bundle/icon.js +16 -0
- package/exports/bundle/index-3c006227.js +1 -0
- package/exports/bundle/index.html +590 -0
- package/exports/bundle/input.js +6 -0
- package/exports/bundle/it-d4d177bf.js +1 -0
- package/exports/bundle/list-item.js +43 -0
- package/exports/bundle/list.js +1 -0
- package/exports/bundle/menu.js +13 -0
- package/exports/bundle/menu2.js +1 -0
- package/exports/bundle/minute-field.js +5 -0
- package/exports/bundle/pages.js +43 -0
- package/exports/bundle/pane.js +96 -0
- package/exports/bundle/property-58e28172.js +11 -0
- package/exports/bundle/query-73dacde5.js +1 -0
- package/exports/bundle/rail.js +58 -0
- package/exports/bundle/root.js +8 -0
- package/exports/bundle/scroll-mixin.js +1 -0
- package/exports/bundle/section.js +11 -0
- package/exports/bundle/section2.js +25 -0
- package/exports/bundle/select-mixin.js +1 -0
- package/exports/bundle/selector-mixin.js +1 -0
- package/exports/bundle/selector.js +31 -0
- package/exports/bundle/supporting-pane.js +47 -0
- package/exports/bundle/tab.js +22 -0
- package/exports/bundle/tabs.js +51 -0
- package/exports/bundle/text-field.js +10 -0
- package/exports/bundle/theme.js +1 -0
- package/exports/bundle/themes/default/colors.module.css +180 -0
- package/exports/bundle/themes/default/missing/motion.css +4 -0
- package/exports/bundle/themes/default/missing/shape.css +13 -0
- package/exports/bundle/themes/default/missing/theme.dark.css +5 -0
- package/exports/bundle/themes/default/missing/theme.light.css +5 -0
- package/exports/bundle/themes/default/missing/tokens.css +9 -0
- package/exports/bundle/themes/default/theme.css +10 -0
- package/exports/bundle/themes/default/theme.dark.css +33 -0
- package/exports/bundle/themes/default/theme.light.css +33 -0
- package/exports/bundle/themes/default/tokens.css +256 -0
- package/exports/bundle/themes/default/typography.module.css +150 -0
- package/exports/bundle/time-picker.js +21 -0
- package/exports/bundle/title.js +1 -0
- package/exports/bundle/toggle-button.js +4 -0
- package/exports/bundle/toggle.js +5 -0
- package/exports/bundle/top-app-bar-e6e33a9e.js +114 -0
- package/exports/bundle/top-app-bar.js +1 -0
- package/exports/bundle/types.js +1 -0
- package/exports/bundle/typography.js +156 -0
- package/exports/button.js +227 -0
- package/exports/card/card.d.ts +13 -0
- package/exports/card.js +187 -0
- package/exports/code.js +77 -0
- package/exports/demo-elements.d.ts +9 -0
- package/exports/demo-elements.js +10 -0
- package/exports/demo-icons.js +48 -0
- package/exports/demo-shell.js +648 -0
- package/exports/demo.js +524 -0
- package/exports/dial.js +1 -0
- package/exports/dialog.js +256 -0
- package/exports/divider/divider.d.ts +17 -0
- package/exports/divider.js +54 -0
- package/exports/drawer/drawer-button.d.ts +9 -0
- package/exports/drawer/drawer-layout.d.ts +19 -0
- package/exports/drawer/drawer.d.ts +13 -0
- package/exports/drawer-button.js +83 -0
- package/exports/drawer-item.js +69 -0
- package/exports/drawer-layout.js +209 -0
- package/exports/drawer.js +140 -0
- package/exports/dropdown-menu.js +172 -0
- package/exports/dropdown.js +68 -0
- package/exports/elements.d.ts +63 -0
- package/exports/elements.js +41 -0
- package/exports/elevation/elevation.d.ts +11 -0
- package/exports/elevation.js +97 -0
- package/exports/hour-field.js +1 -0
- package/exports/icon-button.js +59 -0
- package/exports/icon-set.js +52 -0
- package/exports/icon.js +103 -0
- package/exports/input.js +36 -0
- package/exports/list/list.d.ts +1 -0
- package/exports/list-item.js +127 -0
- package/exports/list.js +1 -0
- package/exports/menu.js +68 -0
- package/exports/menu2.js +1 -0
- package/exports/minute-field.js +36 -0
- package/exports/mixins/scroll-mixin.d.ts +13 -0
- package/exports/mixins/select-mixin.d.ts +32 -0
- package/exports/mixins/selector-mixin.d.ts +8 -0
- package/exports/pages.js +88 -0
- package/exports/pane/pane.d.ts +14 -0
- package/exports/pane.js +182 -0
- package/exports/rail/rail.d.ts +9 -0
- package/exports/rail.js +124 -0
- package/exports/root.js +39 -0
- package/exports/scroll-mixin.js +36 -0
- package/exports/section.js +54 -0
- package/exports/section2.js +58 -0
- package/exports/select-mixin.js +139 -0
- package/exports/selector-mixin.js +43 -0
- package/exports/selector.js +63 -0
- package/exports/supporting-pane/supporting-pane.d.ts +12 -0
- package/exports/supporting-pane.js +133 -0
- package/exports/tab.js +47 -0
- package/exports/tabs/menu.d.ts +1 -0
- package/exports/tabs/tab.d.ts +4 -0
- package/exports/tabs/tabs.d.ts +5 -0
- package/exports/tabs.js +80 -0
- package/exports/text-field.js +88 -0
- package/exports/theme/theme.d.ts +15 -0
- package/exports/theme.js +123 -0
- package/exports/themes/default/colors.module.css +180 -0
- package/exports/themes/default/missing/motion.css +4 -0
- package/exports/themes/default/missing/shape.css +13 -0
- package/exports/themes/default/missing/theme.dark.css +5 -0
- package/exports/themes/default/missing/theme.light.css +5 -0
- package/exports/themes/default/missing/tokens.css +9 -0
- package/exports/themes/default/theme.css +10 -0
- package/exports/themes/default/theme.dark.css +33 -0
- package/exports/themes/default/theme.light.css +33 -0
- package/exports/themes/default/tokens.css +256 -0
- package/exports/themes/default/typography.module.css +150 -0
- package/exports/time-picker/dial.d.ts +1 -0
- package/exports/time-picker/hour-field.d.ts +1 -0
- package/exports/time-picker.js +52 -0
- package/exports/title.js +1 -0
- package/exports/toggle/toggle-button.d.ts +13 -0
- package/exports/toggle-button.js +63 -0
- package/exports/toggle.js +78 -0
- package/exports/top-app-bar.js +143 -0
- package/exports/tslib.es6-d3ba6528.js +57 -0
- package/exports/types.d.ts +18 -0
- package/exports/types.js +1 -0
- package/exports/typography/title.d.ts +1 -0
- package/exports/typography.js +206 -0
- package/package.json +256 -0
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import{_ as e,a as t,e as o}from"./custom-element-c2e883ba.js";import{j as a,v as n,D as r}from"./property-58e28172.js";let s=(()=>{let s,i,l=[o("custom-drawer-item")],m=[],d=r;return class extends d{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;e(null,s={value:i},l,{kind:"class",name:i.name,metadata:t},null,m),i=s.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static styles=[a`
|
|
2
|
+
:host {
|
|
3
|
+
display: flex;
|
|
4
|
+
padding-left: 16px;
|
|
5
|
+
padding-right: 24px;
|
|
6
|
+
height: 100%;
|
|
7
|
+
min-height: 54px;
|
|
8
|
+
max-height: 54px;
|
|
9
|
+
width: 100%;
|
|
10
|
+
box-sizing: border-box;
|
|
11
|
+
border-radius: var(--md-sys-shape-corner-extra-large);
|
|
12
|
+
align-items: center;
|
|
13
|
+
pointer-events: auto;
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
slot {
|
|
18
|
+
pointer-events: none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
slot[name='icon']::slotted(*) {
|
|
22
|
+
margin-right: 12px;
|
|
23
|
+
height: 24px;
|
|
24
|
+
width: 24px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
slot[name='end']::slotted(*) {
|
|
28
|
+
margin-left: 12px;
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:host([non-interactive]) {
|
|
33
|
+
pointer-events: none;
|
|
34
|
+
}
|
|
35
|
+
`];render(){return n`
|
|
36
|
+
<slot name="icon"></slot>
|
|
37
|
+
<slot></slot>
|
|
38
|
+
<slot name="end"></slot>
|
|
39
|
+
`}static{t(i,m)}},i})();export{s as CustomDrawerItem};
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import{_ as e,a as t,e as a}from"./custom-element-c2e883ba.js";import{e as r,v as s,D as o}from"./property-58e28172.js";import"./drawer.js";import"./drawer-button.js";import"./drawer-item.js";import{F as n}from"./top-app-bar-e6e33a9e.js";import"./elevation.js";import"./button.js";import"./pane.js";import"./icon.js";import"./index-3c006227.js";import"./it-d4d177bf.js";customElements.define("flex-column",class FlexColumn extends n{constructor(){super(),this.direction="column"}});let i=(()=>{let n,i,d,c,p,l,m,w,h=[a("custom-drawer-layout")],u=[],y=o,g=[],_=[],b=[],f=[],k=[],v=[],O=[],T=[],x=[],D=[],j=[],I=[];return class extends y{static{i=this}static{const a="function"==typeof Symbol&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;d=[r({type:Boolean,reflect:!0,attribute:"drawer-open"})],c=[r({type:Boolean,reflect:!0,attribute:"keep-closed"})],p=[r({type:Boolean,reflect:!0})],l=[r({type:String})],m=[r({type:String})],w=[r({type:String})],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:a},g,_),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:a},b,f),e(this,null,p,{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:a},k,v),e(this,null,l,{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:a},O,T),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:a},x,D),e(this,null,w,{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:a},j,I),e(null,n={value:i},h,{kind:"class",name:i.name,metadata:a},null,u),i=n.value,a&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a}),t(i,u)}#e=t(this,g,!1);get drawerOpen(){return this.#e}set drawerOpen(e){this.#e=e}#t=(t(this,_),t(this,b,!1));get keepClosed(){return this.#t}set keepClosed(e){this.#t=e}#a=(t(this,f),t(this,k,!1));get narrow(){return this.#a}set narrow(e){this.#a=e}#r=(t(this,v),t(this,O,"modal"));get drawerType(){return this.#r}set drawerType(e){this.#r=e}#s=(t(this,T),t(this,x,"center-aligned"));get appBarType(){return this.#s}set appBarType(e){this.#s=e}#o=(t(this,D),t(this,j,crypto.randomUUID()));get mainDrawerId(){return this.#o}set mainDrawerId(e){this.#o=e}connectedCallback(){const e=matchMedia("(max-width: 860px)");this._onnarrow({detail:e.matches}),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)}_onnarrow({detail:e}){if(this.narrow=e,this.keepClosed)return this.drawerOpen=!1;this.drawerOpen=!e}_click=(t(this,I),()=>{this.narrow&&(this.drawerOpen=!this.drawerOpen)});render(){return s`<style>
|
|
2
|
+
:host {
|
|
3
|
+
--custom-drawer-width: 320px;
|
|
4
|
+
display: flex;
|
|
5
|
+
flex-direction: row;
|
|
6
|
+
inset: 0;
|
|
7
|
+
background: var(--md-sys-color-surface);
|
|
8
|
+
color: var(--md-sys-color-on-surface);
|
|
9
|
+
background-blend-mode: hue;
|
|
10
|
+
position: absolute;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
main {
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
overflow-y: auto;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
:host([drawer-open][narrow]) .scrim {
|
|
21
|
+
z-index: 1000;
|
|
22
|
+
position: fixed;
|
|
23
|
+
inset: 0;
|
|
24
|
+
background-color: var(--md-sys-color-scrim);
|
|
25
|
+
opacity: 0.44;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
custom-drawer {
|
|
29
|
+
--custom-pane-width: var(--custom-drawer-width, 320px);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
:host(:not([narrow])) .middle-pane {
|
|
33
|
+
will-change: width, transform;
|
|
34
|
+
width: calc(100% - var(--custom-drawer-width));
|
|
35
|
+
height: 100%;
|
|
36
|
+
position: absolute;
|
|
37
|
+
transform: translateX(var(--custom-drawer-width));
|
|
38
|
+
|
|
39
|
+
transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms width,
|
|
40
|
+
var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:host(:not([drawer-open])) .middle-pane {
|
|
44
|
+
transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms width,
|
|
45
|
+
var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
|
|
46
|
+
transform: translateX(0);
|
|
47
|
+
width: 100%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
:host([narrow]) .middle-pane {
|
|
51
|
+
width: 100%;
|
|
52
|
+
transform: 0;
|
|
53
|
+
left: 0;
|
|
54
|
+
}
|
|
55
|
+
</style>
|
|
56
|
+
<span class="scrim" @click=${this._click}></span>
|
|
57
|
+
|
|
58
|
+
<slot name="drawer">
|
|
59
|
+
<custom-drawer
|
|
60
|
+
@click=${this._click}
|
|
61
|
+
.mobile=${this.narrow}
|
|
62
|
+
.open=${this.drawerOpen}
|
|
63
|
+
.type=${this.drawerType}
|
|
64
|
+
.id=${this.mainDrawerId}
|
|
65
|
+
>
|
|
66
|
+
<slot name="drawer-headline" slot="headline"></slot>
|
|
67
|
+
<slot name="drawer-menu-button" slot="menu-button"></slot>
|
|
68
|
+
<slot name="drawer-content" slot="content"></slot>
|
|
69
|
+
<slot name="drawer-footer" slot="footer"></slot>
|
|
70
|
+
</custom-drawer>
|
|
71
|
+
</slot>
|
|
72
|
+
|
|
73
|
+
<flex-column class="middle-pane">
|
|
74
|
+
<!-- TODO: do we want a header? -->
|
|
75
|
+
<slot name="header"></slot>
|
|
76
|
+
|
|
77
|
+
<slot name="top-app-bar">
|
|
78
|
+
<custom-top-app-bar .type=${this.appBarType}>
|
|
79
|
+
<slot name="top-app-bar-start" slot="start">
|
|
80
|
+
<slot name="drawer-menu-button">
|
|
81
|
+
<custom-drawer-button .mobile=${this.narrow} ?drawer-open=${this.drawerOpen} .id=${this.mainDrawerId}>
|
|
82
|
+
menu
|
|
83
|
+
</custom-drawer-button>
|
|
84
|
+
</slot>
|
|
85
|
+
</slot>
|
|
86
|
+
<slot name="top-app-bar-title" slot="title"></slot>
|
|
87
|
+
<slot name="top-app-bar-end" slot="end"></slot>
|
|
88
|
+
</custom-top-app-bar>
|
|
89
|
+
</slot>
|
|
90
|
+
|
|
91
|
+
<slot name="content">
|
|
92
|
+
<main>
|
|
93
|
+
<slot></slot>
|
|
94
|
+
</main>
|
|
95
|
+
</slot>
|
|
96
|
+
</flex-column> `}},i})();export{i as CustomDrawerLayout};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import{_ as t,a as e,e as s}from"./custom-element-c2e883ba.js";import{e as a,v as o,D as i}from"./property-58e28172.js";import"./elevation.js";import"./button.js";import"./pane.js";import"./icon.js";import"./index-3c006227.js";let r=(()=>{let r,n,l,c,m,d,p,h=[s("custom-drawer")],g=[],y=i,u=[],b=[],_=[],f=[],v=[],x=[],w=[],j=[],k=[],S=[];return class extends y{static{n=this}static{const s="function"==typeof Symbol&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;l=[a({type:Boolean,reflect:!0})],c=[a({type:Boolean,reflect:!0})],m=[a({type:String,reflect:!0})],d=[a({type:Boolean})],p=[a({type:String})],t(this,null,l,{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:s},u,b),t(this,null,c,{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:s},_,f),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:s},v,x),t(this,null,d,{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:s},w,j),t(this,null,p,{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:s},k,S),t(null,r={value:n},h,{kind:"class",name:n.name,metadata:s},null,g),n=r.value,s&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:s}),e(n,g)}#t=e(this,u,void 0);get open(){return this.#t}set open(t){this.#t=t}#e=(e(this,b),e(this,_,void 0));get mobile(){return this.#e}set mobile(t){this.#e=t}#s=(e(this,f),e(this,v,void 0));get type(){return this.#s}set type(t){this.#s=t}#a=(e(this,x),e(this,w,void 0));get right(){return this.#a}set right(t){this.#a=t}#o=(e(this,j),e(this,k,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)}))}render(){return o`<style>
|
|
2
|
+
:host {
|
|
3
|
+
display: contents;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
custom-pane {
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
padding: 12px 24px;
|
|
9
|
+
height: 100%;
|
|
10
|
+
--custom-pane-width: var(--custom-drawer-with, 320px);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
slot[name='headline']::slotted(*) {
|
|
14
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
15
|
+
font-family: var(--md-sys-typescale-title-small-font-family-name);
|
|
16
|
+
font-style: var(--md-sys-typescale-title-small-font-family-style);
|
|
17
|
+
font-weight: var(--md-sys-typescale-title-small-font-weight);
|
|
18
|
+
font-size: var(--md-sys-typescale-title-small-font-size);
|
|
19
|
+
letter-spacing: var(--md-sys-typescale-title-small-tracking);
|
|
20
|
+
line-height: var(--md-sys-typescale-title-small-height);
|
|
21
|
+
text-transform: var(--md-sys-typescale-title-small-text-transform);
|
|
22
|
+
text-decoration: var(--md-sys-typescale-title-small-text-decoration);
|
|
23
|
+
text-transform: capitalize;
|
|
24
|
+
margin: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
::slotted([slot='footer']) {
|
|
28
|
+
display: block;
|
|
29
|
+
box-sizing: border-box;
|
|
30
|
+
min-height: 48px;
|
|
31
|
+
border-top: 1px solid rgba(0, 0, 0, 0.14);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
::slotted([slot='content']) {
|
|
35
|
+
display: flex;
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
height: 100%;
|
|
38
|
+
width: 100%;
|
|
39
|
+
overflow-y: auto;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
::slotted(*) {
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
aside {
|
|
47
|
+
width: 100%;
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
50
|
+
|
|
51
|
+
<custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type} .id=${this.id}>
|
|
52
|
+
<slot name="headline" slot="headline"></slot>
|
|
53
|
+
<slot name="menu-button" slot="menu-button"></slot>
|
|
54
|
+
<slot name="content" slot="content"></slot>
|
|
55
|
+
<slot name="footer" slot="footer"></slot>
|
|
56
|
+
</custom-pane> `}constructor(){super(...arguments),e(this,S)}},n})();export{r as CustomDrawer};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import{_ as t,a as e,e as s}from"./custom-element-c2e883ba.js";import{e as o,j as c,v as i,D as r}from"./property-58e28172.js";import{t as a}from"./query-73dacde5.js";import"./dropdown.js";import"./menu.js";import"./icon.js";import"./selector.js";import"./selector-mixin.js";import"./select-mixin.js";import"./index-3c006227.js";let n=(()=>{let n,l,m,d,p,h,u,_,g,v,b=[s("custom-dropdown-menu")],k=[],w=r,O=[],y=[],f=[],S=[],C=[],j=[],x=[],$=[],B=[],E=[],q=[],P=[],z=[],A=[],D=[],F=[];return class extends w{static{l=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(w[Symbol.metadata]??null):void 0;m=[o({type:Boolean,reflect:!0})],d=[o({type:Boolean,reflect:!0})],p=[o({type:Boolean,attribute:"close-on-select"})],h=[o({type:Boolean,attribute:"close-on-click"})],u=[o({type:Boolean,reflect:!0})],_=[o({type:String})],g=[a("custom-menu")],v=[a("custom-dropdown")],t(this,null,m,{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},O,y),t(this,null,d,{kind:"accessor",name:"bottom",static:!1,private:!1,access:{has:t=>"bottom"in t,get:t=>t.bottom,set:(t,e)=>{t.bottom=e}},metadata:e},f,S),t(this,null,p,{kind:"accessor",name:"closeOnSelect",static:!1,private:!1,access:{has:t=>"closeOnSelect"in t,get:t=>t.closeOnSelect,set:(t,e)=>{t.closeOnSelect=e}},metadata:e},C,j),t(this,null,h,{kind:"accessor",name:"closeOnClick",static:!1,private:!1,access:{has:t=>"closeOnClick"in t,get:t=>t.closeOnClick,set:(t,e)=>{t.closeOnClick=e}},metadata:e},x,$),t(this,null,u,{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,E),t(this,null,_,{kind:"accessor",name:"icon",static:!1,private:!1,access:{has:t=>"icon"in t,get:t=>t.icon,set:(t,e)=>{t.icon=e}},metadata:e},q,P),t(this,null,g,{kind:"accessor",name:"_menu",static:!1,private:!1,access:{has:t=>"_menu"in t,get:t=>t._menu,set:(t,e)=>{t._menu=e}},metadata:e},z,A),t(this,null,v,{kind:"accessor",name:"_dropdown",static:!1,private:!1,access:{has:t=>"_dropdown"in t,get:t=>t._dropdown,set:(t,e)=>{t._dropdown=e}},metadata:e},D,F),t(null,n={value:l},b,{kind:"class",name:l.name,metadata:e},null,k),l=n.value,e&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,O,void 0);get right(){return this.#t}set right(t){this.#t=t}#e=(e(this,y),e(this,f,void 0));get bottom(){return this.#e}set bottom(t){this.#e=t}#s=(e(this,S),e(this,C,!0));get closeOnSelect(){return this.#s}set closeOnSelect(t){this.#s=t}#o=(e(this,j),e(this,x,!0));get closeOnClick(){return this.#o}set closeOnClick(t){this.#o=t}#c=(e(this,$),e(this,B,void 0));get open(){return this.#c}set open(t){this.#c=t}#i=(e(this,E),e(this,q,"more_vert"));get icon(){return this.#i}set icon(t){this.#i=t}#r=(e(this,P),e(this,z,void 0));get _menu(){return this.#r}set _menu(t){this.#r=t}#a=(e(this,A),e(this,D,void 0));get _dropdown(){return this.#a}set _dropdown(t){this.#a=t}_onselected=(e(this,F),({detail:t})=>{this.dispatchEvent(new CustomEvent("selected",{detail:t})),this.closeOnSelect&&(this.open=!1,this._menu.selected=void 0)});_scrimClick=()=>{this.closeOnClick&&(this.open=!1)};static styles=[c`
|
|
2
|
+
:host {
|
|
3
|
+
position: relative;
|
|
4
|
+
display: block;
|
|
5
|
+
--custom-dropdown-top: 48px;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
custom-dropdown {
|
|
9
|
+
display: flex;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
width: fit-content;
|
|
12
|
+
top: var(--custom-dropdown-top);
|
|
13
|
+
padding: 8px 0;
|
|
14
|
+
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
custom-elevation {
|
|
18
|
+
--md-elevation-level: var(--elevation-level, 1);
|
|
19
|
+
border-radius: var(--md-sys-shape-corner-extra-small);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:host([bottom]) custom-dropdown {
|
|
23
|
+
transform-origin: bottom left;
|
|
24
|
+
top: auto;
|
|
25
|
+
bottom: var(--custom-dropdown-top);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
:host([right]) custom-dropdown {
|
|
29
|
+
transform-origin: top right;
|
|
30
|
+
right: 0;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:host([bottom][right]) custom-dropdown {
|
|
34
|
+
transform-origin: bottom right;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.scrim {
|
|
38
|
+
position: fixed;
|
|
39
|
+
inset: 0;
|
|
40
|
+
pointer-events: none;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
:host([open]) .scrim {
|
|
44
|
+
pointer-events: auto;
|
|
45
|
+
}
|
|
46
|
+
`];render(){return i`
|
|
47
|
+
<span class="scrim" @click=${this._scrimClick}></span>
|
|
48
|
+
|
|
49
|
+
<custom-button part="button" @click=${()=>this.open=!this.open}>
|
|
50
|
+
<custom-icon slot="icon" icon=${this.icon}>more_vert</custom-icon>
|
|
51
|
+
</custom-button>
|
|
52
|
+
|
|
53
|
+
<custom-dropdown part="dropdown" .open=${this.open} ?right=${this.right} ?bottom=${this.bottom}>
|
|
54
|
+
<custom-elevation></custom-elevation>
|
|
55
|
+
<custom-menu @selected=${this._onselected}>
|
|
56
|
+
<slot></slot>
|
|
57
|
+
</custom-menu>
|
|
58
|
+
</custom-dropdown>
|
|
59
|
+
`}static{e(l,k)}},l})();export{n as CustomDropdownMenu};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import{_ as e,a as t,e as s}from"./custom-element-c2e883ba.js";import{e as a,j as o,v as n,D as r}from"./property-58e28172.js";let i=(()=>{let i,c,m,l=[s("custom-dropdown")],p=[],d=r,u=[],y=[];return class extends d{static{c=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;m=[a({type:Boolean,reflect:!0})],e(this,null,m,{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},u,y),e(null,i={value:c},l,{kind:"class",name:c.name,metadata:t},null,p),c=i.value,t&&Object.defineProperty(c,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,u,void 0);get open(){return this.#e}set open(e){this.#e=e}static styles=[o`
|
|
2
|
+
:host {
|
|
3
|
+
position: absolute;
|
|
4
|
+
pointer-events: none;
|
|
5
|
+
opacity: 0;
|
|
6
|
+
flex: 1;
|
|
7
|
+
width: fit-content;
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
|
+
border: 1px;
|
|
11
|
+
background: var(--md-sys-color-surface);
|
|
12
|
+
z-index: 1001;
|
|
13
|
+
transform: scale(0, 0);
|
|
14
|
+
transform-origin: top left;
|
|
15
|
+
transition: var(--md-sys-motion-easing-emphasized-accelerate) 200ms opacity,
|
|
16
|
+
var(--md-sys-motion-easing-emphasized-accelerate) 200ms transform;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
:host([open]) {
|
|
20
|
+
pointer-events: auto;
|
|
21
|
+
opacity: 1;
|
|
22
|
+
transform: scale(1, 1);
|
|
23
|
+
transition: var(--md-sys-motion-easing-emphasized-decelerate) 500ms opacity,
|
|
24
|
+
var(--md-sys-motion-easing-emphasized-decelerate) 500ms transform;
|
|
25
|
+
}
|
|
26
|
+
`];render(){return n` <slot></slot> `}constructor(){super(...arguments),t(this,y)}static{t(c,p)}},c})();export{i as CustomDropdown};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{CustomCard}from"./card.js";export{CustomTheme}from"./theme.js";export{CustomDivider}from"./divider.js";export{CustomButton}from"./button.js";export{CustomBanner}from"./banner.js";export{CustomSelector}from"./selector.js";export{CustomPages}from"./pages.js";export{CustomDrawer}from"./drawer.js";export{CustomDrawerButton}from"./drawer-button.js";export{CustomDrawerItem}from"./drawer-item.js";export{CustomSection}from"./section2.js";export{CustomDrawerLayout}from"./drawer-layout.js";export{C as CustomTopAppBar}from"./top-app-bar-e6e33a9e.js";export{Icon as CustomIcon}from"./icon.js";export{CustomTypography}from"./typography.js";export{CustomPane}from"./pane.js";export{CustomSupportingPane}from"./supporting-pane.js";export{CustomTabs}from"./tabs.js";export{CustomRoot}from"./root.js";export{CustomDialog}from"./dialog.js";export{CustomIconSet}from"./icon-set.js";export{CustomListItem}from"./list-item.js";export{CustomMenu}from"./menu.js";export{CustomIconButton}from"./icon-button.js";export{CustomDropdownMenu}from"./dropdown-menu.js";export{CustomDropdown}from"./dropdown.js";export{CustomToggle}from"./toggle.js";export{CustomToggleButton}from"./toggle-button.js";export{CustomTimePicker}from"./time-picker.js";import"./custom-element-c2e883ba.js";import"./property-58e28172.js";import"./elevation.js";import"./it-d4d177bf.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./index-3c006227.js";import"./query-73dacde5.js";import"./tab.js";import"./input.js";
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import{_ as e,a,e as l}from"./custom-element-c2e883ba.js";import{e as t,v as o,D as r}from"./property-58e28172.js";
|
|
2
|
+
/**
|
|
3
|
+
* @license
|
|
4
|
+
* Copyright 2022 Google LLC
|
|
5
|
+
* SPDX-License-Identifier: Apache-2.0
|
|
6
|
+
*/let s=(()=>{let s,c,n,v=[l("custom-elevation")],i=[],p=r,m=[],d=[];return class extends p{static{c=this}static{const l="function"==typeof Symbol&&Symbol.metadata?Object.create(p[Symbol.metadata]??null):void 0;n=[t({type:Number,renders:!1})],e(this,null,n,{kind:"accessor",name:"level",static:!1,private:!1,access:{has:e=>"level"in e,get:e=>e.level,set:(e,a)=>{e.level=a}},metadata:l},m,d),e(null,s={value:c},v,{kind:"class",name:c.name,metadata:l},null,i),c=s.value,l&&Object.defineProperty(c,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:l}),a(c,i)}#e=a(this,m,void 0);get level(){return this.#e}set level(e){this.#e=e}onChange(e,a){"level"===e&&this.style.setProperty("--md-elevation-level",String(a))}render(){return o`
|
|
7
|
+
<style>
|
|
8
|
+
:host {
|
|
9
|
+
--_level: var(--md-elevation-level, 0);
|
|
10
|
+
--_shadow-color: var(--md-sys-color-shadow);
|
|
11
|
+
display: flex;
|
|
12
|
+
pointer-events: none;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:host,
|
|
16
|
+
.shadow,
|
|
17
|
+
.shadow::before,
|
|
18
|
+
.shadow::after {
|
|
19
|
+
border-radius: inherit;
|
|
20
|
+
inset: 0;
|
|
21
|
+
position: absolute;
|
|
22
|
+
transition-duration: inherit;
|
|
23
|
+
transition-timing-function: inherit;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.shadow::before,
|
|
27
|
+
.shadow::after {
|
|
28
|
+
content: '';
|
|
29
|
+
transition-property: box-shadow, opacity;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.shadow::before {
|
|
33
|
+
box-shadow: 0px
|
|
34
|
+
calc(
|
|
35
|
+
1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 3, 1) + 2 * clamp(0, var(--_level) - 4, 1))
|
|
36
|
+
)
|
|
37
|
+
calc(
|
|
38
|
+
1px * (2 * clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 2, 1) + clamp(0, var(--_level) - 4, 1))
|
|
39
|
+
)
|
|
40
|
+
0px var(--_shadow-color);
|
|
41
|
+
opacity: 0.3;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.shadow::after {
|
|
45
|
+
box-shadow: 0px
|
|
46
|
+
calc(
|
|
47
|
+
1px * (clamp(0, var(--_level), 1) + clamp(0, var(--_level) - 1, 1) + 2 * clamp(0, var(--_level) - 2, 3))
|
|
48
|
+
)
|
|
49
|
+
calc(1px * (3 * clamp(0, var(--_level), 2) + 2 * clamp(0, var(--_level) - 2, 3)))
|
|
50
|
+
calc(1px * (clamp(0, var(--_level), 4) + 2 * clamp(0, var(--_level) - 4, 1))) var(--_shadow-color);
|
|
51
|
+
opacity: 0.15;
|
|
52
|
+
}
|
|
53
|
+
</style>
|
|
54
|
+
|
|
55
|
+
<span class="shadow"></span>
|
|
56
|
+
`}constructor(){super(...arguments),a(this,d)}},c})();export{s as CustomElevation};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import{_ as t,a as o,e as s}from"./custom-element-c2e883ba.js";import{e,j as c,v as a,D as i}from"./property-58e28172.js";import"./button.js";import"./icon.js";import"./elevation.js";import"./index-3c006227.js";let n=(()=>{let n,r,m,l=[s("custom-icon-button")],u=[],d=i,p=[],b=[];return class extends d{static{r=this}static{const o="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;m=[e({type:String})],t(this,null,m,{kind:"accessor",name:"icon",static:!1,private:!1,access:{has:t=>"icon"in t,get:t=>t.icon,set:(t,o)=>{t.icon=o}},metadata:o},p,b),t(null,n={value:r},l,{kind:"class",name:r.name,metadata:o},null,u),r=n.value,o&&Object.defineProperty(r,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o})}#t=o(this,p,void 0);get icon(){return this.#t}set icon(t){this.#t=t}static styles=[c`
|
|
2
|
+
:host {
|
|
3
|
+
display: block;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
custom-icon {
|
|
7
|
+
--custom-icon-color: var(--md-sys-color-on-surface);
|
|
8
|
+
}
|
|
9
|
+
`];render(){return a`
|
|
10
|
+
<custom-button>
|
|
11
|
+
<custom-icon slot="icon" .icon=${this.icon}></custom-icon>
|
|
12
|
+
</custom-button>
|
|
13
|
+
`}constructor(){super(...arguments),o(this,b)}static{o(r,u)}},r})();export{n as CustomIconButton};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import{_ as e,a as t,e as s}from"./custom-element-c2e883ba.js";import{j as n,D as o}from"./property-58e28172.js";import{L as a}from"./index-3c006227.js";globalThis.pubsub=globalThis.pubsub||new a(!0);let l=(()=>{let a,l,c=[s("custom-icon-set")],i=[],r=o;return class extends r{static{l=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;e(null,a={value:l},c,{kind:"class",name:l.name,metadata:t},null,i),l=a.value,t&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static styles=[n`
|
|
2
|
+
:host {
|
|
3
|
+
display: none;
|
|
4
|
+
}
|
|
5
|
+
`];#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};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import{_ as s,a as t,e}from"./custom-element-c2e883ba.js";import{L as o}from"./index-3c006227.js";import{e as i,j as a,v as c,D as n}from"./property-58e28172.js";globalThis.pubsub=globalThis.pubsub||new o(!0);let r=(()=>{let o,r,h,m,l,u,_=[e("custom-icon")],g=[],b=n,d=[],p=[],v=[],N=[],f=[],y=[],x=[],k=[];return class extends b{static{r=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(b[Symbol.metadata]??null):void 0;h=[i()],m=[i({attribute:"icon"})],l=[i()],u=[i()],s(this,null,h,{kind:"accessor",name:"host",static:!1,private:!1,access:{has:s=>"host"in s,get:s=>s.host,set:(s,t)=>{s.host=t}},metadata:t},d,p),s(this,null,m,{kind:"accessor",name:"icon",static:!1,private:!1,access:{has:s=>"icon"in s,get:s=>s.icon,set:(s,t)=>{s.icon=t}},metadata:t},v,N),s(this,null,l,{kind:"accessor",name:"setName",static:!1,private:!1,access:{has:s=>"setName"in s,get:s=>s.setName,set:(s,t)=>{s.setName=t}},metadata:t},f,y),s(this,null,u,{kind:"accessor",name:"_icon",static:!1,private:!1,access:{has:s=>"_icon"in s,get:s=>s._icon,set:(s,t)=>{s._icon=t}},metadata:t},x,k),s(null,o={value:r},_,{kind:"class",name:r.name,metadata:t},null,g),r=o.value,t&&Object.defineProperty(r,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#s=t(this,d,void 0);get host(){return this.#s}set host(s){this.#s=s}#t=(t(this,p),t(this,v,this.innerHTML));get icon(){return this.#t}set icon(s){this.#t=s}#e=(t(this,N),t(this,f,void 0));get setName(){return this.#e}set setName(s){this.#e=s}#o=(t(this,y),t(this,x,void 0));get _icon(){return this.#o}set _icon(s){this.#o=s}onChange(s,t){"setName"===s&&(this.host=globalThis.pubsub.subscribers[`custom-icon-set-${t}-connected`]?.value,this.host||globalThis.pubsub.subscribe(`custom-icon-set-${t}-connected`,(s=>{s&&(this.host=s)}))),"icon"!==s&&"host"!==s||this.host&&this.icon&&(this._icon=this.host.getIcon(this.icon))}static styles=[a`
|
|
2
|
+
:host {
|
|
3
|
+
--__custom-icon-size: var(--custom-icon-size, 24px);
|
|
4
|
+
--custom-icon-color: var(--md-sys-color-on-surface);
|
|
5
|
+
display: flex;
|
|
6
|
+
height: var(--custom-icon-size, 24px);
|
|
7
|
+
width: var(--custom-icon-size, 24px);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
svg {
|
|
11
|
+
fill: var(--custom-icon-color);
|
|
12
|
+
height: inherit;
|
|
13
|
+
width: inherit;
|
|
14
|
+
pointer-events: none;
|
|
15
|
+
}
|
|
16
|
+
`];connectedCallback(){this.setName=this.getAttribute("set-name")||"icons"}render(){return c` ${this._icon} `}constructor(){super(...arguments),t(this,k)}static{t(r,g)}},r})();export{r as CustomIcon,r as Icon};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
class LittlePubSub{subscribers={};verbose;constructor(s){this.verbose=s}_handleContext(s,e){return void 0===e&&(e=s),e}hasSubscribers(s){return!!this.subscribers[s]}subscribe(s,e,r){this.hasSubscribers(s)||(this.subscribers[s]={handlers:[],value:void 0}),r=this._handleContext(e,r),this.subscribers[s].handlers.push(e.bind(r))}unsubscribe(s,e,r){if(!this.hasSubscribers(s))return;r=this._handleContext(e,r);const i=this.subscribers[s].handlers.indexOf(e.bind(r));this.subscribers[s].handlers.splice(i),0===this.subscribers[s].handlers.length&&delete this.subscribers[s]}publish(s,e,r){this.hasSubscribers(s)||(this.subscribers[s]={handlers:[]});const i=this.subscribers[s]?.value;if(this.verbose||r||i!==e){this.subscribers[s].value=e;for(const r of this.subscribers[s].handlers)r(e,i)}}publishVerbose(s,e){this.publish(s,e,!0)}once(s){return new Promise((e=>{const r=i=>{e(i),this.unsubscribe(s,r)};this.subscribe(s,r)}))}}export{LittlePubSub as L};
|