@taprootio/espalier 5.0.0 → 6.1.0
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 +21 -0
- package/css/image/banner-static.css +237 -0
- package/custom-elements.json +3842 -3637
- package/dist/image/esp-image.d.ts +70 -3
- package/dist/image/esp-image.js +171 -12
- package/dist/pickers/esp-pick-one.d.ts +4 -0
- package/dist/pickers/esp-pick-one.js +10 -12
- package/dist/pickers/esp-pick-some.js +7 -7
- package/dist/pickers/esp-picker-base.js +5 -5
- package/dist/pickers/esp-picker-item.js +5 -5
- package/dist/pickers/esp-picker-menu.js +4 -3
- package/dist/pickers/typeahead-controller.js +1 -1
- package/dist/shared/events.d.ts +1 -1
- package/dist/shared/virtualizer/internal/virtualize.js +1 -1
- package/dist/video/esp-video.d.ts +18 -53
- package/dist/video/esp-video.js +25 -25
- package/espalier.css-data.json +16 -0
- package/espalier.token-manifest.json +24 -0
- package/package.json +5 -2
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var l=function(
|
|
1
|
+
var l=function(y,e,t,i){var n=arguments.length,s=n<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(y,e,t,i);else for(var h=y.length-1;h>=0;h--)(r=y[h])&&(s=(n<3?r(s):n>3?r(e,t,s):r(e,t))||s);return n>3&&s&&Object.defineProperty(e,t,s),s};import{createRef as m}from"lit/directives/ref.js";import{EspalierElementBase as P}from"../shared/esp-element-base.js";import{property as a,state as f}from"lit/decorators.js";import{adoptPickerItem as C,EspalierPickerItem as R,pickerItemDisplay as g,pickerItemValue as b,samePickerItemDisplay as F}from"./esp-picker-item.js";import{css as O,html as S,unsafeCSS as A}from"lit";import{findContainingPopovers as M,PopoverController as x}from"../shared/popover-controller.js";import{scrollToContainAnchoredSurface as E,viewportSize as v}from"../shared/viewport.js";import{FormFieldController as _}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as z}from"../shared/form-field-description-controller.js";import{TypeaheadController as D}from"./typeahead-controller.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as T}from"../shared/responsive.js";import{cancelSVG as V}from"../shared/svgs/cancel.js";import{quietCloseButton as H}from"../shared/style-fragments.js";import{ScrollLock as I}from"../shared/overlay-controller.js";class o extends P{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new _({host:this,internals:this.internals,getFormValue:()=>this.getPickerFormValue(),getValidity:()=>this.getPickerValidity(),onReset:()=>this.handlePickerReset(),onRestore:e=>this.handlePickerRestore(e),onDisabled:e=>{this.disabled=e}}),this.formItemDescription=new z({host:this,getTarget:()=>this.theInput.value}),this._showOptions=!1,this.itemsSlot=m(),this.pickerMenu=m(),this.theInput=m(),this.pickerField=m(),this._lastViewportHeight=0,this._containRepositionFrame=null,this.fullscreenPlaceholderInlineSize=0,this.fullscreenPlaceholderViewportWidth=0,this.fullscreenPlaceholderFieldHeight=0,this.fullscreenPlaceholderEntryInlineSize=0,this.fullscreenPlaceholderContentSized=!1,this.popoverCtrl=new x({host:this,closeStrategy:"source-identity",isOpen:()=>this._showOptions,onShouldClose:()=>{this.showOptions=!1},onPositionUpdate:()=>{this.pickerMenu.value?.updatePosition(this);const{height:e}=v();if(this.pickerMenu.value?.hasAttribute("data-fullscreen")){this._lastViewportHeight=e;return}if(this._lastViewportHeight!==0&&e!==this._lastViewportHeight){const t=this._lastViewportHeight-e;t>=o.KEYBOARD_THRESHOLD?(this._scrollToContainPopover(),this._lastViewportHeight=e):t<0&&(this._lastViewportHeight=e)}},getPositionElements:()=>this.hasAttribute("data-picker-menu-fullscreen")?[this.pickerField.value]:[this.pickerMenu.value],getInsideElements:()=>[this.pickerMenu.value??null],onOutsideClick:()=>{this.closeAndResetTypeahead(),requestAnimationFrame(()=>{const e=document.activeElement;!this.showOptions&&(e===null||e===document.body||e===this)&&this.theInput.value?.focus()})}}),this.typeaheadLoading=!1,this.filteredItems=[],this.inputFocused=!1,this.typeaheadCtrl=new D({host:this,onFilteredItemsChanged:e=>{this.filteredItems=this.decorateFilteredItems(e)},onLoadingChanged:e=>{this.typeaheadLoading=e}}),this.typeahead=!1,this.fetchItems=null,this.debounceMs=void 0,this.handleTypeaheadInput=e=>{this.typeahead&&(this.typeaheadCtrl.setQuery(e.target.value),this.showOptions||(this.showOptions=!0))},this.handleInputBlur=e=>{this.inputFocused=!1;const t=e.relatedTarget;if(!(t&&(this.contains(t)||this.shadowRoot?.contains(t)))){if(t&&this.showOptions){requestAnimationFrame(()=>{this.showOptions&&this.closeAndResetTypeahead()});return}if(!t&&this.showOptions){requestAnimationFrame(()=>{this.showOptions&&this.shadowRoot?.activeElement!==this.theInput.value&&this.closeAndResetTypeahead()});return}this.closeAndResetTypeahead()}},this.handleMenuDismissRequested=e=>{e.preventDefault(),e.stopPropagation(),this.dismissMenu()},this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1,this.pickerItems=[],this.placeholder="Choose...",this.width="",this._slotExtractPending=!1,this.extractedElements=new WeakMap,this.recordElements=new WeakMap}getPickerFormValue(){return null}getPickerValidity(){return null}handlePickerReset(){}handlePickerRestore(e){}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}get showOptions(){return this._showOptions}set showOptions(e){if(e&&this.disabled)return;const t=this._showOptions;this._showOptions=e;const i=this.theInput.value;i&&(i.ariaExpanded=String(e)),e&&this.pickerMenu.value?(this.popoverCtrl.publishCloseOthers(M(this)),this.pickerMenu.value.positionSelf(this),this._lastViewportHeight=v().height,this.clearActiveDescendant(),this.popoverCtrl.startTracking(),this.popoverCtrl.startOutsideClick()):!e&&this.pickerMenu.value&&(this._containRepositionFrame!==null&&(cancelAnimationFrame(this._containRepositionFrame),this._containRepositionFrame=null),this.popoverCtrl.stopTracking(),this.popoverCtrl.stopOutsideClick(),this.pickerMenu.value.hideMenu(),this.clearActiveDescendant(),this._lastViewportHeight=0),e&&!t&&this.typeahead&&this.typeaheadCtrl.isRemote&&this.filteredItems.length===0&&this.typeaheadCtrl.fetchInitial()}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote}get typeaheadIsRemote(){return this.typeaheadCtrl.isRemote}refreshTypeaheadItems(){this.typeaheadCtrl.setAllItems(this.pickerItems)}fetchInitialTypeaheadItems(){this.typeaheadCtrl.fetchInitial()}resetTypeaheadInput(){const e=this.theInput.value;e&&(e.value=this.typeaheadRestoreText),this.preservesRemoteResultsOnReset?this.typeaheadCtrl.resetQuery():this.typeaheadCtrl.clearQuery()}closeAndResetTypeahead(){this.showOptions=!1,this.typeahead&&this.resetTypeaheadInput()}dismissMenu(){this.closeAndResetTypeahead(),this.theInput.value?.focus()}renderPickerMenuDismissButton(){return S`<button
|
|
2
2
|
class="picker-mobile-dismiss"
|
|
3
3
|
type="button"
|
|
4
4
|
aria-label="Close options"
|
|
5
5
|
@click=${e=>{e.preventDefault(),e.stopPropagation(),this.pickerMenu.value?.requestDismiss()}}
|
|
6
6
|
>
|
|
7
|
-
${
|
|
8
|
-
</button>`}enterPickerMenuFullscreen(){const e=this.pickerField.value;if(!e)return null;const t=
|
|
7
|
+
${V}
|
|
8
|
+
</button>`}enterPickerMenuFullscreen(){const e=this.pickerField.value;if(!e)return null;const t=v().width;if(!this.hasAttribute("data-picker-menu-fullscreen")){const c=this.getBoundingClientRect(),d=Number.isFinite(c.width)?c.width:0;this.fullscreenPlaceholderEntryInlineSize=Math.max(d,0),this.setAttribute("data-picker-menu-fullscreen",""),e.setAttribute("data-picker-menu-fullscreen-surface",""),e.setAttribute("popover","manual");try{e.matches(":popover-open")||e.showPopover()}catch{return e.removeAttribute("popover"),e.removeAttribute("data-picker-menu-fullscreen-surface"),this.removeAttribute("data-picker-menu-fullscreen"),this.fullscreenPlaceholderEntryInlineSize=0,null}this.fullscreenPlaceholderContentSized=!(this.getBoundingClientRect().width>0),I.lock(this,{preserveScrollPosition:!0}),this.popoverCtrl.refreshPositionElements()}const n=e.getBoundingClientRect(),s=n.height;let r;if(this.fullscreenPlaceholderContentSized)r=Math.min(this.fullscreenPlaceholderEntryInlineSize,t);else{const c=this.getBoundingClientRect().width;r=Number.isFinite(c)?Math.min(Math.max(c,0),t):this.fullscreenPlaceholderInlineSize}const h=r!==this.fullscreenPlaceholderInlineSize||t!==this.fullscreenPlaceholderViewportWidth||s!==this.fullscreenPlaceholderFieldHeight;if(h){const d=["inline-size","box-sizing","padding","margin","overflow"].map(p=>({name:p,value:e.style.getPropertyValue(p),priority:e.style.getPropertyPriority(p)}));this.removeAttribute("data-picker-menu-fullscreen"),e.style.setProperty("inline-size",`${r}px`),e.style.setProperty("box-sizing","border-box"),e.style.setProperty("padding","0"),e.style.setProperty("margin","0"),e.style.setProperty("overflow","visible");const u=e.getBoundingClientRect().height;this.setAttribute("data-picker-menu-fullscreen","");for(const{name:p,value:k,priority:w}of d)k?e.style.setProperty(p,k,w):e.style.removeProperty(p);this.fullscreenPlaceholderInlineSize=r,this.fullscreenPlaceholderViewportWidth=t,this.fullscreenPlaceholderFieldHeight=s,this.style.setProperty("--_esp-picker-fullscreen-placeholder-block-size",`${u}px`),this.fullscreenPlaceholderContentSized?this.style.setProperty("--_esp-picker-fullscreen-placeholder-inline-size",`${r}px`):this.style.removeProperty("--_esp-picker-fullscreen-placeholder-inline-size")}return h?e.getBoundingClientRect():n}exitPickerMenuFullscreen(){const e=this.hasAttribute("data-picker-menu-fullscreen"),t=this.pickerField.value;if(t?.matches(":popover-open"))try{t.hidePopover()}catch{}t?.removeAttribute("popover"),t?.removeAttribute("data-picker-menu-fullscreen-surface"),this.removeAttribute("data-picker-menu-fullscreen"),this.style.removeProperty("--_esp-picker-fullscreen-placeholder-block-size"),this.style.removeProperty("--_esp-picker-fullscreen-placeholder-inline-size"),this.fullscreenPlaceholderInlineSize=0,this.fullscreenPlaceholderViewportWidth=0,this.fullscreenPlaceholderFieldHeight=0,this.fullscreenPlaceholderEntryInlineSize=0,this.fullscreenPlaceholderContentSized=!1,I.unlock(this),e&&this.popoverCtrl.refreshPositionElements()}pickerMenuIsOpen(){return this.showOptions}disconnectedCallback(){this.showOptions=!1,this.exitPickerMenuFullscreen(),super.disconnectedCallback()}handleSharedPickerKeydown(e){switch(e.key){case" ":return this.typeahead||(this.showOptions=!this.showOptions),!0;case"Tab":return this.showOptions&&(this.showOptions=!1),this.typeahead&&this.resetTypeaheadInput(),!0;case"Escape":return this.closeAndResetTypeahead(),!0;default:return!1}}handleMenuNavigationKey(e,t){if(t.preventDefault(),!this.showOptions){this.showOptions=!0;return}this.pickerMenu.value?.doKeyboardNav(e),this.updateActiveDescendant()}get menuItems(){return this.typeahead?this.filteredItems:this.pickerItems}focus(){this.theInput.value?.focus()}setFormItemDescription(e){this.formItemDescription.setDescription(e)}setFormItemInvalid(e){this.formItemDescription.setInvalid(e)}setFormItemLabel(e){this.formItemDescription.setLabel(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}updateActiveDescendant(){const e=this.theInput.value;if(!e||!this.pickerMenu.value)return;const t=this.pickerMenu.value.getHighlightedElement();e.ariaActiveDescendantElement=t}clearActiveDescendant(){const e=this.theInput.value;e&&(e.ariaActiveDescendantElement=null)}_scrollToContainPopover(){const e=this.pickerMenu.value;e&&(this._containRepositionFrame!==null&&cancelAnimationFrame(this._containRepositionFrame),this._containRepositionFrame=E(this,e,()=>{this._containRepositionFrame=null,this.showOptions&&this.pickerMenu.value?.updatePosition(this)}))}syncSelectionFromItems(e){}willUpdate(e){super.willUpdate(e),this.syncSelectionFromItems(e),this.typeahead&&((e.has("fetchItems")||e.has("typeahead"))&&this.typeaheadCtrl.setFetchItems(this.fetchItems),(e.has("pickerItems")||e.has("typeahead")||e.has("fetchItems")&&this.fetchItems===null)&&(this.typeaheadCtrl.showingRemoteResults&&(this.filteredItems=this.decorateFilteredItems(this.filteredItems)),this.typeaheadCtrl.setAllItems(this.pickerItems)),(e.has("debounceMs")||e.has("typeahead"))&&this.debounceMs!==void 0&&this.typeaheadCtrl.setDebounceMs(this.debounceMs))}updated(e){super.updated(e),e.has("disabled")&&this.disabled&&this.showOptions&&(this.showOptions=!1),e.has("width")&&(this.width?this.style.width=this.width:this.style.removeProperty("width"))}firstUpdated(e){super.firstUpdated(e);const t=this.theInput.value;if(t&&(t.role="combobox",t.ariaHasPopup="listbox",t.ariaExpanded="false",t.ariaAutoComplete=this.typeahead?"list":"none",this.pickerMenu.value)){const n=t;n.ariaControlsElements=[this.pickerMenu.value]}const i=this.itemsSlot.value;i&&(this.extractSlotItems(i),i.addEventListener("slotchange",()=>this.extractSlotItems(i)))}copyPickerItem(e,t){const i={...e,...t},n=this.recordElements.get(e);return n&&this.recordElements.set(i,n),i}extractSlotItems(e){this._slotExtractPending||(this._slotExtractPending=!0,queueMicrotask(()=>{this._slotExtractPending=!1;const t=e.assignedElements();if(t.length===0)return;const i=[],n=new WeakMap;for(const s of t){if(!(s instanceof R))throw new Error(`Picker items must be of type esp-picker-item, but got <${s.tagName.toLowerCase()}>`);const r=s,h=Array.from(r.childNodes),c=h.length>0?h.map(p=>p.cloneNode(!0)):void 0,d=b(r);n.set(r,{index:i.length,value:d});const u={...g(r),value:d,selected:r.selected||r.hasAttribute("selected"),slotNodes:c};this.recordElements.set(u,r),i.push(u),C(r,this)}this.extractedElements=n,this.pickerItems=i;for(const s of t)s.remove()}))}pickerItemChanged(e){const t=this.extractedElements.get(e);if(!t||b(e)!==t.value)return;const i=this.pickerItems[t.index];if(!i||i.value!==t.value||this.recordElements.get(i)!==e)return;const n=g(e);if(F(n,i))return;const s=[...this.pickerItems];s[t.index]=this.copyPickerItem(i,n),this.pickerItems=s}}o.clearsFormItemErrorOnChange=!0,o.formAssociated=!0,o.KEYBOARD_THRESHOLD=150,o.pickerFieldStyles=[...H(".esp-field > .picker-mobile-dismiss"),O`
|
|
9
9
|
:host([disabled]) {
|
|
10
10
|
pointer-events: none;
|
|
11
11
|
opacity: 0.5;
|
|
@@ -42,7 +42,7 @@ var l=function(m,e,t,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnP
|
|
|
42
42
|
display: none;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
@media ${
|
|
45
|
+
@media ${A(T)} {
|
|
46
46
|
|
|
47
47
|
:host([data-picker-menu-fullscreen]) {
|
|
48
48
|
min-block-size: var(--_esp-picker-fullscreen-placeholder-block-size, 2.75rem);
|
|
@@ -86,4 +86,4 @@ var l=function(m,e,t,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnP
|
|
|
86
86
|
box-shadow: inset 0 0 0 3px var(--esp-color-link, var(--esp-color-shadow));
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
|
-
`],l([
|
|
89
|
+
`],l([f()],o.prototype,"showOptions",null),l([f()],o.prototype,"typeaheadLoading",void 0),l([f()],o.prototype,"filteredItems",void 0),l([f()],o.prototype,"inputFocused",void 0),l([a({type:Boolean,reflect:!0})],o.prototype,"typeahead",void 0),l([a({attribute:!1})],o.prototype,"fetchItems",void 0),l([a({type:Number,attribute:"debounce-ms"})],o.prototype,"debounceMs",void 0),l([a({type:String,reflect:!0})],o.prototype,"name",void 0),l([a({type:Boolean,reflect:!0})],o.prototype,"required",void 0),l([a({attribute:"required-message"})],o.prototype,"requiredMessage",void 0),l([a({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),l([a({type:Array})],o.prototype,"pickerItems",void 0),l([a({type:String})],o.prototype,"placeholder",void 0),l([a({type:String})],o.prototype,"width",void 0);export{o as EspalierPickerBase};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
var
|
|
1
|
+
var c=function(e,t,r,n){var i=arguments.length,o=i<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,r):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(e,t,r,n);else for(var h=e.length-1;h>=0;h--)(l=e[h])&&(o=(i<3?l(o):i>3?l(t,r,o):l(t,r))||o);return i>3&&o&&Object.defineProperty(t,r,o),o};import{LitElement as g,nothing as u,css as v,html as a}from"lit";import{customElement as m,property as p}from"lit/decorators.js";import{ref as f}from"lit/directives/ref.js";import{getIconHrefForHost as y}from"../shared/intent-values.js";import{SlottedIconController as x}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as b}from"../shared/svgs/render-sprite-icon.js";import{DocumentSpriteController as k}from"../shared/document-sprite.js";const S=["text","icon","styles"],d=new WeakMap;function P(e,t){d.set(e,t)}function E(e){return{text:e.text||e.getAttribute("text")||e.textContent?.trim()||"",icon:e.icon||e.getAttribute("icon")||"",styles:e.styles}}function H(e,t){return e.text===t.text&&(e.icon??"")===(t.icon??"")&&e.styles===t.styles}function j(e){return e.value||e.getAttribute("value")||""}let s=class extends g{constructor(){super(),this.internals=this.attachInternals(),this.iconSlot=new x(this),this.text="",this.icon="",this.value="",this.selected=!1,new k(this,{reactToSpriteChanges:!0}),this.internals.role="option"}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","option")}updated(t){super.updated(t),S.some(r=>t.has(r))&&d.get(this)?.pickerItemChanged(this),t.has("selected")&&(this.internals.ariaSelected=String(this.selected),this.setAttribute("aria-selected",String(this.selected)))}renderHighlightedText(){const t=this.highlightRanges;if(!t||t.length===0)return this.text;const r=[...t].sort((o,l)=>o[0]-l[0]),n=[];let i=0;for(const[o,l]of r)o>i&&n.push(a`${this.text.slice(i,o)}`),n.push(a`<mark>${this.text.slice(o,l)}</mark>`),i=l;return i<this.text.length&&n.push(a`${this.text.slice(i)}`),n}render(){const t=y(this.icon,this),r=this.iconSlot.hasSlottedIcon(":scope > *");return a`<div>
|
|
2
2
|
<span class="icon">
|
|
3
|
-
<slot ${
|
|
4
|
-
${!
|
|
3
|
+
<slot ${f(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
|
|
4
|
+
${!r&&t?b(t):u}
|
|
5
5
|
</span>
|
|
6
6
|
<span class="text">${this.renderHighlightedText()}</span>
|
|
7
7
|
${this.selected?a`<svg
|
|
@@ -19,7 +19,7 @@ var l=function(p,t,i,s){var o=arguments.length,e=o<3?t:s===null?s=Object.getOwnP
|
|
|
19
19
|
/>
|
|
20
20
|
<path d="M9 12l2 2l4 -4" />
|
|
21
21
|
</svg>`:a``}
|
|
22
|
-
</div>`}};
|
|
22
|
+
</div>`}};s.styles=v`
|
|
23
23
|
:host(:hover),
|
|
24
24
|
:host(.highlighted) {
|
|
25
25
|
div {
|
|
@@ -77,4 +77,4 @@ var l=function(p,t,i,s){var o=arguments.length,e=o<3?t:s===null?s=Object.getOwnP
|
|
|
77
77
|
margin: var(--esp-size-tiny);
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
|
-
`,
|
|
80
|
+
`,c([p({type:Object})],s.prototype,"styles",void 0),c([p({type:String})],s.prototype,"text",void 0),c([p({type:String})],s.prototype,"icon",void 0),c([p({type:String})],s.prototype,"value",void 0),c([p({type:Boolean})],s.prototype,"selected",void 0),c([p({attribute:"highlight-ranges",type:Array})],s.prototype,"highlightRanges",void 0),s=c([m("esp-picker-item")],s);export{s as EspalierPickerItem,P as adoptPickerItem,E as pickerItemDisplay,j as pickerItemValue,H as samePickerItemDisplay};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var u=function(a,e,t,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,t,r);else for(var n=a.length-1;n>=0;n--)(l=a[n])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};import{LitElement as C,css as T,html as f,unsafeCSS as E}from"lit";import{customElement as H,property as b,state as S}from"lit/decorators.js";import{createRef as A,ref as R}from"lit/directives/ref.js";import{styleMap as M}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as x,viewportSize as g}from"../shared/viewport.js";import{ESP_EVENTS as y}from"../shared/events.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as z,compactViewportMatches as F}from"../shared/responsive.js";import{findContainingPopovers as $}from"../shared/popover-controller.js";const v="highlighted",D=44;function w(a){if(!a)return null;const e=a;return typeof e.enterPickerMenuFullscreen=="function"&&typeof e.exitPickerMenuFullscreen=="function"&&typeof e.pickerMenuIsOpen=="function"?a:null}function _(a){if($(a).some(t=>[...t.shadowRoot?.querySelectorAll("[popover]")??[]].some(r=>r.matches(":popover-open"))))return!0;let e=a;for(;e;){const t=e.getRootNode();if(e=e.assignedSlot??e.parentElement??(t instanceof ShadowRoot?t.host:null),!e)return!1;if(e.matches(":popover-open")||e.matches("dialog[open], esp-dialog[is-open], esp-flyout[open]"))return!0}return!1}let c=class extends C{get isVisitorPick(){return this.visitorPicking}get fullscreenPresentation(){return this.hasAttribute("data-fullscreen")}constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=A(),this.internalPoolClone=null,this.internalPoolFingerprint=null,this.internalPickScrollTop=null,this.visitorPicking=!1,this.lastPoolFingerprint=null,this.preRenderScrollTop=null,this.openSessionGeneration=0,this.maxAvailableHeight=0,this.lastViewportHeight=0,this.positionTarget=null,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.
|
|
1
|
+
var u=function(a,e,t,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,t,r);else for(var n=a.length-1;n>=0;n--)(l=a[n])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};import{LitElement as C,css as T,html as f,unsafeCSS as E}from"lit";import{customElement as H,property as b,state as S}from"lit/decorators.js";import{createRef as A,ref as R}from"lit/directives/ref.js";import{styleMap as M}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as x,viewportSize as g}from"../shared/viewport.js";import{ESP_EVENTS as y}from"../shared/events.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as z,compactViewportMatches as F}from"../shared/responsive.js";import{findContainingPopovers as $}from"../shared/popover-controller.js";const v="highlighted",D=44;function w(a){if(!a)return null;const e=a;return typeof e.enterPickerMenuFullscreen=="function"&&typeof e.exitPickerMenuFullscreen=="function"&&typeof e.pickerMenuIsOpen=="function"?a:null}function _(a){if($(a).some(t=>[...t.shadowRoot?.querySelectorAll("[popover]")??[]].some(r=>r.matches(":popover-open"))))return!0;let e=a;for(;e;){const t=e.getRootNode();if(e=e.assignedSlot??e.parentElement??(t instanceof ShadowRoot?t.host:null),!e)return!1;if(e.matches(":popover-open")||e.matches("dialog[open], esp-dialog[is-open], esp-flyout[open]"))return!0}return!1}let c=class extends C{get isVisitorPick(){return this.visitorPicking}get fullscreenPresentation(){return this.hasAttribute("data-fullscreen")}constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=A(),this.internalPoolClone=null,this.internalPoolFingerprint=null,this.internalPickScrollTop=null,this.visitorPicking=!1,this.lastPoolFingerprint=null,this.preRenderScrollTop=null,this.openSessionGeneration=0,this.maxAvailableHeight=0,this.lastViewportHeight=0,this.positionTarget=null,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.handleItemClick=e=>{this.selectPickerItemElement(this.pickerItemElementInPath(e)??this.getPickerItemElementAtPoint(e.clientX,e.clientY))&&(e.preventDefault(),e.stopPropagation())},this.handleItemMouseDown=e=>{this.pickerItemElementInPath(e)&&e.preventDefault()},this.menuDirty=!1,this.settlerActive=!1,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.renderPickerItem=(e,t)=>{const r={display:"block",cursor:"pointer",width:"100%",...e.styles};return f`<esp-picker-item
|
|
2
2
|
class="picker-item"
|
|
3
3
|
data-picker-index=${t}
|
|
4
4
|
.text=${e.text}
|
|
@@ -9,12 +9,13 @@ var u=function(a,e,t,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnP
|
|
|
9
9
|
style=${M(r)}
|
|
10
10
|
>
|
|
11
11
|
${e.slotNodes?.map(s=>s.cloneNode(!0))}
|
|
12
|
-
</esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}willUpdate(e){if(super.willUpdate(e),e.has("virtualizedItemsPool")&&this.preRenderScrollTop===null&&!this.retargetingSequence&&this.matches(":popover-open")){const t=this.virtualizerRef.value?.scrollTop??0;t>0&&(this.preRenderScrollTop=t)}}updated(e){super.updated(e),e.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),e.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"));const t=e.has("virtualizedItemsPool");let r=!1;if(t){const s=this.virtualizedItemsPool.map(l=>`${l.value}\0${l.text}\0${l.selected===!0}`),i=this.virtualizedItemsPool===this.internalPoolClone||this.internalPoolFingerprint!==null&&this.internalPoolFingerprint.length===s.length&&this.internalPoolFingerprint.every((l,n)=>l===s[n]);this.internalPoolClone=null,i||(this.internalPoolFingerprint=null,this.internalPickScrollTop=null),r=!i&&(this.lastPoolFingerprint===null||this.lastPoolFingerprint.length!==s.length||this.lastPoolFingerprint.some((l,n)=>l!==s[n])),this.lastPoolFingerprint=s}(t||e.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&(this.pendingItemsChanged||=r,this.menuDirty=!0,this.settleMenuAfterUpdate())}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(e){const t=this.virtualizedItemsPool.filter(i=>i.selected).map(i=>i.value);this.virtualizedItemsPool=e;const r=e.filter(i=>i.selected),s=r.map(i=>i.value);(t.length!==s.length||t.some((i,l)=>i!==s[l]))&&this.dispatchEvent(new CustomEvent(y.PICKER_MENU_SELECTION_CHANGED,{detail:r,bubbles:!0,composed:!0}))}setHighlight(e){const t=this.virtualizedItemsPool;if(t.length===0)return;(this.highlightIndex<0||this.highlightIndex>t.length-1)&&(this.highlightIndex=e);const r=this.virtualizerRef.value;r&&r.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(e){const t=this.openSessionGeneration,r=()=>t!==this.openSessionGeneration||!this.isConnected,s=this.virtualizedItemsPool;if(s.length===0)return;(this.highlightIndex<0||this.highlightIndex>s.length-1)&&(this.highlightIndex=e);const i=this.virtualizerRef.value;if(i){if(await this.stableLayout(i),r())return;const l=i.scrollTop;for(let n=0;n<3;n+=1)try{i.scrollToIndex(this.highlightIndex,"nearest");break}catch{if(await this.stableLayout(i),r()||i.scrollTop!==l)return}if(await this.stableLayout(i),r())return}this.applyHighlightWithRetry(3)}applyHighlightClass(){const e=this.getHighlightedElement();e&&(this.clearHighlight(),e.classList.add(v))}clearHighlight(){const e=this.virtualizerRef.value;if(e)for(const t of e.querySelectorAll(`esp-picker-item.${v}`))t.classList.remove(v)}resetHighlight(){this.clearHighlight();const e=this.virtualizedItemsPool.find(t=>t.selected);this.highlightIndex=e?this.virtualizedItemsPool.indexOf(e):-1}applyHighlightWithRetry(e){if(!this.isConnected||!this.matches(":popover-open"))return;const t=this.getHighlightedElement();if(t){this.clearHighlight(),t.classList.add(v);return}e>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(e-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const e=this.virtualizerRef.value;if(!e)return null;const t=e.querySelectorAll("esp-picker-item");for(const r of t)if(this.virtualizedItemsPool.findIndex(i=>i.value===r.value&&i.text===r.text)===this.highlightIndex)return r;return null}pickItem(e){this.visitorPicking=!0;try{this.applyPick(e)}finally{this.visitorPicking=!1}}applyPick(e){const t=this.virtualizerRef.value?.scrollTop??0;this.preRenderScrollTop===null&&t>0&&(this.preRenderScrollTop=t),t>0&&(this.internalPickScrollTop=t);for(const i of this.pickerItems)i===e?i.selected=!i.selected:this.multiSelect||(i.selected=!1);const r=this.virtualizedItemsPool.indexOf(e);if(r!==-1){this.highlightIndex=r;const i=this.getHighlightedElement();i&&(this.clearHighlight(),i.classList.add(v))}const s=[...this.pickerItems];this.internalPoolClone=s,this.internalPoolFingerprint=s.map(i=>`${i.value}\0${i.text}\0${i.selected===!0}`),this.pickerItems=s,this.dispatchEvent(new CustomEvent(y.PICKER_MENU_SELECTION_CHANGED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent(y.PICKER_MENU_CLOSE_REQUESTED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0}))}selectItemByIndex(e){const t=Number.isInteger(e)?this.virtualizedItemsPool[e]:void 0;return t?(this.pickItem(t),!0):!1}getPickerItemElementAtPoint(e,t){const r=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!r)return null;for(const s of r){const i=s.getBoundingClientRect();if(e>=i.left&&e<=i.right&&t>=i.top&&t<=i.bottom)return s}return null}selectPickerItemElement(e){return e?this.selectItemByIndex(Number(e.dataset.pickerIndex)):!1}selectItemAtPoint(e,t){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(e,t))}selectItemFromPointerEvent(e){const t=e.composedPath().find(s=>s instanceof HTMLElement&&s.matches("esp-picker-item[data-picker-index]"));return this.selectPickerItemElement(t??this.getPickerItemElementAtPoint(e.clientX,e.clientY))?(e.preventDefault(),e.stopPropagation(),!0):!1}requestDismiss(){this.dispatchEvent(new CustomEvent(y.PICKER_MENU_DISMISS_REQUESTED,{bubbles:!0,composed:!0,cancelable:!0}))&&this.hideMenu()}clearFullscreenTarget(e=this.positionTarget){w(e)?.exitPickerMenuFullscreen()}syncPresentation(e){const t=this.positionTarget;t&&t!==e&&this.clearFullscreenTarget(t),this.positionTarget=e;const r=w(e),s=F()&&r!==null&&!_(e);if(!s)return this.clearFullscreenTarget(e),this.toggleAttribute("data-fullscreen",!1),{fullscreen:s,rect:e.getBoundingClientRect()};const i=r.enterPickerMenuFullscreen();return i?(this.toggleAttribute("data-fullscreen",!0),{fullscreen:s,rect:i}):(this.clearFullscreenTarget(e),this.toggleAttribute("data-fullscreen",!1),{fullscreen:!1,rect:e.getBoundingClientRect()})}applyFullscreenGeometry(e){const{height:t,width:r}=g(),s=Math.min(Math.max(e.bottom,D),t);this.maxAvailableHeight=Math.max(t-s,0),this.lastViewportHeight=t;const i={viewportWidth:r,viewportHeight:t,inputBottom:s};this.lastFullscreenGeometry?.viewportWidth===i.viewportWidth&&this.lastFullscreenGeometry.viewportHeight===i.viewportHeight&&this.lastFullscreenGeometry.inputBottom===i.inputBottom||(this.lastFullscreenGeometry=i,this.style.setProperty("height",`${t}px`),this.style.setProperty("width",`${r}px`),this.style.setProperty("min-width",`${r}px`),this.style.setProperty("left","0px"),this.style.setProperty("top","0px"),this.style.removeProperty("bottom"),this.style.setProperty("--_esp-picker-menu-input-bottom",`${s}px`))}clearFullscreenGeometry(){this.lastFullscreenGeometry=void 0,this.style.removeProperty("height"),this.style.removeProperty("width"),this.style.removeProperty("min-width"),this.style.removeProperty("left"),this.style.removeProperty("top"),this.style.removeProperty("bottom"),this.style.removeProperty("--_esp-picker-menu-input-bottom")}positionSelf(e){this.resetSettleState();const{fullscreen:t,rect:r}=this.syncPresentation(e),{height:s}=g();let i;if(t)this.applyFullscreenGeometry(r),i=this.maxAvailableHeight;else{this.clearFullscreenGeometry();const{spaceAbove:o,spaceBelow:h}=x(r,s);i=Math.max(Math.max(o,h)-75,0),this.maxAvailableHeight=i,this.lastViewportHeight=s,this.style.setProperty("height",`${i}px`),this.style.setProperty("min-width",`${r.width}px`),this.style.setProperty("left",`${r.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),o>h?this.style.setProperty("bottom",`${s-r.top}px`):this.style.setProperty("top",`${r.bottom}px`)}this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const l=this.pickerItems.find(o=>o.selected);this.highlightIndex=l?this.pickerItems.indexOf(l):0,this.openSessionGeneration+=1;const n=this.openSessionGeneration;this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{n!==this.openSessionGeneration||!this.isConnected||(this.fullscreenPresentation||(this.shrinkToFit(i),this.widenToFitContent(r)),this.classList.add("visible"))})})}async stableLayout(e){for(let t=0;t<20;t+=1){const r=e.layoutComplete;if(!r)return;const s=await Promise.race([r.then(()=>"settled",()=>"superseded"),new Promise(i=>setTimeout(()=>i("deadline"),250))]);if(s==="settled"||s==="deadline"||e.layoutComplete===r)return}}async settleMenuAfterUpdate(){if(this.settlerActive)return;this.settlerActive=!0;const e=this.openSessionGeneration,t=()=>e!==this.openSessionGeneration?!0:!this.isConnected||!this.matches(":popover-open")?(this.menuDirty=!1,this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,!0):!1;try{for(let r=0;r<10&&this.menuDirty;r+=1){this.menuDirty=!1;try{await this.updateComplete}catch{this.menuDirty=!1;return}if(t())return;const s=this.virtualizerRef.value;if(!s){requestAnimationFrame(()=>{if(t()||this.fullscreenPresentation)return;const h=this.shadowRoot?.querySelector(".status-message");if(h){const m=Math.min(h.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${m}px`)}});continue}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue;const i=this.preRenderScrollTop??0,l=i>0&&!this.pendingItemsChanged&&!this.retargetingSequence;if(s.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),l&&s.scrollTop<i){if(s.scrollTop=i,await this.stableLayout(s),t())return;if(this.menuDirty)continue}const n=this.virtualizedItemsPool;if(n.length===0)continue;if(this.pendingItemsChanged){this.pendingItemsChanged=!1,this.retargetingSequence=!0,this.preRenderScrollTop=null;const h=n.findIndex(m=>m.selected);h>=0?this.highlightIndex=h:this.highlightIndex>=n.length?this.highlightIndex=n.length-1:this.highlightIndex<0&&(this.highlightIndex=0)}if(this.retargetingSequence){try{s.scrollToIndex(this.highlightIndex,"nearest")}catch{}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue}this.applyHighlightWithRetry(3);const o=Math.max(l?i:0,this.internalPickScrollTop??0);if(o>0){if(s.scrollTop<o&&(s.scrollTop=o),await this.stableLayout(s),t())return;if(this.menuDirty)continue;if(await new Promise(h=>requestAnimationFrame(()=>h())),t())return;if(this.menuDirty)continue;s.scrollTop<o&&(s.scrollTop=o)}this.internalPickScrollTop=null,this.preRenderScrollTop=null,this.retargetingSequence=!1}}finally{this.settlerActive=!1,this.menuDirty&&this.settleMenuAfterUpdate()}}sizeToContent(e){if(this.fullscreenPresentation)return;const t=this.measureContentHeight();t>0&&this.style.setProperty("height",`${Math.min(t,e)}px`)}shrinkToFit(e){if(this.fullscreenPresentation)return;const t=this.measureContentHeight();t>2&&t<e&&this.style.setProperty("height",`${t}px`)}measureContentHeight(){const e=this.virtualizerRef.value;if(!e)return 0;const t=e.querySelectorAll("esp-picker-item");if(t.length===0)return 0;const r=getComputedStyle(this),s=(parseFloat(r.borderTopWidth)||0)+(parseFloat(r.borderBottomWidth)||0),i=this.virtualizedItemsPool.length;if(t.length<i)return e.scrollHeight+s;const l=e.scrollTop;e.scrollTop=0;const n=e.getBoundingClientRect(),o=t[t.length-1].getBoundingClientRect();return l>0&&(e.scrollTop=l),o.bottom-n.top+s}widenToFitContent(e){if(this.fullscreenPresentation)return;const t=this.virtualizerRef.value;if(!t)return;const r=t.querySelectorAll("esp-picker-item");let s=e.width;for(const i of r)s=Math.max(s,i.scrollWidth);if(s+=2,s>e.width){const{width:i}=g(),l=Math.min(s,i);this.style.setProperty("width",`${l}px`),this.style.setProperty("left",`${Math.max(0,Math.min(e.left,i-l))}px`)}}updatePosition(e){const t=w(e);if(t&&!t.pickerMenuIsOpen())return;const r=this.fullscreenPresentation,{fullscreen:s,rect:i}=this.syncPresentation(e),l=r!==s;if(l){const p=this.virtualizerRef.value?.scrollTop??0;p>0&&this.preRenderScrollTop===null&&!this.pendingItemsChanged&&!this.retargetingSequence&&(this.preRenderScrollTop=p),this.openSessionGeneration+=1,this.menuDirty=!0}if(!this.matches(":popover-open")){if(!t?.pickerMenuIsOpen())return;try{this.showPopover()}catch{this.menuDirty=!1,this.clearFullscreenTarget(e),this.removeAttribute("data-fullscreen"),this.clearFullscreenGeometry(),this.requestDismiss();return}this.classList.add("visible")}if(l&&this.settleMenuAfterUpdate(),s){this.applyFullscreenGeometry(i),l&&this.classList.add("visible");return}if(r){this.clearFullscreenGeometry(),this.style.setProperty("min-width",`${i.width}px`);const{height:p}=g(),{spaceAbove:I,spaceBelow:d}=x(i,p),P=Math.max(Math.max(I,d)-75,0);this.maxAvailableHeight=P,this.lastViewportHeight=p,this.style.setProperty("height",`${P}px`),this.sizeToContent(P)}const{height:n}=g();if(n!==this.lastViewportHeight){const{spaceAbove:p,spaceBelow:I}=x(i,n),d=Math.max(Math.max(p,I)-75,0);this.maxAvailableHeight=d,this.lastViewportHeight=n,(parseFloat(this.style.getPropertyValue("height"))||0)>d&&this.style.setProperty("height",`${d}px`),this.sizeToContent(d)}const{width:o}=g(),h=this.getBoundingClientRect().width;this.style.setProperty("left",`${Math.max(0,Math.min(i.left,o-h))}px`);const m=i.top,k=n-i.bottom;m>k?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${n-i.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${i.bottom}px`)),l&&this.classList.add("visible")}hideMenu(){this.openSessionGeneration+=1,this.classList.remove("visible"),this.resetSettleState(),this.clearFullscreenTarget(),this.positionTarget=null,this.removeAttribute("data-fullscreen"),this.clearFullscreenGeometry();try{this.hidePopover()}catch{}}resetSettleState(){this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,this.menuDirty=!1}disconnectedCallback(){this.hideMenu(),super.disconnectedCallback()}doKeyboardNav(e){const t=this.virtualizedItemsPool;if(t.length!==0)switch(e){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(t.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=t.length-1,this.setHighlight(t.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(t[this.highlightIndex]);break}}render(){let e;return this.loading?e=f`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?e=f`<div class="status-message">${this.emptyMessage}</div>`:e=f`<lit-virtualizer
|
|
12
|
+
</esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}willUpdate(e){if(super.willUpdate(e),e.has("virtualizedItemsPool")&&this.preRenderScrollTop===null&&!this.retargetingSequence&&this.matches(":popover-open")){const t=this.virtualizerRef.value?.scrollTop??0;t>0&&(this.preRenderScrollTop=t)}}updated(e){super.updated(e),e.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),e.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"));const t=e.has("virtualizedItemsPool");let r=!1;if(t){const s=this.virtualizedItemsPool.map(l=>`${l.value}\0${l.text}\0${l.selected===!0}`),i=this.virtualizedItemsPool===this.internalPoolClone||this.internalPoolFingerprint!==null&&this.internalPoolFingerprint.length===s.length&&this.internalPoolFingerprint.every((l,n)=>l===s[n]);this.internalPoolClone=null,i||(this.internalPoolFingerprint=null,this.internalPickScrollTop=null),r=!i&&(this.lastPoolFingerprint===null||this.lastPoolFingerprint.length!==s.length||this.lastPoolFingerprint.some((l,n)=>l!==s[n])),this.lastPoolFingerprint=s}(t||e.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&(this.pendingItemsChanged||=r,this.menuDirty=!0,this.settleMenuAfterUpdate())}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(e){const t=this.virtualizedItemsPool.filter(i=>i.selected).map(i=>i.value);this.virtualizedItemsPool=e;const r=e.filter(i=>i.selected),s=r.map(i=>i.value);(t.length!==s.length||t.some((i,l)=>i!==s[l]))&&this.dispatchEvent(new CustomEvent(y.PICKER_MENU_SELECTION_CHANGED,{detail:r,bubbles:!0,composed:!0}))}setHighlight(e){const t=this.virtualizedItemsPool;if(t.length===0)return;(this.highlightIndex<0||this.highlightIndex>t.length-1)&&(this.highlightIndex=e);const r=this.virtualizerRef.value;r&&r.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(e){const t=this.openSessionGeneration,r=()=>t!==this.openSessionGeneration||!this.isConnected,s=this.virtualizedItemsPool;if(s.length===0)return;(this.highlightIndex<0||this.highlightIndex>s.length-1)&&(this.highlightIndex=e);const i=this.virtualizerRef.value;if(i){if(await this.stableLayout(i),r())return;const l=i.scrollTop;for(let n=0;n<3;n+=1)try{i.scrollToIndex(this.highlightIndex,"nearest");break}catch{if(await this.stableLayout(i),r()||i.scrollTop!==l)return}if(await this.stableLayout(i),r())return}this.applyHighlightWithRetry(3)}applyHighlightClass(){const e=this.getHighlightedElement();e&&(this.clearHighlight(),e.classList.add(v))}clearHighlight(){const e=this.virtualizerRef.value;if(e)for(const t of e.querySelectorAll(`esp-picker-item.${v}`))t.classList.remove(v)}resetHighlight(){this.clearHighlight();const e=this.virtualizedItemsPool.find(t=>t.selected);this.highlightIndex=e?this.virtualizedItemsPool.indexOf(e):-1}applyHighlightWithRetry(e){if(!this.isConnected||!this.matches(":popover-open"))return;const t=this.getHighlightedElement();if(t){this.clearHighlight(),t.classList.add(v);return}e>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(e-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const e=this.virtualizerRef.value;if(!e)return null;const t=e.querySelectorAll("esp-picker-item");for(const r of t)if(this.virtualizedItemsPool.findIndex(i=>i.value===r.value&&i.text===r.text)===this.highlightIndex)return r;return null}pickItem(e){this.visitorPicking=!0;try{this.applyPick(e)}finally{this.visitorPicking=!1}}applyPick(e){const t=this.virtualizerRef.value?.scrollTop??0;this.preRenderScrollTop===null&&t>0&&(this.preRenderScrollTop=t),t>0&&(this.internalPickScrollTop=t);for(const i of this.pickerItems)i===e?i.selected=!i.selected:this.multiSelect||(i.selected=!1);const r=this.virtualizedItemsPool.indexOf(e);if(r!==-1){this.highlightIndex=r;const i=this.getHighlightedElement();i&&(this.clearHighlight(),i.classList.add(v))}const s=[...this.pickerItems];this.internalPoolClone=s,this.internalPoolFingerprint=s.map(i=>`${i.value}\0${i.text}\0${i.selected===!0}`),this.pickerItems=s,this.dispatchEvent(new CustomEvent(y.PICKER_MENU_SELECTION_CHANGED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent(y.PICKER_MENU_CLOSE_REQUESTED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0}))}selectItemByIndex(e){const t=Number.isInteger(e)?this.virtualizedItemsPool[e]:void 0;return t?(this.pickItem(t),!0):!1}getPickerItemElementAtPoint(e,t){const r=this.virtualizerRef.value?.getBoundingClientRect();if(!r||e<r.left||e>r.right||t<r.top||t>r.bottom)return null;const s=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!s)return null;for(const i of s){const l=i.getBoundingClientRect();if(e>=l.left&&e<=l.right&&t>=l.top&&t<=l.bottom)return i}return null}selectPickerItemElement(e){return e?this.selectItemByIndex(Number(e.dataset.pickerIndex)):!1}selectItemAtPoint(e,t){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(e,t))}pickerItemElementInPath(e){return e.composedPath().find(t=>t instanceof HTMLElement&&t.matches("esp-picker-item[data-picker-index]"))}requestDismiss(){this.dispatchEvent(new CustomEvent(y.PICKER_MENU_DISMISS_REQUESTED,{bubbles:!0,composed:!0,cancelable:!0}))&&this.hideMenu()}clearFullscreenTarget(e=this.positionTarget){w(e)?.exitPickerMenuFullscreen()}syncPresentation(e){const t=this.positionTarget;t&&t!==e&&this.clearFullscreenTarget(t),this.positionTarget=e;const r=w(e),s=F()&&r!==null&&!_(e);if(!s)return this.clearFullscreenTarget(e),this.toggleAttribute("data-fullscreen",!1),{fullscreen:s,rect:e.getBoundingClientRect()};const i=r.enterPickerMenuFullscreen();return i?(this.toggleAttribute("data-fullscreen",!0),{fullscreen:s,rect:i}):(this.clearFullscreenTarget(e),this.toggleAttribute("data-fullscreen",!1),{fullscreen:!1,rect:e.getBoundingClientRect()})}applyFullscreenGeometry(e){const{height:t,width:r}=g(),s=Math.min(Math.max(e.bottom,D),t);this.maxAvailableHeight=Math.max(t-s,0),this.lastViewportHeight=t;const i={viewportWidth:r,viewportHeight:t,inputBottom:s};this.lastFullscreenGeometry?.viewportWidth===i.viewportWidth&&this.lastFullscreenGeometry.viewportHeight===i.viewportHeight&&this.lastFullscreenGeometry.inputBottom===i.inputBottom||(this.lastFullscreenGeometry=i,this.style.setProperty("height",`${t}px`),this.style.setProperty("width",`${r}px`),this.style.setProperty("min-width",`${r}px`),this.style.setProperty("left","0px"),this.style.setProperty("top","0px"),this.style.removeProperty("bottom"),this.style.setProperty("--_esp-picker-menu-input-bottom",`${s}px`))}clearFullscreenGeometry(){this.lastFullscreenGeometry=void 0,this.style.removeProperty("height"),this.style.removeProperty("width"),this.style.removeProperty("min-width"),this.style.removeProperty("left"),this.style.removeProperty("top"),this.style.removeProperty("bottom"),this.style.removeProperty("--_esp-picker-menu-input-bottom")}positionSelf(e){this.resetSettleState();const{fullscreen:t,rect:r}=this.syncPresentation(e),{height:s}=g();let i;if(t)this.applyFullscreenGeometry(r),i=this.maxAvailableHeight;else{this.clearFullscreenGeometry();const{spaceAbove:o,spaceBelow:h}=x(r,s);i=Math.max(Math.max(o,h)-75,0),this.maxAvailableHeight=i,this.lastViewportHeight=s,this.style.setProperty("height",`${i}px`),this.style.setProperty("min-width",`${r.width}px`),this.style.setProperty("left",`${r.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),o>h?this.style.setProperty("bottom",`${s-r.top}px`):this.style.setProperty("top",`${r.bottom}px`)}this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const l=this.pickerItems.find(o=>o.selected);this.highlightIndex=l?this.pickerItems.indexOf(l):0,this.openSessionGeneration+=1;const n=this.openSessionGeneration;this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{n!==this.openSessionGeneration||!this.isConnected||(this.fullscreenPresentation||(this.shrinkToFit(i),this.widenToFitContent(r)),this.classList.add("visible"))})})}async stableLayout(e){for(let t=0;t<20;t+=1){const r=e.layoutComplete;if(!r)return;const s=await Promise.race([r.then(()=>"settled",()=>"superseded"),new Promise(i=>setTimeout(()=>i("deadline"),250))]);if(s==="settled"||s==="deadline"||e.layoutComplete===r)return}}async settleMenuAfterUpdate(){if(this.settlerActive)return;this.settlerActive=!0;const e=this.openSessionGeneration,t=()=>e!==this.openSessionGeneration?!0:!this.isConnected||!this.matches(":popover-open")?(this.menuDirty=!1,this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,!0):!1;try{for(let r=0;r<10&&this.menuDirty;r+=1){this.menuDirty=!1;try{await this.updateComplete}catch{this.menuDirty=!1;return}if(t())return;const s=this.virtualizerRef.value;if(!s){requestAnimationFrame(()=>{if(t()||this.fullscreenPresentation)return;const h=this.shadowRoot?.querySelector(".status-message");if(h){const m=Math.min(h.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${m}px`)}});continue}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue;const i=this.preRenderScrollTop??0,l=i>0&&!this.pendingItemsChanged&&!this.retargetingSequence;if(s.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),l&&s.scrollTop<i){if(s.scrollTop=i,await this.stableLayout(s),t())return;if(this.menuDirty)continue}const n=this.virtualizedItemsPool;if(n.length===0)continue;if(this.pendingItemsChanged){this.pendingItemsChanged=!1,this.retargetingSequence=!0,this.preRenderScrollTop=null;const h=n.findIndex(m=>m.selected);h>=0?this.highlightIndex=h:this.highlightIndex>=n.length?this.highlightIndex=n.length-1:this.highlightIndex<0&&(this.highlightIndex=0)}if(this.retargetingSequence){try{s.scrollToIndex(this.highlightIndex,"nearest")}catch{}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue}this.applyHighlightWithRetry(3);const o=Math.max(l?i:0,this.internalPickScrollTop??0);if(o>0){if(s.scrollTop<o&&(s.scrollTop=o),await this.stableLayout(s),t())return;if(this.menuDirty)continue;if(await new Promise(h=>requestAnimationFrame(()=>h())),t())return;if(this.menuDirty)continue;s.scrollTop<o&&(s.scrollTop=o)}this.internalPickScrollTop=null,this.preRenderScrollTop=null,this.retargetingSequence=!1}}finally{this.settlerActive=!1,this.menuDirty&&this.settleMenuAfterUpdate()}}sizeToContent(e){if(this.fullscreenPresentation)return;const t=this.measureContentHeight();t>0&&this.style.setProperty("height",`${Math.min(t,e)}px`)}shrinkToFit(e){if(this.fullscreenPresentation)return;const t=this.measureContentHeight();t>2&&t<e&&this.style.setProperty("height",`${t}px`)}measureContentHeight(){const e=this.virtualizerRef.value;if(!e)return 0;const t=e.querySelectorAll("esp-picker-item");if(t.length===0)return 0;const r=getComputedStyle(this),s=(parseFloat(r.borderTopWidth)||0)+(parseFloat(r.borderBottomWidth)||0),i=this.virtualizedItemsPool.length;if(t.length<i)return e.scrollHeight+s;const l=e.scrollTop;e.scrollTop=0;const n=e.getBoundingClientRect(),o=t[t.length-1].getBoundingClientRect();return l>0&&(e.scrollTop=l),o.bottom-n.top+s}widenToFitContent(e){if(this.fullscreenPresentation)return;const t=this.virtualizerRef.value;if(!t)return;const r=t.querySelectorAll("esp-picker-item");let s=e.width;for(const i of r)s=Math.max(s,i.scrollWidth);if(s+=2,s>e.width){const{width:i}=g(),l=Math.min(s,i);this.style.setProperty("width",`${l}px`),this.style.setProperty("left",`${Math.max(0,Math.min(e.left,i-l))}px`)}}updatePosition(e){const t=w(e);if(t&&!t.pickerMenuIsOpen())return;const r=this.fullscreenPresentation,{fullscreen:s,rect:i}=this.syncPresentation(e),l=r!==s;if(l){const p=this.virtualizerRef.value?.scrollTop??0;p>0&&this.preRenderScrollTop===null&&!this.pendingItemsChanged&&!this.retargetingSequence&&(this.preRenderScrollTop=p),this.openSessionGeneration+=1,this.menuDirty=!0}if(!this.matches(":popover-open")){if(!t?.pickerMenuIsOpen())return;try{this.showPopover()}catch{this.menuDirty=!1,this.clearFullscreenTarget(e),this.removeAttribute("data-fullscreen"),this.clearFullscreenGeometry(),this.requestDismiss();return}this.classList.add("visible")}if(l&&this.settleMenuAfterUpdate(),s){this.applyFullscreenGeometry(i),l&&this.classList.add("visible");return}if(r){this.clearFullscreenGeometry(),this.style.setProperty("min-width",`${i.width}px`);const{height:p}=g(),{spaceAbove:I,spaceBelow:d}=x(i,p),P=Math.max(Math.max(I,d)-75,0);this.maxAvailableHeight=P,this.lastViewportHeight=p,this.style.setProperty("height",`${P}px`),this.sizeToContent(P)}const{height:n}=g();if(n!==this.lastViewportHeight){const{spaceAbove:p,spaceBelow:I}=x(i,n),d=Math.max(Math.max(p,I)-75,0);this.maxAvailableHeight=d,this.lastViewportHeight=n,(parseFloat(this.style.getPropertyValue("height"))||0)>d&&this.style.setProperty("height",`${d}px`),this.sizeToContent(d)}const{width:o}=g(),h=this.getBoundingClientRect().width;this.style.setProperty("left",`${Math.max(0,Math.min(i.left,o-h))}px`);const m=i.top,k=n-i.bottom;m>k?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${n-i.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${i.bottom}px`)),l&&this.classList.add("visible")}hideMenu(){this.openSessionGeneration+=1,this.classList.remove("visible"),this.resetSettleState(),this.clearFullscreenTarget(),this.positionTarget=null,this.removeAttribute("data-fullscreen"),this.clearFullscreenGeometry();try{this.hidePopover()}catch{}}resetSettleState(){this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,this.menuDirty=!1}disconnectedCallback(){this.hideMenu(),super.disconnectedCallback()}doKeyboardNav(e){const t=this.virtualizedItemsPool;if(t.length!==0)switch(e){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(t.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=t.length-1,this.setHighlight(t.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(t[this.highlightIndex]);break}}render(){let e;return this.loading?e=f`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?e=f`<div class="status-message">${this.emptyMessage}</div>`:e=f`<lit-virtualizer
|
|
13
13
|
${R(this.virtualizerRef)}
|
|
14
14
|
scroller
|
|
15
15
|
.items=${this.virtualizedItemsPool}
|
|
16
16
|
.renderItem=${this.renderPickerItem}
|
|
17
|
-
@
|
|
17
|
+
@mousedown=${this.handleItemMouseDown}
|
|
18
|
+
@click=${this.handleItemClick}
|
|
18
19
|
@rangeChanged=${t=>{this.dispatchEvent(new CustomEvent(y.PICKER_MENU_RANGE_CHANGED,{detail:{first:t.first,last:t.last,items:this.virtualizedItemsPool},bubbles:!0,composed:!0}))}}
|
|
19
20
|
></lit-virtualizer>`,f`<div class="menu-content" @click=${t=>t.stopPropagation()}>
|
|
20
21
|
${e}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function o(
|
|
1
|
+
function o(r,e){if(!e)return[];const t=[],s=r.toLowerCase(),i=e.toLowerCase();let h=0;for(;h<=s.length-i.length;){const n=s.indexOf(i,h);if(n===-1)break;t.push([n,n+i.length]),h=n+1}return t}class l{constructor(e){this.allItems=[],this.query="",this.abortController=null,this.fetchItemsFn=null,this._showingRemoteResults=!1,this.opts=e,e.host.addController(this)}hostConnected(){}hostDisconnected(){this.cancelPending()}setAllItems(e){this.allItems=e,!(this._showingRemoteResults&&this.fetchItemsFn)&&(this.query?this.runLocalFilter():this.emit(this.allItems))}setFetchItems(e){e!==this.fetchItemsFn&&(this.fetchItemsFn=e,this.cancelPending(),this.opts.onLoadingChanged(!1),e&&this.query&&this.runRemoteFetch())}setDebounceMs(e){this._debounceMs=e}setQuery(e){if(this.query=e,!e){this.cancelPending(),this.opts.onLoadingChanged(!1),this.emit(this.allItems);return}const t=this.resolvedDebounceMs;t===0?(this.cancelPending(),this.runFilterOrFetch()):(this.cancelDebounce(),this.debounceTimer=setTimeout(()=>{this.debounceTimer=void 0,this.runFilterOrFetch()},t))}clearQuery(){this.query="",this.cancelPending(),this.opts.onLoadingChanged(!1),this.emit(this.allItems)}resetQuery(){this.query="",this.cancelPending(),this.opts.onLoadingChanged(!1)}get currentQuery(){return this.query}get showingRemoteResults(){return this._showingRemoteResults&&this.fetchItemsFn!==null}get isRemote(){return this.fetchItemsFn!==null}fetchInitial(){this.fetchItemsFn&&(this.query="",this.runRemoteFetch())}get resolvedDebounceMs(){return this._debounceMs!==void 0?this._debounceMs:this.fetchItemsFn?300:0}runFilterOrFetch(){this.fetchItemsFn?this.runRemoteFetch():this.runLocalFilter()}runLocalFilter(){const e=this.query;if(!e){this.emit(this.allItems);return}const t=this.allItems.filter(s=>s.text.toLowerCase().includes(e.toLowerCase())).map(s=>({...s,highlightRanges:o(s.text,e)}));this.emit(t)}emit(e){this._showingRemoteResults=!1,this.opts.onFilteredItemsChanged(e)}async runRemoteFetch(){if(!this.fetchItemsFn)return;this.abortController?.abort();const e=new AbortController;this.abortController=e,this.opts.onLoadingChanged(!0);try{const t=await this.fetchItemsFn(this.query,e.signal);if(e.signal.aborted)return;const s=t.map(i=>({...i,highlightRanges:o(i.text,this.query)}));this._showingRemoteResults=!0,this.opts.onFilteredItemsChanged(s)}catch(t){if(e.signal.aborted||t instanceof DOMException&&t.name==="AbortError")return;this._showingRemoteResults=!0,this.opts.onFilteredItemsChanged([])}finally{e.signal.aborted||this.opts.onLoadingChanged(!1)}}cancelDebounce(){this.debounceTimer!==void 0&&(clearTimeout(this.debounceTimer),this.debounceTimer=void 0)}cancelPending(){this.cancelDebounce(),this.abortController?.abort(),this.abortController=null}}export{l as TypeaheadController,o as computeHighlightRanges};
|
package/dist/shared/events.d.ts
CHANGED
|
@@ -32,7 +32,7 @@ export { type PickerItem } from "../pickers/esp-picker-item.js";
|
|
|
32
32
|
export { type EspalierUploadImage } from "../image-upload/image-helpers.js";
|
|
33
33
|
export { type FontPickerValueChangedDetail, type GoogleFont, type WebSafeFont, } from "../font-picker/esp-font-picker.js";
|
|
34
34
|
export { type EspThemeToggleEventDetail } from "../header/esp-header.js";
|
|
35
|
-
export { type
|
|
35
|
+
export { type VideoErrorDetail, type VideoErrorReason, type VideoPlayDetail, type VideoReadyDetail, type VideoSourceMode, } from "../video/esp-video.js";
|
|
36
36
|
export { type PageWorkspaceResizeDetail, type PageWorkspaceResizeSource, type PageWorkspaceSeparator, } from "../page/esp-page.js";
|
|
37
37
|
import type { EspalierDetails } from "../details/esp-details.js";
|
|
38
38
|
import type { ActionMenuSelectDetail } from "../action-menu/esp-action-menu.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{html as o,noChange as a}from"lit";import{directive as h,PartType as l}from"lit/directive.js";import{AsyncDirective as u}from"lit/async-directive.js";import{repeat as _}from"lit/directives/repeat.js";import{Virtualizer as c}from"./Virtualizer.js";import{virtualizerRef as x}from"./Virtualizer.js";const
|
|
1
|
+
import{html as o,noChange as a}from"lit";import{directive as h,PartType as l}from"lit/directive.js";import{AsyncDirective as u}from"lit/async-directive.js";import{repeat as _}from"lit/directives/repeat.js";import{Virtualizer as c}from"./Virtualizer.js";import{virtualizerRef as x}from"./Virtualizer.js";const m=n=>n,d=(n,e)=>o`${e}: ${JSON.stringify(n,null,2)}`;class f extends u{constructor(e){if(super(e),this._virtualizer=null,this._first=0,this._last=-1,this._renderItem=(t,i)=>d(t,i+this._first),this._keyFunction=(t,i)=>m(t,i+this._first),this._items=[],e.type!==l.CHILD)throw new Error("The virtualize directive can only be used in child expressions")}render(e){e&&this._setFunctions(e);const t=[],i=Math.min(this._last,this._items.length-1);if(this._first>=0&&i>=this._first)for(let s=this._first;s<=i;s++)t.push(this._items[s]);return _(t,this._keyFunction,this._renderItem)}update(e,[t]){this._setFunctions(t);const i=this._items!==t.items;return this._items=t.items||[],this._virtualizer?this._updateVirtualizerConfig(e,t):this._initialize(e,t),i?a:this.render()}async _updateVirtualizerConfig(e,t){if(!await this._virtualizer.updateLayoutConfig(t.layout||{})){const s=e.parentNode;this._makeVirtualizer(s,t)}this._virtualizer.items=this._items}_setFunctions(e){const{renderItem:t,keyFunction:i}=e;t&&(this._renderItem=(s,r)=>t(s,r+this._first)),i&&(this._keyFunction=(s,r)=>i(s,r+this._first))}_makeVirtualizer(e,t){this._virtualizer&&this._virtualizer.disconnected();const{layout:i,scroller:s,items:r}=t;this._virtualizer=new c({hostElement:e,layout:i,scroller:s}),this._virtualizer.items=r,this._virtualizer.connected()}_initialize(e,t){const i=e.parentNode;i&&i.nodeType===1&&(i.addEventListener("rangeChanged",s=>{this._first=s.first,this._last=s.last,this.setValue(this.render())}),this._makeVirtualizer(i,t))}disconnected(){this._virtualizer?.disconnected()}reconnected(){this._virtualizer?.connected()}}const V=h(f);export{m as defaultKeyFunction,d as defaultRenderItem,V as virtualize,x as virtualizerRef};
|
|
@@ -8,25 +8,16 @@ export type VideoPreload = "none" | "metadata" | "auto";
|
|
|
8
8
|
export type VideoControls = "native" | "none";
|
|
9
9
|
export type VideoCrossOrigin = "" | "anonymous" | "use-credentials";
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* resolves to, a teardown function the element calls when the source goes
|
|
14
|
-
* away. A rejection (or a synchronous throw) is a failed attach.
|
|
11
|
+
* How the playing source reached the video: `native` is playing `src`, and
|
|
12
|
+
* `fallback` is playing `fallback-src`.
|
|
15
13
|
*/
|
|
16
|
-
export type
|
|
14
|
+
export type VideoSourceMode = "native" | "fallback";
|
|
17
15
|
/**
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
16
|
+
* Why playback failed: `unsupported` when no `src` is set, or the browser
|
|
17
|
+
* cannot play `type`, and there is no fallback; `media` when the video element
|
|
18
|
+
* reported an error while loading or playing.
|
|
21
19
|
*/
|
|
22
|
-
export type
|
|
23
|
-
/**
|
|
24
|
-
* Why playback failed: `unsupported` when no `src` is set (and no fallback),
|
|
25
|
-
* or nothing could play `type` (no native support, no adapter, no fallback), `adapter` when the adapter rejected or
|
|
26
|
-
* threw, and `media` when the video element reported an error while loading
|
|
27
|
-
* or playing.
|
|
28
|
-
*/
|
|
29
|
-
export type VideoErrorReason = "unsupported" | "adapter" | "media";
|
|
20
|
+
export type VideoErrorReason = "unsupported" | "media";
|
|
30
21
|
/**
|
|
31
22
|
* Detail of `esp-video-ready` on `esp-video`.
|
|
32
23
|
*
|
|
@@ -97,26 +88,13 @@ export interface VideoErrorDetail {
|
|
|
97
88
|
* ></esp-video>
|
|
98
89
|
* ```
|
|
99
90
|
*
|
|
100
|
-
* ###
|
|
91
|
+
* ### Sources
|
|
101
92
|
*
|
|
102
|
-
* `src`
|
|
103
|
-
*
|
|
104
|
-
*
|
|
105
|
-
*
|
|
106
|
-
*
|
|
107
|
-
* `fallback-src` (an MP4) plays instead. The Video guide has a copy-ready
|
|
108
|
-
* hls.js adapter, with error handling, and the full lifecycle.
|
|
109
|
-
*
|
|
110
|
-
* ```js
|
|
111
|
-
* import { EspalierVideo } from "@taprootio/espalier/video";
|
|
112
|
-
* EspalierVideo.defaultAdapter = async (video, src) => {
|
|
113
|
-
* const { default: Hls } = await import("hls.js");
|
|
114
|
-
* const hls = new Hls();
|
|
115
|
-
* hls.loadSource(src);
|
|
116
|
-
* hls.attachMedia(video);
|
|
117
|
-
* return () => hls.destroy();
|
|
118
|
-
* };
|
|
119
|
-
* ```
|
|
93
|
+
* The element plays `src` only where the browser reports it can play `type`.
|
|
94
|
+
* `type` is an HLS master playlist by default, which Safari, iOS, and current
|
|
95
|
+
* Chrome play natively; elsewhere `fallback-src` (an MP4) plays instead.
|
|
96
|
+
* Espalier attaches no streaming library, so for a source every browser can
|
|
97
|
+
* play, set `type="video/mp4"`.
|
|
120
98
|
*
|
|
121
99
|
* ### Captions
|
|
122
100
|
*
|
|
@@ -176,17 +154,11 @@ export interface VideoErrorDetail {
|
|
|
176
154
|
* @menuIcon photo
|
|
177
155
|
*/
|
|
178
156
|
export declare class EspalierVideo extends EspalierElementBase {
|
|
179
|
-
/**
|
|
180
|
-
* The adapter used by every `esp-video` whose own `adapter` is unset.
|
|
181
|
-
* Register it once, before any video can receive a play intent — in the
|
|
182
|
-
* same module that imports Espalier is early enough, even for `autoplay`.
|
|
183
|
-
*/
|
|
184
|
-
static defaultAdapter: VideoAdapter | null;
|
|
185
157
|
/** The media URL: an HLS master playlist by default, or a file matching `type`. */
|
|
186
158
|
src: string;
|
|
187
159
|
/**
|
|
188
160
|
* The media type of `src`, checked with `canPlayType` to choose between
|
|
189
|
-
*
|
|
161
|
+
* `src` and `fallback-src`. `video/mp4` plays as a plain file.
|
|
190
162
|
*/
|
|
191
163
|
type: string;
|
|
192
164
|
/** Poster image URL, shown until playback starts and behind error messages. */
|
|
@@ -206,9 +178,8 @@ export declare class EspalierVideo extends EspalierElementBase {
|
|
|
206
178
|
/**
|
|
207
179
|
* How much media to load before play intent. `none` (the default) loads
|
|
208
180
|
* only the poster. `metadata` and `auto` apply where the browser plays
|
|
209
|
-
* `type
|
|
210
|
-
*
|
|
211
|
-
* switches to `fallback-src` at once.
|
|
181
|
+
* `type`; the choice of the fallback over it still waits for play intent.
|
|
182
|
+
* A preloaded source that fails switches to `fallback-src` at once.
|
|
212
183
|
*/
|
|
213
184
|
preload: VideoPreload;
|
|
214
185
|
/** Start muted playback once admitted. Implies `muted`. */
|
|
@@ -237,8 +208,8 @@ export declare class EspalierVideo extends EspalierElementBase {
|
|
|
237
208
|
*/
|
|
238
209
|
deferOffscreen: boolean;
|
|
239
210
|
/**
|
|
240
|
-
* An MP4 played when
|
|
241
|
-
*
|
|
211
|
+
* An MP4 played when the browser cannot play `type`, and tried once when
|
|
212
|
+
* the primary source fails.
|
|
242
213
|
*/
|
|
243
214
|
fallbackSrc: string;
|
|
244
215
|
/**
|
|
@@ -246,12 +217,6 @@ export declare class EspalierVideo extends EspalierElementBase {
|
|
|
246
217
|
* for caption tracks served from another origin.
|
|
247
218
|
*/
|
|
248
219
|
crossOrigin: VideoCrossOrigin;
|
|
249
|
-
/**
|
|
250
|
-
* Attaches a stream the browser cannot play natively; see `VideoAdapter`.
|
|
251
|
-
* Called once per source, on first play intent, only when `canPlayType`
|
|
252
|
-
* reports `type` unplayable. Falls back to `EspalierVideo.defaultAdapter`.
|
|
253
|
-
*/
|
|
254
|
-
adapter: VideoAdapter | null;
|
|
255
220
|
connectedCallback(): void;
|
|
256
221
|
disconnectedCallback(): void;
|
|
257
222
|
protected willUpdate(changedProperties: PropertyValues): void;
|
package/dist/video/esp-video.js
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
var
|
|
1
|
+
var r=function(l,e,t,s){var o=arguments.length,n=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(l,e,t,s);else for(var h=l.length-1;h>=0;h--)(c=l[h])&&(n=(o<3?c(n):o>3?c(e,t,n):c(e,t))||n);return o>3&&n&&Object.defineProperty(e,t,n),n};import{css as k,html as p,nothing as d}from"lit";import{customElement as E,property as a,state as u}from"lit/decorators.js";import{EspalierElementBase as y}from"../shared/esp-element-base.js";import{ESP_EVENTS as f}from"../shared/events.js";import{srOnly as O}from"../shared/style-fragments.js";import{prefersReducedMotion as S}from"../shared/viewport.js";import{parseImageRatio as A}from"../image/image-ratio.js";import{enumConverter as v}from"../shared/enum-converter.js";const m="application/vnd.apple.mpegurl",x="16 / 9",b=new Set(["none","metadata","auto"]),g=new Set(["native","none"]),P=new Set(["","anonymous","use-credentials"]),w={fromAttribute(l){return l===null?"":l==="use-credentials"?"use-credentials":"anonymous"},toAttribute(l){return l||null}};function C(l){const e=l.error;return e?e.message||`MediaError code ${e.code}.`:"The video reported a playback error."}let i=class extends y{constructor(){super(...arguments),this.src="",this.type="application/vnd.apple.mpegurl",this.poster="",this.posterAlt="",this.label="",this.aspectRatio="16 / 9",this.preload="none",this.autoplay=!1,this.muted=!1,this.loop=!1,this.playsinline=!1,this.controls="native",this.deferOffscreen=!1,this.fallbackSrc="",this.crossOrigin="",this.phase="idle",this.started=!1,this.offscreenAdmitted=!1,this.attached=null,this.mutedVideo=null,this.generation=0,this.triedFallback=!1,this.readyEmitted=!1,this.playIntent=!1,this.autoplayAttempted=!1,this.intentAutoplay=!1,this.autoplayPending=!1,this.playAttempt=0,this.pendingPlay=null,this.focusMessageOnError=!1,this.offscreenObserver=null,this.handleTrackSlotChange=()=>{const e=this.video;e&&this.attached&&this.mirrorTracks(e)},this.handlePlayClick=()=>{this.phase!=="loading"&&this.requestPlayback(!1)},this.handleLoadedMetadata=e=>{this.emitReady(e.currentTarget)},this.handlePlay=()=>{if(!this.attached)return;const e=this.autoplayPending;this.autoplayPending=!1,this.intentAutoplay=e,this.playIntent=!0,this.pendingPlay={autoplay:e}},this.handlePlaying=async e=>{const t=e.currentTarget;if(!this.attached)return;const s=this.pendingPlay;this.pendingPlay=null;const o=this.generation;if(s&&this.dispatchEvent(new CustomEvent(f.VIDEO_PLAY,{detail:{src:this.src,mode:this.attached.mode,currentTime:t.currentTime,autoplay:s.autoplay},bubbles:!0,composed:!0})),o!==this.generation)return;const n=this.shadowRoot?.activeElement?.classList.contains("play")??!1;this.started=!0,this.phase="playing",n&&(await this.updateComplete,t.focus())},this.handleVideoError=e=>{const t=e.currentTarget;if(!this.attached)return;const s=this.generation,o=this.playIntent&&(!this.started||!t.paused);this.failOver(t,"media",C(t))&&o&&this.startPlayback(t,s)}}get video(){return this.shadowRoot?.querySelector("video")??null}canPlayNatively(e){return e.canPlayType(this.type||m)!==""}playLabel(){return this.label?this.label:this.posterAlt?`Play video: ${this.posterAlt}`:"Play video"}connectedCallback(){super.connectedCallback(),this.requestUpdate()}disconnectedCallback(){super.disconnectedCallback(),this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.resetSource()}syncOffscreenDeferral(){if(!this.deferOffscreen||typeof IntersectionObserver>"u"){this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted||(this.offscreenAdmitted=!0);return}if(this.offscreenAdmitted||this.offscreenObserver)return;const e=new IntersectionObserver(t=>{this.offscreenObserver===e&&t.some(s=>s.isIntersecting)&&(e.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!0)},{rootMargin:"200px"});this.offscreenObserver=e,e.observe(this)}willUpdate(e){super.willUpdate(e),this.isConnected&&!this.offscreenAdmitted&&this.syncOffscreenDeferral(),this.src??="",this.type??=m,this.poster??="",this.posterAlt??="",this.label??="",this.fallbackSrc??="";const t=A(this.aspectRatio)??x;this.style.setProperty("--_esp-video-aspect-ratio",t),e.has("preload")&&!b.has(this.preload)&&(this.preload="none"),e.has("controls")&&!g.has(this.controls)&&(this.controls="native"),e.has("crossOrigin")&&!P.has(this.crossOrigin)&&(this.crossOrigin="anonymous"),this.hasUpdated&&["src","type","fallbackSrc"].some(s=>e.has(s)&&e.get(s)!==this[s])&&this.resetSource()}updated(e){if(super.updated(e),this.syncMuted(e),this.focusMessageOnError&&this.phase==="error"&&(this.focusMessageOnError=!1,this.shadowRoot?.querySelector('[part="message"]')?.focus()),!(!this.offscreenAdmitted||!this.isConnected)){if(this.autoplay&&!this.autoplayAttempted&&!this.playIntent&&(this.src||this.fallbackSrc)&&(this.autoplayAttempted=!0,!S())){this.requestPlayback(!0);return}if(this.preload!=="none"&&this.phase!=="error"&&!this.attached&&this.src){const t=this.video;t&&this.attachSource(t,!0)}}}syncMuted(e){const t=this.video;if(!t)return;const s=t!==this.mutedVideo;this.mutedVideo=t,!(!s&&!e.has("muted")&&!e.has("autoplay"))&&(this.muted||this.autoplay?t.muted=!0:t.paused&&(t.muted=!1))}async requestPlayback(e){if(this.phase==="loading"&&this.playIntent)return;const t=this.generation;this.playIntent=!0,this.intentAutoplay=e,(!this.started||this.phase==="error")&&(this.phase="loading"),await this.updateComplete;const s=this.video;!s||t!==this.generation||!this.attached&&!this.attachSource(s,!1)||(e&&(s.muted=!0),await this.startPlayback(s,t))}async startPlayback(e,t){if(t!==this.generation)return;const s=++this.playAttempt;this.autoplayPending=this.intentAutoplay;try{await e.play()}catch(o){if(t!==this.generation||s!==this.playAttempt)return;this.autoplayPending=!1,o?.name==="NotAllowedError"&&this.phase!=="error"&&(this.playIntent=!1,this.phase=this.started?"playing":"idle")}}attachSource(e,t){return this.src&&this.canPlayNatively(e)?(this.useSource(e,this.src,"native"),!0):t?!1:this.fallbackSrc?(this.useSource(e,this.fallbackSrc,"fallback"),!0):(this.fail(null,"unsupported",this.src?`This browser cannot play ${this.type}.`:"No video source is set."),!1)}useSource(e,t,s){this.mirrorTracks(e),this.attached={mode:s},this.readyEmitted=!1,e.src=t}failOver(e,t,s){const o=this.attached?.mode??null,n=!!this.fallbackSrc&&!this.triedFallback&&o!=="fallback",c=this.generation;return this.emitError(o,t,s,n),c!==this.generation?!1:(this.attached=null,this.pendingPlay=null,n?(this.triedFallback=!0,this.useSource(e,this.fallbackSrc,"fallback"),!0):(this.enterError(),!1))}emitError(e,t,s,o){this.dispatchEvent(new CustomEvent(f.VIDEO_ERROR,{detail:{src:this.src,mode:e,reason:t,message:s,fallback:o},bubbles:!0,composed:!0}))}fail(e,t,s){const o=this.generation;this.emitError(e,t,s,!1),o===this.generation&&this.enterError()}enterError(){const e=this.shadowRoot?.activeElement;this.focusMessageOnError=!!e?.classList.contains("play")||e!==null&&e===this.video,this.phase="error"}resetSource(){this.generation+=1;const e=this.attached!==null;this.attached=null,this.triedFallback=!1,this.readyEmitted=!1,this.playIntent=!1,this.autoplayAttempted=!1,this.intentAutoplay=!1,this.autoplayPending=!1,this.pendingPlay=null,this.focusMessageOnError=!1,this.started=!1,this.phase="idle";const t=this.video;t&&(e||t.hasAttribute("src"))&&(t.pause(),t.removeAttribute("src"),t.load())}mirrorTracks(e){for(const t of e.querySelectorAll("track"))t.remove();for(const t of this.children)t.localName==="track"&&e.append(t.cloneNode(!0))}emitReady(e){!this.attached||this.readyEmitted||(this.readyEmitted=!0,this.dispatchEvent(new CustomEvent(f.VIDEO_READY,{detail:{src:this.src,mode:this.attached.mode,duration:e.duration},bubbles:!0,composed:!0})))}renderPosterContent(){if(this.phase==="error")return p`<div part="message" class="message" role="alert" tabindex="-1">
|
|
2
2
|
<slot name="error">This video can’t be played right now.</slot>
|
|
3
|
-
</div>`;const
|
|
3
|
+
</div>`;const e=this.phase==="loading";return p`<button
|
|
4
4
|
part="play"
|
|
5
5
|
class="play"
|
|
6
6
|
type="button"
|
|
7
7
|
aria-label=${this.playLabel()}
|
|
8
|
-
aria-disabled=${
|
|
8
|
+
aria-disabled=${e?"true":d}
|
|
9
9
|
@click=${this.handlePlayClick}
|
|
10
10
|
>
|
|
11
11
|
<span part="play-icon" class="play-icon" aria-hidden="true">
|
|
12
|
-
${
|
|
12
|
+
${e?p`<span class="spinner"></span>`:p`<svg viewBox="0 0 24 24" focusable="false">
|
|
13
13
|
<path
|
|
14
14
|
d="M8 5.5v13a1 1 0 0 0 1.52.85l10.4-6.5a1 1 0 0 0 0-1.7L9.52 4.65A1 1 0 0 0 8 5.5Z"
|
|
15
15
|
/>
|
|
16
16
|
</svg>`}
|
|
17
17
|
</span>
|
|
18
|
-
</button>`}render(){const
|
|
18
|
+
</button>`}render(){const e=!this.started||this.phase==="error",t=!this.deferOffscreen||this.offscreenAdmitted;return p`
|
|
19
19
|
<div part="frame" class="frame" data-phase=${this.phase}>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
<div part="poster" class="poster" ?data-dismissed=${!
|
|
36
|
-
${this.poster&&
|
|
20
|
+
<video
|
|
21
|
+
part="video"
|
|
22
|
+
class="video"
|
|
23
|
+
preload=${this.preload}
|
|
24
|
+
crossorigin=${this.crossOrigin||d}
|
|
25
|
+
tabindex=${this.controls==="none"||this.phase==="error"?"-1":d}
|
|
26
|
+
aria-label=${this.label||this.posterAlt||d}
|
|
27
|
+
?controls=${this.controls==="native"&&this.started&&this.phase!=="error"}
|
|
28
|
+
?loop=${this.loop}
|
|
29
|
+
?playsinline=${this.playsinline}
|
|
30
|
+
@loadedmetadata=${this.handleLoadedMetadata}
|
|
31
|
+
@play=${this.handlePlay}
|
|
32
|
+
@playing=${this.handlePlaying}
|
|
33
|
+
@error=${this.handleVideoError}
|
|
34
|
+
></video>
|
|
35
|
+
<div part="poster" class="poster" ?data-dismissed=${!e}>
|
|
36
|
+
${this.poster&&t?p`<img
|
|
37
37
|
part="poster-image"
|
|
38
38
|
class="poster-image"
|
|
39
39
|
loading=${this.deferOffscreen?"lazy":"eager"}
|
|
40
40
|
decoding="async"
|
|
41
41
|
alt=""
|
|
42
42
|
src=${this.poster}
|
|
43
|
-
/>`:
|
|
43
|
+
/>`:d}
|
|
44
44
|
${this.renderPosterContent()}
|
|
45
45
|
</div>
|
|
46
46
|
<span class="sr-only" role="status"
|
|
@@ -48,7 +48,7 @@ var o=function(n,t,e,s){var i=arguments.length,r=i<3?t:s===null?s=Object.getOwnP
|
|
|
48
48
|
>
|
|
49
49
|
<slot class="tracks" @slotchange=${this.handleTrackSlotChange}></slot>
|
|
50
50
|
</div>
|
|
51
|
-
`}};
|
|
51
|
+
`}};i.styles=[...y.styles,O,k`
|
|
52
52
|
:host {
|
|
53
53
|
display: block;
|
|
54
54
|
position: relative;
|
|
@@ -250,4 +250,4 @@ var o=function(n,t,e,s){var i=arguments.length,r=i<3?t:s===null?s=Object.getOwnP
|
|
|
250
250
|
border: 1px solid CanvasText;
|
|
251
251
|
}
|
|
252
252
|
}
|
|
253
|
-
`],
|
|
253
|
+
`],r([a({type:String})],i.prototype,"src",void 0),r([a({type:String})],i.prototype,"type",void 0),r([a({type:String})],i.prototype,"poster",void 0),r([a({attribute:"poster-alt",type:String})],i.prototype,"posterAlt",void 0),r([a({type:String})],i.prototype,"label",void 0),r([a({attribute:"aspect-ratio",type:String})],i.prototype,"aspectRatio",void 0),r([a({converter:v(b,"none"),reflect:!0})],i.prototype,"preload",void 0),r([a({type:Boolean})],i.prototype,"autoplay",void 0),r([a({type:Boolean})],i.prototype,"muted",void 0),r([a({type:Boolean})],i.prototype,"loop",void 0),r([a({type:Boolean})],i.prototype,"playsinline",void 0),r([a({converter:v(g,"native"),reflect:!0})],i.prototype,"controls",void 0),r([a({attribute:"defer-offscreen",type:Boolean})],i.prototype,"deferOffscreen",void 0),r([a({attribute:"fallback-src",type:String})],i.prototype,"fallbackSrc",void 0),r([a({attribute:"crossorigin",converter:w})],i.prototype,"crossOrigin",void 0),r([u()],i.prototype,"phase",void 0),r([u()],i.prototype,"started",void 0),r([u()],i.prototype,"offscreenAdmitted",void 0),i=r([E("esp-video")],i);export{x as DEFAULT_VIDEO_ASPECT_RATIO,i as EspalierVideo,m as HLS_MEDIA_TYPE};
|
package/espalier.css-data.json
CHANGED
|
@@ -1017,6 +1017,14 @@
|
|
|
1017
1017
|
"name": "--esp-image-overlay-color",
|
|
1018
1018
|
"description": "Overlay text color; defaults to the theme heading color when the banner polarity matches the scheme."
|
|
1019
1019
|
},
|
|
1020
|
+
{
|
|
1021
|
+
"name": "--esp-image-overlay-gap",
|
|
1022
|
+
"description": "Space between the headline and supporting copy in a copy stack; the action sits twice as far below. Defaults to `var(--esp-size-small)`."
|
|
1023
|
+
},
|
|
1024
|
+
{
|
|
1025
|
+
"name": "--esp-image-overlay-measure",
|
|
1026
|
+
"description": "Maximum line length of the overlay copy; defaults to `36rem` for a copy stack and `none` for a headline on its own."
|
|
1027
|
+
},
|
|
1020
1028
|
{
|
|
1021
1029
|
"name": "--esp-image-overlay-padding",
|
|
1022
1030
|
"description": "Overlay content padding."
|
|
@@ -1069,6 +1077,14 @@
|
|
|
1069
1077
|
"name": "--esp-image-scrim-opacity",
|
|
1070
1078
|
"description": "Scrim-strength opacity override."
|
|
1071
1079
|
},
|
|
1080
|
+
{
|
|
1081
|
+
"name": "--esp-image-static-compact-ratio",
|
|
1082
|
+
"description": "Read only by the static `banner-static.css` stylesheet before upgrade: the `compact-ratio` value, if any."
|
|
1083
|
+
},
|
|
1084
|
+
{
|
|
1085
|
+
"name": "--esp-image-static-ratio",
|
|
1086
|
+
"description": "Read only by the static `banner-static.css` stylesheet before upgrade: the `ratio` value, e.g. `3 / 1`. A server sets it inline beside the attribute."
|
|
1087
|
+
},
|
|
1072
1088
|
{
|
|
1073
1089
|
"name": "--esp-image-texture-blend-mode",
|
|
1074
1090
|
"description": "Texture blend-mode override."
|