@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
7 lines • 6.01 kB
JavaScript
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
var e=class e{constructor(t,n){this.root=null,this.multiple=!1,this.canCancel=!1,this.preventSelectionDuringInitialFocus=!1,this.preventSelectionDuringSwitching=!1,this.dispatchNavigationClick=!1,this.dispatchInputChangeEvents=!0,this.getFocusableElement=e=>e,this.onConnected=()=>{},this.onDisconnected=()=>{},this.onBeforeSelect=()=>{},this.onAfterSelected=()=>{},this.onAfterNavigate=()=>{},this._suppressNextClick=!1,this._pointerIsDown=!1,this.handlePointerDown=()=>{this._pointerIsDown=!0},this.handlePointerUp=()=>{this._pointerIsDown=!1},this.handleFocus=()=>{this.updateRovingTabindex(),!this.preventSelectionDuringInitialFocus&&!this.host.checked&&!this._pointerIsDown&&(this.host.checked=!0,this.enforceMutexConsistency())},this.handleClick=t=>{if(this.host.disabled){t.preventDefault();return}if(this._suppressNextClick){this._suppressNextClick=!1;return}if(e._pendingNavigationClick.has(this.host)){e._pendingNavigationClick.delete(this.host);return}this.toggleSelection()},this.handleKeyDown=e=>{if(this.host.disabled)return;let{key:t}=e;if(t===` `||t===`Enter`){e.preventDefault(),this.toggleSelection(),this._suppressNextClick=!0,this.host.dispatchEvent(new MouseEvent(`click`,{bubbles:!0}));return}if([`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`].includes(t))switch(e.preventDefault(),t){case`ArrowDown`:case`ArrowRight`:this.moveFocus(`next`);break;case`ArrowUp`:case`ArrowLeft`:this.moveFocus(`prev`);break;case`Home`:this.moveFocus(`first`);break;case`End`:this.moveFocus(`last`)}},this.host=t,t.addController(this),n&&this.configure(n)}configure(e){e.multiple!==void 0&&(this.multiple=e.multiple),e.canCancel!==void 0&&(this.canCancel=e.canCancel),e.preventSelectionDuringInitialFocus!==void 0&&(this.preventSelectionDuringInitialFocus=e.preventSelectionDuringInitialFocus),e.preventSelectionDuringSwitching!==void 0&&(this.preventSelectionDuringSwitching=e.preventSelectionDuringSwitching),e.dispatchNavigationClick!==void 0&&(this.dispatchNavigationClick=e.dispatchNavigationClick),e.dispatchInputChangeEvents!==void 0&&(this.dispatchInputChangeEvents=e.dispatchInputChangeEvents),e.getFocusableElement!==void 0&&(this.getFocusableElement=e.getFocusableElement),e.onConnected!==void 0&&(this.onConnected=e.onConnected),e.onDisconnected!==void 0&&(this.onDisconnected=e.onDisconnected),e.onBeforeSelect!==void 0&&(this.onBeforeSelect=e.onBeforeSelect),e.onAfterSelected!==void 0&&(this.onAfterSelected=e.onAfterSelected),e.onAfterNavigate!==void 0&&(this.onAfterNavigate=e.onAfterNavigate)}get controls(){let e=this.host.getAttribute(`name`);return!e||!this.root||!this.host.isConnected?[this.host]:Array.from(this.root.querySelectorAll(`[name="${CSS.escape(e)}"]`))}toggleSelection(){if(this.host.disabled)return;this.onBeforeSelect(this.host);let e=this.host.checked;this.canCancel?this.host.checked=!this.host.checked:this.host.checked=!0,!this.multiple&&this.host.checked&&this.enforceMutexConsistency(),this.onAfterSelected(this.host),this.updateRovingTabindex(),this.dispatchInputChangeEvents&&this.host.checked!==e&&(this.host.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.host.dispatchEvent(new Event(`change`,{bubbles:!0})))}handleCheckedChange(){!this.multiple&&this.host.checked&&this.enforceMutexConsistency(),this.updateRovingTabindex()}enforceMutexConsistency(){if(!(this.multiple||!this.host.checked))for(let e of this.controls)e!==this.host&&e.checked&&(e.checked=!1)}updateRovingTabindex(){if(!this.host.isConnected)return;let e=this.root?.activeElement;e?.shadowRoot&&(e=e.shadowRoot.activeElement);let t=this.controls,n;e&&(n=t.find(t=>e===this.getFocusableElement(t)||t===e)),n||=t.find(e=>e.checked&&!e.disabled)??t.find(e=>!e.disabled);for(let e of t){let t=this.getFocusableElement(e);if(!t)continue;let r=e===n?0:-1;t.tabIndex!==r&&(t.tabIndex=r)}}moveFocus(t){let n=this.controls;if(n.length===0)return;let r=n.indexOf(this.host),i=n.length,a,o;switch(t){case`first`:a=0,o=1;break;case`last`:a=i-1,o=-1;break;case`next`:a=(r+1)%i,o=1;break;case`prev`:a=(r-1+i)%i,o=-1}for(let e=0;e<i;e++){let e=n[a];if(e&&!e.disabled)break;a=((a+o)%i+i)%i}let s=n[a];if(!s||s===this.host||s.disabled)return;let c=s.checked,l=this.getFocusableElement(s)??s;if(l.tabIndex<0&&(l.tabIndex=0),l.focus(),!this.preventSelectionDuringSwitching&&!s.checked&&(s.checked=!0,!this.multiple))for(let e of this.controls)e!==s&&e.checked&&(e.checked=!1);this.dispatchInputChangeEvents&&!c&&s.checked&&(s.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),s.dispatchEvent(new Event(`change`,{bubbles:!0}))),this.dispatchNavigationClick&&(e._pendingNavigationClick.add(s),s.dispatchEvent(new MouseEvent(`click`,{bubbles:!0,composed:!0}))),this.onAfterNavigate(s)}static{this._pendingNavigationClick=new WeakSet}hostConnected(){this.root=this.host.getRootNode(),this.host.addEventListener(`keydown`,this.handleKeyDown),this.host.addEventListener(`focus`,this.handleFocus),this.host.addEventListener(`click`,this.handleClick),this.host.addEventListener(`pointerdown`,this.handlePointerDown),this.host.addEventListener(`pointerup`,this.handlePointerUp),this.host.addEventListener(`pointercancel`,this.handlePointerUp),this.host.checked&&this.enforceMutexConsistency(),requestAnimationFrame(()=>this.updateRovingTabindex()),this.onConnected(this.host)}hostDisconnected(){this.host.removeEventListener(`keydown`,this.handleKeyDown),this.host.removeEventListener(`focus`,this.handleFocus),this.host.removeEventListener(`click`,this.handleClick),this.host.removeEventListener(`pointerdown`,this.handlePointerDown),this.host.removeEventListener(`pointerup`,this.handlePointerUp),this.host.removeEventListener(`pointercancel`,this.handlePointerUp),this.root=null,this.onDisconnected(this.host)}hostUpdated(){this.host.checked&&this.enforceMutexConsistency(),this.updateRovingTabindex()}};export{e as SelectionController};
//# sourceMappingURL=selection-controller.js.map