@mhmo91/schmancy 0.2.41 → 0.2.42

package/dist/select-N1WX3mjc.cjs

@@ -1,52 +0,0 @@
-"use strict";const a=require("@floating-ui/dom");require("rxjs");const p=require("lit/directives/class-map.js");require("lit/directives/style-map.js");const u=require("./litElement.mixin-B9kSOE4x.cjs");require("./tailwind.mixin-gE-6eUQA.cjs");const d=require("./ripple-C2BHbhcS.cjs"),y=require("./theme.interface-Xg5Zi46a.cjs"),h=require("lit"),l=require("lit/decorators.js");var m=Object.defineProperty,v=Object.getOwnPropertyDescriptor,o=(e,s,t,i)=>{for(var c,n=i>1?void 0:i?v(s,t):s,r=e.length-1;r>=0;r--)(c=e[r])&&(n=(i?c(s,t,n):c(n))||n);return i&&n&&m(s,t,n),n};exports.SchmancySelect=class extends u.$LitElement(h.css`
-	:host {
-		display: block;
-		position: relative;
-	}
-
-	[role='listbox'] {
-		max-height: 25vh;
-		overflow-y: auto;
-		outline: none;
-	}
-`){constructor(){super(...arguments),this.required=!1,this.placeholder="",this.value="",this.selectedValues=[],this.multi=!1,this.label="",this.isOpen=!1,this.valueLabel=""}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){var e;super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown),(e=this.cleanupPositioner)==null||e.call(this)}firstUpdated(){this.syncSelection(),this.setupOptionsAccessibility()}syncSelection(){if(this.multi)this.selectedValues=this.options.filter(e=>e.selected).map(e=>e.value),this.valueLabel=this.selectedValues.length>0?this.options.filter(e=>this.selectedValues.includes(e.value)).map(e=>e.label).join(", "):this.placeholder;else{const e=this.options.find(s=>s.value===this.value);this.valueLabel=(e==null?void 0:e.label)||this.placeholder}}setupOptionsAccessibility(){this.options.forEach(e=>{e.setAttribute("role","option"),e.tabIndex=-1,e.setAttribute("aria-selected",String(this.multi?this.selectedValues.includes(e.value):e.value===this.value))})}async positionDropdown(){const e=this.renderRoot.querySelector(".trigger");e&&this.ul&&(this.cleanupPositioner=a.autoUpdate(e,this.ul,async()=>{const{x:s,y:t}=await a.computePosition(e,this.ul,{placement:"bottom-start",middleware:[a.offset(5),a.flip(),a.shift({padding:5})]});Object.assign(this.ul.style,{left:`${s}px`,top:`${t}px`,position:"absolute"})}))}handleKeyDown(e){if(!this.isOpen)return void(["Enter"," ","ArrowDown"].includes(e.key)&&(e.preventDefault(),this.openDropdown()));const s=Array.from(this.ul.querySelectorAll('[role="option"]')),t=s.findIndex(i=>i.matches(":focus"));switch(e.key){case"Escape":case"Tab":this.closeDropdown();break;case"ArrowDown":e.preventDefault(),this.focusOption(s,Math.min(t+1,s.length-1));break;case"ArrowUp":e.preventDefault(),this.focusOption(s,Math.max(t-1,0));break;case"Enter":case" ":e.preventDefault(),t>=0&&this.handleOptionSelect(s[t].value)}}focusOption(e,s){var t;(t=e[s])==null||t.focus()}async openDropdown(){this.isOpen=!0,await this.updateComplete,this.positionDropdown(),this.setupOptionsAccessibility();const e=Array.from(this.ul.querySelectorAll('[role="option"]')),s=this.multi?0:e.findIndex(t=>t.getAttribute("value")===this.value);this.focusOption(e,Math.max(s,0))}closeDropdown(){var e,s;this.isOpen=!1,(e=this.cleanupPositioner)==null||e.call(this),this.cleanupPositioner=void 0,(s=this.renderRoot.querySelector(".trigger"))==null||s.focus()}handleOptionSelect(e){var s;if(this.multi){const t=this.options.find(i=>i.value===e);if(!t)return;t.selected=!t.selected,t.selected?this.selectedValues=[...this.selectedValues,e]:this.selectedValues=this.selectedValues.filter(i=>i!==e),this.valueLabel=this.selectedValues.length>0?this.options.filter(i=>this.selectedValues.includes(i.value)).map(i=>i.label).join(", "):this.placeholder,this.dispatchChange(this.selectedValues)}else this.options.forEach(t=>t.selected=t.value===e),this.value=e,this.valueLabel=((s=this.options.find(t=>t.value===e))==null?void 0:s.label)||this.placeholder,this.dispatchChange(e),this.closeDropdown();this.setupOptionsAccessibility()}dispatchChange(e){this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0}))}render(){return h.html`
-			<div class="relative">
-				<!-- Some trigger (schmancy-input) -->
-				<schmancy-input
-					class="trigger"
-					role="combobox"
-					aria-haspopup="listbox"
-					aria-expanded=${this.isOpen}
-					aria-controls="options"
-					.label=${this.label}
-					.placeholder=${this.placeholder}
-					.value=${this.valueLabel}
-					readonly
-					@click=${()=>this.isOpen?this.closeDropdown():this.openDropdown()}
-				></schmancy-input>
-
-				<!-- Transparent overlay to close dropdown by clicking outside -->
-				<div
-					id="overlay"
-					class="fixed inset-0"
-					?hidden=${!this.isOpen}
-					@click=${this.closeDropdown}
-					tabindex="-1"
-				></div>
-
-				<!-- The dropdown options container -->
-				<ul
-					id="options"
-					role="listbox"
-					class=${p.classMap({"absolute z-30 mt-1 w-full rounded-md shadow-sm":!0,hidden:!this.isOpen})}
-					${d.color({bgColor:y.SchmancyTheme.sys.color.surface.container})}
-					@click=${e=>{var i;const s=e,t=(i=s.detail)==null?void 0:i.value;t&&this.handleOptionSelect(t)}}
-				>
-					<!-- The <schmancy-option> elements get slotted in here -->
-					<slot
-						@slotchange=${()=>{this.syncSelection(),this.setupOptionsAccessibility()}}
-					></slot>
-				</ul>
-			</div>
-		`}},o([l.property({type:Boolean})],exports.SchmancySelect.prototype,"required",2),o([l.property({type:String})],exports.SchmancySelect.prototype,"placeholder",2),o([l.property({type:String})],exports.SchmancySelect.prototype,"value",2),o([l.property({type:Array})],exports.SchmancySelect.prototype,"selectedValues",2),o([l.property({type:Boolean})],exports.SchmancySelect.prototype,"multi",2),o([l.property({type:String})],exports.SchmancySelect.prototype,"label",2),o([l.state()],exports.SchmancySelect.prototype,"isOpen",2),o([l.state()],exports.SchmancySelect.prototype,"valueLabel",2),o([l.query("ul")],exports.SchmancySelect.prototype,"ul",2),o([l.queryAssignedElements({flatten:!0})],exports.SchmancySelect.prototype,"options",2),exports.SchmancySelect=o([l.customElement("schmancy-select")],exports.SchmancySelect);
-//# sourceMappingURL=select-N1WX3mjc.cjs.map