import { r as registerInstance, c as createEvent, h } from './index-baa5e267.js';

const ezRichToolbarItemCss = "ez-icon.sc-ez-rich-toolbar-item{--ez-icon--color:var(--color--secondary, #383c45)}.rich-toolbar-item.sc-ez-rich-toolbar-item{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:4px;cursor:pointer;transition:0.3s all ease-in-out}.rich-toolbar-item.sc-ez-rich-toolbar-item:hover{background-color:#f5f5f5}";

const EzRichToolbarItem = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.actionTriggered = createEvent(this, "actionTriggered", 7);
    this.icon = undefined;
    this.command = undefined;
    this.title = undefined;
    this.value = undefined;
  }
  async triggerAction() {
    this.actionTriggered.emit({ command: this.command, value: this.value });
  }
  render() {
    return (h("div", { id: `rich-toolbar-item-${this.icon}`, class: `rich-toolbar-item`, title: this.title, onClick: this.triggerAction.bind(this) }, h("ez-icon", { class: 'toolbar-item', iconName: this.icon })));
  }
};
EzRichToolbarItem.style = ezRichToolbarItemCss;

export { EzRichToolbarItem as ez_rich_toolbar_item };
