@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.
- package/dist/cjs/lime-elements.cjs.js +1 -1
- package/dist/cjs/limel-chip-set.cjs.entry.js +7 -2
- package/dist/cjs/limel-color-picker-palette_2.cjs.entry.js +1 -1
- package/dist/cjs/limel-color-picker.cjs.entry.js +1 -1
- package/dist/cjs/limel-date-picker.cjs.entry.js +6 -3
- package/dist/cjs/limel-form.cjs.entry.js +3 -0
- package/dist/cjs/limel-list_3.cjs.entry.js +39 -9
- package/dist/cjs/limel-menu.cjs.entry.js +2 -2
- package/dist/cjs/limel-picker.cjs.entry.js +1 -1
- package/dist/cjs/limel-progress-flow-item.cjs.entry.js +1 -1
- package/dist/cjs/limel-tooltip_2.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/chip-set/chip-set.css +7 -0
- package/dist/collection/components/chip-set/chip-set.js +26 -1
- package/dist/collection/components/color-picker/color-picker.js +1 -1
- package/dist/collection/components/date-picker/date-picker.css +6 -1
- package/dist/collection/components/date-picker/date-picker.js +4 -4
- package/dist/collection/components/form/templates/common.js +3 -0
- package/dist/collection/components/list/list-renderer.js +2 -2
- package/dist/collection/components/menu/menu.js +6 -6
- package/dist/collection/components/picker/picker.js +1 -1
- package/dist/collection/components/popover/popover.js +23 -1
- package/dist/collection/components/portal/portal.js +39 -9
- package/dist/collection/components/progress-flow/progress-flow-item/progress-flow-item.css +1 -1
- package/dist/collection/components/progress-flow/progress-flow.css +2 -2
- package/dist/collection/components/tooltip/tooltip.js +1 -1
- package/dist/esm/lime-elements.js +1 -1
- package/dist/esm/limel-chip-set.entry.js +7 -2
- package/dist/esm/limel-color-picker-palette_2.entry.js +1 -1
- package/dist/esm/limel-color-picker.entry.js +1 -1
- package/dist/esm/limel-date-picker.entry.js +6 -3
- package/dist/esm/limel-form.entry.js +3 -0
- package/dist/esm/limel-list_3.entry.js +39 -9
- package/dist/esm/limel-menu.entry.js +2 -2
- package/dist/esm/limel-picker.entry.js +1 -1
- package/dist/esm/limel-progress-flow-item.entry.js +1 -1
- package/dist/esm/limel-tooltip_2.entry.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-08251941.entry.js +1 -0
- package/dist/lime-elements/{p-83ea517b.entry.js → p-1e59114e.entry.js} +1 -1
- package/dist/lime-elements/{p-2754e134.entry.js → p-22569fb6.entry.js} +1 -1
- package/dist/lime-elements/p-5ad60e14.entry.js +126 -0
- package/dist/lime-elements/p-64f068a8.entry.js +1 -0
- package/dist/lime-elements/p-75152d89.entry.js +1 -0
- package/dist/lime-elements/{p-6d50aa71.entry.js → p-7e571ec6.entry.js} +1 -1
- package/dist/lime-elements/p-87453b45.entry.js +1 -0
- package/dist/lime-elements/p-995bbd2a.entry.js +1 -0
- package/dist/lime-elements/p-f0e872b6.entry.js +16 -0
- package/dist/types/components/chip-set/chip-set.d.ts +7 -0
- package/dist/types/components/menu/menu.d.ts +2 -2
- package/dist/types/components/menu/menu.types.d.ts +1 -1
- package/dist/types/components/popover/popover.d.ts +5 -0
- package/dist/types/components/portal/portal.d.ts +2 -0
- package/dist/types/components.d.ts +18 -2
- package/package.json +1 -1
- package/dist/lime-elements/p-36ecbd03.entry.js +0 -1
- package/dist/lime-elements/p-4d5a874a.entry.js +0 -1
- package/dist/lime-elements/p-5908c21d.entry.js +0 -1
- package/dist/lime-elements/p-84f933f7.entry.js +0 -16
- package/dist/lime-elements/p-e80dd2ff.entry.js +0 -1
- package/dist/lime-elements/p-e83dddcd.entry.js +0 -126
- 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-
|
|
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
|
|
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
|
*/
|
|
@@ -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
|
|
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
|
|
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 +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}
|