import { defineComponent, computed, toRef, createVNode } from "vue";
import "./styles/icon.scss";
import { makeSizeProps, useSize } from "../../composables/size/index.mjs";
import { useTextColor } from "../../composables/color/index.mjs";
import { makeIconProps } from "../../composables/icon/make-icon-props.mjs";
import { useIcon } from "../../composables/icon/use-icon.mjs";
import { flattenFragments, convertToUnit } from "../../utils/dist/index.mjs";
const Icon = defineComponent({
  name: "VeIcon",
  props: {
    color: String,
    start: Boolean,
    end: Boolean,
    ...makeSizeProps(),
    ...makeIconProps()
  },
  setup(props, {
    slots
  }) {
    const {
      iconData
    } = useIcon(computed(() => {
      var _a, _b;
      if (!slots.default)
        return props;
      const slot = (_a = slots.default) == null ? void 0 : _a.call(slots);
      if (!slot)
        return props;
      const nodes = flattenFragments(slot);
      if (typeof ((_b = nodes == null ? void 0 : nodes[0]) == null ? void 0 : _b.children) === "string") {
        return {
          tag: props.tag,
          icon: nodes[0].children
        };
      }
      return {
        tag: props.tag,
        icon: () => slot
      };
    }));
    const {
      sizeClasses
    } = useSize(props);
    const {
      textColorClasses,
      textColorStyles
    } = useTextColor(toRef(props, "color"));
    return () => {
      if (!iconData.value)
        return;
      return createVNode(iconData.value.component, {
        "tag": props.tag,
        "icon": iconData.value.icon,
        "class": ["ve-icon", "notranslate", sizeClasses.value, textColorClasses.value, {
          "ve-icon--start": props.start,
          "ve-icon--end": props.end
        }],
        "style": [!sizeClasses.value ? {
          fontSize: convertToUnit(props.size),
          width: convertToUnit(props.size),
          height: convertToUnit(props.size)
        } : void 0, textColorStyles.value],
        "aria-hidden": "true"
      }, null);
    };
  }
});
export {
  Icon
};
//# sourceMappingURL=icon.mjs.map
