@taprootio/espalier 5.0.0 → 6.0.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 +8 -0
- package/custom-elements.json +9573 -9613
- package/dist/pickers/esp-pick-one.d.ts +4 -0
- package/dist/pickers/esp-pick-one.js +7 -7
- 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/typeahead-controller.js +1 -1
- package/dist/shared/events.d.ts +1 -1
- package/dist/video/esp-video.d.ts +18 -53
- package/dist/video/esp-video.js +25 -25
- package/package.json +1 -1
|
@@ -37,6 +37,10 @@ import { EspalierPickerBase } from "./esp-picker-base.js";
|
|
|
37
37
|
* </esp-box>
|
|
38
38
|
* ```
|
|
39
39
|
*
|
|
40
|
+
* An item's `text`, `icon`, and `styles` may change after it is selected (a
|
|
41
|
+
* placeholder label replaced once its data loads, say), and the picker shows
|
|
42
|
+
* the new label; the selection follows the item's `value`.
|
|
43
|
+
*
|
|
40
44
|
* ### Variable-height items
|
|
41
45
|
*
|
|
42
46
|
* Items with longer text wrap naturally. The menu sizes itself
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
var u=function(a,t,
|
|
1
|
+
var u=function(a,t,s,e){var i=arguments.length,n=i<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,s):e,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(a,t,s,e);else for(var l=a.length-1;l>=0;l--)(o=a[l])&&(n=(i<3?o(n):i>3?o(t,s,n):o(t,s))||n);return i>3&&n&&Object.defineProperty(t,s,n),n};import{css as d,html as m}from"lit";import{customElement as f,property as I,state as y}from"lit/decorators.js";import{classMap as k}from"lit/directives/class-map.js";import{ref as h}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{samePickerItemDisplay as g}from"./esp-picker-item.js";import{EspalierElementBase as P}from"../shared/esp-element-base.js";import{styleMap as v}from"lit/directives/style-map.js";import{caretUpDown as w}from"../shared/svgs/caret-up-down.js";import{filter as $}from"../shared/svgs/filter.js";import{EspalierPickerBase as p}from"./esp-picker-base.js";import{PickOneSelection as r}from"./pick-one-selection.js";let c=class extends p{constructor(){super(...arguments),this.selection=r.empty(),this.suppressAutoSelect=!1,this.lastMenuPointSelectionAt=Number.NEGATIVE_INFINITY,this.suppressNextHostClick=!1,this.handleHostPointerDown=t=>{this.selectOpenMenuAtPoint(t)&&(this.lastMenuPointSelectionAt=performance.now())},this.handleHostMouseDown=t=>{if(performance.now()-this.lastMenuPointSelectionAt<500){t.preventDefault(),t.stopPropagation();return}this.selectOpenMenuAtPoint(t)}}get selectedItem(){return this.selection.item}decorateFilteredItems(t){if(!this.selectedItem)return t.map(e=>({...e}));const s=this.selectedItem.value;return t.map(e=>({...e,selected:e.value===s}))}get typeaheadRestoreText(){return this.selectedItem?.text??""}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote&&this.selectedItem!==void 0}get value(){return this.selectedItem?.value}set value(t){const s=this.pickerItems??[];for(const i of s)i.selected=i.value===t;const e=this.pickerMenu.value?.pickerItems;if(e&&e!==s)for(const i of e)i.selected=i.value===t;this.selection=r.resolve(s,t),this.formCtrl.syncValue()}getPickerFormValue(){return this.selectedItem?.value??null}getPickerValidity(){return this.required&&!this.selectedItem?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null}handlePickerReset(){this.selection=r.empty()}handlePickerRestore(t){this.value=t}syncSelectionFromItems(t){if(!t.has("pickerItems"))return;if(this.selection.hasPending){this.value=this.selection.pending;return}if(!this.selectedItem){const e=this.pickerItems.find(i=>i.selected);e&&(this.selection=r.of(e));return}const s=this.pickerItems.find(e=>e.value===this.selectedItem.value);s&&s!==this.selectedItem&&!g(s,this.selectedItem)&&(this.selection=r.of(s))}selectOpenMenuAtPoint(t){return!this.showOptions||!(this.pickerMenu.value?.selectItemAtPoint(t.clientX,t.clientY)??!1)?!1:(this.suppressNextHostClick=!0,t.preventDefault(),t.stopPropagation(),!0)}render(){const{showOptions:t}=this,s={"esp-field":!0,"show-options":t};return m`
|
|
2
2
|
<div
|
|
3
3
|
${h(this.pickerField)}
|
|
4
4
|
tabindex="-1"
|
|
5
|
-
class=${k(
|
|
5
|
+
class=${k(s)}
|
|
6
6
|
@pointerdown=${this.handleHostPointerDown}
|
|
7
7
|
@mousedown=${this.handleHostMouseDown}
|
|
8
8
|
@click=${e=>{if(this.suppressNextHostClick){this.suppressNextHostClick=!1,e.preventDefault(),e.stopPropagation();return}if(this.hasAttribute("data-picker-menu-fullscreen")&&this.theInput.value&&e.composedPath().includes(this.theInput.value)){e.stopPropagation();return}this.typeahead&&!this.showOptions&&(this.suppressAutoSelect=!0),this.theInput.value?.focus(),this.showOptions?this.closeAndResetTypeahead():this.showOptions=!0,e.stopPropagation()}}
|
|
@@ -12,7 +12,7 @@ var u=function(a,t,i,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
|
|
|
12
12
|
${h(this.theInput)}
|
|
13
13
|
class="esp-input"
|
|
14
14
|
value=${this.selectedItem?.text??""}
|
|
15
|
-
style=${
|
|
15
|
+
style=${v(this.selectedItem?.styles??{})}
|
|
16
16
|
placeholder=${this.placeholder}
|
|
17
17
|
?disabled=${this.disabled}
|
|
18
18
|
?readonly=${!this.typeahead}
|
|
@@ -22,7 +22,7 @@ var u=function(a,t,i,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
|
|
|
22
22
|
@keydown=${e=>{if(this.pickerMenu.value&&!this.handleSharedPickerKeydown(e))switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case"Home":case"End":this.handleMenuNavigationKey(e.key,e);break}}}
|
|
23
23
|
/>
|
|
24
24
|
</section>
|
|
25
|
-
<label>${this.typeahead&&this.inputFocused
|
|
25
|
+
<label>${this.typeahead&&this.inputFocused?$:w}</label>
|
|
26
26
|
${this.renderPickerMenuDismissButton()}
|
|
27
27
|
|
|
28
28
|
<esp-picker-menu
|
|
@@ -32,14 +32,14 @@ var u=function(a,t,i,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
|
|
|
32
32
|
.label=${this.placeholder}
|
|
33
33
|
tabindex="-1"
|
|
34
34
|
${h(this.pickerMenu)}
|
|
35
|
-
@esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead)return;const
|
|
36
|
-
@esp-picker-menu-close-requested=${e=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const
|
|
35
|
+
@esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead)return;const i=e.detail,n=i.length>0?i[0]:void 0;if(!(i.length>0?this.selectedItem!==n:this.selectedItem!==void 0))return;const l=this.pickerMenu.value?.isVisitorPick===!0;this.selection=l?r.of(n):this.selection.withProvisionalItem(n),l?(this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)):this.formCtrl.syncValueSilently()}}
|
|
36
|
+
@esp-picker-menu-close-requested=${e=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const i=e.detail,n=i.length>0?i[0]:void 0;if(n?this.selectedItem?.value!==n.value:this.selectedItem!==void 0){if(this.selection=r.of(n),n)for(const l of this.pickerItems)l.selected=l.value===n.value;this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)}this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
|
|
37
37
|
@esp-picker-menu-dismiss-requested=${this.handleMenuDismissRequested}
|
|
38
38
|
>
|
|
39
39
|
</esp-picker-menu>
|
|
40
40
|
</div>
|
|
41
41
|
<slot ${h(this.itemsSlot)}></slot>
|
|
42
|
-
`}};c.styles=[...
|
|
42
|
+
`}};c.styles=[...P.styles,...p.pickerFieldStyles,d`
|
|
43
43
|
.esp-field input.esp-input {
|
|
44
44
|
width: 0;
|
|
45
45
|
flex-grow: 1;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
var c=function(n,t,s,e){var i=arguments.length,
|
|
1
|
+
var c=function(n,t,s,e){var i=arguments.length,a=i<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,s):e,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(n,t,s,e);else for(var o=n.length-1;o>=0;o--)(r=n[o])&&(a=(i<3?r(a):i>3?r(t,s,a):r(t,s))||a);return i>3&&a&&Object.defineProperty(t,s,a),a};import{css as k,html as u}from"lit";import{customElement as v,property as m,state as g}from"lit/decorators.js";import{classMap as w}from"lit/directives/class-map.js";import{ifDefined as b}from"lit/directives/if-defined.js";import{ref as h}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{samePickerItemDisplay as f}from"./esp-picker-item.js";import{EspalierElementBase as $}from"../shared/esp-element-base.js";import{caretUpDown as V}from"../shared/svgs/caret-up-down.js";import{filter as P}from"../shared/svgs/filter.js";import{plus as S}from"../shared/svgs/plus.js";import{EspalierPickerBase as I}from"./esp-picker-base.js";import{arrayKeysMatch as y}from"../shared/utilities.js";let l=class extends I{constructor(){super(...arguments),this.selectedItems=[],this.initialSyncDone=!1,this.addNewValue=null,this.seenDisplay=new Map}decorateFilteredItems(t){const s=new Set(this.selectedItems.map(e=>e.value));return t.map(e=>({...e,selected:s.has(e.value)}))}get typeaheadRestoreText(){return""}get values(){return this.selectedItems.map(t=>t.value)}getPickerFormValue(){const t=this.values;return t.length>0?t.join(","):null}getPickerValidity(){return this.required&&this.selectedItems.length===0?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select at least one option."}:null}handlePickerReset(){this.selectedItems=[],this.pickerItems=this.pickerItems.map(t=>this.copyPickerItem(t,{selected:!1}))}handlePickerRestore(t){const s=t.split(",");this.pickerItems=this.pickerItems.map(e=>this.copyPickerItem(e,{selected:s.includes(e.value)})),this.selectedItems=this.pickerItems.filter(e=>e.selected)}syncSelectionFromItems(t){if(t.has("pickerItems")){if(this.initialSyncDone||this.selectedItems.length>0)this.followSelectedDisplay();else{const s=this.pickerItems.filter(e=>e.selected);s.length>0&&(this.selectedItems=s,this.initialSyncDone=!0)}this.seenDisplay=new Map(this.pickerItems.map(s=>[s.value,{text:s.text,icon:s.icon,styles:s.styles}]))}}followSelectedDisplay(){const t=new Map(this.pickerItems.map(i=>[i.value,i]));let s=!1;const e=this.selectedItems.map(i=>{const a=t.get(i.value);if(!a||f(i,a))return i;const r=this.seenDisplay.get(i.value);return r&&f(r,a)?i:(s=!0,{...i,text:a.text,icon:a.icon,styles:a.styles})});s&&(this.selectedItems=e)}setSelectedItems(t,{visitor:s=!0}={}){if(this.initialSyncDone=!0,this.selectedItems=t,this.pickerItems=this.pickerItems.map(e=>this.copyPickerItem(e,{selected:this.selectedItems.some(i=>i.value===e.value)})),!s){this.formCtrl.syncValueSilently();return}this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItems),this.focus()}get canAddNewValue(){if(!this.addNewValue||!this.typeahead)return!1;const t=this.theInput.value;if(!t||!t.value.trim())return!1;const s=t.value.trim().toLowerCase(),e=i=>i.text.toLowerCase()===s;return!(this.pickerItems.some(e)||this.typeaheadIsRemote&&this.filteredItems.some(e))}async handleAddNewValue(){if(!this.addNewValue)return;const t=this.theInput.value;if(!t||!t.value.trim())return;const s=t.value.trim();let e;try{e=await this.addNewValue(s)}catch{return}const i=this.pickerItems.find(a=>a.value===e.value);if(i){this.selectedItems.some(a=>a.value===i.value)||(i.selected=!0,this.setSelectedItems([...this.selectedItems,i])),this.resetTypeaheadInput();return}e.selected=!0,this.pickerItems=[...this.pickerItems,e],this.setSelectedItems([...this.selectedItems,e]),this.resetTypeaheadInput(),this.refreshTypeaheadItems(),this.typeaheadIsRemote&&this.fetchInitialTypeaheadItems()}get iconSvg(){return this.canAddNewValue?S:this.typeahead&&this.inputFocused?P:V}render(){const{showOptions:t}=this,s={"esp-field":!0,"show-options":t};return u`
|
|
2
2
|
<div
|
|
3
3
|
${h(this.pickerField)}
|
|
4
4
|
tabindex="-1"
|
|
5
|
-
class=${
|
|
5
|
+
class=${w(s)}
|
|
6
6
|
@click=${e=>{if(this.hasAttribute("data-picker-menu-fullscreen")&&this.theInput.value&&e.composedPath().includes(this.theInput.value)){e.stopPropagation();return}this.theInput.value?.focus(),this.showOptions?this.closeAndResetTypeahead():this.showOptions=!0,e.stopPropagation()}}
|
|
7
7
|
>
|
|
8
8
|
<section>
|
|
9
9
|
${this.selectedItems.map(e=>u`<span
|
|
10
10
|
class="selected-item"
|
|
11
|
-
@click=${i=>{i.stopPropagation(),this.setSelectedItems(this.selectedItems.filter(
|
|
11
|
+
@click=${i=>{i.stopPropagation(),this.setSelectedItems(this.selectedItems.filter(a=>a.value!==e.value))}}
|
|
12
12
|
>${e.text}</span
|
|
13
13
|
>`)}
|
|
14
14
|
<input
|
|
@@ -28,7 +28,7 @@ var c=function(n,t,s,e){var i=arguments.length,r=i<3?t:e===null?e=Object.getOwnP
|
|
|
28
28
|
class=${this.canAddNewValue?"add-new":""}
|
|
29
29
|
tabindex=${this.canAddNewValue?"0":"-1"}
|
|
30
30
|
role=${this.canAddNewValue?"button":"presentation"}
|
|
31
|
-
aria-label=${
|
|
31
|
+
aria-label=${b(this.canAddNewValue?"Add new value":void 0)}
|
|
32
32
|
>${this.iconSvg}</label
|
|
33
33
|
>
|
|
34
34
|
${this.renderPickerMenuDismissButton()}
|
|
@@ -41,13 +41,13 @@ var c=function(n,t,s,e){var i=arguments.length,r=i<3?t:e===null?e=Object.getOwnP
|
|
|
41
41
|
tabindex="-1"
|
|
42
42
|
${h(this.pickerMenu)}
|
|
43
43
|
multi-select
|
|
44
|
-
@esp-picker-menu-selection-changed=${e=>{e.stopPropagation();const i=this.pickerMenu.value?.isVisitorPick===!0;if(this.typeahead){const
|
|
44
|
+
@esp-picker-menu-selection-changed=${e=>{e.stopPropagation();const i=this.pickerMenu.value?.isVisitorPick===!0;if(this.typeahead){const r=new Set(this.filteredItems.map(p=>p.value)),d=[...this.selectedItems.filter(p=>!r.has(p.value)),...e.detail];if(y(d,this.selectedItems,"value"))return;this.setSelectedItems(d,{visitor:i}),this.resetTypeaheadInput();return}y(e.detail,this.selectedItems,"value")||this.setSelectedItems(e.detail,{visitor:i})}}
|
|
45
45
|
@esp-picker-menu-dismiss-requested=${this.handleMenuDismissRequested}
|
|
46
46
|
>
|
|
47
47
|
</esp-picker-menu>
|
|
48
48
|
</div>
|
|
49
49
|
<slot ${h(this.itemsSlot)}></slot>
|
|
50
|
-
`}};
|
|
50
|
+
`}};l.styles=[...$.styles,...I.pickerFieldStyles,k`
|
|
51
51
|
:host {
|
|
52
52
|
--_esp-pick-some-chip-hover-l: calc(var(--esp-l-raised-2) * 0.88);
|
|
53
53
|
--_esp-pick-some-chip-focus-l: calc(var(--esp-l-raised-2) * 0.8);
|
|
@@ -102,4 +102,4 @@ var c=function(n,t,s,e){var i=arguments.length,r=i<3?t:e===null?e=Object.getOwnP
|
|
|
102
102
|
color: var(--esp-color-primary);
|
|
103
103
|
}
|
|
104
104
|
}
|
|
105
|
-
`],c([
|
|
105
|
+
`],c([g()],l.prototype,"selectedItems",void 0),c([m({type:Array})],l.prototype,"values",null),c([m({attribute:!1})],l.prototype,"addNewValue",void 0),l=c([v("esp-pick-some")],l);export{l as EspalierPickSome};
|
|
@@ -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 +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";
|
|
@@ -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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@taprootio/espalier",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "6.0.0",
|
|
4
4
|
"packageManager": "bun@1.3.12",
|
|
5
5
|
"description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
|
|
6
6
|
"customElements": "custom-elements.json",
|