import"./CSSAngleEditor.js";import"./CSSAngleSwatch.js";import*as LitHtml from"../third_party/lit-html/lit-html.js";import{convertAngleUnit,getNewAngleFromEvent,getNextUnit,parseText,roundAngleByUnit}from"./CSSAngleUtils.js";const{render:render,html:html}=LitHtml,styleMap=LitHtml.Directives.styleMap,ContextAwareProperties=new Set(["color","background","background-color"]);export class PopoverToggledEvent extends Event{constructor(e){super("popover-toggled",{}),this.data={open:e}}}export class ValueChangedEvent extends Event{constructor(e){super("value-changed",{}),this.data={value:e}}}export class UnitChangedEvent extends Event{constructor(e){super("unit-changed",{}),this.data={value:e}}}const DefaultAngle={value:0,unit:"rad"};export class CSSAngle extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.angle=DefaultAngle,this.displayedAngle=DefaultAngle,this.propertyName="",this.propertyValue="",this.angleElement=null,this.swatchElement=null,this.popoverOpen=!1,this.popoverStyleTop="",this.onMinifyingAction=this.minify.bind(this),this.onAngleUpdate=this.updateAngle.bind(this)}set data(e){const t=parseText(e.angleText);t&&(this.angle=t,this.displayedAngle={...t},this.propertyName=e.propertyName,this.propertyValue=e.propertyValue,this.containingPane=e.containingPane,this.render())}disconnectedCallback(){this.unbindMinifyingAction()}popover(){if(!this.containingPane)return;if(this.angleElement||(this.angleElement=this.shadow.querySelector(".css-angle")),this.swatchElement||(this.swatchElement=this.shadow.querySelector("devtools-css-angle-swatch")),!this.angleElement||!this.swatchElement)return;this.dispatchEvent(new PopoverToggledEvent(!0)),this.bindMinifyingAction();const e=this.swatchElement.getBoundingClientRect().bottom;if(e){const t=this.containingPane.getBoundingClientRect().top;this.popoverStyleTop=e-t+"px"}this.popoverOpen=!0,this.render(),this.angleElement.focus()}minify(){!1!==this.popoverOpen&&(this.popoverOpen=!1,this.dispatchEvent(new PopoverToggledEvent(!1)),this.unbindMinifyingAction(),this.render())}updateProperty(e,t){this.propertyName=e,this.propertyValue=t,this.render()}updateAngle(e){this.displayedAngle=roundAngleByUnit(convertAngleUnit(e,this.displayedAngle.unit)),this.angle=this.displayedAngle,this.dispatchEvent(new ValueChangedEvent(`${this.angle.value}${this.angle.unit}`))}displayNextUnit(){const e=getNextUnit(this.displayedAngle.unit);this.displayedAngle=roundAngleByUnit(convertAngleUnit(this.angle,e)),this.dispatchEvent(new UnitChangedEvent(`${this.displayedAngle.value}${this.displayedAngle.unit}`))}bindMinifyingAction(){document.addEventListener("mousedown",this.onMinifyingAction),this.containingPane&&this.containingPane.addEventListener("scroll",this.onMinifyingAction)}unbindMinifyingAction(){document.removeEventListener("mousedown",this.onMinifyingAction),this.containingPane&&this.containingPane.removeEventListener("scroll",this.onMinifyingAction)}onMiniIconClick(e){e.stopPropagation(),!e.shiftKey||this.popoverOpen?this.popoverOpen?this.minify():this.popover():this.displayNextUnit()}consume(e){e.stopPropagation()}onKeydown(e){if(this.popoverOpen)switch(e.key){case"Escape":e.stopPropagation(),this.minify(),this.blur();break;case"ArrowUp":case"ArrowDown":{const t=getNewAngleFromEvent(this.angle,e);t&&this.updateAngle(t),e.preventDefault();break}}}render(){render(html`
      <style>
        .css-angle {
          display: inline-block;
          position: relative;
          outline: none;
        }

        devtools-css-angle-swatch {
          display: inline-block;
          margin-right: 2px;
          user-select: none;
        }

        devtools-css-angle-editor {
          --dial-color: #a3a3a3;
          --border-color: var(--toolbar-bg-color);

          position: fixed;
          z-index: 2;
        }
      </style>

      <div class="css-angle" @keydown=${this.onKeydown} tabindex="-1">
        <div class="preview">
          <devtools-css-angle-swatch
            @click=${this.onMiniIconClick}
            @mousedown=${this.consume}
            @dblclick=${this.consume}
            .data=${{angle:this.angle}}>
          </devtools-css-angle-swatch><slot></slot>
        </div>
        ${this.popoverOpen?this.renderPopover():null}
      </div>
    `,this.shadow,{eventContext:this})}renderPopover(){let e="";return ContextAwareProperties.has(this.propertyName)&&!this.propertyValue.match(/url\(.*\)/i)&&(e=this.propertyValue),html`
    <devtools-css-angle-editor
      class="popover popover-css-angle"
      style=${styleMap({top:this.popoverStyleTop})}
      .data=${{angle:this.angle,onAngleUpdate:this.onAngleUpdate,background:e}}
    ></devtools-css-angle-editor>
    `}}customElements.get("devtools-css-angle")||customElements.define("devtools-css-angle",CSSAngle);