@vertexvis/ui 0.1.0-testing.4 → 0.1.0-testing.5
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/dist/cjs/components.cjs.js +1 -1
- package/dist/cjs/index.cjs.js +6 -6
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{popover-d9ec8e10.js → popover-942209b8.js} +23 -1
- package/dist/cjs/{result-list-1e592c3c.js → result-list-241ffe8d.js} +46 -2
- package/dist/cjs/search-bar-a321b3e1.js +353 -0
- package/dist/cjs/{select-0eb7203f.js → select-5f8aecfe.js} +27 -4
- package/dist/cjs/{text-field-0397fb34.js → text-field-bccbde1f.js} +1 -0
- package/dist/cjs/{tooltip-02e24a48.js → tooltip-e9f63631.js} +58 -19
- package/dist/cjs/vertex-popover.cjs.entry.js +1 -1
- package/dist/cjs/vertex-result-list.cjs.entry.js +1 -1
- package/dist/cjs/vertex-search-bar.cjs.entry.js +1 -1
- package/dist/cjs/vertex-select.cjs.entry.js +1 -1
- package/dist/cjs/vertex-textfield.cjs.entry.js +1 -1
- package/dist/cjs/vertex-tooltip.cjs.entry.js +1 -1
- package/dist/collection/components/menu/menu.js +1 -1
- package/dist/collection/components/popover/popover.js +51 -0
- package/dist/collection/components/result-list/result-list.js +47 -3
- package/dist/collection/components/search-bar/dom.js +12 -0
- package/dist/collection/components/search-bar/lib.js +23 -15
- package/dist/collection/components/search-bar/search-bar.css +2 -29
- package/dist/collection/components/search-bar/search-bar.js +352 -326
- package/dist/collection/components/select/select.css +16 -0
- package/dist/collection/components/select/select.js +49 -2
- package/dist/collection/components/text-field/text-field.js +1 -0
- package/dist/collection/components/tooltip/tooltip.css +0 -4
- package/dist/collection/components/tooltip/tooltip.js +62 -18
- package/dist/collection/util/templates/element-pool.js +19 -1
- package/dist/components/components.css +1 -1
- package/dist/components/components.esm.js +1 -1
- package/dist/components/index.esm.js +1 -1
- package/dist/components/p-0b1cdc8a.entry.js +1 -0
- package/dist/components/p-406e73da.entry.js +1 -0
- package/dist/components/p-43b1b3f9.js +1 -0
- package/dist/components/p-606596de.entry.js +1 -0
- package/dist/components/p-6b862967.js +1 -0
- package/dist/components/p-7cfb3736.entry.js +1 -0
- package/dist/components/p-912f6e24.js +1 -0
- package/dist/components/p-92930f2a.js +1 -0
- package/dist/components/p-c2706288.js +1 -0
- package/dist/components/p-c4518377.entry.js +1 -0
- package/dist/components/p-ee496965.entry.js +1 -0
- package/dist/components/p-f064f911.js +1 -0
- package/dist/esm/components.js +1 -1
- package/dist/esm/index.js +6 -6
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{popover-67c88e4b.js → popover-6e806354.js} +23 -1
- package/dist/esm/{result-list-36cfb08a.js → result-list-16c6afbd.js} +46 -2
- package/dist/esm/search-bar-6fad2f2e.js +351 -0
- package/dist/esm/{select-75ed5653.js → select-d4e135b7.js} +27 -4
- package/dist/esm/{text-field-e542da25.js → text-field-32ac877e.js} +1 -0
- package/dist/esm/{tooltip-b4d2a889.js → tooltip-933da261.js} +58 -19
- package/dist/esm/vertex-popover.entry.js +1 -1
- package/dist/esm/vertex-result-list.entry.js +1 -1
- package/dist/esm/vertex-search-bar.entry.js +1 -1
- package/dist/esm/vertex-select.entry.js +1 -1
- package/dist/esm/vertex-textfield.entry.js +1 -1
- package/dist/esm/vertex-tooltip.entry.js +1 -1
- package/dist/types/components/popover/popover.d.ts +7 -0
- package/dist/types/components/result-list/result-list.d.ts +9 -1
- package/dist/types/components/search-bar/dom.d.ts +3 -0
- package/dist/types/components/search-bar/lib.d.ts +12 -6
- package/dist/types/components/search-bar/search-bar.d.ts +98 -41
- package/dist/types/components/select/select.d.ts +8 -0
- package/dist/types/components/tooltip/tooltip.d.ts +7 -0
- package/dist/types/components.d.ts +81 -16
- package/dist/types/util/templates/element-pool.d.ts +10 -1
- package/package.json +2 -2
- package/dist/cjs/search-bar-bb40cfa7.js +0 -290
- package/dist/components/p-19318fee.entry.js +0 -1
- package/dist/components/p-209db2ba.entry.js +0 -1
- package/dist/components/p-2bb3b235.js +0 -1
- package/dist/components/p-4224c2ad.js +0 -1
- package/dist/components/p-52739247.js +0 -1
- package/dist/components/p-552c128f.js +0 -1
- package/dist/components/p-6505cdb3.js +0 -1
- package/dist/components/p-ae6a3c46.entry.js +0 -1
- package/dist/components/p-bd11e7d1.js +0 -1
- package/dist/components/p-c8dd68a1.entry.js +0 -1
- package/dist/components/p-e576818b.entry.js +0 -1
- package/dist/components/p-ebabee40.entry.js +0 -1
- package/dist/esm/search-bar-59cc151d.js +0 -288
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,e as t,h as r,H as s,g as i}from"./p-6834631c.js";import{c as a}from"./p-fe062eb0.js";import{g as n}from"./p-1356f525.js";const l=()=>{if("undefined"!=typeof window)return window.getSelection()},o=e=>new Text(null!=e&&""!==e?e:" "),h=e=>`${e.type}:${e.id}`,c=(e,t,r)=>{const s=h(e);return{before:o(t),beforeSpace:o(u()),result:o(s),afterSpace:null!=r?o(v()):void 0,after:null!=r?o(r):void 0}},d=e=>Object.keys(e).map((t=>e[t])).filter((e=>null!=e)),u=()=>String.fromCharCode(8202),v=()=>String.fromCharCode(160),b=class{constructor(r){e(this,r),this.searchChanged=t(this,"searchChanged",7),this.inputChanged=t(this,"inputChanged",7),this.resultReplaced=t(this,"resultReplaced",7),this.inputFocus=t(this,"inputFocus",7),this.inputBlur=t(this,"inputBlur",7),this.rawElements=[],this.isIdenticalElement=(e,t)=>e===this.triggeredElement||this.getTextContent(e)===this.getTextContent(t),this.getTextContent=e=>{var t;return e instanceof HTMLElement?e.innerText:null!==(t=e.textContent)&&void 0!==t?t:""},this.handleCursorPositionUpdate=()=>{var e,t,r;const s=null===(e=l())||void 0===e?void 0:e.getRangeAt(0);if(null!=s)if(this.hasTriggered){if(this.hasTriggered){const e=this.readTriggerValue(null!==(r=s.commonAncestorContainer.textContent)&&void 0!==r?r:"",s.startOffset);null!=e?(this.triggeredRange=s,this.triggeredElement=s.commonAncestorContainer,this.searchChanged.emit(e.replace(this.triggerCharacter,""))):(this.hasTriggered=!1,this.triggeredRange=void 0,this.triggeredElement=void 0)}}else{const e=this.readTriggerValue(null!==(t=s.commonAncestorContainer.textContent)&&void 0!==t?t:"",s.startOffset);null!=e&&(this.hasTriggered=!0,this.triggeredRange=s,this.triggeredElement=s.commonAncestorContainer,this.searchChanged.emit(e.replace(this.triggerCharacter,"")))}this.cursorPosition=this.getCursorPosition()},this.readTriggerValue=(e,t)=>{const r=e.replace(String.fromCharCode(160)," "),s=r.substring(0,t),i=r.substring(t),a=`${s.includes(this.triggerCharacter)?s.substring(s.lastIndexOf(this.triggerCharacter)):""}${i.substring(0,this.firstIndexOfBreakCharacter(i))}`;return a.includes(this.triggerCharacter)&&!this.includesBreakCharacter(a)?a:void 0},this.includesBreakCharacter=e=>this.breakCharacters.some((t=>e.includes(t))),this.firstIndexOfBreakCharacter=e=>{const t=this.breakCharacters.map((t=>e.indexOf(t))).filter((e=>e>=0));return t.length>0?Math.min(...t):e.length},this.moveCursorToNodeEnd=(e,t=!1)=>{const r=l();if(null!=r){const s=document.createRange();s.selectNodeContents(e),s.collapse(t),r.removeAllRanges(),r.addRange(s)}},this.getContentAsString=()=>null!=this.contentEl?Array.from(this.contentEl.childNodes).reduce(((e,t)=>{var r;return t instanceof HTMLElement&&"true"===t.getAttribute("data-replaced")?`${e}${t.getAttribute("data-original")}`:t instanceof HTMLElement?`${e}${t.innerText}`:`${e}${null!==(r=t.textContent)&&void 0!==r?r:""}`}),"").replace(/[\u200A]/g,"").replace(/[\u00A0]/g," "):"",this.createReplacedElement=(e,t)=>{const r=this.hostEl.querySelector('template[slot="replaced"]');if(null!=r){const s=n(r);return s.bindings.bind(t),s.element.id=t.id,s.element.style.display="inline-block",s.element.contentEditable="false",s.element.tabIndex=-1,s.element.setAttribute("data-replaced","true"),s.element.setAttribute("data-original",e),s.element}throw new Error("Replaced template not defined.")},this.variant="standard",this.disabled=!1,this.triggerCharacter="@",this.breakCharacters=[" ","\n"],this.resultItems=void 0,this.placement="bottom-start",this.value=void 0,this.placeholder=void 0,this.replacements=[],this.cursorPosition={x:0,y:0},this.displayedElements=[],this.hasTriggered=!1,this.handleKeyDown=this.handleKeyDown.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this),this.handleResultClick=this.handleResultClick.bind(this),this.handleClick=this.handleClick.bind(this),this.handleWindowClick=this.handleWindowClick.bind(this),this.handleInput=this.handleInput.bind(this),this.handleBlur=this.handleBlur.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleCursorPositionUpdate=this.handleCursorPositionUpdate.bind(this),this.updateContent=this.updateContent.bind(this),this.replaceContent=this.replaceContent.bind(this)}componentDidLoad(){this.replaceContent(this.value)}connectedCallback(){window.addEventListener("click",this.handleWindowClick)}disconnectedCallback(){window.removeEventListener("click",this.handleWindowClick)}replaceContent(e,t){if(null!=e&&e!==t){const t=e.match(/[a-z]*:[0-9a-z-]{36}/g),r=this.replacements.reduce(((e,t)=>Object.assign(Object.assign({},e),{[h(t)]:t})),{});let s=e;const i=null!=t?null==t?void 0:t.reduce(((e,t)=>{if(null!=r[t]){const i=h(r[t]),a=s.indexOf(i),n=s.substring(0,a),l=s.substring(a+i.length),o=c(r[t],n);return s=l,[...e,o.before,o.beforeSpace,o.result]}return e}),[]):[];this.rawElements=[...i,o(s)],this.updateContent()}}updateContent(){null!=this.contentEl&&(this.contentEl.innerHTML="",this.displayedElements=this.rawElements.map((e=>{const t=e instanceof HTMLElement?e.innerText:e.textContent,r=this.replacements.find((e=>null==t?void 0:t.includes(e.id)));return null!=t&&null!=r?this.createReplacedElement(t,r):e})),this.displayedElements.forEach((e=>{var t;null===(t=this.contentEl)||void 0===t||t.appendChild("string"==typeof e?o(e):e)})),null!=this.lastReplacedSpace&&this.moveCursorToNodeEnd(this.lastReplacedSpace),this.inputChanged.emit(this.getContentAsString()))}render(){var e;const t=a("wrapper",{standard:"standard"===this.variant,filled:"filled"===this.variant,underlined:"underlined"===this.variant,blank:"blank"===this.variant,disabled:this.disabled});return r(s,null,r("div",{class:t},r("span",{class:"content-input",role:"textbox",contentEditable:"true","aria-multiline":"true","data-placeholder":this.placeholder,ref:e=>this.contentEl=e,onKeyDown:this.handleKeyDown,onKeyUp:this.handleCursorPositionUpdate,onClick:this.handleCursorPositionUpdate,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})),r("vertex-result-list",{position:this.cursorPosition,placement:this.placement,open:this.hasTriggered&&null!=this.resultItems&&this.resultItems.length>0,items:null!==(e=this.resultItems)&&void 0!==e?e:[],onEnterPressed:this.handleResultClick,onResultClick:this.handleResultClick},r("slot",{name:"results"})),r("slot",{name:"replaced"}))}handleKeyDown(e){this.hasTriggered&&this.breakCharacters.includes(e.key)&&(this.hasTriggered=!1,this.triggeredRange=void 0,this.triggeredElement=void 0)}handleKeyUp(e){this.handleCursorPositionUpdate(),this.cursorPosition=this.getCursorPosition()}async handleInput(){this.inputChanged.emit(this.getContentAsString())}handleClick(){this.handleCursorPositionUpdate()}handleWindowClick(e){e.target instanceof HTMLElement&&"true"===e.target.getAttribute("data-replaced")&&null!=e.target.nextSibling&&this.moveCursorToNodeEnd(e.target.nextSibling,!0)}handleFocus(e){this.inputFocus.emit(e)}handleBlur(e){this.hasTriggered=!1,this.inputBlur.emit(e)}handleResultClick(e){var t;const r=this.triggeredRange,s=this.triggeredElement,i=s instanceof HTMLElement?s.innerText:null==s?void 0:s.textContent;if(null!=this.contentEl&&null!=r&&null!=s&&null!=i){const a=null!==(t=this.readTriggerValue(i,r.startOffset))&&void 0!==t?t:"",n=i.split(a),l=c(e.detail,n[0],n[1]);this.lastReplacedSpace=l.afterSpace,this.rawElements=Array.from(this.contentEl.childNodes).reduce(((e,t)=>this.isIdenticalElement(t,s)?[...e,...d(l)]:[...e,t]),[]),this.hasTriggered=!1,this.replacements=[...this.replacements.filter((t=>t.id!==e.detail.id)),e.detail],this.resultReplaced.emit(e.detail)}}getCursorPosition(){var e;const t=l();if(null!=t&&t.rangeCount>0){const r=t.getRangeAt(0).getBoundingClientRect(),s=null===(e=this.contentEl)||void 0===e?void 0:e.getBoundingClientRect(),i=r.bottom||(null==s?void 0:s.bottom)||0,a=r.top||(null==s?void 0:s.top)||0;return{x:r.left||(null==s?void 0:s.left)||0,y:this.placement.includes("top")?a:i}}throw new Error("Unable to retrieve window selection.")}get hostEl(){return i(this)}static get watchers(){return{value:["replaceContent"],replacements:["updateContent"]}}};b.style=".wrapper.sc-vertex-search-bar{display:flex;border:1px solid var(--vertex-ui-neutral-600);border-radius:0.5rem}.content-input.sc-vertex-search-bar{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);font-size:0.875rem;line-height:1.4;white-space:pre-line}.standard.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.standard.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.standard.sc-vertex-search-bar:hover:not(.disabled),.standard.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-500)}.standard.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.standard.disabled.sc-vertex-search-bar,.standard.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.blank.sc-vertex-search-bar{color:var(--vertex-ui-neutral-800)}.blank.sc-vertex-search-bar:not(:hover) .content-input.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.blank.sc-vertex-search-bar:hover:not(.disabled) .content-input.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.blank.disabled.sc-vertex-search-bar,.blank.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.filled.sc-vertex-search-bar:hover:not(.disabled),.filled.sc-vertex-search-bar:focus{border-bottom-color:var(--vertex-ui-blue-600)}.filled.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-100)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.underlined.sc-vertex-search-bar:hover:not(.disabled),.underlined.sc-vertex-search-bar:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.underlined.disabled.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-neutral-200)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.has-error.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-red-600)}";export{b as S}
|
package/dist/esm/components.js
CHANGED
|
@@ -85,5 +85,5 @@ const patchDynamicImport = (base, orgScriptElm) => {
|
|
|
85
85
|
};
|
|
86
86
|
|
|
87
87
|
patchBrowser().then(options => {
|
|
88
|
-
return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"
|
|
88
|
+
return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"disabled":[4],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"resultItems":[16],"placement":[1],"value":[1],"placeholder":[1],"replacements":[1040],"cursorPosition":[32],"displayedElements":[32],"hasTriggered":[32]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"hideSelected":[4,"hide-selected"],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-badge",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-circle",[[1,"vertex-color-circle",{"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"resizeObserverFactory":[16],"opened":[32],"computedPlacement":[32]}]]]], options);
|
|
89
89
|
});
|
package/dist/esm/index.js
CHANGED
|
@@ -23,19 +23,19 @@ export { L as LogoLoading } from './logo-loading-3c7fa23d.js';
|
|
|
23
23
|
export { M as Menu } from './menu-daa7f9c9.js';
|
|
24
24
|
export { M as MenuDivider } from './menu-divider-87c888cb.js';
|
|
25
25
|
export { M as MenuItem } from './menu-item-c33aa9dd.js';
|
|
26
|
-
export { P as Popover } from './popover-
|
|
26
|
+
export { P as Popover } from './popover-6e806354.js';
|
|
27
27
|
export { R as Radio } from './radio-39c11ba4.js';
|
|
28
28
|
export { R as RadioGroup } from './radio-group-7c35d2f0.js';
|
|
29
29
|
export { R as Resizable } from './resizable-a147709b.js';
|
|
30
|
-
export { R as ResultList } from './result-list-
|
|
31
|
-
export { S as SearchBar } from './search-bar-
|
|
32
|
-
export { S as Select } from './select-
|
|
30
|
+
export { R as ResultList } from './result-list-16c6afbd.js';
|
|
31
|
+
export { S as SearchBar } from './search-bar-6fad2f2e.js';
|
|
32
|
+
export { S as Select } from './select-d4e135b7.js';
|
|
33
33
|
export { S as Slider } from './slider-dcdb388f.js';
|
|
34
34
|
export { S as Spinner } from './spinner-afccea51.js';
|
|
35
|
-
export { T as TextField } from './text-field-
|
|
35
|
+
export { T as TextField } from './text-field-32ac877e.js';
|
|
36
36
|
export { T as Toast } from './toast-255648ff.js';
|
|
37
37
|
export { T as Toggle } from './toggle-1fe22e4f.js';
|
|
38
|
-
export { T as Tooltip } from './tooltip-
|
|
38
|
+
export { T as Tooltip } from './tooltip-933da261.js';
|
|
39
39
|
import './index-72f28b71.js';
|
|
40
40
|
import './slots-fbb5afb3.js';
|
|
41
41
|
import './index-9c609209.js';
|
package/dist/esm/loader.js
CHANGED
|
@@ -11,7 +11,7 @@ const patchEsm = () => {
|
|
|
11
11
|
const defineCustomElements = (win, options) => {
|
|
12
12
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
13
13
|
return patchEsm().then(() => {
|
|
14
|
-
return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"
|
|
14
|
+
return bootstrapLazy([["vertex-click-to-edit-textfield",[[6,"vertex-click-to-edit-textfield",{"placeholder":[1],"fontSize":[1,"font-size"],"disabled":[516],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"value":[1032],"autoFocus":[4,"auto-focus"],"editing":[1540],"hasError":[4,"has-error"]}]]],["vertex-collapsible",[[1,"vertex-collapsible",{"label":[1],"open":[1540]}]]],["vertex-context-menu",[[1,"vertex-context-menu",{"targetSelector":[1,"target-selector"],"animated":[4],"position":[32],"open":[32]}]]],["vertex-dialog",[[1,"vertex-dialog",{"open":[1540],"fullscreen":[4],"resizable":[4],"width":[32],"height":[32],"minWidth":[32],"minHeight":[32],"maxWidth":[32],"maxHeight":[32],"isResizing":[32]},[[4,"keydown","keyDownListener"]]]]],["vertex-draggable-popover",[[1,"vertex-draggable-popover",{"position":[1],"boundarySelector":[1,"boundary-selector"],"boundaryPadding":[2,"boundary-padding"],"anchorPosition":[32],"lastPosition":[32],"dragging":[32]}]]],["vertex-dropdown-menu",[[1,"vertex-dropdown-menu",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-help-tooltip",[[1,"vertex-help-tooltip",{"animated":[4],"placement":[1],"open":[32]}]]],["vertex-search-bar",[[6,"vertex-search-bar",{"variant":[1],"disabled":[4],"triggerCharacter":[1,"trigger-character"],"breakCharacters":[16],"resultItems":[16],"placement":[1],"value":[1],"placeholder":[1],"replacements":[1040],"cursorPosition":[32],"displayedElements":[32],"hasTriggered":[32]}]]],["vertex-select",[[1,"vertex-select",{"value":[513],"placeholder":[513],"disabled":[516],"animated":[4],"hideSelected":[4,"hide-selected"],"resizeObserverFactory":[16],"open":[32],"position":[32],"displayValue":[32]}]]],["vertex-slider",[[1,"vertex-slider",{"min":[2],"max":[2],"valueLabelDisplay":[1,"value-label-display"],"step":[8],"size":[1],"value":[1026],"disabled":[4]}]]],["vertex-toast",[[1,"vertex-toast",{"content":[1],"placement":[1],"duration":[2],"animated":[4],"open":[4],"type":[1],"isOpen":[32]}]]],["vertex-color-circle-picker",[[1,"vertex-color-circle-picker",{"colors":[1],"supplementalColors":[1,"supplemental-colors"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"selected":[1537],"direction":[1]}]]],["vertex-color-picker",[[1,"vertex-color-picker",{"value":[1537],"disabled":[4]}]]],["vertex-toggle",[[1,"vertex-toggle",{"variant":[1],"disabled":[4],"checked":[1540]}]]],["vertex-avatar",[[1,"vertex-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"value":[1],"active":[4],"variant":[1]}]]],["vertex-avatar-group",[[1,"vertex-avatar-group"]]],["vertex-badge",[[1,"vertex-badge",{"badgeText":[1,"badge-text"],"badgeColor":[1,"badge-color"]}]]],["vertex-button",[[1,"vertex-button",{"type":[1],"color":[1],"variant":[1],"size":[1],"expand":[1],"href":[1],"target":[1],"disabled":[516]}]]],["vertex-card",[[1,"vertex-card",{"mode":[1]}]]],["vertex-card-group",[[1,"vertex-card-group",{"selected":[516],"hovered":[516],"expanded":[516]}]]],["vertex-chip",[[1,"vertex-chip",{"variant":[1],"color":[1]}]]],["vertex-logo-loading",[[1,"vertex-logo-loading"]]],["vertex-menu-divider",[[1,"vertex-menu-divider"]]],["vertex-menu-item",[[1,"vertex-menu-item",{"disabled":[516]}]]],["vertex-radio",[[2,"vertex-radio",{"disabled":[516],"value":[513],"label":[513],"name":[513],"checked":[516]}]]],["vertex-radio-group",[[1,"vertex-radio-group",{"name":[513],"value":[1537]}]]],["vertex-resizable",[[1,"vertex-resizable",{"horizontalDirection":[1,"horizontal-direction"],"verticalDirection":[1,"vertical-direction"],"initialHorizontalScale":[2,"initial-horizontal-scale"],"initialVerticalScale":[2,"initial-vertical-scale"],"initializeWithOffset":[4,"initialize-with-offset"],"parentSelector":[1,"parent-selector"],"verticalSiblingSelector":[1,"vertical-sibling-selector"],"horizontalSiblingSelector":[1,"horizontal-sibling-selector"],"contentSelector":[1,"content-selector"],"position":[1],"dimensionsComputed":[1540,"dimensions-computed"],"width":[32],"minWidth":[32],"maxWidth":[32],"height":[32],"minHeight":[32],"maxHeight":[32],"left":[32],"top":[32],"hoveredLocation":[32],"dragStartLocation":[32],"updateDimensions":[64]}]]],["vertex-spinner",[[1,"vertex-spinner",{"color":[1],"size":[1]}]]],["vertex-expandable",[[1,"vertex-expandable",{"expanded":[1540],"expanding":[1540],"collapsing":[1540],"controlled":[516],"expandType":[513,"expand-type"],"animated":[4],"contentScrollHeight":[32]}]]],["vertex-result-list",[[1,"vertex-result-list",{"items":[16],"itemsJson":[1,"items"],"viewportStartIndex":[1026,"viewport-start-index"],"viewportEndIndex":[1026,"viewport-end-index"],"resultHeight":[1026,"result-height"],"overScanCount":[2,"over-scan-count"],"placement":[1],"position":[1],"open":[4],"listHeight":[32],"parsedResults":[32],"scrollTop":[32],"lastStartIndex":[32],"lastFocusedIndex":[32],"stateMap":[32]}]]],["vertex-textfield",[[6,"vertex-textfield",{"type":[1],"name":[1],"variant":[1],"fontSize":[1,"font-size"],"multiline":[4],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"placeholder":[1],"autoFocus":[4,"auto-focus"],"autoComplete":[1,"auto-complete"],"autoCorrect":[1,"auto-correct"],"value":[1032],"disabled":[516],"hasError":[4,"has-error"],"updateInput":[64],"blurInput":[64],"getInputValue":[64],"selectAll":[64]}]]],["vertex-tooltip",[[1,"vertex-tooltip",{"content":[1],"disabled":[4],"placement":[1],"delay":[2],"animated":[4],"open":[32]}]]],["vertex-color-circle",[[1,"vertex-color-circle",{"color":[513],"supplementalColor":[513,"supplemental-color"],"theme":[513],"lightenPercentage":[2,"lighten-percentage"],"darkenPercentage":[2,"darken-percentage"],"lightened":[1537],"darkened":[1537]}]]],["vertex-auto-resize-textarea",[[1,"vertex-auto-resize-textarea",{"textareaSelector":[1,"textarea-selector"],"initialValue":[1,"initial-value"],"minRows":[514,"min-rows"],"maxRows":[514,"max-rows"],"textValue":[32]}]]],["vertex-menu",[[1,"vertex-menu",{"animated":[4],"open":[1540],"placement":[1],"fallbackPlacements":[16],"backdrop":[4],"position":[1040],"popoverProps":[16]}]]],["vertex-icon-button",[[1,"vertex-icon-button",{"iconName":[1,"icon-name"],"disabled":[516],"variant":[1],"iconColor":[1,"icon-color"],"iconSize":[1,"icon-size"]}]]],["vertex-icon",[[1,"vertex-icon",{"name":[1],"size":[1]}]]],["vertex-popover",[[1,"vertex-popover",{"open":[1540],"placement":[1],"position":[1025],"anchorBounds":[16],"backdrop":[4],"animated":[4],"anchorSelector":[1,"anchor-selector"],"boundarySelector":[1,"boundary-selector"],"resizeBehavior":[1,"resize-behavior"],"overflowBehavior":[16],"flipBehavior":[16],"offsetBehavior":[2,"offset-behavior"],"updateOnResize":[4,"update-on-resize"],"resizeObserverFactory":[16],"opened":[32],"computedPlacement":[32]}]]]], options);
|
|
15
15
|
});
|
|
16
16
|
};
|
|
17
17
|
|
|
@@ -1473,13 +1473,17 @@ const Popover = class {
|
|
|
1473
1473
|
this.updateOnResize = false;
|
|
1474
1474
|
this.opened = false;
|
|
1475
1475
|
this.computedPlacement = this.placement;
|
|
1476
|
+
this.resizeObserverFactory = (cb) => new ResizeObserver(cb);
|
|
1476
1477
|
this.updateListener = this.updateListener.bind(this);
|
|
1477
1478
|
this.handlePositionUpdate = this.handlePositionUpdate.bind(this);
|
|
1478
1479
|
this.handleResize = this.handleResize.bind(this);
|
|
1480
|
+
this.handleMiddlewareChange = this.handleMiddlewareChange.bind(this);
|
|
1479
1481
|
this.setWindow = this.setWindow.bind(this);
|
|
1482
|
+
this.updateResizeObserver = this.updateResizeObserver.bind(this);
|
|
1480
1483
|
}
|
|
1481
1484
|
connectedCallback() {
|
|
1482
1485
|
this.updatePosition(this.position);
|
|
1486
|
+
this.updateResizeObserver();
|
|
1483
1487
|
}
|
|
1484
1488
|
componentDidUpdate() {
|
|
1485
1489
|
if (this.shouldUpdatePosition) {
|
|
@@ -1501,12 +1505,14 @@ const Popover = class {
|
|
|
1501
1505
|
}
|
|
1502
1506
|
}
|
|
1503
1507
|
disconnectedCallback() {
|
|
1508
|
+
var _a;
|
|
1504
1509
|
this.viewportWidth = undefined;
|
|
1505
1510
|
this.viewportHeight = undefined;
|
|
1506
1511
|
this.opened = false;
|
|
1507
1512
|
if (this.resizeBehavior === 'dynamic') {
|
|
1508
1513
|
window.removeEventListener('resize', this.handleResize);
|
|
1509
1514
|
}
|
|
1515
|
+
(_a = this.boundaryResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
1510
1516
|
}
|
|
1511
1517
|
updatePosition(position) {
|
|
1512
1518
|
if (position != null) {
|
|
@@ -1530,6 +1536,16 @@ const Popover = class {
|
|
|
1530
1536
|
updateMiddleware() {
|
|
1531
1537
|
this.handleMiddlewareChange();
|
|
1532
1538
|
}
|
|
1539
|
+
updateResizeObserver() {
|
|
1540
|
+
const observer = this.getOrCreateResizeObserver();
|
|
1541
|
+
observer.disconnect();
|
|
1542
|
+
if (this.boundarySelector != null) {
|
|
1543
|
+
const element = document.querySelector(this.boundarySelector);
|
|
1544
|
+
if (element != null) {
|
|
1545
|
+
observer.observe(element);
|
|
1546
|
+
}
|
|
1547
|
+
}
|
|
1548
|
+
}
|
|
1533
1549
|
/**
|
|
1534
1550
|
* @private Used for internals or testing.
|
|
1535
1551
|
*/
|
|
@@ -1635,6 +1651,12 @@ const Popover = class {
|
|
|
1635
1651
|
this.viewportWidth = this.partialWindow.innerWidth;
|
|
1636
1652
|
this.viewportHeight = this.partialWindow.innerHeight;
|
|
1637
1653
|
}
|
|
1654
|
+
getOrCreateResizeObserver() {
|
|
1655
|
+
if (this.boundaryResizeObserver == null) {
|
|
1656
|
+
this.boundaryResizeObserver = this.resizeObserverFactory(this.handleMiddlewareChange);
|
|
1657
|
+
}
|
|
1658
|
+
return this.boundaryResizeObserver;
|
|
1659
|
+
}
|
|
1638
1660
|
getTransformClass() {
|
|
1639
1661
|
if (this.animated) {
|
|
1640
1662
|
switch (this.computedPlacement) {
|
|
@@ -1671,7 +1693,7 @@ const Popover = class {
|
|
|
1671
1693
|
"placement": ["updatePlacement"],
|
|
1672
1694
|
"open": ["updateOpened"],
|
|
1673
1695
|
"animated": ["updateAnimated"],
|
|
1674
|
-
"boundarySelector": ["updateMiddleware"],
|
|
1696
|
+
"boundarySelector": ["updateMiddleware", "updateResizeObserver"],
|
|
1675
1697
|
"overflowBehavior": ["updateMiddleware"],
|
|
1676
1698
|
"flipBehavior": ["updateMiddleware"],
|
|
1677
1699
|
"offsetBehavior": ["updateMiddleware"]
|
|
@@ -3,10 +3,12 @@ import { c as classnames } from './index-9c609209.js';
|
|
|
3
3
|
import { g as generateInstanceFromTemplate } from './templates-797420bf.js';
|
|
4
4
|
|
|
5
5
|
class ElementPool {
|
|
6
|
-
constructor(container, elementFactory) {
|
|
6
|
+
constructor(container, elementFactory, eventHandlerFactory) {
|
|
7
7
|
this.container = container;
|
|
8
8
|
this.elementFactory = elementFactory;
|
|
9
|
+
this.eventHandlerFactory = eventHandlerFactory;
|
|
9
10
|
this.instanceMap = new Map();
|
|
11
|
+
this.handlerMap = new Map();
|
|
10
12
|
this.elements = [];
|
|
11
13
|
}
|
|
12
14
|
swapHeadToTail(count) {
|
|
@@ -58,15 +60,31 @@ class ElementPool {
|
|
|
58
60
|
this.elements.push(instance.element);
|
|
59
61
|
this.instanceMap.set(instance.element, instance);
|
|
60
62
|
this.container.append(instance.element);
|
|
63
|
+
this.addEventListeners(instance.element);
|
|
61
64
|
return instance;
|
|
62
65
|
}
|
|
66
|
+
addEventListeners(element) {
|
|
67
|
+
var _a;
|
|
68
|
+
const handlers = (_a = this.eventHandlerFactory) === null || _a === void 0 ? void 0 : _a.call(this, element);
|
|
69
|
+
handlers === null || handlers === void 0 ? void 0 : handlers.forEach((d) => {
|
|
70
|
+
element.addEventListener(d.type, d.handler);
|
|
71
|
+
});
|
|
72
|
+
this.handlerMap.set(element, handlers !== null && handlers !== void 0 ? handlers : []);
|
|
73
|
+
}
|
|
63
74
|
deleteElement() {
|
|
64
75
|
const element = this.elements.pop();
|
|
65
76
|
if (element != null) {
|
|
66
77
|
this.instanceMap.delete(element);
|
|
67
78
|
element.remove();
|
|
79
|
+
this.removeEventListeners(element);
|
|
68
80
|
}
|
|
69
81
|
}
|
|
82
|
+
removeEventListeners(element) {
|
|
83
|
+
var _a;
|
|
84
|
+
(_a = this.handlerMap.get(element)) === null || _a === void 0 ? void 0 : _a.forEach((d) => {
|
|
85
|
+
element.removeEventListener(d.type, d.handler);
|
|
86
|
+
});
|
|
87
|
+
}
|
|
70
88
|
}
|
|
71
89
|
|
|
72
90
|
const getResultListHeight = (el) => {
|
|
@@ -86,6 +104,7 @@ const ResultList = class {
|
|
|
86
104
|
constructor(hostRef) {
|
|
87
105
|
registerInstance(this, hostRef);
|
|
88
106
|
this.enterPressed = createEvent(this, "enterPressed", 7);
|
|
107
|
+
this.resultClick = createEvent(this, "resultClick", 7);
|
|
89
108
|
this.computeResultHeight = () => {
|
|
90
109
|
if (this.computedResultHeight == null) {
|
|
91
110
|
const result = this.hostEl.querySelector('*[slot="result"]');
|
|
@@ -110,7 +129,7 @@ const ResultList = class {
|
|
|
110
129
|
}
|
|
111
130
|
};
|
|
112
131
|
this.createResultPool = () => {
|
|
113
|
-
this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance());
|
|
132
|
+
this.stateMap.resultPool = new ElementPool(this.hostEl, () => this.createResultInstance(), () => this.createResultHandlers());
|
|
114
133
|
};
|
|
115
134
|
this.createResultInstance = () => {
|
|
116
135
|
if (this.stateMap.resultTemplate != null) {
|
|
@@ -122,6 +141,18 @@ const ResultList = class {
|
|
|
122
141
|
throw new Error('Result template not defined.');
|
|
123
142
|
}
|
|
124
143
|
};
|
|
144
|
+
this.createResultHandlers = () => {
|
|
145
|
+
return [
|
|
146
|
+
{
|
|
147
|
+
type: 'pointerdown',
|
|
148
|
+
handler: this.handlePointerDown,
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
type: 'click',
|
|
152
|
+
handler: this.handleResultClick,
|
|
153
|
+
},
|
|
154
|
+
];
|
|
155
|
+
};
|
|
125
156
|
this.layoutResults = () => {
|
|
126
157
|
var _a, _b, _c, _d;
|
|
127
158
|
const visibleRowCount = this.viewportEndIndex - this.viewportStartIndex + 1;
|
|
@@ -142,6 +173,7 @@ const ResultList = class {
|
|
|
142
173
|
el.style.top = `${(this.viewportStartIndex + index) * this.resultHeight}px`;
|
|
143
174
|
el.style.width = '100%';
|
|
144
175
|
el.setAttribute('is-focused', `${this.viewportStartIndex + index === this.lastFocusedIndex}`);
|
|
176
|
+
el.setAttribute('data-result-id', result.id);
|
|
145
177
|
binding.bind(result);
|
|
146
178
|
}
|
|
147
179
|
});
|
|
@@ -184,6 +216,8 @@ const ResultList = class {
|
|
|
184
216
|
this.lastStartIndex = 0;
|
|
185
217
|
this.lastFocusedIndex = 0;
|
|
186
218
|
this.stateMap = {};
|
|
219
|
+
this.handleResultClick = this.handleResultClick.bind(this);
|
|
220
|
+
this.handlePointerDown = this.handlePointerDown.bind(this);
|
|
187
221
|
}
|
|
188
222
|
handleResultsChanged(results) {
|
|
189
223
|
if (typeof results === 'string') {
|
|
@@ -229,6 +263,16 @@ const ResultList = class {
|
|
|
229
263
|
height: `${this.parsedResults.length * this.resultHeight}px`,
|
|
230
264
|
} }, h("slot", null), h("slot", { name: "result" })))))));
|
|
231
265
|
}
|
|
266
|
+
handlePointerDown(event) {
|
|
267
|
+
event.preventDefault();
|
|
268
|
+
}
|
|
269
|
+
handleResultClick(event) {
|
|
270
|
+
const closestIdElement = event.target.closest('[data-result-id]');
|
|
271
|
+
const result = this.parsedResults.find((r) => r.id === (closestIdElement === null || closestIdElement === void 0 ? void 0 : closestIdElement.getAttribute('data-result-id')));
|
|
272
|
+
if (result != null) {
|
|
273
|
+
this.resultClick.emit(result);
|
|
274
|
+
}
|
|
275
|
+
}
|
|
232
276
|
computeViewportResults() {
|
|
233
277
|
const viewportHeight = this.getListHeight();
|
|
234
278
|
if (viewportHeight != null && this.resultHeight > 0) {
|