@taprootio/espalier 2.3.0 → 2.3.1
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/CHANGELOG.md +13 -0
- package/custom-elements.json +3028 -2087
- package/dist/breadcrumbs/esp-breadcrumbs.d.ts +1 -1
- package/dist/breadcrumbs/esp-breadcrumbs.js +6 -9
- package/dist/button/action-state-lightness.js +1 -0
- package/dist/button/esp-button.js +22 -10
- package/dist/image/esp-image.js +8 -8
- package/dist/image/image-dimensions.js +1 -0
- package/dist/image-upload/esp-image-upload.js +20 -22
- package/dist/lightbox/esp-lightbox.d.ts +4 -3
- package/dist/lightbox/esp-lightbox.js +250 -235
- package/dist/progress/esp-progress.d.ts +2 -1
- package/dist/progress/esp-progress.js +13 -7
- package/espalier.token-manifest.json +2 -2
- package/package.json +1 -1
|
@@ -35,7 +35,7 @@ export * from "./esp-breadcrumb.js";
|
|
|
35
35
|
* @customElement esp-breadcrumbs
|
|
36
36
|
* @slot - `<esp-breadcrumb>` items to display.
|
|
37
37
|
* @cssprop --esp-breadcrumb-separator-color - Set the color of the separator. It defaults
|
|
38
|
-
* to
|
|
38
|
+
* to the semantic heading color so navigation structure stays visible in light and dark themes.
|
|
39
39
|
*
|
|
40
40
|
* ```html
|
|
41
41
|
* <style>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var c=function(o,s,e,t){var r=arguments.length,l=r<3?s:t===null?t=Object.getOwnPropertyDescriptor(s,e):t,
|
|
1
|
+
var c=function(o,s,e,t){var r=arguments.length,l=r<3?s:t===null?t=Object.getOwnPropertyDescriptor(s,e):t,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")l=Reflect.decorate(o,s,e,t);else for(var i=o.length-1;i>=0;i--)(n=o[i])&&(l=(r<3?n(l):r>3?n(s,e,l):n(s,e))||l);return r>3&&l&&Object.defineProperty(s,e,l),l};import{css as p,html as f}from"lit";import{customElement as u}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{createRef as v,ref as d}from"lit/directives/ref.js";export*from"./esp-breadcrumb.js";const h=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
2
2
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
3
3
|
<path
|
|
4
4
|
d="M12.089 3.634a2 2 0 0 0 -1.089 1.78l-.001 2.586h-6.999a2 2 0 0 0 -2 2v4l.005 .15a2 2 0 0 0 1.995 1.85l6.999 -.001l.001 2.587a2 2 0 0 0 3.414 1.414l6.586 -6.586a2 2 0 0 0 0 -2.828l-6.586 -6.586a2 2 0 0 0 -2.18 -.434l-.145 .068z" />
|
|
@@ -7,19 +7,16 @@ var c=function(o,s,e,t){var r=arguments.length,l=r<3?s:t===null?t=Object.getOwnP
|
|
|
7
7
|
<path
|
|
8
8
|
d="M10 2l-.15 .005a2 2 0 0 0 -1.85 1.995v6.999l-2.586 .001a2 2 0 0 0 -1.414 3.414l6.586 6.586a2 2 0 0 0 2.828 0l6.586 -6.586a2 2 0 0 0 .434 -2.18l-.068 -.145a2 2 0 0 0 -1.78 -1.089l-2.586 -.001v-6.999a2 2 0 0 0 -2 -2h-4z"
|
|
9
9
|
/>
|
|
10
|
-
</svg>`;let
|
|
10
|
+
</svg>`;let a=class extends m{constructor(){super(...arguments),this.itemsSlot=v()}firstUpdated(s){if(super.firstUpdated(s),!this.itemsSlot.value){console.warn("No items slot found for breadcrumbs.");return}const e=this.itemsSlot.value.assignedElements();for(let t=0;t<e.length;t++){const r=e[t];r.separator.length>0||(r.isLastElement=t===e.length-1,r.separator=r.isLastElement?g:h)}}render(){return f`
|
|
11
11
|
<div class="crumbs">
|
|
12
|
-
<slot ${
|
|
12
|
+
<slot ${d(this.itemsSlot)}></slot>
|
|
13
13
|
</div>
|
|
14
|
-
`}};
|
|
14
|
+
`}};a.styles=[...m.styles,p`
|
|
15
15
|
div.crumbs {
|
|
16
16
|
display: flex;
|
|
17
17
|
align-items: center;
|
|
18
18
|
gap: var(--esp-size-tiny-to-small);
|
|
19
19
|
font-size: var(--esp-size-small-to-normal);
|
|
20
|
-
color: var(
|
|
21
|
-
--esp-breadcrumb-separator-color,
|
|
22
|
-
oklch(from var(--esp-color-complementary) var(--esp-l-accent) c h)
|
|
23
|
-
);
|
|
20
|
+
color: var(--esp-breadcrumb-separator-color, var(--esp-color-headings));
|
|
24
21
|
}
|
|
25
|
-
`],
|
|
22
|
+
`],a=c([u("esp-breadcrumbs")],a);export{a as EspalierBreadcrumbs};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
const T=.9,N=.88,_=.8;export{_ as BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR,T as BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR,N as BUTTON_INTERACTION_LIGHTNESS_FACTOR};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,r):e,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(p,t,r,e);else for(var h=p.length-1;h>=0;h--)(l=p[h])&&(n=(s<3?l(n):s>3?l(t,r,n):l(t,r))||n);return s>3&&n&&Object.defineProperty(t,r,n),n};import{css as
|
|
1
|
+
var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,r):e,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(p,t,r,e);else for(var h=p.length-1;h>=0;h--)(l=p[h])&&(n=(s<3?l(n):s>3?l(t,r,n):l(t,r))||n);return s>3&&n&&Object.defineProperty(t,r,n),n};import{css as f,html as d,nothing as c}from"lit";import{customElement as m,eventOptions as v,property as a,state as y}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{ref as k}from"lit/directives/ref.js";import{getIconHrefForHost as x}from"../shared/intent-values.js";import{SlottedIconController as T}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as w}from"../shared/svgs/render-sprite-icon.js";import{BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR as S,BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR as g,BUTTON_INTERACTION_LIGHTNESS_FACTOR as $}from"./action-state-lightness.js";const N=d`<svg
|
|
2
2
|
xmlns="http://www.w3.org/2000/svg"
|
|
3
3
|
viewBox="0 0 24 24"
|
|
4
4
|
fill="none"
|
|
@@ -10,12 +10,12 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
|
|
|
10
10
|
>
|
|
11
11
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
12
12
|
<path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
|
|
13
|
-
</svg>`;let o=class extends b{constructor(){super(...arguments),this.iconSlot=new
|
|
13
|
+
</svg>`;let o=class extends b{constructor(){super(...arguments),this.iconSlot=new T(this),this.innerTabindex=null,this.neutralizingTabindex=!1,this.buttonType="button",this.collapsed=!1,this.disabled=!1,this.href="",this.iconOnly=!1,this.incognito=!1,this.icon="",this.label="",this.loading=!1,this.target="",this.rel="",this.formNoValidate=!1,this.buildIcon=t=>this.loading?d` <span>${N}</span> `:d`
|
|
14
14
|
<span>
|
|
15
|
-
<slot ${
|
|
15
|
+
<slot ${k(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
|
|
16
16
|
${!this.iconSlot.hasSlottedIcon(":scope > *")&&t?w(t):c}
|
|
17
17
|
</span>
|
|
18
|
-
`}static get observedAttributes(){return[...super.observedAttributes,"tabindex"]}attributeChangedCallback(t,r,e){if(super.attributeChangedCallback(t,r,e),t!=="tabindex"||this.neutralizingTabindex)return;const s=e===null?null:Number(e),n=s===null||Number.isNaN(s)?null:s;n!==null&&n>=0?(this.innerTabindex=n,this.writeHostTabindex(null)):n===null&&e!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=n}writeHostTabindex(t){this.getAttribute("tabindex")!==t&&(this.neutralizingTabindex=!0,t===null?this.removeAttribute("tabindex"):this.setAttribute("tabindex",t),this.neutralizingTabindex=!1)}removeAttribute(t){super.removeAttribute(t),t==="tabindex"&&!this.neutralizingTabindex&&(this.innerTabindex=null)}focus(t){this.focusShadowElementAfterUpdate("button, a",t)}handleClick(t){if(this.dispatchEvent(new CustomEvent("clicked",{detail:{},bubbles:!0,composed:!0})),this.buttonType==="submit"){const r=this.closest("form");if(r){const e=document.createElement("button");e.type="submit",e.hidden=!0,this.formNoValidate&&(e.formNoValidate=!0),r.appendChild(e),r.requestSubmit(e),e.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=
|
|
18
|
+
`}static get observedAttributes(){return[...super.observedAttributes,"tabindex"]}attributeChangedCallback(t,r,e){if(super.attributeChangedCallback(t,r,e),t!=="tabindex"||this.neutralizingTabindex)return;const s=e===null?null:Number(e),n=s===null||Number.isNaN(s)?null:s;n!==null&&n>=0?(this.innerTabindex=n,this.writeHostTabindex(null)):n===null&&e!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=n}writeHostTabindex(t){this.getAttribute("tabindex")!==t&&(this.neutralizingTabindex=!0,t===null?this.removeAttribute("tabindex"):this.setAttribute("tabindex",t),this.neutralizingTabindex=!1)}removeAttribute(t){super.removeAttribute(t),t==="tabindex"&&!this.neutralizingTabindex&&(this.innerTabindex=null)}focus(t){this.focusShadowElementAfterUpdate("button, a",t)}handleClick(t){if(this.dispatchEvent(new CustomEvent("clicked",{detail:{},bubbles:!0,composed:!0})),this.buttonType==="submit"){const r=this.closest("form");if(r){const e=document.createElement("button");e.type="submit",e.hidden=!0,this.formNoValidate&&(e.formNoValidate=!0),r.appendChild(e),r.requestSubmit(e),e.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=x(this.icon,this),r=this.loading||this.iconSlot.hasSlottedIcon(":scope > *")||t.length>0,{collapsed:e,iconOnly:s}=this,n=s?this.getAttribute("aria-label")||this.label||c:c,l={"esp-field":!0,"icon-only":s,incognito:this.incognito,"is-collapsed":e,"has-icon":r};return this.href.length?d`
|
|
19
19
|
<div part="wrapper" class=${u(l)}>
|
|
20
20
|
<a
|
|
21
21
|
?disabled=${this.disabled}
|
|
@@ -42,7 +42,7 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
|
|
|
42
42
|
${this.buildIcon(t)}
|
|
43
43
|
</button>
|
|
44
44
|
</div>
|
|
45
|
-
`}};o.styles=[...b.styles,
|
|
45
|
+
`}};o.styles=[...b.styles,f`
|
|
46
46
|
:host {
|
|
47
47
|
--_esp-button-radius: var(--esp-size-border-radius);
|
|
48
48
|
}
|
|
@@ -80,7 +80,10 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
|
|
|
80
80
|
}
|
|
81
81
|
|
|
82
82
|
> span:nth-child(2) {
|
|
83
|
-
background-color: oklch(
|
|
83
|
+
background-color: oklch(
|
|
84
|
+
from var(--esp-color-action-background)
|
|
85
|
+
calc(l * ${g}) c h
|
|
86
|
+
);
|
|
84
87
|
display: none;
|
|
85
88
|
place-content: center;
|
|
86
89
|
border-left: 1px dotted var(--esp-color-border);
|
|
@@ -131,12 +134,18 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
|
|
|
131
134
|
|
|
132
135
|
&:hover,
|
|
133
136
|
&:focus-within {
|
|
134
|
-
background-color: oklch(
|
|
137
|
+
background-color: oklch(
|
|
138
|
+
from var(--esp-color-action-background) calc(l * ${$})
|
|
139
|
+
c h
|
|
140
|
+
);
|
|
135
141
|
|
|
136
142
|
button,
|
|
137
143
|
a {
|
|
138
144
|
> span:nth-child(2) {
|
|
139
|
-
background-color: oklch(
|
|
145
|
+
background-color: oklch(
|
|
146
|
+
from var(--esp-color-action-background)
|
|
147
|
+
calc(l * ${S}) c h
|
|
148
|
+
);
|
|
140
149
|
border-color: oklch(from var(--esp-color-border) calc(l * 1.2) c h);
|
|
141
150
|
}
|
|
142
151
|
}
|
|
@@ -187,7 +196,10 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
|
|
|
187
196
|
button,
|
|
188
197
|
a {
|
|
189
198
|
> span:nth-child(2) {
|
|
190
|
-
background-color: oklch(
|
|
199
|
+
background-color: oklch(
|
|
200
|
+
from var(--esp-color-action-background)
|
|
201
|
+
calc(l * ${g}) c h
|
|
202
|
+
);
|
|
191
203
|
border-color: var(--esp-color-border);
|
|
192
204
|
}
|
|
193
205
|
}
|
|
@@ -210,4 +222,4 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
|
|
|
210
222
|
transform: rotate(360deg);
|
|
211
223
|
}
|
|
212
224
|
}
|
|
213
|
-
`],i([
|
|
225
|
+
`],i([y()],o.prototype,"innerTabindex",void 0),i([a({attribute:"button-type",type:String})],o.prototype,"buttonType",void 0),i([a({type:Boolean})],o.prototype,"collapsed",void 0),i([a({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),i([a({type:String})],o.prototype,"href",void 0),i([a({attribute:"icon-only",type:Boolean})],o.prototype,"iconOnly",void 0),i([a({type:Boolean,reflect:!0})],o.prototype,"incognito",void 0),i([a({type:String})],o.prototype,"icon",void 0),i([a({type:String})],o.prototype,"label",void 0),i([a({type:Boolean,reflect:!0})],o.prototype,"loading",void 0),i([a({type:String})],o.prototype,"target",void 0),i([a({type:String})],o.prototype,"rel",void 0),i([a({attribute:"formnovalidate",type:Boolean})],o.prototype,"formNoValidate",void 0),i([v({capture:!1,passive:!0})],o.prototype,"handleClick",null),o=i([m("esp-button")],o);export{o as EspalierButton};
|
package/dist/image/esp-image.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var a=function(h,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,
|
|
1
|
+
var a=function(h,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(h,e,t,i);else for(var c=h.length-1;c>=0;c--)(s=h[c])&&(r=(o<3?s(r):o>3?s(e,t,r):s(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r},d;import{css as m,html as p,nothing as f}from"lit";import{customElement as y,property as l,state as b}from"lit/decorators.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{validImageDimensions as u}from"./image-dimensions.js";import"./esp-image-option.js";let n=d=class extends g{constructor(){super(...arguments),this.originalHeight=0,this.originalWidth=0,this.imageUrl="",this.localImage="",this.caption="",this.sizes="100vw",this.loading="eager",this.renderedWidth=0,this.resizeObserver=null,this.handleSlotChange=()=>{this.requestUpdate()}}get isPortrait(){const e=u(this.originalWidth,this.originalHeight);return e!==null&&e.height>e.width}findProjected(){for(const e of this.children)if(e.tagName==="PICTURE"||e.tagName==="IMG")return e;return null}connectedCallback(){super.connectedCallback(),d.ensureProjectionStyles(this.getRootNode()),this.resizeObserver??=new ResizeObserver(e=>{const t=e[0]?.contentBoxSize?.[0],i=Math.round(t?t.inlineSize:e[0]?.contentRect.width??0);i>0&&i!==this.renderedWidth&&(this.renderedWidth=i)}),this.resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=null}effectiveSizes(){return this.renderedWidth>0?`${this.renderedWidth}px`:this.sizes}buildSources(){const e=Array.from(this.querySelectorAll("esp-image-option")),t=new Map;for(const i of e){const o=i.getAttribute("url"),r=Number(i.getAttribute("width"));if(!o||!Number.isFinite(r)||r<=0)continue;const s=i.getAttribute("type")??"",c=t.get(s)??[];c.push({url:o,width:r}),t.set(s,c)}return Array.from(t,([i,o])=>({type:i,srcset:o.sort((r,s)=>r.width-s.width).map(r=>`${r.url} ${r.width}w`).join(", ")})).filter(i=>i.srcset.length>0)}willUpdate(e){if(super.willUpdate(e),!this.hasUpdated||e.has("originalWidth")||e.has("originalHeight")){const t=u(this.originalWidth,this.originalHeight);t?this.style.setProperty("--_esp-image-aspect-ratio",`${t.width} / ${t.height}`):this.style.removeProperty("--_esp-image-aspect-ratio")}}updated(e){if(super.updated(e),this.renderedWidth<=0)return;const t=this.findProjected();if(!t)return;const i=this.effectiveSizes();if(t.tagName==="PICTURE")for(const r of t.querySelectorAll("source"))r.setAttribute("sizes",i);const o=t.tagName==="IMG"?t:t.querySelector("img");o?.hasAttribute("srcset")&&o.setAttribute("sizes",i)}render(){if(this.localImage)return p`<img
|
|
2
2
|
src=${this.localImage}
|
|
3
3
|
alt=${this.caption}
|
|
4
4
|
decoding="async"
|
|
@@ -7,25 +7,25 @@ var a=function(h,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnP
|
|
|
7
7
|
${t.map(i=>p`<source
|
|
8
8
|
srcset=${i.srcset}
|
|
9
9
|
sizes=${this.effectiveSizes()}
|
|
10
|
-
type=${i.type||
|
|
10
|
+
type=${i.type||f}
|
|
11
11
|
/>`)}
|
|
12
12
|
<img src=${this.imageUrl} alt=${this.caption} decoding="async" loading=${this.loading} />
|
|
13
13
|
</picture>
|
|
14
|
-
${e}`}static ensureProjectionStyles(e){const t=e
|
|
14
|
+
${e}`}static ensureProjectionStyles(e){const t=e.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&"host"in e?e:e.nodeType===Node.DOCUMENT_NODE?e.head:e.ownerDocument?.head??document.head,i=Array.from(t.querySelectorAll("style[data-esp-image-projection-styles]")),o=i.find(s=>s.textContent===d.projectionStyles);if(o){for(const s of i)s!==o&&s.remove();return}for(const s of i)s.remove();const r=t.ownerDocument.createElement("style");r.dataset.espImageProjectionStyles="",r.textContent=d.projectionStyles,t.appendChild(r)}};n.projectionStyles=`
|
|
15
15
|
esp-image > picture,
|
|
16
16
|
esp-image > img {
|
|
17
17
|
display: block;
|
|
18
18
|
width: 100%;
|
|
19
19
|
height: 100%;
|
|
20
|
-
object-fit: cover;
|
|
20
|
+
object-fit: var(--_esp-image-object-fit, cover);
|
|
21
21
|
}
|
|
22
22
|
esp-image > picture > img {
|
|
23
23
|
display: block;
|
|
24
24
|
width: 100%;
|
|
25
25
|
height: 100%;
|
|
26
|
-
object-fit: cover;
|
|
26
|
+
object-fit: var(--_esp-image-object-fit, cover);
|
|
27
27
|
}
|
|
28
|
-
`,
|
|
28
|
+
`,n.styles=[...g.styles,m`
|
|
29
29
|
:host {
|
|
30
30
|
display: block;
|
|
31
31
|
aspect-ratio: var(--_esp-image-aspect-ratio, auto);
|
|
@@ -46,6 +46,6 @@ var a=function(h,e,t,i){var o=arguments.length,r=o<3?e:i===null?i=Object.getOwnP
|
|
|
46
46
|
display: block;
|
|
47
47
|
height: 100%;
|
|
48
48
|
width: 100%;
|
|
49
|
-
object-fit: cover;
|
|
49
|
+
object-fit: var(--_esp-image-object-fit, cover);
|
|
50
50
|
}
|
|
51
|
-
`],a([l({attribute:"original-height",type:Number})],
|
|
51
|
+
`],a([l({attribute:"original-height",type:Number})],n.prototype,"originalHeight",void 0),a([l({attribute:"original-width",type:Number})],n.prototype,"originalWidth",void 0),a([l({attribute:"low-res",type:String})],n.prototype,"imageUrl",void 0),a([l({attribute:"local-image",type:String})],n.prototype,"localImage",void 0),a([l({type:String})],n.prototype,"caption",void 0),a([l({attribute:"sizes",type:String})],n.prototype,"sizes",void 0),a([l({attribute:"loading",type:String})],n.prototype,"loading",void 0),a([b()],n.prototype,"renderedWidth",void 0),n=d=a([y("esp-image")],n);export{n as EspalierImage};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
function i(n,e){return!Number.isFinite(n)||n<=0||!Number.isFinite(e)||e<=0?null:{width:n,height:e}}export{i as validImageDimensions};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
var g=function(v,e,t,
|
|
1
|
+
var g=function(v,e,t,r){var n=arguments.length,s=n<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(v,e,t,r);else for(var i=v.length-1;i>=0;i--)(l=v[i])&&(s=(n<3?l(s):n>3?l(e,t,s):l(e,t))||s);return n>3&&s&&Object.defineProperty(e,t,s),s},_;import{css as P,html as m}from"lit";import{customElement as D,property as k,state as w}from"lit/decorators.js";import{createRef as b,ref as x}from"lit/directives/ref.js";import"./esp-image-preview.js";import{classMap as E}from"lit/directives/class-map.js";import{getImageDetails as C,releasePreviewUrl as I}from"./image-helpers.js";const R=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
2
2
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
3
3
|
<path d="M11.911 3.634a2 2 0 0 1 1.089 1.78l.001 2.586h6.999a2 2 0 0 1 2 2v4l-.005 .15a2 2 0 0 1 -1.995 1.85l-6.999 -.001l-.001 2.587a2 2 0 0 1 -3.414 1.414l-6.586 -6.586a2 2 0 0 1 0 -2.828l6.586 -6.586a2 2 0 0 1 2.18 -.434l.145 .068z" />
|
|
4
4
|
</svg>`,A=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
5
5
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
6
6
|
<path d="M12.089 3.634a2 2 0 0 0 -1.089 1.78l-.001 2.586h-6.999a2 2 0 0 0 -2 2v4l.005 .15a2 2 0 0 0 1.995 1.85l6.999 -.001l.001 2.587a2 2 0 0 0 3.414 1.414l6.586 -6.586a2 2 0 0 0 0 -2.828l-6.586 -6.586a2 2 0 0 0 -2.18 -.434l-.145 .068z" />
|
|
7
|
-
</svg>`;import{EspalierElementBase as
|
|
7
|
+
</svg>`;import{EspalierElementBase as y}from"../shared/esp-element-base.js";import{calculatePhotoLayout as M}from"../shared/justified-layout.js";import{ESP_EVENTS as f}from"../shared/events.js";const S=220,U=4,L=8e3;let u=_=class extends y{constructor(){super(...arguments),this.uploadInput=b(),this.previewsDiv=b(),this.dropAreaDiv=b(),this.draggingOver=!1,this.uploadedImages=[],this.accept="image/jpeg, image/png, image/webp",this._rejectionNotice="",this._uploadState=new WeakMap,this._selectionGeneration=0,this._chromeWidth=null,this._resizeObserver=new ResizeObserver(()=>{this._chromeWidth=null,this.requestUpdate()}),this._dragPointerId=null,this._dragSourceIndex=null,this._dragOverIndex=null,this._dragStartX=0,this._dragStartY=0,this._dragActive=!1,this._ghostEl=null,this._ghostHalfW=0,this._ghostHalfH=0,this._arrowEl=null,this._cachedPreviews=null,this._lastDropHit=null,this._savedBodyUserSelect="",this._handleDragPointerDown=e=>{if(e.button!==0||this._dragPointerId!==null||e.composedPath().some(n=>n instanceof HTMLElement&&(n.tagName==="BUTTON"||n.tagName==="ESP-BUTTON")))return;const r=this._getPreviewIndex(e);r!==null&&(this._dragPointerId=e.pointerId,this._dragSourceIndex=r,this._dragStartX=e.clientX,this._dragStartY=e.clientY,this._dragActive=!1,document.addEventListener("pointermove",this._onDocPointerMove),document.addEventListener("pointerup",this._onDocPointerUp),document.addEventListener("pointercancel",this._onDocPointerUp))},this._onDocPointerMove=e=>{if(this._dragSourceIndex===null||e.pointerId!==this._dragPointerId)return;const t=e.clientX-this._dragStartX,r=e.clientY-this._dragStartY;if(!this._dragActive){if(Math.sqrt(t*t+r*r)<_._DRAG_THRESHOLD)return;this._dragActive=!0,this._createGhost(e.clientX,e.clientY);const i=this.shadowRoot?.querySelectorAll("esp-image-preview");i&&(this._cachedPreviews=Array.from(i).map(o=>({el:o,rect:o.getBoundingClientRect()})),this._dragSourceIndex!==null&&this._dragSourceIndex<this._cachedPreviews.length&&(this._cachedPreviews[this._dragSourceIndex].el.style.opacity="0.3")),this._savedBodyUserSelect=document.body.style.userSelect,document.body.style.userSelect="none",this.previewsDiv.value&&(this.previewsDiv.value.style.touchAction="none")}this._ghostEl&&(this._ghostEl.style.transform=`translate(${e.clientX-this._ghostHalfW}px, ${e.clientY-this._ghostHalfH}px)`);const n=this._cachedPreviews;if(!n||n.length===0)return;let s=null,l=!1;for(let i=0;i<n.length;i++){const o=n[i].rect;if(e.clientX>=o.left&&e.clientX<=o.right&&e.clientY>=o.top&&e.clientY<=o.bottom){s=i,l=e.clientX>o.left+o.width/2;break}}if(s===null){let i=1/0;for(let o=0;o<n.length;o++){const a=n[o].rect,d=e.clientX-(a.left+a.width/2),h=e.clientY-(a.top+a.height/2),c=d*d+h*h;c<i&&(i=c,s=o)}if(s!==null){const o=n[s].rect;l=e.clientX>o.left+o.width/2}}s!==null&&(this._dragOverIndex=l?s+1:s,!(this._lastDropHit&&this._lastDropHit.index===s&&this._lastDropHit.after===l)&&(this._lastDropHit={index:s,after:l},this._updateDropTargets(n.map(i=>i.el),s,l)))},this._onDocPointerUp=e=>{if(e.pointerId===this._dragPointerId){if(this._dragActive&&this._dragSourceIndex!==null&&this._dragOverIndex!==null&&this._dragSourceIndex!==this._dragOverIndex&&this._dragSourceIndex+1!==this._dragOverIndex){const t=[...this.uploadedImages],[r]=t.splice(this._dragSourceIndex,1),n=this._dragOverIndex>this._dragSourceIndex?this._dragOverIndex-1:this._dragOverIndex;t.splice(n,0,r),this.uploadedImages=t,this.dispatchEvent(new CustomEvent(f.IMAGES_REORDERED,{detail:{images:this.uploadedImages},bubbles:!0,composed:!0}))}this._clearDragState()}},this._arrowColor=null,this.filesSelected=async e=>{const t=[],r=[];for(const d of e)(this._isAccepted(d)?t:r).push(d);if(!t.length){r.length&&this._reportRejectedFiles({unsupported:r,unreadable:[]});return}const n=this._selectionGeneration,s=Math.round(S*Math.min(globalThis.devicePixelRatio||1,2)),l=new Array(t.length).fill(null),i=[];let o=0;const a=async()=>{for(;o<t.length;){const d=o++,h=t[d];try{const c=await C(h,{thumbnailHeight:s});if(n!==this._selectionGeneration){I(c);continue}this._addSelectedImage(l,d,c)}catch{i.push(h)}}};await Promise.all(Array.from({length:Math.min(U,t.length)},()=>a())),(r.length||i.length)&&n===this._selectionGeneration&&this._reportRejectedFiles({unsupported:r,unreadable:i})},this._makeCallbacks=e=>({onProgress:t=>{const r=this._uploadState.get(e);r&&(r.progress=t,r.failed=!1,this.requestUpdate())},onComplete:t=>{if(!this._uploadState.get(e))return;e.uploadedId=t,this._uploadState.delete(e),!this.uploadedImages.find(s=>!s.uploadedId)?this.uploadedImages=[...this.uploadedImages]:this.requestUpdate()},onFailed:()=>{const t=this._uploadState.get(e);t&&(t.progress=void 0,t.failed=!0,this.requestUpdate())}}),this._fullPreviewUrls=new Map,this.setExistingImages=e=>{this._selectionGeneration++,this._releaseSelectedImages(),this.uploadedImages=e.filter(t=>t.url&&t.uploadedId&&Number.isFinite(t.width)&&t.width>0&&Number.isFinite(t.height)&&t.height>0).map(t=>({source:"existing",url:t.url,urls:t.urls,height:t.height,width:t.width,uploadedId:t.uploadedId,orientation:t.width>t.height?"landscape":"portrait"})),this._uploadState=new WeakMap}}connectedCallback(){super.connectedCallback(),this._resizeObserver.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this._resizeObserver.disconnect(),this._clearDragState(),clearTimeout(this._noticeTimer),this._selectionGeneration++,this._releaseSelectedImages()}_getPreviewIndex(e){const t=this.shadowRoot?.querySelectorAll("esp-image-preview");if(!t)return null;for(const r of e.composedPath())if(r instanceof HTMLElement&&r.tagName==="ESP-IMAGE-PREVIEW"){for(let n=0;n<t.length;n++)if(t[n]===r)return n}return null}_clearDragState(){document.removeEventListener("pointermove",this._onDocPointerMove),document.removeEventListener("pointerup",this._onDocPointerUp),document.removeEventListener("pointercancel",this._onDocPointerUp),this._dragActive&&(this._cachedPreviews&&this._dragSourceIndex!==null&&this._dragSourceIndex<this._cachedPreviews.length&&(this._cachedPreviews[this._dragSourceIndex].el.style.opacity=""),this._clearDropTargets(),document.body.style.userSelect=this._savedBodyUserSelect,this.previewsDiv.value&&(this.previewsDiv.value.style.touchAction="")),this._ghostEl?.remove(),this._ghostEl=null,this._cachedPreviews=null,this._lastDropHit=null,this._dragPointerId=null,this._dragSourceIndex=null,this._dragOverIndex=null,this._dragActive=!1}_createGhost(e,t){const r=this.shadowRoot?.querySelectorAll("esp-image-preview");if(!r||this._dragSourceIndex===null)return;const n=r[this._dragSourceIndex],s=n.getBoundingClientRect(),l=document.createElement("div"),i=Math.min(120/s.width,120/s.height),o=s.width*i,a=s.height*i;l.style.cssText=`
|
|
8
8
|
position: fixed;
|
|
9
9
|
left: 0;
|
|
10
10
|
top: 0;
|
|
@@ -19,7 +19,7 @@ var g=function(v,e,t,i){var n=arguments.length,s=n<3?e:i===null?i=Object.getOwnP
|
|
|
19
19
|
opacity: 0.85;
|
|
20
20
|
will-change: transform;
|
|
21
21
|
transform: translate(${e-o/2}px, ${t-a/2}px);
|
|
22
|
-
`;const d=n.shadowRoot?.querySelector("img");d&&(l.style.backgroundImage=`url(${d.src})`),document.body.appendChild(l),this._ghostEl=l,this._ghostHalfW=o/2,this._ghostHalfH=a/2}_updateDropTargets(e,t,
|
|
22
|
+
`;const d=n.shadowRoot?.querySelector("img");d&&(l.style.backgroundImage=`url(${d.src})`),document.body.appendChild(l),this._ghostEl=l,this._ghostHalfW=o/2,this._ghostHalfH=a/2}_updateDropTargets(e,t,r){for(let d=0;d<e.length;d++){const h=e[d];d===t&&d!==this._dragSourceIndex?h.setAttribute("data-drop-side",r?"right":"left"):h.removeAttribute("data-drop-side")}if(t===this._dragSourceIndex){this._arrowEl&&(this._arrowEl.style.display="none");return}const n=this._cachedPreviews,s=n?n[t].rect:e[t].getBoundingClientRect(),l=r?A:R;if(!this._arrowEl){const d=document.createElement("div");d.style.cssText=`
|
|
23
23
|
position: fixed;
|
|
24
24
|
left: 0;
|
|
25
25
|
top: 0;
|
|
@@ -30,27 +30,27 @@ var g=function(v,e,t,i){var n=arguments.length,s=n<3?e:i===null?i=Object.getOwnP
|
|
|
30
30
|
justify-content: center;
|
|
31
31
|
will-change: transform;
|
|
32
32
|
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
|
|
33
|
-
`,document.body.appendChild(d),this._arrowEl=d;const
|
|
33
|
+
`,document.body.appendChild(d),this._arrowEl=d;const h=e[t],p=getComputedStyle(h).getPropertyValue("--esp-color-complementary").trim();this._arrowColor=p?`oklch(from ${p} var(--esp-l-accent) c h)`:"oklch(0.7 0.2 330)"}this._arrowEl.innerHTML=l;const i=this._arrowEl.querySelector("svg");i&&(i.style.width="40px",i.style.height="40px",i.style.color=this._arrowColor??"oklch(0.7 0.2 330)"),this._arrowEl.style.display="flex";const o=r?s.left+s.width*.75:s.left+s.width*.25,a=s.top+s.height/2;this._arrowEl.style.transform=`translate(${o-20}px, ${a-20}px)`}_clearDropTargets(){const e=this.shadowRoot?.querySelectorAll("esp-image-preview");if(e)for(const t of e)t.removeAttribute("data-drop-side");this._arrowEl?.remove(),this._arrowEl=null,this._arrowColor=null}getContainerWidth(){const e=this.parentElement??this.offsetParent,t=e?e.getBoundingClientRect().width:window.innerWidth;if(t<=0){const r=window.innerWidth;return r<640?r-32:r<1024?r*90/100-32:Math.min(r*85/100-32,1400)}if(this._chromeWidth===null){const r=this.previewsDiv.value;if(r){const n=a=>{const d=parseFloat(a);return Number.isFinite(d)?d:0},s=getComputedStyle(r),l=n(s.paddingLeft)+n(s.paddingRight),i=this.shadowRoot?.querySelector(".esp-field"),o=i?n(getComputedStyle(i).borderLeftWidth)+n(getComputedStyle(i).borderRightWidth):0;this._chromeWidth=l+o}}return Math.max(t-(this._chromeWidth??0),1)}_isAccepted(e){const t=this.accept.split(",").map(s=>s.trim().toLowerCase()).filter(Boolean);if(!t.length)return e.type.toLowerCase().startsWith("image/");const r=e.type.toLowerCase(),n=e.name.toLowerCase();return t.some(s=>s.startsWith(".")?n.endsWith(s):s.endsWith("/*")?r.startsWith(s.slice(0,-1)):r===s)}_addSelectedImage(e,t,r){e[t]=r;const n=[...this.uploadedImages];let s=-1;for(let i=t-1;i>=0&&s<0;i--){const o=e[i];if(!o)continue;const a=n.indexOf(o);a>=0&&(s=a+1)}for(let i=t+1;i<e.length&&s<0;i++){const o=e[i];if(!o)continue;const a=n.indexOf(o);a>=0&&(s=a)}s<0&&(s=n.length),n.splice(s,0,r);const l=new AbortController;this._uploadState.set(r,{progress:null,failed:!1,controller:l}),this.uploadedImages=n,this.dispatchEvent(new CustomEvent(f.FILE_SELECTED,{detail:{image:r,signal:l.signal,...this._makeCallbacks(r)},bubbles:!0,composed:!0}))}_reportRejectedFiles(e){this.dispatchEvent(new CustomEvent(f.FILES_REJECTED,{detail:e,bubbles:!0,composed:!0}));const t=n=>n===1?"file":"files",r=[];e.unsupported.length&&r.push(`${e.unsupported.length} unsupported ${t(e.unsupported.length)} skipped`),e.unreadable.length&&r.push(`${e.unreadable.length} ${t(e.unreadable.length)} could not be read`),this._rejectionNotice=r.join("; "),clearTimeout(this._noticeTimer),this._noticeTimer=setTimeout(()=>{this._rejectionNotice=""},L)}_previewUrlFor(e,t){if(e.source!=="selected")return this._pickExistingPreviewUrl(e,t);const r=Math.min(globalThis.devicePixelRatio||1,2),n=S*r;if(t*r<=n*_._THUMBNAIL_UPSCALE_SLACK||e.height<=n)return e.url;let i=this._fullPreviewUrls.get(e);return i||(i=URL.createObjectURL(e.file),this._fullPreviewUrls.set(e,i)),i}_pickExistingPreviewUrl(e,t){const r=e.urls;if(!r?.length)return e.url;const n=Math.min(globalThis.devicePixelRatio||1,2),s=e.height>0?e.width/e.height:1,l=t*s*n,i=[...r].sort((a,d)=>a.minWidth-d.minWidth);return(i.find(a=>a.minWidth>=l)??i[i.length-1]).url}_releaseFullPreviewUrl(e){if(e.source!=="selected")return;const t=this._fullPreviewUrls.get(e);t&&(URL.revokeObjectURL(t),this._fullPreviewUrls.delete(e))}_releaseSelectedImages(){for(const e of this.uploadedImages)e.source==="selected"&&(this._uploadState.get(e)?.controller.abort(),I(e));for(const e of this._fullPreviewUrls.values())URL.revokeObjectURL(e);this._fullPreviewUrls.clear()}render(){const{draggingOver:e,uploadedImages:t}=this,r={"dragging-over":e,"has-previews":t.length},n=this.getContainerWidth(),s=window.innerHeight>0?window.innerHeight/2:Number.POSITIVE_INFINITY,l=M(t,n,S,8,s);return m` <div
|
|
34
34
|
class="esp-field"
|
|
35
35
|
@click=${()=>{this.dropAreaDiv.value?.focus({preventScroll:!0})}}
|
|
36
|
-
@dragover=${
|
|
37
|
-
@dragleave=${
|
|
38
|
-
@drop=${
|
|
36
|
+
@dragover=${i=>{i.preventDefault(),this.draggingOver=!0}}
|
|
37
|
+
@dragleave=${i=>{i.preventDefault(),this.draggingOver=!1}}
|
|
38
|
+
@drop=${i=>{i.preventDefault(),this.draggingOver=!1;const o=i.dataTransfer?.files;o&&o.length&&this.filesSelected(o)}}
|
|
39
39
|
>
|
|
40
40
|
<div
|
|
41
41
|
${x(this.previewsDiv)}
|
|
42
|
-
class=${
|
|
42
|
+
class=${E({previews:!0,...r})}
|
|
43
43
|
@pointerdown=${this._handleDragPointerDown}
|
|
44
44
|
>
|
|
45
|
-
${l.map(
|
|
46
|
-
${
|
|
45
|
+
${l.map(i=>m`<div class="photo-row" style="height: ${i.height}px;">
|
|
46
|
+
${i.images.map(o=>{const a=i.height,d=o.width/o.height*a,h=this._uploadState.get(o);return m`<esp-image-preview
|
|
47
47
|
style="width: ${d}px; height: ${a}px; flex-shrink: 0;"
|
|
48
48
|
.url=${this._previewUrlFor(o,a)}
|
|
49
49
|
.alt=${o.source==="selected"?o.file.name:""}
|
|
50
|
-
.progress=${
|
|
51
|
-
.failed=${
|
|
52
|
-
@remove-image=${()=>{const
|
|
53
|
-
@retry-upload=${()=>{if(o.source!=="selected")return;const
|
|
50
|
+
.progress=${h?.progress}
|
|
51
|
+
.failed=${h?.failed??!1}
|
|
52
|
+
@remove-image=${()=>{const c=this.uploadedImages.indexOf(o);if(c<0)return;this._uploadState.get(o)?.controller.abort(),this._uploadState.delete(o),I(o),this._releaseFullPreviewUrl(o);const p=[...this.uploadedImages];p.splice(c,1),this.uploadedImages=p,this.dispatchEvent(new CustomEvent(f.FILE_REMOVED,{detail:o,bubbles:!0,composed:!0}))}}
|
|
53
|
+
@retry-upload=${()=>{if(o.source!=="selected")return;const c=new AbortController,p=this._uploadState.get(o);p?(p.failed=!1,p.progress=null,p.controller=c):this._uploadState.set(o,{progress:null,failed:!1,controller:c}),this.requestUpdate(),this.dispatchEvent(new CustomEvent(f.UPLOAD_RETRY,{detail:{image:o,signal:c.signal,...this._makeCallbacks(o)},bubbles:!0,composed:!0}))}}
|
|
54
54
|
></esp-image-preview>`})}
|
|
55
55
|
</div>`)}
|
|
56
56
|
</div>
|
|
@@ -59,9 +59,9 @@ var g=function(v,e,t,i){var n=arguments.length,s=n<3?e:i===null?i=Object.getOwnP
|
|
|
59
59
|
tabindex="0"
|
|
60
60
|
role="button"
|
|
61
61
|
aria-label="Add photos"
|
|
62
|
-
class=${
|
|
62
|
+
class=${E({"drop-area":!0,...r})}
|
|
63
63
|
@click=${()=>{this.uploadInput.value?.click()}}
|
|
64
|
-
@keydown=${
|
|
64
|
+
@keydown=${i=>{(i.code==="Enter"||i.code==="Space")&&(i.preventDefault(),this.uploadInput.value?.click())}}
|
|
65
65
|
>
|
|
66
66
|
<svg
|
|
67
67
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -109,9 +109,9 @@ var g=function(v,e,t,i){var n=arguments.length,s=n<3?e:i===null?i=Object.getOwnP
|
|
|
109
109
|
multiple
|
|
110
110
|
accept=${this.accept}
|
|
111
111
|
hidden
|
|
112
|
-
@change=${()=>{const
|
|
112
|
+
@change=${()=>{const i=this.uploadInput.value;!i||!i.files||!i.files.length||(this.filesSelected(i.files),i.value="")}}
|
|
113
113
|
/>
|
|
114
|
-
</div>`}};u._DRAG_THRESHOLD=8,u._THUMBNAIL_UPSCALE_SLACK=1.1,u.styles=[...
|
|
114
|
+
</div>`}};u._DRAG_THRESHOLD=8,u._THUMBNAIL_UPSCALE_SLACK=1.1,u.styles=[...y.styles,P`
|
|
115
115
|
:host {
|
|
116
116
|
overflow: hidden;
|
|
117
117
|
}
|
|
@@ -228,14 +228,12 @@ var g=function(v,e,t,i){var n=arguments.length,s=n<3?e:i===null?i=Object.getOwnP
|
|
|
228
228
|
|
|
229
229
|
&[data-drop-side="left"]::after {
|
|
230
230
|
left: 0;
|
|
231
|
-
border-left: 3px solid
|
|
232
|
-
oklch(from var(--esp-color-complementary) var(--esp-l-accent) c h);
|
|
231
|
+
border-left: 3px solid var(--esp-color-headings);
|
|
233
232
|
}
|
|
234
233
|
|
|
235
234
|
&[data-drop-side="right"]::after {
|
|
236
235
|
right: 0;
|
|
237
|
-
border-right: 3px solid
|
|
238
|
-
oklch(from var(--esp-color-complementary) var(--esp-l-accent) c h);
|
|
236
|
+
border-right: 3px solid var(--esp-color-headings);
|
|
239
237
|
}
|
|
240
238
|
}
|
|
241
239
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { nothing, type PropertyValues } from "lit";
|
|
2
|
+
import { EspalierElementBase } from "../shared/esp-element-base.js";
|
|
2
3
|
import "../image/esp-image.js";
|
|
3
4
|
import "../image/esp-image-option.js";
|
|
4
5
|
import "../button/esp-button.js";
|
|
@@ -52,7 +53,7 @@ import "../button/esp-button.js";
|
|
|
52
53
|
* @menuLabel Lightbox
|
|
53
54
|
* @menuIcon photo
|
|
54
55
|
*/
|
|
55
|
-
export declare class EspalierLightbox extends
|
|
56
|
+
export declare class EspalierLightbox extends EspalierElementBase {
|
|
56
57
|
/**
|
|
57
58
|
* A CSS selector for the container element that holds the
|
|
58
59
|
* `esp-image` elements to include in the lightbox.
|
|
@@ -72,7 +73,7 @@ export declare class EspalierLightbox extends LitElement {
|
|
|
72
73
|
protected updated(changed: PropertyValues): void;
|
|
73
74
|
disconnectedCallback(): void;
|
|
74
75
|
protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
75
|
-
static styles: import("lit").CSSResult;
|
|
76
|
+
static styles: import("lit").CSSResult[];
|
|
76
77
|
}
|
|
77
78
|
declare global {
|
|
78
79
|
interface HTMLElementTagNameMap {
|