import*as ComponentHelpers from"../../../components/helpers/helpers.js";import*as LitHtml from"../../../lit-html/lit-html.js";import cssAngleStyles from"./cssAngle.css.js";import{convertAngleUnit,getNewAngleFromEvent,getNextUnit,parseText,roundAngleByUnit}from"./CSSAngleUtils.js";import{ValueChangedEvent}from"./InlineEditorUtils.js";import{CSSAngleEditor}from"./CSSAngleEditor.js";import{CSSAngleSwatch}from"./CSSAngleSwatch.js";const{render:render,html:html}=LitHtml,styleMap=LitHtml.Directives.styleMap,ContextAwareProperties=new Set(["color","background","background-color"]);export class PopoverToggledEvent extends Event{static eventName="popovertoggled";data;constructor(e){super(PopoverToggledEvent.eventName,{}),this.data={open:e}}}export class UnitChangedEvent extends Event{static eventName="unitchanged";data;constructor(e){super(UnitChangedEvent.eventName,{}),this.data={value:e}}}const DefaultAngle={value:0,unit:"rad"};export class CSSAngle extends HTMLElement{static litTagName=LitHtml.literal`devtools-css-angle`;shadow=this.attachShadow({mode:"open"});angle=DefaultAngle;displayedAngle=DefaultAngle;propertyName="";propertyValue="";containingPane;angleElement=null;swatchElement=null;popoverOpen=!1;popoverStyleTop="";popoverStyleLeft="";onMinifyingAction=this.minify.bind(this);connectedCallback(){this.shadow.adoptedStyleSheets=[cssAngleStyles]}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,t=this.swatchElement.getBoundingClientRect().left;if(e&&t){const n=this.containingPane.getBoundingClientRect().top,i=this.containingPane.getBoundingClientRect().left;this.popoverStyleTop=e-n+"px",this.popoverStyleLeft=t-i+"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`
      <div class="css-angle" @keydown=${this.onKeydown} tabindex="-1">
        <div class="preview">
          <${CSSAngleSwatch.litTagName}
            @click=${this.onMiniIconClick}
            @mousedown=${this.consume}
            @dblclick=${this.consume}
            .data=${{angle:this.angle}}>
          </${CSSAngleSwatch.litTagName}><slot></slot></div>
        ${this.popoverOpen?this.renderPopover():null}
      </div>
    `,this.shadow,{host:this})}renderPopover(){let e="";return ContextAwareProperties.has(this.propertyName)&&!this.propertyValue.match(/url\(.*\)/i)&&(e=this.propertyValue),html`
    <${CSSAngleEditor.litTagName}
      class="popover popover-css-angle"
      style=${styleMap({top:this.popoverStyleTop,left:this.popoverStyleLeft})}
      .data=${{angle:this.angle,onAngleUpdate:e=>{this.updateAngle(e)},background:e}}
    ></${CSSAngleEditor.litTagName}>
    `}}ComponentHelpers.CustomElements.defineComponent("devtools-css-angle",CSSAngle);