handsontable 0.0.0-next-f063300-20241115 → 0.0.0-next-6eb0244-20241118
Sign up to get free protection for your applications and to get access to all the features.
Potentially problematic release.
This version of handsontable might be problematic. Click here for more details.
- package/3rdparty/walkontable/src/calculator/index.js +2 -1
- package/3rdparty/walkontable/src/calculator/index.mjs +2 -2
- package/3rdparty/walkontable/src/calculator/viewportRows.js +3 -3
- package/3rdparty/walkontable/src/calculator/viewportRows.mjs +3 -3
- package/3rdparty/walkontable/src/core/_base.js +0 -3
- package/3rdparty/walkontable/src/core/_base.mjs +0 -3
- package/3rdparty/walkontable/src/core/clone.js +0 -1
- package/3rdparty/walkontable/src/core/clone.mjs +0 -1
- package/3rdparty/walkontable/src/core/core.js +0 -2
- package/3rdparty/walkontable/src/core/core.mjs +0 -2
- package/3rdparty/walkontable/src/facade/core.js +0 -3
- package/3rdparty/walkontable/src/facade/core.mjs +0 -3
- package/3rdparty/walkontable/src/index.js +1 -0
- package/3rdparty/walkontable/src/index.mjs +2 -2
- package/3rdparty/walkontable/src/overlay/_base.js +1 -3
- package/3rdparty/walkontable/src/overlay/_base.mjs +1 -3
- package/3rdparty/walkontable/src/overlay/bottom.js +2 -2
- package/3rdparty/walkontable/src/overlay/bottom.mjs +2 -2
- package/3rdparty/walkontable/src/overlay/top.js +1 -1
- package/3rdparty/walkontable/src/overlay/top.mjs +1 -1
- package/3rdparty/walkontable/src/renderer/index.js +2 -4
- package/3rdparty/walkontable/src/renderer/index.mjs +2 -4
- package/3rdparty/walkontable/src/renderer/table.js +3 -12
- package/3rdparty/walkontable/src/renderer/table.mjs +3 -12
- package/3rdparty/walkontable/src/settings.js +2 -0
- package/3rdparty/walkontable/src/settings.mjs +2 -0
- package/3rdparty/walkontable/src/table.js +9 -17
- package/3rdparty/walkontable/src/table.mjs +9 -17
- package/3rdparty/walkontable/src/types.js +0 -1
- package/3rdparty/walkontable/src/types.mjs +0 -1
- package/3rdparty/walkontable/src/utils/column.js +1 -1
- package/3rdparty/walkontable/src/utils/column.mjs +1 -1
- package/3rdparty/walkontable/src/viewport.js +0 -1
- package/3rdparty/walkontable/src/viewport.mjs +0 -1
- package/base.js +2 -2
- package/base.mjs +2 -2
- package/core/hooks/constants.js +0 -9
- package/core/hooks/constants.mjs +0 -9
- package/core/hooks/index.d.ts +0 -1
- package/core.d.ts +0 -2
- package/core.js +0 -47
- package/core.mjs +0 -47
- package/dataMap/metaManager/metaSchema.js +3 -23
- package/dataMap/metaManager/metaSchema.mjs +3 -23
- package/dist/handsontable.css +9 -17
- package/dist/handsontable.full.css +240 -249
- package/dist/handsontable.full.js +4218 -4552
- package/dist/handsontable.full.min.css +9 -11
- package/dist/handsontable.full.min.js +53 -53
- package/dist/handsontable.js +3919 -4259
- package/dist/handsontable.min.css +4 -5
- package/dist/handsontable.min.js +24 -24
- package/editors/autocompleteEditor/autocompleteEditor.js +1 -1
- package/editors/autocompleteEditor/autocompleteEditor.mjs +1 -1
- package/editors/baseEditor/baseEditor.js +1 -1
- package/editors/baseEditor/baseEditor.mjs +1 -1
- package/editors/dateEditor/dateEditor.js +0 -9
- package/editors/dateEditor/dateEditor.mjs +1 -10
- package/editors/handsontableEditor/handsontableEditor.js +1 -7
- package/editors/handsontableEditor/handsontableEditor.mjs +1 -7
- package/editors/selectEditor/selectEditor.js +9 -20
- package/editors/selectEditor/selectEditor.mjs +9 -20
- package/editors/textEditor/textEditor.js +11 -4
- package/editors/textEditor/textEditor.mjs +11 -4
- package/helpers/dom/element.js +1 -32
- package/helpers/dom/element.mjs +1 -31
- package/helpers/mixed.js +2 -2
- package/helpers/mixed.mjs +2 -2
- package/package.json +3 -10
- package/plugins/comments/commentEditor.js +0 -9
- package/plugins/comments/commentEditor.mjs +0 -9
- package/plugins/comments/comments.js +0 -14
- package/plugins/comments/comments.mjs +1 -15
- package/plugins/contextMenu/menu/menu.js +4 -9
- package/plugins/contextMenu/menu/menu.mjs +4 -9
- package/plugins/filters/ui/multipleSelect.js +0 -6
- package/plugins/filters/ui/multipleSelect.mjs +0 -6
- package/plugins/manualRowMove/manualRowMove.js +1 -1
- package/plugins/manualRowMove/manualRowMove.mjs +1 -1
- package/plugins/manualRowResize/manualRowResize.js +2 -1
- package/plugins/manualRowResize/manualRowResize.mjs +3 -2
- package/plugins/mergeCells/mergeCells.js +1 -1
- package/plugins/mergeCells/mergeCells.mjs +1 -1
- package/plugins/nestedRows/ui/headers.js +1 -7
- package/plugins/nestedRows/ui/headers.mjs +1 -7
- package/plugins/stretchColumns/calculator.js +1 -2
- package/plugins/stretchColumns/calculator.mjs +2 -3
- package/renderers/checkboxRenderer/checkboxRenderer.js +8 -5
- package/renderers/checkboxRenderer/checkboxRenderer.mjs +8 -5
- package/settings.d.ts +0 -1
- package/tableView.js +0 -46
- package/tableView.mjs +1 -47
- package/utils/autoResize.js +1 -4
- package/utils/autoResize.mjs +1 -4
- package/utils/ghostTable.js +3 -5
- package/utils/ghostTable.mjs +3 -5
- package/3rdparty/walkontable/src/utils/stylesHandler.js +0 -287
- package/3rdparty/walkontable/src/utils/stylesHandler.mjs +0 -283
- package/helpers/themes.js +0 -17
- package/helpers/themes.mjs +0 -13
- package/styles/handsontable.css +0 -2163
- package/styles/handsontable.min.css +0 -30
- package/styles/ht-theme-horizon.css +0 -597
- package/styles/ht-theme-horizon.min.css +0 -30
- package/styles/ht-theme-main.css +0 -601
- package/styles/ht-theme-main.min.css +0 -30
@@ -1,287 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
exports.__esModule = true;
|
4
|
-
require("core-js/modules/es.error.cause.js");
|
5
|
-
require("core-js/modules/esnext.iterator.constructor.js");
|
6
|
-
require("core-js/modules/esnext.iterator.for-each.js");
|
7
|
-
var _element = require("../../../../helpers/dom/element");
|
8
|
-
var _console = require("../../../../helpers/console");
|
9
|
-
function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
|
10
|
-
function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
|
11
|
-
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
|
12
|
-
function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
|
13
|
-
function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
|
14
|
-
function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
|
15
|
-
const CLASSIC_THEME_DEFAULT_HEIGHT = 23;
|
16
|
-
|
17
|
-
/**
|
18
|
-
* Handles the theme-related style operations.
|
19
|
-
*/
|
20
|
-
var _themeName = /*#__PURE__*/new WeakMap();
|
21
|
-
var _rootElement = /*#__PURE__*/new WeakMap();
|
22
|
-
var _rootComputedStyle = /*#__PURE__*/new WeakMap();
|
23
|
-
var _rootDocument = /*#__PURE__*/new WeakMap();
|
24
|
-
var _isClassicTheme = /*#__PURE__*/new WeakMap();
|
25
|
-
var _cssVars = /*#__PURE__*/new WeakMap();
|
26
|
-
var _computedStyles = /*#__PURE__*/new WeakMap();
|
27
|
-
var _StylesHandler_brand = /*#__PURE__*/new WeakSet();
|
28
|
-
class StylesHandler {
|
29
|
-
/**
|
30
|
-
* Initializes a new instance of the `StylesHandler` class.
|
31
|
-
*
|
32
|
-
* @param {object} domBindings - The DOM bindings for the instance.
|
33
|
-
*/
|
34
|
-
constructor(domBindings) {
|
35
|
-
/**
|
36
|
-
* Calculates the row height based on the current theme and CSS variables.
|
37
|
-
*
|
38
|
-
* @returns {number|null} The calculated row height, or `null` if any required CSS variable is not found.
|
39
|
-
*/
|
40
|
-
_classPrivateMethodInitSpec(this, _StylesHandler_brand);
|
41
|
-
/**
|
42
|
-
* The name of the theme.
|
43
|
-
*
|
44
|
-
* @type {string|undefined}
|
45
|
-
*/
|
46
|
-
_classPrivateFieldInitSpec(this, _themeName, void 0);
|
47
|
-
/**
|
48
|
-
* The instance's root element.
|
49
|
-
*
|
50
|
-
* @type {HTMLElement}
|
51
|
-
*/
|
52
|
-
_classPrivateFieldInitSpec(this, _rootElement, void 0);
|
53
|
-
/**
|
54
|
-
* The computed style of the root element.
|
55
|
-
*
|
56
|
-
* @type {CSSStyleDeclaration}
|
57
|
-
* @private
|
58
|
-
*/
|
59
|
-
_classPrivateFieldInitSpec(this, _rootComputedStyle, void 0);
|
60
|
-
/**
|
61
|
-
* The root document of the instance.
|
62
|
-
*
|
63
|
-
* @type {Document}
|
64
|
-
* @private
|
65
|
-
*/
|
66
|
-
_classPrivateFieldInitSpec(this, _rootDocument, void 0);
|
67
|
-
/**
|
68
|
-
* `true` if the classic theme is enabled, `false` otherwise.
|
69
|
-
*
|
70
|
-
* @type {boolean}
|
71
|
-
*/
|
72
|
-
_classPrivateFieldInitSpec(this, _isClassicTheme, true);
|
73
|
-
/**
|
74
|
-
* An object to store CSS variable values.
|
75
|
-
*
|
76
|
-
* @type {object}
|
77
|
-
* @private
|
78
|
-
*/
|
79
|
-
_classPrivateFieldInitSpec(this, _cssVars, {});
|
80
|
-
/**
|
81
|
-
* Stores the computed styles for various elements.
|
82
|
-
*
|
83
|
-
* @type {object} - An object containing the computed styles if a nested structore of `element: { [element type]: {property: value} }`.
|
84
|
-
* @private
|
85
|
-
*/
|
86
|
-
_classPrivateFieldInitSpec(this, _computedStyles, {});
|
87
|
-
_classPrivateFieldSet(_rootElement, this, domBindings.rootTable.parentElement.parentElement);
|
88
|
-
_classPrivateFieldSet(_rootDocument, this, domBindings.rootDocument);
|
89
|
-
}
|
90
|
-
|
91
|
-
/**
|
92
|
-
* Gets the value indicating whether the classic theme is enabled.
|
93
|
-
*
|
94
|
-
* @returns {boolean} `true` if the classic theme is enabled, `false` otherwise.
|
95
|
-
*/
|
96
|
-
isClassicTheme() {
|
97
|
-
return _classPrivateFieldGet(_isClassicTheme, this);
|
98
|
-
}
|
99
|
-
|
100
|
-
/**
|
101
|
-
* Retrieves the value of a specified CSS variable.
|
102
|
-
*
|
103
|
-
* @param {string} variableName - The name of the CSS variable to retrieve.
|
104
|
-
* @returns {number|null|undefined} The value of the specified CSS variable, or `undefined` if not found.
|
105
|
-
*/
|
106
|
-
getCSSVariableValue(variableName) {
|
107
|
-
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
108
|
-
return null;
|
109
|
-
}
|
110
|
-
if (_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`]) {
|
111
|
-
return _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`];
|
112
|
-
}
|
113
|
-
const acquiredValue = _assertClassBrand(_StylesHandler_brand, this, _getParsedCSSValue).call(this, `--ht-${variableName}`);
|
114
|
-
if (acquiredValue !== null) {
|
115
|
-
_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`] = acquiredValue;
|
116
|
-
return acquiredValue;
|
117
|
-
}
|
118
|
-
}
|
119
|
-
|
120
|
-
/**
|
121
|
-
* Retrieves the computed style value for a specified CSS property of a `td` element.
|
122
|
-
*
|
123
|
-
* @param {string} cssProperty - The CSS property to retrieve the value for.
|
124
|
-
* @returns {number|string|undefined} The value of the specified CSS property, or `undefined` if not found.
|
125
|
-
*/
|
126
|
-
getStyleForTD(cssProperty) {
|
127
|
-
var _classPrivateFieldGet2;
|
128
|
-
return (_classPrivateFieldGet2 = _classPrivateFieldGet(_computedStyles, this)) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.td[cssProperty];
|
129
|
-
}
|
130
|
-
|
131
|
-
/**
|
132
|
-
* Calculates the row height based on the current theme and CSS variables.
|
133
|
-
*
|
134
|
-
* @returns {number} The calculated row height.
|
135
|
-
*/
|
136
|
-
getDefaultRowHeight() {
|
137
|
-
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
138
|
-
return CLASSIC_THEME_DEFAULT_HEIGHT;
|
139
|
-
}
|
140
|
-
const calculatedRowHeight = _assertClassBrand(_StylesHandler_brand, this, _calculateRowHeight).call(this);
|
141
|
-
if (!calculatedRowHeight) {
|
142
|
-
(0, _console.warn)(`The "${_classPrivateFieldGet(_themeName, this)}" theme is enabled, but its stylesheets are missing or not imported correctly. \
|
143
|
-
Import the correct CSS files in order to use that theme.`);
|
144
|
-
_classPrivateFieldSet(_isClassicTheme, this, true);
|
145
|
-
this.useTheme();
|
146
|
-
return CLASSIC_THEME_DEFAULT_HEIGHT;
|
147
|
-
}
|
148
|
-
return calculatedRowHeight;
|
149
|
-
}
|
150
|
-
|
151
|
-
/**
|
152
|
-
* Checks if the cells are using the `border-box` box-sizing model.
|
153
|
-
*
|
154
|
-
* @returns {boolean}
|
155
|
-
*/
|
156
|
-
areCellsBorderBox() {
|
157
|
-
return this.getStyleForTD('box-sizing') === 'border-box';
|
158
|
-
}
|
159
|
-
|
160
|
-
/**
|
161
|
-
* Applies the specified theme to the instance.
|
162
|
-
*
|
163
|
-
* @param {string|undefined|boolean} [themeName] - The name of the theme to apply.
|
164
|
-
*/
|
165
|
-
useTheme(themeName) {
|
166
|
-
if (!themeName) {
|
167
|
-
_assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
|
168
|
-
_classPrivateFieldSet(_isClassicTheme, this, true);
|
169
|
-
_classPrivateFieldSet(_themeName, this, themeName || undefined);
|
170
|
-
return;
|
171
|
-
}
|
172
|
-
if (themeName && themeName !== _classPrivateFieldGet(_themeName, this)) {
|
173
|
-
if (_classPrivateFieldGet(_themeName, this)) {
|
174
|
-
_assertClassBrand(_StylesHandler_brand, this, _clearCachedValues).call(this);
|
175
|
-
}
|
176
|
-
_classPrivateFieldSet(_themeName, this, themeName);
|
177
|
-
_classPrivateFieldSet(_isClassicTheme, this, false);
|
178
|
-
_assertClassBrand(_StylesHandler_brand, this, _applyClassNames).call(this);
|
179
|
-
_assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
|
180
|
-
}
|
181
|
-
}
|
182
|
-
|
183
|
-
/**
|
184
|
-
* Gets the name of the theme.
|
185
|
-
*
|
186
|
-
* @returns {string|undefined}
|
187
|
-
*/
|
188
|
-
getThemeName() {
|
189
|
-
return _classPrivateFieldGet(_themeName, this);
|
190
|
-
}
|
191
|
-
|
192
|
-
/**
|
193
|
-
* Removes the theme-related class names from the root element.
|
194
|
-
*/
|
195
|
-
removeClassNames() {
|
196
|
-
if ((0, _element.hasClass)(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this))) {
|
197
|
-
(0, _element.removeClass)(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this));
|
198
|
-
}
|
199
|
-
}
|
200
|
-
}
|
201
|
-
exports.StylesHandler = StylesHandler;
|
202
|
-
function _calculateRowHeight() {
|
203
|
-
const lineHeightVarValue = this.getCSSVariableValue('line-height');
|
204
|
-
const verticalPaddingVarValue = this.getCSSVariableValue('cell-vertical-padding');
|
205
|
-
const bottomBorderWidth = Math.ceil(parseFloat(this.getStyleForTD('border-bottom-width')));
|
206
|
-
if (lineHeightVarValue === null || verticalPaddingVarValue === null || isNaN(bottomBorderWidth)) {
|
207
|
-
return null;
|
208
|
-
}
|
209
|
-
return lineHeightVarValue + 2 * verticalPaddingVarValue + bottomBorderWidth;
|
210
|
-
}
|
211
|
-
/**
|
212
|
-
* Applies the necessary class names to the root element.
|
213
|
-
*/
|
214
|
-
function _applyClassNames() {
|
215
|
-
(0, _element.removeClass)(_classPrivateFieldGet(_rootElement, this), /ht-theme-.*/g);
|
216
|
-
(0, _element.addClass)(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this));
|
217
|
-
}
|
218
|
-
/**
|
219
|
-
* Caches the computed style values for the root element and `td` element.
|
220
|
-
*/
|
221
|
-
function _cacheStylesheetValues() {
|
222
|
-
if (!this.isClassicTheme()) {
|
223
|
-
_classPrivateFieldSet(_rootComputedStyle, this, getComputedStyle(_classPrivateFieldGet(_rootElement, this)));
|
224
|
-
}
|
225
|
-
const stylesForTD = _assertClassBrand(_StylesHandler_brand, this, _getStylesForTD).call(this, ['box-sizing', 'border-bottom-width']);
|
226
|
-
_classPrivateFieldGet(_computedStyles, this).td = {
|
227
|
-
..._classPrivateFieldGet(_computedStyles, this).td,
|
228
|
-
...{
|
229
|
-
'box-sizing': stylesForTD['box-sizing'],
|
230
|
-
'border-bottom-width': stylesForTD['border-bottom-width']
|
231
|
-
}
|
232
|
-
};
|
233
|
-
}
|
234
|
-
/**
|
235
|
-
* Retrieves and processes the computed styles for a `td` element.
|
236
|
-
*
|
237
|
-
* This method creates a temporary table structure, appends it to the root element,
|
238
|
-
* retrieves the computed styles for the `td` element, and then removes the table
|
239
|
-
* from the DOM. The computed styles are passed to the provided callback function.
|
240
|
-
*
|
241
|
-
* @param {Array} cssProps - An array of CSS properties to retrieve.
|
242
|
-
* @returns {object} An object containing the requested computed styles for the `td` element.
|
243
|
-
* @private
|
244
|
-
*/
|
245
|
-
function _getStylesForTD(cssProps) {
|
246
|
-
const rootDocument = _classPrivateFieldGet(_rootDocument, this);
|
247
|
-
const rootElement = _classPrivateFieldGet(_rootElement, this);
|
248
|
-
const table = rootDocument.createElement('table');
|
249
|
-
const tbody = rootDocument.createElement('tbody');
|
250
|
-
const tr = rootDocument.createElement('tr');
|
251
|
-
// This needs not to be the first row in order to get "regular" vaules.
|
252
|
-
const tr2 = rootDocument.createElement('tr');
|
253
|
-
const td = rootDocument.createElement('td');
|
254
|
-
tr2.appendChild(td);
|
255
|
-
tbody.appendChild(tr);
|
256
|
-
tbody.appendChild(tr2);
|
257
|
-
table.appendChild(tbody);
|
258
|
-
rootElement.appendChild(table);
|
259
|
-
const computedStyle = getComputedStyle(td);
|
260
|
-
const returnObject = {};
|
261
|
-
cssProps.forEach(prop => {
|
262
|
-
returnObject[prop] = computedStyle.getPropertyValue(prop);
|
263
|
-
});
|
264
|
-
rootElement.removeChild(table);
|
265
|
-
return returnObject;
|
266
|
-
}
|
267
|
-
/**
|
268
|
-
* Parses the value of a specified CSS property from the root element's computed style.
|
269
|
-
*
|
270
|
-
* @param {string} property - The CSS property to retrieve and parse.
|
271
|
-
* @returns {number|null} The parsed value of the CSS property.
|
272
|
-
*/
|
273
|
-
function _getParsedCSSValue(property) {
|
274
|
-
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
275
|
-
return null;
|
276
|
-
}
|
277
|
-
const parsedValue = Math.ceil(parseFloat(_classPrivateFieldGet(_rootComputedStyle, this).getPropertyValue(property)));
|
278
|
-
return Number.isNaN(parsedValue) ? null : parsedValue;
|
279
|
-
}
|
280
|
-
/**
|
281
|
-
* Clears the cached values.
|
282
|
-
*/
|
283
|
-
function _clearCachedValues() {
|
284
|
-
_classPrivateFieldSet(_computedStyles, this, {});
|
285
|
-
_classPrivateFieldSet(_cssVars, this, {});
|
286
|
-
_classPrivateFieldSet(_isClassicTheme, this, true);
|
287
|
-
}
|
@@ -1,283 +0,0 @@
|
|
1
|
-
import "core-js/modules/es.error.cause.js";
|
2
|
-
import "core-js/modules/esnext.iterator.constructor.js";
|
3
|
-
import "core-js/modules/esnext.iterator.for-each.js";
|
4
|
-
function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
|
5
|
-
function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
|
6
|
-
function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
|
7
|
-
function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
|
8
|
-
function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
|
9
|
-
function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
|
10
|
-
import { addClass, hasClass, removeClass } from "../../../../helpers/dom/element.mjs";
|
11
|
-
import { warn } from "../../../../helpers/console.mjs";
|
12
|
-
const CLASSIC_THEME_DEFAULT_HEIGHT = 23;
|
13
|
-
|
14
|
-
/**
|
15
|
-
* Handles the theme-related style operations.
|
16
|
-
*/
|
17
|
-
var _themeName = /*#__PURE__*/new WeakMap();
|
18
|
-
var _rootElement = /*#__PURE__*/new WeakMap();
|
19
|
-
var _rootComputedStyle = /*#__PURE__*/new WeakMap();
|
20
|
-
var _rootDocument = /*#__PURE__*/new WeakMap();
|
21
|
-
var _isClassicTheme = /*#__PURE__*/new WeakMap();
|
22
|
-
var _cssVars = /*#__PURE__*/new WeakMap();
|
23
|
-
var _computedStyles = /*#__PURE__*/new WeakMap();
|
24
|
-
var _StylesHandler_brand = /*#__PURE__*/new WeakSet();
|
25
|
-
export class StylesHandler {
|
26
|
-
/**
|
27
|
-
* Initializes a new instance of the `StylesHandler` class.
|
28
|
-
*
|
29
|
-
* @param {object} domBindings - The DOM bindings for the instance.
|
30
|
-
*/
|
31
|
-
constructor(domBindings) {
|
32
|
-
/**
|
33
|
-
* Calculates the row height based on the current theme and CSS variables.
|
34
|
-
*
|
35
|
-
* @returns {number|null} The calculated row height, or `null` if any required CSS variable is not found.
|
36
|
-
*/
|
37
|
-
_classPrivateMethodInitSpec(this, _StylesHandler_brand);
|
38
|
-
/**
|
39
|
-
* The name of the theme.
|
40
|
-
*
|
41
|
-
* @type {string|undefined}
|
42
|
-
*/
|
43
|
-
_classPrivateFieldInitSpec(this, _themeName, void 0);
|
44
|
-
/**
|
45
|
-
* The instance's root element.
|
46
|
-
*
|
47
|
-
* @type {HTMLElement}
|
48
|
-
*/
|
49
|
-
_classPrivateFieldInitSpec(this, _rootElement, void 0);
|
50
|
-
/**
|
51
|
-
* The computed style of the root element.
|
52
|
-
*
|
53
|
-
* @type {CSSStyleDeclaration}
|
54
|
-
* @private
|
55
|
-
*/
|
56
|
-
_classPrivateFieldInitSpec(this, _rootComputedStyle, void 0);
|
57
|
-
/**
|
58
|
-
* The root document of the instance.
|
59
|
-
*
|
60
|
-
* @type {Document}
|
61
|
-
* @private
|
62
|
-
*/
|
63
|
-
_classPrivateFieldInitSpec(this, _rootDocument, void 0);
|
64
|
-
/**
|
65
|
-
* `true` if the classic theme is enabled, `false` otherwise.
|
66
|
-
*
|
67
|
-
* @type {boolean}
|
68
|
-
*/
|
69
|
-
_classPrivateFieldInitSpec(this, _isClassicTheme, true);
|
70
|
-
/**
|
71
|
-
* An object to store CSS variable values.
|
72
|
-
*
|
73
|
-
* @type {object}
|
74
|
-
* @private
|
75
|
-
*/
|
76
|
-
_classPrivateFieldInitSpec(this, _cssVars, {});
|
77
|
-
/**
|
78
|
-
* Stores the computed styles for various elements.
|
79
|
-
*
|
80
|
-
* @type {object} - An object containing the computed styles if a nested structore of `element: { [element type]: {property: value} }`.
|
81
|
-
* @private
|
82
|
-
*/
|
83
|
-
_classPrivateFieldInitSpec(this, _computedStyles, {});
|
84
|
-
_classPrivateFieldSet(_rootElement, this, domBindings.rootTable.parentElement.parentElement);
|
85
|
-
_classPrivateFieldSet(_rootDocument, this, domBindings.rootDocument);
|
86
|
-
}
|
87
|
-
|
88
|
-
/**
|
89
|
-
* Gets the value indicating whether the classic theme is enabled.
|
90
|
-
*
|
91
|
-
* @returns {boolean} `true` if the classic theme is enabled, `false` otherwise.
|
92
|
-
*/
|
93
|
-
isClassicTheme() {
|
94
|
-
return _classPrivateFieldGet(_isClassicTheme, this);
|
95
|
-
}
|
96
|
-
|
97
|
-
/**
|
98
|
-
* Retrieves the value of a specified CSS variable.
|
99
|
-
*
|
100
|
-
* @param {string} variableName - The name of the CSS variable to retrieve.
|
101
|
-
* @returns {number|null|undefined} The value of the specified CSS variable, or `undefined` if not found.
|
102
|
-
*/
|
103
|
-
getCSSVariableValue(variableName) {
|
104
|
-
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
105
|
-
return null;
|
106
|
-
}
|
107
|
-
if (_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`]) {
|
108
|
-
return _classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`];
|
109
|
-
}
|
110
|
-
const acquiredValue = _assertClassBrand(_StylesHandler_brand, this, _getParsedCSSValue).call(this, `--ht-${variableName}`);
|
111
|
-
if (acquiredValue !== null) {
|
112
|
-
_classPrivateFieldGet(_cssVars, this)[`--ht-${variableName}`] = acquiredValue;
|
113
|
-
return acquiredValue;
|
114
|
-
}
|
115
|
-
}
|
116
|
-
|
117
|
-
/**
|
118
|
-
* Retrieves the computed style value for a specified CSS property of a `td` element.
|
119
|
-
*
|
120
|
-
* @param {string} cssProperty - The CSS property to retrieve the value for.
|
121
|
-
* @returns {number|string|undefined} The value of the specified CSS property, or `undefined` if not found.
|
122
|
-
*/
|
123
|
-
getStyleForTD(cssProperty) {
|
124
|
-
var _classPrivateFieldGet2;
|
125
|
-
return (_classPrivateFieldGet2 = _classPrivateFieldGet(_computedStyles, this)) === null || _classPrivateFieldGet2 === void 0 ? void 0 : _classPrivateFieldGet2.td[cssProperty];
|
126
|
-
}
|
127
|
-
|
128
|
-
/**
|
129
|
-
* Calculates the row height based on the current theme and CSS variables.
|
130
|
-
*
|
131
|
-
* @returns {number} The calculated row height.
|
132
|
-
*/
|
133
|
-
getDefaultRowHeight() {
|
134
|
-
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
135
|
-
return CLASSIC_THEME_DEFAULT_HEIGHT;
|
136
|
-
}
|
137
|
-
const calculatedRowHeight = _assertClassBrand(_StylesHandler_brand, this, _calculateRowHeight).call(this);
|
138
|
-
if (!calculatedRowHeight) {
|
139
|
-
warn(`The "${_classPrivateFieldGet(_themeName, this)}" theme is enabled, but its stylesheets are missing or not imported correctly. \
|
140
|
-
Import the correct CSS files in order to use that theme.`);
|
141
|
-
_classPrivateFieldSet(_isClassicTheme, this, true);
|
142
|
-
this.useTheme();
|
143
|
-
return CLASSIC_THEME_DEFAULT_HEIGHT;
|
144
|
-
}
|
145
|
-
return calculatedRowHeight;
|
146
|
-
}
|
147
|
-
|
148
|
-
/**
|
149
|
-
* Checks if the cells are using the `border-box` box-sizing model.
|
150
|
-
*
|
151
|
-
* @returns {boolean}
|
152
|
-
*/
|
153
|
-
areCellsBorderBox() {
|
154
|
-
return this.getStyleForTD('box-sizing') === 'border-box';
|
155
|
-
}
|
156
|
-
|
157
|
-
/**
|
158
|
-
* Applies the specified theme to the instance.
|
159
|
-
*
|
160
|
-
* @param {string|undefined|boolean} [themeName] - The name of the theme to apply.
|
161
|
-
*/
|
162
|
-
useTheme(themeName) {
|
163
|
-
if (!themeName) {
|
164
|
-
_assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
|
165
|
-
_classPrivateFieldSet(_isClassicTheme, this, true);
|
166
|
-
_classPrivateFieldSet(_themeName, this, themeName || undefined);
|
167
|
-
return;
|
168
|
-
}
|
169
|
-
if (themeName && themeName !== _classPrivateFieldGet(_themeName, this)) {
|
170
|
-
if (_classPrivateFieldGet(_themeName, this)) {
|
171
|
-
_assertClassBrand(_StylesHandler_brand, this, _clearCachedValues).call(this);
|
172
|
-
}
|
173
|
-
_classPrivateFieldSet(_themeName, this, themeName);
|
174
|
-
_classPrivateFieldSet(_isClassicTheme, this, false);
|
175
|
-
_assertClassBrand(_StylesHandler_brand, this, _applyClassNames).call(this);
|
176
|
-
_assertClassBrand(_StylesHandler_brand, this, _cacheStylesheetValues).call(this);
|
177
|
-
}
|
178
|
-
}
|
179
|
-
|
180
|
-
/**
|
181
|
-
* Gets the name of the theme.
|
182
|
-
*
|
183
|
-
* @returns {string|undefined}
|
184
|
-
*/
|
185
|
-
getThemeName() {
|
186
|
-
return _classPrivateFieldGet(_themeName, this);
|
187
|
-
}
|
188
|
-
|
189
|
-
/**
|
190
|
-
* Removes the theme-related class names from the root element.
|
191
|
-
*/
|
192
|
-
removeClassNames() {
|
193
|
-
if (hasClass(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this))) {
|
194
|
-
removeClass(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this));
|
195
|
-
}
|
196
|
-
}
|
197
|
-
}
|
198
|
-
function _calculateRowHeight() {
|
199
|
-
const lineHeightVarValue = this.getCSSVariableValue('line-height');
|
200
|
-
const verticalPaddingVarValue = this.getCSSVariableValue('cell-vertical-padding');
|
201
|
-
const bottomBorderWidth = Math.ceil(parseFloat(this.getStyleForTD('border-bottom-width')));
|
202
|
-
if (lineHeightVarValue === null || verticalPaddingVarValue === null || isNaN(bottomBorderWidth)) {
|
203
|
-
return null;
|
204
|
-
}
|
205
|
-
return lineHeightVarValue + 2 * verticalPaddingVarValue + bottomBorderWidth;
|
206
|
-
}
|
207
|
-
/**
|
208
|
-
* Applies the necessary class names to the root element.
|
209
|
-
*/
|
210
|
-
function _applyClassNames() {
|
211
|
-
removeClass(_classPrivateFieldGet(_rootElement, this), /ht-theme-.*/g);
|
212
|
-
addClass(_classPrivateFieldGet(_rootElement, this), _classPrivateFieldGet(_themeName, this));
|
213
|
-
}
|
214
|
-
/**
|
215
|
-
* Caches the computed style values for the root element and `td` element.
|
216
|
-
*/
|
217
|
-
function _cacheStylesheetValues() {
|
218
|
-
if (!this.isClassicTheme()) {
|
219
|
-
_classPrivateFieldSet(_rootComputedStyle, this, getComputedStyle(_classPrivateFieldGet(_rootElement, this)));
|
220
|
-
}
|
221
|
-
const stylesForTD = _assertClassBrand(_StylesHandler_brand, this, _getStylesForTD).call(this, ['box-sizing', 'border-bottom-width']);
|
222
|
-
_classPrivateFieldGet(_computedStyles, this).td = {
|
223
|
-
..._classPrivateFieldGet(_computedStyles, this).td,
|
224
|
-
...{
|
225
|
-
'box-sizing': stylesForTD['box-sizing'],
|
226
|
-
'border-bottom-width': stylesForTD['border-bottom-width']
|
227
|
-
}
|
228
|
-
};
|
229
|
-
}
|
230
|
-
/**
|
231
|
-
* Retrieves and processes the computed styles for a `td` element.
|
232
|
-
*
|
233
|
-
* This method creates a temporary table structure, appends it to the root element,
|
234
|
-
* retrieves the computed styles for the `td` element, and then removes the table
|
235
|
-
* from the DOM. The computed styles are passed to the provided callback function.
|
236
|
-
*
|
237
|
-
* @param {Array} cssProps - An array of CSS properties to retrieve.
|
238
|
-
* @returns {object} An object containing the requested computed styles for the `td` element.
|
239
|
-
* @private
|
240
|
-
*/
|
241
|
-
function _getStylesForTD(cssProps) {
|
242
|
-
const rootDocument = _classPrivateFieldGet(_rootDocument, this);
|
243
|
-
const rootElement = _classPrivateFieldGet(_rootElement, this);
|
244
|
-
const table = rootDocument.createElement('table');
|
245
|
-
const tbody = rootDocument.createElement('tbody');
|
246
|
-
const tr = rootDocument.createElement('tr');
|
247
|
-
// This needs not to be the first row in order to get "regular" vaules.
|
248
|
-
const tr2 = rootDocument.createElement('tr');
|
249
|
-
const td = rootDocument.createElement('td');
|
250
|
-
tr2.appendChild(td);
|
251
|
-
tbody.appendChild(tr);
|
252
|
-
tbody.appendChild(tr2);
|
253
|
-
table.appendChild(tbody);
|
254
|
-
rootElement.appendChild(table);
|
255
|
-
const computedStyle = getComputedStyle(td);
|
256
|
-
const returnObject = {};
|
257
|
-
cssProps.forEach(prop => {
|
258
|
-
returnObject[prop] = computedStyle.getPropertyValue(prop);
|
259
|
-
});
|
260
|
-
rootElement.removeChild(table);
|
261
|
-
return returnObject;
|
262
|
-
}
|
263
|
-
/**
|
264
|
-
* Parses the value of a specified CSS property from the root element's computed style.
|
265
|
-
*
|
266
|
-
* @param {string} property - The CSS property to retrieve and parse.
|
267
|
-
* @returns {number|null} The parsed value of the CSS property.
|
268
|
-
*/
|
269
|
-
function _getParsedCSSValue(property) {
|
270
|
-
if (_classPrivateFieldGet(_isClassicTheme, this)) {
|
271
|
-
return null;
|
272
|
-
}
|
273
|
-
const parsedValue = Math.ceil(parseFloat(_classPrivateFieldGet(_rootComputedStyle, this).getPropertyValue(property)));
|
274
|
-
return Number.isNaN(parsedValue) ? null : parsedValue;
|
275
|
-
}
|
276
|
-
/**
|
277
|
-
* Clears the cached values.
|
278
|
-
*/
|
279
|
-
function _clearCachedValues() {
|
280
|
-
_classPrivateFieldSet(_computedStyles, this, {});
|
281
|
-
_classPrivateFieldSet(_cssVars, this, {});
|
282
|
-
_classPrivateFieldSet(_isClassicTheme, this, true);
|
283
|
-
}
|
package/helpers/themes.js
DELETED
@@ -1,17 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
exports.__esModule = true;
|
4
|
-
exports.getThemeClassName = getThemeClassName;
|
5
|
-
var _element = require("./dom/element");
|
6
|
-
/**
|
7
|
-
* Retrieves the theme class name from the closest parent element that matches the specified regex pattern.
|
8
|
-
*
|
9
|
-
* @param {HTMLElement} rootElement - The root element from which to start searching for the theme class.
|
10
|
-
* @returns {string} - The theme class name regex.
|
11
|
-
*/
|
12
|
-
function getThemeClassName(rootElement) {
|
13
|
-
const {
|
14
|
-
classNames
|
15
|
-
} = (0, _element.findFirstParentWithClass)(rootElement, /ht-theme-[a-zA-Z0-9_-]+/);
|
16
|
-
return classNames.pop();
|
17
|
-
}
|
package/helpers/themes.mjs
DELETED
@@ -1,13 +0,0 @@
|
|
1
|
-
import { findFirstParentWithClass } from "./dom/element.mjs";
|
2
|
-
/**
|
3
|
-
* Retrieves the theme class name from the closest parent element that matches the specified regex pattern.
|
4
|
-
*
|
5
|
-
* @param {HTMLElement} rootElement - The root element from which to start searching for the theme class.
|
6
|
-
* @returns {string} - The theme class name regex.
|
7
|
-
*/
|
8
|
-
export function getThemeClassName(rootElement) {
|
9
|
-
const {
|
10
|
-
classNames
|
11
|
-
} = findFirstParentWithClass(rootElement, /ht-theme-[a-zA-Z0-9_-]+/);
|
12
|
-
return classNames.pop();
|
13
|
-
}
|