@limetech/lime-elements 35.1.0-next.8 → 36.0.0-next.2

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.
Files changed (63) hide show
  1. package/dist/cjs/lime-elements.cjs.js +1 -1
  2. package/dist/cjs/limel-chip-set.cjs.entry.js +7 -2
  3. package/dist/cjs/limel-color-picker-palette_2.cjs.entry.js +1 -1
  4. package/dist/cjs/limel-color-picker.cjs.entry.js +1 -1
  5. package/dist/cjs/limel-date-picker.cjs.entry.js +6 -3
  6. package/dist/cjs/limel-form.cjs.entry.js +3 -0
  7. package/dist/cjs/limel-list_3.cjs.entry.js +39 -9
  8. package/dist/cjs/limel-menu.cjs.entry.js +2 -2
  9. package/dist/cjs/limel-picker.cjs.entry.js +1 -1
  10. package/dist/cjs/limel-progress-flow-item.cjs.entry.js +1 -1
  11. package/dist/cjs/limel-tooltip_2.cjs.entry.js +1 -1
  12. package/dist/cjs/loader.cjs.js +1 -1
  13. package/dist/collection/components/chip-set/chip-set.css +7 -0
  14. package/dist/collection/components/chip-set/chip-set.js +26 -1
  15. package/dist/collection/components/color-picker/color-picker.js +1 -1
  16. package/dist/collection/components/date-picker/date-picker.css +6 -1
  17. package/dist/collection/components/date-picker/date-picker.js +4 -4
  18. package/dist/collection/components/form/templates/common.js +3 -0
  19. package/dist/collection/components/list/list-renderer.js +2 -2
  20. package/dist/collection/components/menu/menu.js +6 -6
  21. package/dist/collection/components/picker/picker.js +1 -1
  22. package/dist/collection/components/popover/popover.js +23 -1
  23. package/dist/collection/components/portal/portal.js +39 -9
  24. package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css +1 -1
  25. package/dist/collection/components/progress-flow/progress-flow.css +2 -2
  26. package/dist/collection/components/tooltip/tooltip.js +1 -1
  27. package/dist/esm/lime-elements.js +1 -1
  28. package/dist/esm/limel-chip-set.entry.js +7 -2
  29. package/dist/esm/limel-color-picker-palette_2.entry.js +1 -1
  30. package/dist/esm/limel-color-picker.entry.js +1 -1
  31. package/dist/esm/limel-date-picker.entry.js +6 -3
  32. package/dist/esm/limel-form.entry.js +3 -0
  33. package/dist/esm/limel-list_3.entry.js +39 -9
  34. package/dist/esm/limel-menu.entry.js +2 -2
  35. package/dist/esm/limel-picker.entry.js +1 -1
  36. package/dist/esm/limel-progress-flow-item.entry.js +1 -1
  37. package/dist/esm/limel-tooltip_2.entry.js +1 -1
  38. package/dist/esm/loader.js +1 -1
  39. package/dist/lime-elements/lime-elements.esm.js +1 -1
  40. package/dist/lime-elements/p-08251941.entry.js +1 -0
  41. package/dist/lime-elements/{p-83ea517b.entry.js → p-1e59114e.entry.js} +1 -1
  42. package/dist/lime-elements/{p-2754e134.entry.js → p-22569fb6.entry.js} +1 -1
  43. package/dist/lime-elements/p-5ad60e14.entry.js +126 -0
  44. package/dist/lime-elements/p-64f068a8.entry.js +1 -0
  45. package/dist/lime-elements/p-75152d89.entry.js +1 -0
  46. package/dist/lime-elements/{p-6d50aa71.entry.js → p-7e571ec6.entry.js} +1 -1
  47. package/dist/lime-elements/p-87453b45.entry.js +1 -0
  48. package/dist/lime-elements/p-995bbd2a.entry.js +1 -0
  49. package/dist/lime-elements/p-f0e872b6.entry.js +16 -0
  50. package/dist/types/components/chip-set/chip-set.d.ts +7 -0
  51. package/dist/types/components/menu/menu.d.ts +2 -2
  52. package/dist/types/components/menu/menu.types.d.ts +1 -1
  53. package/dist/types/components/popover/popover.d.ts +5 -0
  54. package/dist/types/components/portal/portal.d.ts +2 -0
  55. package/dist/types/components.d.ts +18 -2
  56. package/package.json +1 -1
  57. package/dist/lime-elements/p-36ecbd03.entry.js +0 -1
  58. package/dist/lime-elements/p-4d5a874a.entry.js +0 -1
  59. package/dist/lime-elements/p-5908c21d.entry.js +0 -1
  60. package/dist/lime-elements/p-84f933f7.entry.js +0 -16
  61. package/dist/lime-elements/p-e80dd2ff.entry.js +0 -1
  62. package/dist/lime-elements/p-e83dddcd.entry.js +0 -126
  63. package/dist/lime-elements/p-eb13837f.entry.js +0 -1
@@ -0,0 +1 @@
1
+ import{r as t,h as e,g as i}from"./p-e9a95b8f.js";import{c as s}from"./p-6c094f3f.js";const l=class{constructor(e){t(this,e),this.maxlength=50,this.showTooltip=()=>{this.showTooltipTimeoutHandle=window.setTimeout((()=>{this.open=!0}),500)},this.hideTooltip=()=>{clearTimeout(this.showTooltipTimeoutHandle),this.open=!1},this.portalId=s(),this.tooltipId=s()}connectedCallback(){this.setOwnerAriaLabel(),this.addListeners()}disconnectedCallback(){this.removeListeners()}render(){const t=getComputedStyle(this.host).getPropertyValue("--tooltip-z-index");return e("div",{class:"trigger-anchor"},e("limel-portal",{openDirection:"bottom-start",visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t,"pointer-events":"none"}},e("limel-tooltip-content",{label:this.label,helperLabel:this.helperLabel,maxlength:this.maxlength,role:"tooltip","aria-hidden":!this.open,id:this.tooltipId})))}setOwnerAriaLabel(){const t=this.getOwnerElement();null==t||t.setAttribute("aria-describedby",this.tooltipId)}addListeners(){const t=this.getOwnerElement();null==t||t.addEventListener("mouseover",this.showTooltip),null==t||t.addEventListener("mouseout",this.hideTooltip),null==t||t.addEventListener("click",this.hideTooltip)}removeListeners(){const t=this.getOwnerElement();null==t||t.removeEventListener("mouseover",this.showTooltip),null==t||t.removeEventListener("mouseout",this.hideTooltip),null==t||t.removeEventListener("click",this.hideTooltip)}getOwnerElement(){var t;let e=this.host;do{e=e.parentNode}while(e&&e.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&e.nodeType!==Node.DOCUMENT_NODE);return null===(t=e)||void 0===t?void 0:t.getElementById(this.elementId)}get host(){return i(this)}};l.style=".trigger-anchor{position:relative}";const o=class{constructor(e){t(this,e)}render(){let t=!1;this.helperLabel&&this.maxlength&&(t=this.label.length+this.helperLabel.length>this.maxlength);const i={};return this.maxlength&&(i.style={"--tooltip-max-width-of-text":`${this.maxlength}ch`}),[e("text",Object.assign({class:{"has-column-layout":t}},i),e("div",{class:"label"},this.label),e("div",{class:"helper-label"},this.helperLabel))]}};o.style=":host{animation:display-tooltip 0.2s ease;display:flex;border-radius:0.25rem;padding:0.25rem 0.5rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}text{font-size:0.875rem;line-height:1.25;display:flex;column-gap:1rem}text.has-column-layout{display:table-cell;width:fit-content;max-width:min(var(--tooltip-max-width-of-text), 80vw)}text.has-column-layout .label{padding-bottom:0.5rem}text.has-column-layout .helper-label{padding-bottom:0.25rem}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800))}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";export{l as limel_tooltip,o as limel_tooltip_content}
@@ -0,0 +1 @@
1
+ import{r as e,c as r,h as o}from"./p-e9a95b8f.js";const t=class{constructor(t){e(this,t),this.change=r(this,"change",7),this.isOpen=!1,this.renderTooltip=()=>{if(!this.readonly&&this.tooltipLabel)return o("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-button"})},this.renderPickerPalette=()=>this.readonly?this.renderPickerTrigger():o("limel-popover",{open:this.isOpen,openDirection:"bottom-start",onClose:this.onPopoverClose},this.renderPickerTrigger(),o("limel-color-picker-palette",{value:this.value,label:this.label,helperText:this.helperText,onChange:this.handleChange,required:this.required})),this.renderPickerTrigger=()=>o("div",{class:"picker-trigger",slot:"trigger",style:this.value?{"--background":this.value}:{},role:"button",tabindex:"0",onClick:this.openPopover,id:"tooltip-button"}),this.openPopover=e=>{e.stopPropagation(),this.isOpen=!0},this.onPopoverClose=e=>{e.stopPropagation(),this.isOpen=!1},this.handleChange=e=>{e.stopPropagation(),this.change.emit(e.detail)}}render(){return[this.renderTooltip(),o("div",{class:"color-picker"},this.renderPickerPalette(),o("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,readonly:this.readonly,class:"chosen-color-input"}))]}};t.style='.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host{--popover-surface-width:50rem;--color-picker-default-background:url("data:image/svg+xml;charset=utf-8, <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\' style=\'fill-rule:evenodd;\'><path fill-opacity=\'0.1\' d=\'M0 0h4v4H0zM4 4h4v4H4z\'/></svg>")}.color-picker{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:3.5rem;height:3.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}.picker-trigger{border-radius:0.5rem;cursor:pointer;transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateY(1rem)}';export{t as limel_color_picker}
@@ -0,0 +1,16 @@
1
+ import{r as t,c as i,h as s,g as e}from"./p-e9a95b8f.js";import{i as n}from"./p-0534b23b.js";import{T as h,b as r,E as o,c as a,d as l,a as c,A as u,e as d,f as p,g as m}from"./p-216ffe20.js";import{c as f}from"./p-6c094f3f.js";function v(t){return"function"==typeof t?t():t}function y(){var t={};return t.promise=new Promise((function(i,s){t.resolve=i,t.reject=s})),t}function g(t){var i=null,s=null,e=new Promise((function(t,e){i=t,s=e}));return t&&t.then((function(t){i&&i(t)}),(function(t){s&&s(t)})),{promise:e,resolve:function(t){i&&i(t)},reject:function(t){s&&s(t)},cancel:function(){i=null,s=null}}}
2
+ /*! *****************************************************************************
3
+ Copyright (c) Microsoft Corporation. All rights reserved.
4
+ Licensed under the Apache License, Version 2.0 (the "License"); you may not use
5
+ this file except in compliance with the License. You may obtain a copy of the
6
+ License at http://www.apache.org/licenses/LICENSE-2.0
7
+
8
+ THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
9
+ KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
10
+ WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
11
+ MERCHANTABLITY OR NON-INFRINGEMENT.
12
+
13
+ See the Apache Version 2.0 License for specific language governing permissions
14
+ and limitations under the License.
15
+ ***************************************************************************** */
16
+ var b=function(){return(b=Object.assign||function(t){for(var i,s=1,e=arguments.length;s<e;s++)for(var n in i=arguments[s])Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n]);return t}).apply(this,arguments)},w={key:function(){for(var t=[],i=0;i<arguments.length;i++)t[i]=arguments[i];return null},onlyResolvesLast:!0},C=function(){function t(t){this.config=t,this.debounceSingleton=null,this.debounceCache={}}return t.prototype._createDebouncedFunction=function(){var t,i,s=function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},e=void 0,n=void 0,h=void 0,r=[];return function(){var a=v(i),l=(new Date).getTime(),c=!e||l-e>a;e=l;for(var u=arguments.length,d=Array(u),p=0;p<u;p++)d[p]=arguments[p];if(c&&s.leading)return s.accumulate?Promise.resolve(t.call(this,[d])).then((function(t){return t[0]})):Promise.resolve(t.call.apply(t,[this].concat(d)));if(n?clearTimeout(h):n=y(),r.push(d),h=setTimeout(o.bind(this),a),s.accumulate){var m=r.length-1;return n.promise.then((function(t){return t[m]}))}return n.promise};function o(){var i=n;clearTimeout(h),Promise.resolve(s.accumulate?t.call(this,r):t.apply(this,r[r.length-1])).then(i.resolve,i.reject),r=[],n=null}}(this.config.func,this.config.wait,this.config.options);return this.config.options.onlyResolvesLast&&(t=s,i=null,s=function(){for(var s=[],e=0;e<arguments.length;e++)s[e]=arguments[e];i&&i();var n=g(t.apply(void 0,s));return i=n.cancel,n.promise}),{func:s}},t.prototype.getDebouncedFunction=function(t){var i,s=(i=this.config.options).key.apply(i,t);return null==s?(this.debounceSingleton||(this.debounceSingleton=this._createDebouncedFunction()),this.debounceSingleton):(this.debounceCache[s]||(this.debounceCache[s]=this._createDebouncedFunction()),this.debounceCache[s])},t}();const D=class{constructor(s){t(this,s),this.change=i(this,"change",7),this.interact=i(this,"interact",7),this.action=i(this,"action",7),this.disabled=!1,this.readonly=!1,this.required=!1,this.multiple=!1,this.delimiter=null,this.actions=[],this.actionPosition="bottom",this.actionScrollBehavior="sticky",this.badgeIcons=!0,this.textValue="",this.loading=!1,this.chips=[],this.chipSetEditMode=!1,this.handleTextInput=this.handleTextInput.bind(this),this.handleInputKeyDown=this.handleInputKeyDown.bind(this),this.handleDropdownKeyDown=this.handleDropdownKeyDown.bind(this),this.handleInputFieldFocus=this.handleInputFieldFocus.bind(this),this.handleChange=this.handleChange.bind(this),this.handleInteract=this.handleInteract.bind(this),this.handleListChange=this.handleListChange.bind(this),this.handleActionListChange=this.handleActionListChange.bind(this),this.handleStopEditAndBlur=this.handleStopEditAndBlur.bind(this),this.createDebouncedSearcher=this.createDebouncedSearcher.bind(this),this.handleCloseMenu=this.handleCloseMenu.bind(this),this.onListKeyDown=this.onListKeyDown.bind(this),this.portalId=f()}componentWillLoad(){this.chips=this.createChips(this.value)}componentDidLoad(){this.createDebouncedSearcher(this.searcher),this.chipSet=this.host.shadowRoot.querySelector("limel-chip-set")}async componentWillUpdate(){this.chipSetEditMode=!1,this.chipSet&&(this.chipSetEditMode=await this.chipSet.getEditMode())}render(){this.chips.forEach((t=>{"iconBackgroundColor"in t&&t.iconBackgroundColor&&(t.iconFillColor="rgb(var(--color-white))")}));const t={};return this.multiple||(t.maxItems=1),[s("limel-chip-set",Object.assign({type:"input",inputType:"search",label:this.label,helperText:this.helperText,leadingIcon:this.leadingIcon,value:this.chips,disabled:this.disabled,delimiter:this.renderDelimiter(),readonly:this.readonly,required:this.required,searchLabel:this.searchLabel,onInput:this.handleTextInput,onKeyDown:this.handleInputKeyDown,onChange:this.handleChange,onInteract:this.handleInteract,onStartEdit:this.handleInputFieldFocus,onStopEdit:this.handleStopEditAndBlur,emptyInputOnBlur:!1,clearAllButton:this.multiple},t)),this.renderDropdown()]}onChangeValue(){this.chips=this.createChips(this.value)}createDebouncedSearcher(t){var i,s,e;"function"==typeof t&&(this.debouncedSearch=(i=t,500,s=b({},w,undefined),e=new C({func:i,wait:500,options:s}),function(){for(var t=[],i=0;i<arguments.length;i++)t[i]=arguments[i];return e.getDebouncedFunction(t).func.apply(void 0,t)}))}renderDelimiter(){return this.multiple?this.delimiter:null}createChips(t){return t?this.multiple?t.map(this.createChip):[this.createChip(t)]:[]}createChip(t){return{id:`${t.value}`,text:t.text,removable:!0,icon:t.icon,iconBackgroundColor:t.iconColor,value:t}}renderDropdown(){const t=this.getDropdownContent(),i=[];if(this.shouldShowDropDownContent()){const s=this.getActionContent();"top"===this.actionPosition&&i.push(s),t&&i.push(t),"bottom"===this.actionPosition&&i.push(s)}return this.renderPortal(i)}getActionContent(){var t,i;return 0===(null!==(i=null===(t=this.actions)||void 0===t?void 0:t.length)&&void 0!==i?i:0)?null:[s("limel-list",{class:{"static-actions-list":!0,"is-on-top":"top"===this.actionPosition,"is-at-bottom":"bottom"===this.actionPosition,"has-position-sticky":"sticky"===this.actionScrollBehavior},badgeIcons:!0,type:"selectable",onChange:this.handleActionListChange,items:this.actions.map(this.removeUnusedPropertiesOnAction)})]}removeUnusedPropertiesOnAction(t){return Object.assign(Object.assign({},t),{actions:[]})}shouldShowDropDownContent(){return!this.isFull()&&!!this.chipSetEditMode}getDropdownContent(){if(this.shouldShowDropDownContent())return this.loading?this.renderSpinner():this.items&&this.items.length?this.renderListResult():this.renderEmptyMessage()}isFull(){return!this.multiple&&!!this.value}renderSpinner(){return s("div",{style:{width:"100%",display:"flex","align-items":"center","justify-content":"center",padding:"1rem 0"}},s("limel-spinner",{limeBranded:!1}))}renderEmptyMessage(){if(this.emptyResultMessage)return s("p",{style:{color:"rgb(var(--contrast-1100))","text-align":"center",margin:"0.5rem 1rem"}},this.emptyResultMessage)}renderListResult(){const t=this.items.some((t=>"icon"in t&&!!t.icon));return s("limel-list",{badgeIcons:t&&this.badgeIcons,onChange:this.handleListChange,onKeyDown:this.onListKeyDown,type:"selectable",items:this.items})}onListKeyDown(t){const i=[h,r,o].includes(t.key),s=[a,l,c].includes(t.keyCode);(i||s)&&this.chipSet.setFocus()}renderPortal(t=[]){const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("limel-portal",{visible:t.length>0,containerId:this.portalId,inheritParentWidth:!0,containerStyle:{"z-index":i}},s("limel-menu-surface",{open:t.length>0,allowClicksElement:this.host,style:{"--mdc-menu-min-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},t))}handleStopEditAndBlur(){const t=this.host.shadowRoot.activeElement||document.activeElement,i=document.querySelector(`#${this.portalId}`);n(t,this.host)||n(t,i)||this.clearInputField()}async handleTextInput(t){t.stopPropagation();const i=t.detail;this.textValue=i,this.loading=!0;const s=""===i?this.searcher:this.debouncedSearch,e=await s(i);this.handleSearchResult(i,e)}handleListChange(t){var i;if(t.stopPropagation(),!this.value||this.value!==t.detail){let i=t.detail;this.multiple&&(i=[...this.value,t.detail]),this.change.emit(i),this.items=[]}this.multiple&&(null===(i=this.chipSet)||void 0===i||i.setFocus(!0))}handleActionListChange(t){t.stopPropagation(),t.detail&&(this.action.emit(t.detail.value),this.items=[])}async handleInputFieldFocus(){this.loading=!0;const t=this.textValue,i=await this.searcher(t);this.handleSearchResult(t,i)}handleChange(t){t.stopPropagation();let i=null;this.multiple&&(i=t.detail.map((t=>this.value.find((i=>`${i.value}`===t.id))))),this.change.emit(i)}handleInteract(t){t.stopPropagation(),this.interact.emit(t.detail?t.detail.value:t.detail)}handleInputKeyDown(t){const i=!(t.key!==h&&t.keyCode!==a||t.altKey||t.metaKey||t.shiftKey),s=t.key===u||t.keyCode===d,e=t.key===p||t.keyCode===m;if(!i&&!s&&!e)return;const n=document.querySelector(` #${this.portalId} limel-list`);n&&(t.preventDefault(),i||e?n.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child").focus():s&&n.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child").focus())}handleDropdownKeyDown(t){(t.key===r||t.keyCode===l)&&(t.preventDefault(),this.textValue="",this.chipSet.setFocus(!0))}handleSearchResult(t,i){if(t===this.textValue){if(this.items=i,this.multiple){const t=this.value;this.items=i.filter((i=>!t.includes(i)))}this.loading=!1}}handleCloseMenu(){this.clearInputField()}clearInputField(){this.chipSet.emptyInput(),this.textValue="",this.handleSearchResult("",[])}get host(){return e(this)}static get watchers(){return{value:["onChangeValue"],searcher:["createDebouncedSearcher"]}}};D.style=":host{position:relative;display:block}:host([hidden]){display:none}";export{D as limel_picker}
@@ -5,6 +5,8 @@ import { Chip, Languages } from '@limetech/lime-elements';
5
5
  * @exampleComponent limel-example-chip-set-filter
6
6
  * @exampleComponent limel-example-chip-set-filter-badge
7
7
  * @exampleComponent limel-example-chip-set-input
8
+ * @exampleComponent limel-example-chip-set-input-type-text
9
+ * @exampleComponent limel-example-chip-set-input-type-search
8
10
  * @exampleComponent limel-example-chip-icon-color
9
11
  * @exampleComponent limel-example-chip-set-composite
10
12
  */
@@ -47,6 +49,11 @@ export declare class ChipSet {
47
49
  * the chip-set.
48
50
  */
49
51
  readonly: boolean;
52
+ /**
53
+ * For chip-sets of type `input`. Value to use for the `type` attribute on the
54
+ * input field inside the chip-set.
55
+ */
56
+ inputType: 'search' | 'text';
50
57
  /**
51
58
  * For chip-sets of type `input`. Limits the maximum number of chips.
52
59
  * When the value is `0` or not set, no limit is applied.
@@ -3,7 +3,7 @@ import { ListSeparator, MenuItem, OpenDirection } from '@limetech/lime-elements'
3
3
  * @slot trigger - Element to use as a trigger for the menu.
4
4
  * @exampleComponent limel-example-menu-basic
5
5
  * @exampleComponent limel-example-menu-disabled
6
- * @exampleComponent limel-example-menu-open-left
6
+ * @exampleComponent limel-example-menu-open-direction
7
7
  * @exampleComponent limel-example-menu-icons
8
8
  * @exampleComponent limel-example-menu-badge-icons
9
9
  * @exampleComponent limel-example-menu-grid
@@ -21,7 +21,7 @@ export declare class Menu {
21
21
  */
22
22
  disabled: boolean;
23
23
  /**
24
- * Decides if the menu should open right or left.
24
+ * Decides the menu's location in relation to its trigger
25
25
  */
26
26
  openDirection: OpenDirection;
27
27
  /**
@@ -1,4 +1,4 @@
1
- export declare type OpenDirection = 'left' | 'right';
1
+ export declare type OpenDirection = 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end';
2
2
  export interface MenuItem<T = any> {
3
3
  /**
4
4
  * The additional supporting text is used for shortcut commands and displayed in the menu item.
@@ -1,3 +1,4 @@
1
+ import { OpenDirection } from '../menu/menu.types';
1
2
  /**
2
3
  * A popover is an impermanent layer that is displayed on top of other content
3
4
  * when user taps an element that triggers the popover. This element can be
@@ -54,6 +55,10 @@ export declare class Popover {
54
55
  * True if the content within the popover should be visible
55
56
  */
56
57
  open: boolean;
58
+ /**
59
+ * Decides the popover's location in relation to its trigger
60
+ */
61
+ openDirection: OpenDirection;
57
62
  /**
58
63
  * Emits an event when the component is closing
59
64
  */
@@ -79,5 +79,7 @@ export declare class Portal {
79
79
  private createPopper;
80
80
  private destroyPopper;
81
81
  private createPopperConfig;
82
+ private getPlacement;
83
+ private getFlipPlacement;
82
84
  private ensureContainerFitsInViewPort;
83
85
  }
@@ -140,6 +140,10 @@ export namespace Components {
140
140
  * Optional helper text to display below the chipset. When type is `input`, the helper text is displayed below the input field when it has focus. When type is not `input`, the helper text is always displayed if the device is touch screen; otherwise it is shown when chip-set is hovered or focused using keyboard navigation.
141
141
  */
142
142
  "helperText": string;
143
+ /**
144
+ * For chip-sets of type `input`. Value to use for the `type` attribute on the input field inside the chip-set.
145
+ */
146
+ "inputType": 'search' | 'text';
143
147
  /**
144
148
  * Label for the chip-set
145
149
  */
@@ -650,7 +654,7 @@ export namespace Components {
650
654
  */
651
655
  "open": boolean;
652
656
  /**
653
- * Decides if the menu should open right or left.
657
+ * Decides the menu's location in relation to its trigger
654
658
  */
655
659
  "openDirection": OpenDirection;
656
660
  }
@@ -757,6 +761,10 @@ export namespace Components {
757
761
  * True if the content within the popover should be visible
758
762
  */
759
763
  "open": boolean;
764
+ /**
765
+ * Decides the popover's location in relation to its trigger
766
+ */
767
+ "openDirection": OpenDirection;
760
768
  }
761
769
  interface LimelPopoverSurface {
762
770
  /**
@@ -1487,6 +1495,10 @@ declare namespace LocalJSX {
1487
1495
  * Optional helper text to display below the chipset. When type is `input`, the helper text is displayed below the input field when it has focus. When type is not `input`, the helper text is always displayed if the device is touch screen; otherwise it is shown when chip-set is hovered or focused using keyboard navigation.
1488
1496
  */
1489
1497
  "helperText"?: string;
1498
+ /**
1499
+ * For chip-sets of type `input`. Value to use for the `type` attribute on the input field inside the chip-set.
1500
+ */
1501
+ "inputType"?: 'search' | 'text';
1490
1502
  /**
1491
1503
  * Label for the chip-set
1492
1504
  */
@@ -2087,7 +2099,7 @@ declare namespace LocalJSX {
2087
2099
  */
2088
2100
  "open"?: boolean;
2089
2101
  /**
2090
- * Decides if the menu should open right or left.
2102
+ * Decides the menu's location in relation to its trigger
2091
2103
  */
2092
2104
  "openDirection"?: OpenDirection;
2093
2105
  }
@@ -2222,6 +2234,10 @@ declare namespace LocalJSX {
2222
2234
  * True if the content within the popover should be visible
2223
2235
  */
2224
2236
  "open"?: boolean;
2237
+ /**
2238
+ * Decides the popover's location in relation to its trigger
2239
+ */
2240
+ "openDirection"?: OpenDirection;
2225
2241
  }
2226
2242
  interface LimelPopoverSurface {
2227
2243
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@limetech/lime-elements",
3
- "version": "35.1.0-next.8",
3
+ "version": "36.0.0-next.2",
4
4
  "description": "Lime Elements",
5
5
  "author": "Lime Technologies",
6
6
  "license": "Apache-2.0",
@@ -1 +0,0 @@
1
- import{r as t,h as e,g as s}from"./p-e9a95b8f.js";import{c as i}from"./p-6c094f3f.js";const l=class{constructor(e){t(this,e),this.maxlength=50,this.showTooltip=()=>{this.showTooltipTimeoutHandle=window.setTimeout((()=>{this.open=!0}),500)},this.hideTooltip=()=>{clearTimeout(this.showTooltipTimeoutHandle),this.open=!1},this.portalId=i(),this.tooltipId=i()}connectedCallback(){this.setOwnerAriaLabel(),this.addListeners()}disconnectedCallback(){this.removeListeners()}render(){const t=getComputedStyle(this.host).getPropertyValue("--tooltip-z-index");return e("div",{class:"trigger-anchor"},e("limel-portal",{visible:this.open,containerId:this.portalId,containerStyle:{"z-index":t,"pointer-events":"none"}},e("limel-tooltip-content",{label:this.label,helperLabel:this.helperLabel,maxlength:this.maxlength,role:"tooltip","aria-hidden":!this.open,id:this.tooltipId})))}setOwnerAriaLabel(){const t=this.getOwnerElement();null==t||t.setAttribute("aria-describedby",this.tooltipId)}addListeners(){const t=this.getOwnerElement();null==t||t.addEventListener("mouseover",this.showTooltip),null==t||t.addEventListener("mouseout",this.hideTooltip),null==t||t.addEventListener("click",this.hideTooltip)}removeListeners(){const t=this.getOwnerElement();null==t||t.removeEventListener("mouseover",this.showTooltip),null==t||t.removeEventListener("mouseout",this.hideTooltip),null==t||t.removeEventListener("click",this.hideTooltip)}getOwnerElement(){var t;let e=this.host;do{e=e.parentNode}while(e&&e.nodeType!==Node.DOCUMENT_FRAGMENT_NODE&&e.nodeType!==Node.DOCUMENT_NODE);return null===(t=e)||void 0===t?void 0:t.getElementById(this.elementId)}get host(){return s(this)}};l.style=".trigger-anchor{position:relative}";const o=class{constructor(e){t(this,e)}render(){let t=!1;this.helperLabel&&this.maxlength&&(t=this.label.length+this.helperLabel.length>this.maxlength);const s={};return this.maxlength&&(s.style={"--tooltip-max-width-of-text":`${this.maxlength}ch`}),[e("text",Object.assign({class:{"has-column-layout":t}},s),e("div",{class:"label"},this.label),e("div",{class:"helper-label"},this.helperLabel))]}};o.style=":host{animation:display-tooltip 0.2s ease;display:flex;border-radius:0.25rem;padding:0.25rem 0.5rem;background-color:rgb(var(--contrast-1300));box-shadow:var(--shadow-depth-16)}text{font-size:0.875rem;line-height:1.25;display:flex;column-gap:1rem}text.has-column-layout{display:table-cell;width:fit-content;max-width:min(var(--tooltip-max-width-of-text), 80vw)}text.has-column-layout .label{padding-bottom:0.5rem}text.has-column-layout .helper-label{padding-bottom:0.25rem}.label{color:rgb(var(--contrast-200))}.helper-label{color:rgb(var(--contrast-800))}.helper-label:empty{display:none}@keyframes display-tooltip{0%{opacity:0;transform:translate3d(0, 0, 0) scale(0.94)}100%{opacity:1;transform:translate3d(0, 0, 0) scale(1)}}";export{l as limel_tooltip,o as limel_tooltip_content}
@@ -1 +0,0 @@
1
- import{r as t,c as i,h as s,g as e}from"./p-e9a95b8f.js";import{c as h}from"./p-6c094f3f.js";import{i as a,a as n}from"./p-cc9ebbef.js";import{D as o}from"./p-d76f896d.js";import{M as r}from"./p-1c284626.js";import"./p-eab67c09.js";import"./p-3af5f9ad.js";import"./p-48d4ef20.js";import"./p-cbc43682.js";import"./p-dcc97cc2.js";import"./p-d0a7de87.js";const l={date:"date",time:"time",week:a()?"date":"week",month:"month",quarter:"date",year:"date",datetime:"datetime-local",default:"datetime-local"},d={date:"Y-MM-DD",time:"HH:mm",week:"GGGG-[W]WW",month:"Y-MM","datetime-local":"Y-MM-DD[T]HH:mm"},c=class{constructor(s){t(this,s),this.change=i(this,"change",7),this.disabled=!1,this.readonly=!1,this.invalid=!1,this.required=!1,this.type="datetime",this.language="en",this.showPortal=!1,this.portalId=`date-picker-calendar-${h()}`,this.documentClickListener=t=>{"keydown"===t.type&&"Tab"!==t.key||document.querySelector(`#${this.portalId}`).contains(t.target)||this.hideCalendar()},this.handleCalendarChange=this.handleCalendarChange.bind(this),this.handleInputElementChange=this.handleInputElementChange.bind(this),this.showCalendar=this.showCalendar.bind(this),this.dateFormatter=new o(this.language),this.clearValue=this.clearValue.bind(this),this.hideCalendar=this.hideCalendar.bind(this),this.onInputClick=this.onInputClick.bind(this),this.nativeChangeHandler=this.nativeChangeHandler.bind(this),this.preventBlurFromCalendarContainer=this.preventBlurFromCalendarContainer.bind(this)}componentWillLoad(){this.useNative=!this.readonly&&(a()||n()),this.updateInternalFormatAndType(),this.formattedValue=this.dateFormatter.formatDate(this.value,this.internalFormat)}componentWillUpdate(){this.updateInternalFormatAndType()}render(){const t={onAction:this.clearValue};if(this.value&&!this.readonly&&(t.trailingIcon="clear_symbol"),this.useNative)return s("div",{class:"container"},s("limel-input-field",{disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,helperText:this.helperText,required:this.required,value:this.formattedValue,type:this.nativeType,onChange:this.nativeChangeHandler}));const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("div",{class:"container"},s("limel-input-field",Object.assign({disabled:this.disabled,readonly:this.readonly,invalid:this.invalid,label:this.label,helperText:this.helperText,required:this.required,value:this.formattedValue,onFocus:this.showCalendar,onBlur:this.hideCalendar,onClick:this.onInputClick,onChange:this.handleInputElementChange,ref:t=>this.textField=t},t)),s("limel-portal",{containerId:this.portalId,visible:this.showPortal,containerStyle:{"z-index":i}},s("limel-flatpickr-adapter",{format:this.internalFormat,language:this.language,type:this.type,value:this.value,ref:t=>this.datePickerCalendar=t,isOpen:this.showPortal,onChange:this.handleCalendarChange})))}onValueChange(t,i){t!==i&&t!==this.formattedValue&&(this.formattedValue=this.dateFormatter.formatDate(this.value,this.internalFormat))}updateInternalFormatAndType(){this.nativeType=l[this.type||"default"],this.nativeFormat=d[this.nativeType],this.internalFormat=this.useNative?this.nativeFormat:this.format?this.format:this.dateFormatter.getDateFormat(this.type)}nativeChangeHandler(t){t.stopPropagation();const i=this.dateFormatter.parseDate(t.detail,this.internalFormat);this.formattedValue=t.detail,this.change.emit(i)}showCalendar(t){this.showPortal=!0;const i=this.textField.shadowRoot.querySelector("input");setTimeout((()=>{this.datePickerCalendar.inputElement=i})),t.stopPropagation(),document.addEventListener("mousedown",this.documentClickListener,{passive:!0}),document.addEventListener("keydown",this.documentClickListener,{passive:!0}),document.addEventListener("blur",this.preventBlurFromCalendarContainer,{capture:!0})}preventBlurFromCalendarContainer(t){t.relatedTarget===this.datePickerCalendar&&t.stopPropagation()}hideCalendar(){setTimeout((()=>{this.showPortal=!1})),document.removeEventListener("mousedown",this.documentClickListener),document.removeEventListener("keydown",this.documentClickListener),document.removeEventListener("blur",this.preventBlurFromCalendarContainer),this.pickerIsAutoClosing()||this.fixFlatpickrFocusBug()}fixFlatpickrFocusBug(){new r(this.textField.shadowRoot.querySelector(".mdc-text-field")).getDefaultFoundation().deactivateFocus()}handleCalendarChange(t){const i=t.detail;this.formattedValue=this.dateFormatter.formatDate(i,this.internalFormat),t.stopPropagation(),this.pickerIsAutoClosing()&&this.hideCalendar(),this.change.emit(i)}onInputClick(t){this.disabled||this.readonly||this.showPortal||this.showCalendar(t)}handleInputElementChange(t){""===t.detail&&this.clearValue(),t.stopPropagation()}pickerIsAutoClosing(){return"datetime"!==this.type&&"time"!==this.type}clearValue(){this.formattedValue="",this.change.emit(null)}get host(){return e(this)}static get watchers(){return{value:["onValueChange"]}}};c.style="div.container{position:relative}";export{c as limel_date_picker}
@@ -1 +0,0 @@
1
- import{r as e,c as r,h as o}from"./p-e9a95b8f.js";const t=class{constructor(t){e(this,t),this.change=r(this,"change",7),this.isOpen=!1,this.renderTooltip=()=>{if(!this.readonly&&this.tooltipLabel)return o("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-button"})},this.renderPickerPalette=()=>this.readonly?this.renderPickerTrigger():o("limel-popover",{open:this.isOpen,onClose:this.onPopoverClose},this.renderPickerTrigger(),o("limel-color-picker-palette",{value:this.value,label:this.label,helperText:this.helperText,onChange:this.handleChange,required:this.required})),this.renderPickerTrigger=()=>o("div",{class:"picker-trigger",slot:"trigger",style:this.value?{"--background":this.value}:{},role:"button",tabindex:"0",onClick:this.openPopover,id:"tooltip-button"}),this.openPopover=e=>{e.stopPropagation(),this.isOpen=!0},this.onPopoverClose=e=>{e.stopPropagation(),this.isOpen=!1},this.handleChange=e=>{e.stopPropagation(),this.change.emit(e.detail)}}render(){return[this.renderTooltip(),o("div",{class:"color-picker"},this.renderPickerPalette(),o("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,readonly:this.readonly,class:"chosen-color-input"}))]}};t.style='.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host{--popover-surface-width:50rem;--color-picker-default-background:url("data:image/svg+xml;charset=utf-8, <svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 8 8\' style=\'fill-rule:evenodd;\'><path fill-opacity=\'0.1\' d=\'M0 0h4v4H0zM4 4h4v4H4z\'/></svg>")}.color-picker{display:grid;gap:0.5rem;grid-template-columns:auto 1fr}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:3.5rem;height:3.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background:var(--color-picker-default-background);background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}.picker-trigger{border-radius:0.5rem;cursor:pointer;transition:background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;box-shadow:var(--button-shadow-normal)}.picker-trigger:hover{box-shadow:var(--button-shadow-hovered)}.picker-trigger:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateY(1rem)}';export{t as limel_color_picker}
@@ -1,16 +0,0 @@
1
- import{r as t,c as i,h as s,g as n}from"./p-e9a95b8f.js";import{i as e}from"./p-0534b23b.js";import{T as h,b as r,E as o,c as l,d as a,a as c,A as u,e as d,f as m,g as f}from"./p-216ffe20.js";import{c as p}from"./p-6c094f3f.js";function v(t){return"function"==typeof t?t():t}function y(){var t={};return t.promise=new Promise((function(i,s){t.resolve=i,t.reject=s})),t}function g(t){var i=null,s=null,n=new Promise((function(t,n){i=t,s=n}));return t&&t.then((function(t){i&&i(t)}),(function(t){s&&s(t)})),{promise:n,resolve:function(t){i&&i(t)},reject:function(t){s&&s(t)},cancel:function(){i=null,s=null}}}
2
- /*! *****************************************************************************
3
- Copyright (c) Microsoft Corporation. All rights reserved.
4
- Licensed under the Apache License, Version 2.0 (the "License"); you may not use
5
- this file except in compliance with the License. You may obtain a copy of the
6
- License at http://www.apache.org/licenses/LICENSE-2.0
7
-
8
- THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
9
- KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
10
- WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
11
- MERCHANTABLITY OR NON-INFRINGEMENT.
12
-
13
- See the Apache Version 2.0 License for specific language governing permissions
14
- and limitations under the License.
15
- ***************************************************************************** */
16
- var b=function(){return(b=Object.assign||function(t){for(var i,s=1,n=arguments.length;s<n;s++)for(var e in i=arguments[s])Object.prototype.hasOwnProperty.call(i,e)&&(t[e]=i[e]);return t}).apply(this,arguments)},w={key:function(){for(var t=[],i=0;i<arguments.length;i++)t[i]=arguments[i];return null},onlyResolvesLast:!0},C=function(){function t(t){this.config=t,this.debounceSingleton=null,this.debounceCache={}}return t.prototype._createDebouncedFunction=function(){var t,i,s=function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},n=void 0,e=void 0,h=void 0,r=[];return function(){var l=v(i),a=(new Date).getTime(),c=!n||a-n>l;n=a;for(var u=arguments.length,d=Array(u),m=0;m<u;m++)d[m]=arguments[m];if(c&&s.leading)return s.accumulate?Promise.resolve(t.call(this,[d])).then((function(t){return t[0]})):Promise.resolve(t.call.apply(t,[this].concat(d)));if(e?clearTimeout(h):e=y(),r.push(d),h=setTimeout(o.bind(this),l),s.accumulate){var f=r.length-1;return e.promise.then((function(t){return t[f]}))}return e.promise};function o(){var i=e;clearTimeout(h),Promise.resolve(s.accumulate?t.call(this,r):t.apply(this,r[r.length-1])).then(i.resolve,i.reject),r=[],e=null}}(this.config.func,this.config.wait,this.config.options);return this.config.options.onlyResolvesLast&&(t=s,i=null,s=function(){for(var s=[],n=0;n<arguments.length;n++)s[n]=arguments[n];i&&i();var e=g(t.apply(void 0,s));return i=e.cancel,e.promise}),{func:s}},t.prototype.getDebouncedFunction=function(t){var i,s=(i=this.config.options).key.apply(i,t);return null==s?(this.debounceSingleton||(this.debounceSingleton=this._createDebouncedFunction()),this.debounceSingleton):(this.debounceCache[s]||(this.debounceCache[s]=this._createDebouncedFunction()),this.debounceCache[s])},t}();const D=class{constructor(s){t(this,s),this.change=i(this,"change",7),this.interact=i(this,"interact",7),this.action=i(this,"action",7),this.disabled=!1,this.readonly=!1,this.required=!1,this.multiple=!1,this.delimiter=null,this.actions=[],this.actionPosition="bottom",this.actionScrollBehavior="sticky",this.badgeIcons=!0,this.textValue="",this.loading=!1,this.chips=[],this.chipSetEditMode=!1,this.handleTextInput=this.handleTextInput.bind(this),this.handleInputKeyDown=this.handleInputKeyDown.bind(this),this.handleDropdownKeyDown=this.handleDropdownKeyDown.bind(this),this.handleInputFieldFocus=this.handleInputFieldFocus.bind(this),this.handleChange=this.handleChange.bind(this),this.handleInteract=this.handleInteract.bind(this),this.handleListChange=this.handleListChange.bind(this),this.handleActionListChange=this.handleActionListChange.bind(this),this.handleStopEditAndBlur=this.handleStopEditAndBlur.bind(this),this.createDebouncedSearcher=this.createDebouncedSearcher.bind(this),this.handleCloseMenu=this.handleCloseMenu.bind(this),this.onListKeyDown=this.onListKeyDown.bind(this),this.portalId=p()}componentWillLoad(){this.chips=this.createChips(this.value)}componentDidLoad(){this.createDebouncedSearcher(this.searcher),this.chipSet=this.host.shadowRoot.querySelector("limel-chip-set")}async componentWillUpdate(){this.chipSetEditMode=!1,this.chipSet&&(this.chipSetEditMode=await this.chipSet.getEditMode())}render(){this.chips.forEach((t=>{"iconBackgroundColor"in t&&t.iconBackgroundColor&&(t.iconFillColor="rgb(var(--color-white))")}));const t={};return this.multiple||(t.maxItems=1),[s("limel-chip-set",Object.assign({type:"input",label:this.label,helperText:this.helperText,leadingIcon:this.leadingIcon,value:this.chips,disabled:this.disabled,delimiter:this.renderDelimiter(),readonly:this.readonly,required:this.required,searchLabel:this.searchLabel,onInput:this.handleTextInput,onKeyDown:this.handleInputKeyDown,onChange:this.handleChange,onInteract:this.handleInteract,onStartEdit:this.handleInputFieldFocus,onStopEdit:this.handleStopEditAndBlur,emptyInputOnBlur:!1,clearAllButton:this.multiple},t)),this.renderDropdown()]}onChangeValue(){this.chips=this.createChips(this.value)}createDebouncedSearcher(t){var i,s,n;"function"==typeof t&&(this.debouncedSearch=(i=t,500,s=b({},w,undefined),n=new C({func:i,wait:500,options:s}),function(){for(var t=[],i=0;i<arguments.length;i++)t[i]=arguments[i];return n.getDebouncedFunction(t).func.apply(void 0,t)}))}renderDelimiter(){return this.multiple?this.delimiter:null}createChips(t){return t?this.multiple?t.map(this.createChip):[this.createChip(t)]:[]}createChip(t){return{id:`${t.value}`,text:t.text,removable:!0,icon:t.icon,iconBackgroundColor:t.iconColor,value:t}}renderDropdown(){const t=this.getDropdownContent(),i=[];if(this.shouldShowDropDownContent()){const s=this.getActionContent();"top"===this.actionPosition&&i.push(s),t&&i.push(t),"bottom"===this.actionPosition&&i.push(s)}return this.renderPortal(i)}getActionContent(){var t,i;return 0===(null!==(i=null===(t=this.actions)||void 0===t?void 0:t.length)&&void 0!==i?i:0)?null:[s("limel-list",{class:{"static-actions-list":!0,"is-on-top":"top"===this.actionPosition,"is-at-bottom":"bottom"===this.actionPosition,"has-position-sticky":"sticky"===this.actionScrollBehavior},badgeIcons:!0,type:"selectable",onChange:this.handleActionListChange,items:this.actions.map(this.removeUnusedPropertiesOnAction)})]}removeUnusedPropertiesOnAction(t){return Object.assign(Object.assign({},t),{actions:[]})}shouldShowDropDownContent(){return!this.isFull()&&!!this.chipSetEditMode}getDropdownContent(){if(this.shouldShowDropDownContent())return this.loading?this.renderSpinner():this.items&&this.items.length?this.renderListResult():this.renderEmptyMessage()}isFull(){return!this.multiple&&!!this.value}renderSpinner(){return s("div",{style:{width:"100%",display:"flex","align-items":"center","justify-content":"center",padding:"1rem 0"}},s("limel-spinner",{limeBranded:!1}))}renderEmptyMessage(){if(this.emptyResultMessage)return s("p",{style:{color:"rgb(var(--contrast-1100))","text-align":"center",margin:"0.5rem 1rem"}},this.emptyResultMessage)}renderListResult(){const t=this.items.some((t=>"icon"in t&&!!t.icon));return s("limel-list",{badgeIcons:t&&this.badgeIcons,onChange:this.handleListChange,onKeyDown:this.onListKeyDown,type:"selectable",items:this.items})}onListKeyDown(t){const i=[h,r,o].includes(t.key),s=[l,a,c].includes(t.keyCode);(i||s)&&this.chipSet.setFocus()}renderPortal(t=[]){const i=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return s("limel-portal",{visible:t.length>0,containerId:this.portalId,inheritParentWidth:!0,containerStyle:{"z-index":i}},s("limel-menu-surface",{open:t.length>0,allowClicksElement:this.host,style:{"--mdc-menu-min-width":"100%","max-height":"inherit",display:"flex"},onDismiss:this.handleCloseMenu},t))}handleStopEditAndBlur(){const t=this.host.shadowRoot.activeElement||document.activeElement,i=document.querySelector(`#${this.portalId}`);e(t,this.host)||e(t,i)||this.clearInputField()}async handleTextInput(t){t.stopPropagation();const i=t.detail;this.textValue=i,this.loading=!0;const s=""===i?this.searcher:this.debouncedSearch,n=await s(i);this.handleSearchResult(i,n)}handleListChange(t){var i;if(t.stopPropagation(),!this.value||this.value!==t.detail){let i=t.detail;this.multiple&&(i=[...this.value,t.detail]),this.change.emit(i),this.items=[]}this.multiple&&(null===(i=this.chipSet)||void 0===i||i.setFocus(!0))}handleActionListChange(t){t.stopPropagation(),t.detail&&(this.action.emit(t.detail.value),this.items=[])}async handleInputFieldFocus(){this.loading=!0;const t=this.textValue,i=await this.searcher(t);this.handleSearchResult(t,i)}handleChange(t){t.stopPropagation();let i=null;this.multiple&&(i=t.detail.map((t=>this.value.find((i=>`${i.value}`===t.id))))),this.change.emit(i)}handleInteract(t){t.stopPropagation(),this.interact.emit(t.detail?t.detail.value:t.detail)}handleInputKeyDown(t){const i=!(t.key!==h&&t.keyCode!==l||t.altKey||t.metaKey||t.shiftKey),s=t.key===u||t.keyCode===d,n=t.key===m||t.keyCode===f;if(!i&&!s&&!n)return;const e=document.querySelector(` #${this.portalId} limel-list`);e&&(t.preventDefault(),i||n?e.shadowRoot.querySelector(".mdc-deprecated-list-item:first-child").focus():s&&e.shadowRoot.querySelector(".mdc-deprecated-list-item:last-child").focus())}handleDropdownKeyDown(t){(t.key===r||t.keyCode===a)&&(t.preventDefault(),this.textValue="",this.chipSet.setFocus(!0))}handleSearchResult(t,i){if(t===this.textValue){if(this.items=i,this.multiple){const t=this.value;this.items=i.filter((i=>!t.includes(i)))}this.loading=!1}}handleCloseMenu(){this.clearInputField()}clearInputField(){this.chipSet.emptyInput(),this.textValue="",this.handleSearchResult("",[])}get host(){return n(this)}static get watchers(){return{value:["onChangeValue"],searcher:["createDebouncedSearcher"]}}};D.style=":host{position:relative;display:block}:host([hidden]){display:none}";export{D as limel_picker}
@@ -1 +0,0 @@
1
- import{r as t,c as s,h as i,g as e}from"./p-e9a95b8f.js";import{c as r}from"./p-6c094f3f.js";import{z as o}from"./p-7cda574b.js";import"./p-b28128d2.js";import"./p-5fdb83c9.js";import"./p-4c3358cb.js";import"./p-eda23c05.js";import"./p-c93050d6.js";const n=class{constructor(i){t(this,i),this.cancel=s(this,"cancel",7),this.select=s(this,"select",7),this.items=[],this.disabled=!1,this.openDirection="right",this.open=!1,this.badgeIcons=!1,this.gridLayout=!1,this.setTriggerAttributes=t=>{const s={"aria-haspopup":!0,"aria-expanded":this.open,disabled:this.disabled,role:"button"};for(const[i,e]of Object.entries(s))e?t.setAttribute(i,String(e)):t.removeAttribute(i)},this.onClose=()=>{this.cancel.emit(),this.open=!1},this.onTriggerClick=t=>{t.stopPropagation(),this.disabled||(this.open=!this.open)},this.onListChange=t=>{this.items=this.items.map((s=>s===t.detail?t.detail:s)),this.select.emit(t.detail),this.open=!1},this.setListElement=t=>{this.list=t},this.focusMenuItem=()=>{var t;const s=this.list.shadowRoot.activeElement;null==s||s.blur();const i=this.items.filter(this.isMenuItem),e=Math.max(i.findIndex((t=>t.selected)),0);null===(t=Array.from(this.list.shadowRoot.querySelectorAll('[role="menuitem"]'))[e])||void 0===t||t.focus()},this.portalId=r()}componentDidLoad(){this.host.querySelector('[slot="trigger"]')||console.warn("Using limel-menu with the default trigger is deprecated. Please provide your own trigger element.")}openWatcher(){if(!this.open)return;const t=new IntersectionObserver((()=>{t.unobserve(this.list),this.focusMenuItem()}));t.observe(this.list)}render(){const t=this.getCssProperties(),s=getComputedStyle(this.host).getPropertyValue("--dropdown-z-index");return i("div",{class:"mdc-menu-surface--anchor",onClick:this.onTriggerClick},i("slot",{name:"trigger"}),i("limel-portal",{visible:this.open,containerId:this.portalId,openDirection:this.openDirection,position:"absolute",containerStyle:{"z-index":s}},i("limel-menu-surface",{open:this.open,onDismiss:this.onClose,style:t,class:{"has-grid-layout":this.gridLayout}},i("limel-menu-list",{class:{"has-grid-layout has-interactive-items":this.gridLayout},items:this.items,type:"menu",badgeIcons:this.badgeIcons,onChange:this.onListChange,ref:this.setListElement}))))}componentDidRender(){this.host.shadowRoot.querySelector("slot").assignedElements().forEach(this.setTriggerAttributes)}getCssProperties(){const t=["--menu-surface-width","--list-grid-item-max-width","--list-grid-item-min-width","--list-grid-gap"],s=getComputedStyle(this.host),i=t.map((t=>s.getPropertyValue(t)));return o(t,i)}isMenuItem(t){return!("separator"in t)}get host(){return e(this)}static get watchers(){return{open:["openWatcher"]}}};n.style=":host{display:inline-block}:host([hidden]){display:none}.menu__trigger{border-color:transparent;border-width:1px;border-style:solid;background:none;color:rgb(var(--contrast-800));height:2.25rem}.menu__trigger-enabled:hover{border-color:rgb(var(--contrast-800));color:rgb(var(--contrast-1100))}.mdc-menu-surface--anchor{position:relative}";export{n as limel_menu}