import{LitElement as e,html as t,css as i}from"lit";import{unsafeSVG as s}from"lit/directives/unsafe-svg.js";import{skeletonStyles as r}from"./styles/skeleton.js";class o extends e{static get properties(){return{a11yName:{type:String,attribute:"a11y-name"},icon:{type:Object},size:{type:String,reflect:!0},skeleton:{type:Boolean}}}constructor(){super(),this.a11yName=null,this.icon=null,this.size="md",this.skeleton=!1}updated(e){const t=e.has("a11yName")||e.has("icon"),i=this.shadowRoot.querySelector("svg");if(t&&null!=i)if(null==this.a11yName||""===this.a11yName)i.setAttribute("aria-hidden","true"),i.removeAttribute("aria-label"),i.removeAttribute("role"),i.querySelector("title")?.remove();else{i.removeAttribute("aria-hidden"),i.setAttribute("aria-label",this.a11yName),i.setAttribute("role","img");let e=i.querySelector("title");null==e&&(e=document.createElement("title"),i.prepend(e)),e.textContent=this.a11yName}}render(){if(this.skeleton)return t`<div class="skeleton"></div>`;const e=null!=this.icon?s(this.icon.content):"";return t`${e}`}static get styles(){return[r,i`
        :host {
          --skeleton-color: #bbb;

          display: inline-flex;
          height: var(--size, 1em);
          vertical-align: top;
          width: var(--size, 1em);
        }

        :host([size='xs']) {
          --size: var(--cc-icon-size, 0.5em);
        }

        :host([size='sm']) {
          --size: var(--cc-icon-size, 0.75em);
        }

        :host([size='md']) {
          --size: var(--cc-icon-size, 1em);
        }

        :host([size='lg']) {
          --size: var(--cc-icon-size, 1.5em);
        }

        :host([size='xl']) {
          --size: var(--cc-icon-size, 2.25em);
        }

        svg {
          fill: var(--cc-icon-color, currentColor);
          height: 100%;
          width: 100%;
        }

        .skeleton {
          background-color: var(--skeleton-color);
          height: var(--size, 1em);
          width: var(--size, 1em);
        }
      `]}}window.customElements.define("cc-icon",o);export{o as CcIcon};
//# sourceMappingURL=cc-icon.js.map
