import*as ComponentHelpers from"../../../components/helpers/helpers.js";import*as LitHtml from"../../../lit-html/lit-html.js";import cssAngleSwatchStyles from"./cssAngleSwatch.css.js";import{get2DTranslationsForAngle}from"./CSSAngleUtils.js";const{render:render,html:html}=LitHtml,styleMap=LitHtml.Directives.styleMap,swatchWidth=11;export class CSSAngleSwatch extends HTMLElement{static litTagName=LitHtml.literal`devtools-css-angle-swatch`;shadow=this.attachShadow({mode:"open"});angle={value:0,unit:"rad"};connectedCallback(){this.shadow.adoptedStyleSheets=[cssAngleSwatchStyles]}set data(t){this.angle=t.angle,this.render()}render(){const{translateX:t,translateY:e}=get2DTranslationsForAngle(this.angle,2.75),s={transform:`translate(${t}px, ${e}px) rotate(${this.angle.value}${this.angle.unit})`};render(html`
      <div class="swatch">
        <span class="mini-hand" style=${styleMap(s)}></span>
      </div>
    `,this.shadow,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-css-angle-swatch",CSSAngleSwatch);