import { customEmojiAssetUrl as o, emojiImageUrlSmall as r, emojiFileExtensionSmall as m, emojiImageUrlLarge as s, emojiFileExtensionLarge as n, stringToUnicode as l, codeToEmojiData as d } from "../../common/emoji/index.js";
import { n as c } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import j from "../skeleton/skeleton.js";
import { ICON_SIZE_MODIFIERS as a } from "../icon/icon-constants.js";
const u = {
  name: "DtEmoji",
  components: {
    DtSkeleton: j
  },
  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(a).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 ? o + this.emojiData.key + this.emojiData.extension : ["100", "200"].includes(this.size) ? r + this.emojiData.key + m : s + this.emojiData.key + n : "invalid";
    },
    emojiAlt() {
      if (this.emojiDataValid)
        return this.emojiData.unicode_output ? l(this.emojiData.unicode_output) : this.emojiData.name;
    },
    emojiLabel() {
      return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
    },
    emojiSize() {
      return a[this.size];
    }
  },
  watch: {
    code: {
      handler: function() {
        this.getEmojiData();
      },
      immediate: !0
    },
    emojiSrc: {
      handler: async function() {
        this.imgLoading = !0;
      },
      immediate: !0
    }
  },
  methods: {
    getEmojiData() {
      this.emojiData = d(this.code);
    },
    imageLoaded() {
      this.imgLoading = !1;
    },
    imageErrored() {
      this.imgLoading = !1;
    }
  }
};
var h = function() {
  var e = this, t = e._self._c;
  return t("span", { class: ["d-emoji d-icon", e.emojiSize] }, [t("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: e.imgLoading && e.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", e.emojiSize], attrs: { offset: 0, "shape-option": { shape: "circle", size: "100%" } } }), t("img", { directives: [{ name: "show", rawName: "v-show", value: !e.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", e.emojiSize, e.imgClass], attrs: { "aria-label": e.emojiLabel, alt: e.emojiAlt, title: e.emojiLabel, src: e.emojiSrc }, on: { load: e.imageLoaded, error: e.imageErrored } })], 1);
}, g = [], f = /* @__PURE__ */ c(
  u,
  h,
  g
);
const _ = f.exports;
export {
  _ as default
};
//# sourceMappingURL=emoji.js.map
