@public-ui/hydrate 2.1.2 → 2.1.3
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 +74 -38
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -3934,7 +3934,7 @@ const handleColorChange = (value) => {
|
|
|
3934
3934
|
break;
|
|
3935
3935
|
}
|
|
3936
3936
|
case null:
|
|
3937
|
-
|
|
3937
|
+
Log.warn(`_color was empty or invalid (${JSON.stringify(value)})`, { forceLog: true });
|
|
3938
3938
|
colorContrast = createContrastColorPair({
|
|
3939
3939
|
background: '#000',
|
|
3940
3940
|
foreground: '#000',
|
|
@@ -4597,6 +4597,8 @@ var locale_de = {
|
|
|
4597
4597
|
'nav-label-open': 'Untermenü zu {{label}} öffnen',
|
|
4598
4598
|
'nav-label-close': 'Untermenü zu {{label}} schließen',
|
|
4599
4599
|
'close-alert': 'Benachrichtigung {{label}} schließen',
|
|
4600
|
+
'show-password': 'einblenden',
|
|
4601
|
+
'hide-password': 'ausblenden',
|
|
4600
4602
|
};
|
|
4601
4603
|
|
|
4602
4604
|
var locale_en = {
|
|
@@ -4642,6 +4644,8 @@ var locale_en = {
|
|
|
4642
4644
|
'nav-label-open': 'Submenu for {{label}} open',
|
|
4643
4645
|
'nav-label-close': 'Submenu for {{label}} close',
|
|
4644
4646
|
'close-alert': 'Notification {{label}} close',
|
|
4647
|
+
'show-password': 'Show',
|
|
4648
|
+
'hide-password': 'Hide',
|
|
4645
4649
|
};
|
|
4646
4650
|
|
|
4647
4651
|
const mapLocaleKeys = (locale) => Object.keys(locale).reduce((a, c) => ((a[`${'kol'}-${c}`] = locale[c]), a), {});
|
|
@@ -5019,7 +5023,7 @@ class KolBadge {
|
|
|
5019
5023
|
const UNIQUE_LABELS = new Set();
|
|
5020
5024
|
function addNavLabel(ariaLabel) {
|
|
5021
5025
|
if (UNIQUE_LABELS.has(ariaLabel)) {
|
|
5022
|
-
|
|
5026
|
+
Log.error(`There already is a nav element with the label "${ariaLabel}"`, { forceLog: true });
|
|
5023
5027
|
}
|
|
5024
5028
|
else {
|
|
5025
5029
|
UNIQUE_LABELS.add(ariaLabel);
|
|
@@ -5212,7 +5216,7 @@ class KolButtonGroupWc {
|
|
|
5212
5216
|
}; }
|
|
5213
5217
|
}
|
|
5214
5218
|
|
|
5215
|
-
const defaultStyleCss$F = "@layer kol-global {\n .sc-kol-button-link-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-button-link-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-button-link-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 \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;\n opacity: 0.5;\n outline: none;\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 .sc-kol-button-link-default-h {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) {\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: underline;\n }\n a:is(:focus, :hover):not([aria-disabled]),\n button:is(:focus, :hover):not([disabled]) {\n text-decoration-thickness: 0.2em;\n }\n .skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background-color: #fff;\n left: unset;\n padding: 1em;\n position: unset;\n }\n .kol-icon.external-link-icon {\n display: inline-flex;\n }\n}";
|
|
5219
|
+
const defaultStyleCss$F = "@layer kol-global {\n .sc-kol-button-link-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-button-link-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-button-link-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 \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;\n opacity: 0.5;\n outline: none;\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 .sc-kol-button-link-default-h {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) {\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n :is(a, button) .kol-span-wc .span-label {\n text-decoration-line: underline;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.2em;\n }\n .skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background-color: #fff;\n left: unset;\n padding: 1em;\n position: unset;\n }\n .kol-icon.external-link-icon {\n display: inline-flex;\n }\n}";
|
|
5216
5220
|
var KolButtonLinkDefaultStyle0 = defaultStyleCss$F;
|
|
5217
5221
|
|
|
5218
5222
|
class KolButtonLink {
|
|
@@ -6150,7 +6154,6 @@ class KolCombobox {
|
|
|
6150
6154
|
}
|
|
6151
6155
|
}
|
|
6152
6156
|
moveFocus(delta) {
|
|
6153
|
-
console.log(this._focusedOptionIndex);
|
|
6154
6157
|
if (!this._filteredSuggestions) {
|
|
6155
6158
|
return;
|
|
6156
6159
|
}
|
|
@@ -6184,7 +6187,7 @@ class KolCombobox {
|
|
|
6184
6187
|
render() {
|
|
6185
6188
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
6186
6189
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
6187
|
-
return (hAsync(Host, { key: '
|
|
6190
|
+
return (hAsync(Host, { key: '704090cd2a268049146c3beb049a6b7c31f20489', class: "kol-combobox" }, hAsync("div", { key: '274df37ac0efd60063add6442119417815237090', class: `combobox ${this.state._disabled === true ? 'disabled' : ''} ` }, hAsync(KolInputWcTag, { key: 'a208f04cd5a3b8a77b3fef2cde01b6ee60c787d9', _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: '2fe387ffa8d894ecd48e86d3477f3ad0bc5ca8c2', 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: '52c6eb36e536839e87bce8f2142ecaa99a878619', slot: "input" }, hAsync("div", { key: '40ad24ed304eda6677585902534fc3ffc9a5a6b9', class: "combobox__group" }, hAsync("input", Object.assign({ key: 'c98bee5037381d8fcc85f5f5b2c2f2baa3edf7ee', class: "combobox__input", type: "text", role: "combobox", "aria-autocomplete": "both", "aria-expanded": this._isOpen ? 'true' : 'false', "aria-controls": "listbox", value: this.state._value, 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-labelledby": this.state._id, "aria-activedescendant": this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, name: this.state._name, required: this.state._required, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput.bind(this), onClick: this.toggleListbox.bind(this), onChange: this.onChange.bind(this), placeholder: this.state._placeholder })), hAsync("span", { key: '0dea84633da8b79af3e5edd65987a57a99ec15d4', class: { combobox__icon: true } }, hAsync(KolIconTag, { key: 'ed839aa136a761c491aef51e8c8ab4770d922824', _icons: "codicon codicon-triangle-down", _label: translate('kol-dropdown'), onClick: this.toggleListbox.bind(this) }))), this._isOpen && !(this.state._disabled === true) && (hAsync("ul", { key: '7fae643dfa418239be55b2b2f754ce4de38e0cdb', role: "listbox", "aria-label": "", class: { combobox__listbox: true }, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredSuggestions) &&
|
|
6188
6191
|
this._filteredSuggestions.length > 0 &&
|
|
6189
6192
|
this._filteredSuggestions.map((option, index) => (hAsync("li", { id: `option-${index}`, key: `-${index}`, ref: (el) => {
|
|
6190
6193
|
if (el)
|
|
@@ -7099,32 +7102,33 @@ const defaultStyleCss$x = "@layer kol-global {\n .sc-kol-input-checkbox-default
|
|
|
7099
7102
|
var KolInputCheckboxDefaultStyle0 = defaultStyleCss$x;
|
|
7100
7103
|
|
|
7101
7104
|
class KolInputCheckbox {
|
|
7105
|
+
getModelValue() {
|
|
7106
|
+
return this._checked ? this.state._value : null;
|
|
7107
|
+
}
|
|
7102
7108
|
async getValue() {
|
|
7103
|
-
|
|
7104
|
-
return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.checked;
|
|
7109
|
+
return this.getModelValue();
|
|
7105
7110
|
}
|
|
7106
7111
|
render() {
|
|
7107
7112
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
7108
7113
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
7109
|
-
return (hAsync(Host, { key: '
|
|
7114
|
+
return (hAsync(Host, { key: 'aed716bac17c685fbd79f290fdcc3868b9784dca', class: "kol-input-checkbox" }, hAsync(KolInputWcTag, { key: 'f88257815bcfa3753fb1402fbc15bc49d1804c15', class: {
|
|
7110
7115
|
checkbox: true,
|
|
7111
7116
|
[this.state._variant]: true,
|
|
7112
7117
|
'hide-label': !!this.state._hideLabel,
|
|
7113
7118
|
checked: this.state._checked,
|
|
7114
7119
|
indeterminate: this.state._indeterminate,
|
|
7115
|
-
}, "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: '
|
|
7120
|
+
}, "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: 'c008345d6def4c27b8b406e11c971541d9984da6', 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: '2d063454eb5b6aa66120d1ad823a35d7c5fb0d42', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: 'a615d25cce7fddf080c5c791999e8ecf427ed988', 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: '9dce2ac8d1c015eacfad3b643e92449bd7fdfd96', 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, { onInput: this.onInput, onChange: this.onChange, onClick: undefined }))))));
|
|
7116
7121
|
}
|
|
7117
7122
|
constructor(hostRef) {
|
|
7118
7123
|
registerInstance(this, hostRef);
|
|
7119
7124
|
this.catchRef = (ref) => {
|
|
7120
|
-
this.ref = ref;
|
|
7121
7125
|
propagateFocus(this.host, ref);
|
|
7122
7126
|
};
|
|
7123
7127
|
this.onInput = (event) => {
|
|
7124
7128
|
var _a;
|
|
7125
7129
|
this._checked = !this._checked;
|
|
7126
7130
|
this._indeterminate = false;
|
|
7127
|
-
const value = this.
|
|
7131
|
+
const value = this.getModelValue();
|
|
7128
7132
|
tryToDispatchKoliBriEvent('input', this.host, value);
|
|
7129
7133
|
if (typeof ((_a = this._on) === null || _a === void 0 ? void 0 : _a.onInput) === 'function') {
|
|
7130
7134
|
this._on.onInput(event, value);
|
|
@@ -7132,7 +7136,7 @@ class KolInputCheckbox {
|
|
|
7132
7136
|
};
|
|
7133
7137
|
this.onChange = (event) => {
|
|
7134
7138
|
var _a;
|
|
7135
|
-
const value = this.
|
|
7139
|
+
const value = this.getModelValue();
|
|
7136
7140
|
tryToDispatchKoliBriEvent('change', this.host, value);
|
|
7137
7141
|
this.controller.setFormAssociatedCheckboxValue(value);
|
|
7138
7142
|
if (typeof ((_a = this._on) === null || _a === void 0 ? void 0 : _a.onChange) === 'function') {
|
|
@@ -7875,6 +7879,11 @@ class KolInputDate {
|
|
|
7875
7879
|
}; }
|
|
7876
7880
|
}
|
|
7877
7881
|
|
|
7882
|
+
const PasswordVariantPropTypeOptions = ['default', 'visibility-toggle'];
|
|
7883
|
+
const validatePasswordVariant = (component, value) => {
|
|
7884
|
+
watchValidator(component, '_variant', (value) => typeof value === 'string' && PasswordVariantPropTypeOptions.includes(value), new Set(PasswordVariantPropTypeOptions), value);
|
|
7885
|
+
};
|
|
7886
|
+
|
|
7878
7887
|
class InputPasswordController extends InputIconController {
|
|
7879
7888
|
constructor(component, name, host) {
|
|
7880
7889
|
super(component, name, host);
|
|
@@ -7886,6 +7895,9 @@ class InputPasswordController extends InputIconController {
|
|
|
7886
7895
|
validateHasCounter(value) {
|
|
7887
7896
|
validateHasCounter(this.component, value);
|
|
7888
7897
|
}
|
|
7898
|
+
validateVariant(value) {
|
|
7899
|
+
validatePasswordVariant(this.component, value);
|
|
7900
|
+
}
|
|
7889
7901
|
validateMaxLength(value) {
|
|
7890
7902
|
watchNumber(this.component, '_maxLength', value, {
|
|
7891
7903
|
min: 0,
|
|
@@ -7917,6 +7929,7 @@ class InputPasswordController extends InputIconController {
|
|
|
7917
7929
|
this.validateReadOnly(this.component._readOnly);
|
|
7918
7930
|
this.validateRequired(this.component._required);
|
|
7919
7931
|
this.validateValue(this.component._value);
|
|
7932
|
+
this.validateVariant(this.component._variant);
|
|
7920
7933
|
}
|
|
7921
7934
|
}
|
|
7922
7935
|
|
|
@@ -8737,7 +8750,7 @@ class KolInputNumber {
|
|
|
8737
8750
|
}; }
|
|
8738
8751
|
}
|
|
8739
8752
|
|
|
8740
|
-
const defaultStyleCss$r = "@layer kol-global {\n .sc-kol-input-password-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-input-password-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-input-password-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 \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;\n opacity: 0.5;\n outline: none;\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 .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-password-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-input-password-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-input-password-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-input-password-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 \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;\n opacity: 0.5;\n outline: none;\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 .sc-kol-input-password-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-input-password-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
8753
|
+
const defaultStyleCss$r = "@layer kol-global {\n .sc-kol-input-password-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-input-password-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-input-password-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 \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;\n opacity: 0.5;\n outline: none;\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 .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-password-default-h {\n display: block;\n }\n}\n@layer kol-component {\n input,\n textarea {\n cursor: text;\n }\n input[type=checkbox],\n input[type=color],\n input[type=file],\n input[type=radio],\n input[type=range],\n label,\n option,\n select {\n cursor: pointer;\n }\n \n \n \n input[type=color],\n input[type=date],\n input[type=datetime-local],\n input[type=email],\n input[type=file],\n input[type=month],\n input[type=number],\n input[type=password],\n input[type=search],\n input[type=tel],\n input[type=text],\n input[type=time],\n input[type=url],\n input[type=week],\n select,\n select[multiple] option,\n textarea {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n \n input[type=file] {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n }\n \n select[multiple] option {\n padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n }\n}\n@layer kol-component {\n .kol-input {\n display: grid;\n }\n .kol-input .input-slot {\n flex-grow: 1;\n }\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: 2.75em;\n }\n input:focus,\n option:focus,\n select:focus,\n textarea:focus {\n outline: 0;\n }\n .input {\n display: flex;\n align-items: center;\n }\n .input > .kol-icon {\n display: grid;\n height: var(--a11y-min-size);\n place-items: center;\n }\n .kol-input.required .input-tooltip .span-label::after {\n content: \"*\";\n }\n}\n\n@layer kol-global {\n .sc-kol-input-password-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-input-password-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-input-password-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 \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;\n opacity: 0.5;\n outline: none;\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 .sc-kol-input-password-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .kol-alert-wc {\n display: grid;\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .kol-alert-wc .heading > div {\n flex-grow: 1;\n }\n .close {\n \n outline: transparent solid 1px;\n }\n}\n@layer kol-component {\n .sc-kol-input-password-default-h {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .password-toggle-button {\n position: absolute;\n transform: translateX(-100%);\n }\n .kol-tooltip-wc {\n --kol-tooltip-width: 10rem;\n }\n}";
|
|
8741
8754
|
var KolInputPasswordDefaultStyle0 = defaultStyleCss$r;
|
|
8742
8755
|
|
|
8743
8756
|
class KolInputPassword {
|
|
@@ -8746,15 +8759,20 @@ class KolInputPassword {
|
|
|
8746
8759
|
return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.value;
|
|
8747
8760
|
}
|
|
8748
8761
|
render() {
|
|
8762
|
+
var _a;
|
|
8749
8763
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
8750
8764
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
8751
|
-
return (hAsync(Host, { key: '
|
|
8765
|
+
return (hAsync(Host, { key: '26322a6ef323c064bb80228b4517ab49317d760a', class: {
|
|
8752
8766
|
'kol-input-password': true,
|
|
8753
8767
|
'has-value': this.state._hasValue,
|
|
8754
|
-
} }, hAsync(KolInputWcTag, { key: '
|
|
8768
|
+
} }, hAsync(KolInputWcTag, { key: '555b632f09d92f90797b8dd704051d4dbc106c54', class: {
|
|
8755
8769
|
'hide-label': !!this.state._hideLabel,
|
|
8756
8770
|
password: true,
|
|
8757
|
-
}, _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: '
|
|
8771
|
+
}, _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: '566c91288e1e25f8e2f725cd4faf5e73d7f77f18', 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: '10bb7667d0de5eae685e66d9009bb46b0aeaa0af', slot: "input" }, hAsync("input", Object.assign({ key: 'be00937b0caaecf61bb4b2b6ea83688c192e189d', 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: this._passwordVisible ? 'text' : 'password', value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onInput: this.onInput })), this._variant === 'visibility-toggle' && this.ref && ((_a = this.ref.value) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (hAsync(KolButtonWcTag, { class: "password-toggle-button", _label: this._passwordVisible ? translate('kol-hide-password') : translate('kol-show-password'), _variant: "ghost", _on: {
|
|
8772
|
+
onClick: () => {
|
|
8773
|
+
this._passwordVisible = !this._passwordVisible;
|
|
8774
|
+
},
|
|
8775
|
+
}, _hideLabel: true, _icons: this._passwordVisible ? 'codicon codicon-eye-closed' : 'codicon codicon-eye-watch' })) : ('')))));
|
|
8758
8776
|
}
|
|
8759
8777
|
constructor(hostRef) {
|
|
8760
8778
|
registerInstance(this, hostRef);
|
|
@@ -8800,6 +8818,7 @@ class KolInputPassword {
|
|
|
8800
8818
|
this._tooltipAlign = 'top';
|
|
8801
8819
|
this._touched = false;
|
|
8802
8820
|
this._value = undefined;
|
|
8821
|
+
this._variant = 'default';
|
|
8803
8822
|
this.state = {
|
|
8804
8823
|
_autoComplete: 'off',
|
|
8805
8824
|
_currentLength: 0,
|
|
@@ -8807,7 +8826,9 @@ class KolInputPassword {
|
|
|
8807
8826
|
_hideError: false,
|
|
8808
8827
|
_id: `id-${nonce()}`,
|
|
8809
8828
|
_label: '',
|
|
8829
|
+
_variant: 'default',
|
|
8810
8830
|
};
|
|
8831
|
+
this._passwordVisible = false;
|
|
8811
8832
|
this.controller = new InputPasswordController(this, 'password', this.host);
|
|
8812
8833
|
}
|
|
8813
8834
|
validateAccessKey(value) {
|
|
@@ -8825,6 +8846,9 @@ class KolInputPassword {
|
|
|
8825
8846
|
validateDisabled(value) {
|
|
8826
8847
|
this.controller.validateDisabled(value);
|
|
8827
8848
|
}
|
|
8849
|
+
validateVariant(value) {
|
|
8850
|
+
this.controller.validateVariant(value);
|
|
8851
|
+
}
|
|
8828
8852
|
validateError(value) {
|
|
8829
8853
|
this.controller.validateError(value);
|
|
8830
8854
|
}
|
|
@@ -8901,6 +8925,7 @@ class KolInputPassword {
|
|
|
8901
8925
|
"_alert": ["validateAlert"],
|
|
8902
8926
|
"_autoComplete": ["validateAutoComplete"],
|
|
8903
8927
|
"_disabled": ["validateDisabled"],
|
|
8928
|
+
"_variant": ["validateVariant"],
|
|
8904
8929
|
"_error": ["validateError"],
|
|
8905
8930
|
"_hasCounter": ["validateHasCounter"],
|
|
8906
8931
|
"_hideError": ["validateHideError"],
|
|
@@ -8956,7 +8981,9 @@ class KolInputPassword {
|
|
|
8956
8981
|
"_tooltipAlign": [1, "_tooltip-align"],
|
|
8957
8982
|
"_touched": [1540],
|
|
8958
8983
|
"_value": [1],
|
|
8984
|
+
"_variant": [1],
|
|
8959
8985
|
"state": [32],
|
|
8986
|
+
"_passwordVisible": [32],
|
|
8960
8987
|
"getValue": [64]
|
|
8961
8988
|
},
|
|
8962
8989
|
"$listeners$": undefined,
|
|
@@ -9896,7 +9923,7 @@ class KolKolibri {
|
|
|
9896
9923
|
}; }
|
|
9897
9924
|
}
|
|
9898
9925
|
|
|
9899
|
-
const defaultStyleCss$m = "@layer kol-global {\n .sc-kol-link-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-link-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-link-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 \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;\n opacity: 0.5;\n outline: none;\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 .sc-kol-link-default-h {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) {\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: underline;\n }\n a:is(:focus, :hover):not([aria-disabled]),\n button:is(:focus, :hover):not([disabled]) {\n text-decoration-thickness: 0.2em;\n }\n .skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background-color: #fff;\n left: unset;\n padding: 1em;\n position: unset;\n }\n .kol-icon.external-link-icon {\n display: inline-flex;\n }\n}";
|
|
9926
|
+
const defaultStyleCss$m = "@layer kol-global {\n .sc-kol-link-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-link-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-link-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 \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;\n opacity: 0.5;\n outline: none;\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 .sc-kol-link-default-h {\n display: inline-block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) {\n align-items: baseline;\n display: inline-flex;\n place-items: center;\n text-align: left;\n text-decoration-line: none;\n }\n :is(a, button) .kol-span-wc .span-label {\n text-decoration-line: underline;\n }\n a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.2em;\n }\n .skip {\n left: -99999px;\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background-color: #fff;\n left: unset;\n padding: 1em;\n position: unset;\n }\n .kol-icon.external-link-icon {\n display: inline-flex;\n }\n}";
|
|
9900
9927
|
var KolLinkDefaultStyle0 = defaultStyleCss$m;
|
|
9901
9928
|
|
|
9902
9929
|
class KolLink {
|
|
@@ -11413,12 +11440,21 @@ function getPaddingObject(padding) {
|
|
|
11413
11440
|
};
|
|
11414
11441
|
}
|
|
11415
11442
|
function rectToClientRect(rect) {
|
|
11443
|
+
const {
|
|
11444
|
+
x,
|
|
11445
|
+
y,
|
|
11446
|
+
width,
|
|
11447
|
+
height
|
|
11448
|
+
} = rect;
|
|
11416
11449
|
return {
|
|
11417
|
-
|
|
11418
|
-
|
|
11419
|
-
|
|
11420
|
-
|
|
11421
|
-
|
|
11450
|
+
width,
|
|
11451
|
+
height,
|
|
11452
|
+
top: y,
|
|
11453
|
+
left: x,
|
|
11454
|
+
right: x + width,
|
|
11455
|
+
bottom: y + height,
|
|
11456
|
+
x,
|
|
11457
|
+
y
|
|
11422
11458
|
};
|
|
11423
11459
|
}
|
|
11424
11460
|
|
|
@@ -12485,6 +12521,15 @@ function isOverflowElement(element) {
|
|
|
12485
12521
|
function isTableElement(element) {
|
|
12486
12522
|
return ['table', 'td', 'th'].includes(getNodeName(element));
|
|
12487
12523
|
}
|
|
12524
|
+
function isTopLayer(element) {
|
|
12525
|
+
return [':popover-open', ':modal'].some(selector => {
|
|
12526
|
+
try {
|
|
12527
|
+
return element.matches(selector);
|
|
12528
|
+
} catch (e) {
|
|
12529
|
+
return false;
|
|
12530
|
+
}
|
|
12531
|
+
});
|
|
12532
|
+
}
|
|
12488
12533
|
function isContainingBlock(element) {
|
|
12489
12534
|
const webkit = isWebKit();
|
|
12490
12535
|
const css = getComputedStyle(element);
|
|
@@ -12495,11 +12540,13 @@ function isContainingBlock(element) {
|
|
|
12495
12540
|
function getContainingBlock(element) {
|
|
12496
12541
|
let currentNode = getParentNode(element);
|
|
12497
12542
|
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
12543
|
+
if (isTopLayer(currentNode)) {
|
|
12544
|
+
return null;
|
|
12545
|
+
}
|
|
12498
12546
|
if (isContainingBlock(currentNode)) {
|
|
12499
12547
|
return currentNode;
|
|
12500
|
-
} else {
|
|
12501
|
-
currentNode = getParentNode(currentNode);
|
|
12502
12548
|
}
|
|
12549
|
+
currentNode = getParentNode(currentNode);
|
|
12503
12550
|
}
|
|
12504
12551
|
return null;
|
|
12505
12552
|
}
|
|
@@ -12694,17 +12741,6 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
12694
12741
|
});
|
|
12695
12742
|
}
|
|
12696
12743
|
|
|
12697
|
-
const topLayerSelectors = [':popover-open', ':modal'];
|
|
12698
|
-
function isTopLayer(element) {
|
|
12699
|
-
return topLayerSelectors.some(selector => {
|
|
12700
|
-
try {
|
|
12701
|
-
return element.matches(selector);
|
|
12702
|
-
} catch (e) {
|
|
12703
|
-
return false;
|
|
12704
|
-
}
|
|
12705
|
-
});
|
|
12706
|
-
}
|
|
12707
|
-
|
|
12708
12744
|
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
12709
12745
|
let {
|
|
12710
12746
|
elements,
|
|
@@ -13968,7 +14004,7 @@ class KolSpan {
|
|
|
13968
14004
|
this._label = undefined;
|
|
13969
14005
|
}
|
|
13970
14006
|
render() {
|
|
13971
|
-
return (hAsync(KolSpanWcTag, { key: '
|
|
14007
|
+
return (hAsync(KolSpanWcTag, { key: 'aa8c68dc9fc5c921ea83934e3345b9aa93c9dab9', _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey, class: "kol-span" }, hAsync("slot", { key: '623ac84ad57ea1f411ea530e40957a36f29f7125', name: "expert", slot: "expert" })));
|
|
13972
14008
|
}
|
|
13973
14009
|
static get style() { return {
|
|
13974
14010
|
default: KolSpanDefaultStyle0
|
|
@@ -22332,10 +22368,10 @@ class KolSpanWc {
|
|
|
22332
22368
|
render() {
|
|
22333
22369
|
var _a, _b, _c, _d, _e;
|
|
22334
22370
|
const hideExpertSlot = !showExpertSlot(this.state._label);
|
|
22335
|
-
return (hAsync(Host, { key: '
|
|
22371
|
+
return (hAsync(Host, { key: '00efc90d808c99015dae7704e43f5b3b78214c3c', class: {
|
|
22336
22372
|
'kol-span-wc': true,
|
|
22337
22373
|
'hide-label': !!this.state._hideLabel,
|
|
22338
|
-
} }, this.state._icons.top && (hAsync(KolIconTag, { key: '
|
|
22374
|
+
} }, this.state._icons.top && (hAsync(KolIconTag, { key: 'c59edfd6604b68665b84be0e08443d7070dbadff', class: "icon top", style: this.state._icons.top.style, _label: (_a = this.state._icons.top.label) !== null && _a !== void 0 ? _a : '', _icons: this.state._icons.top.icon })), hAsync("span", { key: '1781c6eb6ef23195111967101b0a4237704fbff8' }, this.state._icons.left && (hAsync(KolIconTag, { key: 'a6394a77571e4f0ee2343b07be1454754206c812', class: "icon left", style: this.state._icons.left.style, _label: (_b = this.state._icons.left.label) !== null && _b !== void 0 ? _b : '', _icons: this.state._icons.left.icon })), !this.state._hideLabel && hideExpertSlot ? (this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (hAsync("span", { class: "span-label md", innerHTML: md(this.state._label) })) : (hAsync("span", { class: "span-label" }, this.state._accessKey && this.state._label.length ? (hAsync(InternalUnderlinedAccessKey, { label: this.state._label, accessKey: this.state._accessKey })) : ((_c = this.state._label) !== null && _c !== void 0 ? _c : '')))) : (''), hAsync("span", { key: '92b0a7e5e3d1228727fa445f6b084f0aadf2c1be', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '921c8fa6caeea1239d8b429b61efa4da26d97e27', name: "expert" })), this.state._accessKey && (hAsync("span", { key: 'f498d141a17c29802688cf0a65d0e748e5766819', class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync(KolIconTag, { key: '670c2aa14ce83b25ca7e9484c032705716ac4537', class: "icon right", style: this.state._icons.right.style, _label: (_d = this.state._icons.right.label) !== null && _d !== void 0 ? _d : '', _icons: this.state._icons.right.icon }))), this.state._icons.bottom && (hAsync(KolIconTag, { key: '1a7ff7c6cd4c2949e86029e35b0481519215ab72', class: "icon bottom", style: this.state._icons.bottom.style, _label: (_e = this.state._icons.bottom.label) !== null && _e !== void 0 ? _e : '', _icons: this.state._icons.bottom.icon }))));
|
|
22339
22375
|
}
|
|
22340
22376
|
validateAccessKey(value) {
|
|
22341
22377
|
validateAccessKey(this, value);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/hydrate",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.3",
|
|
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": "5.0.7",
|
|
49
|
-
"@public-ui/components": "2.1.
|
|
49
|
+
"@public-ui/components": "2.1.3"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"@public-ui/components": "2.1.
|
|
52
|
+
"@public-ui/components": "2.1.3"
|
|
53
53
|
},
|
|
54
54
|
"sideEffects": false,
|
|
55
55
|
"type": "commonjs",
|