@atlaskit/editor-plugin-table
Version:
Table plugin for the @atlaskit/editor
194 lines (187 loc) • 39.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.rowControlsWrapperDotStyle = exports.resizeHandle = exports.insertRowButtonWrapper = exports.insertLine = exports.insertColumnButtonWrapper = exports.hoveredWarningCell = exports.hoveredDeleteButton = exports.hoveredCell = exports.floatingColumnControls = exports.dragInsertButtonWrapper = exports.dragCornerControlButton = exports.columnControlsLineMarker = exports.columnControlsDecoration = exports.OverflowShadowLessPadding = exports.OverflowShadow = exports.InsertMarker = exports.HeaderButtonHover = exports.HeaderButtonDanger = exports.HeaderButton = exports.DeleteButton = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _styles = require("@atlaskit/editor-common/styles");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _types = require("../types");
var _consts = require("./consts");
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs mahual remediation */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var InsertLine = function InsertLine(cssString) {
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tbackground: ", ";\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t\t", "\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorUnitZIndex, cssString);
};
var Marker = function Marker() {
return (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
backgroundColor: _consts.tableBorderColor,
position: 'absolute',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: "".concat(_consts.lineMarkerSize, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: "".concat(_consts.lineMarkerSize, "px"),
borderRadius: "var(--ds-radius-full, 9999px)",
pointerEvents: 'none'
});
};
var InsertMarker = exports.InsertMarker = function InsertMarker(cssString) {
return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t", ";\n\t\t", "\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_MARKER, Marker(), cssString);
};
var Button = function Button(cssString) {
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tborder-width: 0px;\n\tdisplay: inline-flex;\n\tmax-width: 100%;\n\ttext-align: center;\n\tmargin: 0px;\n\tpadding: 0px;\n\ttext-decoration: none;\n\ttransition:\n\t\tbackground 0.1s ease-out 0s,\n\t\tbox-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\n\toutline: none !important;\n\tcursor: none;\n\n\t> .", " {\n\t\tdisplay: inline-flex;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n\t", "\n"])), "var(--ds-radius-small, 3px)", _types.TableCssClassName.CONTROLS_BUTTON_ICON, cssString);
};
// Explicit pixel values required here to ensure classic row controls align correctly
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
var HeaderButton = exports.HeaderButton = function HeaderButton(cssString) {
return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t\tpadding: 0;\n\n\t\t:focus {\n\t\t\toutline: none;\n\t\t}\n\t\t", "\n\t}\n\n\t.", "::after {\n\t\tcontent: ' ';\n\t\tbackground-color: transparent;\n\t\tleft: -15px;\n\t\ttop: 0;\n\t\tposition: absolute;\n\t\twidth: 15px;\n\t\theight: 100%;\n\t\tz-index: 1;\n\t}\n\n\t.active .", " {\n\t\tcolor: ", ";\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n"])), _types.TableCssClassName.CONTROLS_BUTTON, _consts.tableHeaderCellBackgroundColor, _consts.tableBorderColor, cssString, _types.TableCssClassName.ROW_CONTROLS_BUTTON, _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, #FFFFFF)", _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
};
var HeaderButtonHover = exports.HeaderButtonHover = function HeaderButtonHover() {
return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ":hover {\n\t\tcolor: ", ";\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_BUTTON, "var(--ds-icon-inverse, #FFFFFF)", _consts.tableToolbarSelectedColor, _consts.tableBorderSelectedColor);
};
var HeaderButtonDanger = exports.HeaderButtonDanger = function HeaderButtonDanger() {
return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " .", " {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t\tposition: relative;\n\t\tz-index: ", ";\n\t}\n"])), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.CONTROLS_BUTTON, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex);
};
var InsertButton = function InsertButton() {
return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t\tbottom: 0;\n\t}\n\t.", ", .", " {\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\t", "\n\t}\n\t.", " {\n\t\tdisplay: none;\n\t}\n\t&:hover .", " {\n\t\tdisplay: flex;\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, _consts.tableInsertColumnButtonSize, _consts.tableInsertColumnButtonSize, _types.TableCssClassName.CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, #FFFFFF)", ";\n box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)", ";\n color: ", "var(--ds-icon, #292A2E)", ";\n ")), _types.TableCssClassName.CONTROLS_INSERT_LINE, _types.TableCssClassName.CONTROLS_INSERT_LINE);
};
var InsertButtonHover = function InsertButtonHover() {
return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, #1868DB)", "var(--ds-icon-inverse, #FFFFFF)");
};
var dragInsertButtonWrapper = exports.dragInsertButtonWrapper = function dragInsertButtonWrapper() {
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tposition: absolute;\n\t\tz-index: ", ";\n\t}\n\n\t.", " {\n\t\tbottom: -3px;\n\t\tleft: 2px;\n\t}\n\n\t.", " {\n\t\tleft: -3px;\n\t\tbottom: -2px;\n\t}\n\t.", " {\n\t\tleft: 6px;\n\t\tbottom: -2px;\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tborder: 1px solid ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, _editorSharedStyles.akEditorUnitZIndex + 10, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS, _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, Button("\n background: ".concat("var(--ds-surface-overlay, #FFFFFF)", ";\n color: ", "var(--ds-icon, #292A2E)", ";\n border: 1px solid ", "var(--ds-background-accent-gray-subtler, #DDDEE1)", ";\n border-radius: 50%;\n height: ", _consts.dragTableInsertColumnButtonSize, "px;\n width: ").concat(_consts.dragTableInsertColumnButtonSize, "px;\n ")), _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON, "var(--ds-background-brand-bold, #1868DB)", "var(--ds-background-brand-bold, #1868DB)", "var(--ds-icon-inverse, #FFFFFF)");
};
// Explicit pixel values required here to ensure corner button aligns correctly
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
var dragCornerControlButton = exports.dragCornerControlButton = function dragCornerControlButton() {
return (0, _react.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\twidth: 15px;\n\t\theight: 15px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tposition: absolute;\n\t\ttop: -17px;\n\t\tleft: -5px;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tpadding: 0;\n\t\toutline: none;\n\t\tz-index: ", ";\n\n\t\t&.active .", " {\n\t\t\tbackground-color: ", ";\n\t\t\twidth: 10px;\n\t\t\theight: 10px;\n\t\t\tborder-width: 2px;\n\t\t\tborder-radius: 4px;\n\n\t\t\ttop: 3px;\n\t\t\tleft: 2px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tcursor: pointer;\n\n\t\t\t.", " {\n\t\t\t\twidth: 10px;\n\t\t\t\theight: 10px;\n\t\t\t\tborder-radius: 4px;\n\t\t\t\ttop: 3px;\n\t\t\t\tleft: 2px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tborder: 1px solid ", ";\n\t\tbackground-color: ", ";\n\t\tborder-radius: 2px;\n\t\twidth: 5px;\n\t\theight: 5px;\n\t\tposition: relative;\n\t}\n"])), _types.TableCssClassName.DRAG_CORNER_BUTTON, _editorSharedStyles.akEditorUnitZIndex * 99, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-selected, #1868DB)", _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, _types.TableCssClassName.DRAG_CORNER_BUTTON_INNER, "var(--ds-border-inverse, #FFFFFF)", "var(--ds-background-accent-gray-subtler, #DDDEE1)");
};
var insertColumnButtonWrapper = exports.insertColumnButtonWrapper = function insertColumnButtonWrapper() {
return (0, _react.css)(
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
InsertButton(),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
InsertButtonHover(),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
InsertLine("\n width: 2px;\n left: 9px;\n "));
};
var insertRowButtonWrapper = exports.insertRowButtonWrapper = function insertRowButtonWrapper() {
return (0, _react.css)(
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
InsertButton(),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
InsertButtonHover(),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
InsertLine("\n height: 2px;\n top: -11px;\n\t".concat("\n left: ", _consts.tableInsertColumnButtonSize - 1, "px;\n ")));
};
var columnControlsLineMarker = exports.columnControlsLineMarker = function columnControlsLineMarker() {
return (0, _react.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ".", " table tr:first-of-type td,\n\t.", ".", " table tr:first-of-type th {\n\t\tposition: relative;\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS);
};
var DeleteButton = exports.DeleteButton = function DeleteButton() {
return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ", .", " {\n\t\theight: ", "px;\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", ":hover {\n\t\tbackground: ", ";\n\t\tcolor: ", ";\n\t\tcursor: pointer;\n\t}\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n background: ".concat(_consts.tableCellSelectedDeleteIconBackground, ";\n color: ").concat(_consts.tableCellSelectedDeleteIconColor, ";\n ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableCellHoverDeleteIconBackground, _consts.tableCellHoverDeleteIconColor);
};
var OverflowShadow = exports.OverflowShadow = function OverflowShadow(isDragAndDropEnabled) {
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ", .", " {\n\t\tdisplay: block;\n\t\theight: calc(100% - ", "px);\n\t\tposition: absolute;\n\t\tpointer-events: none;\n\t\ttop: ", "px;\n\t\tz-index: ", ";\n\t\twidth: ", "px;\n\t}\n\t.", " {\n\t\tbackground:\n\t\t\tlinear-gradient(to left, transparent 0, ", " 140%),\n\t\t\tlinear-gradient(\n\t\t\t\tto right,\n\t\t\t\t", " 0px,\n\t\t\t\ttransparent 1px\n\t\t\t);\n\t\tleft: 0px;\n\t}\n\t.", "[data-number-column='true'] > :not(.", ").", " {\n\t\tleft: ", "px;\n\t}\n\t.", " {\n\t\tbackground:\n\t\t\tlinear-gradient(to right, transparent 0, ", " 140%),\n\t\t\tlinear-gradient(to left, ", " 0px, transparent 1px);\n\t\tleft: calc(100% - ", "px);\n\t}\n\t.", " {\n\t\t", "\n\t\t.", " {\n\t\t\tborder-left: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, #1E1F2129)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, #1E1F2129)", "var(--ds-shadow-overflow-perimeter, #1E1F211f)", _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
};
var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEnabled) {
if (!isDragAndDropEnabled) {
return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t.", ", .", " {\n\t\t\t\theight: calc(100% - ", "px);\n\t\t\t\ttop: ", "px;\n\t\t\t}\n\t\t"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTopWithControl, _styles.tableMarginTopWithControl);
}
};
var OverflowShadowLessPadding = exports.OverflowShadowLessPadding = function OverflowShadowLessPadding(tableOverflowShadowWidth) {
return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ", .", " {\n\t\twidth: ", "px;\n\t}\n\n\t.", " {\n\t\tleft: 6px;\n\t}\n\t.", ".", " {\n\t\tleft: 8px;\n\t}\n\n\t.", " {\n\t\tleft: calc(100% - 6px);\n\t}\n\t.", ".", " {\n\t\tleft: calc(100% - 16px);\n\t}\n"])), _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_CHROMELESS);
};
var columnHeaderButton = function columnHeaderButton(cssString) {
return (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
background: _consts.tableHeaderCellBackgroundColor,
display: 'block',
boxSizing: 'border-box',
padding: 0,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
':focus': {
outline: 'none'
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
cssString);
};
var columnHeaderButtonSelected = function columnHeaderButtonSelected() {
return (0, _react.css)({
color: "var(--ds-text-inverse, #FFFFFF)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
backgroundColor: _consts.tableToolbarSelectedColor,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
borderColor: _consts.tableBorderSelectedColor,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
zIndex: _consts.columnControlsSelectedZIndex
});
};
var getFloatingDotOverrides = function getFloatingDotOverrides() {
return (0, _react.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n\t\ttr\n\t\t\tth:last-child\n\t\t\t.", "::before,\n\t\t\ttr\n\t\t\ttd:last-child\n\t\t\t.", "::before {\n\t\t\tcontent: '';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: ", "px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t\ttop: ", ";\n\t\t\tright: 0px;\n\t\t}\n\t"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-025, 2px)");
};
var floatingColumnControls = exports.floatingColumnControls = function floatingColumnControls() {
return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tbox-sizing: border-box;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\n\t\t\t.", " {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tbox-sizing: border-box;\n\n\t\t\t.", " {\n\t\t\t\tdisplay: grid;\n\t\t\t\tjustify-items: center;\n\t\t\t}\n\t\t}\n\t"])), _types.TableCssClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER);
};
var rowControlsWrapperDotStyle = exports.rowControlsWrapperDotStyle = function rowControlsWrapperDotStyle() {
return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/* override for DnD controls */\n\t\tdiv.", ">.", "::after {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\tdiv.", ">.", "::after {\n\t\t\tcontent: ' ';\n\t\t\tbackground-color: ", ";\n\t\t\tposition: absolute;\n\t\t\theight: ", "px;\n\t\t\twidth: ", "px;\n\t\t\tborder-radius: 50%;\n\t\t\tpointer-events: none;\n\t\t\ttop: -", "px;\n\t\t\tright: -1px;\n\t\t}\n\t"])), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
};
var columnControlsDecoration = exports.columnControlsDecoration = function columnControlsDecoration() {
return (0, _react.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n\t\t.", " {\n\t\t\tdisplay: none;\n\t\t\tcursor: pointer;\n\t\t\tposition: absolute;\n\t\t\twidth: 100%;\n\t\t\tleft: 0;\n\t\t\ttop: -", "px;\n\t\t\theight: ", "px;\n\t\t\t/* floating dot for adding column button */\n\t\t\t&::before {\n\t\t\t\tcontent: ' ';\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tposition: absolute;\n\t\t\t\theight: ", "px;\n\t\t\t\twidth: ", "px;\n\t\t\t\tborder-radius: 50%;\n\t\t\t\tpointer-events: none;\n\t\t\t\ttop: 2px;\n\t\t\t\tright: ", ";\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: ' ';\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* floating dot for adding column button - overriding style on last column to avoid scroll */\n\t\t", "\n\n\t\t.", " .", " {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",table\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t}\n\n\t\t\t\t&.", " .", "::after {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\tz-index: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",table\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", ", &.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t\tborder-left: ", "px solid ", ";\n\t\t\t\t\tleft: -", "px;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t&.", " {\n\t\t\t\t.", "::after {\n\t\t\t\t\t", ";\n\t\t\t\t}\n\n\t\t\t\t&.", " .", "::after {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t\tborder-color: ", ";\n\t\t\t\t\tborder-left: ", "px solid ", ";\n\t\t\t\t\tleft: -", "px;\n\t\t\t\t\tz-index: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", "\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\ttd.", ",\n\t\t\t.", "\n\t\t\ttable\n\t\t\ttr:first-of-type\n\t\t\tth.", " {\n\t\t\t.", "::after {\n\t\t\t\t", ";\n\t\t\t}\n\t\t}\n\t"])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.columnControlsDecorationHeight + _styles.tableCellBorderWidth, _consts.columnControlsDecorationHeight, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-negative-025, -2px)", columnHeaderButton("\n border-right: ".concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n border-top: ").concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n border-bottom: ").concat(_styles.tableCellBorderWidth, "px solid ").concat(_consts.tableBorderColor, ";\n box-sizing: content-box;\n height: ").concat(_consts.tableToolbarSize - 1, "px;\n width: 100%;\n position: absolute;\n top: ").concat(_consts.columnControlsDecorationHeight - _consts.tableToolbarSize, "px;\n left: 0px;\n z-index: ").concat(_consts.columnControlsZIndex, ";\n ")), getFloatingDotOverrides(), _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_TABLE, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _styles.tableCellBorderWidth, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_COLUMN, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected(), _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, _styles.tableCellBorderWidth, _consts.tableBorderDeleteColor, _styles.tableCellBorderWidth, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_SELECTED, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, columnHeaderButtonSelected());
};
var hoveredDeleteButton = exports.hoveredDeleteButton = function hoveredDeleteButton() {
return (0, _react.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ".", " {\n\t\t.", ", .", ", .", " {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", "::after {\n\t\t\tbackground: ", ";\n\t\t}\n\n\t\t.", " > table {\n\t\t\ttd.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t\tth.", " {\n\t\t\t\tbackground-color: unset;\n\t\t\t}\n\t\t\tth.", "::after {\n\t\t\t\tbackground: ", ";\n\t\t\t\tborder: 1px solid ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.COLUMN_SELECTED, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderDeleteColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellDeleteColor, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableCellDeleteColor, _consts.tableBorderDeleteColor);
};
var hoveredCell = exports.hoveredCell = function hoveredCell() {
return (0, _react.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\t.", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t.", ".", " {\n\t\t\tposition: relative;\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _consts.tableBorderColor);
};
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n\t:not(.", ")\n\t\t.", ":not(.", ") {\n\t\ttd.", " {\n\t\t\tbackground-color: ", " !important; /* We need to override the background-color added to the cell */\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t}\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)");
// Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
var resizeLineStyles = function resizeLineStyles() {
return (0, _react.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n\t\tth.", "::before, td.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\tth.", "::before,\n\t\t\ttd.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t/* Styles when drag and drop is disabled - will be removed */\n\t\ttd.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\tth.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tleft: ", ";\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t\ttop: -", "px;\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tposition: absolute;\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + 2px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\tth.", "::before {\n\t\t\tcontent: ' ';\n\t\t\tright: -1px;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t\tbackground-color: ", ";\n\t\t\tz-index: ", ";\n\t\t\ttop: -", "px;\n\t\t}\n\t"])), _types.TableCssClassName.WITH_DRAG_RESIZE_LINE, _types.TableCssClassName.WITH_DRAG_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_DRAG_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
};
var resizeHandle = exports.resizeHandle = function resizeHandle() {
return (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t.", " {\n\t\t\tbackground-color: transparent;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: -", "px;\n\t\t\tcursor: col-resize;\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\ttr\n\t\t\tth:last-child\n\t\t\t.", ",\n\t\t\ttr\n\t\t\ttd:last-child\n\t\t\t.", " {\n\t\t\tbackground-color: transparent;\n\t\t\tposition: absolute;\n\t\t\twidth: ", "px;\n\t\t\theight: 100%;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tcursor: col-resize;\n\t\t\tz-index: ", ";\n\t\t}\n\n\t\t", "\n\n\t\ttable\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after,\n\t /* Styles when drag and drop is disabled - will be removed */\n\t\ttable\n tr:first-of-type\n th.", "\n .", "::after,\n table\n tr:first-of-type\n td.", "\n .", "::after {\n\t\t\ttop: -", "px;\n\t\t\theight: calc(100% + ", "px);\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, resizeLineStyles(), _types.TableCssClassName.WITH_DRAG_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_DRAG_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
};
// Drag and Drop: drop target insert line
var tableCellColumnInsertLineStyles = (0, _react.css)({
content: "' '",
position: 'absolute',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: "calc(100% + ".concat(_styles.tableCellBorderWidth * 2, "px)"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: "".concat(_consts.insertLineWidth, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
zIndex: _consts.columnControlsZIndex * 2
});
var tableCellRowInsertLineStyles = (0, _react.css)({
content: "' '",
position: 'absolute',
left: "var(--ds-space-negative-025, -2px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: "".concat(_consts.insertLineWidth, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
width: "calc(100% + ".concat(_styles.tableCellBorderWidth * 2, "px)"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
zIndex: _consts.columnControlsZIndex * 2
});
var insertLineActiveColor = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
backgroundColor: _consts.tableBorderSelectedColor
});
var insertLineInactiveColor = (0, _react.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)"
});
// Explicit pixel values required here to ensure correct positioning of line that is show on row
// or column drag
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
var insertLine = exports.insertLine = function insertLine() {
return (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tleft: ", ";\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tright: -1px;\n\t\t\ttop: -", "px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\ttop: -1px;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\ttd.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\n\t\tth.", "::before {\n\t\t\t", "\n\t\t\tbottom: 0;\n\t\t\t", "\n\t\t}\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor);
};