function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
/**
 * 由 {@link FloorRoomCardData} 渲染 RoomCard 内容（Shell + HeaderView + BodyView），
 * 不含根节点 `pisell-res-floor-room-card`、不含每分钟 tick；平面图容器与弹窗分别外包。
 */
import React, { useState } from 'react';
import classNames from 'classnames';
import { locales } from '@pisell/utils';
import { PisellModal } from '@pisell/materials';
import { buildRoomCardBodyViewModel } from "./buildCardBodyViewModel";
import { floorRoomCardBookingCheckoutDomKey } from "./floorRoomCardDom";
import { formatRoomCapLine, floorRoomCardStatusTagLabel } from "./floorRoomCardHeaderFormat";
import { getFloorRoomCardExplicitNextBooking, getFloorRoomCardPrimaryBooking, getFloorRoomCardReservedRowBodyType, getFloorRoomCardType, maskPisellReservationPhoneTail, reorderBookingsAllReservedChronological, resolveFloorRoomCardProgressPercent } from "./floorRoomCardUtils";
import { RoomCardBodyView, RoomCardNextBookingStrip } from "./views/RoomCardBodyView";
import { RoomCardHeaderView } from "./views/RoomCardHeaderView";
import { RoomCardShellView } from "./views/RoomCardShellView";
import "./ReservationFloorRoomCard.less";
var I18N_STATUS_LOCK = 'pisell-reservation.room-status-locked';
var I18N_VIEW_ALL = 'pisell-reservation.room-view-all';
var I18N_MODAL_BOOKINGS = 'pisell-reservation.room-modal-bookings';
var I18N_NEXT = 'pisell-reservation.room-next-prefix';
function i18nN(key, n) {
  return locales.getText(key).replace(/\{n\}/g, String(n));
}

/** Next 条客人展示：与 {@link buildCardBodyViewModel} guestDisplayLine 一致（预留态 showPhone） */
function nextGuestLineForStrip(b) {
  var _b$holder, _b$holder2;
  var n = (_b$holder = b.holder) === null || _b$holder === void 0 || (_b$holder = _b$holder.name) === null || _b$holder === void 0 ? void 0 : _b$holder.trim();
  if (n) return n;
  var ph = (_b$holder2 = b.holder) === null || _b$holder2 === void 0 ? void 0 : _b$holder2.phone;
  if (ph) {
    var m = maskPisellReservationPhoneTail(ph);
    if (m) return m;
  }
  return null;
}
var floorCardStopCanvasPanHandlers = {
  onPointerDown: function onPointerDown(e) {
    return e.stopPropagation();
  },
  onPointerMove: function onPointerMove(e) {
    return e.stopPropagation();
  },
  onPointerUp: function onPointerUp(e) {
    return e.stopPropagation();
  },
  onPointerCancel: function onPointerCancel(e) {
    return e.stopPropagation();
  },
  onMouseDown: function onMouseDown(e) {
    return e.stopPropagation();
  },
  onMouseMove: function onMouseMove(e) {
    return e.stopPropagation();
  },
  onTouchStart: function onTouchStart(e) {
    return e.stopPropagation();
  },
  onTouchMove: function onTouchMove(e) {
    return e.stopPropagation();
  },
  onTouchEnd: function onTouchEnd(e) {
    return e.stopPropagation();
  },
  onWheel: function onWheel(e) {
    return e.stopPropagation();
  }
};
function scheduleCloseViewAllBookingsModal(setOpen, e) {
  var _e$nativeEvent, _e$nativeEvent$stopIm;
  e === null || e === void 0 || e.stopPropagation();
  e === null || e === void 0 || (_e$nativeEvent = e.nativeEvent) === null || _e$nativeEvent === void 0 || (_e$nativeEvent$stopIm = _e$nativeEvent.stopImmediatePropagation) === null || _e$nativeEvent$stopIm === void 0 || _e$nativeEvent$stopIm.call(_e$nativeEvent);
  window.setTimeout(function () {
    return setOpen(false);
  }, 50);
}
var FLOOR_CARD_VIEW_ALL_MODAL_MASK_PROPS = {
  onMouseDown: function onMouseDown(e) {
    return e.stopPropagation();
  },
  onClick: function onClick(e) {
    return e.stopPropagation();
  }
};

/** 与 `ReservationFloorRoomCard.less` 中 `.pisell-lowcode-modal-body` padding 配套 */
var FLOOR_CARD_VIEW_ALL_MODAL_WRAP_CLASS = 'pisell-res-floor-view-all-modal-wrap';
var MULTI_PREVIEW_MAX = 3;
var CIRCLE_MULTI_MORE_BTN_RESERVE_PX = 46;
function circleMultiCompactRowEst(innerDiameterPx) {
  return Math.round(Math.max(42, Math.min(64, innerDiameterPx * 0.15)));
}
function resolveCircleMultiPreviewCount(shellShape, bookingCount, layoutHeightPx) {
  if (bookingCount < 1) return 0;
  if (shellShape !== 'circle') return Math.min(MULTI_PREVIEW_MAX, bookingCount);
  var H = layoutHeightPx != null && Number.isFinite(layoutHeightPx) && layoutHeightPx > 0 ? layoutHeightPx : null;
  if (H == null || H < 48) {
    if (bookingCount > MULTI_PREVIEW_MAX) return 1;
    return Math.min(MULTI_PREVIEW_MAX, bookingCount);
  }
  var padY = Math.round(Math.max(7, Math.min(18, H * 0.065)));
  var inner = Math.max(0, H - padY * 2);
  var headerReserve = Math.min(115, Math.max(54, inner * 0.35));
  var listMax = Math.max(0, inner - headerReserve - 10);
  var moreH = CIRCLE_MULTI_MORE_BTN_RESERVE_PX;
  var rowEst = circleMultiCompactRowEst(inner);
  var topK = Math.min(MULTI_PREVIEW_MAX, bookingCount);
  var needMoreBtn = bookingCount > topK;
  if (listMax < moreH && needMoreBtn) {
    return 0;
  }
  for (var k = topK; k >= 0; k--) {
    var needMore = bookingCount > k;
    var total = k * rowEst + (needMore ? moreH + (k > 0 ? 6 : 0) : 0);
    if (total <= listMax) return k;
  }
  return 0;
}
function effectiveRoomTitle(data, headerMainFieldOverride) {
  var o = headerMainFieldOverride === null || headerMainFieldOverride === void 0 ? void 0 : headerMainFieldOverride.trim();
  return o || data.main_field;
}
function CardHeader(props) {
  var data = props.data,
    occupancyBookings = props.occupancyBookings,
    _props$hideCapacity = props.hideCapacity,
    hideCapacity = _props$hideCapacity === void 0 ? false : _props$hideCapacity,
    headerMainFieldOverride = props.headerMainFieldOverride;
  var bookingsForOcc = occupancyBookings !== undefined ? occupancyBookings : data.bookings;
  var capLabel = hideCapacity ? null : formatRoomCapLine(data, bookingsForOcc);
  return /*#__PURE__*/React.createElement(RoomCardHeaderView, {
    roomTitle: effectiveRoomTitle(data, headerMainFieldOverride),
    capacityLine: capLabel,
    status: data.status,
    statusLabel: floorRoomCardStatusTagLabel(data.status)
  });
}
function buildRoomViewAllModalTitle(data, bookingsForOcc, headerMainFieldOverride) {
  var capLabel = formatRoomCapLine(data, bookingsForOcc);
  var n = bookingsForOcc.length;
  var bookingsLine = i18nN(I18N_MODAL_BOOKINGS, n);
  var head = effectiveRoomTitle(data, headerMainFieldOverride);
  return /*#__PURE__*/React.createElement("div", {
    className: "rc-view-all-modal-title"
  }, head, ' · ', bookingsLine, ' · ', capLabel);
}
function CardBody(props) {
  var cardType = props.cardType,
    booking = props.booking,
    data = props.data,
    _props$compact = props.compact,
    compact = _props$compact === void 0 ? false : _props$compact,
    _props$shellShape = props.shellShape,
    shellShape = _props$shellShape === void 0 ? 'rect' : _props$shellShape;
  var model = buildRoomCardBodyViewModel({
    cardType: cardType,
    booking: booking,
    data: data,
    compact: compact,
    shellShape: shellShape,
    nowMs: Date.now()
  });
  return /*#__PURE__*/React.createElement(RoomCardBodyView, {
    model: model,
    scrollSurfaceHandlers: floorCardStopCanvasPanHandlers,
    nextBookingPrefix: locales.getText(I18N_NEXT)
  });
}
var CARD_CLASS = {
  not_arrived: 'rc rc--reserved',
  late: 'rc rc--reserved',
  payed: 'rc rc--occupied',
  payment_required: 'rc rc--occupied rc--occupied-pay',
  timeout: 'rc rc--occupied rc--occupied-timeout'
};
function StandardCard(props) {
  var data = props.data,
    cardType = props.cardType,
    _props$hideHeaderCapa = props.hideHeaderCapacity,
    hideHeaderCapacity = _props$hideHeaderCapa === void 0 ? false : _props$hideHeaderCapa,
    headerMainFieldOverride = props.headerMainFieldOverride,
    _props$shellShape2 = props.shellShape,
    shellShape = _props$shellShape2 === void 0 ? 'rect' : _props$shellShape2;
  var booking = getFloorRoomCardPrimaryBooking(data);
  if (!booking) {
    return /*#__PURE__*/React.createElement(EmptyCard, {
      data: data,
      hideHeaderCapacity: hideHeaderCapacity,
      headerMainFieldOverride: headerMainFieldOverride
    });
  }
  return /*#__PURE__*/React.createElement(RoomCardShellView, {
    className: CARD_CLASS[cardType],
    checkoutBookingKey: floorRoomCardBookingCheckoutDomKey(booking),
    header: /*#__PURE__*/React.createElement(CardHeader, {
      data: data,
      hideCapacity: hideHeaderCapacity,
      headerMainFieldOverride: headerMainFieldOverride
    })
  }, /*#__PURE__*/React.createElement(CardBody, {
    cardType: cardType,
    booking: booking,
    data: data,
    shellShape: shellShape
  }));
}
function EmptyCard(props) {
  var data = props.data,
    hideHeaderCapacity = props.hideHeaderCapacity,
    headerMainFieldOverride = props.headerMainFieldOverride;
  return /*#__PURE__*/React.createElement(RoomCardShellView, {
    className: "rc rc--empty",
    header: /*#__PURE__*/React.createElement(CardHeader, {
      data: data,
      hideCapacity: hideHeaderCapacity,
      headerMainFieldOverride: headerMainFieldOverride
    })
  });
}
function MultiOccupiedCard(props) {
  var data = props.data,
    _props$shellShape3 = props.shellShape,
    shellShape = _props$shellShape3 === void 0 ? 'rect' : _props$shellShape3,
    elementLayoutHeightPx = props.elementLayoutHeightPx,
    hideHeaderCapacity = props.hideHeaderCapacity,
    headerMainFieldOverride = props.headerMainFieldOverride;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    modalOpen = _useState2[0],
    setModalOpen = _useState2[1];
  var mainBookings = data.bookings.filter(function (b) {
    return b.isNext !== true;
  });
  var listForPreview = mainBookings.length > 0 ? mainBookings : data.bookings;
  var explicitNextOcc = getFloorRoomCardExplicitNextBooking(data);
  var n = listForPreview.length;
  var previewCount = resolveCircleMultiPreviewCount(shellShape, n, elementLayoutHeightPx);
  var preview = listForPreview.slice(0, previewCount);
  var hasMore = n > preview.length;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RoomCardShellView, {
    className: classNames('rc rc--occupied rc--multi', modalOpen && 'rc--floor-detail-open'),
    header: /*#__PURE__*/React.createElement(CardHeader, {
      data: data,
      occupancyBookings: data.bookings,
      hideCapacity: hideHeaderCapacity,
      headerMainFieldOverride: headerMainFieldOverride
    })
  }, /*#__PURE__*/React.createElement("div", _extends({
    className: "rc-multi-list",
    "data-pisell-floor-room-scroll-surface": ""
  }, floorCardStopCanvasPanHandlers), preview.map(function (b) {
    var progress = resolveFloorRoomCardProgressPercent(b);
    var perType = progress >= 100 ? 'timeout' : data.sub_status === 'payed' ? 'payed' : 'payment_required';
    return /*#__PURE__*/React.createElement(CardBody, {
      key: floorRoomCardBookingCheckoutDomKey(b),
      cardType: perType,
      booking: b,
      data: data,
      compact: true,
      shellShape: shellShape
    });
  }), explicitNextOcc ? /*#__PURE__*/React.createElement(RoomCardNextBookingStrip, {
    nextLabel: locales.getText(I18N_NEXT),
    guestLine: nextGuestLineForStrip(explicitNextOcc),
    timeRange: "".concat(explicitNextOcc.start_time, " - ").concat(explicitNextOcc.end_time)
  }) : null, hasMore ? /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "rc-multi-more",
    onClick: function onClick(e) {
      e.stopPropagation();
      setModalOpen(true);
    }
  }, i18nN(I18N_VIEW_ALL, data.bookings.length)) : null)), /*#__PURE__*/React.createElement(PisellModal, {
    open: modalOpen,
    onCancel: function onCancel(e) {
      return scheduleCloseViewAllBookingsModal(setModalOpen, e);
    },
    maskProps: FLOOR_CARD_VIEW_ALL_MODAL_MASK_PROPS,
    focusTriggerAfterClose: false,
    wrapClassName: FLOOR_CARD_VIEW_ALL_MODAL_WRAP_CLASS,
    title: buildRoomViewAllModalTitle(data, data.bookings, headerMainFieldOverride),
    footer: null,
    destroyOnClose: true,
    width: 560
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames('pisell-res-floor-room-card', 'pisell-res-floor-room-card--modal-shell')
  }, /*#__PURE__*/React.createElement("div", {
    className: "rc--occupied rc--multi"
  }, /*#__PURE__*/React.createElement("div", _extends({
    className: "rc-multi-modal-body"
  }, floorCardStopCanvasPanHandlers), data.bookings.map(function (b, bi) {
    var progress = resolveFloorRoomCardProgressPercent(b);
    var perType = progress >= 100 ? 'timeout' : data.sub_status === 'payed' ? 'payed' : 'payment_required';
    return /*#__PURE__*/React.createElement(CardBody, {
      key: "".concat(floorRoomCardBookingCheckoutDomKey(b), "-").concat(bi),
      cardType: perType,
      booking: b,
      data: data,
      compact: true,
      shellShape: "rect"
    });
  }))))));
}
function MultiReservedCard(props) {
  var data = props.data,
    _props$shellShape4 = props.shellShape,
    shellShape = _props$shellShape4 === void 0 ? 'rect' : _props$shellShape4,
    elementLayoutHeightPx = props.elementLayoutHeightPx,
    hideHeaderCapacity = props.hideHeaderCapacity,
    headerMainFieldOverride = props.headerMainFieldOverride;
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    modalOpen = _useState4[0],
    setModalOpen = _useState4[1];
  var sorted = reorderBookingsAllReservedChronological(_toConsumableArray(data.bookings));
  var mainReserved = sorted.filter(function (b) {
    return b.isNext !== true;
  });
  var listForReservedPreview = mainReserved.length > 0 ? mainReserved : sorted;
  var explicitNextRes = getFloorRoomCardExplicitNextBooking(data);
  var n = listForReservedPreview.length;
  var previewCount = resolveCircleMultiPreviewCount(shellShape, n, elementLayoutHeightPx);
  var preview = listForReservedPreview.slice(0, previewCount);
  var hasMore = n > preview.length;
  var nowMs = Date.now();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RoomCardShellView, {
    className: classNames('rc rc--reserved rc--multi', modalOpen && 'rc--floor-detail-open'),
    header: /*#__PURE__*/React.createElement(CardHeader, {
      data: data,
      occupancyBookings: sorted,
      hideCapacity: hideHeaderCapacity,
      headerMainFieldOverride: headerMainFieldOverride
    })
  }, /*#__PURE__*/React.createElement("div", _extends({
    className: "rc-multi-list",
    "data-pisell-floor-room-scroll-surface": ""
  }, floorCardStopCanvasPanHandlers), preview.map(function (b) {
    var perType = getFloorRoomCardReservedRowBodyType(b, nowMs);
    return /*#__PURE__*/React.createElement(CardBody, {
      key: floorRoomCardBookingCheckoutDomKey(b),
      cardType: perType,
      booking: b,
      data: data,
      compact: true,
      shellShape: shellShape
    });
  }), explicitNextRes ? /*#__PURE__*/React.createElement(RoomCardNextBookingStrip, {
    nextLabel: locales.getText(I18N_NEXT),
    guestLine: nextGuestLineForStrip(explicitNextRes),
    timeRange: "".concat(explicitNextRes.start_time, " - ").concat(explicitNextRes.end_time)
  }) : null, hasMore ? /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: "rc-multi-more",
    onClick: function onClick(e) {
      e.stopPropagation();
      setModalOpen(true);
    }
  }, i18nN(I18N_VIEW_ALL, sorted.length)) : null)), /*#__PURE__*/React.createElement(PisellModal, {
    open: modalOpen,
    onCancel: function onCancel(e) {
      return scheduleCloseViewAllBookingsModal(setModalOpen, e);
    },
    maskProps: FLOOR_CARD_VIEW_ALL_MODAL_MASK_PROPS,
    focusTriggerAfterClose: false,
    wrapClassName: FLOOR_CARD_VIEW_ALL_MODAL_WRAP_CLASS,
    title: buildRoomViewAllModalTitle(data, sorted, headerMainFieldOverride),
    footer: null,
    destroyOnClose: true,
    width: 560
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames('pisell-res-floor-room-card', 'pisell-res-floor-room-card--modal-shell')
  }, /*#__PURE__*/React.createElement("div", {
    className: "rc--reserved rc--multi"
  }, /*#__PURE__*/React.createElement("div", _extends({
    className: "rc-multi-modal-body"
  }, floorCardStopCanvasPanHandlers), sorted.map(function (b, bi) {
    return /*#__PURE__*/React.createElement(CardBody, {
      key: "".concat(floorRoomCardBookingCheckoutDomKey(b), "-").concat(bi),
      cardType: getFloorRoomCardReservedRowBodyType(b, Date.now()),
      booking: b,
      data: data,
      compact: true,
      shellShape: "rect"
    });
  }))))));
}
function LockedCard(props) {
  var data = props.data,
    hideHeaderCapacity = props.hideHeaderCapacity,
    headerMainFieldOverride = props.headerMainFieldOverride;
  var capLabel = hideHeaderCapacity ? null : formatRoomCapLine(data, []);
  return /*#__PURE__*/React.createElement(RoomCardShellView, {
    className: "rc rc--locked",
    header: /*#__PURE__*/React.createElement(RoomCardHeaderView, {
      roomTitle: effectiveRoomTitle(data, headerMainFieldOverride),
      capacityLine: capLabel,
      status: "locked",
      statusLabel: "",
      showStatusTag: false
    })
  }, /*#__PURE__*/React.createElement("div", _extends({
    className: "rc-body rc-body--center",
    "data-pisell-floor-room-scroll-surface": ""
  }, floorCardStopCanvasPanHandlers), /*#__PURE__*/React.createElement("div", {
    className: "rc-lock-icon"
  }, /*#__PURE__*/React.createElement("svg", {
    width: "28",
    height: "28",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "1.5",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, /*#__PURE__*/React.createElement("rect", {
    x: "3",
    y: "11",
    width: "18",
    height: "11",
    rx: "2",
    ry: "2"
  }), /*#__PURE__*/React.createElement("path", {
    d: "M7 11V7a5 5 0 0 1 10 0v4"
  }))), /*#__PURE__*/React.createElement("span", {
    className: "rc-locked-text"
  }, locales.getText(I18N_STATUS_LOCK))));
}
var SPECIAL_RENDERERS = {
  empty: EmptyCard,
  multi_occupied: MultiOccupiedCard,
  multi_reserved: MultiReservedCard,
  locked: LockedCard
};
/**
 * 与 {@link ReservationFloorRoomCard} 同款 DOM 与分支，无外层主题根、无定时刷新。
 */
export function FloorRoomCardFromData(props) {
  var data = props.data,
    _props$shellShape5 = props.shellShape,
    shellShape = _props$shellShape5 === void 0 ? 'rect' : _props$shellShape5,
    elementLayoutHeightPx = props.elementLayoutHeightPx,
    _props$hideHeaderCapa2 = props.hideHeaderCapacity,
    hideHeaderCapacity = _props$hideHeaderCapa2 === void 0 ? false : _props$hideHeaderCapa2,
    headerMainFieldOverride = props.headerMainFieldOverride;
  var cardType = getFloorRoomCardType(data);
  var Special = SPECIAL_RENDERERS[cardType];
  if (Special) {
    return /*#__PURE__*/React.createElement(Special, {
      data: data,
      shellShape: shellShape,
      elementLayoutHeightPx: elementLayoutHeightPx,
      hideHeaderCapacity: hideHeaderCapacity,
      headerMainFieldOverride: headerMainFieldOverride
    });
  }
  if (cardType in CARD_CLASS) {
    return /*#__PURE__*/React.createElement(StandardCard, {
      data: data,
      cardType: cardType,
      hideHeaderCapacity: hideHeaderCapacity,
      headerMainFieldOverride: headerMainFieldOverride,
      shellShape: shellShape
    });
  }
  return /*#__PURE__*/React.createElement(EmptyCard, {
    data: data,
    shellShape: shellShape,
    elementLayoutHeightPx: elementLayoutHeightPx,
    hideHeaderCapacity: hideHeaderCapacity,
    headerMainFieldOverride: headerMainFieldOverride
  });
}