@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
8 lines • 2.04 kB
JavaScript
import"../../node_modules/lit/index.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
var e=class{constructor(e,t){this.naturalSize=null,this.currentAnimation=null,this.mutationObserver=null,this.rafId=null,this.onMutation=()=>{this.rafId===null&&(this.rafId=requestAnimationFrame(()=>{this.rafId=null;let e=this.options.target();!e||this.naturalSize===null||this.measure(e)}))},this.host=e,this.options={dimension:`width`,duration:300,easing:`cubic-bezier(0.2, 0, 0.2, 1)`,...t},e.addController(this)}hostConnected(){this.naturalSize=null,this.cancelPendingRaf(),this.cancelAnimation(),this.mutationObserver=new MutationObserver(this.onMutation),this.mutationObserver.observe(this.host,{childList:!0,subtree:!0,characterData:!0,attributes:!1})}hostDisconnected(){this.mutationObserver?.disconnect(),this.mutationObserver=null,this.cancelPendingRaf(),this.cancelAnimation(),this.naturalSize=null}hostUpdated(){let e=this.options.target();if(e){if(this.naturalSize===null){this.naturalSize=this.readNaturalSize(e);return}this.rafId===null&&this.measure(e)}}measure(e){let t;if(this.currentAnimation){let n=e.getBoundingClientRect();t=this.options.dimension===`width`?n.width:n.height,this.cancelAnimation()}else t=this.naturalSize;let n=this.readNaturalSize(e);this.naturalSize=n,!(Math.abs(t-n)<1)&&this.animate(e,t,n)}animate(e,t,n){let{dimension:r,duration:i,easing:a}=this.options,o={[r]:`${t}px`,offset:0},s={[r]:`${t}px`,offset:.15},c={[r]:`${n}px`,offset:1},l=e.animate([o,s,c],{duration:i,easing:a,fill:`none`});this.currentAnimation=l,l.finished.then(()=>{this.currentAnimation===l&&(this.currentAnimation=null)}).catch(()=>{})}readNaturalSize(e){return this.options.dimension===`width`?e.scrollWidth:e.scrollHeight}cancelAnimation(){this.currentAnimation&&=(this.currentAnimation.cancel(),null)}cancelPendingRaf(){this.rafId!==null&&(cancelAnimationFrame(this.rafId),this.rafId=null)}};export{e as MeasuredDimensionController};
//# sourceMappingURL=measured-dimension-controller.js.map