@public-ui/hydrate 2.0.10 → 2.0.12-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 +76 -82
- package/package.json +7 -4
package/dist/index.js
CHANGED
|
@@ -9052,8 +9052,6 @@ const orientationOptions = ["horizontal", "vertical"];
|
|
|
9052
9052
|
var KoliBriProgressVariantEnum = /* @__PURE__ */ ((KoliBriProgressVariantEnum2) => {
|
|
9053
9053
|
KoliBriProgressVariantEnum2["bar"] = "bar";
|
|
9054
9054
|
KoliBriProgressVariantEnum2["cycle"] = "cycle";
|
|
9055
|
-
KoliBriProgressVariantEnum2["cycle-value-label"] = "cycle-value-label";
|
|
9056
|
-
KoliBriProgressVariantEnum2["cycle-label-value"] = "cycle-label-value";
|
|
9057
9055
|
return KoliBriProgressVariantEnum2;
|
|
9058
9056
|
})(KoliBriProgressVariantEnum || {});
|
|
9059
9057
|
|
|
@@ -9078,7 +9076,7 @@ Promise.resolve().then(function () { return devtools; })
|
|
|
9078
9076
|
.catch((error) => {
|
|
9079
9077
|
Log.error(error);
|
|
9080
9078
|
});
|
|
9081
|
-
if (processEnv) {
|
|
9079
|
+
if (processEnv === 'development') {
|
|
9082
9080
|
Promise.resolve().then(function () { return index; });
|
|
9083
9081
|
}
|
|
9084
9082
|
const globalFn = () => { };
|
|
@@ -14538,6 +14536,7 @@ class InputController extends ControlledInputController {
|
|
|
14538
14536
|
onChange: this.onChange.bind(this),
|
|
14539
14537
|
onClick: this.onClick.bind(this),
|
|
14540
14538
|
onFocus: this.onFocus.bind(this),
|
|
14539
|
+
onInput: this.onInput.bind(this),
|
|
14541
14540
|
};
|
|
14542
14541
|
this.component = component;
|
|
14543
14542
|
}
|
|
@@ -14656,12 +14655,23 @@ class InputController extends ControlledInputController {
|
|
|
14656
14655
|
var _a;
|
|
14657
14656
|
const value = event.target.value;
|
|
14658
14657
|
tryToDispatchKoliBriEvent('change', this.host, value);
|
|
14659
|
-
this.setFormAssociatedValue(value);
|
|
14660
14658
|
if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function') {
|
|
14661
14659
|
this.component._on.onChange(event, value);
|
|
14662
14660
|
}
|
|
14663
14661
|
this.valueChangeListeners.forEach((listener) => listener(value));
|
|
14664
14662
|
}
|
|
14663
|
+
onInput(event, shouldSetFormAssociatedValue = true) {
|
|
14664
|
+
var _a;
|
|
14665
|
+
const value = event.target.value;
|
|
14666
|
+
stopPropagation(event);
|
|
14667
|
+
tryToDispatchKoliBriEvent('input', this.host);
|
|
14668
|
+
if (shouldSetFormAssociatedValue) {
|
|
14669
|
+
this.setFormAssociatedValue(value);
|
|
14670
|
+
}
|
|
14671
|
+
if (typeof ((_a = this.component._on) === null || _a === void 0 ? void 0 : _a.onInput) === 'function') {
|
|
14672
|
+
this.component._on.onInput(event);
|
|
14673
|
+
}
|
|
14674
|
+
}
|
|
14665
14675
|
onClick(event) {
|
|
14666
14676
|
var _a;
|
|
14667
14677
|
stopPropagation(event);
|
|
@@ -14808,13 +14818,13 @@ class KolInputCheckbox {
|
|
|
14808
14818
|
render() {
|
|
14809
14819
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
14810
14820
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
14811
|
-
return (hAsync(Host, { key: 'ad1a6426df92ed8ca3ee3699982a505dc8bb498c', class: "kol-input-checkbox" }, hAsync(KolInputTag, { key: '
|
|
14821
|
+
return (hAsync(Host, { key: 'ad1a6426df92ed8ca3ee3699982a505dc8bb498c', class: "kol-input-checkbox" }, hAsync(KolInputTag, { key: 'fb671b770db21dcfa6961e9d563b17ff24bd4dea', class: {
|
|
14812
14822
|
checkbox: true,
|
|
14813
14823
|
[this.state._variant]: true,
|
|
14814
14824
|
'hide-label': !!this.state._hideLabel,
|
|
14815
14825
|
checked: this.state._checked,
|
|
14816
14826
|
indeterminate: this.state._indeterminate,
|
|
14817
|
-
}, "data-role": this.state._variant === 'button' ? 'button' : undefined,
|
|
14827
|
+
}, "data-role": this.state._variant === 'button' ? 'button' : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'd5ad2e86464c31f00150d11c94ef3d213e247e1a', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("label", { key: 'b1d00e32ffa9ce39aa6caf0e573cad21ac12a435', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: 'e5eda2b2e5525f4b0726f22db91dd32cda42c72f', class: "icon", _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ key: '239b9a3961b17458a789235339574b7a62c20bfb', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
|
|
14818
14828
|
}
|
|
14819
14829
|
constructor(hostRef) {
|
|
14820
14830
|
registerInstance(this, hostRef);
|
|
@@ -15391,10 +15401,10 @@ class KolInputDate {
|
|
|
15391
15401
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15392
15402
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
15393
15403
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15394
|
-
return (hAsync(Host, { key: '
|
|
15404
|
+
return (hAsync(Host, { key: 'f1bdc61d56c11e78681581e7b5b2e31380fd4601', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'ce3ef3b3941944bee5504e05000ff420d60c7bc5', class: {
|
|
15395
15405
|
[this.state._type]: true,
|
|
15396
15406
|
'hide-label': !!this.state._hideLabel,
|
|
15397
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
15407
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '7fc902dd7815dc389041d3915204e6ec5fe65a7d', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '26b9d1222d08b1db41977f4eef761e88c3ddf39e', slot: "input" }, hAsync("input", Object.assign({ key: 'd4757b23bb9d52acb6a97eb49bc6bc695b5fa1d3', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
|
|
15398
15408
|
}
|
|
15399
15409
|
constructor(hostRef) {
|
|
15400
15410
|
registerInstance(this, hostRef);
|
|
@@ -15409,9 +15419,6 @@ class KolInputDate {
|
|
|
15409
15419
|
ref: this.ref,
|
|
15410
15420
|
});
|
|
15411
15421
|
}
|
|
15412
|
-
else {
|
|
15413
|
-
this.controller.onFacade.onChange(event);
|
|
15414
|
-
}
|
|
15415
15422
|
};
|
|
15416
15423
|
this._accessKey = undefined;
|
|
15417
15424
|
this._alert = true;
|
|
@@ -15725,10 +15732,10 @@ class KolInputEmail {
|
|
|
15725
15732
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15726
15733
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
15727
15734
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15728
|
-
return (hAsync(Host, { key: '
|
|
15735
|
+
return (hAsync(Host, { key: 'f8d566bc0ff56a27c292e3957bdfa96c0b734e0e', class: {
|
|
15729
15736
|
'kol-input-email': true,
|
|
15730
15737
|
'has-value': this.state._hasValue,
|
|
15731
|
-
} }, hAsync(KolInputTag, { key: '
|
|
15738
|
+
} }, hAsync(KolInputTag, { key: '12a7676f8a854208440a554b180895677a55e116', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '2da3355f87e14234c4718e087b3cca1e2a283d0b', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'b70d04c05d1156b06f0c6880c1983eee5d5dc585', slot: "input" }, hAsync("input", Object.assign({ key: 'b67a71356ffff59cb3238c105a69dc25d128c7f0', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput }))))));
|
|
15732
15739
|
}
|
|
15733
15740
|
constructor(hostRef) {
|
|
15734
15741
|
registerInstance(this, hostRef);
|
|
@@ -15737,16 +15744,16 @@ class KolInputEmail {
|
|
|
15737
15744
|
propagateFocus(this.host, this.ref);
|
|
15738
15745
|
};
|
|
15739
15746
|
this.onKeyDown = (event) => {
|
|
15740
|
-
setState(this, '_currentLength', event.target.value.length);
|
|
15741
15747
|
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
15742
15748
|
propagateSubmitEventToForm({
|
|
15743
15749
|
form: this.host,
|
|
15744
15750
|
ref: this.ref,
|
|
15745
15751
|
});
|
|
15746
15752
|
}
|
|
15747
|
-
|
|
15748
|
-
|
|
15749
|
-
|
|
15753
|
+
};
|
|
15754
|
+
this.onInput = (event) => {
|
|
15755
|
+
setState(this, '_currentLength', event.target.value.length);
|
|
15756
|
+
this.controller.onFacade.onInput(event);
|
|
15750
15757
|
};
|
|
15751
15758
|
this._accessKey = undefined;
|
|
15752
15759
|
this._alert = true;
|
|
@@ -15987,10 +15994,10 @@ class KolInputFile {
|
|
|
15987
15994
|
render() {
|
|
15988
15995
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15989
15996
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15990
|
-
return (hAsync(Host, { key: '
|
|
15997
|
+
return (hAsync(Host, { key: '4890bf15ab5137bde1aa60d58a0fb086d9488b55', class: "kol-input-file" }, hAsync(KolInputTag, { key: '70cbafeae056ce204a84654063039a1aab97f4dd', class: {
|
|
15991
15998
|
file: true,
|
|
15992
15999
|
'hide-label': !!this.state._hideLabel,
|
|
15993
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
16000
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'da09a95616192874a4435bca143e170600e3bf7d', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'ebd9ab6e463dc2f1c25d85d44933319f9d331482', slot: "input" }, hAsync("input", Object.assign({ key: '50ef2e666ce96c077da3482ea758a3148c79406b', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput }))))));
|
|
15994
16001
|
}
|
|
15995
16002
|
constructor(hostRef) {
|
|
15996
16003
|
registerInstance(this, hostRef);
|
|
@@ -15999,17 +16006,15 @@ class KolInputFile {
|
|
|
15999
16006
|
propagateFocus(this.host, this.ref);
|
|
16000
16007
|
};
|
|
16001
16008
|
this.onChange = (event) => {
|
|
16002
|
-
var _a;
|
|
16003
16009
|
if (this.ref instanceof HTMLInputElement && this.ref.type === 'file') {
|
|
16004
16010
|
const value = this.ref.files;
|
|
16005
|
-
|
|
16006
|
-
tryToDispatchKoliBriEvent('change', this.host, value);
|
|
16011
|
+
this.controller.onFacade.onChange(event);
|
|
16007
16012
|
this.controller.setFormAssociatedValue(value);
|
|
16008
|
-
if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function') {
|
|
16009
|
-
this.state._on.onChange(event, value);
|
|
16010
|
-
}
|
|
16011
16013
|
}
|
|
16012
16014
|
};
|
|
16015
|
+
this.onInput = (event) => {
|
|
16016
|
+
this.controller.onFacade.onInput(event, false);
|
|
16017
|
+
};
|
|
16013
16018
|
this._accept = undefined;
|
|
16014
16019
|
this._accessKey = undefined;
|
|
16015
16020
|
this._alert = true;
|
|
@@ -16263,13 +16268,13 @@ class KolInputNumber {
|
|
|
16263
16268
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
16264
16269
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
16265
16270
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
16266
|
-
return (hAsync(Host, { key: '
|
|
16271
|
+
return (hAsync(Host, { key: 'a6601f1735978325f3817aecc82a344253636d73', class: {
|
|
16267
16272
|
'kol-input-number': true,
|
|
16268
16273
|
'has-value': this.state._hasValue,
|
|
16269
|
-
} }, hAsync(KolInputTag, { key: '
|
|
16274
|
+
} }, hAsync(KolInputTag, { key: 'd3ea3a283e20920a8cf2599cc81a58652840a5d1', class: {
|
|
16270
16275
|
number: true,
|
|
16271
16276
|
'hide-label': !!this.state._hideLabel,
|
|
16272
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
16277
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '1e93c3efc780ba3bb651201d0499879f36815939', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'b5fbae94cdbc2f68acc30f4aa2720d32e7776ce2', slot: "input" }, hAsync("input", Object.assign({ key: 'af7d91f2d8ffd84c2dcd7d58149fc6e08c1c96a9', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
|
|
16273
16278
|
}
|
|
16274
16279
|
constructor(hostRef) {
|
|
16275
16280
|
registerInstance(this, hostRef);
|
|
@@ -16284,9 +16289,6 @@ class KolInputNumber {
|
|
|
16284
16289
|
ref: this.ref,
|
|
16285
16290
|
});
|
|
16286
16291
|
}
|
|
16287
|
-
else {
|
|
16288
|
-
this.controller.onFacade.onChange(event);
|
|
16289
|
-
}
|
|
16290
16292
|
};
|
|
16291
16293
|
this._accessKey = undefined;
|
|
16292
16294
|
this._alert = true;
|
|
@@ -16497,13 +16499,13 @@ class KolInputPassword {
|
|
|
16497
16499
|
render() {
|
|
16498
16500
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
16499
16501
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
16500
|
-
return (hAsync(Host, { key: '
|
|
16502
|
+
return (hAsync(Host, { key: '307fa02b26068d98edcb52788bfd492dd64e4ad5', class: {
|
|
16501
16503
|
'kol-input-password': true,
|
|
16502
16504
|
'has-value': this.state._hasValue,
|
|
16503
|
-
} }, hAsync(KolInputTag, { key: '
|
|
16505
|
+
} }, hAsync(KolInputTag, { key: '3e91ac067006d00988682fe50d3a097b42cc56e0', class: {
|
|
16504
16506
|
'hide-label': !!this.state._hideLabel,
|
|
16505
16507
|
password: true,
|
|
16506
|
-
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
16508
|
+
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'afb582660e9f8c96b9441afeca33e1d842f91d59', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: 'f7258071e04606bf9ac2baf18640cb3b73c454c2', slot: "input" }, hAsync("input", Object.assign({ key: 'e4bc5ffe2bc97456d676b9a19dbb014f17cc319a', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput }))))));
|
|
16507
16509
|
}
|
|
16508
16510
|
constructor(hostRef) {
|
|
16509
16511
|
registerInstance(this, hostRef);
|
|
@@ -16512,16 +16514,16 @@ class KolInputPassword {
|
|
|
16512
16514
|
propagateFocus(this.host, this.ref);
|
|
16513
16515
|
};
|
|
16514
16516
|
this.onKeyDown = (event) => {
|
|
16515
|
-
setState(this, '_currentLength', event.target.value.length);
|
|
16516
16517
|
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
16517
16518
|
propagateSubmitEventToForm({
|
|
16518
16519
|
form: this.host,
|
|
16519
16520
|
ref: this.ref,
|
|
16520
16521
|
});
|
|
16521
16522
|
}
|
|
16522
|
-
|
|
16523
|
-
|
|
16524
|
-
|
|
16523
|
+
};
|
|
16524
|
+
this.onInput = (event) => {
|
|
16525
|
+
setState(this, '_currentLength', event.target.value.length);
|
|
16526
|
+
this.controller.onFacade.onInput(event);
|
|
16525
16527
|
};
|
|
16526
16528
|
this._accessKey = undefined;
|
|
16527
16529
|
this._alert = true;
|
|
@@ -16981,12 +16983,12 @@ class KolInputRange {
|
|
|
16981
16983
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
16982
16984
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
16983
16985
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
16984
|
-
return (hAsync(Host, { key: '
|
|
16986
|
+
return (hAsync(Host, { key: '8234d5062e120e1d233fde4839d9deb1572db10d', class: "kol-input-range" }, hAsync(KolInputTag, { key: '6999f8fcdecc07dddbd8d087e246f74997e28391', class: {
|
|
16985
16987
|
range: true,
|
|
16986
16988
|
'hide-label': !!this.state._hideLabel,
|
|
16987
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '
|
|
16989
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'bd070fe9c62d8c4c3131a2b1a29b5f10b830b38b', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '32917c47012e3654b248e92c7d193c7e46bb76c8', slot: "input" }, hAsync("div", { key: 'c83767854f103c4cdc26c210419b3eb640c62037', class: "inputs-wrapper", style: {
|
|
16988
16990
|
'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
|
|
16989
|
-
} }, hAsync("input", Object.assign({ key: '
|
|
16991
|
+
} }, hAsync("input", Object.assign({ key: 'e1f1ba155cdccd374927854ab18d8e93b8a5abd0', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("input", Object.assign({ key: '0b725315e18c898d94f2a9cab2683fe92bcff897', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onChange: this.onChange }))), hasSuggestions && [
|
|
16990
16992
|
hAsync("datalist", { id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
|
|
16991
16993
|
]))));
|
|
16992
16994
|
}
|
|
@@ -17023,9 +17025,6 @@ class KolInputRange {
|
|
|
17023
17025
|
ref: this.refInputNumber,
|
|
17024
17026
|
});
|
|
17025
17027
|
}
|
|
17026
|
-
else {
|
|
17027
|
-
this.onChange(event);
|
|
17028
|
-
}
|
|
17029
17028
|
};
|
|
17030
17029
|
this._accessKey = undefined;
|
|
17031
17030
|
this._alert = true;
|
|
@@ -17206,41 +17205,38 @@ class KolInputText {
|
|
|
17206
17205
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
17207
17206
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
17208
17207
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
17209
|
-
return (hAsync(Host, { key: '
|
|
17208
|
+
return (hAsync(Host, { key: '4f46675b039f9f89859cec3776c078fa2e5e2ebf', class: {
|
|
17210
17209
|
'has-value': this.state._hasValue,
|
|
17211
|
-
} }, hAsync(KolInputTag, { key: '
|
|
17210
|
+
} }, hAsync(KolInputTag, { key: '0bc1bec6966a48c94f742dd1a350523cf0c5b0e5', class: {
|
|
17212
17211
|
'kol-input-text': true,
|
|
17213
17212
|
[this.state._type]: true,
|
|
17214
17213
|
'hide-label': !!this.state._hideLabel,
|
|
17215
|
-
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '
|
|
17214
|
+
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'b19b9098e12872ccce579a4e00fcf7656f4c6d3d', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '65bece26b31241c1daaa1bd3215777f3de2ac224', slot: "input" }, hAsync("input", Object.assign({ key: '6b656d80de53c9bc6d1b1b161ed3e6f3fc299600', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onChange: this.onChange, onInput: this.onInput, onKeyDown: this.onKeyDown }))))));
|
|
17216
17215
|
}
|
|
17217
17216
|
constructor(hostRef) {
|
|
17218
17217
|
registerInstance(this, hostRef);
|
|
17219
17218
|
this.catchRef = (ref) => {
|
|
17220
|
-
var _a;
|
|
17221
17219
|
this.ref = ref;
|
|
17222
17220
|
propagateFocus(this.host, this.ref);
|
|
17223
|
-
this.disconnectedCallback();
|
|
17224
|
-
(_a = this.ref) === null || _a === void 0 ? void 0 : _a.addEventListener('search', this.onChange);
|
|
17225
17221
|
};
|
|
17226
|
-
this.
|
|
17222
|
+
this.onChange = (event) => {
|
|
17223
|
+
var _a, _b;
|
|
17224
|
+
if (this.oldValue !== ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.value)) {
|
|
17225
|
+
this.oldValue = (_b = this.ref) === null || _b === void 0 ? void 0 : _b.value;
|
|
17226
|
+
this.controller.onFacade.onChange(event);
|
|
17227
|
+
}
|
|
17228
|
+
};
|
|
17229
|
+
this.onInput = (event) => {
|
|
17227
17230
|
setState(this, '_currentLength', event.target.value.length);
|
|
17231
|
+
this.controller.onFacade.onInput(event);
|
|
17232
|
+
};
|
|
17233
|
+
this.onKeyDown = (event) => {
|
|
17228
17234
|
if (event.code === 'Enter' || event.code === 'NumpadEnter') {
|
|
17229
17235
|
propagateSubmitEventToForm({
|
|
17230
17236
|
form: this.host,
|
|
17231
17237
|
ref: this.ref,
|
|
17232
17238
|
});
|
|
17233
17239
|
}
|
|
17234
|
-
else {
|
|
17235
|
-
this.onChange(event);
|
|
17236
|
-
}
|
|
17237
|
-
};
|
|
17238
|
-
this.onChange = (event) => {
|
|
17239
|
-
var _a, _b;
|
|
17240
|
-
if (this.oldValue !== ((_a = this.ref) === null || _a === void 0 ? void 0 : _a.value)) {
|
|
17241
|
-
this.oldValue = (_b = this.ref) === null || _b === void 0 ? void 0 : _b.value;
|
|
17242
|
-
this.controller.onFacade.onChange(event);
|
|
17243
|
-
}
|
|
17244
17240
|
};
|
|
17245
17241
|
this._accessKey = undefined;
|
|
17246
17242
|
this._alert = true;
|
|
@@ -17371,10 +17367,6 @@ class KolInputText {
|
|
|
17371
17367
|
this.state._hasValue = !!this.state._value;
|
|
17372
17368
|
this.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));
|
|
17373
17369
|
}
|
|
17374
|
-
disconnectedCallback() {
|
|
17375
|
-
var _a;
|
|
17376
|
-
(_a = this.ref) === null || _a === void 0 ? void 0 : _a.removeEventListener('search', this.onChange);
|
|
17377
|
-
}
|
|
17378
17370
|
get host() { return getElement(this); }
|
|
17379
17371
|
static get watchers() { return {
|
|
17380
17372
|
"_accessKey": ["validateAccessKey"],
|
|
@@ -20995,27 +20987,30 @@ class KolPopover {
|
|
|
20995
20987
|
}; }
|
|
20996
20988
|
}
|
|
20997
20989
|
|
|
20998
|
-
const defaultStyleCss$d = "@layer kol-global {\n .sc-kol-progress-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-progress-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-progress-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n progress {\n display: block;\n height: 0;\n overflow: hidden;\n width: 0;\n }\n .bar .border {\n fill: transparent;\n stroke: black;\n }\n .bar .background {\n fill: lightgray;\n stroke: white;\n }\n .bar .progress {\n fill: #0075ff;\n stroke: transparent;\n transition: 250ms ease-in-out 50ms;\n }\n .cycle .background {\n fill: transparent;\n stroke: lightgray;\n }\n .cycle .border {\n fill: transparent;\n stroke: black;\n }\n .cycle .whitespace {\n fill: transparent;\n stroke: white;\n }\n .cycle .progress {\n fill: transparent;\n stroke: #0075ff;\n transform-origin: 50% 50%;\n transform: rotate(-90deg);\n transition: 250ms ease-in-out 50ms;\n }\n \n @media (prefers-reduced-motion) {\n .progress {\n transition-duration: 0s;\n transition-delay: 0s;\n }\n }\n}";
|
|
20990
|
+
const defaultStyleCss$d = "@layer kol-global {\n .sc-kol-progress-default-h {\n \n --a11y-min-size: 44px;\n \n background-color: white;\n color: black;\n \n font-family: Verdana;\n }\n * {\n \n hyphens: auto;\n \n letter-spacing: inherit;\n \n word-break: break-word;\n \n word-spacing: inherit;\n }\n \n \n \n \n \n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n \n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n \n font-family: inherit;\n \n font-size: inherit;\n }\n}\n\n/*!@.visually-hidden*/.visually-hidden.sc-kol-progress-default {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n@layer kol-global {\n \n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; \n }\n \n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n .sc-kol-progress-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n progress {\n display: block;\n height: 0;\n overflow: hidden;\n width: 0;\n }\n .bar {\n width: 150px;\n }\n .bar .border {\n fill: transparent;\n stroke: black;\n }\n .bar .background {\n fill: lightgray;\n stroke: white;\n }\n .bar .progress {\n fill: #0075ff;\n stroke: transparent;\n transition: 250ms ease-in-out 50ms;\n }\n .cycle .background {\n fill: transparent;\n stroke: lightgray;\n }\n .cycle .border {\n fill: transparent;\n stroke: black;\n }\n .cycle .whitespace {\n fill: transparent;\n stroke: white;\n }\n .cycle .progress {\n fill: transparent;\n stroke: #0075ff;\n transform-origin: 50% 50%;\n transform: rotate(-90deg);\n transition: 250ms ease-in-out 50ms;\n }\n \n @media (prefers-reduced-motion) {\n .progress {\n transition-duration: 0s;\n transition-delay: 0s;\n }\n }\n}";
|
|
20999
20991
|
var KolProgressDefaultStyle0 = defaultStyleCss$d;
|
|
21000
20992
|
|
|
21001
20993
|
const VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
|
|
21002
|
-
const
|
|
20994
|
+
const CycleSvg = ({ state }) => {
|
|
21003
20995
|
const fullCircle = 342;
|
|
21004
20996
|
const textPositionTop = '43%';
|
|
21005
20997
|
const textPositionBottom = '57%';
|
|
21006
|
-
|
|
21007
|
-
|
|
20998
|
+
const valueY = state._label ? textPositionBottom : '50%';
|
|
20999
|
+
return (hAsync("svg", { class: "cycle", width: "100", viewBox: "0 0 120 120", xmlns: "http://www.w3.org/2000/svg" }, hAsync("circle", { class: "background", cx: "60", cy: "60", r: "54.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "8" }), hAsync("circle", { class: "whitespace", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "3" }), hAsync("circle", { class: "border", cx: "60", cy: "60", r: "59", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "whitespace", cx: "60", cy: "60", r: "51", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "border", cx: "60", cy: "60", r: "50", fill: "currentColor", stroke: "currentColor", "stroke-width": "1" }), hAsync("circle", { class: "progress", fill: "currentColor", stroke: "currentColor", "stroke-linecap": "round", "stroke-dasharray": `${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`, "stroke-width": "6", cx: "60", cy: "60", r: "54.5" }), state._label && (hAsync("text", { "aria-hidden": "true", x: "50%", y: textPositionTop, "text-anchor": "middle", fill: "currentColor" }, state._label)), hAsync("text", { "aria-hidden": "true", x: "50%", y: valueY, "text-anchor": "middle", fill: "currentColor" }, state._value, state._unit)));
|
|
21000
|
+
};
|
|
21001
|
+
const BarSvg = ({ state }) => {
|
|
21002
|
+
const textLabelPadding = 'var(--kolibri-text-label-padding, 45px)';
|
|
21003
|
+
const percentage = 100 * (state._value / state._max);
|
|
21004
|
+
return (hAsync("div", { class: "bar" }, state._label && hAsync("div", null, state._label), hAsync("svg", { xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "12", overflow: "visible" }, hAsync("rect", { class: "background", x: "1", y: "1", height: "10", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", style: { width: `calc(100% - 2px - ${textLabelPadding})` } }), hAsync("rect", { class: "border", x: "1", y: "1", height: "10", rx: "5", fill: "currentColor", stroke: "currentColor", "stroke-width": "1", style: { width: `calc(100% - 2px - ${textLabelPadding})` } }), hAsync("rect", { class: "progress", x: "2.5", y: "2.5", height: "7", rx: "3.5", fill: "currentColor", stroke: "currentColor", "stroke-width": "3", style: { width: `calc(${percentage}% - 5px - (${textLabelPadding} / 100 * ${percentage}))` } }), hAsync("text", { "aria-hidden": "true", "text-anchor": "end", "dominant-baseline": "middle", fill: "currentColor", x: "100%", y: "50%" }, state._value, state._unit))));
|
|
21005
|
+
};
|
|
21006
|
+
const createProgressSVG = (state) => {
|
|
21008
21007
|
switch (state._variant) {
|
|
21009
|
-
case 'cycle-value-label':
|
|
21010
|
-
if (state._label) {
|
|
21011
|
-
labelY = textPositionBottom;
|
|
21012
|
-
valueY = textPositionTop;
|
|
21013
|
-
}
|
|
21014
21008
|
case 'cycle':
|
|
21015
|
-
|
|
21016
|
-
|
|
21009
|
+
return hAsync(CycleSvg, { state: state });
|
|
21010
|
+
case 'bar':
|
|
21011
|
+
return hAsync(BarSvg, { state: state });
|
|
21017
21012
|
default:
|
|
21018
|
-
|
|
21013
|
+
throw new Error(`Progress variant ${state._variant} not implemented.`);
|
|
21019
21014
|
}
|
|
21020
21015
|
};
|
|
21021
21016
|
class KolProcess {
|
|
@@ -21035,7 +21030,7 @@ class KolProcess {
|
|
|
21035
21030
|
};
|
|
21036
21031
|
}
|
|
21037
21032
|
render() {
|
|
21038
|
-
return (hAsync(Host, { key: '
|
|
21033
|
+
return (hAsync(Host, { key: '6e573e27abc2de814058aff6ce7b4eb2ea7b4e4a', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: '76a25c51eaed944dbe7a737df7797b129252fee9', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '849cbbea9914c5ab5e348aab70b4cf6607a47c3c', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
|
|
21039
21034
|
}
|
|
21040
21035
|
validateLabel(value) {
|
|
21041
21036
|
validateLabel(this, value);
|
|
@@ -21290,9 +21285,7 @@ class KolSelect {
|
|
|
21290
21285
|
return (hAsync(Host, { key: '6a99ca9939b8feea22389b24047e75df7de3fb07', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'c0fd316f7e13fa499b7a0f2672347d607fe01fbc', class: {
|
|
21291
21286
|
'hide-label': !!this.state._hideLabel,
|
|
21292
21287
|
select: true,
|
|
21293
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '43a8853f439b9a23d3832802f9968308a8639e2e', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '859d4531edb77433a4f833d4d67088fba62a7b33', slot: "input" }, hAsync("select", { key: '
|
|
21294
|
-
onBlur: this.controller.onFacade.onBlur,
|
|
21295
|
-
onFocus: this.controller.onFacade.onFocus, onChange: this.onChange }, this.state._options.map((option, index) => {
|
|
21288
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '43a8853f439b9a23d3832802f9968308a8639e2e', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '859d4531edb77433a4f833d4d67088fba62a7b33', slot: "input" }, hAsync("select", Object.assign({ key: '4e4b7d220c3ef009c5ccf46a6fa3f9b15f9eee0a', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false" }, this.controller.onFacade, { onChange: this.onChange }), this.state._options.map((option, index) => {
|
|
21296
21289
|
const key = `-${index}`;
|
|
21297
21290
|
if (Array.isArray(option.options)) {
|
|
21298
21291
|
return this.renderOptgroup(option, key);
|
|
@@ -31227,12 +31220,13 @@ class KolTextarea {
|
|
|
31227
31220
|
this.ref = ref;
|
|
31228
31221
|
propagateFocus(this.host, this.ref);
|
|
31229
31222
|
};
|
|
31230
|
-
this.onInput = () => {
|
|
31223
|
+
this.onInput = (event) => {
|
|
31231
31224
|
if (this.ref instanceof HTMLTextAreaElement) {
|
|
31232
31225
|
setState(this, '_currentLength', this.ref.value.length);
|
|
31233
31226
|
if (this.state._adjustHeight) {
|
|
31234
31227
|
this._rows = increaseTextareaHeight(this.ref);
|
|
31235
31228
|
}
|
|
31229
|
+
this.controller.onFacade.onInput(event);
|
|
31236
31230
|
}
|
|
31237
31231
|
};
|
|
31238
31232
|
this._accessKey = undefined;
|
package/package.json
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/hydrate",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.12-rc.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
|
-
"repository":
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/public-ui/kolibri"
|
|
9
|
+
},
|
|
7
10
|
"bugs": {
|
|
8
11
|
"url": "https://github.com/public-ui/kolibri/issues",
|
|
9
12
|
"email": "kolibri@itzbund.de"
|
|
@@ -42,11 +45,11 @@
|
|
|
42
45
|
"hydrate"
|
|
43
46
|
],
|
|
44
47
|
"devDependencies": {
|
|
45
|
-
"@public-ui/components": "2.0.
|
|
48
|
+
"@public-ui/components": "2.0.12-rc.0",
|
|
46
49
|
"rimraf": "5.0.5"
|
|
47
50
|
},
|
|
48
51
|
"peerDependencies": {
|
|
49
|
-
"@public-ui/components": "2.0.
|
|
52
|
+
"@public-ui/components": "2.0.12-rc.0"
|
|
50
53
|
},
|
|
51
54
|
"sideEffects": false,
|
|
52
55
|
"type": "commonjs",
|