import { r as s, c as i, h as e, H as a } from "./reactcomponent-44b70bf6.mjs";
import { m as o } from "./icon-b8d01d6f-ddfa2c17.mjs";
import { b as c } from "./utils-ae714467-b07fc3be.mjs";
import "react";
import "react-dom";
const h = "html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}:host{color:#1c1917;transition:300ms ease;display:flex;align-items:center;cursor:pointer}:host img{-o-object-fit:cover;object-fit:cover}:host([orientation=horizontal]){width:100%;height:100%;float:left;flex-direction:column;justify-content:center}:host([orientation=horizontal]) img{width:48px;height:48px}:host([orientation=horizontal]) p{height:16px;overflow:visible;font-size:0.875rem;line-height:1rem;text-align:center}:host([orientation=vertical]){padding:16px;flex-direction:row;font-size:1rem;font-weight:500;line-height:1.25rem}:host([orientation=vertical]) img{width:24px;height:24px}:host([orientation=vertical]) p{margin:0;padding-left:16px}:host(:hover){background-color:#fcfcfc}", l = class {
  constructor(t) {
    s(this, t), this.categoryClicked = i(this, "categoryClicked", 7), this.listItemDidRender = i(this, "listItemDidRender", 7), this.category = void 0, this.orientation = "vertical";
  }
  componentDidRender() {
    this.listItemDidRender.emit(), "objectFit" in document.documentElement.style || this.objectFitImage(this.image);
  }
  /**
   * @description Emits the category object to event listeners.
   * @private
   * @param {*} category - Category object.
   * @memberof ListItemCategory
   */
  categoryClickedHandler(t) {
    this.categoryClicked.emit(t);
  }
  /**
   * @description Set image as background image.
   * @private
   * @param {HTMLImageElement} image
   */
  objectFitImage(t) {
    t.setAttribute("style", `background: no-repeat center center url("${this.category.iconUrl}"); background-size: cover;`), t.src = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${t.width}' height='${t.height}'%3E%3C/svg%3E`;
  }
  render() {
    const t = this.orientation.toUpperCase() === "VERTICAL" ? parseInt(o.icon.size.medium.value) : parseInt(o.icon.size["xx-large"].value), r = c(this.category.iconUrl, t);
    return e(a, { onClick: () => this.categoryClickedHandler(this.category) }, e("img", { ref: (n) => this.image = n, src: r }), e("p", null, this.category.name));
  }
};
l.style = h;
export {
  l as mi_list_item_category
};
//# sourceMappingURL=mi-list-item-category.entry-90dbf1ad.mjs.map
