@vandeurenglenn/lite-elements 0.3.44 → 0.3.46
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/bar/top-app-bar.d.ts +1 -1
- package/exports/bundle/demo-shell.js +1 -1
- package/exports/bundle/drawer-layout.js +1 -1
- package/exports/bundle/drawer.js +1 -15
- package/exports/bundle/elements.js +1 -1
- package/exports/bundle/pane.js +2 -1
- package/exports/bundle/top-app-bar.js +4 -65
- package/exports/demo-shell.js +1 -0
- package/exports/drawer-layout.js +1 -0
- package/exports/elements.js +1 -0
- package/exports/top-app-bar.js +3 -65
- package/package.json +2 -2
|
@@ -5,7 +5,7 @@ export declare type AppBarTypes = 'center-aligned' | 'small' | 'medium' | 'large
|
|
|
5
5
|
export declare class CustomTopAppBar extends LiteElement {
|
|
6
6
|
accessor type: AppBarTypes;
|
|
7
7
|
accessor scrolling: boolean;
|
|
8
|
-
static styles:
|
|
8
|
+
static styles: any[];
|
|
9
9
|
connectedCallback(): void;
|
|
10
10
|
render(): import("lit-html").TemplateResult<1>;
|
|
11
11
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as t,a as e,e as o}from"./custom-element-CAdbJRVg.js";import{i as s,x as i,s as m}from"./property-BYA8Sw2t.js";import{t as a}from"./query-DCTzLeFk.js";import"./demo-icons.js";import"./section.js";import"./card.js";import"./theme.js";import"./divider.js";import"./button.js";import"./banner.js";import"./selector.js";import"./pages.js";import"./drawer.js";import"./drawer-button.js";import"./drawer-item.js";import"./section2.js";import"./drawer-layout.js";import"./top-app-bar.js";import"./icon.js";import"./typography.js";import"./pane.js";import"./supporting-pane.js";import"./tabs.js";import"./root.js";import"./dialog.js";import"./icon-set.js";import"./list-item.js";import"./menu.js";import"./icon-button.js";import"./dropdown-menu.js";import"./dropdown.js";import"./toggle.js";import"./toggle-button.js";import"./time-picker.js";import"./notification.js";import"./notifications.js";import"./code.js";import"./elevation.js";import"./it-Dft_Rjy-.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./column-B0bUzxkF.js";import"./row-DYDgQVDj.js";import"./tab.js";import"./input.js";import"./property-C4lhirVQ.js";let c=(()=>{let c,u,n,r,l=[o("demo-shell")],p=[],d=m,g=[],b=[],y=[],w=[];return class extends d{static{u=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;n=[a("custom-selector")],r=[a("custom-pages")],t(this,null,n,{kind:"accessor",name:"selector",static:!1,private:!1,access:{has:t=>"selector"in t,get:t=>t.selector,set:(t,e)=>{t.selector=e}},metadata:e},g,b),t(this,null,r,{kind:"accessor",name:"pages",static:!1,private:!1,access:{has:t=>"pages"in t,get:t=>t.pages,set:(t,e)=>{t.pages=e}},metadata:e},y,w),t(null,c={value:u},l,{kind:"class",name:u.name,metadata:e},null,p),u=c.value,e&&Object.defineProperty(u,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,g,void 0);get selector(){return this.#t}set selector(t){this.#t=t}#e=(e(this,b),e(this,y,void 0));get pages(){return this.#e}set pages(t){this.#e=t}connectedCallback(){this.selector.addEventListener("selected",(async({detail:t})=>{document.dispatchEvent(new CustomEvent("custom-scroll",{detail:{scrolling:!1}})),this.pages.select(t),localStorage.setItem("last-selected",t)}));const t=localStorage.getItem("last-selected");t&&(customElements.get("custom-serlector")?this.selector.select(t):(this.selector.select(t),this.pages.select(t)))}static styles=[s`
|
|
1
|
+
import{_ as t,a as e,e as o}from"./custom-element-CAdbJRVg.js";import{i as s,x as i,s as m}from"./property-BYA8Sw2t.js";import{t as a}from"./query-DCTzLeFk.js";import"./demo-icons.js";import"./section.js";import"./card.js";import"./theme.js";import"./divider.js";import"./button.js";import"./banner.js";import"./selector.js";import"./pages.js";import"./drawer.js";import"./drawer-button.js";import"./drawer-item.js";import"./section2.js";import"./drawer-layout.js";import"./top-app-bar.js";import"./icon.js";import"./typography.js";import"./pane.js";import"./supporting-pane.js";import"./tabs.js";import"./root.js";import"./dialog.js";import"./icon-set.js";import"./list-item.js";import"./menu.js";import"./icon-button.js";import"./dropdown-menu.js";import"./dropdown.js";import"./toggle.js";import"./toggle-button.js";import"./time-picker.js";import"./notification.js";import"./notifications.js";import"./code.js";import"./elevation.js";import"./it-Dft_Rjy-.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./column-B0bUzxkF.js";import"./row-DYDgQVDj.js";import"@vandeurenglenn/custom-shared-styles/top-app-bar.css";import"./tab.js";import"./input.js";import"./property-C4lhirVQ.js";let c=(()=>{let c,u,n,r,l=[o("demo-shell")],p=[],d=m,g=[],b=[],y=[],w=[];return class extends d{static{u=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;n=[a("custom-selector")],r=[a("custom-pages")],t(this,null,n,{kind:"accessor",name:"selector",static:!1,private:!1,access:{has:t=>"selector"in t,get:t=>t.selector,set:(t,e)=>{t.selector=e}},metadata:e},g,b),t(this,null,r,{kind:"accessor",name:"pages",static:!1,private:!1,access:{has:t=>"pages"in t,get:t=>t.pages,set:(t,e)=>{t.pages=e}},metadata:e},y,w),t(null,c={value:u},l,{kind:"class",name:u.name,metadata:e},null,p),u=c.value,e&&Object.defineProperty(u,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,g,void 0);get selector(){return this.#t}set selector(t){this.#t=t}#e=(e(this,b),e(this,y,void 0));get pages(){return this.#e}set pages(t){this.#e=t}connectedCallback(){this.selector.addEventListener("selected",(async({detail:t})=>{document.dispatchEvent(new CustomEvent("custom-scroll",{detail:{scrolling:!1}})),this.pages.select(t),localStorage.setItem("last-selected",t)}));const t=localStorage.getItem("last-selected");t&&(customElements.get("custom-serlector")?this.selector.select(t):(this.selector.select(t),this.pages.select(t)))}static styles=[s`
|
|
2
2
|
custom-drawer-layout {
|
|
3
3
|
height: 100%;
|
|
4
4
|
width: 100%;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{_ as e,a as t,e as r}from"./custom-element-CAdbJRVg.js";import{r as a,x as s,s as o}from"./property-BYA8Sw2t.js";import"./drawer.js";import"./drawer-button.js";import"./drawer-item.js";import"./top-app-bar.js";import"./column-B0bUzxkF.js";import"./elevation.js";import"./button.js";import"./pane.js";import"./icon-button.js";import"./icon.js";import"./it-Dft_Rjy-.js";import"./row-DYDgQVDj.js";let i=(()=>{let i,n,d,c,l,
|
|
1
|
+
import{_ as e,a as t,e as r}from"./custom-element-CAdbJRVg.js";import{r as a,x as s,s as o}from"./property-BYA8Sw2t.js";import"./drawer.js";import"./drawer-button.js";import"./drawer-item.js";import"./top-app-bar.js";import"./column-B0bUzxkF.js";import"./elevation.js";import"./button.js";import"./pane.js";import"./icon-button.js";import"./icon.js";import"./it-Dft_Rjy-.js";import"./row-DYDgQVDj.js";import"@vandeurenglenn/custom-shared-styles/top-app-bar.css";let i=(()=>{let i,n,d,c,p,l,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"})],p=[a({type:Boolean,reflect:!0})],l=[a({type:String})],m=[a({type:String})],h=[a({type:String})],w=[a({attribute:"mobile-trigger"})],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,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:r},f,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: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;
|
package/exports/bundle/drawer.js
CHANGED
|
@@ -33,24 +33,10 @@ import{_ as t,a as e,e as s}from"./custom-element-CAdbJRVg.js";import{i as a,r a
|
|
|
33
33
|
border-top: 1px solid rgba(0, 0, 0, 0.14);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
::slotted([slot='content']) {
|
|
37
|
-
display: flex;
|
|
38
|
-
flex-direction: column;
|
|
39
|
-
height: 100%;
|
|
40
|
-
width: 100%;
|
|
41
|
-
overflow-y: auto;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
36
|
::slotted(*) {
|
|
45
37
|
pointer-events: none;
|
|
46
38
|
}
|
|
47
|
-
|
|
48
|
-
aside {
|
|
49
|
-
display: flex;
|
|
50
|
-
flex-direction: column;
|
|
51
|
-
width: 100%;
|
|
52
|
-
}
|
|
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`
|
|
39
|
+
`;let l=(()=>{let a,l,c,m,d,p,h,g=[s("custom-drawer")],u=[],y=r,b=[],v=[],f=[],_=[],x=[],w=[],j=[],k=[],S=[],z=[];return class extends y{static{l=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(y[Symbol.metadata]??null):void 0;c=[o({type:Boolean,reflect:!0})],m=[o({type:Boolean,reflect:!0})],d=[o({type:String,reflect:!0})],p=[o({type:Boolean})],h=[o({type:String})],t(this,null,c,{kind:"accessor",name:"open",static:!1,private:!1,access:{has:t=>"open"in t,get:t=>t.open,set:(t,e)=>{t.open=e}},metadata:e},b,v),t(this,null,m,{kind:"accessor",name:"mobile",static:!1,private:!1,access:{has:t=>"mobile"in t,get:t=>t.mobile,set:(t,e)=>{t.mobile=e}},metadata:e},f,_),t(this,null,d,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:t=>"type"in t,get:t=>t.type,set:(t,e)=>{t.type=e}},metadata:e},x,w),t(this,null,p,{kind:"accessor",name:"right",static:!1,private:!1,access:{has:t=>"right"in t,get:t=>t.right,set:(t,e)=>{t.right=e}},metadata:e},j,k),t(this,null,h,{kind:"accessor",name:"id",static:!1,private:!1,access:{has:t=>"id"in t,get:t=>t.id,set:(t,e)=>{t.id=e}},metadata:e},S,z),t(null,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,b,void 0);get open(){return this.#t}set open(t){this.#t=t}#e=(e(this,v),e(this,f,void 0));get mobile(){return this.#e}set mobile(t){this.#e=t}#s=(e(this,_),e(this,x,void 0));get type(){return this.#s}set type(t){this.#s=t}#a=(e(this,w),e(this,j,void 0));get right(){return this.#a}set right(t){this.#a=t}#o=(e(this,k),e(this,S,void 0));get id(){return this.#o}set id(t){this.#o=t}connectedCallback(){document.addEventListener("custom-pane-close",(({detail:t})=>{this.id===t&&(this.open=!1)})),document.addEventListener("custom-pane-open",(({detail:t})=>{this.id===t&&(this.open=!0)}))}static styles=[n];render(){return i`
|
|
54
40
|
<custom-pane .open=${this.open} .mobile=${this.mobile} .type=${this.type} .id=${this.id}>
|
|
55
41
|
<slot name="headline" slot="headline"></slot>
|
|
56
42
|
<slot name="menu-button" slot="menu-button"></slot>
|
|
@@ -1 +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{CustomTopAppBar}from"./top-app-bar.js";export{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";export{CustomNotification}from"./notification.js";export{CustomNotifications}from"./notifications.js";import"./custom-element-CAdbJRVg.js";import"./property-BYA8Sw2t.js";import"./elevation.js";import"./it-Dft_Rjy-.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./column-B0bUzxkF.js";import"./row-DYDgQVDj.js";import"./query-DCTzLeFk.js";import"./tab.js";import"./input.js";import"./property-C4lhirVQ.js";
|
|
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{CustomTopAppBar}from"./top-app-bar.js";export{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";export{CustomNotification}from"./notification.js";export{CustomNotifications}from"./notifications.js";import"./custom-element-CAdbJRVg.js";import"./property-BYA8Sw2t.js";import"./elevation.js";import"./it-Dft_Rjy-.js";import"./selector-mixin.js";import"./select-mixin.js";import"./scroll-mixin.js";import"./column-B0bUzxkF.js";import"./row-DYDgQVDj.js";import"@vandeurenglenn/custom-shared-styles/top-app-bar.css";import"./query-DCTzLeFk.js";import"./tab.js";import"./input.js";import"./property-C4lhirVQ.js";
|
package/exports/bundle/pane.js
CHANGED
|
@@ -65,6 +65,7 @@ import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{L as o,i a
|
|
|
65
65
|
|
|
66
66
|
.content {
|
|
67
67
|
flex: 1;
|
|
68
|
+
overflow-y: auto;
|
|
68
69
|
width: 100%;
|
|
69
70
|
}
|
|
70
71
|
|
|
@@ -72,7 +73,7 @@ import{_ as e,a as t,e as s}from"./custom-element-CAdbJRVg.js";import{L as o,i a
|
|
|
72
73
|
transform: rotateZ(180deg);
|
|
73
74
|
}
|
|
74
75
|
|
|
75
|
-
slot[name='header']
|
|
76
|
+
slot[name='header'] flex-row {
|
|
76
77
|
padding: var(--custom-pane-header-padding, 8px);
|
|
77
78
|
height: var(--custom-pane-header-height, 54px);
|
|
78
79
|
box-sizing: border-box;
|
|
@@ -1,70 +1,9 @@
|
|
|
1
|
-
import{_ as t,a as e,e as s}from"./custom-element-CAdbJRVg.js";import{r as
|
|
2
|
-
:host {
|
|
3
|
-
display: flex;
|
|
4
|
-
flex-direction: column;
|
|
5
|
-
width: calc(100% - 2px);
|
|
6
|
-
background-color: var(--md-sys-color-surface);
|
|
7
|
-
color: var(--md-sys-color-on-surface);
|
|
8
|
-
box-sizing: border-box;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.container {
|
|
12
|
-
padding: 20px 12px 24px 12px;
|
|
13
|
-
box-sizing: border-box;
|
|
14
|
-
position: relative;
|
|
15
|
-
height: 64px;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
:host([type='center-aligned']) .container,
|
|
19
|
-
:host([type='small']) .container {
|
|
20
|
-
justify-content: center;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
:host(:not([type='center-aligned'])) ::slotted([name='title']) {
|
|
24
|
-
padding-left: 16px;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
:host(:not([type='large'])) ::slotted([name='title']) {
|
|
28
|
-
padding-bottom: 28px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
:host([type='medium']) .container {
|
|
32
|
-
height: 112px;
|
|
33
|
-
}
|
|
34
|
-
:host([type='large']) .container {
|
|
35
|
-
height: 152px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
:host([type='center-aligned']) slot[name='title']::slotted(*) {
|
|
39
|
-
position: absolute;
|
|
40
|
-
left: 50%;
|
|
41
|
-
top: 50%;
|
|
42
|
-
transform: translate(-50%, -50%);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
:host(:not([type='center-aligned'])) slot[name='title']::slotted(*) {
|
|
46
|
-
padding-left: 6px;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
:host([scrolling]) {
|
|
50
|
-
--md-elevation-level: 2;
|
|
51
|
-
padding: 0 16px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
flex-row {
|
|
55
|
-
width: 100%;
|
|
56
|
-
align-items: center;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
custom-elevation {
|
|
60
|
-
border-radius: var(--md-sys-shape-corner-large);
|
|
61
|
-
}
|
|
62
|
-
`];connectedCallback(){document.addEventListener("custom-scroll",(({detail:t})=>{this.scrolling=t.scrolling}))}render(){return a`
|
|
1
|
+
import{_ as t,a as e,e as s}from"./custom-element-CAdbJRVg.js";import{r as a,x as l,s as o}from"./property-BYA8Sw2t.js";import"./it-Dft_Rjy-.js";import"./row-DYDgQVDj.js";import r from"@vandeurenglenn/custom-shared-styles/top-app-bar.css";let c=(()=>{let c,i,n,m,p=[s("custom-top-app-bar")],y=[],u=o,g=[],d=[],h=[],f=[];return class extends u{static{i=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(u[Symbol.metadata]??null):void 0;n=[a({type:String,reflect:!0})],m=[a({type:Boolean,reflect:!0})],t(this,null,n,{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},g,d),t(this,null,m,{kind:"accessor",name:"scrolling",static:!1,private:!1,access:{has:t=>"scrolling"in t,get:t=>t.scrolling,set:(t,e)=>{t.scrolling=e}},metadata:e},h,f),t(null,c={value:i},p,{kind:"class",name:i.name,metadata:e},null,y),i=c.value,e&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}#t=e(this,g,"center-aligned");get type(){return this.#t}set type(t){this.#t=t}#e=(e(this,d),e(this,h,void 0));get scrolling(){return this.#e}set scrolling(t){this.#e=t}static styles=[r];connectedCallback(){document.addEventListener("custom-scroll",(({detail:t})=>{this.scrolling=t.scrolling}))}render(){return l`
|
|
63
2
|
<flex-column class="container">
|
|
64
3
|
<custom-elevation></custom-elevation>
|
|
65
4
|
<flex-row>
|
|
66
5
|
<slot name="start"></slot>
|
|
67
|
-
${"center-aligned"===this.type||"small"===this.type?
|
|
6
|
+
${"center-aligned"===this.type||"small"===this.type?l`
|
|
68
7
|
<custom-typography>
|
|
69
8
|
<slot name="title"></slot>
|
|
70
9
|
</custom-typography>
|
|
@@ -72,11 +11,11 @@ import{_ as t,a as e,e as s}from"./custom-element-CAdbJRVg.js";import{r as o,i a
|
|
|
72
11
|
<flex-it></flex-it>
|
|
73
12
|
<slot name="end"></slot>
|
|
74
13
|
</flex-row>
|
|
75
|
-
${"medium"===this.type||"large"===this.type?
|
|
14
|
+
${"medium"===this.type||"large"===this.type?l`
|
|
76
15
|
<flex-it></flex-it>
|
|
77
16
|
<custom-typography type="headline" size="small">
|
|
78
17
|
<slot name="title"></slot>
|
|
79
18
|
</custom-typography>
|
|
80
19
|
`:""}
|
|
81
20
|
</flex-column>
|
|
82
|
-
`}constructor(){super(...arguments),e(this,
|
|
21
|
+
`}constructor(){super(...arguments),e(this,f)}static{e(i,y)}},i})();export{c as CustomTopAppBar};
|
package/exports/demo-shell.js
CHANGED
|
@@ -42,6 +42,7 @@ import '@vandeurenglenn/custom-shared-styles/drawer.css';
|
|
|
42
42
|
import './scroll-mixin.js';
|
|
43
43
|
import '@vandeurenglenn/flex-elements/column.js';
|
|
44
44
|
import '@vandeurenglenn/flex-elements/row.js';
|
|
45
|
+
import '@vandeurenglenn/custom-shared-styles/top-app-bar.css';
|
|
45
46
|
import '@vandeurenglenn/little-pubsub';
|
|
46
47
|
import '@vandeurenglenn/custom-shared-styles/pane.css';
|
|
47
48
|
import './tab.js';
|
package/exports/drawer-layout.js
CHANGED
|
@@ -15,6 +15,7 @@ import '@vandeurenglenn/custom-shared-styles/pane.css';
|
|
|
15
15
|
import '@vandeurenglenn/custom-shared-styles/drawer.css';
|
|
16
16
|
import '@vandeurenglenn/flex-elements/it.js';
|
|
17
17
|
import '@vandeurenglenn/flex-elements/row.js';
|
|
18
|
+
import '@vandeurenglenn/custom-shared-styles/top-app-bar.css';
|
|
18
19
|
|
|
19
20
|
// import { publish, subscribe } from "../decorators/pubsub.js";
|
|
20
21
|
let CustomDrawerLayout = (() => {
|
package/exports/elements.js
CHANGED
|
@@ -39,6 +39,7 @@ import '@vandeurenglenn/custom-shared-styles/drawer.css';
|
|
|
39
39
|
import './scroll-mixin.js';
|
|
40
40
|
import '@vandeurenglenn/flex-elements/column.js';
|
|
41
41
|
import '@vandeurenglenn/flex-elements/row.js';
|
|
42
|
+
import '@vandeurenglenn/custom-shared-styles/top-app-bar.css';
|
|
42
43
|
import '@vandeurenglenn/little-pubsub';
|
|
43
44
|
import '@vandeurenglenn/custom-shared-styles/pane.css';
|
|
44
45
|
import './tab.js';
|
package/exports/top-app-bar.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-CFl_-KPR.js';
|
|
2
|
-
import { customElement, property,
|
|
2
|
+
import { customElement, property, html, LiteElement } from '@vandeurenglenn/lite';
|
|
3
3
|
import '@vandeurenglenn/flex-elements/it.js';
|
|
4
4
|
import '@vandeurenglenn/flex-elements/row.js';
|
|
5
|
+
import style from '@vandeurenglenn/custom-shared-styles/top-app-bar.css';
|
|
5
6
|
|
|
6
7
|
let CustomTopAppBar = (() => {
|
|
7
8
|
let _classDecorators = [customElement('custom-top-app-bar')];
|
|
@@ -33,70 +34,7 @@ let CustomTopAppBar = (() => {
|
|
|
33
34
|
#scrolling_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _scrolling_initializers, void 0));
|
|
34
35
|
get scrolling() { return this.#scrolling_accessor_storage; }
|
|
35
36
|
set scrolling(value) { this.#scrolling_accessor_storage = value; }
|
|
36
|
-
static styles = [
|
|
37
|
-
css `
|
|
38
|
-
:host {
|
|
39
|
-
display: flex;
|
|
40
|
-
flex-direction: column;
|
|
41
|
-
width: calc(100% - 2px);
|
|
42
|
-
background-color: var(--md-sys-color-surface);
|
|
43
|
-
color: var(--md-sys-color-on-surface);
|
|
44
|
-
box-sizing: border-box;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.container {
|
|
48
|
-
padding: 20px 12px 24px 12px;
|
|
49
|
-
box-sizing: border-box;
|
|
50
|
-
position: relative;
|
|
51
|
-
height: 64px;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
:host([type='center-aligned']) .container,
|
|
55
|
-
:host([type='small']) .container {
|
|
56
|
-
justify-content: center;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
:host(:not([type='center-aligned'])) ::slotted([name='title']) {
|
|
60
|
-
padding-left: 16px;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
:host(:not([type='large'])) ::slotted([name='title']) {
|
|
64
|
-
padding-bottom: 28px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
:host([type='medium']) .container {
|
|
68
|
-
height: 112px;
|
|
69
|
-
}
|
|
70
|
-
:host([type='large']) .container {
|
|
71
|
-
height: 152px;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
:host([type='center-aligned']) slot[name='title']::slotted(*) {
|
|
75
|
-
position: absolute;
|
|
76
|
-
left: 50%;
|
|
77
|
-
top: 50%;
|
|
78
|
-
transform: translate(-50%, -50%);
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
:host(:not([type='center-aligned'])) slot[name='title']::slotted(*) {
|
|
82
|
-
padding-left: 6px;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
:host([scrolling]) {
|
|
86
|
-
--md-elevation-level: 2;
|
|
87
|
-
padding: 0 16px;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
flex-row {
|
|
91
|
-
width: 100%;
|
|
92
|
-
align-items: center;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
custom-elevation {
|
|
96
|
-
border-radius: var(--md-sys-shape-corner-large);
|
|
97
|
-
}
|
|
98
|
-
`
|
|
99
|
-
];
|
|
37
|
+
static styles = [style];
|
|
100
38
|
connectedCallback() {
|
|
101
39
|
document.addEventListener('custom-scroll', ({ detail }) => {
|
|
102
40
|
this.scrolling = detail.scrolling;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vandeurenglenn/lite-elements",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.46",
|
|
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.14",
|
|
25
25
|
"@vandeurenglenn/flex-elements": "^1.3.1",
|
|
26
26
|
"@vandeurenglenn/lite": "^0.2.37",
|
|
27
27
|
"custom-element-decorator": "^0.6.0"
|