@progress/kendo-vue-buttons/Chip/Chip.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as S, createVNode as t, h as D, ref as I } from "vue";
import { noop as o, templateRendering as F, getListeners as C, kendoThemeMaps as n, getTemplate as w, classNames as x, getTabIndex as M, setRef as O, Icon as l, getIconName as c, Keys as a, getRef as R, validatePackage as T } from "@progress/kendo-vue-common";
import { checkIcon as A, xCircleIcon as B } from "@progress/kendo-svg-icons";
import { FOCUS_ACTION as s } from "./focus-reducer.mjs";
import { DATA_ACTION as N } from "./data-reducer.mjs";
import { SELECTION_ACTION as d } from "./selection-reducer.mjs";
import { packageMetadata as j } from "../package-metadata.mjs";
const V = /* @__PURE__ */ S({
  name: "KendoVueChip",
  props: {
    id: String,
    text: String,
    avatar: {
      type: [String, Function, Object],
      default: function() {
      }
    },
    value: [String, Object],
    dir: {
      type: String,
      default: function() {
        return "ltr";
      }
    },
    removable: {
      type: Boolean,
      default: !1
    },
    removeIcon: {
      type: String,
      default: function() {
        return "x-circle";
      }
    },
    removeSvgIcon: {
      type: Object,
      default: function() {
        return B;
      }
    },
    disabled: {
      type: Boolean,
      default: !1
    },
    icon: String,
    svgIcon: Object,
    selectedIcon: {
      type: String,
      default: function() {
        return "check";
      }
    },
    selectedSvgIcon: {
      type: Object,
      default: function() {
        return A;
      }
    },
    size: String,
    rounded: String,
    fillMode: {
      type: String,
      validator: function(e) {
        return ["flat", "outline", "solid"].includes(e);
      }
    },
    themeColor: {
      type: String,
      validator: function(e) {
        return ["base", "error", "info", "success", "warning"].includes(e);
      }
    },
    dataItem: Object,
    selected: Boolean,
    ariaDescribedBy: String,
    role: {
      type: String,
      default: "button"
    },
    tabIndex: Number,
    onMousedown: Function
  },
  emits: {
    click: (e) => !0,
    keydown: (e) => !0,
    blur: (e) => !0,
    focus: (e) => !0,
    remove: (e) => !0
  },
  inject: {
    kendoSelection: {
      default: {
        value: null
      }
    },
    kendoFocused: {
      default: {
        value: null
      }
    },
    kendoDataItems: {
      default: null
    },
    handleDispatchDataItems: {
      default: o
    },
    handleDispatchSelection: {
      default: o
    },
    handleDispatchFocus: {
      default: o
    }
  },
  created() {
    this.currentDir = void 0, T(j);
  },
  mounted() {
    this.chip = R(this, "chip"), this.currentDir = this.$props.dir !== void 0 ? this.$props.dir === "rtl" : this.$el && getComputedStyle(this.$el).direction === "rtl" || !1;
  },
  updated() {
    this.kendoFocused.value === this.$props.value && this.$el && this.$el.focus();
  },
  computed: {
    currentSelected() {
      return this.$props.selected || (Array.isArray(this.kendoSelection.value) ? this.kendoSelection.value.some((e) => e === this.$props.value) : this.kendoSelection.value === this.$props.value);
    },
    chipLabelClass() {
      return {
        "k-chip-label": !0
      };
    }
  },
  methods: {
    computedFocused() {
      return this.kendoFocused.value === this.$props.value;
    },
    handleMouseDown(e) {
      this.$emit("mousedown", e);
    },
    handleClick(e) {
      this.handleDispatchSelection && this.handleDispatchSelection({
        type: d.toggle,
        payload: this.$props.value,
        event: e
      }), this.$emit("click", {
        target: this.target,
        event: e
      });
    },
    handleRemove(e) {
      e.stopPropagation(), this.$props.removable && (this.handleDispatchFocus && (this.handleDispatchDataItems({
        type: N.remove,
        payload: this.$props.value,
        event: e
      }), this.handleDispatchFocus({
        type: s.reset,
        payload: this.$props.value,
        event: e
      }), this.handleDispatchSelection({
        type: d.remove,
        payload: this.$props.value,
        event: e
      })), this.$emit("remove", {
        target: this.target,
        event: e
      }));
    },
    handleKeyDown(e) {
      switch (e.keyCode) {
        case a.left:
          this.handleDispatchFocus && this.handleDispatchFocus({
            type: s.prev,
            payload: this.$props.value,
            event: e
          });
          break;
        case a.right:
          this.handleDispatchFocus && this.handleDispatchFocus({
            type: s.next,
            payload: this.$props.value,
            event: e
          });
          break;
        case a.enter:
          this.handleDispatchFocus && this.handleDispatchSelection({
            type: d.toggle,
            payload: this.$props.value,
            event: e
          });
          break;
        case a.delete:
          this.handleRemove(e);
          break;
      }
      this.$emit("keydown", {
        target: this.target,
        event: e
      });
    },
    handleFocus(e) {
      this.handleDispatchFocus && this.handleDispatchFocus({
        payload: this.$props.value,
        type: s.current,
        event: e
      }), this.$emit("focus", {
        target: this.target,
        event: e
      });
    },
    handleBlur(e) {
      this.$emit("blur", {
        target: this.target,
        event: e
      });
    }
  },
  setup() {
    return {
      chipRef: I(null)
    };
  },
  render() {
    const {
      size: e,
      rounded: r,
      themeColor: h,
      fillMode: p,
      avatar: i,
      icon: u,
      svgIcon: m,
      selectedIcon: f,
      selectedSvgIcon: v,
      removeIcon: g,
      removeSvgIcon: k
    } = this.$props, $ = F.call(this, i, C.call(this)), y = i ? t("div", {
      class: `k-chip-avatar k-avatar k-rounded-${i.rounded || "medium"} k-avatar-${n.sizeMap[e] || e} k-avatar-solid k-avatar-solid-primary`,
      style: i.style
    }, [t("span", {
      class: "k-avatar-image"
    }, [t("img", {
      src: i.imageUrl,
      alt: i.imageAlt
    }, null)])]) : null, b = w.call(this, {
      h: D,
      template: $
    });
    return t("div", {
      role: this.$props.role,
      id: this.$props.value,
      ref: O(this, "chip"),
      dir: this.currentDir,
      tabindex: M(this.$props.tabIndex, this.$props.disabled, void 0),
      class: x("k-chip", {
        "k-rtl": this.currentDir === "rtl",
        "k-disabled": this.$props.disabled,
        "k-selected": this.currentSelected,
        "k-focus": this.computedFocused(),
        [`k-chip-${n.sizeMap[e] || e}`]: e,
        [`k-rounded-${n.roundedMap[r] || r}`]: r,
        [`k-chip-${h}`]: h,
        [`k-chip-${p}`]: p
      }),
      "aria-pressed": this.$props.role === "button" ? this.currentSelected : void 0,
      "aria-selected": this.$props.role === "option" ? this.currentSelected : void 0,
      "aria-disabled": this.$props.disabled,
      "aria-describedby": this.$props.ariaDescribedBy,
      onFocus: this.handleFocus,
      onBlur: this.handleBlur,
      onClick: this.handleClick,
      onKeydown: this.handleKeyDown,
      onMousedown: this.handleMouseDown
    }, [this.currentSelected && (f || v) && t(l, {
      name: c(f),
      icon: v,
      size: "small"
    }, null), (u || m) && t(l, {
      name: c(u),
      icon: m,
      size: "small"
    }, null), i ? i.imageUrl ? y : b : null, t("span", {
      class: "k-chip-content"
    }, [this.$props.text && t("span", {
      "aria-label": this.$props.text,
      class: this.chipLabelClass
    }, [this.$props.text])]), this.$props.removable && t("span", {
      class: "k-chip-actions"
    }, [t("span", {
      class: "k-chip-action k-chip-remove-action"
    }, [t(l, {
      name: c(g),
      icon: k,
      size: "small",
      onClick: this.handleRemove
    }, null)])])]);
  }
});
export {
  V as Chip
};