import{__decorate as t}from"tslib";import{LitElement as e,html as n}from"lit";import{property as i,state as l,customElement as r}from"lit/decorators.js";const s=new Set(["p","h1","h2","h3","h4","h5","h6"]);function a(t){return s.has(t)}let o=class extends e{constructor(){super(...arguments),this.type="",this.options="[]",this.label="",this.disabled=!1,this.selectedValue=""}createRenderRoot(){return this}mapAlignIcon(t){return{left:"format_align_left",center:"format_align_middle",right:"format_align_right",justify:"format_align_justify"}[t]||"format_align_left"}get parsedOptions(){const t=this.optionsObj??this.options;let e=(()=>{if(Array.isArray(t))return t;try{return JSON.parse(String(t))}catch{return[]}})();"align"===this.type&&0===e.length&&(e=[{value:"left",label:"Align Left"},{value:"center",label:"Align Center"},{value:"right",label:"Align Right"},{value:"justify",label:"Justify"}]);let n=e.map((t=>{const e=t?.value??t;return{value:e,label:t?.label??t?.value??t,icon:t?.icon??("align"===this.type?this.mapAlignIcon(String(e)):void 0)}}));if("heading"===this.type){n.length;n=n.filter((t=>a(t.value))),n.length,this.selectedValue&&!a(this.selectedValue)&&(this.selectedValue="")}return n}ensureDefault(){if(!this.selectedValue){const t=this.parsedOptions[0];t&&(this.selectedValue=t.value)}}onSelect(t){"heading"!==this.type||a(t)?(this.selectedValue=t,this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))):console.warn(`[nile-rte-select] Ignoring invalid heading value: ${t}`)}connectedCallback(){super.connectedCallback(),this.injectLocalStyles()}injectLocalStyles(){if(this.querySelector("style[data-rte-select-style]"))return;const t=document.createElement("style");t.setAttribute("data-rte-select-style","true"),t.textContent="\n      nile-menu.rte-align-menu::part(menu__items-wrapper) {\n        display: flex;\n      }\n      nile-menu.rte-align-menu,\n      nile-menu.rte-default-menu {\n        margin-top: 0px;\n      }\n      nile-button.rte-align-trigger::part(base),\n      nile-button.rte-default-trigger::part(base) {\n        min-width: 32px;\n        height: 32px;\n        padding: 0px 6px;\n        box-shadow: none;\n      }\n  nile-button.rte-align-trigger::part(base) {\n\n  border: none;\n}\n\n \n    ",this.insertBefore(t,this.firstChild)}render(){const t=this.parsedOptions;this.ensureDefault();const e=t.find((t=>t.value===this.selectedValue));if("align"===this.type){const i=e?.icon?n`<nile-icon name="${e.icon}" color=${this.disabled?"var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle))":"var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))"} size="20"></nile-icon>`:this.label||"Align";return n`
        <nile-dropdown ?disabled=${this.disabled} class="rte-align-dd">
          <nile-button
            slot="trigger"
            variant="tertiary"
            class="rte-align-trigger"
            ?disabled=${this.disabled}
          >
            ${i}
          </nile-button>
          <nile-menu class="rte-align-menu">
            ${t.map((t=>n`
                <nile-menu-item
                  class="rte-align-item"
                  ?active=${t.value===this.selectedValue}
                  @click=${()=>this.onSelect(t.value)}
                >
                  <nile-tooltip hoist content="${t.label}">
                    <nile-icon name="${t.icon}"></nile-icon>
                  </nile-tooltip>
                </nile-menu-item>
              `))}
          </nile-menu>
        </nile-dropdown>
      `}if("font"===this.type){const i=e?.label||this.label||"Font";return n`
        <nile-dropdown class="rte-default-dd">
          <nile-button
            slot="trigger"
            variant="tertiary"
            class="rte-default-trigger"
            style="font-family: ${e?.value||"inherit"}"
          >
            ${i} <nile-icon name="arrowdown"></nile-icon>
          </nile-button>
          <nile-menu class="rte-default-menu">
            ${t.map((t=>n`
                <nile-menu-item
                  style="font-family: ${t.value}"
                  ?active=${t.value===this.selectedValue}
                  @click=${()=>this.onSelect(t.value)}
                >
                  ${t.label}
                </nile-menu-item>
              `))}
          </nile-menu>
        </nile-dropdown>
      `}const i=e?.label||this.label||"Select";return n`
      <nile-dropdown class="rte-default-dd">
        <nile-button
          slot="trigger"
          variant="tertiary"
          class="rte-default-trigger"
        >
          ${i} <nile-icon name="arrowdown"></nile-icon>
        </nile-button>
        <nile-menu class="rte-default-menu">
          ${t.map((t=>n`
              <nile-menu-item
                ?active=${t.value===this.selectedValue}
                @click=${()=>this.onSelect(t.value)}
              >
                ${t.label}
              </nile-menu-item>
            `))}
        </nile-menu>
      </nile-dropdown>
    `}};t([i({type:String,attribute:!0,reflect:!0})],o.prototype,"type",void 0),t([i({type:String,attribute:!0,reflect:!0})],o.prototype,"options",void 0),t([i({attribute:!1})],o.prototype,"optionsObj",void 0),t([i({type:String,attribute:!0,reflect:!0})],o.prototype,"label",void 0),t([i({type:Boolean,attribute:!0,reflect:!0})],o.prototype,"disabled",void 0),t([l()],o.prototype,"selectedValue",void 0),o=t([r("nile-rte-select")],o);
