@nyaruka/temba-components 0.117.1 → 0.118.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -4
- package/demo/index.html +1 -1
- package/dist/temba-components.js +16 -11
- package/dist/temba-components.js.map +1 -1
- package/out-tsc/src/dropdown/Dropdown.js +11 -5
- package/out-tsc/src/dropdown/Dropdown.js.map +1 -1
- package/out-tsc/src/list/TembaMenu.js +12 -6
- package/out-tsc/src/list/TembaMenu.js.map +1 -1
- package/out-tsc/src/select/Select.js +0 -2
- package/out-tsc/src/select/Select.js.map +1 -1
- package/package.json +1 -1
- package/screenshots/truth/menu/menu-focused-with items.png +0 -0
- package/screenshots/truth/menu/menu-refresh-1.png +0 -0
- package/screenshots/truth/menu/menu-refresh-2.png +0 -0
- package/screenshots/truth/menu/menu-root.png +0 -0
- package/screenshots/truth/menu/menu-submenu.png +0 -0
- package/screenshots/truth/menu/menu-tasks-nextup.png +0 -0
- package/screenshots/truth/menu/menu-tasks.png +0 -0
- package/src/dropdown/Dropdown.ts +12 -5
- package/src/list/TembaMenu.ts +12 -6
- package/src/select/Select.ts +0 -3
package/CHANGELOG.md
CHANGED
|
@@ -4,17 +4,21 @@ All notable changes to this project will be documented in this file. Dates are d
|
|
|
4
4
|
|
|
5
5
|
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
|
|
6
6
|
|
|
7
|
-
#### [v0.
|
|
7
|
+
#### [v0.118.1](https://github.com/nyaruka/temba-components/compare/v0.118.0...v0.118.1)
|
|
8
8
|
|
|
9
|
-
-
|
|
9
|
+
- Use zero height instead of pointer-events for dropdowns [`#474`](https://github.com/nyaruka/temba-components/pull/474)
|
|
10
10
|
|
|
11
|
-
#### [v0.
|
|
11
|
+
#### [v0.118.0](https://github.com/nyaruka/temba-components/compare/v0.116.0...v0.118.0)
|
|
12
12
|
|
|
13
|
-
>
|
|
13
|
+
> 28 January 2025
|
|
14
14
|
|
|
15
|
+
- Icon alignment [`#473`](https://github.com/nyaruka/temba-components/pull/473)
|
|
15
16
|
- Add WorkspaceSelect [`#472`](https://github.com/nyaruka/temba-components/pull/472)
|
|
16
17
|
- Bump nanoid from 3.3.7 to 3.3.8 [`#469`](https://github.com/nyaruka/temba-components/pull/469)
|
|
17
18
|
- Render line breaks for messages on contact chat [`#468`](https://github.com/nyaruka/temba-components/pull/468)
|
|
19
|
+
- Fix menu and dropdown icon alignment [`6089fe8`](https://github.com/nyaruka/temba-components/commit/6089fe8f788e5f1f404b76271cddac0a14cc21ed)
|
|
20
|
+
- Fix button with icon display [`fc31a37`](https://github.com/nyaruka/temba-components/commit/fc31a3748ae9f8c5387846d4b57522007f6e4234)
|
|
21
|
+
- Update test screenshots [`0d1b3ef`](https://github.com/nyaruka/temba-components/commit/0d1b3ef633bf52c4c288fa8a085ea33c75f2ae45)
|
|
18
22
|
|
|
19
23
|
#### [v0.116.0](https://github.com/nyaruka/temba-components/compare/v0.114.1...v0.116.0)
|
|
20
24
|
|
package/demo/index.html
CHANGED
|
@@ -127,7 +127,7 @@
|
|
|
127
127
|
</head>
|
|
128
128
|
|
|
129
129
|
<body>
|
|
130
|
-
<temba-webchat channel="
|
|
130
|
+
<temba-webchat channel="5ea6f54b-96b0-4e0f-aa00-c6cccc588a55"></temba-webchat>
|
|
131
131
|
<temba-store completion="/static/api/completion.json" functions="/static/api/functions.json"
|
|
132
132
|
fields="/static/api/fields.json" globals="/static/api/globals.json" groups="/static/api/groups.json"></temba-store>
|
|
133
133
|
|
package/dist/temba-components.js
CHANGED
|
@@ -911,7 +911,7 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
911
911
|
pointer-events: none;
|
|
912
912
|
padding: 0px;
|
|
913
913
|
}
|
|
914
|
-
`}constructor(){super(),this.hiddenInputs=[],this.inputStyle={},this.multi=!1,this.searchOnFocus=!1,this.placeholder="",this.name="",this.nameKey="name",this.valueKey="value",this.queryParam=null,this.input="",this.visibleOptions=[],this.completionOptions=[],this.quietMillis=0,this.searchable=!1,this.cache=!0,this.cacheKey="",this.focused=!1,this.disabled=!1,this.selectedIndex=-1,this.anchorPosition={left:0,top:0},this.tags=!1,this.flavor="default",this.infoText="",this.values=[],this.getName=t=>t[this.nameKey||"name"],this.isMatch=this.isMatchDefault,this.getValue=t=>t[this.valueKey||"value"]||t.id,this.sortFunction=null,this.renderOptionDetail=()=>V``,this.renderSelectedItem=this.renderSelectedItemDefault,this.createArbitraryOption=this.createArbitraryOptionDefault,this.getOptions=this.getOptionsDefault,this.prepareOptions=this.prepareOptionsDefault,this.isComplete=this.isCompleteDefault,this.staticOptions=[],this.allowAnchor=!0,this.alphaSort=(t,e)=>this.endpoint?this.getName(t).localeCompare(this.getName(e)):0,this.next=null,this.lruCache=Le(20,6e4),this.getNameInternal=t=>this.getName(t),this.renderOptionDefault=this.renderOptionDefault.bind(this),this.renderSelectedItemDefault=this.renderSelectedItemDefault.bind(this),this.prepareOptionsDefault=this.prepareOptionsDefault.bind(this),this.isMatchDefault=this.isMatchDefault.bind(this)}prepareOptionsDefault(t){return t}isMatchDefault(t,e){return(this.getName(t)||"").toLowerCase().indexOf(e)>-1}handleSlotChange(){if(this.staticOptions&&0===this.staticOptions.length)for(const t of this.children)if("TEMBA-OPTION"===t.tagName){const e={};for(const i of t.attributes)e[i.name]=i.value;if(e){let t=!1;void 0!==e.selected&&(delete e.selected,t=!0);const i=this.value||this.getAttribute("value");if(i){this.getValue(e)==i&&(t=!0)}this.staticOptions.push(e),t&&(this.multi?this.addValue(e):this.setValues([e]))}}this.searchable&&0===this.staticOptions.length&&(this.quietMillis=200)}checkSelectedOption(){if(this.value&&0==this.values.length&&0==this.staticOptions.length&&this.endpoint){const t=this.value;this.resolving=!0,Wt(this.endpoint).then((e=>{if(e&&e.length>0){if(t){const i=e.find((e=>this.getValue(e)===t));if(i)return this.resolving=!1,this.fetching=!1,void this.setValues([i])}this.setValues([e[0]]),this.resolving=!1}}))}else this.staticOptions.length>0&&(null!==this.getAttribute("multi")?this.addValue(this.staticOptions[0]):this.getAttribute("value")?this.setSelectedValue(this.getAttribute("value")):this.setValues([this.staticOptions[0]]))}firstUpdated(t){super.firstUpdated(t),this.anchorElement=this.shadowRoot.querySelector(".select-container"),this.anchorExpressions=this.shadowRoot.querySelector("#anchor"),this.shadowRoot.addEventListener("slotchange",this.handleSlotChange.bind(this))}updated(t){super.updated(t),t.has("sorted")&&(this.sortFunction=this.sorted?this.alphaSort:null),t.has("value")&&this.value&&!this.values.length&&this.setSelectedValue(this.value),t.has("values")&&(this.updateInputs(),this.hasChanges(t.get("values"))&&this.fireEvent("change")),t.has("cacheKey")&&this.lruCache.clear(),t.has("input")&&!t.has("values")&&!t.has("options")&&this.focused&&(this.lastQuery&&window.clearTimeout(this.lastQuery),this.lastQuery=window.setTimeout((()=>{this.expressions&&this.input.indexOf("@")>-1?this.fetchExpressions():this.fetchOptions(this.input)}),this.quietMillis)),this.endpoint&&t.has("fetching")&&(this.fetching||this.isPastFetchThreshold()||this.fireCustomEvent($e.FetchComplete)),(t.has("cursorIndex")||t.has("visibleOptions"))&&this.endpoint&&!this.fetching&&this.isPastFetchThreshold()&&(this.next?this.fetchOptions(null,null,this.next):this.fetchOptions(this.query,this.page+1)),0===this.values.length&&!this.placeholder&&this.staticOptions.length>0&&this.setValues([this.staticOptions[0]])}hasChanges(t){if(void 0===t)return!1;let e;void 0!==t&&(e=(t||[]).map((t=>this.getValue(t))).join(","));return e!==(this.values||[]).map((t=>this.getValue(t))).join(",")}setSelectedValue(t){if(this.staticOptions.length>0){const e=this.staticOptions.find((e=>this.getValue(e)===t));e&&this.setValues([e])}else this.checkSelectedOption()}updateInputs(){for(let t=null;t=this.hiddenInputs.pop();)t.remove();if(0===this.values.length)this.value=null;else{const t=this.getAttribute("name");t&&(this.multi||1!==this.values.length?this.inputRoot.parentElement&&this.values.forEach((e=>{const i=document.createElement("input");i.setAttribute("type","hidden"),i.setAttribute("name",t),i.setAttribute("value",this.serializeValue(e)),this.hiddenInputs.push(i),this.inputRoot.parentElement.appendChild(i)})):(this.selection=this.values[0],this.value=this.serializeValue(this.values[0])))}}setSelectedOption(t){this.multi?this.addValue(t):this.setValues([t]),this.multi&&this.searchable||(this.blur(),this.focused=!1),this.visibleOptions=[],this.input="",this.next=null,this.complete=!0,this.selectedIndex=-1}isPastFetchThreshold(){return(this.visibleOptions.length>0||this.next)&&!this.complete&&(this.cursorIndex||0)>this.visibleOptions.length-20}handleOptionSelection(t){t.preventDefault(),t.stopPropagation();const e=t.detail.selected;e.post&&this.endpoint?Qt(this.endpoint,e).then((t=>{t.status>=200&&t.status<300?(this.setSelectedOption(t.json),this.lruCache=Le(20,6e4)):this.blur()})):this.setSelectedOption(e)}handleExpressionSelection(t){const e=t.detail.selected,i=t.detail.tabbed,o=this.shadowRoot.querySelector(".searchbox");cl(this.query,o,e),this.query="",this.completionOptions=[],i?this.fetchExpressions():-1===this.input.indexOf("(")&&this.addInputAsValue()}getOptionsDefault(t){return t.json.results}isCompleteDefault(t,e){const i=e.json;return!i.more&&!i.next}handleRemoveSelection(t){this.removeValue(t),this.visibleOptions=[]}createArbitraryOptionDefault(){return null}open(){this.shadowRoot.querySelector(".select-container").click()}isOpen(){return this.visibleOptions.length>0}setOptions(t){this.staticOptions=t}setVisibleOptions(t){if(t=t.filter((t=>!!this.getNameInternal(t)&&(!this.shouldExclude||!this.shouldExclude(t)))),this.input){if(this.searchable&&!this.queryParam){const e=this.input.trim().toLowerCase();t=t.filter((t=>this.isMatch(t,e)))}const e=this.createArbitraryOption(this.input,t);if(e){e.arbitrary=!0;t.find((t=>this.getValue(t)===this.getValue(e)))||(t.length>0&&t[0].arbitrary?t[0]=e:t.unshift(e))}}this.values.length>0&&(this.multi?t=t.filter((t=>!this.values.find((e=>this.getValue(e)===this.getValue(t))))):(this.input?this.cursorIndex=0:this.cursorIndex=t.findIndex((t=>this.getValue(t)===this.getValue(this.values[0]))),this.requestUpdate("cursorIndex"))),this.sortFunction&&t.sort(this.sortFunction),this.visibleOptions=t,this.fireCustomEvent($e.ContentChanged,{options:this.visibleOptions})}fetchExpressions(){const t=document.querySelector("temba-store");if(this.expressions&&t){const e=this.shadowRoot.querySelector(".searchbox"),i=dl(e,t,"session"===this.expressions);return this.query=i.query,this.completionOptions=i.options,this.visibleOptions=[],this.anchorPosition=i.anchorPosition,void this.fireCustomEvent($e.FetchComplete)}}fetchOptions(t,e=0,i=null){if(this.completionOptions=[],!this.fetching){this.fetching=!0;const o=[...this.staticOptions],n=(t||"").trim().toLowerCase();if(this.tags&&n&&(o.find((t=>this.getValue(t)&&this.getValue(t).toLowerCase()===n))||o.splice(0,0,{name:t,value:t})),this.endpoint){let s=this.endpoint;i?s=i:(t&&this.queryParam&&(s.indexOf("?")>-1?s+="&":s+="?",s+=this.queryParam+"="+encodeURIComponent(t)),e&&(s.indexOf("?")>-1?s+="&":s+="?",s+="page="+e));const r=this.lruCache.get(s);if(this.cache&&!this.tags&&r)return 0!==e||this.next?this.setVisibleOptions([...this.visibleOptions,...r.options]):(this.cursorIndex=0,this.setVisibleOptions([...o,...r.options])),this.complete=r.complete,this.next=r.next,void(this.fetching=!1);this.searchable&&!this.queryParam?Wt(s).then((t=>{t=this.prepareOptions(t),this.cache&&!this.tags&&(this.lruCache.set(s,{options:t,complete:!0,next:null}),this.complete=!0,this.next=null,this.setVisibleOptions([...o,...t]),this.fetching=!1)})):Vt(s).then((i=>{let r=this.getOptions(i).filter((t=>this.isMatch(t,n)));r=this.prepareOptions(r),this.next=null;const a=i.json;a.next&&(this.next=a.next),0!==e||this.next?(r.length>0&&this.setVisibleOptions([...this.visibleOptions,...r]),this.complete=this.isComplete(r,i)):(this.cursorIndex=0,this.setVisibleOptions([...o,...r]),this.query=t,this.complete=this.isComplete(this.visibleOptions,i)),this.cache&&!this.tags&&this.lruCache.set(s,{options:r,complete:this.complete,next:this.next}),this.fetching=!1,this.page=e})).catch((t=>{this.fetching=!1,console.error(t)}))}else this.fetching=!1,this.setVisibleOptions(o)}}handleFocus(){this.focused||0!==this.visibleOptions.length||(this.focused=!0)}handleBlur(){this.focused=!1,this.visibleOptions.length>0&&(this.input="",this.next=null,this.complete=!0,this.visibleOptions=[],this.cursorIndex=0)}handleClick(){this.selectedIndex=-1,this.requestUpdate("input")}addInputAsValue(){const t=this.shadowRoot.querySelector(".searchbox"),e={name:t.value,value:t.value,expression:!0};this.multi?this.values.find((t=>t.expression&&t.value&&e.value&&t.value.toLowerCase().trim()==e.value.toLowerCase().trim()))||this.addValue(e):this.setValues([e]),this.input="",this.multi||this.blur()}handleKeyDown(t){if("Enter"===t.key&&this.expressions&&0===this.completionOptions.length&&this.input.indexOf("@")>-1&&this.addInputAsValue(),("Enter"===t.key||"ArrowDown"===t.key||"n"===t.key&&t.ctrlKey)&&0===this.visibleOptions.length&&0===this.completionOptions.length)this.requestUpdate("input");else if(this.multi&&"Backspace"===t.key&&!this.input){if(this.visibleOptions.length>0)return void(this.visibleOptions=[]);-1===this.selectedIndex?(this.selectedIndex=this.values.length-1,this.visibleOptions=[]):(this.popValue(),this.selectedIndex=-1)}else this.selectedIndex=-1}getStaticOptions(){return this.staticOptions}handleInput(t){const e=t.currentTarget;this.input=e.value}handleCancel(){this.visibleOptions=[]}handleCursorChanged(t){this.cursorIndex=t.detail.index}handleContainerClick(t){if(t.stopPropagation(),t.preventDefault(),this.focused=!0,"INPUT"!==t.target.tagName){const t=this.shadowRoot.querySelector("input");if(t)return t.click(),void t.focus();this.visibleOptions.length>0?this.visibleOptions=[]:this.requestUpdate("input")}}getEventHandlers(){return[{event:$e.Canceled,method:this.handleCancel},{event:$e.CursorChanged,method:this.handleCursorChanged},{event:"blur",method:this.handleBlur},{event:"focus",method:this.handleFocus}]}handleArrowClick(t){this.isOpen()&&(t.preventDefault(),t.stopPropagation(),this.blur())}renderOptionDefault(t){if(!t)return null;const e=t.icon;return V`
|
|
914
|
+
`}constructor(){super(),this.hiddenInputs=[],this.inputStyle={},this.multi=!1,this.searchOnFocus=!1,this.placeholder="",this.name="",this.nameKey="name",this.valueKey="value",this.queryParam=null,this.input="",this.visibleOptions=[],this.completionOptions=[],this.quietMillis=0,this.searchable=!1,this.cache=!0,this.cacheKey="",this.focused=!1,this.disabled=!1,this.selectedIndex=-1,this.anchorPosition={left:0,top:0},this.tags=!1,this.flavor="default",this.infoText="",this.values=[],this.getName=t=>t[this.nameKey||"name"],this.isMatch=this.isMatchDefault,this.getValue=t=>t[this.valueKey||"value"]||t.id,this.sortFunction=null,this.renderOptionDetail=()=>V``,this.renderSelectedItem=this.renderSelectedItemDefault,this.createArbitraryOption=this.createArbitraryOptionDefault,this.getOptions=this.getOptionsDefault,this.prepareOptions=this.prepareOptionsDefault,this.isComplete=this.isCompleteDefault,this.staticOptions=[],this.allowAnchor=!0,this.alphaSort=(t,e)=>this.endpoint?this.getName(t).localeCompare(this.getName(e)):0,this.next=null,this.lruCache=Le(20,6e4),this.getNameInternal=t=>this.getName(t),this.renderOptionDefault=this.renderOptionDefault.bind(this),this.renderSelectedItemDefault=this.renderSelectedItemDefault.bind(this),this.prepareOptionsDefault=this.prepareOptionsDefault.bind(this),this.isMatchDefault=this.isMatchDefault.bind(this)}prepareOptionsDefault(t){return t}isMatchDefault(t,e){return(this.getName(t)||"").toLowerCase().indexOf(e)>-1}handleSlotChange(){if(this.staticOptions&&0===this.staticOptions.length)for(const t of this.children)if("TEMBA-OPTION"===t.tagName){const e={};for(const i of t.attributes)e[i.name]=i.value;if(e){let t=!1;void 0!==e.selected&&(delete e.selected,t=!0);const i=this.value||this.getAttribute("value");if(i){this.getValue(e)==i&&(t=!0)}this.staticOptions.push(e),t&&(this.multi?this.addValue(e):this.setValues([e]))}}this.searchable&&0===this.staticOptions.length&&(this.quietMillis=200)}checkSelectedOption(){if(this.value&&0==this.values.length&&0==this.staticOptions.length&&this.endpoint){const t=this.value;this.resolving=!0,Wt(this.endpoint).then((e=>{if(e&&e.length>0){if(t){const i=e.find((e=>this.getValue(e)===t));if(i)return this.resolving=!1,this.fetching=!1,void this.setValues([i])}this.setValues([e[0]]),this.resolving=!1}}))}else this.staticOptions.length>0&&(null!==this.getAttribute("multi")?this.addValue(this.staticOptions[0]):this.getAttribute("value")?this.setSelectedValue(this.getAttribute("value")):this.setValues([this.staticOptions[0]]))}firstUpdated(t){super.firstUpdated(t),this.anchorElement=this.shadowRoot.querySelector(".select-container"),this.anchorExpressions=this.shadowRoot.querySelector("#anchor"),this.shadowRoot.addEventListener("slotchange",this.handleSlotChange.bind(this))}updated(t){super.updated(t),t.has("sorted")&&(this.sortFunction=this.sorted?this.alphaSort:null),t.has("value")&&this.value&&!this.values.length&&this.setSelectedValue(this.value),t.has("values")&&(this.updateInputs(),this.hasChanges(t.get("values"))&&this.fireEvent("change")),t.has("cacheKey")&&this.lruCache.clear(),t.has("input")&&!t.has("values")&&!t.has("options")&&this.focused&&(this.lastQuery&&window.clearTimeout(this.lastQuery),this.lastQuery=window.setTimeout((()=>{this.expressions&&this.input.indexOf("@")>-1?this.fetchExpressions():this.fetchOptions(this.input)}),this.quietMillis)),this.endpoint&&t.has("fetching")&&(this.fetching||this.isPastFetchThreshold()||this.fireCustomEvent($e.FetchComplete)),(t.has("cursorIndex")||t.has("visibleOptions"))&&this.endpoint&&!this.fetching&&this.isPastFetchThreshold()&&(this.next?this.fetchOptions(null,null,this.next):this.fetchOptions(this.query,this.page+1)),0===this.values.length&&!this.placeholder&&this.staticOptions.length>0&&this.setValues([this.staticOptions[0]])}hasChanges(t){if(void 0===t)return!1;let e;void 0!==t&&(e=(t||[]).map((t=>this.getValue(t))).join(","));return e!==(this.values||[]).map((t=>this.getValue(t))).join(",")}setSelectedValue(t){if(this.staticOptions.length>0){const e=this.staticOptions.find((e=>this.getValue(e)===t));e&&this.setValues([e])}else this.checkSelectedOption()}updateInputs(){for(let t=null;t=this.hiddenInputs.pop();)t.remove();if(0===this.values.length)this.value=null;else{const t=this.getAttribute("name");t&&(this.multi||1!==this.values.length?this.inputRoot.parentElement&&this.values.forEach((e=>{const i=document.createElement("input");i.setAttribute("type","hidden"),i.setAttribute("name",t),i.setAttribute("value",this.serializeValue(e)),this.hiddenInputs.push(i),this.inputRoot.parentElement.appendChild(i)})):(this.selection=this.values[0],this.value=this.serializeValue(this.values[0])))}}setSelectedOption(t){this.multi?this.addValue(t):this.setValues([t]),this.multi&&this.searchable||(this.blur(),this.focused=!1),this.visibleOptions=[],this.input="",this.next=null,this.complete=!0,this.selectedIndex=-1}isPastFetchThreshold(){return(this.visibleOptions.length>0||this.next)&&!this.complete&&(this.cursorIndex||0)>this.visibleOptions.length-20}handleOptionSelection(t){const e=t.detail.selected;e.post&&this.endpoint?Qt(this.endpoint,e).then((t=>{t.status>=200&&t.status<300?(this.setSelectedOption(t.json),this.lruCache=Le(20,6e4)):this.blur()})):this.setSelectedOption(e)}handleExpressionSelection(t){const e=t.detail.selected,i=t.detail.tabbed,o=this.shadowRoot.querySelector(".searchbox");cl(this.query,o,e),this.query="",this.completionOptions=[],i?this.fetchExpressions():-1===this.input.indexOf("(")&&this.addInputAsValue()}getOptionsDefault(t){return t.json.results}isCompleteDefault(t,e){const i=e.json;return!i.more&&!i.next}handleRemoveSelection(t){this.removeValue(t),this.visibleOptions=[]}createArbitraryOptionDefault(){return null}open(){this.shadowRoot.querySelector(".select-container").click()}isOpen(){return this.visibleOptions.length>0}setOptions(t){this.staticOptions=t}setVisibleOptions(t){if(t=t.filter((t=>!!this.getNameInternal(t)&&(!this.shouldExclude||!this.shouldExclude(t)))),this.input){if(this.searchable&&!this.queryParam){const e=this.input.trim().toLowerCase();t=t.filter((t=>this.isMatch(t,e)))}const e=this.createArbitraryOption(this.input,t);if(e){e.arbitrary=!0;t.find((t=>this.getValue(t)===this.getValue(e)))||(t.length>0&&t[0].arbitrary?t[0]=e:t.unshift(e))}}this.values.length>0&&(this.multi?t=t.filter((t=>!this.values.find((e=>this.getValue(e)===this.getValue(t))))):(this.input?this.cursorIndex=0:this.cursorIndex=t.findIndex((t=>this.getValue(t)===this.getValue(this.values[0]))),this.requestUpdate("cursorIndex"))),this.sortFunction&&t.sort(this.sortFunction),this.visibleOptions=t,this.fireCustomEvent($e.ContentChanged,{options:this.visibleOptions})}fetchExpressions(){const t=document.querySelector("temba-store");if(this.expressions&&t){const e=this.shadowRoot.querySelector(".searchbox"),i=dl(e,t,"session"===this.expressions);return this.query=i.query,this.completionOptions=i.options,this.visibleOptions=[],this.anchorPosition=i.anchorPosition,void this.fireCustomEvent($e.FetchComplete)}}fetchOptions(t,e=0,i=null){if(this.completionOptions=[],!this.fetching){this.fetching=!0;const o=[...this.staticOptions],n=(t||"").trim().toLowerCase();if(this.tags&&n&&(o.find((t=>this.getValue(t)&&this.getValue(t).toLowerCase()===n))||o.splice(0,0,{name:t,value:t})),this.endpoint){let s=this.endpoint;i?s=i:(t&&this.queryParam&&(s.indexOf("?")>-1?s+="&":s+="?",s+=this.queryParam+"="+encodeURIComponent(t)),e&&(s.indexOf("?")>-1?s+="&":s+="?",s+="page="+e));const r=this.lruCache.get(s);if(this.cache&&!this.tags&&r)return 0!==e||this.next?this.setVisibleOptions([...this.visibleOptions,...r.options]):(this.cursorIndex=0,this.setVisibleOptions([...o,...r.options])),this.complete=r.complete,this.next=r.next,void(this.fetching=!1);this.searchable&&!this.queryParam?Wt(s).then((t=>{t=this.prepareOptions(t),this.cache&&!this.tags&&(this.lruCache.set(s,{options:t,complete:!0,next:null}),this.complete=!0,this.next=null,this.setVisibleOptions([...o,...t]),this.fetching=!1)})):Vt(s).then((i=>{let r=this.getOptions(i).filter((t=>this.isMatch(t,n)));r=this.prepareOptions(r),this.next=null;const a=i.json;a.next&&(this.next=a.next),0!==e||this.next?(r.length>0&&this.setVisibleOptions([...this.visibleOptions,...r]),this.complete=this.isComplete(r,i)):(this.cursorIndex=0,this.setVisibleOptions([...o,...r]),this.query=t,this.complete=this.isComplete(this.visibleOptions,i)),this.cache&&!this.tags&&this.lruCache.set(s,{options:r,complete:this.complete,next:this.next}),this.fetching=!1,this.page=e})).catch((t=>{this.fetching=!1,console.error(t)}))}else this.fetching=!1,this.setVisibleOptions(o)}}handleFocus(){this.focused||0!==this.visibleOptions.length||(this.focused=!0)}handleBlur(){this.focused=!1,this.visibleOptions.length>0&&(this.input="",this.next=null,this.complete=!0,this.visibleOptions=[],this.cursorIndex=0)}handleClick(){this.selectedIndex=-1,this.requestUpdate("input")}addInputAsValue(){const t=this.shadowRoot.querySelector(".searchbox"),e={name:t.value,value:t.value,expression:!0};this.multi?this.values.find((t=>t.expression&&t.value&&e.value&&t.value.toLowerCase().trim()==e.value.toLowerCase().trim()))||this.addValue(e):this.setValues([e]),this.input="",this.multi||this.blur()}handleKeyDown(t){if("Enter"===t.key&&this.expressions&&0===this.completionOptions.length&&this.input.indexOf("@")>-1&&this.addInputAsValue(),("Enter"===t.key||"ArrowDown"===t.key||"n"===t.key&&t.ctrlKey)&&0===this.visibleOptions.length&&0===this.completionOptions.length)this.requestUpdate("input");else if(this.multi&&"Backspace"===t.key&&!this.input){if(this.visibleOptions.length>0)return void(this.visibleOptions=[]);-1===this.selectedIndex?(this.selectedIndex=this.values.length-1,this.visibleOptions=[]):(this.popValue(),this.selectedIndex=-1)}else this.selectedIndex=-1}getStaticOptions(){return this.staticOptions}handleInput(t){const e=t.currentTarget;this.input=e.value}handleCancel(){this.visibleOptions=[]}handleCursorChanged(t){this.cursorIndex=t.detail.index}handleContainerClick(t){if(t.stopPropagation(),t.preventDefault(),this.focused=!0,"INPUT"!==t.target.tagName){const t=this.shadowRoot.querySelector("input");if(t)return t.click(),void t.focus();this.visibleOptions.length>0?this.visibleOptions=[]:this.requestUpdate("input")}}getEventHandlers(){return[{event:$e.Canceled,method:this.handleCancel},{event:$e.CursorChanged,method:this.handleCursorChanged},{event:"blur",method:this.handleBlur},{event:"focus",method:this.handleFocus}]}handleArrowClick(t){this.isOpen()&&(t.preventDefault(),t.stopPropagation(),this.blur())}renderOptionDefault(t){if(!t)return null;const e=t.icon;return V`
|
|
915
915
|
<div class="option-name" style="display:flex">
|
|
916
916
|
${e?V`<temba-icon
|
|
917
917
|
name="${e}"
|
|
@@ -3486,10 +3486,6 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
3486
3486
|
align-items: center;
|
|
3487
3487
|
}
|
|
3488
3488
|
|
|
3489
|
-
.level-0 > temba-dropdown .icon-wrapper {
|
|
3490
|
-
padding: 0.2em 0.4em 0.2em 0em;
|
|
3491
|
-
}
|
|
3492
|
-
|
|
3493
3489
|
.level-0 > .item.selected::before,
|
|
3494
3490
|
.level-0 > .item.selected::after {
|
|
3495
3491
|
content: ' ';
|
|
@@ -3979,7 +3975,14 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
3979
3975
|
}
|
|
3980
3976
|
|
|
3981
3977
|
.level-0 .icon-wrapper {
|
|
3982
|
-
padding: 0.4em 0.
|
|
3978
|
+
padding: 0.4em 0.2em;
|
|
3979
|
+
}
|
|
3980
|
+
|
|
3981
|
+
.level-0 temba-dropdown div[slot='dropdown'] .icon-wrapper {
|
|
3982
|
+
padding: 0em !important;
|
|
3983
|
+
align-self: center;
|
|
3984
|
+
margin-right: 0.4em;
|
|
3985
|
+
margin-left: 0.4em;
|
|
3983
3986
|
}
|
|
3984
3987
|
|
|
3985
3988
|
temba-workspace-select {
|
|
@@ -4051,7 +4054,10 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
4051
4054
|
@mousedown=${()=>{t.level>0&&(this.pressedItem=t)}}
|
|
4052
4055
|
@mouseleave=${()=>{this.pressedItem=null}}
|
|
4053
4056
|
>
|
|
4054
|
-
${0===t.level?t.avatar?n:V`<temba-tip
|
|
4057
|
+
${0===t.level?t.avatar?n:V`<temba-tip
|
|
4058
|
+
position="right"
|
|
4059
|
+
style="display:flex;"
|
|
4060
|
+
text="${t.name}"
|
|
4055
4061
|
>${n}</temba-tip
|
|
4056
4062
|
>`:V`${n}${s}`}
|
|
4057
4063
|
|
|
@@ -4157,7 +4163,8 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
4157
4163
|
}
|
|
4158
4164
|
|
|
4159
4165
|
.dropdown.dormant {
|
|
4160
|
-
|
|
4166
|
+
height: 0;
|
|
4167
|
+
overflow: hidden;
|
|
4161
4168
|
}
|
|
4162
4169
|
|
|
4163
4170
|
.dropdown {
|
|
@@ -4182,7 +4189,6 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
4182
4189
|
content: '';
|
|
4183
4190
|
width: 0px;
|
|
4184
4191
|
height: 0;
|
|
4185
|
-
top: -6px;
|
|
4186
4192
|
z-index: 10;
|
|
4187
4193
|
position: absolute;
|
|
4188
4194
|
border-left: 6px solid transparent;
|
|
@@ -4192,7 +4198,6 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
4192
4198
|
|
|
4193
4199
|
.open .dropdown {
|
|
4194
4200
|
opacity: 1;
|
|
4195
|
-
pointer-events: auto;
|
|
4196
4201
|
transform: translateY(0.5em) scale(1);
|
|
4197
4202
|
}
|
|
4198
4203
|
|
|
@@ -4217,7 +4222,7 @@ let fr=Ys,vr=!1;const br=["es","fr","pt"],yr="data:image/png;base64,iVBORw0KGgoA
|
|
|
4217
4222
|
.right {
|
|
4218
4223
|
right: 0;
|
|
4219
4224
|
}
|
|
4220
|
-
`}constructor(){super(),this.open=!1,this.dormant=!0,this.arrowSize=8,this.margin=10,this.mask=!1,this.dropdownStyle={},this.arrowStyle={},this.calculatePosition=this.calculatePosition.bind(this)}firstUpdated(t){super.firstUpdated(t),this.resetBlurHandler()}resetBlurHandler(){const t=this.shadowRoot.querySelector(".dropdown");this.activeFocus&&this.activeFocus.removeEventListener("blur",this.blurHandler),this.activeFocus=t,this.blurHandler=this.handleBlur.bind(this),this.activeFocus.addEventListener("blur",this.blurHandler)}handleBlur(t){const e=t.relatedTarget;this.contains(e)?(e.addEventListener("blur",this.blurHandler),this.activeFocus=e):this.closeDropdown()}openDropdown(){this.open=!0,this.dormant=!1,this.resetBlurHandler();const t=this.shadowRoot.querySelector(".dropdown");t.focus(),t.click(),this.fireCustomEvent($e.Opened)}closeDropdown(){this.activeFocus.removeEventListener("blur",this.blurHandler),this.open=!1,this.resetBlurHandler(),window.setTimeout((()=>{this.dormant=!0}),250),this.blur()}updated(t){super.updated(t),t.has("open")&&(this.dropdownStyle={}),t.has("dropdownStyle")&&0===Object.keys(this.dropdownStyle).length&&this.calculatePosition()}calculatePosition(){const t=this.shadowRoot.querySelector(".dropdown"),e=this.querySelector('
|
|
4225
|
+
`}constructor(){super(),this.open=!1,this.dormant=!0,this.arrowSize=8,this.margin=10,this.mask=!1,this.dropdownStyle={},this.arrowStyle={},this.calculatePosition=this.calculatePosition.bind(this)}firstUpdated(t){super.firstUpdated(t),this.resetBlurHandler()}resetBlurHandler(){const t=this.shadowRoot.querySelector(".dropdown");this.activeFocus&&this.activeFocus.removeEventListener("blur",this.blurHandler),this.activeFocus=t,this.blurHandler=this.handleBlur.bind(this),this.activeFocus.addEventListener("blur",this.blurHandler)}handleBlur(t){const e=t.relatedTarget;this.contains(e)?(e.addEventListener("blur",this.blurHandler),this.activeFocus=e):this.closeDropdown()}openDropdown(){this.open=!0,this.dormant=!1,this.resetBlurHandler();const t=this.shadowRoot.querySelector(".dropdown");t.focus(),t.click(),this.fireCustomEvent($e.Opened)}closeDropdown(){this.activeFocus.removeEventListener("blur",this.blurHandler),this.open=!1,this.resetBlurHandler(),window.setTimeout((()=>{this.dormant=!0}),250),this.blur()}updated(t){super.updated(t),t.has("open")&&(this.dropdownStyle={}),t.has("dropdownStyle")&&0===Object.keys(this.dropdownStyle).length&&this.calculatePosition()}calculatePosition(){const t=this.shadowRoot.querySelector(".dropdown"),e=this.querySelector('*[slot="toggle"]'),i=this.shadowRoot.querySelector(".arrow");let o=!1,n=!1;if(t&&e){const s=t.getBoundingClientRect(),r=e.getBoundingClientRect(),a=i.getBoundingClientRect();if(!e)return;const l={border:"1px solid rgba(0,0,0,0.1)",marginTop:"0.5em"};s.right>window.innerWidth&&(l.left=r.right-s.width+"px",delete l.right,n=!0),s.bottom>window.innerHeight&&(l.top=r.top-s.height+"px",l["margin-top"]="-0.5em",o=!0);let h=r.width/2-a.width/2;h<=0&&(l.marginLeft="-10px",h=10);const c={left:h+"px",borderWidth:this.arrowSize+"px",top:"-"+this.arrowSize+"px"};o&&(c.transform="rotate(180deg)",c.top="auto",c.bottom="-"+this.arrowSize+"px"),n&&(c.right=r.width/2-a.width/2+"px",delete c.left),this.arrowStyle=c,this.dropdownStyle=l}this.requestUpdate()}handleToggleClicked(t){t.preventDefault(),t.stopPropagation(),!this.open&&this.dormant&&this.openDropdown()}render(){return V`
|
|
4221
4226
|
${this.mask?V`<div class="mask ${this.open?"open":""}" />`:null}
|
|
4222
4227
|
|
|
4223
4228
|
<div
|