import { codeToEmojiData as c, stringToUnicode as u, emojiImageUrlSmall as j, emojiFileExtensionSmall as g, emojiImageUrlLarge as h, emojiFileExtensionLarge as f } from "../../common/emoji/index.js";
import { resolveComponent as D, createElementBlock as S, openBlock as L, normalizeClass as o, withDirectives as n, createVNode as E, vShow as l, createElementVNode as p } from "vue";
import { _ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import b from "../skeleton/skeleton.js";
import { ICON_SIZE_MODIFIERS as s } from "../icon/icon-constants.js";
const k = {
  compatConfig: { MODE: 3 },
  name: "DtEmoji",
  components: {
    DtSkeleton: b
  },
  props: {
    /**
     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
     * <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
     * for all supported shortcode/unicode or the docs for setting up custom emojis.
     */
    code: {
      type: String,
      required: !0
    },
    /**
     * The size of the emoji. Can be any of the icon size utility classes from
     * <a class="d-link" href="https://dialtone.dialpad.com/components/icon.html" target="_blank"> Dialpad Icon Size</a>
     * @values 100, 200, 300, 400, 500, 600, 700, 800
     */
    size: {
      type: String,
      default: "500",
      validator: (i) => Object.keys(s).includes(i)
    },
    /**
     * Additional class name for the emoji img element.
     * Can accept String, Object, and Array, i.e. has the
     * same API as Vue's built-in handling of the class attribute.
     */
    imgClass: {
      type: [String, Object, Array],
      default: ""
    },
    /**
     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
     * getEmojiData() function
     */
    ariaLabel: {
      type: String,
      default: null
    },
    /**
     * Shows a skeleton loader while the emoji asset is loading.
     * @values true, false
     */
    showSkeleton: {
      type: Boolean,
      default: !0
    }
  },
  data() {
    return {
      emojiData: null,
      imgLoading: !1
    };
  },
  computed: {
    emojiDataValid() {
      return !!this.emojiData;
    },
    emojiSrc() {
      var i;
      return this.emojiDataValid ? (i = this.emojiData) != null && i.custom ? this.emojiData.image : ["100", "200"].includes(this.size) ? j + this.emojiData.key + g : h + this.emojiData.key + f : "invalid";
    },
    emojiAlt() {
      if (this.emojiDataValid)
        return this.emojiData.unicode_output ? u(this.emojiData.unicode_output) : this.emojiData.name;
    },
    emojiLabel() {
      return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
    },
    emojiSize() {
      return s[this.size];
    }
  },
  watch: {
    code: {
      handler: function() {
        this.getEmojiData();
      },
      immediate: !0
    },
    emojiSrc: {
      handler: async function() {
        this.imgLoading = !0;
      },
      immediate: !0
    }
  },
  methods: {
    getEmojiData() {
      this.emojiData = c(this.code);
    },
    imageLoaded() {
      this.imgLoading = !1;
    },
    imageErrored() {
      this.imgLoading = !1;
    }
  }
}, y = ["aria-label", "alt", "title", "src"];
function z(i, t, r, I, m, e) {
  const d = D("dt-skeleton");
  return L(), S("span", {
    class: o(["d-emoji d-icon", e.emojiSize])
  }, [
    n(E(d, {
      offset: 0,
      class: o(["d-icon", e.emojiSize]),
      "shape-option": { shape: "circle", size: "100%" }
    }, null, 8, ["class"]), [
      [l, m.imgLoading && r.showSkeleton]
    ]),
    n(p("img", {
      ref: "emojiImg",
      class: o(["d-icon", e.emojiSize, r.imgClass]),
      "aria-label": e.emojiLabel,
      alt: e.emojiAlt,
      title: e.emojiLabel,
      src: e.emojiSrc,
      onLoad: t[0] || (t[0] = (...a) => e.imageLoaded && e.imageLoaded(...a)),
      onError: t[1] || (t[1] = (...a) => e.imageErrored && e.imageErrored(...a))
    }, null, 42, y), [
      [l, !m.imgLoading]
    ])
  ], 2);
}
const O = /* @__PURE__ */ _(k, [["render", z]]);
export {
  O as default
};
//# sourceMappingURL=emoji.js.map
