@taprootio/espalier 2.1.1 → 2.1.2
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/css/esp-reset.css +3 -0
- package/custom-elements.json +2732 -2732
- package/dist/box/esp-box.js +11 -4
- package/dist/dialog/esp-dialog.js +6 -4
- package/dist/page/esp-page.js +4 -2
- package/package.json +1 -1
package/dist/box/esp-box.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
var n=function(
|
|
2
|
-
<div class=${
|
|
1
|
+
var n=function(s,e,r,i){var a=arguments.length,o=a<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(s,e,r,i);else for(var p=s.length-1;p>=0;p--)(l=s[p])&&(o=(a<3?l(o):a>3?l(e,r,o):l(e,r))||o);return a>3&&o&&Object.defineProperty(e,r,o),o};import{css as c,html as b}from"lit";import{customElement as v,property as h}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";let t=class extends d{constructor(){super(...arguments),this.fullScreen=!1}render(){const{fullScreen:e}=this;return b`
|
|
2
|
+
<div class=${f({"esp-box":!0,"full-screen":e})}>
|
|
3
3
|
<div part="box">
|
|
4
4
|
<slot></slot>
|
|
5
5
|
</div>
|
|
6
6
|
</div>
|
|
7
|
-
`}};
|
|
7
|
+
`}};t.styles=[...d.styles,c`
|
|
8
8
|
:host {
|
|
9
9
|
display: block;
|
|
10
10
|
}
|
|
@@ -43,7 +43,9 @@ var n=function(t,e,r,i){var l=arguments.length,o=l<3?e:i===null?i=Object.getOwnP
|
|
|
43
43
|
|
|
44
44
|
&.full-screen {
|
|
45
45
|
width: 100vw;
|
|
46
|
+
|
|
46
47
|
height: 100vh;
|
|
48
|
+
height: 100dvh;
|
|
47
49
|
position: fixed;
|
|
48
50
|
top: 0;
|
|
49
51
|
left: 0;
|
|
@@ -51,7 +53,12 @@ var n=function(t,e,r,i){var l=arguments.length,o=l<3?e:i===null?i=Object.getOwnP
|
|
|
51
53
|
|
|
52
54
|
> div {
|
|
53
55
|
overflow-y: auto;
|
|
56
|
+
|
|
57
|
+
padding-bottom: max(
|
|
58
|
+
var(--esp-size-box-padding, var(--esp-size-padding)),
|
|
59
|
+
env(safe-area-inset-bottom)
|
|
60
|
+
);
|
|
54
61
|
}
|
|
55
62
|
}
|
|
56
63
|
}
|
|
57
|
-
`],n([
|
|
64
|
+
`],n([h({attribute:"full-screen",type:Boolean})],t.prototype,"fullScreen",void 0),t=n([v("esp-box")],t);export{t as EspalierBox};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,o);else for(var r=l.length-1;r>=0;r--)(a=l[r])&&(i=(n<3?a(i):n>3?a(e,t,i):a(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i};import{LitElement as h,css as
|
|
2
|
-
${
|
|
1
|
+
var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,o);else for(var r=l.length-1;r>=0;r--)(a=l[r])&&(i=(n<3?a(i):n>3?a(e,t,i):a(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i};import{LitElement as h,css as v,html as f,nothing as p}from"lit";import{customElement as g,property as m,state as b}from"lit/decorators.js";import{classMap as y}from"lit/directives/class-map.js";import{createRef as d,ref as u}from"lit/directives/ref.js";import{OverlayController as _}from"../shared/overlay-controller.js";let s=class extends h{constructor(){super(...arguments),this.dialogSlot=d(),this.vellumRef=d(),this.isOpen=!1,this._overlay=new _({host:this,getFocusTrapContainer:()=>this.vellumRef.value??null,getFocusFallback:()=>this.vellumRef.value??null}),this._closeReason="api",this._lifecycleToken=0,this.fullScreen=!1}toggleOpen(){if(this.isOpen){const e=this._closeReason;this._closeReason="api";const t=new CustomEvent("esp-dialog-closing",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});if(!this.dispatchEvent(t))return;const o=++this._lifecycleToken;this.removeAttribute("is-open"),this.isOpen=!1,this._overlay.close(),this.updateComplete.then(()=>{this.isOpen||this._lifecycleToken!==o||this.dispatchEvent(new CustomEvent("esp-dialog-closed",{detail:{reason:e},bubbles:!0,composed:!0}))})}else{const e=++this._lifecycleToken;this.setAttribute("is-open","true"),this.isOpen=!0,this._overlay.open(),this.updateComplete.then(()=>{!this.isOpen||this._lifecycleToken!==e||(this._moveFocusIntoDialog(),this.dispatchEvent(new CustomEvent("esp-dialog-opened",{detail:{},bubbles:!0,composed:!0})))})}}_handleKeyDown(e){if(this.isOpen){if(e.key==="Escape"){e.preventDefault(),this._closeReason="escape",this.toggleOpen();return}e.key==="Tab"&&this._overlay.trapFocus(e)}}_moveFocusIntoDialog(){this._overlay.moveFocusInto()}firstUpdated(){this.dialogSlot.value&&this.dialogSlot.value.addEventListener("closeDialog",e=>{this._closeReason="close-dialog",this.toggleOpen(),e.preventDefault()})}disconnectedCallback(){super.disconnectedCallback()}render(){const{isOpen:e,fullScreen:t}=this,o={"is-open":e,"full-screen":t};return f`<div
|
|
2
|
+
${u(this.vellumRef)}
|
|
3
3
|
class="vellum ${y(o)}"
|
|
4
4
|
data-no-swipe
|
|
5
5
|
role=${e?"dialog":p}
|
|
@@ -7,8 +7,8 @@ var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnP
|
|
|
7
7
|
tabindex="-1"
|
|
8
8
|
@keydown=${this._handleKeyDown}
|
|
9
9
|
>
|
|
10
|
-
<slot ${
|
|
11
|
-
</div>`}};s.styles=
|
|
10
|
+
<slot ${u(this.dialogSlot)}></slot>
|
|
11
|
+
</div>`}};s.styles=v`
|
|
12
12
|
:host {
|
|
13
13
|
display: block;
|
|
14
14
|
}
|
|
@@ -22,7 +22,9 @@ var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnP
|
|
|
22
22
|
z-index: 10000;
|
|
23
23
|
left: 0;
|
|
24
24
|
top: 0;
|
|
25
|
+
|
|
25
26
|
height: 100vh;
|
|
27
|
+
height: 100dvh;
|
|
26
28
|
width: 100vw;
|
|
27
29
|
overflow-y: auto;
|
|
28
30
|
outline: none;
|
package/dist/page/esp-page.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var o=function(
|
|
1
|
+
var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,s):r,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(n,e,s,r);else for(var l=n.length-1;l>=0;l--)(p=n[l])&&(a=(d<3?p(a):d>3?p(e,s,a):p(e,s))||a);return d>3&&a&&Object.defineProperty(e,s,a),a};import{css as g,html as f}from"lit";import{customElement as u,property as i}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{createRef as v,ref as w}from"lit/directives/ref.js";import{EspalierElementBase as h}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as c}from"./bi-directional-sticky-controller.js";import{getEspBus as b}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";let t=class extends h{constructor(){super(),this.dialogZone=v(),this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,new c(this,".esp-page-left > .sticky-wrapper"),new c(this,".esp-page-right > .sticky-wrapper")}AddDialog(e){this.dialogZone.value?.appendChild(e)}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&b().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"})}render(){const e=this.fixedMenus||this.headerPosition==="fixed",s=!e&&this.headerPosition==="sticky";return f`
|
|
2
2
|
<div part="wrapper" class="esp-page ${m({"fixed-menus":e,"fixed-header":e,"sticky-header":s})}">
|
|
3
3
|
<div part="canvas" class="esp-page-canvas esp-page-canvas--left" aria-hidden="true"></div>
|
|
4
4
|
<div part="canvas" class="esp-page-canvas esp-page-canvas--right" aria-hidden="true"></div>
|
|
@@ -107,7 +107,9 @@ var o=function(i,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
|
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
.esp-page {
|
|
110
|
+
|
|
110
111
|
min-height: 100vh;
|
|
112
|
+
min-height: 100dvh;
|
|
111
113
|
display: grid;
|
|
112
114
|
grid-template-columns:
|
|
113
115
|
[full-start canvas-left-start] var(--_esp-page-gutter-left)
|
|
@@ -297,4 +299,4 @@ var o=function(i,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
|
|
|
297
299
|
.esp-page:has(esp-dialog[is-open="true"]) {
|
|
298
300
|
overflow: hidden;
|
|
299
301
|
}
|
|
300
|
-
`],o([
|
|
302
|
+
`],o([i({reflect:!0})],t.prototype,"kind",void 0),o([i({reflect:!0})],t.prototype,"align",void 0),o([i({type:Boolean,reflect:!0})],t.prototype,"contained",void 0),o([i({attribute:"header-position",reflect:!0})],t.prototype,"headerPosition",void 0),o([i({attribute:"fixed-menus",type:Boolean,reflect:!0})],t.prototype,"fixedMenus",void 0),t=o([u("esp-page")],t);export{t as EspalierPage};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taprootio/espalier",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.2",
|
|
4
4
|
"description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
|
|
5
5
|
"customElements": "custom-elements.json",
|
|
6
6
|
"type": "module",
|