203 lines
14 KiB
JavaScript
203 lines
14 KiB
JavaScript
var k=Object.defineProperty;var I=(n,e)=>{for(var t in e)k(n,t,{get:e[t],enumerable:!0})};var g={};I(g,{OptionPure:()=>p,SelectPure:()=>o});function v(n){return typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?v=function(t){return typeof t}:v=function(t){return t&&typeof Symbol=="function"&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},v(n)}function a(n,e,t){var i=t.value;if(typeof i!="function")throw new TypeError("@boundMethod decorator can only be applied to methods not: ".concat(v(i)));var r=!1;return{configurable:!0,get:function(){if(r||this===n.prototype||this.hasOwnProperty(e)||typeof i!="function")return i;var d=i.bind(this);return r=!0,Object.defineProperty(this,e,{configurable:!0,get:function(){return d},set:function(C){i=C,delete this[e]}}),r=!1,d},set:function(d){i=d}}}import{LitElement as _,html as $}from"lit";import{ifDefined as P}from"lit-html/directives/if-defined.js";import{customElement as D}from"lit/decorators/custom-element.js";import{property as f}from"lit/decorators/property.js";var b={ENTER:"Enter",TAB:"Tab"};var y=()=>{};var O={label:"",value:"",select:y,unselect:y,disabled:!1,hidden:!1,selected:!1};import{css as E}from"lit";var x=E`
|
|
.select-wrapper {
|
|
position: relative;
|
|
}
|
|
.select {
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
left: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
width: var(--select-width, 100%);
|
|
}
|
|
.label:focus {
|
|
outline: var(--select-outline, 2px solid #e3e3e3);
|
|
}
|
|
.label:after {
|
|
border-bottom: 1px solid var(--color, #000);
|
|
border-right: 1px solid var(--color, #000);
|
|
box-sizing: border-box;
|
|
content: "";
|
|
display: block;
|
|
height: 10px;
|
|
margin-top: -2px;
|
|
transform: rotate(45deg);
|
|
transition: 0.2s ease-in-out;
|
|
width: 10px;
|
|
}
|
|
.label.visible:after {
|
|
margin-bottom: -4px;
|
|
margin-top: 0;
|
|
transform: rotate(225deg);
|
|
}
|
|
select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
position: relative;
|
|
opacity: 0;
|
|
}
|
|
select[multiple] {
|
|
z-index: 0;
|
|
}
|
|
select,
|
|
.label {
|
|
align-items: center;
|
|
background-color: var(--background-color, #fff);
|
|
border-radius: var(--border-radius, 4px);
|
|
border: var(--border-width, 1px) solid var(--border-color, #000);
|
|
box-sizing: border-box;
|
|
color: var(--color, #000);
|
|
cursor: pointer;
|
|
display: flex;
|
|
font-family: var(--font-family, inherit);
|
|
font-size: var(--font-size, 14px);
|
|
font-weight: var(--font-weight, 400);
|
|
min-height: var(--select-height, 44px);
|
|
justify-content: space-between;
|
|
padding: var(--padding, 0 10px);
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
@media only screen and (hover: none) and (pointer: coarse){
|
|
select {
|
|
z-index: 2;
|
|
}
|
|
}
|
|
.dropdown {
|
|
background-color: var(--border-color, #000);
|
|
border-radius: var(--border-radius, 4px);
|
|
border: var(--border-width, 1px) solid var(--border-color, #000);
|
|
display: none;
|
|
flex-direction: column;
|
|
gap: var(--border-width, 1px);
|
|
justify-content: space-between;
|
|
max-height: calc(var(--select-height, 44px) * var(--dropdown-items, 4) + var(--border-width, 1px) * calc(var(--dropdown-items, 4) - 1));
|
|
overflow-y: scroll;
|
|
position: absolute;
|
|
top: calc(var(--select-height, 44px) + var(--dropdown-gap, 0px));
|
|
width: calc(100% - var(--border-width, 1px) * 2);
|
|
z-index: var(--dropdown-z-index, 2);
|
|
}
|
|
.dropdown.visible {
|
|
display: flex;
|
|
z-index: 100;
|
|
}
|
|
.disabled {
|
|
background-color: var(--disabled-background-color, #bdc3c7);
|
|
color: var(--disabled-color, #ecf0f1);
|
|
cursor: default;
|
|
}
|
|
.multi-selected {
|
|
background-color: var(--selected-background-color, #e3e3e3);
|
|
border-radius: var(--border-radius, 4px);
|
|
color: var(--selected-color, #000);
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: space-between;
|
|
padding: 2px 4px;
|
|
}
|
|
.multi-selected-wrapper {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
width: calc(100% - 30px);
|
|
}
|
|
.cross:after {
|
|
content: '\\00d7';
|
|
display: inline-block;
|
|
height: 100%;
|
|
text-align: center;
|
|
width: 12px;
|
|
}
|
|
`;import{css as L}from"lit";var S=L`
|
|
.option {
|
|
align-items: center;
|
|
background-color: var(--background-color, #fff);
|
|
box-sizing: border-box;
|
|
color: var(--color, #000);
|
|
cursor: pointer;
|
|
display: flex;
|
|
font-family: var(--font-family, inherit);
|
|
font-size: var(--font-size, 14px);
|
|
font-weight: var(--font-weight, 400);
|
|
min-height: var(--select-height, 44px);
|
|
justify-content: flex-start;
|
|
padding: var(--padding, 0 10px);
|
|
width: 100%;
|
|
}
|
|
.option:not(.disabled):focus, .option:not(.disabled):not(.selected):hover {
|
|
background-color: var(--hover-background-color, #e3e3e3);
|
|
color: var(--hover-color, #000);
|
|
}
|
|
.selected {
|
|
background-color: var(--selected-background-color, #e3e3e3);
|
|
color: var(--selected-color, #000);
|
|
}
|
|
.disabled {
|
|
background-color: var(--disabled-background-color, #e3e3e3);
|
|
color: var(--disabled-color, #000);
|
|
cursor: default;
|
|
}
|
|
`;var u=function(n,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(n,e,t,i);else for(var h=n.length-1;h>=0;h--)(d=n[h])&&(s=(r<3?d(s):r>3?d(e,t,s):d(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s},p=class extends _{constructor(){super(...arguments),this.isSelected=!1,this.isDisabled=!1,this.isHidden=!1,this.optionValue="",this.displayedLabel="",this.optionIndex=-1}static get styles(){return S}connectedCallback(){super.connectedCallback(),this.isSelected=this.getAttribute("selected")!==null,this.isDisabled=this.getAttribute("disabled")!==null,this.isHidden=this.getAttribute("hidden")!==null,this.optionValue=this.getAttribute("value")||"",this.assignDisplayedLabel(),this.fireOnReadyCallback()}getOption(){return{label:this.displayedLabel,value:this.optionValue,select:this.select,unselect:this.unselect,selected:this.isSelected,disabled:this.isDisabled,hidden:this.isHidden}}select(){this.isSelected=!0,this.setAttribute("selected","")}unselect(){this.isSelected=!1,this.removeAttribute("selected")}setOnReadyCallback(e,t){this.onReady=e,this.optionIndex=t}setOnSelectCallback(e){this.onSelect=e}render(){let e=["option"];return this.isSelected&&e.push("selected"),this.isDisabled&&e.push("disabled"),$`
|
|
<div
|
|
class="${e.join(" ")}"
|
|
@click=${this.fireOnSelectCallback}
|
|
@keydown="${this.fireOnSelectIfEnterPressed}"
|
|
tabindex="${P(this.isDisabled?void 0:"0")}"
|
|
>
|
|
<slot hidden @slotchange=${this.assignDisplayedLabel}></slot>
|
|
${this.displayedLabel}
|
|
</div>
|
|
`}assignDisplayedLabel(){if(this.textContent){this.displayedLabel=this.textContent;return}this.getAttribute("label")&&(this.displayedLabel=this.getAttribute("label")||"")}fireOnReadyCallback(){this.onReady&&this.onReady(this.getOption(),this.optionIndex)}fireOnSelectCallback(e){e.stopPropagation(),!(!this.onSelect||this.isDisabled)&&this.onSelect(this.optionValue)}fireOnSelectIfEnterPressed(e){e.key===b.ENTER&&this.fireOnSelectCallback(e)}};u([f()],p.prototype,"isSelected",void 0);u([f()],p.prototype,"isDisabled",void 0);u([f()],p.prototype,"isHidden",void 0);u([f()],p.prototype,"optionValue",void 0);u([f()],p.prototype,"displayedLabel",void 0);u([f()],p.prototype,"optionIndex",void 0);u([a],p.prototype,"getOption",null);u([a],p.prototype,"select",null);u([a],p.prototype,"unselect",null);u([a],p.prototype,"fireOnReadyCallback",null);p=u([D("option-pure")],p);import{LitElement as A,html as m}from"lit";import{ifDefined as w}from"lit-html/directives/if-defined.js";import{customElement as R}from"lit/decorators/custom-element.js";import{property as c}from"lit/decorators/property.js";import{query as z}from"lit/decorators/query.js";var l=function(n,e,t,i){var r=arguments.length,s=r<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(n,e,t,i);else for(var h=n.length-1;h>=0;h--)(d=n[h])&&(s=(r<3?d(s):r>3?d(e,t,s):d(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s},o=class extends A{constructor(){super(...arguments),this.options=[],this.visible=!1,this.selectedOption=O,this._selectedOptions=[],this.disabled=!1,this.isMultipleSelect=!1,this.name="",this._id="",this.formName="",this.value="",this.values=[],this.defaultLabel="",this.totalRenderedChildOptions=-1,this.form=null,this.hiddenInput=null}static get styles(){return x}connectedCallback(){super.connectedCallback(),this.disabled=this.getAttribute("disabled")!==null,this.isMultipleSelect=this.getAttribute("multiple")!==null,this.name=this.getAttribute("name")||"",this._id=this.getAttribute("id")||"",this.formName=this.name||this.id,this.defaultLabel=this.getAttribute("default-label")||""}open(){this.disabled||(this.visible=!0,this.removeEventListeners(),document.body.addEventListener("click",this.close,!0))}close(e){e&&this.contains(e.target)||(this.visible=!1,this.removeEventListeners())}enable(){this.disabled=!1}disable(){this.disabled=!0}get selectedIndex(){var e;return(e=this.nativeSelect)===null||e===void 0?void 0:e.selectedIndex}set selectedIndex(e){!e&&e!==0||this.selectOptionByValue(this.options[e].value)}get selectedOptions(){var e;return(e=this.nativeSelect)===null||e===void 0?void 0:e.selectedOptions}render(){let e=["label"];return this.disabled&&e.push("disabled"),this.visible&&e.push("visible"),m`
|
|
<div class="select-wrapper">
|
|
<select
|
|
@change=${this.handleNativeSelectChange}
|
|
?disabled=${this.disabled}
|
|
?multiple=${this.isMultipleSelect}
|
|
name="${w(this.name||void 0)}"
|
|
id=${w(this.id||void 0)}
|
|
size="1"
|
|
>
|
|
${this.getNativeOptionsHtml()}
|
|
</select>
|
|
<div class="select">
|
|
<div
|
|
class="${e.join(" ")}"
|
|
@click="${this.visible?this.close:this.open}"
|
|
@keydown="${this.openDropdownIfProperKeyIsPressed}"
|
|
tabindex="0"
|
|
>
|
|
${this.getDisplayedLabel()}
|
|
</div>
|
|
<div class="dropdown${this.visible?" visible":""}">
|
|
<slot @slotchange=${this.initializeSelect}></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`}handleNativeSelectChange(){var e;this.selectedIndex=(e=this.nativeSelect)===null||e===void 0?void 0:e.selectedIndex}getNativeOptionsHtml(){return this.options.map(this.getSingleNativeOptionHtml)}getSingleNativeOptionHtml({value:e,label:t,hidden:i,disabled:r}){return m`
|
|
<option
|
|
value=${e}
|
|
?selected=${this.isOptionSelected(e)}
|
|
?hidden=${i}
|
|
?disabled=${r}
|
|
>
|
|
${t}
|
|
</option>
|
|
`}isOptionSelected(e){let t=this.selectedOption.value===e;return this.isMultipleSelect&&(t=!!this._selectedOptions.find(i=>i.value===e)),t}openDropdownIfProperKeyIsPressed(e){(e.key===b.ENTER||e.key===b.TAB)&&this.open()}getDisplayedLabel(){return this.isMultipleSelect&&this._selectedOptions.length?this.getMultiSelectLabelHtml():this.selectedOption.label||this.defaultLabel}getMultiSelectLabelHtml(){return m`
|
|
<div class="multi-selected-wrapper">
|
|
${this._selectedOptions.map(this.getMultiSelectSelectedOptionHtml)}
|
|
</div>
|
|
`}getMultiSelectSelectedOptionHtml({label:e,value:t}){return m`
|
|
<span class="multi-selected">
|
|
${e}
|
|
<span
|
|
class="cross"
|
|
@click=${i=>this.fireOnSelectCallback(i,t)}
|
|
>
|
|
</span>
|
|
</span>
|
|
`}fireOnSelectCallback(e,t){e.stopPropagation(),this.selectOptionByValue(t)}initializeSelect(){this.processChildOptions(),this.selectDefaultOptionIfNoneSelected(),this.appendHiddenInputToClosestForm()}processChildOptions(){let e=this.querySelectorAll("option-pure");this.totalRenderedChildOptions=e.length;for(let t=0;t<e.length;t++)this.initializeSingleOption(e[t],t)}selectDefaultOptionIfNoneSelected(){!this.selectedOption.value&&!this.isMultipleSelect&&this.options.length&&this.selectOptionByValue(this.options[0].value)}initializeSingleOption(e,t){e.setOnSelectCallback(this.selectOptionByValue),this.options[t]=e.getOption(),this.options[t].selected&&this.selectOptionByValue(this.options[t].value)}removeEventListeners(){document.body.removeEventListener("click",this.close)}appendHiddenInputToClosestForm(){this.form=this.closest("form"),!(!this.form||this.hiddenInput)&&(this.hiddenInput=document.createElement("input"),this.hiddenInput.setAttribute("type","hidden"),this.hiddenInput.setAttribute("name",this.formName),this.form.appendChild(this.hiddenInput))}unselectAllOptions(){for(let e=0;e<this.options.length;e++)this.options[e].unselect()}selectOptionByValue(e){let t=this.options.find(({value:i})=>i===e);t&&this.setSelectValue(t)}setSelectValue(e){this.isMultipleSelect?this.setMultiSelectValue(e):this.setSingleSelectValue(e),this.updateHiddenInputInForm(),this.dispatchChangeEvent()}dispatchChangeEvent(){this.dispatchEvent(new Event("change"))}setMultiSelectValue(e){let t=this._selectedOptions.indexOf(e);t!==-1?(this.values.splice(t,1),this._selectedOptions.splice(t,1),e.unselect()):(this.values.push(e.value),this._selectedOptions.push(e),e.select()),this.requestUpdate()}setSingleSelectValue(e){this.unselectAllOptions(),this.close(),this.selectedOption=e,this.value=e.value,e.select()}updateHiddenInputInForm(){if(!this.form||!this.hiddenInput)return;this.hiddenInput.value=this.isMultipleSelect?this.values.join(","):this.value;let e=new Event("change",{bubbles:!0});this.hiddenInput.dispatchEvent(e)}};l([c()],o.prototype,"options",void 0);l([c()],o.prototype,"visible",void 0);l([c()],o.prototype,"selectedOption",void 0);l([c()],o.prototype,"_selectedOptions",void 0);l([c()],o.prototype,"disabled",void 0);l([c()],o.prototype,"isMultipleSelect",void 0);l([c()],o.prototype,"name",void 0);l([c()],o.prototype,"_id",void 0);l([c()],o.prototype,"formName",void 0);l([c()],o.prototype,"value",void 0);l([c()],o.prototype,"values",void 0);l([c()],o.prototype,"defaultLabel",void 0);l([c()],o.prototype,"totalRenderedChildOptions",void 0);l([z("select")],o.prototype,"nativeSelect",void 0);l([a],o.prototype,"close",null);l([a],o.prototype,"getSingleNativeOptionHtml",null);l([a],o.prototype,"getMultiSelectLabelHtml",null);l([a],o.prototype,"getMultiSelectSelectedOptionHtml",null);l([a],o.prototype,"initializeSelect",null);l([a],o.prototype,"initializeSingleOption",null);l([a],o.prototype,"removeEventListeners",null);l([a],o.prototype,"appendHiddenInputToClosestForm",null);l([a],o.prototype,"selectOptionByValue",null);o=l([R("select-pure")],o);var xe=g;export{xe as default};
|