@progress/kendo-vue-grid/cells/GridGroupCell.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 N, createVNode as l, mergeProps as A, h as L } from "vue";
import { noop as w, Icon as K, getTemplate as R, Keys as T } from "@progress/kendo-vue-common";
import { KEYBOARD_NAV_DATA_ID as D, KEYBOARD_NAV_DATA_LEVEL as E, GROUP_EXPAND_ACTION as O } from "@progress/kendo-vue-data-tools";
import { groupCaretAriaLabelCollapse as x, messages as y, groupCaretAriaLabelExpand as C } from "../messages/main.mjs";
import { provideLocalizationService as I } from "@progress/kendo-vue-intl";
import { chevronLeftIcon as G, chevronRightIcon as _, chevronDownIcon as P } from "@progress/kendo-svg-icons";
const B = (e) => {
  var t, n;
  return (n = (t = e.cells) == null ? void 0 : t.group) == null ? void 0 : n[e.rowType || "data"];
}, U = /* @__PURE__ */ N({
  name: "KendoGridGroupCell",
  inheritAttrs: !1,
  props: {
    id: String,
    field: String,
    dataItem: Object,
    format: String,
    type: String,
    colSpan: Number,
    className: String,
    columnIndex: Number,
    columnsCount: Number,
    rowType: String,
    level: Number,
    locked: Boolean,
    expanded: Boolean,
    editor: String,
    dataIndex: Number,
    isSelected: Boolean,
    isRtl: Boolean,
    ariaColumnIndex: Number,
    group: Object,
    render: [String, Function, Object],
    cells: Object
  },
  emits: {
    change: null,
    cellkeydown: null
  },
  inject: {
    gridContext: {
      default: null
    },
    kendoIntlService: {
      default: null
    },
    kendoLocalizationService: {
      default: null
    },
    getKeyboardNavigationAttributes: {
      default: w
    }
  },
  computed: {
    tdClass() {
      const {
        className: e,
        locked: t
      } = this.$props;
      return {
        "k-table-td": !0,
        "k-grid-content-sticky": t,
        [e]: e
      };
    },
    tdStyle() {
      const {
        locked: e
      } = this.$props, t = e ? {
        position: "sticky",
        zIndex: 2
      } : {};
      return {
        ...this.$attrs.style,
        ...t
      };
    },
    groupTdClass() {
      const {
        className: e,
        locked: t
      } = this.$props;
      return {
        "k-table-td": !0,
        "k-group-cell": !0,
        "k-grid-content-sticky": t,
        [e]: e
      };
    }
  },
  methods: {
    triggerStateChange() {
      var t;
      const e = this.gridContext;
      (t = e == null ? void 0 : e.dispatchGroupExpand) == null || t.call(e, {
        type: O.TOGGLE,
        group: this.$props.group
      });
    },
    triggerKeydown(e, t) {
      this.$emit("cellkeydown", {
        event: e,
        dataItem: this.$props.dataItem,
        dataIndex: this.$props.dataIndex,
        field: this.$props.field,
        expanded: this.$props.expanded
      }), !e.defaultPrevented && e.keyCode === T.enter && (e.preventDefault(), this.$emit("change", {
        dataItem: this.$props.dataItem,
        dataIndex: this.$props.dataIndex,
        event: e,
        level: this.$props.level,
        field: void 0,
        value: !t
      }), this.triggerStateChange());
    },
    clickHandler(e, t, n) {
      e.preventDefault(), this.$emit("change", {
        dataItem: t,
        dataIndex: this.$props.dataIndex,
        event: e,
        level: this.$props.level,
        field: void 0,
        value: !n
      }), this.triggerStateChange();
    },
    triggerContextMenu(e) {
      var t, n;
      (n = (t = this.gridContext) == null ? void 0 : t.onContextMenu) == null || n.call(t, e, this.$props.dataItem, this.$props.field);
    }
  },
  render() {
    let e = null, t, n, d = null;
    const {
      columnIndex: r,
      level: s,
      columnsCount: c,
      rowType: b,
      dataItem: i,
      field: p,
      expanded: o,
      render: $,
      locked: a
    } = this.$props, u = this.getKeyboardNavigationAttributes(this.$props.id), h = I(this).toLanguageString(x, y[x]), m = I(this).toLanguageString(C, y[C]);
    if (r === void 0 || s === void 0 || r < s || c === void 0 || b !== "groupHeader" || i[p] === void 0)
      t = {
        style: this.$attrs.style,
        key: "g" + r,
        class: this.groupTdClass
      }, e = l("td", t, null);
    else if (r <= s) {
      t = {
        style: this.tdStyle,
        key: "g-colspan",
        class: a ? "k-table-td" : this.tdClass,
        colspan: a ? 0 : c - r,
        role: "gridcell",
        "aria-colindex": this.$props.ariaColumnIndex,
        "aria-selected": this.$props.isSelected,
        "aria-expanded": o,
        "data-grid-col-index": this.$props.columnIndex,
        tabindex: u.tabIndex,
        "data-keyboardnavlevel": u[E],
        "data-keyboardnavid": u[D]
      };
      const v = this.isRtl ? "chevron-left" : "chevron-right", S = this.isRtl ? G : _;
      d = l("p", {
        class: "k-reset"
      }, [l("a", {
        onClick: (g) => {
          this.clickHandler(g, i, o);
        },
        href: "#",
        tabindex: -1,
        title: o ? h : m,
        "aria-label": o ? h : m
      }, [l(K, {
        name: o ? "chevron-down" : v,
        icon: o ? P : S
      }, null)]), i[p] ? i[p].toString() : ""]);
      const f = l("td", A(t, {
        onKeydown: (g) => {
          this.triggerKeydown(g, o);
        }
      }), [d]);
      a && (n = {
        className: "k-table-td",
        role: "gridcell",
        colSpan: c - r,
        style: {
          borderLeftWidth: 0,
          borderRightWidth: 0
        }
      });
      const k = a ? l("td", n, null) : null;
      e = k ? [f, k] : f;
    }
    return R.call(this, {
      h: L,
      template: $ || B(this.$props),
      defaultRendering: e,
      additionalProps: {
        ...this.$props,
        tdProps: t,
        td2Props: n
      },
      additionalListeners: {
        keydown: this.triggerKeydown,
        click: this.clickHandler,
        contextmenu: this.triggerContextMenu
      },
      defaultSlots: d
    });
  }
});
export {
  U as GridGroupCell
};