@public-ui/hydrate 3.0.0-rc.8 → 3.0.0-rc.9
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 +16 -42
- package/dist/index.mjs +16 -42
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -15129,39 +15129,13 @@ class InputController extends ControlledInputController {
|
|
|
15129
15129
|
}
|
|
15130
15130
|
}
|
|
15131
15131
|
|
|
15132
|
-
const beforePatchIcons = (value, nextState) => {
|
|
15133
|
-
const icons = value;
|
|
15134
|
-
if (typeof icons === 'object' && icons !== null) {
|
|
15135
|
-
if (isString$3(icons.right, 1)) {
|
|
15136
|
-
icons.right = { icon: icons.right };
|
|
15137
|
-
}
|
|
15138
|
-
if (isString$3(icons.left, 1)) {
|
|
15139
|
-
icons.left = { icon: icons.left };
|
|
15140
|
-
}
|
|
15141
|
-
nextState.set('_icons', icons);
|
|
15142
|
-
}
|
|
15143
|
-
};
|
|
15144
15132
|
class InputIconController extends InputController {
|
|
15145
15133
|
constructor(component, name, host) {
|
|
15146
15134
|
super(component, name, host);
|
|
15147
15135
|
this.component = component;
|
|
15148
15136
|
}
|
|
15149
15137
|
validateIcons(value) {
|
|
15150
|
-
|
|
15151
|
-
try {
|
|
15152
|
-
value = parseJson(value);
|
|
15153
|
-
}
|
|
15154
|
-
catch (e) {
|
|
15155
|
-
}
|
|
15156
|
-
watchValidator(this.component, '_icons', (value) => {
|
|
15157
|
-
return (typeof value === 'object' && value !== null && (isString$3(value.left, 1) || isIcon(value.left) || isString$3(value.right, 1) || isIcon(value.right)));
|
|
15158
|
-
}, new Set(['KoliBriHorizontalIcon']), value, {
|
|
15159
|
-
hooks: {
|
|
15160
|
-
beforePatch: beforePatchIcons,
|
|
15161
|
-
},
|
|
15162
|
-
required: true,
|
|
15163
|
-
});
|
|
15164
|
-
});
|
|
15138
|
+
validateIcons(this.component, value);
|
|
15165
15139
|
}
|
|
15166
15140
|
componentWillLoad() {
|
|
15167
15141
|
super.componentWillLoad();
|
|
@@ -16892,7 +16866,7 @@ class KolInputColor {
|
|
|
16892
16866
|
return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
|
|
16893
16867
|
}
|
|
16894
16868
|
render() {
|
|
16895
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
16869
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '4618fa8ab667bdc8d8418ddb9a5612298c70a52f' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'fe5ab536ae149d533ca24d048722def43b9414c8', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: '5152e937fb33845d08374862d90487b507132edf', class: "kol-input-color__inputs-wrapper" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '4f256a72a9b3f45c4153a63a6c865ff5e5d50bfb', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(KolInputStateWrapperFc, Object.assign({ key: 'bb9edc748af69658ba7082624c75ff0c05527415', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
|
|
16896
16870
|
}
|
|
16897
16871
|
constructor(hostRef) {
|
|
16898
16872
|
registerInstance(this, hostRef);
|
|
@@ -17280,7 +17254,7 @@ class KolInputDate {
|
|
|
17280
17254
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
|
|
17281
17255
|
}
|
|
17282
17256
|
render() {
|
|
17283
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17257
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '764e827d7652c7ace5ca967fb2a86e8d84a68258' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'cfb29cd3fae3706ef1db8e67bf67cab1ffb29a6b', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'cb590885f58275b5e5d7d86935b8a612c02a2699' }, this.getInputProps())))));
|
|
17284
17258
|
}
|
|
17285
17259
|
constructor(hostRef) {
|
|
17286
17260
|
registerInstance(this, hostRef);
|
|
@@ -17662,7 +17636,7 @@ class KolInputEmail {
|
|
|
17662
17636
|
} });
|
|
17663
17637
|
}
|
|
17664
17638
|
render() {
|
|
17665
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17639
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '45f5d7733d0a437342c2e8bb1ce1775d0e7c9120' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '2a8defce2681140146403050a95d4b06fa317d94', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'a7cc60872de4bb3da384bb0241bcaed3920574dc' }, this.getInputProps())))));
|
|
17666
17640
|
}
|
|
17667
17641
|
constructor(hostRef) {
|
|
17668
17642
|
registerInstance(this, hostRef);
|
|
@@ -17931,7 +17905,7 @@ class KolInputFile {
|
|
|
17931
17905
|
} });
|
|
17932
17906
|
}
|
|
17933
17907
|
render() {
|
|
17934
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17908
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '6c81b473b7ba7db7b45405159e0ae33913fdea8a' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '5e7229bb6eb56acb38c9354bd3a2f1d5e101aa93', state: this.state }, hAsync("span", { key: 'a7042630ccb23c6ec891ba4160726f1754025acc', class: "kol-input-container__filename" }, this.filename), hAsync(KolInputStateWrapperFc, Object.assign({ key: 'dfda5c0d86387248fb77a34c3cec9e05d36e907f' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: 'ee240516c779742894f67acb98d2d8d6b247541a', class: "kol-input-container__button", _label: translate('kol-data-browse-text'), _variant: "primary", _disabled: this._disabled }))));
|
|
17935
17909
|
}
|
|
17936
17910
|
constructor(hostRef) {
|
|
17937
17911
|
registerInstance(this, hostRef);
|
|
@@ -18248,7 +18222,7 @@ class KolInputNumber {
|
|
|
18248
18222
|
} });
|
|
18249
18223
|
}
|
|
18250
18224
|
render() {
|
|
18251
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
18225
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'de808304784b39e767c90dcff33ccf0d74eb1965' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'a1932ff3f3a33477ee4ed7474eb1e2f7159bf069', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'fdbfbb435d82998a20b0ad5494278c0d2ccd8c61' }, this.getInputProps())))));
|
|
18252
18226
|
}
|
|
18253
18227
|
constructor(hostRef) {
|
|
18254
18228
|
registerInstance(this, hostRef);
|
|
@@ -18499,7 +18473,7 @@ class KolInputPassword {
|
|
|
18499
18473
|
}, icon: `codicon codicon-eye-${this._passwordVisible ? 'closed' : 'watch'}`, disabled: this._disabled }));
|
|
18500
18474
|
}
|
|
18501
18475
|
render() {
|
|
18502
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
18476
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '8812e872d476550cc508273147cca8d238111c24' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '540aa1b375bbbae76f7a8f873b6908b8c31b633d', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'bb5cbd480045b6ab5e9a37200edff80a2d01637f' }, this.getInputProps())))));
|
|
18503
18477
|
}
|
|
18504
18478
|
constructor(hostRef) {
|
|
18505
18479
|
registerInstance(this, hostRef);
|
|
@@ -19057,7 +19031,7 @@ class KolInputRange {
|
|
|
19057
19031
|
const inputsWrapperStyle = {
|
|
19058
19032
|
'--kolibri-input-range--input-number--width': `calc(${String((_a = this.state._max) !== null && _a !== void 0 ? _a : 1000).length}ch + 1.5em)`,
|
|
19059
19033
|
};
|
|
19060
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
19034
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'c48df03fc1461212e64e534a4f39a5bb5ce77e9a' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'd0f5788051599b6da486f4e521da9dd2b811050f', state: this.state }, hAsync("div", { key: '4e3a9f84dd3fddd74389176fe9a0b4ab34a0c4aa', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'ce249e5fe71a3ffd0d22a3b6e60826d828dcf7ae', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(KolInputStateWrapperFc, Object.assign({ key: 'c26d486bac69e075737b7cf273dddbbd5dda16f3', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(KolSuggestionsFc, { key: '16ca2b65091b9336db06c7465bc9fd592450d1f8', id: this.state._id, suggestions: this.state._suggestions }))));
|
|
19061
19035
|
}
|
|
19062
19036
|
constructor(hostRef) {
|
|
19063
19037
|
registerInstance(this, hostRef);
|
|
@@ -19277,7 +19251,7 @@ class KolInputText {
|
|
|
19277
19251
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
|
|
19278
19252
|
}
|
|
19279
19253
|
render() {
|
|
19280
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
19254
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '03b91cd888725258ffc7d51f35cedd847147babf' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '8a9378fb5d82ab7427c4869899da6326e0b6030d', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'd78f3ae5645e24c5967922faa3c2b7b0908481e8' }, this.getInputProps())))));
|
|
19281
19255
|
}
|
|
19282
19256
|
constructor(hostRef) {
|
|
19283
19257
|
registerInstance(this, hostRef);
|
|
@@ -20061,7 +20035,7 @@ class KolModal {
|
|
|
20061
20035
|
}; }
|
|
20062
20036
|
}
|
|
20063
20037
|
|
|
20064
|
-
const defaultStyleCss$i = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\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,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-nav {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n display: grid;\n place-items: center;\n }\n .kol-nav--horizontal {\n width: 100%;\n }\n .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n width: 100%;\n }\n .kol-nav__list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list--horizontal {\n flex-wrap: wrap;\n }\n .kol-nav__entry-wrapper {\n display: flex;\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n}";
|
|
20038
|
+
const defaultStyleCss$i = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\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,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-nav {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n display: grid;\n place-items: center;\n }\n .kol-nav--horizontal {\n width: 100%;\n }\n .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n width: 100%;\n }\n .kol-nav__list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list--horizontal {\n flex-wrap: wrap;\n }\n .kol-nav__entry-wrapper {\n display: flex;\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-button {\n text-align: left;\n }\n}";
|
|
20065
20039
|
var KolNavDefaultStyle0 = defaultStyleCss$i;
|
|
20066
20040
|
|
|
20067
20041
|
const entryIsLink = (entryProps) => {
|
|
@@ -23393,13 +23367,13 @@ class KolSelect {
|
|
|
23393
23367
|
} });
|
|
23394
23368
|
}
|
|
23395
23369
|
render() {
|
|
23396
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
23370
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'a1537f9de293d843ccb5acff86672249b01b1851' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'd4b3fe42d34e746b10224b9c46c608fd743c5396', state: this.state }, hAsync("form", { key: '75f01c896e92aec8d4012aaa663da4a594a223cf', onSubmit: (event) => {
|
|
23397
23371
|
event.preventDefault();
|
|
23398
23372
|
propagateSubmitEventToForm({
|
|
23399
23373
|
form: this.host,
|
|
23400
23374
|
ref: this.selectRef,
|
|
23401
23375
|
});
|
|
23402
|
-
} }, hAsync("input", { key: '
|
|
23376
|
+
} }, hAsync("input", { key: '9d403926ab9195003a40ab139f243cd7945b0326', type: "submit", hidden: true }), hAsync(KolSelectStateWrapperFc, Object.assign({ key: '2c36031dd1c781ec1bec3aaf080a55166286e32e' }, this.getSelectProps()))))));
|
|
23403
23377
|
}
|
|
23404
23378
|
constructor(hostRef) {
|
|
23405
23379
|
registerInstance(this, hostRef);
|
|
@@ -23743,13 +23717,13 @@ class KolSingleSelect {
|
|
|
23743
23717
|
} });
|
|
23744
23718
|
}
|
|
23745
23719
|
render() {
|
|
23746
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
23720
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'ec3747f22ac846d38911cd95c7459ea384ae985a' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'e2d7f951550e3bd3eaf4ef31088df4a570c7d852', state: this.state }, hAsync("div", { key: '80e7bbd2c47355eddb11aab6c9682d1df2e386b3', class: "kol-single-select__group" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '60fc8dff63875f302faacdee8e7b802629e7106f' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '734bf8b1b2249aa1bd17c77576dc2897ef7f6666', _icons: "codicon codicon-close", "data-testid": "single-select-delete", _label: translate('kol-delete-selection'), onClick: () => {
|
|
23747
23721
|
var _a;
|
|
23748
23722
|
this.clearSelection();
|
|
23749
23723
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23750
23724
|
}, class: clsx('kol-single-select__delete', {
|
|
23751
23725
|
'kol-single-select__delete--disabled': this.state._disabled,
|
|
23752
|
-
}) })), hAsync(CustomSuggestionsToggleFc$1, { key: '
|
|
23726
|
+
}) })), hAsync(CustomSuggestionsToggleFc$1, { key: '363d2176f5be007551ebf1575236f784c8fae14e', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc$1, { key: '572a0bffa400ba25653a84db7172c0c9697902a9', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc$1, { index: index, option: option.label, ref: (el) => {
|
|
23753
23727
|
if (el)
|
|
23754
23728
|
this.refOptions[index] = el;
|
|
23755
23729
|
}, selected: this._value === option.value, onClick: (event) => {
|
|
@@ -25894,7 +25868,7 @@ class KolTextarea {
|
|
|
25894
25868
|
} });
|
|
25895
25869
|
}
|
|
25896
25870
|
render() {
|
|
25897
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
25871
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '754dea74a89ae00f840540e45092d145055a30cd' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'c6823b12d2ee282a62dabd16e2c42509abe62862', state: this.state }, hAsync(KolTextAreaStateWrapperFc, Object.assign({ key: 'aa8ab23c18521e393e14a9ad716de8928d40a2ae' }, this.getTextAreaProps())))));
|
|
25898
25872
|
}
|
|
25899
25873
|
constructor(hostRef) {
|
|
25900
25874
|
registerInstance(this, hostRef);
|
|
@@ -26084,7 +26058,7 @@ class KolTextarea {
|
|
|
26084
26058
|
"_hideMsg": [1540, "_hide-msg"],
|
|
26085
26059
|
"_hideLabel": [4, "_hide-label"],
|
|
26086
26060
|
"_hint": [1],
|
|
26087
|
-
"_icons": [
|
|
26061
|
+
"_icons": [1],
|
|
26088
26062
|
"_id": [1],
|
|
26089
26063
|
"_label": [1],
|
|
26090
26064
|
"_maxLength": [2, "_max-length"],
|
package/dist/index.mjs
CHANGED
|
@@ -15125,39 +15125,13 @@ class InputController extends ControlledInputController {
|
|
|
15125
15125
|
}
|
|
15126
15126
|
}
|
|
15127
15127
|
|
|
15128
|
-
const beforePatchIcons = (value, nextState) => {
|
|
15129
|
-
const icons = value;
|
|
15130
|
-
if (typeof icons === 'object' && icons !== null) {
|
|
15131
|
-
if (isString$3(icons.right, 1)) {
|
|
15132
|
-
icons.right = { icon: icons.right };
|
|
15133
|
-
}
|
|
15134
|
-
if (isString$3(icons.left, 1)) {
|
|
15135
|
-
icons.left = { icon: icons.left };
|
|
15136
|
-
}
|
|
15137
|
-
nextState.set('_icons', icons);
|
|
15138
|
-
}
|
|
15139
|
-
};
|
|
15140
15128
|
class InputIconController extends InputController {
|
|
15141
15129
|
constructor(component, name, host) {
|
|
15142
15130
|
super(component, name, host);
|
|
15143
15131
|
this.component = component;
|
|
15144
15132
|
}
|
|
15145
15133
|
validateIcons(value) {
|
|
15146
|
-
|
|
15147
|
-
try {
|
|
15148
|
-
value = parseJson(value);
|
|
15149
|
-
}
|
|
15150
|
-
catch (e) {
|
|
15151
|
-
}
|
|
15152
|
-
watchValidator(this.component, '_icons', (value) => {
|
|
15153
|
-
return (typeof value === 'object' && value !== null && (isString$3(value.left, 1) || isIcon(value.left) || isString$3(value.right, 1) || isIcon(value.right)));
|
|
15154
|
-
}, new Set(['KoliBriHorizontalIcon']), value, {
|
|
15155
|
-
hooks: {
|
|
15156
|
-
beforePatch: beforePatchIcons,
|
|
15157
|
-
},
|
|
15158
|
-
required: true,
|
|
15159
|
-
});
|
|
15160
|
-
});
|
|
15134
|
+
validateIcons(this.component, value);
|
|
15161
15135
|
}
|
|
15162
15136
|
componentWillLoad() {
|
|
15163
15137
|
super.componentWillLoad();
|
|
@@ -16888,7 +16862,7 @@ class KolInputColor {
|
|
|
16888
16862
|
return Object.assign(Object.assign({ state: Object.assign(Object.assign({}, other), { _suggestions: [] }) }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus });
|
|
16889
16863
|
}
|
|
16890
16864
|
render() {
|
|
16891
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
16865
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '4618fa8ab667bdc8d8418ddb9a5612298c70a52f' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'fe5ab536ae149d533ca24d048722def43b9414c8', state: this.state, class: "kol-input-color__inputs-wrapper" }, hAsync("div", { key: '5152e937fb33845d08374862d90487b507132edf', class: "kol-input-color__inputs-wrapper" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '4f256a72a9b3f45c4153a63a6c865ff5e5d50bfb', class: "kol-input-color__input kol-input-color__input--color" }, this.getInputColorProps())), hAsync(KolInputStateWrapperFc, Object.assign({ key: 'bb9edc748af69658ba7082624c75ff0c05527415', class: "kol-input-color__input kol-input-color__input--text" }, this.getInputTextProps()))))));
|
|
16892
16866
|
}
|
|
16893
16867
|
constructor(hostRef) {
|
|
16894
16868
|
registerInstance(this, hostRef);
|
|
@@ -17276,7 +17250,7 @@ class KolInputDate {
|
|
|
17276
17250
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onChange: this.onChange, onInput: this.onInput });
|
|
17277
17251
|
}
|
|
17278
17252
|
render() {
|
|
17279
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17253
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '764e827d7652c7ace5ca967fb2a86e8d84a68258' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'cfb29cd3fae3706ef1db8e67bf67cab1ffb29a6b', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'cb590885f58275b5e5d7d86935b8a612c02a2699' }, this.getInputProps())))));
|
|
17280
17254
|
}
|
|
17281
17255
|
constructor(hostRef) {
|
|
17282
17256
|
registerInstance(this, hostRef);
|
|
@@ -17658,7 +17632,7 @@ class KolInputEmail {
|
|
|
17658
17632
|
} });
|
|
17659
17633
|
}
|
|
17660
17634
|
render() {
|
|
17661
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17635
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '45f5d7733d0a437342c2e8bb1ce1775d0e7c9120' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '2a8defce2681140146403050a95d4b06fa317d94', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'a7cc60872de4bb3da384bb0241bcaed3920574dc' }, this.getInputProps())))));
|
|
17662
17636
|
}
|
|
17663
17637
|
constructor(hostRef) {
|
|
17664
17638
|
registerInstance(this, hostRef);
|
|
@@ -17927,7 +17901,7 @@ class KolInputFile {
|
|
|
17927
17901
|
} });
|
|
17928
17902
|
}
|
|
17929
17903
|
render() {
|
|
17930
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
17904
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '6c81b473b7ba7db7b45405159e0ae33913fdea8a' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '5e7229bb6eb56acb38c9354bd3a2f1d5e101aa93', state: this.state }, hAsync("span", { key: 'a7042630ccb23c6ec891ba4160726f1754025acc', class: "kol-input-container__filename" }, this.filename), hAsync(KolInputStateWrapperFc, Object.assign({ key: 'dfda5c0d86387248fb77a34c3cec9e05d36e907f' }, this.getInputProps())), hAsync(KolButtonWcTag, { key: 'ee240516c779742894f67acb98d2d8d6b247541a', class: "kol-input-container__button", _label: translate('kol-data-browse-text'), _variant: "primary", _disabled: this._disabled }))));
|
|
17931
17905
|
}
|
|
17932
17906
|
constructor(hostRef) {
|
|
17933
17907
|
registerInstance(this, hostRef);
|
|
@@ -18244,7 +18218,7 @@ class KolInputNumber {
|
|
|
18244
18218
|
} });
|
|
18245
18219
|
}
|
|
18246
18220
|
render() {
|
|
18247
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
18221
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'de808304784b39e767c90dcff33ccf0d74eb1965' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'a1932ff3f3a33477ee4ed7474eb1e2f7159bf069', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'fdbfbb435d82998a20b0ad5494278c0d2ccd8c61' }, this.getInputProps())))));
|
|
18248
18222
|
}
|
|
18249
18223
|
constructor(hostRef) {
|
|
18250
18224
|
registerInstance(this, hostRef);
|
|
@@ -18495,7 +18469,7 @@ class KolInputPassword {
|
|
|
18495
18469
|
}, icon: `codicon codicon-eye-${this._passwordVisible ? 'closed' : 'watch'}`, disabled: this._disabled }));
|
|
18496
18470
|
}
|
|
18497
18471
|
render() {
|
|
18498
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
18472
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '8812e872d476550cc508273147cca8d238111c24' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '540aa1b375bbbae76f7a8f873b6908b8c31b633d', state: this.state, endAdornment: this.getShowPasswordButton() }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'bb5cbd480045b6ab5e9a37200edff80a2d01637f' }, this.getInputProps())))));
|
|
18499
18473
|
}
|
|
18500
18474
|
constructor(hostRef) {
|
|
18501
18475
|
registerInstance(this, hostRef);
|
|
@@ -19053,7 +19027,7 @@ class KolInputRange {
|
|
|
19053
19027
|
const inputsWrapperStyle = {
|
|
19054
19028
|
'--kolibri-input-range--input-number--width': `calc(${String((_a = this.state._max) !== null && _a !== void 0 ? _a : 1000).length}ch + 1.5em)`,
|
|
19055
19029
|
};
|
|
19056
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
19030
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'c48df03fc1461212e64e534a4f39a5bb5ce77e9a' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'd0f5788051599b6da486f4e521da9dd2b811050f', state: this.state }, hAsync("div", { key: '4e3a9f84dd3fddd74389176fe9a0b4ab34a0c4aa', class: "kol-input-range__inputs-wrapper", style: inputsWrapperStyle }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'ce249e5fe71a3ffd0d22a3b6e60826d828dcf7ae', class: "kol-input-range__input kol-input-range__input--range" }, this.getInputRangeProps())), hAsync(KolInputStateWrapperFc, Object.assign({ key: 'c26d486bac69e075737b7cf273dddbbd5dda16f3', class: "kol-input-range__input kol-input-range__input--number" }, this.getInputNumberProps()))), this.hasSuggestions && hAsync(KolSuggestionsFc, { key: '16ca2b65091b9336db06c7465bc9fd592450d1f8', id: this.state._id, suggestions: this.state._suggestions }))));
|
|
19057
19031
|
}
|
|
19058
19032
|
constructor(hostRef) {
|
|
19059
19033
|
registerInstance(this, hostRef);
|
|
@@ -19273,7 +19247,7 @@ class KolInputText {
|
|
|
19273
19247
|
return Object.assign(Object.assign({ ref: this.catchRef, state: this.state }, this.controller.onFacade), { onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown });
|
|
19274
19248
|
}
|
|
19275
19249
|
render() {
|
|
19276
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
19250
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '03b91cd888725258ffc7d51f35cedd847147babf' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: '8a9378fb5d82ab7427c4869899da6326e0b6030d', state: this.state }, hAsync(KolInputStateWrapperFc, Object.assign({ key: 'd78f3ae5645e24c5967922faa3c2b7b0908481e8' }, this.getInputProps())))));
|
|
19277
19251
|
}
|
|
19278
19252
|
constructor(hostRef) {
|
|
19279
19253
|
registerInstance(this, hostRef);
|
|
@@ -20057,7 +20031,7 @@ class KolModal {
|
|
|
20057
20031
|
}; }
|
|
20058
20032
|
}
|
|
20059
20033
|
|
|
20060
|
-
const defaultStyleCss$i = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\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,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-nav {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n display: grid;\n place-items: center;\n }\n .kol-nav--horizontal {\n width: 100%;\n }\n .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n width: 100%;\n }\n .kol-nav__list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list--horizontal {\n flex-wrap: wrap;\n }\n .kol-nav__entry-wrapper {\n display: flex;\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n}";
|
|
20034
|
+
const defaultStyleCss$i = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]) {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\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 * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%;\n /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n .badge-text-hint {\n background-color: lightgray;\n color: black;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n .kol-span {\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n display: grid;\n place-items: center;\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n }\n .kol-span__container {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .kol-span .kol-span__label--hide-label .kol-span__label {\n display: none;\n }\n /* Reset browser agent style. */\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,\n [disabled]:focus .kol-span {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip {\n display: contents;\n }\n .kol-tooltip__floating {\n animation-duration: 0.25s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n .kol-tooltip__arrow {\n background-color: #fff;\n color: #000;\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip__content {\n background-color: #fff;\n color: #000;\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n .kol-nav {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n display: grid;\n place-items: center;\n }\n .kol-nav--horizontal {\n width: 100%;\n }\n .kol-nav:not(.kol-nav--is-compact) .kol-nav__navigation {\n width: 100%;\n }\n .kol-nav__list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .kol-nav__list--vertical {\n flex-direction: column;\n }\n .kol-nav__list--horizontal {\n flex-wrap: wrap;\n }\n .kol-nav__entry-wrapper {\n display: flex;\n }\n .kol-nav__entry {\n flex-grow: 1;\n }\n .kol-button {\n text-align: left;\n }\n}";
|
|
20061
20035
|
var KolNavDefaultStyle0 = defaultStyleCss$i;
|
|
20062
20036
|
|
|
20063
20037
|
const entryIsLink = (entryProps) => {
|
|
@@ -23389,13 +23363,13 @@ class KolSelect {
|
|
|
23389
23363
|
} });
|
|
23390
23364
|
}
|
|
23391
23365
|
render() {
|
|
23392
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
23366
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'a1537f9de293d843ccb5acff86672249b01b1851' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'd4b3fe42d34e746b10224b9c46c608fd743c5396', state: this.state }, hAsync("form", { key: '75f01c896e92aec8d4012aaa663da4a594a223cf', onSubmit: (event) => {
|
|
23393
23367
|
event.preventDefault();
|
|
23394
23368
|
propagateSubmitEventToForm({
|
|
23395
23369
|
form: this.host,
|
|
23396
23370
|
ref: this.selectRef,
|
|
23397
23371
|
});
|
|
23398
|
-
} }, hAsync("input", { key: '
|
|
23372
|
+
} }, hAsync("input", { key: '9d403926ab9195003a40ab139f243cd7945b0326', type: "submit", hidden: true }), hAsync(KolSelectStateWrapperFc, Object.assign({ key: '2c36031dd1c781ec1bec3aaf080a55166286e32e' }, this.getSelectProps()))))));
|
|
23399
23373
|
}
|
|
23400
23374
|
constructor(hostRef) {
|
|
23401
23375
|
registerInstance(this, hostRef);
|
|
@@ -23739,13 +23713,13 @@ class KolSingleSelect {
|
|
|
23739
23713
|
} });
|
|
23740
23714
|
}
|
|
23741
23715
|
render() {
|
|
23742
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
23716
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: 'ec3747f22ac846d38911cd95c7459ea384ae985a' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'e2d7f951550e3bd3eaf4ef31088df4a570c7d852', state: this.state }, hAsync("div", { key: '80e7bbd2c47355eddb11aab6c9682d1df2e386b3', class: "kol-single-select__group" }, hAsync(KolInputStateWrapperFc, Object.assign({ key: '60fc8dff63875f302faacdee8e7b802629e7106f' }, this.getInputProps())), this._inputValue && !this.state._hideClearButton && (hAsync(KolIconTag, { key: '734bf8b1b2249aa1bd17c77576dc2897ef7f6666', _icons: "codicon codicon-close", "data-testid": "single-select-delete", _label: translate('kol-delete-selection'), onClick: () => {
|
|
23743
23717
|
var _a;
|
|
23744
23718
|
this.clearSelection();
|
|
23745
23719
|
(_a = this.refInput) === null || _a === void 0 ? void 0 : _a.focus();
|
|
23746
23720
|
}, class: clsx('kol-single-select__delete', {
|
|
23747
23721
|
'kol-single-select__delete--disabled': this.state._disabled,
|
|
23748
|
-
}) })), hAsync(CustomSuggestionsToggleFc$1, { key: '
|
|
23722
|
+
}) })), hAsync(CustomSuggestionsToggleFc$1, { key: '363d2176f5be007551ebf1575236f784c8fae14e', onClick: this.toggleListbox.bind(this), disabled: this.state._disabled })), this._isOpen && !(this.state._disabled === true) && (hAsync(CustomSuggestionsOptionsGroupFc$1, { key: '572a0bffa400ba25653a84db7172c0c9697902a9', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this) }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (hAsync(CustomSuggestionsOptionFc$1, { index: index, option: option.label, ref: (el) => {
|
|
23749
23723
|
if (el)
|
|
23750
23724
|
this.refOptions[index] = el;
|
|
23751
23725
|
}, selected: this._value === option.value, onClick: (event) => {
|
|
@@ -25890,7 +25864,7 @@ class KolTextarea {
|
|
|
25890
25864
|
} });
|
|
25891
25865
|
}
|
|
25892
25866
|
render() {
|
|
25893
|
-
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '
|
|
25867
|
+
return (hAsync(KolFormFieldStateWrapperFc, Object.assign({ key: '754dea74a89ae00f840540e45092d145055a30cd' }, this.getFormFieldProps()), hAsync(KolInputContainerStateWrapperFc, { key: 'c6823b12d2ee282a62dabd16e2c42509abe62862', state: this.state }, hAsync(KolTextAreaStateWrapperFc, Object.assign({ key: 'aa8ab23c18521e393e14a9ad716de8928d40a2ae' }, this.getTextAreaProps())))));
|
|
25894
25868
|
}
|
|
25895
25869
|
constructor(hostRef) {
|
|
25896
25870
|
registerInstance(this, hostRef);
|
|
@@ -26080,7 +26054,7 @@ class KolTextarea {
|
|
|
26080
26054
|
"_hideMsg": [1540, "_hide-msg"],
|
|
26081
26055
|
"_hideLabel": [4, "_hide-label"],
|
|
26082
26056
|
"_hint": [1],
|
|
26083
|
-
"_icons": [
|
|
26057
|
+
"_icons": [1],
|
|
26084
26058
|
"_id": [1],
|
|
26085
26059
|
"_label": [1],
|
|
26086
26060
|
"_maxLength": [2, "_max-length"],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/hydrate",
|
|
3
|
-
"version": "3.0.0-rc.
|
|
3
|
+
"version": "3.0.0-rc.9",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
],
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"rimraf": "6.0.1",
|
|
49
|
-
"@public-ui/components": "3.0.0-rc.
|
|
49
|
+
"@public-ui/components": "3.0.0-rc.9"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
|
-
"@public-ui/components": "3.0.0-rc.
|
|
52
|
+
"@public-ui/components": "3.0.0-rc.9"
|
|
53
53
|
},
|
|
54
54
|
"sideEffects": false,
|
|
55
55
|
"type": "commonjs",
|