@public-ui/hydrate 2.2.4 → 2.2.5-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +81 -54
- package/dist/index.mjs +81 -54
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -4044,7 +4044,7 @@ const validateDownload = (component, value) => {
|
|
|
4044
4044
|
};
|
|
4045
4045
|
|
|
4046
4046
|
const validateErrorList = (component, value) => {
|
|
4047
|
-
watchValidator(component, 'errorList', (value) =>
|
|
4047
|
+
watchValidator(component, 'errorList', (value) => Array.isArray(value) && value.find((v) => !(typeof v === 'string' || typeof v === 'function')) === undefined, new Set(['string', 'function']), value);
|
|
4048
4048
|
};
|
|
4049
4049
|
|
|
4050
4050
|
const validateHasCloser = (component, value) => {
|
|
@@ -4228,10 +4228,6 @@ const validateMax = (component, value, options) => {
|
|
|
4228
4228
|
watchNumber(component, '_max', value, options);
|
|
4229
4229
|
};
|
|
4230
4230
|
|
|
4231
|
-
const validateModal = (component, value) => {
|
|
4232
|
-
watchBoolean(component, '_modal', value);
|
|
4233
|
-
};
|
|
4234
|
-
|
|
4235
4231
|
const validateMsg = (component, value) => {
|
|
4236
4232
|
objectObjectHandler(value, () => {
|
|
4237
4233
|
try {
|
|
@@ -4372,7 +4368,30 @@ const validateTableHeaderCells = (component, value) => {
|
|
|
4372
4368
|
}
|
|
4373
4369
|
catch (e) {
|
|
4374
4370
|
}
|
|
4375
|
-
watchValidator(component, '_headerCells', (value) => typeof value === 'object' &&
|
|
4371
|
+
watchValidator(component, '_headerCells', (value) => typeof value === 'object' &&
|
|
4372
|
+
value !== null &&
|
|
4373
|
+
(value.horizontal === undefined ||
|
|
4374
|
+
(Array.isArray(value.horizontal) && value.horizontal.find((headerRow) => !Array.isArray(headerRow)) === undefined)) &&
|
|
4375
|
+
(value.vertical === undefined || (Array.isArray(value.vertical) && value.vertical.find((headerCol) => !Array.isArray(headerCol)) === undefined)) &&
|
|
4376
|
+
true, new Set(['TableHeaderCellsPropType']), value, {
|
|
4377
|
+
hooks: {
|
|
4378
|
+
afterPatch: (value, state) => {
|
|
4379
|
+
var _a;
|
|
4380
|
+
const headerCells = value;
|
|
4381
|
+
const widths = [];
|
|
4382
|
+
(_a = headerCells.horizontal) === null || _a === void 0 ? void 0 : _a.forEach((headerRow) => {
|
|
4383
|
+
headerRow.forEach((headerCell) => {
|
|
4384
|
+
if (headerCell.width) {
|
|
4385
|
+
widths.push(headerCell.width);
|
|
4386
|
+
}
|
|
4387
|
+
});
|
|
4388
|
+
});
|
|
4389
|
+
if (widths.length > 0) {
|
|
4390
|
+
state._minWidth = `calc(${widths.join(' + ')})`;
|
|
4391
|
+
}
|
|
4392
|
+
},
|
|
4393
|
+
},
|
|
4394
|
+
});
|
|
4376
4395
|
});
|
|
4377
4396
|
});
|
|
4378
4397
|
};
|
|
@@ -6939,14 +6958,9 @@ class KolDrawer {
|
|
|
6939
6958
|
};
|
|
6940
6959
|
}
|
|
6941
6960
|
async open() {
|
|
6942
|
-
var _a
|
|
6961
|
+
var _a;
|
|
6943
6962
|
this.state = Object.assign(Object.assign({}, this.state), { _open: true });
|
|
6944
|
-
|
|
6945
|
-
(_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
6946
|
-
}
|
|
6947
|
-
else {
|
|
6948
|
-
(_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.show();
|
|
6949
|
-
}
|
|
6963
|
+
(_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
6950
6964
|
}
|
|
6951
6965
|
async close() {
|
|
6952
6966
|
this.state = Object.assign(Object.assign({}, this.state), { _open: false });
|
|
@@ -6963,8 +6977,7 @@ class KolDrawer {
|
|
|
6963
6977
|
return (hAsync("div", { ref: this.getWrapperRef, class: `drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`, "aria-label": this.state._label }, hAsync("div", { class: "drawer__content" }, hAsync("slot", null))));
|
|
6964
6978
|
}
|
|
6965
6979
|
render() {
|
|
6966
|
-
|
|
6967
|
-
return (hAsync(Host, { key: '9c670b4923f78c3060bafe6f2e90c45a20b89fd7', class: `kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: 'd94fade1430bfed4dac37660d07ae5265b994f4f', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
|
|
6980
|
+
return (hAsync(Host, { key: '18007fd3e3eb1d4794cafd1d18780b7f3a58fe4e', class: `kol-drawer drawer`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: '07cd87f6d086e51002c4fcea7402ca0910bc2c7a', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
|
|
6968
6981
|
}
|
|
6969
6982
|
validateLabel(value) {
|
|
6970
6983
|
validateLabel(this, value, {
|
|
@@ -6974,9 +6987,6 @@ class KolDrawer {
|
|
|
6974
6987
|
validateAlign(value) {
|
|
6975
6988
|
validateAlign(this, value);
|
|
6976
6989
|
}
|
|
6977
|
-
validateModal(value) {
|
|
6978
|
-
validateModal(this, value);
|
|
6979
|
-
}
|
|
6980
6990
|
async validateOpen(value) {
|
|
6981
6991
|
if (typeof value === 'boolean') {
|
|
6982
6992
|
validateOpen(this, value);
|
|
@@ -7019,13 +7029,11 @@ class KolDrawer {
|
|
|
7019
7029
|
this.validateLabel(this._label);
|
|
7020
7030
|
await this.validateOpen(this._open);
|
|
7021
7031
|
this.validateAlign(this._align);
|
|
7022
|
-
this.validateModal(this._modal);
|
|
7023
7032
|
this.validateOn(this._on);
|
|
7024
7033
|
}
|
|
7025
7034
|
static get watchers() { return {
|
|
7026
7035
|
"_label": ["validateLabel"],
|
|
7027
7036
|
"_align": ["validateAlign"],
|
|
7028
|
-
"_modal": ["validateModal"],
|
|
7029
7037
|
"_open": ["validateOpen"],
|
|
7030
7038
|
"_on": ["validateOn"]
|
|
7031
7039
|
}; }
|
|
@@ -7073,16 +7081,11 @@ class KolForm {
|
|
|
7073
7081
|
(_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onReset(event);
|
|
7074
7082
|
}
|
|
7075
7083
|
};
|
|
7076
|
-
this.handleLinkClick = (
|
|
7077
|
-
|
|
7078
|
-
|
|
7079
|
-
|
|
7080
|
-
|
|
7081
|
-
const targetElement = document.querySelector(hrefUrl.hash);
|
|
7082
|
-
if (targetElement && typeof targetElement.focus === 'function') {
|
|
7083
|
-
targetElement.scrollIntoView({ behavior: 'smooth' });
|
|
7084
|
-
targetElement.focus();
|
|
7085
|
-
}
|
|
7084
|
+
this.handleLinkClick = (selector) => {
|
|
7085
|
+
const targetElement = document.querySelector(selector);
|
|
7086
|
+
if (targetElement && typeof targetElement.focus === 'function') {
|
|
7087
|
+
targetElement.scrollIntoView({ behavior: 'smooth' });
|
|
7088
|
+
targetElement.focus();
|
|
7086
7089
|
}
|
|
7087
7090
|
};
|
|
7088
7091
|
this._on = undefined;
|
|
@@ -7091,9 +7094,13 @@ class KolForm {
|
|
|
7091
7094
|
this.state = {};
|
|
7092
7095
|
}
|
|
7093
7096
|
renderErrorList(errorList) {
|
|
7094
|
-
return (hAsync(KolAlertFc$1, {
|
|
7095
|
-
|
|
7096
|
-
|
|
7097
|
+
return (hAsync(KolAlertFc$1, { ref: (el) => {
|
|
7098
|
+
this.errorListBlock = el;
|
|
7099
|
+
}, type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: (el) => {
|
|
7100
|
+
if (index === 0) {
|
|
7101
|
+
this.errorListFirstLink = el;
|
|
7102
|
+
this.scrollToErrorList();
|
|
7103
|
+
}
|
|
7097
7104
|
} }))))))));
|
|
7098
7105
|
}
|
|
7099
7106
|
renderFormElement() {
|
|
@@ -7101,13 +7108,21 @@ class KolForm {
|
|
|
7101
7108
|
}
|
|
7102
7109
|
render() {
|
|
7103
7110
|
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
|
|
7104
|
-
return (hAsync(Host, { key: '
|
|
7111
|
+
return (hAsync(Host, { key: '69dbcbe8a46d038040ba381cdf6ec67c8e39f0dc', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
|
|
7105
7112
|
}
|
|
7106
|
-
|
|
7113
|
+
scrollToErrorList() {
|
|
7107
7114
|
var _a;
|
|
7108
|
-
|
|
7109
|
-
|
|
7110
|
-
|
|
7115
|
+
(_a = this.errorListBlock) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
7116
|
+
behavior: 'smooth',
|
|
7117
|
+
block: 'start',
|
|
7118
|
+
});
|
|
7119
|
+
setTimeout(() => {
|
|
7120
|
+
var _a, _b;
|
|
7121
|
+
(_b = (_a = this.errorListFirstLink) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.focus();
|
|
7122
|
+
}, 250);
|
|
7123
|
+
}
|
|
7124
|
+
async focusErrorList() {
|
|
7125
|
+
this.scrollToErrorList();
|
|
7111
7126
|
return Promise.resolve();
|
|
7112
7127
|
}
|
|
7113
7128
|
validateOn(value) {
|
|
@@ -9366,11 +9381,7 @@ class KolInputNumber {
|
|
|
9366
9381
|
this.controller.validateTouched(value);
|
|
9367
9382
|
}
|
|
9368
9383
|
validateValue(value) {
|
|
9369
|
-
this.controller.validateValueEx(value
|
|
9370
|
-
if (v === '' && this.inputRef) {
|
|
9371
|
-
this.inputRef.value = '';
|
|
9372
|
-
}
|
|
9373
|
-
});
|
|
9384
|
+
this.controller.validateValueEx(value);
|
|
9374
9385
|
}
|
|
9375
9386
|
componentWillLoad() {
|
|
9376
9387
|
this._touched = this._touched === true;
|
|
@@ -13351,7 +13362,8 @@ function isContainingBlock(elementOrCss) {
|
|
|
13351
13362
|
const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
|
|
13352
13363
|
|
|
13353
13364
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
13354
|
-
|
|
13365
|
+
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
|
13366
|
+
return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
|
|
13355
13367
|
}
|
|
13356
13368
|
function getContainingBlock(element) {
|
|
13357
13369
|
let currentNode = getParentNode(element);
|
|
@@ -13909,6 +13921,10 @@ const platform = {
|
|
|
13909
13921
|
isRTL
|
|
13910
13922
|
};
|
|
13911
13923
|
|
|
13924
|
+
function rectsAreEqual(a, b) {
|
|
13925
|
+
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
13926
|
+
}
|
|
13927
|
+
|
|
13912
13928
|
// https://samthor.au/2021/observing-dom/
|
|
13913
13929
|
function observeMove(element, onMove) {
|
|
13914
13930
|
let io = null;
|
|
@@ -13928,12 +13944,13 @@ function observeMove(element, onMove) {
|
|
|
13928
13944
|
threshold = 1;
|
|
13929
13945
|
}
|
|
13930
13946
|
cleanup();
|
|
13947
|
+
const elementRectForRootMargin = element.getBoundingClientRect();
|
|
13931
13948
|
const {
|
|
13932
13949
|
left,
|
|
13933
13950
|
top,
|
|
13934
13951
|
width,
|
|
13935
13952
|
height
|
|
13936
|
-
} =
|
|
13953
|
+
} = elementRectForRootMargin;
|
|
13937
13954
|
if (!skip) {
|
|
13938
13955
|
onMove();
|
|
13939
13956
|
}
|
|
@@ -13966,6 +13983,16 @@ function observeMove(element, onMove) {
|
|
|
13966
13983
|
refresh(false, ratio);
|
|
13967
13984
|
}
|
|
13968
13985
|
}
|
|
13986
|
+
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
|
|
13987
|
+
// It's possible that even though the ratio is reported as 1, the
|
|
13988
|
+
// element is not actually fully within the IntersectionObserver's root
|
|
13989
|
+
// area anymore. This can happen under performance constraints. This may
|
|
13990
|
+
// be a bug in the browser's IntersectionObserver implementation. To
|
|
13991
|
+
// work around this, we compare the element's bounding rect now with
|
|
13992
|
+
// what it was at the time we created the IntersectionObserver. If they
|
|
13993
|
+
// are not equal then the element moved, so we refresh.
|
|
13994
|
+
refresh();
|
|
13995
|
+
}
|
|
13969
13996
|
isFirstUpdate = false;
|
|
13970
13997
|
}
|
|
13971
13998
|
|
|
@@ -14043,7 +14070,7 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
14043
14070
|
}
|
|
14044
14071
|
function frameLoop() {
|
|
14045
14072
|
const nextRefRect = getBoundingClientRect(reference);
|
|
14046
|
-
if (prevRefRect && (
|
|
14073
|
+
if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
|
|
14047
14074
|
update();
|
|
14048
14075
|
}
|
|
14049
14076
|
prevRefRect = nextRefRect;
|
|
@@ -24571,7 +24598,7 @@ class KolTableStateless {
|
|
|
24571
24598
|
});
|
|
24572
24599
|
}
|
|
24573
24600
|
validateMinWidth(value) {
|
|
24574
|
-
watchString(this, '
|
|
24601
|
+
watchString(this, '_deprecatedMinWidth', value, {
|
|
24575
24602
|
defaultValue: undefined,
|
|
24576
24603
|
});
|
|
24577
24604
|
}
|
|
@@ -24924,9 +24951,9 @@ class KolTableStateless {
|
|
|
24924
24951
|
render() {
|
|
24925
24952
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
24926
24953
|
this.checkboxRefs = [];
|
|
24927
|
-
return (hAsync(Host, { key: '
|
|
24928
|
-
minWidth: this.state._minWidth,
|
|
24929
|
-
} }, hAsync("div", { key: '
|
|
24954
|
+
return (hAsync(Host, { key: '9518b44a4421b5843936ee7623532733b6134a2a', class: "kol-table-stateless-wc" }, hAsync("div", { key: '5bfd8c297dd3bed301c7e7e455b60278e270af24', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '6906eae36940a1a00a5eed7401526a218949e990', style: {
|
|
24955
|
+
minWidth: this.state._deprecatedMinWidth || this.state._minWidth,
|
|
24956
|
+
} }, hAsync("div", { key: 'ee461a67c036209a11cd55134023a85090c371d8', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'a8aa614eb1b4db063238a818022bf2139b269b09', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '1c88c8dba9d88ef7163645b686d1d5007cc75f47' }, [
|
|
24930
24957
|
this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) &&
|
|
24931
24958
|
cols.map((cell, colIndex) => {
|
|
24932
24959
|
if (cell.asTd === true) {
|
|
@@ -24946,7 +24973,7 @@ class KolTableStateless {
|
|
|
24946
24973
|
}
|
|
24947
24974
|
})))),
|
|
24948
24975
|
this.renderSpacer('head', this.state._headerCells.horizontal),
|
|
24949
|
-
])), hAsync("tbody", { key: '
|
|
24976
|
+
])), hAsync("tbody", { key: 'd5983096363ef26b192a129bec8ab8e1df051056' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
24950
24977
|
}
|
|
24951
24978
|
get host() { return getElement(this); }
|
|
24952
24979
|
static get watchers() { return {
|
|
@@ -26035,7 +26062,7 @@ class KolTree {
|
|
|
26035
26062
|
this._label = undefined;
|
|
26036
26063
|
}
|
|
26037
26064
|
render() {
|
|
26038
|
-
return (hAsync(Host, { key: '
|
|
26065
|
+
return (hAsync(Host, { key: 'f264ff4f437f2d94209b5e1b408fc12bae1e3715', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: '074485479eab7e05309d0804a5d9afefac16a243', _label: this._label }, hAsync("slot", { key: '7b2f6a10e88584659e00d2cb9123ee9e8ed7b0ea' }))));
|
|
26039
26066
|
}
|
|
26040
26067
|
static get style() { return {
|
|
26041
26068
|
default: KolTreeDefaultStyle0
|
|
@@ -26083,7 +26110,7 @@ class KolTreeItem {
|
|
|
26083
26110
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
26084
26111
|
}
|
|
26085
26112
|
render() {
|
|
26086
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
26113
|
+
return (hAsync(KolTreeItemWcTag, { key: 'fdaac019e361b8efe063a22a47f3b67fab18d1ba', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '73d1d194d03797ef974eab18f49c830148649110' })));
|
|
26087
26114
|
}
|
|
26088
26115
|
static get style() { return {
|
|
26089
26116
|
default: KolTreeItemDefaultStyle0
|
|
@@ -26237,7 +26264,7 @@ class KolTreeWc {
|
|
|
26237
26264
|
validateLabel(this, value);
|
|
26238
26265
|
}
|
|
26239
26266
|
render() {
|
|
26240
|
-
return (hAsync(Host, { key: '
|
|
26267
|
+
return (hAsync(Host, { key: 'fc79fee1595fed55d37dc2fb4f3509ff6c16686b', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'd8d4800627e61c9766150d1d9a440889cf122440', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '40b1ee8c5d89febb2975168f5630fdd01b6e4e97', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '86f66e7236df8aa03d942450c06a2f2f5930b987' })))));
|
|
26241
26268
|
}
|
|
26242
26269
|
static isTreeItem(element) {
|
|
26243
26270
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
package/dist/index.mjs
CHANGED
|
@@ -4040,7 +4040,7 @@ const validateDownload = (component, value) => {
|
|
|
4040
4040
|
};
|
|
4041
4041
|
|
|
4042
4042
|
const validateErrorList = (component, value) => {
|
|
4043
|
-
watchValidator(component, 'errorList', (value) =>
|
|
4043
|
+
watchValidator(component, 'errorList', (value) => Array.isArray(value) && value.find((v) => !(typeof v === 'string' || typeof v === 'function')) === undefined, new Set(['string', 'function']), value);
|
|
4044
4044
|
};
|
|
4045
4045
|
|
|
4046
4046
|
const validateHasCloser = (component, value) => {
|
|
@@ -4224,10 +4224,6 @@ const validateMax = (component, value, options) => {
|
|
|
4224
4224
|
watchNumber(component, '_max', value, options);
|
|
4225
4225
|
};
|
|
4226
4226
|
|
|
4227
|
-
const validateModal = (component, value) => {
|
|
4228
|
-
watchBoolean(component, '_modal', value);
|
|
4229
|
-
};
|
|
4230
|
-
|
|
4231
4227
|
const validateMsg = (component, value) => {
|
|
4232
4228
|
objectObjectHandler(value, () => {
|
|
4233
4229
|
try {
|
|
@@ -4368,7 +4364,30 @@ const validateTableHeaderCells = (component, value) => {
|
|
|
4368
4364
|
}
|
|
4369
4365
|
catch (e) {
|
|
4370
4366
|
}
|
|
4371
|
-
watchValidator(component, '_headerCells', (value) => typeof value === 'object' &&
|
|
4367
|
+
watchValidator(component, '_headerCells', (value) => typeof value === 'object' &&
|
|
4368
|
+
value !== null &&
|
|
4369
|
+
(value.horizontal === undefined ||
|
|
4370
|
+
(Array.isArray(value.horizontal) && value.horizontal.find((headerRow) => !Array.isArray(headerRow)) === undefined)) &&
|
|
4371
|
+
(value.vertical === undefined || (Array.isArray(value.vertical) && value.vertical.find((headerCol) => !Array.isArray(headerCol)) === undefined)) &&
|
|
4372
|
+
true, new Set(['TableHeaderCellsPropType']), value, {
|
|
4373
|
+
hooks: {
|
|
4374
|
+
afterPatch: (value, state) => {
|
|
4375
|
+
var _a;
|
|
4376
|
+
const headerCells = value;
|
|
4377
|
+
const widths = [];
|
|
4378
|
+
(_a = headerCells.horizontal) === null || _a === void 0 ? void 0 : _a.forEach((headerRow) => {
|
|
4379
|
+
headerRow.forEach((headerCell) => {
|
|
4380
|
+
if (headerCell.width) {
|
|
4381
|
+
widths.push(headerCell.width);
|
|
4382
|
+
}
|
|
4383
|
+
});
|
|
4384
|
+
});
|
|
4385
|
+
if (widths.length > 0) {
|
|
4386
|
+
state._minWidth = `calc(${widths.join(' + ')})`;
|
|
4387
|
+
}
|
|
4388
|
+
},
|
|
4389
|
+
},
|
|
4390
|
+
});
|
|
4372
4391
|
});
|
|
4373
4392
|
});
|
|
4374
4393
|
};
|
|
@@ -6935,14 +6954,9 @@ class KolDrawer {
|
|
|
6935
6954
|
};
|
|
6936
6955
|
}
|
|
6937
6956
|
async open() {
|
|
6938
|
-
var _a
|
|
6957
|
+
var _a;
|
|
6939
6958
|
this.state = Object.assign(Object.assign({}, this.state), { _open: true });
|
|
6940
|
-
|
|
6941
|
-
(_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
6942
|
-
}
|
|
6943
|
-
else {
|
|
6944
|
-
(_b = this.dialogElement) === null || _b === void 0 ? void 0 : _b.show();
|
|
6945
|
-
}
|
|
6959
|
+
(_a = this.dialogElement) === null || _a === void 0 ? void 0 : _a.showModal();
|
|
6946
6960
|
}
|
|
6947
6961
|
async close() {
|
|
6948
6962
|
this.state = Object.assign(Object.assign({}, this.state), { _open: false });
|
|
@@ -6959,8 +6973,7 @@ class KolDrawer {
|
|
|
6959
6973
|
return (hAsync("div", { ref: this.getWrapperRef, class: `drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`, "aria-label": this.state._label }, hAsync("div", { class: "drawer__content" }, hAsync("slot", null))));
|
|
6960
6974
|
}
|
|
6961
6975
|
render() {
|
|
6962
|
-
|
|
6963
|
-
return (hAsync(Host, { key: '9c670b4923f78c3060bafe6f2e90c45a20b89fd7', class: `kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: 'd94fade1430bfed4dac37660d07ae5265b994f4f', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
|
|
6976
|
+
return (hAsync(Host, { key: '18007fd3e3eb1d4794cafd1d18780b7f3a58fe4e', class: `kol-drawer drawer`, ref: (el) => (this.hostElement = el) }, hAsync("dialog", { key: '07cd87f6d086e51002c4fcea7402ca0910bc2c7a', class: "drawer__dialog", ref: this.getRef }, this.renderDialogContent())));
|
|
6964
6977
|
}
|
|
6965
6978
|
validateLabel(value) {
|
|
6966
6979
|
validateLabel(this, value, {
|
|
@@ -6970,9 +6983,6 @@ class KolDrawer {
|
|
|
6970
6983
|
validateAlign(value) {
|
|
6971
6984
|
validateAlign(this, value);
|
|
6972
6985
|
}
|
|
6973
|
-
validateModal(value) {
|
|
6974
|
-
validateModal(this, value);
|
|
6975
|
-
}
|
|
6976
6986
|
async validateOpen(value) {
|
|
6977
6987
|
if (typeof value === 'boolean') {
|
|
6978
6988
|
validateOpen(this, value);
|
|
@@ -7015,13 +7025,11 @@ class KolDrawer {
|
|
|
7015
7025
|
this.validateLabel(this._label);
|
|
7016
7026
|
await this.validateOpen(this._open);
|
|
7017
7027
|
this.validateAlign(this._align);
|
|
7018
|
-
this.validateModal(this._modal);
|
|
7019
7028
|
this.validateOn(this._on);
|
|
7020
7029
|
}
|
|
7021
7030
|
static get watchers() { return {
|
|
7022
7031
|
"_label": ["validateLabel"],
|
|
7023
7032
|
"_align": ["validateAlign"],
|
|
7024
|
-
"_modal": ["validateModal"],
|
|
7025
7033
|
"_open": ["validateOpen"],
|
|
7026
7034
|
"_on": ["validateOn"]
|
|
7027
7035
|
}; }
|
|
@@ -7069,16 +7077,11 @@ class KolForm {
|
|
|
7069
7077
|
(_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onReset(event);
|
|
7070
7078
|
}
|
|
7071
7079
|
};
|
|
7072
|
-
this.handleLinkClick = (
|
|
7073
|
-
|
|
7074
|
-
|
|
7075
|
-
|
|
7076
|
-
|
|
7077
|
-
const targetElement = document.querySelector(hrefUrl.hash);
|
|
7078
|
-
if (targetElement && typeof targetElement.focus === 'function') {
|
|
7079
|
-
targetElement.scrollIntoView({ behavior: 'smooth' });
|
|
7080
|
-
targetElement.focus();
|
|
7081
|
-
}
|
|
7080
|
+
this.handleLinkClick = (selector) => {
|
|
7081
|
+
const targetElement = document.querySelector(selector);
|
|
7082
|
+
if (targetElement && typeof targetElement.focus === 'function') {
|
|
7083
|
+
targetElement.scrollIntoView({ behavior: 'smooth' });
|
|
7084
|
+
targetElement.focus();
|
|
7082
7085
|
}
|
|
7083
7086
|
};
|
|
7084
7087
|
this._on = undefined;
|
|
@@ -7087,9 +7090,13 @@ class KolForm {
|
|
|
7087
7090
|
this.state = {};
|
|
7088
7091
|
}
|
|
7089
7092
|
renderErrorList(errorList) {
|
|
7090
|
-
return (hAsync(KolAlertFc$1, {
|
|
7091
|
-
|
|
7092
|
-
|
|
7093
|
+
return (hAsync(KolAlertFc$1, { ref: (el) => {
|
|
7094
|
+
this.errorListBlock = el;
|
|
7095
|
+
}, type: "error", variant: "card", label: translate('kol-error-list-message') }, hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, errorList === null || errorList === void 0 ? void 0 : errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkWcTag, { _href: "", _label: error.message, _on: { onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }, ref: (el) => {
|
|
7096
|
+
if (index === 0) {
|
|
7097
|
+
this.errorListFirstLink = el;
|
|
7098
|
+
this.scrollToErrorList();
|
|
7099
|
+
}
|
|
7093
7100
|
} }))))))));
|
|
7094
7101
|
}
|
|
7095
7102
|
renderFormElement() {
|
|
@@ -7097,13 +7104,21 @@ class KolForm {
|
|
|
7097
7104
|
}
|
|
7098
7105
|
render() {
|
|
7099
7106
|
const hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;
|
|
7100
|
-
return (hAsync(Host, { key: '
|
|
7107
|
+
return (hAsync(Host, { key: '69dbcbe8a46d038040ba381cdf6ec67c8e39f0dc', class: "kol-form" }, hasErrorList && this.renderErrorList(this._errorList), this.renderFormElement()));
|
|
7101
7108
|
}
|
|
7102
|
-
|
|
7109
|
+
scrollToErrorList() {
|
|
7103
7110
|
var _a;
|
|
7104
|
-
|
|
7105
|
-
|
|
7106
|
-
|
|
7111
|
+
(_a = this.errorListBlock) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
|
|
7112
|
+
behavior: 'smooth',
|
|
7113
|
+
block: 'start',
|
|
7114
|
+
});
|
|
7115
|
+
setTimeout(() => {
|
|
7116
|
+
var _a, _b;
|
|
7117
|
+
(_b = (_a = this.errorListFirstLink) === null || _a === void 0 ? void 0 : _a.querySelector('a')) === null || _b === void 0 ? void 0 : _b.focus();
|
|
7118
|
+
}, 250);
|
|
7119
|
+
}
|
|
7120
|
+
async focusErrorList() {
|
|
7121
|
+
this.scrollToErrorList();
|
|
7107
7122
|
return Promise.resolve();
|
|
7108
7123
|
}
|
|
7109
7124
|
validateOn(value) {
|
|
@@ -9362,11 +9377,7 @@ class KolInputNumber {
|
|
|
9362
9377
|
this.controller.validateTouched(value);
|
|
9363
9378
|
}
|
|
9364
9379
|
validateValue(value) {
|
|
9365
|
-
this.controller.validateValueEx(value
|
|
9366
|
-
if (v === '' && this.inputRef) {
|
|
9367
|
-
this.inputRef.value = '';
|
|
9368
|
-
}
|
|
9369
|
-
});
|
|
9380
|
+
this.controller.validateValueEx(value);
|
|
9370
9381
|
}
|
|
9371
9382
|
componentWillLoad() {
|
|
9372
9383
|
this._touched = this._touched === true;
|
|
@@ -13347,7 +13358,8 @@ function isContainingBlock(elementOrCss) {
|
|
|
13347
13358
|
const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
|
|
13348
13359
|
|
|
13349
13360
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
13350
|
-
|
|
13361
|
+
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
|
13362
|
+
return ['transform', 'translate', 'scale', 'rotate', 'perspective'].some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
|
|
13351
13363
|
}
|
|
13352
13364
|
function getContainingBlock(element) {
|
|
13353
13365
|
let currentNode = getParentNode(element);
|
|
@@ -13905,6 +13917,10 @@ const platform = {
|
|
|
13905
13917
|
isRTL
|
|
13906
13918
|
};
|
|
13907
13919
|
|
|
13920
|
+
function rectsAreEqual(a, b) {
|
|
13921
|
+
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
13922
|
+
}
|
|
13923
|
+
|
|
13908
13924
|
// https://samthor.au/2021/observing-dom/
|
|
13909
13925
|
function observeMove(element, onMove) {
|
|
13910
13926
|
let io = null;
|
|
@@ -13924,12 +13940,13 @@ function observeMove(element, onMove) {
|
|
|
13924
13940
|
threshold = 1;
|
|
13925
13941
|
}
|
|
13926
13942
|
cleanup();
|
|
13943
|
+
const elementRectForRootMargin = element.getBoundingClientRect();
|
|
13927
13944
|
const {
|
|
13928
13945
|
left,
|
|
13929
13946
|
top,
|
|
13930
13947
|
width,
|
|
13931
13948
|
height
|
|
13932
|
-
} =
|
|
13949
|
+
} = elementRectForRootMargin;
|
|
13933
13950
|
if (!skip) {
|
|
13934
13951
|
onMove();
|
|
13935
13952
|
}
|
|
@@ -13962,6 +13979,16 @@ function observeMove(element, onMove) {
|
|
|
13962
13979
|
refresh(false, ratio);
|
|
13963
13980
|
}
|
|
13964
13981
|
}
|
|
13982
|
+
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
|
|
13983
|
+
// It's possible that even though the ratio is reported as 1, the
|
|
13984
|
+
// element is not actually fully within the IntersectionObserver's root
|
|
13985
|
+
// area anymore. This can happen under performance constraints. This may
|
|
13986
|
+
// be a bug in the browser's IntersectionObserver implementation. To
|
|
13987
|
+
// work around this, we compare the element's bounding rect now with
|
|
13988
|
+
// what it was at the time we created the IntersectionObserver. If they
|
|
13989
|
+
// are not equal then the element moved, so we refresh.
|
|
13990
|
+
refresh();
|
|
13991
|
+
}
|
|
13965
13992
|
isFirstUpdate = false;
|
|
13966
13993
|
}
|
|
13967
13994
|
|
|
@@ -14039,7 +14066,7 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
14039
14066
|
}
|
|
14040
14067
|
function frameLoop() {
|
|
14041
14068
|
const nextRefRect = getBoundingClientRect(reference);
|
|
14042
|
-
if (prevRefRect && (
|
|
14069
|
+
if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
|
|
14043
14070
|
update();
|
|
14044
14071
|
}
|
|
14045
14072
|
prevRefRect = nextRefRect;
|
|
@@ -24567,7 +24594,7 @@ class KolTableStateless {
|
|
|
24567
24594
|
});
|
|
24568
24595
|
}
|
|
24569
24596
|
validateMinWidth(value) {
|
|
24570
|
-
watchString(this, '
|
|
24597
|
+
watchString(this, '_deprecatedMinWidth', value, {
|
|
24571
24598
|
defaultValue: undefined,
|
|
24572
24599
|
});
|
|
24573
24600
|
}
|
|
@@ -24920,9 +24947,9 @@ class KolTableStateless {
|
|
|
24920
24947
|
render() {
|
|
24921
24948
|
const dataField = this.createDataField(this.state._data, this.state._headerCells);
|
|
24922
24949
|
this.checkboxRefs = [];
|
|
24923
|
-
return (hAsync(Host, { key: '
|
|
24924
|
-
minWidth: this.state._minWidth,
|
|
24925
|
-
} }, hAsync("div", { key: '
|
|
24950
|
+
return (hAsync(Host, { key: '9518b44a4421b5843936ee7623532733b6134a2a', class: "kol-table-stateless-wc" }, hAsync("div", { key: '5bfd8c297dd3bed301c7e7e455b60278e270af24', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '6906eae36940a1a00a5eed7401526a218949e990', style: {
|
|
24951
|
+
minWidth: this.state._deprecatedMinWidth || this.state._minWidth,
|
|
24952
|
+
} }, hAsync("div", { key: 'ee461a67c036209a11cd55134023a85090c371d8', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'a8aa614eb1b4db063238a818022bf2139b269b09', id: "caption" }, this.state._label), Array.isArray(this.state._headerCells.horizontal) && (hAsync("thead", { key: '1c88c8dba9d88ef7163645b686d1d5007cc75f47' }, [
|
|
24926
24953
|
this.state._headerCells.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) &&
|
|
24927
24954
|
cols.map((cell, colIndex) => {
|
|
24928
24955
|
if (cell.asTd === true) {
|
|
@@ -24942,7 +24969,7 @@ class KolTableStateless {
|
|
|
24942
24969
|
}
|
|
24943
24970
|
})))),
|
|
24944
24971
|
this.renderSpacer('head', this.state._headerCells.horizontal),
|
|
24945
|
-
])), hAsync("tbody", { key: '
|
|
24972
|
+
])), hAsync("tbody", { key: 'd5983096363ef26b192a129bec8ab8e1df051056' }, dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
|
|
24946
24973
|
}
|
|
24947
24974
|
get host() { return getElement(this); }
|
|
24948
24975
|
static get watchers() { return {
|
|
@@ -26031,7 +26058,7 @@ class KolTree {
|
|
|
26031
26058
|
this._label = undefined;
|
|
26032
26059
|
}
|
|
26033
26060
|
render() {
|
|
26034
|
-
return (hAsync(Host, { key: '
|
|
26061
|
+
return (hAsync(Host, { key: 'f264ff4f437f2d94209b5e1b408fc12bae1e3715', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: '074485479eab7e05309d0804a5d9afefac16a243', _label: this._label }, hAsync("slot", { key: '7b2f6a10e88584659e00d2cb9123ee9e8ed7b0ea' }))));
|
|
26035
26062
|
}
|
|
26036
26063
|
static get style() { return {
|
|
26037
26064
|
default: KolTreeDefaultStyle0
|
|
@@ -26079,7 +26106,7 @@ class KolTreeItem {
|
|
|
26079
26106
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
26080
26107
|
}
|
|
26081
26108
|
render() {
|
|
26082
|
-
return (hAsync(KolTreeItemWcTag, { key: '
|
|
26109
|
+
return (hAsync(KolTreeItemWcTag, { key: 'fdaac019e361b8efe063a22a47f3b67fab18d1ba', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: '73d1d194d03797ef974eab18f49c830148649110' })));
|
|
26083
26110
|
}
|
|
26084
26111
|
static get style() { return {
|
|
26085
26112
|
default: KolTreeItemDefaultStyle0
|
|
@@ -26233,7 +26260,7 @@ class KolTreeWc {
|
|
|
26233
26260
|
validateLabel(this, value);
|
|
26234
26261
|
}
|
|
26235
26262
|
render() {
|
|
26236
|
-
return (hAsync(Host, { key: '
|
|
26263
|
+
return (hAsync(Host, { key: 'fc79fee1595fed55d37dc2fb4f3509ff6c16686b', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: 'd8d4800627e61c9766150d1d9a440889cf122440', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '40b1ee8c5d89febb2975168f5630fdd01b6e4e97', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '86f66e7236df8aa03d942450c06a2f2f5930b987' })))));
|
|
26237
26264
|
}
|
|
26238
26265
|
static isTreeItem(element) {
|
|
26239
26266
|
return (element === null || element === void 0 ? void 0 : element.tagName) === KolTreeItemTag.toUpperCase();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/hydrate",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.5-rc.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
],
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"rimraf": "6.0.1",
|
|
49
|
-
"@public-ui/components": "2.2.
|
|
49
|
+
"@public-ui/components": "2.2.5-rc.0"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"@public-ui/components": "2.2.
|
|
52
|
+
"@public-ui/components": "2.2.5-rc.0"
|
|
53
53
|
},
|
|
54
54
|
"sideEffects": false,
|
|
55
55
|
"type": "commonjs",
|