import*as Host from"../../../../core/host/host.js";import*as ComponentHelpers from"../../../components/helpers/helpers.js";import*as LitHtml from"../../../lit-html/lit-html.js";import cssLengthStyles from"./cssLength.css.js";import{LENGTH_UNITS,parseText}from"./CSSLengthUtils.js";import{ValueChangedEvent}from"./InlineEditorUtils.js";const{render:render,html:html,Directives:{classMap:classMap}}=LitHtml;export class DraggingFinishedEvent extends Event{static eventName="draggingfinished";constructor(){super(DraggingFinishedEvent.eventName,{})}}const DefaultLength={value:0,unit:"px"};export class CSSLength extends HTMLElement{static litTagName=LitHtml.literal`devtools-css-length`;shadow=this.attachShadow({mode:"open"});onDraggingValue=this.dragValue.bind(this);length=DefaultLength;overloaded=!1;isEditingSlot=!1;isDraggingValue=!1;currentMouseClientX=0;#e=0;set data(e){const t=parseText(e.lengthText);t&&(this.length=t,this.overloaded=e.overloaded,this.render())}connectedCallback(){this.shadow.adoptedStyleSheets=[cssLengthStyles]}onUnitChange(e){this.length.unit=e.target.value,this.dispatchEvent(new ValueChangedEvent(`${this.length.value}${this.length.unit}`)),this.dispatchEvent(new DraggingFinishedEvent),this.render()}dragValue(e){if(e.preventDefault(),e.stopPropagation(),Date.now()-this.#e<=300)return;this.isDraggingValue=!0;let t=e.clientX-this.currentMouseClientX;this.currentMouseClientX=e.clientX,e.shiftKey&&(t*=10),e.altKey&&(t*=.1),this.length.value=this.length.value+t,this.dispatchEvent(new ValueChangedEvent(`${this.length.value}${this.length.unit}`)),this.render()}onValueMousedown(e){if(0!==e.button)return;this.#e=Date.now(),this.currentMouseClientX=e.clientX;const t=e.target instanceof Node&&e.target.ownerDocument;t&&(t.addEventListener("mousemove",this.onDraggingValue,{capture:!0}),t.addEventListener("mouseup",(e=>{t.removeEventListener("mousemove",this.onDraggingValue,{capture:!0}),this.isDraggingValue&&(e.preventDefault(),e.stopPropagation(),this.isDraggingValue=!1,this.dispatchEvent(new DraggingFinishedEvent))}),{once:!0,capture:!0}))}onValueMouseup(){this.isDraggingValue||(this.isEditingSlot=!0,this.render())}onUnitMouseup(e){e.preventDefault(),e.stopPropagation(),Host.userMetrics.swatchActivated(8)}render(){const e={"css-length":!0,overloaded:this.overloaded};render(html`
      <div class=${classMap(e)}>
        ${this.renderContent()}
      </div>
    `,this.shadow,{host:this})}renderContent(){if(this.isEditingSlot)return html`<slot></slot>`;const e=LENGTH_UNITS.map((e=>html`
          <option value=${e} .selected=${this.length.unit===e}>${e}</option>
        `));return html`
        <span class="value"
          @mousedown=${this.onValueMousedown}
          @mouseup=${this.onValueMouseup}
        >${this.length.value}</span><span class="unit">${this.length.unit}</span><div class="unit-dropdown">
          <span class="icon"></span>
          <select @mouseup=${this.onUnitMouseup} @change=${this.onUnitChange}>
            ${e}
          </select>
        </div>
      `}}ComponentHelpers.CustomElements.defineComponent("devtools-css-length",CSSLength);