UNPKG

@sandlada/mdc

Version:

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

8 lines 2.67 kB
import{customElement as e}from"../../node_modules/@lit/reactive-element/decorators/custom-element.js";import{css as t}from"../../node_modules/@lit/reactive-element/css-tag.js";import{property as n}from"../../node_modules/@lit/reactive-element/decorators/property.js";import{query as r}from"../../node_modules/@lit/reactive-element/decorators/query.js";import"../../node_modules/lit/decorators.js";import{html as i}from"../../node_modules/lit-html/lit-html.js";import{LitElement as a}from"../../node_modules/lit-element/lit-element.js";import"../../node_modules/lit/index.js";import o from"../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";import{styleMap as s}from"../../node_modules/lit-html/directives/style-map.js";import"../../node_modules/lit/directives/style-map.js";import{DraggableModalController as c}from"./draggable-modal-controller.js"; /** * @license * Copyright 2025 Kai-Orion & Sandlada * SPDX-License-Identifier: MIT */ let l=class extends a{static{this.styles=t`:host([position=fixed]){position:fixed}:host([position=absolute]){position:absolute}`}constructor(){super(),this.boundaryProtection=!1,this.position=`fixed`,this.controller=new c(this),this.handleInteractionStart=e=>{e.target.closest(`[data-drag-handle]`)&&this.controller.startDrag(e)},this.addController(this.controller)}get clientWidth(){return this.surfaceElement.clientWidth}get offsetWidth(){return this.surfaceElement.offsetWidth}get offsetLeft(){return this.surfaceElement.offsetLeft}get clientHeight(){return this.surfaceElement.clientHeight}get offsetHeight(){return this.surfaceElement.offsetHeight}get offsetTop(){return this.surfaceElement.offsetTop}getClientRects(){return this.surfaceElement.getClientRects()}getBoundingClientRect(){return this.surfaceElement.getBoundingClientRect()}willUpdate(e){e.has(`boundaryProtection`)&&(this.controller.boundaryProtection=this.boundaryProtection),e.has(`position`)&&(this.controller.positioningMode=this.position)}render(){let e={position:this.controller.positioningMode,left:`${this.controller.position.x}px`,top:`${this.controller.position.y}px`,cursor:this.controller.isDragging?`grabbing`:`default`};return i`<div class="draggable-container" style="${s(e)}" @mousedown="${this.handleInteractionStart}" @touchstart="${this.handleInteractionStart}"><slot></slot></div>`}};o([n({type:Boolean,attribute:`boundary-protection`,reflect:!0})],l.prototype,`boundaryProtection`,void 0),o([n({type:String,reflect:!0})],l.prototype,`position`,void 0),o([r(`.draggable-container`)],l.prototype,`surfaceElement`,void 0),l=o([e(`mdc-draggable-modal`)],l);export{l as MDCDraggableModal}; //# sourceMappingURL=draggable-modal.js.map