@public-ui/hydrate 2.0.9 → 2.0.10
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 +500 -325
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
7
7
|
|
|
8
8
|
/*!
|
|
9
|
-
Stencil Mock Doc v4.
|
|
9
|
+
Stencil Mock Doc v4.13.0 | MIT Licensed | https://stenciljs.com
|
|
10
10
|
*/
|
|
11
11
|
const CONTENT_REF_ID = 'r';
|
|
12
12
|
const ORG_LOCATION_ID = 'o';
|
|
@@ -385,6 +385,14 @@ class MockCustomElementRegistry {
|
|
|
385
385
|
}
|
|
386
386
|
return undefined;
|
|
387
387
|
}
|
|
388
|
+
getName(cstr) {
|
|
389
|
+
for (const [tagName, def] of this.__registry.entries()) {
|
|
390
|
+
if (def.cstr === cstr) {
|
|
391
|
+
return tagName;
|
|
392
|
+
}
|
|
393
|
+
}
|
|
394
|
+
return undefined;
|
|
395
|
+
}
|
|
388
396
|
upgrade(_rootNode) {
|
|
389
397
|
//
|
|
390
398
|
}
|
|
@@ -7458,7 +7466,7 @@ function rgba(str) {
|
|
|
7458
7466
|
|
|
7459
7467
|
var rgbaConvert = rgbaConvert$1.exports;
|
|
7460
7468
|
|
|
7461
|
-
var n=.2126,r=.7152,t=.0722,e=1/12.92;function u(n){return Math.pow((n+.055)/1.055,2.4)}function a(a){var i=a[0]/255,c=a[1]/255,o=a[2]/255,s=i<=.03928?i*e:u(i),f=c<=.03928?c*e:u(c),l=o<=.03928?o*e:u(o);return s*n+f*r+l*t}function i(n){var r=255;8===(n=n.replace(/^#/,"")).length&&(r=parseInt(n.slice(6,8),16),n=n.substring(0,6)),4===n.length&&(r=parseInt(n.slice(3,4).repeat(2),16),n=n.substring(0,3)),3===n.length&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);var t=parseInt(n,16);return [t>>16,t>>8&255,255&t,r]}function c(n,r){return (Math.max(n,r)+.05)/(Math.min(n,r)+.05)}function o(n,r){return c(a(n),a(r))}function s(n,r){return o(i(n),i(r))}function f(n){return n>=7?"AAA":n>=4.5?"AA":n>=3?"AA Large":"Fail"}
|
|
7469
|
+
var n=.2126,r$1=.7152,t=.0722,e=1/12.92;function u(n){return Math.pow((n+.055)/1.055,2.4)}function a(a){var i=a[0]/255,c=a[1]/255,o=a[2]/255,s=i<=.03928?i*e:u(i),f=c<=.03928?c*e:u(c),l=o<=.03928?o*e:u(o);return s*n+f*r$1+l*t}function i(n){var r=255;8===(n=n.replace(/^#/,"")).length&&(r=parseInt(n.slice(6,8),16),n=n.substring(0,6)),4===n.length&&(r=parseInt(n.slice(3,4).repeat(2),16),n=n.substring(0,3)),3===n.length&&(n=n[0]+n[0]+n[1]+n[1]+n[2]+n[2]);var t=parseInt(n,16);return [t>>16,t>>8&255,255&t,r]}function c(n,r){return (Math.max(n,r)+.05)/(Math.min(n,r)+.05)}function o(n,r){return c(a(n),a(r))}function s(n,r){return o(i(n),i(r))}function f(n){return n>=7?"AAA":n>=4.5?"AA":n>=3?"AA Large":"Fail"}
|
|
7462
7470
|
|
|
7463
7471
|
var colorName = {
|
|
7464
7472
|
"aliceblue": [240, 248, 255],
|
|
@@ -8942,6 +8950,10 @@ const validateMax = (component, value, options) => {
|
|
|
8942
8950
|
watchNumber(component, "_max", value, options);
|
|
8943
8951
|
};
|
|
8944
8952
|
|
|
8953
|
+
const validateMsg = (component, value) => {
|
|
8954
|
+
watchValidator(component, `_msg`, (value2) => typeof value2 === "object", /* @__PURE__ */ new Set(["Object"]), value);
|
|
8955
|
+
};
|
|
8956
|
+
|
|
8945
8957
|
const validateMultiple = (component, value) => {
|
|
8946
8958
|
watchBoolean(component, "_multiple", value);
|
|
8947
8959
|
};
|
|
@@ -9426,24 +9438,29 @@ const createTime = (e, t = "") => {
|
|
|
9426
9438
|
let scopeId, contentRef, hostTagName, useNativeShadowDom = !1, checkSlotFallbackVisibility = !1, checkSlotRelocate = !1, isSvgMode = !1;
|
|
9427
9439
|
|
|
9428
9440
|
const createElm = (e, t, o, n) => {
|
|
9429
|
-
|
|
9430
|
-
|
|
9431
|
-
|
|
9432
|
-
|
|
9433
|
-
|
|
9434
|
-
isSvgMode && "
|
|
9435
|
-
|
|
9436
|
-
|
|
9437
|
-
|
|
9438
|
-
|
|
9441
|
+
var s;
|
|
9442
|
+
const l = t.$children$[o];
|
|
9443
|
+
let a, r, i, d = 0;
|
|
9444
|
+
if (!useNativeShadowDom && (checkSlotRelocate = !0, "slot" === l.$tag$ && (scopeId && n.classList.add(scopeId + "-s"),
|
|
9445
|
+
l.$flags$ |= l.$children$ ? 2 : 1)), null !== l.$text$) a = l.$elm$ = doc.createTextNode(l.$text$); else if (1 & l.$flags$) a = l.$elm$ = slotReferenceDebugNode(l) ; else {
|
|
9446
|
+
if (!isSvgMode && (isSvgMode = "svg" === l.$tag$), a = l.$elm$ = doc.createElementNS(isSvgMode ? "http://www.w3.org/2000/svg" : "http://www.w3.org/1999/xhtml", 2 & l.$flags$ ? "slot-fb" : l.$tag$) ,
|
|
9447
|
+
isSvgMode && "foreignObject" === l.$tag$ && (isSvgMode = !1), updateElement(null, l, isSvgMode),
|
|
9448
|
+
null != scopeId && a["s-si"] !== scopeId && a.classList.add(a["s-si"] = scopeId),
|
|
9449
|
+
l.$children$) for (d = 0; d < l.$children$.length; ++d) r = createElm(e, l, d, a),
|
|
9450
|
+
r && a.appendChild(r);
|
|
9451
|
+
("svg" === l.$tag$ ? isSvgMode = !1 : "foreignObject" === a.tagName && (isSvgMode = !0));
|
|
9439
9452
|
}
|
|
9440
|
-
return
|
|
9441
|
-
|
|
9442
|
-
|
|
9443
|
-
|
|
9453
|
+
return a["s-hn"] = hostTagName, 3 & l.$flags$ && (a["s-sr"] = !0,
|
|
9454
|
+
a["s-cr"] = contentRef, a["s-sn"] = l.$name$ || "", a["s-rf"] = null === (s = l.$attrs$) || void 0 === s ? void 0 : s.ref,
|
|
9455
|
+
i = e && e.$children$ && e.$children$[o], i && i.$tag$ === l.$tag$ && e.$elm$ && (putBackInOriginalLocation(e.$elm$, !1))),
|
|
9456
|
+
a;
|
|
9444
9457
|
}, putBackInOriginalLocation = (e, t) => {
|
|
9445
9458
|
plt.$flags$ |= 1;
|
|
9446
|
-
const o = e.childNodes;
|
|
9459
|
+
const o = Array.from(e.childNodes);
|
|
9460
|
+
if (e["s-sr"] && BUILD.experimentalSlotFixes) {
|
|
9461
|
+
let t = e;
|
|
9462
|
+
for (;t = t.nextSibling; ) t && t["s-sn"] === e["s-sn"] && t["s-sh"] === hostTagName && o.push(t);
|
|
9463
|
+
}
|
|
9447
9464
|
for (let e = o.length - 1; e >= 0; e--) {
|
|
9448
9465
|
const n = o[e];
|
|
9449
9466
|
n["s-hn"] !== hostTagName && n["s-ol"] && (parentReferenceNode(n).insertBefore(n, referenceNode(n)),
|
|
@@ -9565,7 +9582,8 @@ const createElm = (e, t, o, n) => {
|
|
|
9565
9582
|
}
|
|
9566
9583
|
}
|
|
9567
9584
|
(!o && e !== t.parentNode || t.nextSibling !== o) && t !== o && (t["s-hn"] || !t["s-ol"] || (t["s-hn"] = t["s-ol"].parentNode.nodeName),
|
|
9568
|
-
e.insertBefore(t, o), 1 === t.nodeType && (t.hidden = null !== (l = t["s-ih"]) && void 0 !== l && l))
|
|
9585
|
+
e.insertBefore(t, o), 1 === t.nodeType && (t.hidden = null !== (l = t["s-ih"]) && void 0 !== l && l)),
|
|
9586
|
+
t && "function" == typeof r["s-rf"] && r["s-rf"](t);
|
|
9569
9587
|
} else 1 === t.nodeType && (o && (t["s-ih"] = null !== (a = t.hidden) && void 0 !== a && a),
|
|
9570
9588
|
t.hidden = !0);
|
|
9571
9589
|
}
|
|
@@ -9722,7 +9740,7 @@ const callRender = (e, t, o, n) => {
|
|
|
9722
9740
|
return e;
|
|
9723
9741
|
}, initializeComponent = async (e, t, o, n) => {
|
|
9724
9742
|
let s;
|
|
9725
|
-
if (
|
|
9743
|
+
if (!(32 & t.$flags$)) {
|
|
9726
9744
|
t.$flags$ |= 32;
|
|
9727
9745
|
const n = o.$lazyBundleId$;
|
|
9728
9746
|
if (n) {
|
|
@@ -9756,7 +9774,7 @@ const callRender = (e, t, o, n) => {
|
|
|
9756
9774
|
}, fireConnectedCallback = e => {
|
|
9757
9775
|
safeCall(e, "connectedCallback");
|
|
9758
9776
|
}, connectedCallback = e => {
|
|
9759
|
-
if (
|
|
9777
|
+
if (!(1 & plt.$flags$)) {
|
|
9760
9778
|
const t = getHostRef(e), o = t.$cmpMeta$, n = createTime("connectedCallback", o.$tagName$);
|
|
9761
9779
|
if (1 & t.$flags$) addHostEventListeners(e, t, o.$listeners$), (null == t ? void 0 : t.$lazyInstance$) ? fireConnectedCallback(t.$lazyInstance$) : (null == t ? void 0 : t.$onReadyPromise$) && t.$onReadyPromise$.then((() => fireConnectedCallback(t.$lazyInstance$))); else {
|
|
9762
9780
|
let n;
|
|
@@ -9799,7 +9817,7 @@ const callRender = (e, t, o, n) => {
|
|
|
9799
9817
|
} catch (e) {
|
|
9800
9818
|
consoleError(e);
|
|
9801
9819
|
}
|
|
9802
|
-
}, hostListenerOpts = e =>
|
|
9820
|
+
}, hostListenerOpts = e => !!(2 & e), insertVdomAnnotations = (e, t) => {
|
|
9803
9821
|
if (null != e) {
|
|
9804
9822
|
const o = {
|
|
9805
9823
|
hostIds: 0,
|
|
@@ -9961,21 +9979,16 @@ const getKoliBri$1 = () => {
|
|
|
9961
9979
|
};
|
|
9962
9980
|
const initKoliBri = () => {
|
|
9963
9981
|
initMeta();
|
|
9964
|
-
|
|
9965
|
-
|
|
9966
|
-
|
|
9967
|
-
|
|
9968
|
-
|
|
9969
|
-
|
|
9970
|
-
|
|
9971
|
-
|
|
9972
|
-
|
|
9973
|
-
|
|
9974
|
-
});
|
|
9975
|
-
}
|
|
9976
|
-
else {
|
|
9977
|
-
console.warn(`You can only initialize KoliBri once.`);
|
|
9978
|
-
}
|
|
9982
|
+
Log.debug(`
|
|
9983
|
+
,--. ,--. ,--. ,--. ,-----. ,--.
|
|
9984
|
+
| .' / ,---. | | \`--' | |) /_ ,--.--. \`--'
|
|
9985
|
+
| . ' | .-. | | | ,--. | .-. \\ | .--' ,--.
|
|
9986
|
+
| |\\ \\ | '-' | | | | | | '--' / | | | |
|
|
9987
|
+
\`--' \`--´ \`---´ \`--' \`--' \`------´ \`--' \`--'
|
|
9988
|
+
🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.8
|
|
9989
|
+
`, {
|
|
9990
|
+
forceLog: true,
|
|
9991
|
+
});
|
|
9979
9992
|
};
|
|
9980
9993
|
const renderDevAdvice = () => {
|
|
9981
9994
|
if (getKoliBri$1().adviceShown !== true) {
|
|
@@ -9997,6 +10010,27 @@ if (processEnv === 'test') {
|
|
|
9997
10010
|
nonce = () => 'nonce';
|
|
9998
10011
|
}
|
|
9999
10012
|
|
|
10013
|
+
let KolAlertTag = 'kol-alert';
|
|
10014
|
+
let KolAlertWcTag = 'kol-alert-wc';
|
|
10015
|
+
let KolAvatarWcTag = 'kol-avatar-wc';
|
|
10016
|
+
let KolBadgeTag = 'kol-badge';
|
|
10017
|
+
let KolButtonTag = 'kol-button';
|
|
10018
|
+
let KolButtonWcTag = 'kol-button-wc';
|
|
10019
|
+
let KolButtonGroupWcTag = 'kol-button-group-wc';
|
|
10020
|
+
let KolHeadingWcTag = 'kol-heading-wc';
|
|
10021
|
+
let KolIconTag = 'kol-icon';
|
|
10022
|
+
let KolIndentedTextTag = 'kol-indented-text';
|
|
10023
|
+
let KolInputTag = 'kol-input';
|
|
10024
|
+
let KolLinkTag = 'kol-link';
|
|
10025
|
+
let KolLinkWcTag = 'kol-link-wc';
|
|
10026
|
+
let KolPaginationTag = 'kol-pagination';
|
|
10027
|
+
let KolSelectTag = 'kol-select';
|
|
10028
|
+
let KolSpanWcTag = 'kol-span-wc';
|
|
10029
|
+
let KolToastContainerTag = 'kol-toast-container';
|
|
10030
|
+
let KolTooltipWcTag = 'kol-tooltip-wc';
|
|
10031
|
+
let KolTreeItemWcTag = 'kol-tree-item-wc';
|
|
10032
|
+
let KolTreeWcTag = 'kol-tree-wc';
|
|
10033
|
+
|
|
10000
10034
|
const defaultStyleCss$K = "@layer kol-global {\n .sc-kol-abbr-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-abbr-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-abbr-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-abbr-default-h > abbr {\n cursor: help;\n }\n}";
|
|
10001
10035
|
var KolAbbrDefaultStyle0 = defaultStyleCss$K;
|
|
10002
10036
|
|
|
@@ -10012,7 +10046,7 @@ class KolAbbr {
|
|
|
10012
10046
|
};
|
|
10013
10047
|
}
|
|
10014
10048
|
render() {
|
|
10015
|
-
return (hAsync(Host, { key: '
|
|
10049
|
+
return (hAsync(Host, { key: 'c925b5b379b596db99404d6c7d4507275d70496d', class: "kol-abbr" }, hAsync("abbr", { key: 'c7a6a3482ea02fca65278aa28ea115f7a9a11f74', "aria-labelledby": this.nonce, role: "definition", tabindex: "0", title: this.state._label }, hAsync("span", { key: '7179f3b594f6815c06c46dd465739376734ea940', title: "" }, hAsync("slot", { key: '00590edd1ae4afeb4f4f066f0a16ce54c8af28a9' }))), hAsync(KolTooltipWcTag, { key: '2c44fa51a1849dabb59d0541a0d9dcc192e52bcd', _align: this.state._tooltipAlign, _id: this.nonce, _label: this.state._label })));
|
|
10016
10050
|
}
|
|
10017
10051
|
validateLabel(value) {
|
|
10018
10052
|
validateLabel(this, value, {
|
|
@@ -10092,11 +10126,11 @@ class KolAccordion {
|
|
|
10092
10126
|
};
|
|
10093
10127
|
}
|
|
10094
10128
|
render() {
|
|
10095
|
-
return (hAsync(Host, { key: '
|
|
10129
|
+
return (hAsync(Host, { key: '375071dab3f67a8a9ea41166c5e5955a905ba04a', class: "kol-accordion" }, hAsync("div", { key: '44e8a90eed884c991797ea6e0e727777075d6d00', class: {
|
|
10096
10130
|
accordion: true,
|
|
10097
10131
|
disabled: this.state._disabled === true,
|
|
10098
10132
|
open: this.state._open === true,
|
|
10099
|
-
} }, hAsync(
|
|
10133
|
+
} }, hAsync(KolHeadingWcTag, { key: '6fdf9427c74afbcc932fa05c1840e8cb6b606b9a', _label: "", _level: this.state._level, class: "accordion-heading" }, hAsync(KolButtonWcTag, { key: '4e82eb30cd0ff1fef25262dc0e34a3408b0aaad6', class: "accordion-button", ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _disabled: this.state._disabled, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { key: '0835efe279a9deb62190997682ef0e8fe4a1edf2', class: "wrapper" }, hAsync("div", { key: 'f7244e8b9807223dd80f0b261ec1e2b730f95e85', class: "animation-wrapper" }, hAsync("div", { key: '4ef5849701c39fe7f738cd34661e5c0fc9f29efc', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", { key: '324bf4086448b8c5700c98d6fa7d830846e362af' })))))));
|
|
10100
10134
|
}
|
|
10101
10135
|
validateDisabled(value) {
|
|
10102
10136
|
validateDisabled(this, value);
|
|
@@ -10170,7 +10204,7 @@ class KolAlert {
|
|
|
10170
10204
|
};
|
|
10171
10205
|
}
|
|
10172
10206
|
render() {
|
|
10173
|
-
return (hAsync(Host, { key: '
|
|
10207
|
+
return (hAsync(Host, { key: 'e521d298e8e47493ec537aad97c8d501ccab0676', class: "kol-alert" }, hAsync(KolAlertWcTag, { key: 'ed49e80a84167a1d5122c2d74e948c8899113e52', _alert: this._alert, _hasCloser: this._hasCloser, _label: this._label, _level: this._level, _on: this._on, _type: this._type, _variant: this._variant }, hAsync("slot", { key: 'd0e51952a1c60fbd7b9678d367c8022b077623b8' }))));
|
|
10174
10208
|
}
|
|
10175
10209
|
static get style() { return {
|
|
10176
10210
|
default: KolAlertDefaultStyle0
|
|
@@ -12704,7 +12738,7 @@ if (processEnv === 'test') {
|
|
|
12704
12738
|
}
|
|
12705
12739
|
|
|
12706
12740
|
const Icon = (props) => {
|
|
12707
|
-
return hAsync(
|
|
12741
|
+
return hAsync(KolIconTag, { class: "heading-icon", _label: typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel, _icons: props.icon });
|
|
12708
12742
|
};
|
|
12709
12743
|
const AlertIcon = (props) => {
|
|
12710
12744
|
switch (props.type) {
|
|
@@ -12757,13 +12791,13 @@ class KolAlertWc {
|
|
|
12757
12791
|
this.validateAlert(false);
|
|
12758
12792
|
}, 10000);
|
|
12759
12793
|
}
|
|
12760
|
-
return (hAsync(Host, { key: '
|
|
12794
|
+
return (hAsync(Host, { key: '056ebeba8b0ebc0d76a98e3855a0022e1c689e09', class: {
|
|
12761
12795
|
'kol-alert-wc': true,
|
|
12762
12796
|
alert: true,
|
|
12763
12797
|
[this.state._type]: true,
|
|
12764
12798
|
[this.state._variant]: true,
|
|
12765
12799
|
hasCloser: !!this.state._hasCloser,
|
|
12766
|
-
}, role: this.state._alert ? 'alert' : undefined }, hAsync("div", { key: '
|
|
12800
|
+
}, role: this.state._alert ? 'alert' : undefined }, hAsync("div", { key: 'e2807b51c729dc7814aa46bc40f371d9b785b590', class: "heading" }, hAsync(AlertIcon, { key: '207367acb5c59e0977feb68adefb0a7cdb0f4668', label: this.state._label, type: this.state._type }), hAsync("div", { key: '1d9b3c352e84393eb31fbd056a6aa9ec639d13cd', class: "heading-content" }, typeof this.state._label === 'string' && ((_a = this.state._label) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync(KolHeadingWcTag, { _label: this.state._label, _level: this.state._level })), this.state._variant === 'msg' && (hAsync("div", { class: "content" }, hAsync("slot", null)))), this.state._hasCloser && (hAsync(KolButtonWcTag, { class: "close", _hideLabel: true, _icons: {
|
|
12767
12801
|
left: {
|
|
12768
12802
|
icon: 'codicon codicon-close',
|
|
12769
12803
|
},
|
|
@@ -12831,7 +12865,7 @@ class KolAlertWc {
|
|
|
12831
12865
|
}; }
|
|
12832
12866
|
}
|
|
12833
12867
|
|
|
12834
|
-
const defaultStyleCss$H = "@layer kol-global {\n .sc-kol-avatar-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-avatar-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-avatar-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-avatar-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .container {\n border-radius: 50%;\n overflow: hidden;\n \n outline: transparent solid 1px;\n \n width: 100px;\n height: 100px;\n }\n .image {\n width: 100%;\n height: 100%;\n }\n .initials {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n \n background: #d3d3d3;\n font-size:
|
|
12868
|
+
const defaultStyleCss$H = "@layer kol-global {\n .sc-kol-avatar-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-avatar-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-avatar-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-avatar-default-h {\n display: block;\n }\n}\n@layer kol-component {\n .container {\n border-radius: 50%;\n overflow: hidden;\n \n outline: transparent solid 1px;\n \n width: 100px;\n height: 100px;\n }\n .image {\n width: 100%;\n height: 100%;\n }\n .initials {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n \n background: #d3d3d3;\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n}";
|
|
12835
12869
|
var KolAvatarDefaultStyle0 = defaultStyleCss$H;
|
|
12836
12870
|
|
|
12837
12871
|
class KolAvatar {
|
|
@@ -12841,7 +12875,7 @@ class KolAvatar {
|
|
|
12841
12875
|
this._label = undefined;
|
|
12842
12876
|
}
|
|
12843
12877
|
render() {
|
|
12844
|
-
return (hAsync(Host, { key: '
|
|
12878
|
+
return (hAsync(Host, { key: '0df334a0e4d8d0293355420ed5c36dbbcf2d8d6c', class: "kol-avatar" }, hAsync(KolAvatarWcTag, { key: '31e4127b2530c95b357e181df773df114a2b74a5', _src: this._src, _label: this._label })));
|
|
12845
12879
|
}
|
|
12846
12880
|
static get style() { return {
|
|
12847
12881
|
default: KolAvatarDefaultStyle0
|
|
@@ -12945,16 +12979,16 @@ class KolBadge {
|
|
|
12945
12979
|
};
|
|
12946
12980
|
}
|
|
12947
12981
|
renderSmartButton(props) {
|
|
12948
|
-
return (hAsync(
|
|
12982
|
+
return (hAsync(KolButtonWcTag, { _ariaControls: this.id, _customClass: props._customClass, _disabled: props._disabled, _hideLabel: true, _icons: props._icons, _id: props._id, _label: props._label, _on: props._on, _tooltipAlign: props._tooltipAlign, _variant: props._variant }));
|
|
12949
12983
|
}
|
|
12950
12984
|
render() {
|
|
12951
12985
|
const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null;
|
|
12952
|
-
return (hAsync(Host, { key: '
|
|
12986
|
+
return (hAsync(Host, { key: '53553ba5c140ed0317b07f3614c178a06f48b5f6', class: "kol-badge" }, hAsync("span", { key: 'eb2dd60af4f8c1a3db15d91b9419434917d0cecd', class: {
|
|
12953
12987
|
'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
|
|
12954
12988
|
}, style: {
|
|
12955
12989
|
backgroundColor: this.bgColorStr,
|
|
12956
12990
|
color: this.colorStr,
|
|
12957
|
-
} }, hAsync(
|
|
12991
|
+
} }, hAsync(KolSpanWcTag, { key: '00a6f9b5dfb4c4402505c61d7a318e58a67982f9', id: hasSmartButton ? this.id : undefined, _allowMarkdown: true, _icons: this._icons, _label: this._label }), hasSmartButton && this.renderSmartButton(this.state._smartButton))));
|
|
12958
12992
|
}
|
|
12959
12993
|
validateColor(value) {
|
|
12960
12994
|
validateColor(this, value, {
|
|
@@ -13027,7 +13061,7 @@ class KolBreadcrumb {
|
|
|
13027
13061
|
registerInstance(this, hostRef);
|
|
13028
13062
|
this.renderLink = (link, index) => {
|
|
13029
13063
|
const lastIndex = this.state._links.length - 1;
|
|
13030
|
-
return (hAsync("li", { key: index }, index !== 0 && hAsync(
|
|
13064
|
+
return (hAsync("li", { key: index }, index !== 0 && hAsync(KolIconTag, { _label: "", _icons: "codicon codicon-chevron-right" }), index === lastIndex ? (hAsync("span", null, link._hideLabel ? (hAsync(KolIconTag, { _label: link._label, _icons: typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event' })) : (hAsync(Fragment, null, link._label)))) : (hAsync(KolLinkTag, Object.assign({}, link)))));
|
|
13031
13065
|
};
|
|
13032
13066
|
this._label = undefined;
|
|
13033
13067
|
this._links = undefined;
|
|
@@ -13037,7 +13071,7 @@ class KolBreadcrumb {
|
|
|
13037
13071
|
};
|
|
13038
13072
|
}
|
|
13039
13073
|
render() {
|
|
13040
|
-
return (hAsync(Host, { key: '
|
|
13074
|
+
return (hAsync(Host, { key: '8207d01dbede825fd138abd0f162601a2a614073', class: "kol-breadcrumb" }, hAsync("nav", { key: '4e88e8fbfa6c1d992f5a2774a150abf0f62fb201', "aria-label": this.state._label }, hAsync("ul", { key: '965b241c1bdab7d6fd533b8624701aa3a18e2ad5' }, this.state._links.length === 0 && (hAsync("li", null, hAsync(KolIconTag, { _label: "", _icons: "codicon codicon-home" }), "\u2026")), this.state._links.map(this.renderLink)))));
|
|
13041
13075
|
}
|
|
13042
13076
|
validateLabel(value, _oldValue, initial = false) {
|
|
13043
13077
|
if (!initial) {
|
|
@@ -13113,11 +13147,11 @@ class KolButton {
|
|
|
13113
13147
|
return this._value;
|
|
13114
13148
|
}
|
|
13115
13149
|
render() {
|
|
13116
|
-
return (hAsync(Host, { key: '
|
|
13150
|
+
return (hAsync(Host, { key: '67fdae48e99dbeff6328fcc24853e293a249d3e1', class: "kol-button" }, hAsync(KolButtonWcTag, { key: '2ecce25536995648275992c63f5dd953e8bcf034', ref: this.catchRef, class: {
|
|
13117
13151
|
button: true,
|
|
13118
13152
|
[this._variant]: this._variant !== 'custom',
|
|
13119
13153
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
13120
|
-
}, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: '
|
|
13154
|
+
}, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _hideLabel: this._hideLabel, _icons: this._icons, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }, hAsync("slot", { key: 'cf135329e77904298eab357d91d14f4a2083f0c8', name: "expert", slot: "expert" }))));
|
|
13121
13155
|
}
|
|
13122
13156
|
get host() { return getElement(this); }
|
|
13123
13157
|
static get style() { return {
|
|
@@ -13162,7 +13196,7 @@ class KolButtonGroup {
|
|
|
13162
13196
|
registerInstance(this, hostRef);
|
|
13163
13197
|
}
|
|
13164
13198
|
render() {
|
|
13165
|
-
return (hAsync(Host, { key: '
|
|
13199
|
+
return (hAsync(Host, { key: '7822a4906cddb538912fb5dc9ab78e5f8ff571a1', class: "kol-button-group" }, hAsync(KolButtonGroupWcTag, { key: '4acc5421feeaba4738090429852cb7dedca67e5e' }, hAsync("slot", { key: 'c7514820bb0933ed067c979c06077f6957396f7b' }))));
|
|
13166
13200
|
}
|
|
13167
13201
|
static get style() { return {
|
|
13168
13202
|
default: KolButtonGroupDefaultStyle0
|
|
@@ -13228,7 +13262,7 @@ class KolButtonLink {
|
|
|
13228
13262
|
return this._value;
|
|
13229
13263
|
}
|
|
13230
13264
|
render() {
|
|
13231
|
-
return (hAsync(Host, { key: '
|
|
13265
|
+
return (hAsync(Host, { key: '81dd5ca6f4756ef3a97184dff6a36f19e75a3682', class: "kol-button-link" }, hAsync(KolButtonWcTag, { key: '8333cafecd10ff34bb401dd4d2fb28c52d07a84d', ref: this.catchRef, _accessKey: this._accessKey, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _id: this._id, _label: this._label, _name: this._name, _on: this._on, _role: "link", _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value }, hAsync("slot", { key: '097b08bd7bfe43f999db5e73b176b423d270b0fe', name: "expert", slot: "expert" }))));
|
|
13232
13266
|
}
|
|
13233
13267
|
get host() { return getElement(this); }
|
|
13234
13268
|
static get style() { return {
|
|
@@ -13530,13 +13564,13 @@ class AssociatedInputController {
|
|
|
13530
13564
|
class KolButtonWc {
|
|
13531
13565
|
render() {
|
|
13532
13566
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
13533
|
-
return (hAsync(Host, { key: '
|
|
13567
|
+
return (hAsync(Host, { key: 'dd5a9e3afb3250b04a4a2d012ca2885736d234e4', class: "kol-button-wc" }, hAsync("button", Object.assign({ key: '9d985bf2bd663f8039ad7805ab81816c08abcd45', ref: this.catchRef, accessKey: this.state._accessKey || undefined, "aria-controls": this.state._ariaControls, "aria-expanded": mapBoolean2String(this.state._ariaExpanded), "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-selected": mapStringOrBoolean2String(this.state._ariaSelected), class: {
|
|
13534
13568
|
button: true,
|
|
13535
13569
|
disabled: this.state._disabled === true,
|
|
13536
13570
|
[this.state._variant]: this.state._variant !== 'custom',
|
|
13537
13571
|
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && this.state._customClass.length > 0,
|
|
13538
13572
|
'hide-label': this.state._hideLabel === true,
|
|
13539
|
-
}, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync(
|
|
13573
|
+
}, disabled: this.state._disabled, id: this.state._id, name: this.state._name }, this.state._on, { onClick: this.onClick, role: this.state._role, tabIndex: this.state._tabIndex, type: this.state._type }), hAsync(KolSpanWcTag, { key: '2d1ac0b37da70e0fc2ec049a1c6bf835fededa56', class: "button-inner", _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label }, hAsync("slot", { key: 'fc4422ac22bb63edb8ba2ecf768802392854b882', name: "expert", slot: "expert" }))), hAsync(KolTooltipWcTag, { key: '0228c4d7ecbeb88dcd16e244e5bc4e9b9becf1b0', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this._accessKey, _align: this.state._tooltipAlign, _label: typeof this.state._label === 'string' ? this.state._label : '' })));
|
|
13540
13574
|
}
|
|
13541
13575
|
constructor(hostRef) {
|
|
13542
13576
|
registerInstance(this, hostRef);
|
|
@@ -13755,7 +13789,7 @@ class KolCard {
|
|
|
13755
13789
|
};
|
|
13756
13790
|
}
|
|
13757
13791
|
render() {
|
|
13758
|
-
return (hAsync(Host, { key: '
|
|
13792
|
+
return (hAsync(Host, { key: '3a58c3891d1edac983aa496b5edac9ec3aa8e2b4', class: "kol-card" }, hAsync("div", { key: '50bc445f86ca4c282600b7351bfbff4539c0decd', class: "card" }, hAsync("div", { key: '9e5d76560aead613b5fea37975e5bc43592808c5', class: "header" }, hAsync(KolHeadingWcTag, { key: '278917cdfa2ed7b7034f0572796c149bb7fb8197', _label: this.state._label, _level: this.state._level })), hAsync("div", { key: '37c5183d5efcdc6b948f0baa1ab892ad4df07558', class: "content" }, hAsync("slot", { key: '3d57f3d4911c7b7c5983a9b296e1bfee73a10f8b' })), this.state._hasCloser && (hAsync(KolButtonWcTag, { class: "close", _hideLabel: true, _icons: {
|
|
13759
13793
|
left: {
|
|
13760
13794
|
icon: 'codicon codicon-close',
|
|
13761
13795
|
},
|
|
@@ -13918,10 +13952,10 @@ class KolDetails {
|
|
|
13918
13952
|
};
|
|
13919
13953
|
}
|
|
13920
13954
|
render() {
|
|
13921
|
-
return (hAsync(Host, { key: '
|
|
13955
|
+
return (hAsync(Host, { key: 'cda9e87d6f6a6a7803fd921180faf7a973f232b9', class: "kol-details" }, hAsync("details", { key: 'f2b66dfeda3759ec143d6fcf6fccd26189dd3580', ref: this.catchDetails, class: {
|
|
13922
13956
|
disabled: this.state._disabled === true,
|
|
13923
13957
|
open: this.state._open === true,
|
|
13924
|
-
}, onToggle: this.handleToggle }, hAsync("summary", { key: '
|
|
13958
|
+
}, onToggle: this.handleToggle }, hAsync("summary", { key: '8e0742051d3344cab3e790915c974919c8ce2a4a', ref: this.catchSummary, "aria-disabled": this.state._disabled ? 'true' : undefined, onClick: this.preventToggleIfDisabled, onKeyPress: this.preventToggleIfDisabled, tabIndex: this.state._disabled ? -1 : undefined }, hAsync(KolIconTag, { key: '39775945cdfbfc846138121bac62fc6f9e3a69dd', _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", { key: 'f990cbbe0104f5ae5d92cb81b24df94253e245c4' }, this.state._label)), hAsync("div", { key: 'd753895b96f482f7a8248f1fc41ac00359534444', "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync(KolIndentedTextTag, { key: '6394a852168af08b09f3912245161332f2257af6' }, hAsync("slot", { key: '24dd7a5270024763791410594a0ccc9030781e20' }))))));
|
|
13925
13959
|
}
|
|
13926
13960
|
validateDisabled(value) {
|
|
13927
13961
|
validateDisabled(this, value);
|
|
@@ -14016,10 +14050,19 @@ class KolForm {
|
|
|
14016
14050
|
this.state = {};
|
|
14017
14051
|
}
|
|
14018
14052
|
render() {
|
|
14019
|
-
return (hAsync(Host, { key: '
|
|
14053
|
+
return (hAsync(Host, { key: '65d715836bb74ba26265a82596c68938518f1bd6', class: "kol-form" }, this._errorList && this._errorList.length > 0 && (hAsync(KolAlertTag, { _type: "error" }, translate('kol-error-list-message'), hAsync("nav", { "aria-label": translate('kol-error-list') }, hAsync("ul", null, this._errorList.map((error, index) => (hAsync("li", { key: index }, hAsync(KolLinkTag, { _href: error.selector, _label: error.message, _on: { onClick: this.handleLinkClick }, ref: (el) => {
|
|
14020
14054
|
if (index === 0)
|
|
14021
14055
|
this.errorListElement = el;
|
|
14022
|
-
} })))))))), this.state._requiredText === true ? (hAsync("p", null, hAsync(
|
|
14056
|
+
} })))))))), hAsync("form", { key: '47ab1f7b0e6ab78c81d63e073b9cde8baf007f39', method: "post", onSubmit: this.onSubmit, onReset: this.onReset, autoComplete: "off", noValidate: true }, this.state._requiredText === true ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, translate('kol-form-description')))) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (hAsync("p", null, hAsync(KolIndentedTextTag, null, this.state._requiredText))) : null, hAsync("slot", { key: '235d3db4100f7f872803573a909f11c137f4504c' }))));
|
|
14057
|
+
}
|
|
14058
|
+
async focusErrorList() {
|
|
14059
|
+
setTimeout(() => {
|
|
14060
|
+
var _a;
|
|
14061
|
+
if (this._errorList && this._errorList.length > 0) {
|
|
14062
|
+
(_a = this.errorListElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
14063
|
+
}
|
|
14064
|
+
}, 300);
|
|
14065
|
+
return Promise.resolve();
|
|
14023
14066
|
}
|
|
14024
14067
|
validateOn(value) {
|
|
14025
14068
|
if (typeof value === 'object' && value !== null) {
|
|
@@ -14042,12 +14085,6 @@ class KolForm {
|
|
|
14042
14085
|
this.validateRequiredText(this._requiredText);
|
|
14043
14086
|
this.validateErrorList(this._errorList);
|
|
14044
14087
|
}
|
|
14045
|
-
componentDidRender() {
|
|
14046
|
-
var _a;
|
|
14047
|
-
if (this._errorList && this._errorList.length > 0) {
|
|
14048
|
-
(_a = this.errorListElement) === null || _a === void 0 ? void 0 : _a.focus();
|
|
14049
|
-
}
|
|
14050
|
-
}
|
|
14051
14088
|
static get watchers() { return {
|
|
14052
14089
|
"_on": ["validateOn"],
|
|
14053
14090
|
"_requiredText": ["validateRequiredText"],
|
|
@@ -14060,7 +14097,8 @@ class KolForm {
|
|
|
14060
14097
|
"_on": [16],
|
|
14061
14098
|
"_requiredText": [8, "_required-text"],
|
|
14062
14099
|
"_errorList": [16],
|
|
14063
|
-
"state": [32]
|
|
14100
|
+
"state": [32],
|
|
14101
|
+
"focusErrorList": [64]
|
|
14064
14102
|
},
|
|
14065
14103
|
"$listeners$": undefined,
|
|
14066
14104
|
"$lazyBundleId$": "-",
|
|
@@ -14080,7 +14118,7 @@ class KolHeading {
|
|
|
14080
14118
|
this._variant = undefined;
|
|
14081
14119
|
}
|
|
14082
14120
|
render() {
|
|
14083
|
-
return (hAsync(
|
|
14121
|
+
return (hAsync(KolHeadingWcTag, { key: '8685c39e6bfc5bb7d6885e43112d9742cc539a6e', _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline, _variant: this._variant, class: "kol-heading" }, hAsync("slot", { key: '5fcf1c3ade332ba647c330985ee459a0f8e89421', name: "expert", slot: "expert" })));
|
|
14084
14122
|
}
|
|
14085
14123
|
static get style() { return {
|
|
14086
14124
|
default: KolHeadingDefaultStyle0
|
|
@@ -14333,10 +14371,12 @@ class KolIndentedText {
|
|
|
14333
14371
|
}; }
|
|
14334
14372
|
}
|
|
14335
14373
|
|
|
14336
|
-
|
|
14374
|
+
function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
|
|
14375
|
+
|
|
14376
|
+
const FormFieldMsg = ({ _alert, _msg, _hideError, _id }) => (hAsync(KolAlertWcTag, Object.assign({ "aria-hidden": "true", id: `${_id}-error`, _alert: _alert, _type: "error", class: {
|
|
14337
14377
|
error: true,
|
|
14338
14378
|
'visually-hidden': _hideError === true,
|
|
14339
|
-
} },
|
|
14379
|
+
} }, _msg), (_msg === null || _msg === void 0 ? void 0 : _msg._description) || undefined));
|
|
14340
14380
|
|
|
14341
14381
|
class KolInput {
|
|
14342
14382
|
constructor(hostRef) {
|
|
@@ -14349,7 +14389,6 @@ class KolInput {
|
|
|
14349
14389
|
this._alert = true;
|
|
14350
14390
|
this._currentLength = undefined;
|
|
14351
14391
|
this._disabled = false;
|
|
14352
|
-
this._error = '';
|
|
14353
14392
|
this._hasCounter = false;
|
|
14354
14393
|
this._hideError = false;
|
|
14355
14394
|
this._hideLabel = false;
|
|
@@ -14358,6 +14397,7 @@ class KolInput {
|
|
|
14358
14397
|
this._id = undefined;
|
|
14359
14398
|
this._label = undefined;
|
|
14360
14399
|
this._maxLength = undefined;
|
|
14400
|
+
this._msg = undefined;
|
|
14361
14401
|
this._readOnly = false;
|
|
14362
14402
|
this._renderNoLabel = false;
|
|
14363
14403
|
this._required = false;
|
|
@@ -14374,24 +14414,37 @@ class KolInput {
|
|
|
14374
14414
|
return icon && typeof icon === 'object' && icon.style ? icon.style : {};
|
|
14375
14415
|
}
|
|
14376
14416
|
render() {
|
|
14377
|
-
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
14378
|
-
const
|
|
14417
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
14418
|
+
const isMessageValidError = Boolean(((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type) === 'error' && this._msg._description && ((_b = this._msg._description) === null || _b === void 0 ? void 0 : _b.length) > 0);
|
|
14419
|
+
const hasError = !this._readOnly && isMessageValidError && this._touched === true;
|
|
14420
|
+
const showFormFieldMsg = Boolean(hasError || (((_c = this._msg) === null || _c === void 0 ? void 0 : _c._type) !== 'error' && ((_d = this._msg) === null || _d === void 0 ? void 0 : _d._description)));
|
|
14379
14421
|
const hasExpertSlot = showExpertSlot(this._label);
|
|
14380
14422
|
const hasHint = typeof this._hint === 'string' && this._hint.length > 0;
|
|
14381
14423
|
const useTooltopInsteadOfLabel = !hasExpertSlot && this._hideLabel;
|
|
14382
|
-
return (hAsync(Host, { key: '
|
|
14383
|
-
'kol-input': true,
|
|
14424
|
+
return (hAsync(Host, { key: 'acb6294dbb3bb30298be633a4728d890d24c6dc7', class: clsx('kol-input', this.getModifierClassNameByMsgType(), {
|
|
14384
14425
|
disabled: this._disabled === true,
|
|
14385
14426
|
error: hasError === true,
|
|
14386
14427
|
'read-only': this._readOnly === true,
|
|
14387
14428
|
required: this._required === true,
|
|
14388
14429
|
touched: this._touched === true,
|
|
14389
14430
|
'hidden-error': this._hideError === true,
|
|
14390
|
-
} }, hAsync("label", { key: '
|
|
14431
|
+
}) }, hAsync("label", { key: '356dbae7d6b7b02202e1020131dc7e8bb70a69c2', class: "input-label", id: !useTooltopInsteadOfLabel ? `${this._id}-label` : undefined, hidden: useTooltopInsteadOfLabel, htmlFor: this._id }, hAsync("span", { key: 'c5ee06729ca4bb5c1458085068ac6a64fcfeae1a', class: "input-label-span" }, hAsync("slot", { key: '146aeb9bef32ebc54b1fcbf282841d7d44fd5730', name: "label" }))), hasHint && (hAsync("span", { class: "hint", id: `${this._id}-hint` }, this._hint)), hAsync("div", { key: '755e40c1da91b382387ddea16935235e793fff1b', class: {
|
|
14391
14432
|
input: true,
|
|
14392
|
-
'icon-left': typeof ((
|
|
14393
|
-
'icon-right': typeof ((
|
|
14394
|
-
} }, ((
|
|
14433
|
+
'icon-left': typeof ((_e = this._icons) === null || _e === void 0 ? void 0 : _e.left) === 'object',
|
|
14434
|
+
'icon-right': typeof ((_f = this._icons) === null || _f === void 0 ? void 0 : _f.right) === 'object',
|
|
14435
|
+
} }, ((_g = this._icons) === null || _g === void 0 ? void 0 : _g.left) && (hAsync(KolIconTag, { _label: "", _icons: ((_h = this._icons) === null || _h === void 0 ? void 0 : _h.left).icon, style: this.getIconStyles((_j = this._icons) === null || _j === void 0 ? void 0 : _j.left) })), hAsync("div", { key: '49c2557719125b83a696987ee88ec72a254b5077', ref: this.catchInputSlot, id: this.slotName, class: "input-slot" }), typeof this._smartButton === 'object' && this._smartButton !== null && (hAsync(KolButtonWcTag, { _customClass: this._smartButton._customClass, _disabled: this._smartButton._disabled, _icons: this._smartButton._icons, _hideLabel: true, _id: this._smartButton._id, _label: this._smartButton._label, _on: this._smartButton._on, _tooltipAlign: this._smartButton._tooltipAlign, _variant: this._smartButton._variant })), ((_k = this._icons) === null || _k === void 0 ? void 0 : _k.right) && (hAsync(KolIconTag, { _label: "", _icons: ((_l = this._icons) === null || _l === void 0 ? void 0 : _l.right).icon, style: this.getIconStyles((_m = this._icons) === null || _m === void 0 ? void 0 : _m.right) }))), useTooltopInsteadOfLabel && (hAsync(KolTooltipWcTag, { "aria-hidden": "true", class: "input-tooltip", _accessKey: this._accessKey, _align: this._tooltipAlign, _id: this._hideLabel ? `${this._id}-label` : undefined, _label: this._label })), showFormFieldMsg && hAsync(FormFieldMsg, { _alert: this._alert, _hideError: this._hideError, _msg: this._msg, _id: this._id }), Array.isArray(this._suggestions) && this._suggestions.length > 0 && (hAsync("datalist", { id: `${this._id}-list` }, this._suggestions.map((option) => (hAsync("option", { value: option }))))), this._hasCounter && (hAsync("span", { class: "counter", "aria-atomic": "true", "aria-live": "polite" }, this._currentLength, this._maxLength && (hAsync(Fragment, null, hAsync("span", { "aria-label": translate('kol-of'), role: "img" }, "/"), this._maxLength)), ' ', hAsync("span", null, translate('kol-characters'))))));
|
|
14436
|
+
}
|
|
14437
|
+
getModifierClassNameByMsgType() {
|
|
14438
|
+
var _a, _b;
|
|
14439
|
+
if ((_a = this._msg) === null || _a === void 0 ? void 0 : _a._type) {
|
|
14440
|
+
return {
|
|
14441
|
+
default: 'msg-type-default',
|
|
14442
|
+
info: 'msg-type-info',
|
|
14443
|
+
success: 'msg-type-success',
|
|
14444
|
+
warning: 'msg-type-warning',
|
|
14445
|
+
error: 'msg-type-error',
|
|
14446
|
+
}[(_b = this._msg) === null || _b === void 0 ? void 0 : _b._type];
|
|
14447
|
+
}
|
|
14395
14448
|
}
|
|
14396
14449
|
get host() { return getElement(this); }
|
|
14397
14450
|
static get cmpMeta() { return {
|
|
@@ -14402,7 +14455,6 @@ class KolInput {
|
|
|
14402
14455
|
"_alert": [4],
|
|
14403
14456
|
"_currentLength": [2, "_current-length"],
|
|
14404
14457
|
"_disabled": [4],
|
|
14405
|
-
"_error": [1],
|
|
14406
14458
|
"_hasCounter": [4, "_has-counter"],
|
|
14407
14459
|
"_hideError": [4, "_hide-error"],
|
|
14408
14460
|
"_hideLabel": [4, "_hide-label"],
|
|
@@ -14411,6 +14463,7 @@ class KolInput {
|
|
|
14411
14463
|
"_id": [1],
|
|
14412
14464
|
"_label": [1],
|
|
14413
14465
|
"_maxLength": [2, "_max-length"],
|
|
14466
|
+
"_msg": [16],
|
|
14414
14467
|
"_readOnly": [4, "_read-only"],
|
|
14415
14468
|
"_renderNoLabel": [4, "_render-no-label"],
|
|
14416
14469
|
"_required": [4],
|
|
@@ -14427,7 +14480,9 @@ class KolInput {
|
|
|
14427
14480
|
}
|
|
14428
14481
|
|
|
14429
14482
|
const getRenderStates = (state) => {
|
|
14430
|
-
|
|
14483
|
+
var _a, _b;
|
|
14484
|
+
const isMessageValidError = Boolean(((_a = state._msg) === null || _a === void 0 ? void 0 : _a._type) === 'error' && state._msg._description && ((_b = state._msg._description) === null || _b === void 0 ? void 0 : _b.length) > 0);
|
|
14485
|
+
const hasError = isMessageValidError && state._touched === true;
|
|
14431
14486
|
const hasHint = typeof state._hint === 'string' && state._hint.length > 0;
|
|
14432
14487
|
const ariaDescribedBy = [];
|
|
14433
14488
|
if (hasError === true) {
|
|
@@ -14499,7 +14554,13 @@ class InputController extends ControlledInputController {
|
|
|
14499
14554
|
}
|
|
14500
14555
|
}
|
|
14501
14556
|
validateError(value) {
|
|
14502
|
-
|
|
14557
|
+
const message = value
|
|
14558
|
+
? {
|
|
14559
|
+
_description: value,
|
|
14560
|
+
_type: 'error',
|
|
14561
|
+
}
|
|
14562
|
+
: undefined;
|
|
14563
|
+
this.validateMsg(message);
|
|
14503
14564
|
}
|
|
14504
14565
|
validateHideError(value) {
|
|
14505
14566
|
validateHideError(this.component, value, {
|
|
@@ -14544,6 +14605,9 @@ class InputController extends ControlledInputController {
|
|
|
14544
14605
|
required: true,
|
|
14545
14606
|
});
|
|
14546
14607
|
}
|
|
14608
|
+
validateMsg(value) {
|
|
14609
|
+
validateMsg(this.component, value);
|
|
14610
|
+
}
|
|
14547
14611
|
validateOn(value) {
|
|
14548
14612
|
if (typeof value === 'object') {
|
|
14549
14613
|
setState(this.component, '_on', value);
|
|
@@ -14567,6 +14631,7 @@ class InputController extends ControlledInputController {
|
|
|
14567
14631
|
this.validateAccessKey(this.component._accessKey);
|
|
14568
14632
|
this.validateAdjustHeight(this.component._adjustHeight);
|
|
14569
14633
|
this.validateError(this.component._error);
|
|
14634
|
+
this.validateMsg(this.component._msg);
|
|
14570
14635
|
this.validateDisabled(this.component._disabled);
|
|
14571
14636
|
this.validateHideError(this.component._hideError);
|
|
14572
14637
|
this.validateHideLabel(this.component._hideLabel);
|
|
@@ -14650,26 +14715,11 @@ class InputRadioController extends InputCheckboxRadioController {
|
|
|
14650
14715
|
super(component, name, host);
|
|
14651
14716
|
this.keyOptionMap = new Map();
|
|
14652
14717
|
this.getOptionByKey = (key) => this.keyOptionMap.get(key);
|
|
14653
|
-
this.isValueInOptions = (value, options) => {
|
|
14654
|
-
return options.find((option) => option.value === value) !== undefined;
|
|
14655
|
-
};
|
|
14656
14718
|
this.afterPatchOptions = (value, _state, _component, key) => {
|
|
14657
14719
|
if (key === '_value') {
|
|
14658
14720
|
this.setFormAssociatedValue(value);
|
|
14659
14721
|
}
|
|
14660
14722
|
};
|
|
14661
|
-
this.beforePatchOptions = (_value, nextState) => {
|
|
14662
|
-
const options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;
|
|
14663
|
-
if (Array.isArray(options) && options.length > 0) {
|
|
14664
|
-
this.keyOptionMap.clear();
|
|
14665
|
-
fillKeyOptionMap(this.keyOptionMap, options);
|
|
14666
|
-
const value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;
|
|
14667
|
-
if (this.isValueInOptions(value, options) === false) {
|
|
14668
|
-
nextState.set('_value', options[0].value);
|
|
14669
|
-
this.onStateChange();
|
|
14670
|
-
}
|
|
14671
|
-
}
|
|
14672
|
-
};
|
|
14673
14723
|
this.component = component;
|
|
14674
14724
|
}
|
|
14675
14725
|
validateOrientation(value) {
|
|
@@ -14681,7 +14731,6 @@ class InputRadioController extends InputCheckboxRadioController {
|
|
|
14681
14731
|
validateOptions(this.component, value, {
|
|
14682
14732
|
hooks: {
|
|
14683
14733
|
afterPatch: this.afterPatchOptions,
|
|
14684
|
-
beforePatch: this.beforePatchOptions,
|
|
14685
14734
|
},
|
|
14686
14735
|
});
|
|
14687
14736
|
}
|
|
@@ -14690,19 +14739,10 @@ class InputRadioController extends InputCheckboxRadioController {
|
|
|
14690
14739
|
value = Array.isArray(value) ? value[0] : value;
|
|
14691
14740
|
setState(this.component, '_value', value, {
|
|
14692
14741
|
afterPatch: this.afterPatchOptions,
|
|
14693
|
-
beforePatch: this.beforePatchOptions,
|
|
14694
14742
|
});
|
|
14695
14743
|
}
|
|
14696
|
-
componentWillLoad(
|
|
14744
|
+
componentWillLoad() {
|
|
14697
14745
|
super.componentWillLoad();
|
|
14698
|
-
this.onStateChange = () => {
|
|
14699
|
-
if (typeof onChange === 'function') {
|
|
14700
|
-
const timeout = setTimeout(() => {
|
|
14701
|
-
clearTimeout(timeout);
|
|
14702
|
-
onChange(STATE_CHANGE_EVENT);
|
|
14703
|
-
});
|
|
14704
|
-
}
|
|
14705
|
-
};
|
|
14706
14746
|
this.validateOrientation(this.component._orientation);
|
|
14707
14747
|
this.validateOptions(this.component._options);
|
|
14708
14748
|
this.validateValue(this.component._value);
|
|
@@ -14757,7 +14797,7 @@ class InputCheckboxController extends InputCheckboxRadioController {
|
|
|
14757
14797
|
}
|
|
14758
14798
|
}
|
|
14759
14799
|
|
|
14760
|
-
const defaultStyleCss$v = "@layer kol-global {\n .sc-kol-input-checkbox-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-checkbox-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-checkbox-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-checkbox-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:
|
|
14800
|
+
const defaultStyleCss$v = "@layer kol-global {\n .sc-kol-input-checkbox-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-checkbox-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-checkbox-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-checkbox-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 label {\n cursor: pointer;\n }\n .kol-input {\n align-items: center;\n display: grid;\n justify-items: left;\n }\n .kol-input.default,\n .kol-input.switch {\n grid-template-columns: auto 1fr;\n }\n .kol-input .input {\n align-items: center;\n display: grid;\n order: 1;\n }\n .kol-input .input div {\n display: inline-flex;\n }\n .kol-input .input input {\n margin: 0;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert {\n grid-column: span 2;\n }\n .kol-input .kol-alert.error {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n }\n input {\n border-style: solid;\n border-width: 2px;\n line-height: 24px;\n }\n input[type=checkbox] {\n appearance: none;\n background-color: #fff;\n cursor: pointer;\n transition: 0.5s;\n }\n input[type=checkbox]:before {\n content: \"\";\n cursor: pointer;\n }\n input[type=checkbox]:disabled:before {\n cursor: not-allowed;\n }\n .kol-input.required .tooltip-content .span-label::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .button {\n display: grid;\n grid-template-columns: var(--a11y-min-size) auto;\n grid-template-areas: \"error error\" \"input label\" \"hint hint\";\n }\n .button:focus-within {\n \n cursor: inherit;\n outline-color: black;\n outline-style: solid;\n }\n .button > .error {\n grid-area: error;\n }\n .button > label {\n grid-area: label;\n }\n .button > .input {\n grid-area: input;\n }\n .button > .hint {\n grid-area: hint;\n }\n .button .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n }\n}\n@layer kol-component {\n .default .checkbox-container {\n align-items: center;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .default .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .default:not(.checked):not(.indeterminate) .icon::part(icon) {\n display: none;\n }\n .default .checkbox-input-element {\n width: 22px;\n height: 22px;\n }\n}\n@layer kol-component {\n .switch .input {\n position: relative;\n }\n .switch input[type=checkbox] {\n display: inline-block;\n height: 1.7em;\n min-width: 3.2em;\n position: relative;\n width: 3.2em;\n }\n .switch input[type=checkbox]::before {\n background-color: #000;\n height: 1.2em;\n left: calc(0.25em - 2px);\n top: calc(0.25em - 2px);\n position: absolute;\n transition: 0.5s;\n width: 1.2em;\n }\n .switch input[type=checkbox]:checked::before {\n transform: translateX(1.5em);\n }\n .switch input[type=checkbox]:indeterminate::before {\n transform: translateX(0.75em);\n }\n .switch .icon {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1.2em;\n height: 1.2em;\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 4px;\n transform: translate(0, -50%);\n transition: 0.5s;\n color: #000;\n }\n .switch.checked .icon {\n transform: translate(1.5em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(0.75em, -50%);\n }\n}\n\n@layer kol-global {\n .sc-kol-input-checkbox-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-checkbox-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-checkbox-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-checkbox-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}";
|
|
14761
14801
|
var KolInputCheckboxDefaultStyle0 = defaultStyleCss$v;
|
|
14762
14802
|
|
|
14763
14803
|
class KolInputCheckbox {
|
|
@@ -14768,13 +14808,13 @@ class KolInputCheckbox {
|
|
|
14768
14808
|
render() {
|
|
14769
14809
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
14770
14810
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
14771
|
-
return (hAsync(Host, { key: '
|
|
14811
|
+
return (hAsync(Host, { key: 'ad1a6426df92ed8ca3ee3699982a505dc8bb498c', class: "kol-input-checkbox" }, hAsync(KolInputTag, { key: '66c2024f5468c079cdc154cd5f7d474605431202', class: {
|
|
14772
14812
|
checkbox: true,
|
|
14773
14813
|
[this.state._variant]: true,
|
|
14774
14814
|
'hide-label': !!this.state._hideLabel,
|
|
14775
14815
|
checked: this.state._checked,
|
|
14776
14816
|
indeterminate: this.state._indeterminate,
|
|
14777
|
-
}, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled,
|
|
14817
|
+
}, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : 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: '3fef0f23b331c85e0608e848c166adc456863214', 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: '3d6fd9e32156f28ac46355429a77c4200ca561f2', slot: "input", class: "checkbox-container" }, hAsync(KolIconTag, { key: '218af4e65dd8a8c7affa2c4fddf79f24ed3f207a', 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: '2fd0eb060b4cf67ee95edba3ba8cb7d83e72fcaf', class: `checkbox-input-element${this.state._variant === 'button' ? ' visually-hidden' : ''}`, ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
|
|
14778
14818
|
}
|
|
14779
14819
|
constructor(hostRef) {
|
|
14780
14820
|
registerInstance(this, hostRef);
|
|
@@ -14805,6 +14845,7 @@ class KolInputCheckbox {
|
|
|
14805
14845
|
this._id = undefined;
|
|
14806
14846
|
this._indeterminate = undefined;
|
|
14807
14847
|
this._label = undefined;
|
|
14848
|
+
this._msg = undefined;
|
|
14808
14849
|
this._name = undefined;
|
|
14809
14850
|
this._on = undefined;
|
|
14810
14851
|
this._required = false;
|
|
@@ -14866,6 +14907,9 @@ class KolInputCheckbox {
|
|
|
14866
14907
|
validateLabel(value) {
|
|
14867
14908
|
this.controller.validateLabel(value);
|
|
14868
14909
|
}
|
|
14910
|
+
validateMsg(value) {
|
|
14911
|
+
this.controller.validateMsg(value);
|
|
14912
|
+
}
|
|
14869
14913
|
validateName(value) {
|
|
14870
14914
|
this.controller.validateName(value);
|
|
14871
14915
|
}
|
|
@@ -14909,6 +14953,7 @@ class KolInputCheckbox {
|
|
|
14909
14953
|
"_id": ["validateId"],
|
|
14910
14954
|
"_indeterminate": ["validateIndeterminate"],
|
|
14911
14955
|
"_label": ["validateLabel"],
|
|
14956
|
+
"_msg": ["validateMsg"],
|
|
14912
14957
|
"_name": ["validateName"],
|
|
14913
14958
|
"_on": ["validateOn"],
|
|
14914
14959
|
"_required": ["validateRequired"],
|
|
@@ -14937,6 +14982,7 @@ class KolInputCheckbox {
|
|
|
14937
14982
|
"_id": [1],
|
|
14938
14983
|
"_indeterminate": [1540],
|
|
14939
14984
|
"_label": [1],
|
|
14985
|
+
"_msg": [16],
|
|
14940
14986
|
"_name": [1],
|
|
14941
14987
|
"_on": [16],
|
|
14942
14988
|
"_required": [4],
|
|
@@ -15021,7 +15067,7 @@ class InputColorController extends InputIconController {
|
|
|
15021
15067
|
}
|
|
15022
15068
|
}
|
|
15023
15069
|
|
|
15024
|
-
const defaultStyleCss$u = "@layer kol-global {\n .sc-kol-input-color-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-color-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-color-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-color-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:
|
|
15070
|
+
const defaultStyleCss$u = "@layer kol-global {\n .sc-kol-input-color-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-color-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-color-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-color-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-color-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-color-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-color-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-color-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 div.input {\n cursor: pointer;\n }\n}";
|
|
15025
15071
|
var KolInputColorDefaultStyle0 = defaultStyleCss$u;
|
|
15026
15072
|
|
|
15027
15073
|
class KolInputColor {
|
|
@@ -15033,10 +15079,10 @@ class KolInputColor {
|
|
|
15033
15079
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15034
15080
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
15035
15081
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15036
|
-
return (hAsync(Host, { key: '
|
|
15082
|
+
return (hAsync(Host, { key: '5252dc45d3a28e5f0c90e98b0cfcb893ac854b0e', class: "kol-input-color" }, hAsync(KolInputTag, { key: 'f4a07a4e0c94ebbc7ce1b05d449366c903ee4b92', class: {
|
|
15037
15083
|
color: true,
|
|
15038
15084
|
'hide-label': !!this.state._hideLabel,
|
|
15039
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled,
|
|
15085
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _hideError: this.state._hideError, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _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: '0a4c4f562dae568f1aa18639a36d7b253ad14411', 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: '34a3f44f57bc464c61198efcdcd3cf7c4c98a624', slot: "input" }, hAsync("input", Object.assign({ key: '840bccd81c703e6c1813ecfc3a531b4487d66e18', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, name: this.state._name, slot: "input", spellcheck: "false", type: "color", value: this.state._value }, this.controller.onFacade))))));
|
|
15040
15086
|
}
|
|
15041
15087
|
constructor(hostRef) {
|
|
15042
15088
|
registerInstance(this, hostRef);
|
|
@@ -15055,6 +15101,7 @@ class KolInputColor {
|
|
|
15055
15101
|
this._icons = undefined;
|
|
15056
15102
|
this._id = undefined;
|
|
15057
15103
|
this._label = undefined;
|
|
15104
|
+
this._msg = undefined;
|
|
15058
15105
|
this._name = undefined;
|
|
15059
15106
|
this._on = undefined;
|
|
15060
15107
|
this._smartButton = undefined;
|
|
@@ -15106,6 +15153,9 @@ class KolInputColor {
|
|
|
15106
15153
|
validateLabel(value) {
|
|
15107
15154
|
this.controller.validateLabel(value);
|
|
15108
15155
|
}
|
|
15156
|
+
validateMsg(value) {
|
|
15157
|
+
this.controller.validateMsg(value);
|
|
15158
|
+
}
|
|
15109
15159
|
validateName(value) {
|
|
15110
15160
|
this.controller.validateName(value);
|
|
15111
15161
|
}
|
|
@@ -15148,6 +15198,7 @@ class KolInputColor {
|
|
|
15148
15198
|
"_icons": ["validateIcons"],
|
|
15149
15199
|
"_id": ["validateId"],
|
|
15150
15200
|
"_label": ["validateLabel"],
|
|
15201
|
+
"_msg": ["validateMsg"],
|
|
15151
15202
|
"_name": ["validateName"],
|
|
15152
15203
|
"_on": ["validateOn"],
|
|
15153
15204
|
"_smartButton": ["validateSmartButton"],
|
|
@@ -15175,6 +15226,7 @@ class KolInputColor {
|
|
|
15175
15226
|
"_icons": [1],
|
|
15176
15227
|
"_id": [1],
|
|
15177
15228
|
"_label": [1],
|
|
15229
|
+
"_msg": [16],
|
|
15178
15230
|
"_name": [1],
|
|
15179
15231
|
"_on": [16],
|
|
15180
15232
|
"_smartButton": [1, "_smart-button"],
|
|
@@ -15327,7 +15379,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
15327
15379
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
15328
15380
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
15329
15381
|
|
|
15330
|
-
const defaultStyleCss$t = "@layer kol-global {\n .sc-kol-input-date-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-date-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-date-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-date-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:
|
|
15382
|
+
const defaultStyleCss$t = "@layer kol-global {\n .sc-kol-input-date-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-date-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-date-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-date-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-date-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-date-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-date-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-date-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 .kol-input-number {\n display: block;\n }\n}";
|
|
15331
15383
|
var KolInputDateDefaultStyle0 = defaultStyleCss$t;
|
|
15332
15384
|
|
|
15333
15385
|
class KolInputDate {
|
|
@@ -15339,10 +15391,10 @@ class KolInputDate {
|
|
|
15339
15391
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15340
15392
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
15341
15393
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15342
|
-
return (hAsync(Host, { key: '
|
|
15394
|
+
return (hAsync(Host, { key: 'af62d95932f51fa92f2f1094603d08a70960f198', class: { 'kol-input-date': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'ae5b0c7ee5d6b941bfe47c04338bb45e972892d9', class: {
|
|
15343
15395
|
[this.state._type]: true,
|
|
15344
15396
|
'hide-label': !!this.state._hideLabel,
|
|
15345
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled,
|
|
15397
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: 'bfab4a51d4e0982a5e473593cf742c91c8cd6ec9', 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: 'ef2dc56e20a23eafc1cda356cb54d8bb94e2988c', slot: "input" }, hAsync("input", Object.assign({ key: 'c8bd263cb95d4687b7e7051668df26c0d855a334', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, step: this.state._step, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
|
|
15346
15398
|
}
|
|
15347
15399
|
constructor(hostRef) {
|
|
15348
15400
|
registerInstance(this, hostRef);
|
|
@@ -15374,6 +15426,7 @@ class KolInputDate {
|
|
|
15374
15426
|
this._label = undefined;
|
|
15375
15427
|
this._max = undefined;
|
|
15376
15428
|
this._min = undefined;
|
|
15429
|
+
this._msg = undefined;
|
|
15377
15430
|
this._name = undefined;
|
|
15378
15431
|
this._on = undefined;
|
|
15379
15432
|
this._readOnly = false;
|
|
@@ -15437,6 +15490,9 @@ class KolInputDate {
|
|
|
15437
15490
|
validateMin(value) {
|
|
15438
15491
|
this.controller.validateMin(value);
|
|
15439
15492
|
}
|
|
15493
|
+
validateMsg(value) {
|
|
15494
|
+
this.controller.validateMsg(value);
|
|
15495
|
+
}
|
|
15440
15496
|
validateName(value) {
|
|
15441
15497
|
this.controller.validateName(value);
|
|
15442
15498
|
}
|
|
@@ -15499,6 +15555,7 @@ class KolInputDate {
|
|
|
15499
15555
|
"_label": ["validateLabel"],
|
|
15500
15556
|
"_max": ["validateMax"],
|
|
15501
15557
|
"_min": ["validateMin"],
|
|
15558
|
+
"_msg": ["validateMsg"],
|
|
15502
15559
|
"_name": ["validateName"],
|
|
15503
15560
|
"_on": ["validateOn"],
|
|
15504
15561
|
"_readOnly": ["validateReadOnly"],
|
|
@@ -15532,6 +15589,7 @@ class KolInputDate {
|
|
|
15532
15589
|
"_label": [1],
|
|
15533
15590
|
"_max": [1],
|
|
15534
15591
|
"_min": [1],
|
|
15592
|
+
"_msg": [16],
|
|
15535
15593
|
"_name": [1],
|
|
15536
15594
|
"_on": [16],
|
|
15537
15595
|
"_readOnly": [4, "_read-only"],
|
|
@@ -15655,7 +15713,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
15655
15713
|
}
|
|
15656
15714
|
}
|
|
15657
15715
|
|
|
15658
|
-
const defaultStyleCss$s = "@layer kol-global {\n .sc-kol-input-email-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-email-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-email-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-email-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:
|
|
15716
|
+
const defaultStyleCss$s = "@layer kol-global {\n .sc-kol-input-email-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-email-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-email-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-email-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-email-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-email-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-email-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-email-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 {}";
|
|
15659
15717
|
var KolInputEmailDefaultStyle0 = defaultStyleCss$s;
|
|
15660
15718
|
|
|
15661
15719
|
class KolInputEmail {
|
|
@@ -15667,10 +15725,10 @@ class KolInputEmail {
|
|
|
15667
15725
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15668
15726
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
15669
15727
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15670
|
-
return (hAsync(Host, { key: '
|
|
15728
|
+
return (hAsync(Host, { key: 'cf9e7576586f2ce62338f841d9ce317625e81772', class: {
|
|
15671
15729
|
'kol-input-email': true,
|
|
15672
15730
|
'has-value': this.state._hasValue,
|
|
15673
|
-
} }, hAsync(
|
|
15731
|
+
} }, hAsync(KolInputTag, { key: '09bd3f3e95bbab6baaba62447ae4684dc436f456', class: { email: true, 'hide-label': !!this.state._hideLabel }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '061386448e8ad816ed3103047125b9a924bfc251', 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: '38abccd55800d900ff6e038402967e3f717842e1', slot: "input" }, hAsync("input", Object.assign({ key: 'e4b7559ee9efeb63e7903747802a2f57ce5c88dd', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, multiple: this.state._multiple, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "email", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
|
|
15674
15732
|
}
|
|
15675
15733
|
constructor(hostRef) {
|
|
15676
15734
|
registerInstance(this, hostRef);
|
|
@@ -15703,6 +15761,7 @@ class KolInputEmail {
|
|
|
15703
15761
|
this._id = undefined;
|
|
15704
15762
|
this._label = undefined;
|
|
15705
15763
|
this._maxLength = undefined;
|
|
15764
|
+
this._msg = undefined;
|
|
15706
15765
|
this._multiple = false;
|
|
15707
15766
|
this._name = undefined;
|
|
15708
15767
|
this._on = undefined;
|
|
@@ -15767,6 +15826,9 @@ class KolInputEmail {
|
|
|
15767
15826
|
validateMaxLength(value) {
|
|
15768
15827
|
this.controller.validateMaxLength(value);
|
|
15769
15828
|
}
|
|
15829
|
+
validateMsg(value) {
|
|
15830
|
+
this.controller.validateMsg(value);
|
|
15831
|
+
}
|
|
15770
15832
|
validateMultiple(value) {
|
|
15771
15833
|
this.controller.validateMultiple(value);
|
|
15772
15834
|
}
|
|
@@ -15828,6 +15890,7 @@ class KolInputEmail {
|
|
|
15828
15890
|
"_id": ["validateId"],
|
|
15829
15891
|
"_label": ["validateLabel"],
|
|
15830
15892
|
"_maxLength": ["validateMaxLength"],
|
|
15893
|
+
"_msg": ["validateMsg"],
|
|
15831
15894
|
"_multiple": ["validateMultiple"],
|
|
15832
15895
|
"_name": ["validateName"],
|
|
15833
15896
|
"_on": ["validateOn"],
|
|
@@ -15862,6 +15925,7 @@ class KolInputEmail {
|
|
|
15862
15925
|
"_id": [1],
|
|
15863
15926
|
"_label": [1],
|
|
15864
15927
|
"_maxLength": [2, "_max-length"],
|
|
15928
|
+
"_msg": [16],
|
|
15865
15929
|
"_multiple": [4],
|
|
15866
15930
|
"_name": [1],
|
|
15867
15931
|
"_on": [16],
|
|
@@ -15912,7 +15976,7 @@ class InputFileController extends InputIconController {
|
|
|
15912
15976
|
}
|
|
15913
15977
|
}
|
|
15914
15978
|
|
|
15915
|
-
const defaultStyleCss$r = "@charset \"UTF-8\";\n\n@layer kol-global {\n .sc-kol-input-file-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-file-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-file-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-file-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:
|
|
15979
|
+
const defaultStyleCss$r = "@charset \"UTF-8\";\n\n@layer kol-global {\n .sc-kol-input-file-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-file-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-file-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-file-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-file-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-file-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-file-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-file-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 label input[type=file]::-webkit-file-upload-button {\n display: none;\n }\n label input[type=file]:before {\n content: \"Datei auswählen\";\n }\n label input[multiple]:before {\n content: \"Dateien auswählen\";\n }\n div.input {\n cursor: pointer;\n }\n}";
|
|
15916
15980
|
var KolInputFileDefaultStyle0 = defaultStyleCss$r;
|
|
15917
15981
|
|
|
15918
15982
|
class KolInputFile {
|
|
@@ -15923,10 +15987,10 @@ class KolInputFile {
|
|
|
15923
15987
|
render() {
|
|
15924
15988
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
15925
15989
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
15926
|
-
return (hAsync(Host, { key: '
|
|
15990
|
+
return (hAsync(Host, { key: '62af05ae5cebfd499ac379ee76f8532f9f7f9a24', class: "kol-input-file" }, hAsync(KolInputTag, { key: '49cb35bd0483448cc87d99e332628c734c3fe01e', class: {
|
|
15927
15991
|
file: true,
|
|
15928
15992
|
'hide-label': !!this.state._hideLabel,
|
|
15929
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled,
|
|
15993
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'c6811820c8a635abd53c71cd2f69f40f994cb5b3', 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: 'f3c4421b80a92031085b08e2bf876aa895c670db', slot: "input" }, hAsync("input", Object.assign({ key: 'f8832a88bf239375d3d2495f36336cc7a54a2e1a', ref: this.catchRef, title: "", accept: this.state._accept, accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, spellcheck: "false", type: "file", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange }))))));
|
|
15930
15994
|
}
|
|
15931
15995
|
constructor(hostRef) {
|
|
15932
15996
|
registerInstance(this, hostRef);
|
|
@@ -15957,6 +16021,7 @@ class KolInputFile {
|
|
|
15957
16021
|
this._icons = undefined;
|
|
15958
16022
|
this._id = undefined;
|
|
15959
16023
|
this._label = undefined;
|
|
16024
|
+
this._msg = undefined;
|
|
15960
16025
|
this._multiple = false;
|
|
15961
16026
|
this._name = undefined;
|
|
15962
16027
|
this._on = undefined;
|
|
@@ -16007,6 +16072,9 @@ class KolInputFile {
|
|
|
16007
16072
|
validateLabel(value) {
|
|
16008
16073
|
this.controller.validateLabel(value);
|
|
16009
16074
|
}
|
|
16075
|
+
validateMsg(value) {
|
|
16076
|
+
this.controller.validateMsg(value);
|
|
16077
|
+
}
|
|
16010
16078
|
validateMultiple(value) {
|
|
16011
16079
|
this.controller.validateMultiple(value);
|
|
16012
16080
|
}
|
|
@@ -16052,6 +16120,7 @@ class KolInputFile {
|
|
|
16052
16120
|
"_icons": ["validateIcons"],
|
|
16053
16121
|
"_id": ["validateId"],
|
|
16054
16122
|
"_label": ["validateLabel"],
|
|
16123
|
+
"_msg": ["validateMsg"],
|
|
16055
16124
|
"_multiple": ["validateMultiple"],
|
|
16056
16125
|
"_name": ["validateName"],
|
|
16057
16126
|
"_on": ["validateOn"],
|
|
@@ -16080,6 +16149,7 @@ class KolInputFile {
|
|
|
16080
16149
|
"_icons": [1],
|
|
16081
16150
|
"_id": [1],
|
|
16082
16151
|
"_label": [1],
|
|
16152
|
+
"_msg": [16],
|
|
16083
16153
|
"_multiple": [4],
|
|
16084
16154
|
"_name": [1],
|
|
16085
16155
|
"_on": [16],
|
|
@@ -16181,7 +16251,7 @@ class InputNumberController extends InputIconController {
|
|
|
16181
16251
|
}
|
|
16182
16252
|
}
|
|
16183
16253
|
|
|
16184
|
-
const defaultStyleCss$q = "@layer kol-global {\n .sc-kol-input-number-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-number-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-number-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-number-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:
|
|
16254
|
+
const defaultStyleCss$q = "@layer kol-global {\n .sc-kol-input-number-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-number-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-number-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-number-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-number-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-number-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-number-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-number-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 {}";
|
|
16185
16255
|
var KolInputNumberDefaultStyle0 = defaultStyleCss$q;
|
|
16186
16256
|
|
|
16187
16257
|
class KolInputNumber {
|
|
@@ -16193,13 +16263,13 @@ class KolInputNumber {
|
|
|
16193
16263
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
16194
16264
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
16195
16265
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
16196
|
-
return (hAsync(Host, { key: '
|
|
16266
|
+
return (hAsync(Host, { key: '650c0fa1fa95548d564d33448627a1efa12a0028', class: {
|
|
16197
16267
|
'kol-input-number': true,
|
|
16198
16268
|
'has-value': this.state._hasValue,
|
|
16199
|
-
} }, hAsync(
|
|
16269
|
+
} }, hAsync(KolInputTag, { key: '4ff5c555fb94b8b0b32b9e74894f147fd112926d', class: {
|
|
16200
16270
|
number: true,
|
|
16201
16271
|
'hide-label': !!this.state._hideLabel,
|
|
16202
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled,
|
|
16272
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _suggestions: this.state._suggestions, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '2badf4f6b46d468d457ce0305c4b5f8fe51b8663', 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: '76e8b7ba48e462642f096d81de1f08409a464100', slot: "input" }, hAsync("input", Object.assign({ key: '951e8a4dbf1eb3ea0c174ecab3ca85abe39954fc', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, placeholder: this.state._placeholder, step: this.state._step, spellcheck: "false", type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
|
|
16203
16273
|
}
|
|
16204
16274
|
constructor(hostRef) {
|
|
16205
16275
|
registerInstance(this, hostRef);
|
|
@@ -16231,6 +16301,7 @@ class KolInputNumber {
|
|
|
16231
16301
|
this._label = undefined;
|
|
16232
16302
|
this._max = undefined;
|
|
16233
16303
|
this._min = undefined;
|
|
16304
|
+
this._msg = undefined;
|
|
16234
16305
|
this._name = undefined;
|
|
16235
16306
|
this._on = undefined;
|
|
16236
16307
|
this._placeholder = undefined;
|
|
@@ -16293,6 +16364,9 @@ class KolInputNumber {
|
|
|
16293
16364
|
validateMin(value) {
|
|
16294
16365
|
this.controller.validateMin(value);
|
|
16295
16366
|
}
|
|
16367
|
+
validateMsg(value) {
|
|
16368
|
+
this.controller.validateMsg(value);
|
|
16369
|
+
}
|
|
16296
16370
|
validateName(value) {
|
|
16297
16371
|
this.controller.validateName(value);
|
|
16298
16372
|
}
|
|
@@ -16355,6 +16429,7 @@ class KolInputNumber {
|
|
|
16355
16429
|
"_label": ["validateLabel"],
|
|
16356
16430
|
"_max": ["validateMax"],
|
|
16357
16431
|
"_min": ["validateMin"],
|
|
16432
|
+
"_msg": ["validateMsg"],
|
|
16358
16433
|
"_name": ["validateName"],
|
|
16359
16434
|
"_on": ["validateOn"],
|
|
16360
16435
|
"_placeholder": ["validatePlaceholder"],
|
|
@@ -16388,6 +16463,7 @@ class KolInputNumber {
|
|
|
16388
16463
|
"_label": [1],
|
|
16389
16464
|
"_max": [8],
|
|
16390
16465
|
"_min": [8],
|
|
16466
|
+
"_msg": [16],
|
|
16391
16467
|
"_name": [1],
|
|
16392
16468
|
"_on": [16],
|
|
16393
16469
|
"_placeholder": [1],
|
|
@@ -16410,7 +16486,7 @@ class KolInputNumber {
|
|
|
16410
16486
|
}; }
|
|
16411
16487
|
}
|
|
16412
16488
|
|
|
16413
|
-
const defaultStyleCss$p = "@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 .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .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:
|
|
16489
|
+
const defaultStyleCss$p = "@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 .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .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 .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .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 {}";
|
|
16414
16490
|
var KolInputPasswordDefaultStyle0 = defaultStyleCss$p;
|
|
16415
16491
|
|
|
16416
16492
|
class KolInputPassword {
|
|
@@ -16421,13 +16497,13 @@ class KolInputPassword {
|
|
|
16421
16497
|
render() {
|
|
16422
16498
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
16423
16499
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
16424
|
-
return (hAsync(Host, { key: '
|
|
16500
|
+
return (hAsync(Host, { key: 'c7b129bbb04d82b2667642c0ec5c3389b45e39f9', class: {
|
|
16425
16501
|
'kol-input-password': true,
|
|
16426
16502
|
'has-value': this.state._hasValue,
|
|
16427
|
-
} }, hAsync(
|
|
16503
|
+
} }, hAsync(KolInputTag, { key: 'a928fecf3f149d4c932fd9ae1604b75c19b5999e', class: {
|
|
16428
16504
|
'hide-label': !!this.state._hideLabel,
|
|
16429
16505
|
password: true,
|
|
16430
|
-
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled,
|
|
16506
|
+
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _msg: this.state._msg, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'fc1317b54b47b790814c871f22beecb4b87c8ecf', 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: '006e5c7603e9749ad1ccd7d1f71b8f16a518da5a', slot: "input" }, hAsync("input", Object.assign({ key: '1981e9a3a3d5ea7d0ac6f57b9ef53cfdca8350bd', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: "password", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
|
|
16431
16507
|
}
|
|
16432
16508
|
constructor(hostRef) {
|
|
16433
16509
|
registerInstance(this, hostRef);
|
|
@@ -16460,6 +16536,7 @@ class KolInputPassword {
|
|
|
16460
16536
|
this._id = undefined;
|
|
16461
16537
|
this._label = undefined;
|
|
16462
16538
|
this._maxLength = undefined;
|
|
16539
|
+
this._msg = undefined;
|
|
16463
16540
|
this._name = undefined;
|
|
16464
16541
|
this._on = undefined;
|
|
16465
16542
|
this._pattern = undefined;
|
|
@@ -16524,6 +16601,9 @@ class KolInputPassword {
|
|
|
16524
16601
|
validateMaxLength(value) {
|
|
16525
16602
|
this.controller.validateMaxLength(value);
|
|
16526
16603
|
}
|
|
16604
|
+
validateMsg(value) {
|
|
16605
|
+
this.controller.validateMsg(value);
|
|
16606
|
+
}
|
|
16527
16607
|
validateName(value) {
|
|
16528
16608
|
this.controller.validateName(value);
|
|
16529
16609
|
}
|
|
@@ -16579,6 +16659,7 @@ class KolInputPassword {
|
|
|
16579
16659
|
"_id": ["validateId"],
|
|
16580
16660
|
"_label": ["validateLabel"],
|
|
16581
16661
|
"_maxLength": ["validateMaxLength"],
|
|
16662
|
+
"_msg": ["validateMsg"],
|
|
16582
16663
|
"_name": ["validateName"],
|
|
16583
16664
|
"_on": ["validateOn"],
|
|
16584
16665
|
"_pattern": ["validatePattern"],
|
|
@@ -16611,6 +16692,7 @@ class KolInputPassword {
|
|
|
16611
16692
|
"_id": [1],
|
|
16612
16693
|
"_label": [1],
|
|
16613
16694
|
"_maxLength": [2, "_max-length"],
|
|
16695
|
+
"_msg": [16],
|
|
16614
16696
|
"_name": [1],
|
|
16615
16697
|
"_on": [16],
|
|
16616
16698
|
"_pattern": [1],
|
|
@@ -16632,7 +16714,7 @@ class KolInputPassword {
|
|
|
16632
16714
|
}; }
|
|
16633
16715
|
}
|
|
16634
16716
|
|
|
16635
|
-
const defaultStyleCss$o = "@layer kol-global {\n .sc-kol-input-radio-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-radio-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-radio-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-radio-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:
|
|
16717
|
+
const defaultStyleCss$o = "@layer kol-global {\n .sc-kol-input-radio-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-radio-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-radio-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-radio-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\n@layer kol-global {\n .sc-kol-input-radio-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-radio-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-radio-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-radio-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-radio-default-h {\n --border-width: 2px;\n --input-size: 1.5em;\n }\n .kol-input .icons {\n display: none;\n }\n label {\n cursor: pointer;\n }\n input {\n appearance: none;\n border-width: var(--border-width);\n border-style: solid;\n border-radius: 100%;\n cursor: pointer;\n display: flex;\n height: var(--input-size);\n margin: 0;\n min-height: var(--input-size);\n min-width: var(--input-size);\n padding: 0;\n width: var(--input-size);\n }\n input:before {\n border-radius: 100%;\n content: \"\";\n margin: auto;\n height: calc(var(--input-size) / 2);\n width: calc(var(--input-size) / 2);\n }\n input:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n input:checked:before {\n \n background: highlight !important;\n }\n }\n fieldset {\n display: flex;\n }\n fieldset.vertical {\n flex-direction: column;\n }\n fieldset .input-slot {\n align-items: center;\n display: flex;\n }\n \n .required label > span::after {\n content: \"\";\n }\n}";
|
|
16636
16718
|
var KolInputRadioDefaultStyle0 = defaultStyleCss$o;
|
|
16637
16719
|
|
|
16638
16720
|
class KolInputRadio {
|
|
@@ -16642,26 +16724,27 @@ class KolInputRadio {
|
|
|
16642
16724
|
render() {
|
|
16643
16725
|
const { ariaDescribedBy, hasError } = getRenderStates(this.state);
|
|
16644
16726
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
16645
|
-
return (hAsync(Host, { key: '
|
|
16727
|
+
return (hAsync(Host, { key: '8ecbb61c14eb1ab1e691b7fb33805698deee6227', class: "kol-input-radio" }, hAsync("fieldset", { key: 'a3c0c25bdac11fb58cb36dcc02ef4304aa8f1c19', class: {
|
|
16646
16728
|
fieldset: true,
|
|
16647
16729
|
disabled: this.state._disabled === true,
|
|
16648
16730
|
error: hasError === true,
|
|
16649
16731
|
required: this.state._required === true,
|
|
16650
16732
|
'hidden-error': this._hideError === true,
|
|
16651
16733
|
[this.state._orientation]: true,
|
|
16652
|
-
} }, hAsync("legend", { key: '
|
|
16734
|
+
} }, hAsync("legend", { key: '3af90527febcde9277bd6e1f5f6be05335d8a434', class: "block w-full mb-1 leading-normal" }, hAsync("span", { key: 'a5255df9fdffd9184eb14f3da96148bfa1629b12' }, hAsync("span", { key: '5c25d8de758d3c04049a04f1224433c47ace635d', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this._accessKey === 'string' ? (hAsync(InternalUnderlinedAccessKey, { accessKey: this._accessKey, label: this._label })) : (this._label)))), this.state._options.map((option, index) => {
|
|
16653
16735
|
const customId = `${this.state._id}-${index}`;
|
|
16654
16736
|
const slotName = `radio-${index}`;
|
|
16655
|
-
|
|
16737
|
+
const selected = this.state._value === option.value;
|
|
16738
|
+
return (hAsync(KolInputTag, { class: {
|
|
16656
16739
|
radio: true,
|
|
16657
16740
|
disabled: Boolean(this.state._disabled || option.disabled),
|
|
16658
|
-
}, key: customId, _accessKey: this.state._accessKey, _disabled: this.state._disabled || option.disabled, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: customId, _label: option.label, _renderNoLabel: true, _required: this.state._required, _slotName: slotName, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("div", { slot: slotName, class: "radio-input-wrapper" }, hAsync("input", Object.assign({ ref: this.state._value === option.value ? this.catchRef : undefined, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: "radio", id: customId, checked:
|
|
16741
|
+
}, key: customId, _accessKey: this.state._accessKey, _disabled: this.state._disabled || option.disabled, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: customId, _label: option.label, _renderNoLabel: true, _required: this.state._required, _slotName: slotName, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("div", { slot: slotName, class: "radio-input-wrapper" }, hAsync("input", Object.assign({ ref: this.state._value === option.value ? this.catchRef : undefined, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined, type: "radio", id: customId, checked: selected, name: this.state._name || this.state._id, disabled: this.state._disabled || option.disabled, required: this.state._required, tabIndex: this.state._tabIndex, value: `-${index}` }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined })), hAsync("label", { class: "radio-label", htmlFor: `${customId}`, style: {
|
|
16659
16742
|
height: this.state._hideLabel ? '0' : undefined,
|
|
16660
16743
|
margin: this.state._hideLabel ? '0' : undefined,
|
|
16661
16744
|
padding: this.state._hideLabel ? '0' : undefined,
|
|
16662
16745
|
visibility: this.state._hideLabel ? 'hidden' : undefined,
|
|
16663
16746
|
} }, hAsync("span", null, hAsync("span", { class: "radio-label-span-inner" }, option.label))))));
|
|
16664
|
-
}), hasError && hAsync(FormFieldMsg, { _alert: this.state._alert, _hideError: this.state._hideError,
|
|
16747
|
+
}), hasError && hAsync(FormFieldMsg, { _alert: this.state._alert, _hideError: this.state._hideError, _msg: this.state._msg, _id: this.state._id }))));
|
|
16665
16748
|
}
|
|
16666
16749
|
constructor(hostRef) {
|
|
16667
16750
|
registerInstance(this, hostRef);
|
|
@@ -16692,6 +16775,7 @@ class KolInputRadio {
|
|
|
16692
16775
|
this._hint = '';
|
|
16693
16776
|
this._id = undefined;
|
|
16694
16777
|
this._label = undefined;
|
|
16778
|
+
this._msg = undefined;
|
|
16695
16779
|
this._name = undefined;
|
|
16696
16780
|
this._on = undefined;
|
|
16697
16781
|
this._options = undefined;
|
|
@@ -16738,6 +16822,9 @@ class KolInputRadio {
|
|
|
16738
16822
|
validateLabel(value) {
|
|
16739
16823
|
this.controller.validateLabel(value);
|
|
16740
16824
|
}
|
|
16825
|
+
validateMsg(value) {
|
|
16826
|
+
this.controller.validateMsg(value);
|
|
16827
|
+
}
|
|
16741
16828
|
validateName(value) {
|
|
16742
16829
|
this.controller.validateName(value);
|
|
16743
16830
|
}
|
|
@@ -16769,7 +16856,7 @@ class KolInputRadio {
|
|
|
16769
16856
|
this._alert = this._alert === true;
|
|
16770
16857
|
this._touched = this._touched === true;
|
|
16771
16858
|
this.currentValue = this._value;
|
|
16772
|
-
this.controller.componentWillLoad(
|
|
16859
|
+
this.controller.componentWillLoad();
|
|
16773
16860
|
}
|
|
16774
16861
|
get host() { return getElement(this); }
|
|
16775
16862
|
static get watchers() { return {
|
|
@@ -16782,6 +16869,7 @@ class KolInputRadio {
|
|
|
16782
16869
|
"_hint": ["validateHint"],
|
|
16783
16870
|
"_id": ["validateId"],
|
|
16784
16871
|
"_label": ["validateLabel"],
|
|
16872
|
+
"_msg": ["validateMsg"],
|
|
16785
16873
|
"_name": ["validateName"],
|
|
16786
16874
|
"_on": ["validateOn"],
|
|
16787
16875
|
"_options": ["validateOptions"],
|
|
@@ -16808,6 +16896,7 @@ class KolInputRadio {
|
|
|
16808
16896
|
"_hint": [1],
|
|
16809
16897
|
"_id": [1],
|
|
16810
16898
|
"_label": [1],
|
|
16899
|
+
"_msg": [16],
|
|
16811
16900
|
"_name": [1],
|
|
16812
16901
|
"_on": [16],
|
|
16813
16902
|
"_options": [1],
|
|
@@ -16862,7 +16951,7 @@ class InputRangeController extends InputIconController {
|
|
|
16862
16951
|
}
|
|
16863
16952
|
}
|
|
16864
16953
|
|
|
16865
|
-
const defaultStyleCss$n = "@layer kol-global {\n .sc-kol-input-range-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-range-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-range-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .
|
|
16954
|
+
const defaultStyleCss$n = "@layer kol-global {\n .sc-kol-input-range-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-range-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-range-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-range-default-h {\n display: block;\n }\n}\n\n@layer kol-global {\n .sc-kol-input-range-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-range-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-range-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-range-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@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 .inputs-wrapper {\n align-items: center;\n display: flex;\n flex-direction: row;\n }\n input[type=number] {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n width: var(--kolibri-input-range--input-number--width);\n }\n \n input[type=range] {\n appearance: none;\n background-color: #d3d3d3;\n border: 1px solid #000;\n display: inline-block;\n flex-grow: 1;\n height: calc(8rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5em;\n padding: 0;\n margin: 0;\n \n width: 0;\n }\n input[type=range]::-webkit-slider-thumb {\n box-sizing: border-box;\n background-color: #000;\n height: 20px;\n width: 20px;\n border-radius: 20px;\n cursor: pointer;\n -webkit-appearance: none;\n }\n input[type=range]::-moz-range-thumb {\n box-sizing: border-box;\n background-color: #000;\n height: 20px;\n width: 20px;\n border-radius: 20px;\n cursor: pointer;\n -moz-appearance: none;\n }\n}\n\n@media (prefers-contrast: more) {\n /*!@::-webkit-slider-thumb*/.sc-kol-input-range-default::-webkit-slider-thumb {\n outline: 1px solid currentColor;\n }\n}";
|
|
16866
16955
|
var KolInputRangeDefaultStyle0 = defaultStyleCss$n;
|
|
16867
16956
|
|
|
16868
16957
|
class KolInputRange {
|
|
@@ -16892,12 +16981,12 @@ class KolInputRange {
|
|
|
16892
16981
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
16893
16982
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
16894
16983
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
16895
|
-
return (hAsync(Host, { key: '
|
|
16984
|
+
return (hAsync(Host, { key: 'daa820a11f452c4c27286a26efcdf3c95dabd4bc', class: "kol-input-range" }, hAsync(KolInputTag, { key: '5585abbb12f0b28d2c36bbe92263dad61e1893e0', class: {
|
|
16896
16985
|
range: true,
|
|
16897
16986
|
'hide-label': !!this.state._hideLabel,
|
|
16898
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled,
|
|
16987
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _msg: this.state._msg, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { key: '8b2685dbec0987c59dbc1a57db93950ab5dd376b', 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: '4d9f324e73b7d8ee2458d73acc42f6d26986128f', slot: "input" }, hAsync("div", { key: '830d403d6b8764919a40298977d39a122966f39f', class: "inputs-wrapper", style: {
|
|
16899
16988
|
'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',
|
|
16900
|
-
} }, hAsync("input", Object.assign({ key: '
|
|
16989
|
+
} }, hAsync("input", Object.assign({ key: '102466df79b26a6fc2a806c65cfa9069e778e4e6', ref: this.catchInputRangeRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, "aria-hidden": "true", autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-range` : undefined, spellcheck: "false", step: this.state._step, tabIndex: -1, type: "range", value: this.state._value }, this.controller.onFacade, { onChange: this.onChange })), hAsync("input", Object.assign({ key: '2bc1cf961259e9d8f4ac01ce2ca5bcc8ee960f3c', ref: this.catchInputNumberRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, max: this.state._max, min: this.state._min, name: this.state._name ? `${this.state._name}-number` : undefined, step: this.state._step, type: "number", value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown, onChange: this.onChange }))), hasSuggestions && [
|
|
16901
16990
|
hAsync("datalist", { id: `${this.state._id}-list` }, this.state._suggestions.map((option) => (hAsync("option", { value: option })))),
|
|
16902
16991
|
]))));
|
|
16903
16992
|
}
|
|
@@ -16951,6 +17040,7 @@ class KolInputRange {
|
|
|
16951
17040
|
this._label = undefined;
|
|
16952
17041
|
this._max = undefined;
|
|
16953
17042
|
this._min = undefined;
|
|
17043
|
+
this._msg = undefined;
|
|
16954
17044
|
this._name = undefined;
|
|
16955
17045
|
this._on = undefined;
|
|
16956
17046
|
this._step = undefined;
|
|
@@ -17008,6 +17098,9 @@ class KolInputRange {
|
|
|
17008
17098
|
validateMin(value) {
|
|
17009
17099
|
this.controller.validateMin(value);
|
|
17010
17100
|
}
|
|
17101
|
+
validateMsg(value) {
|
|
17102
|
+
this.controller.validateMsg(value);
|
|
17103
|
+
}
|
|
17011
17104
|
validateName(value) {
|
|
17012
17105
|
this.controller.validateName(value);
|
|
17013
17106
|
}
|
|
@@ -17052,6 +17145,7 @@ class KolInputRange {
|
|
|
17052
17145
|
"_label": ["validateLabel"],
|
|
17053
17146
|
"_max": ["validateMax"],
|
|
17054
17147
|
"_min": ["validateMin"],
|
|
17148
|
+
"_msg": ["validateMsg"],
|
|
17055
17149
|
"_name": ["validateName"],
|
|
17056
17150
|
"_on": ["validateOn"],
|
|
17057
17151
|
"_step": ["validateStep"],
|
|
@@ -17081,6 +17175,7 @@ class KolInputRange {
|
|
|
17081
17175
|
"_label": [1],
|
|
17082
17176
|
"_max": [2],
|
|
17083
17177
|
"_min": [2],
|
|
17178
|
+
"_msg": [16],
|
|
17084
17179
|
"_name": [1],
|
|
17085
17180
|
"_on": [16],
|
|
17086
17181
|
"_step": [2],
|
|
@@ -17099,7 +17194,7 @@ class KolInputRange {
|
|
|
17099
17194
|
}; }
|
|
17100
17195
|
}
|
|
17101
17196
|
|
|
17102
|
-
const defaultStyleCss$m = "@layer kol-global {\n .sc-kol-input-text-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-text-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-text-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-text-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:
|
|
17197
|
+
const defaultStyleCss$m = "@layer kol-global {\n .sc-kol-input-text-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-text-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-text-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-input-text-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-text-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-text-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-text-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-input-text-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 {}";
|
|
17103
17198
|
var KolInputTextDefaultStyle0 = defaultStyleCss$m;
|
|
17104
17199
|
|
|
17105
17200
|
class KolInputText {
|
|
@@ -17111,13 +17206,13 @@ class KolInputText {
|
|
|
17111
17206
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
17112
17207
|
const hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;
|
|
17113
17208
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
17114
|
-
return (hAsync(Host, { key: '
|
|
17209
|
+
return (hAsync(Host, { key: 'c007ca6f04ec264c648cf7607b81902980b96b74', class: {
|
|
17115
17210
|
'has-value': this.state._hasValue,
|
|
17116
|
-
} }, hAsync(
|
|
17211
|
+
} }, hAsync(KolInputTag, { key: '40f96c71fd40613310c8fc4ae65dc1a532e1d14a', class: {
|
|
17117
17212
|
'kol-input-text': true,
|
|
17118
17213
|
[this.state._type]: true,
|
|
17119
17214
|
'hide-label': !!this.state._hideLabel,
|
|
17120
|
-
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled,
|
|
17215
|
+
}, _accessKey: this.state._accessKey, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hasCounter: this.state._hasCounter, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _required: this.state._required, _smartButton: this.state._smartButton, _suggestions: this.state._suggestions, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: 'fbadd11e85400f169306afae6354d83884923114', 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: 'f91e5811fad3ed4ecdbe8b2aab36eca1c4681408', slot: "input" }, hAsync("input", Object.assign({ key: 'ba9c3fffdfa8f111e80233d8a4a3b71b05bb516a', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoComplete: this.state._autoComplete, autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, list: hasSuggestions ? `${this.state._id}-list` : undefined, maxlength: this.state._maxLength, name: this.state._name, pattern: this.state._pattern, placeholder: this.state._placeholder, readOnly: this.state._readOnly, required: this.state._required, spellcheck: "false", type: this.state._type, value: this.state._value }, this.controller.onFacade, { onKeyDown: this.onKeyDown }))))));
|
|
17121
17216
|
}
|
|
17122
17217
|
constructor(hostRef) {
|
|
17123
17218
|
registerInstance(this, hostRef);
|
|
@@ -17160,6 +17255,7 @@ class KolInputText {
|
|
|
17160
17255
|
this._id = undefined;
|
|
17161
17256
|
this._label = undefined;
|
|
17162
17257
|
this._maxLength = undefined;
|
|
17258
|
+
this._msg = undefined;
|
|
17163
17259
|
this._name = undefined;
|
|
17164
17260
|
this._on = undefined;
|
|
17165
17261
|
this._pattern = undefined;
|
|
@@ -17225,6 +17321,9 @@ class KolInputText {
|
|
|
17225
17321
|
validateMaxLength(value) {
|
|
17226
17322
|
this.controller.validateMaxLength(value);
|
|
17227
17323
|
}
|
|
17324
|
+
validateMsg(value) {
|
|
17325
|
+
this.controller.validateMsg(value);
|
|
17326
|
+
}
|
|
17228
17327
|
validateName(value) {
|
|
17229
17328
|
this.controller.validateName(value);
|
|
17230
17329
|
}
|
|
@@ -17291,6 +17390,7 @@ class KolInputText {
|
|
|
17291
17390
|
"_id": ["validateId"],
|
|
17292
17391
|
"_label": ["validateLabel"],
|
|
17293
17392
|
"_maxLength": ["validateMaxLength"],
|
|
17393
|
+
"_msg": ["validateMsg"],
|
|
17294
17394
|
"_name": ["validateName"],
|
|
17295
17395
|
"_on": ["validateOn"],
|
|
17296
17396
|
"_pattern": ["validatePattern"],
|
|
@@ -17325,6 +17425,7 @@ class KolInputText {
|
|
|
17325
17425
|
"_id": [1],
|
|
17326
17426
|
"_label": [1],
|
|
17327
17427
|
"_maxLength": [2, "_max-length"],
|
|
17428
|
+
"_msg": [16],
|
|
17328
17429
|
"_name": [1],
|
|
17329
17430
|
"_on": [16],
|
|
17330
17431
|
"_pattern": [1],
|
|
@@ -17444,7 +17545,7 @@ class KolLink {
|
|
|
17444
17545
|
this._tooltipAlign = 'right';
|
|
17445
17546
|
}
|
|
17446
17547
|
render() {
|
|
17447
|
-
return (hAsync(Host, { key: '
|
|
17548
|
+
return (hAsync(Host, { key: '74b031ab364b68c9faea1c242c385c2c391eb0e4', class: "kol-link" }, hAsync(KolLinkWcTag, { key: '99c07f7de1e1c30cdcd360d359b4239cf2c76c04', ref: this.catchRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: this._role, _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '96bfdc2a811e8834b4b299cd36c5f83ece3505c0', name: "expert", slot: "expert" }))));
|
|
17448
17549
|
}
|
|
17449
17550
|
get host() { return getElement(this); }
|
|
17450
17551
|
static get style() { return {
|
|
@@ -17500,11 +17601,11 @@ class KolLinkButton {
|
|
|
17500
17601
|
this._variant = 'normal';
|
|
17501
17602
|
}
|
|
17502
17603
|
render() {
|
|
17503
|
-
return (hAsync(Host, { key: '
|
|
17604
|
+
return (hAsync(Host, { key: 'a5abcbb151ab1f14195d4a3a1fdb4b1e195ca26b', class: "kol-link-button" }, hAsync(KolLinkWcTag, { key: '3bf83a6270b0405165152ad3770022b86c8cae4e', ref: this.catchRef, class: {
|
|
17504
17605
|
button: true,
|
|
17505
17606
|
[this._variant]: this._variant !== 'custom',
|
|
17506
17607
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
17507
|
-
}, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '
|
|
17608
|
+
}, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _label: this._label, _on: this._on, _role: "button", _tabIndex: this._tabIndex, _target: this._target, _tooltipAlign: this._tooltipAlign }, hAsync("slot", { key: '7136106e0323b7f972d50444bc7c984a4a5c2e8a', name: "expert", slot: "expert" }))));
|
|
17508
17609
|
}
|
|
17509
17610
|
get host() { return getElement(this); }
|
|
17510
17611
|
static get style() { return {
|
|
@@ -17536,7 +17637,7 @@ class KolLinkButton {
|
|
|
17536
17637
|
}; }
|
|
17537
17638
|
}
|
|
17538
17639
|
|
|
17539
|
-
const defaultStyleCss$i = "@layer kol-global {\n .sc-kol-link-group-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-group-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-group-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n
|
|
17640
|
+
const defaultStyleCss$i = "@layer kol-global {\n .sc-kol-link-group-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-group-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-group-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n :is(ol, ul).horizontal {\n display: flex;\n flex-wrap: wrap;\n }\n :is(ol, ul).horizontal li {\n margin-left: calc(20rem / var(--kolibri-root-font-size, 16));\n margin-right: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :is(ol, ul).horizontal li:first-child {\n margin-left: 0;\n }\n :is(ol, ul).horizontal li:last-child {\n margin-right: 0;\n }\n :is(ol, ul).vertical li {\n margin-left: calc(28rem / var(--kolibri-root-font-size, 16));\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n li.list-none {\n list-style-type: none !important;\n margin-left: 0;\n }\n}";
|
|
17540
17641
|
var KolLinkGroupDefaultStyle0 = defaultStyleCss$i;
|
|
17541
17642
|
|
|
17542
17643
|
const ListItem = (props) => {
|
|
@@ -17547,7 +17648,7 @@ const ListItem = (props) => {
|
|
|
17547
17648
|
'list-none': index === 0 && props.orientation === 'horizontal',
|
|
17548
17649
|
}, style: {
|
|
17549
17650
|
listStyleType: props.listStyleType,
|
|
17550
|
-
} }, hAsync(
|
|
17651
|
+
} }, hAsync(KolLinkTag, Object.assign({}, link)))));
|
|
17551
17652
|
});
|
|
17552
17653
|
return list;
|
|
17553
17654
|
};
|
|
@@ -17560,26 +17661,24 @@ class KolLinkGroup {
|
|
|
17560
17661
|
this._links = undefined;
|
|
17561
17662
|
this._orientation = 'vertical';
|
|
17562
17663
|
this.state = {
|
|
17563
|
-
_label: '',
|
|
17564
17664
|
_listStyleType: 'disc',
|
|
17565
17665
|
_links: [],
|
|
17566
17666
|
_orientation: 'vertical',
|
|
17567
17667
|
};
|
|
17568
17668
|
}
|
|
17569
17669
|
render() {
|
|
17570
|
-
|
|
17670
|
+
const ListTag = this.isUl ? 'ul' : 'ol';
|
|
17671
|
+
return (hAsync(Host, { key: '790e8cdb692babb2d5dc021a2b3f846e08edf239', class: "kol-link-group" }, hAsync(ListTag, { key: 'b778db5aaa11c82746df40a3c214898cd14ae215', "aria-label": this.state._label, class: {
|
|
17571
17672
|
vertical: this.state._orientation === 'vertical',
|
|
17572
17673
|
horizontal: this.state._orientation === 'horizontal',
|
|
17573
|
-
} },
|
|
17674
|
+
} }, hAsync(ListItem, { key: '904c59094b31d541e5bb9769ea8420d9aaac1c50', links: this.state._links, orientation: this.state._orientation, listStyleType: this.state._listStyleType }))));
|
|
17574
17675
|
}
|
|
17575
17676
|
validateLabel(value, _oldValue, initial = false) {
|
|
17576
|
-
if (!initial) {
|
|
17677
|
+
if (!initial && this.state._label) {
|
|
17577
17678
|
removeNavLabel(this.state._label);
|
|
17578
17679
|
}
|
|
17579
|
-
validateLabel(this, value
|
|
17580
|
-
|
|
17581
|
-
});
|
|
17582
|
-
addNavLabel(this.state._label);
|
|
17680
|
+
validateLabel(this, value);
|
|
17681
|
+
this.state._label && addNavLabel(this.state._label);
|
|
17583
17682
|
}
|
|
17584
17683
|
validateListStyleType(value) {
|
|
17585
17684
|
watchValidator(this, '_listStyleType', (value) => {
|
|
@@ -17621,7 +17720,7 @@ class KolLinkGroup {
|
|
|
17621
17720
|
this.validateOrientation(this._orientation);
|
|
17622
17721
|
}
|
|
17623
17722
|
disconnectedCallback() {
|
|
17624
|
-
removeNavLabel(this.state._label);
|
|
17723
|
+
this.state._label && removeNavLabel(this.state._label);
|
|
17625
17724
|
}
|
|
17626
17725
|
static get watchers() { return {
|
|
17627
17726
|
"_label": ["validateLabel"],
|
|
@@ -17711,13 +17810,13 @@ class KolLinkWc {
|
|
|
17711
17810
|
render() {
|
|
17712
17811
|
const { isExternal, tagAttrs } = this.getRenderValues();
|
|
17713
17812
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
17714
|
-
return (hAsync(Host, { key: '
|
|
17813
|
+
return (hAsync(Host, { key: '504f0f2fe9bed749d0847c0fbd150e76c7871bcd', class: "kol-link-wc" }, hAsync("a", Object.assign({ key: 'a5a83b52474683ce841ed0397e72ff8ae087af87', ref: this.catchRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
|
|
17715
17814
|
? `${this.state._label}${isExternal ? ` (${translate('kol-open-link-in-tab')})` : ''}`
|
|
17716
17815
|
: undefined, class: {
|
|
17717
17816
|
disabled: this.state._disabled === true,
|
|
17718
17817
|
'external-link': isExternal,
|
|
17719
17818
|
'hide-label': this.state._hideLabel === true,
|
|
17720
|
-
} }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(
|
|
17819
|
+
} }, this.state._on, { onClick: this.onClick, onKeyPress: this.onClick, role: this.state._role, tabIndex: this.state._disabled ? -1 : this.state._tabIndex }), hAsync(KolSpanWcTag, { key: '41a0a0a0ef71a2f54025e6c60238d2a804963584', _accessKey: this.state._accessKey, _icons: this.state._icons, _hideLabel: this.state._hideLabel, _label: hasExpertSlot ? '' : this.state._label || this.state._href }, hAsync("slot", { key: 'f4e727bbf7c7a9fb2fc0e19218cf516fd0910c2b', name: "expert", slot: "expert" })), isExternal && (hAsync(KolIconTag, { class: "external-link-icon", _label: this.state._hideLabel ? '' : translate('kol-open-link-in-tab'), _icons: 'codicon codicon-link-external', "aria-hidden": this.state._hideLabel }))), hAsync(KolTooltipWcTag, { key: '9d203ab09e2ba58b2ed7c1999b1968d3d486367c', "aria-hidden": "true", hidden: hasExpertSlot || !this.state._hideLabel, _accessKey: this.state._accessKey, _align: this.state._tooltipAlign, _label: this.state._label || this.state._href })));
|
|
17721
17820
|
}
|
|
17722
17821
|
validateAccessKey(value) {
|
|
17723
17822
|
validateAccessKey(this, value);
|
|
@@ -18031,7 +18130,7 @@ class KolLogo {
|
|
|
18031
18130
|
}
|
|
18032
18131
|
render() {
|
|
18033
18132
|
var _a;
|
|
18034
|
-
return (hAsync(Host, { key: '
|
|
18133
|
+
return (hAsync(Host, { key: 'e99716f0d792fa12a8f211ceb9dbf20608b02404', class: "kol-logo" }, hAsync("svg", { key: '7e660a9ecfefc16c37846bbf42e7bf92eb8b8abb', "aria-label": translate('kol-logo-description', { placeholders: { orgShort: this.state._org, orgLong: getAriaLabel(this.state._org) } }), role: "img", viewBox: "0 0 225 100" }, hAsync("rect", { key: '9ce71f1b7e4c7643f7430591f2042fa6e3edef22', width: "100%", height: "100%", fill: "white" }), hAsync("svg", { key: '819c6dc3223544570a7c1f0b31d180942e140eb8', x: "0", y: "4", height: "75" }, hAsync(Adler, { key: 'd51c74d633ed6d7d9e5fea268e1cc965a8fde42e' })), hAsync("svg", { key: 'bd7b4dbd0084babd5818366a935874d0dc1014c3', x: "40.5", y: "3.5", height: "100" }, hAsync("rect", { key: 'ef334c27c11f68f3e716f86926e8abb2c8f830d0', width: "5", height: "30" }), hAsync("rect", { key: '8e965aaca880244457a2f4e4da65c201a79a002b', y: "30", width: "5", height: "30", fill: "red" }), hAsync("rect", { key: 'f2b406859435e5771f1cfa5ee1262e83d93e4b6f', y: "60", width: "5", height: "30", fill: "#fc0" })), hAsync("svg", { key: '05150ad82cbd57c88c616ddbe1a35e8aae35fbcc', x: "50", y: "0" }, hAsync("text", { key: '279f02ee9463f090328c5b4043e0102858eea34f', x: "0", y: "-0.05em", "font-family": "BundesSans Web", style: { backgroundColor: 'white', color: 'black' } }, BUND_LOGO_TEXT_MAP.has(this.state._org) ? (hAsync("tspan", null, (_a = BUND_LOGO_TEXT_MAP.get(this.state._org)) === null || _a === void 0 ? void 0 : _a.map((text, index) => {
|
|
18035
18134
|
return (hAsync("tspan", { x: "0", dy: "1.1em", key: `kol-logo-text-${index}` }, text));
|
|
18036
18135
|
}))) : (hAsync("tspan", { fill: "red" }, hAsync("tspan", { x: "0", dy: "1.1em" }, "Der Schl\u00FCsselwert"), hAsync("tspan", { x: "0", dy: "1.1em", "font-weight": "bold" }, "'", this.state._org, "'"), hAsync("tspan", { x: "0", dy: "1.1em" }, "ist nicht definiert."), hAsync("tspan", { x: "0", dy: "1.1em" }, "oder freigegeben."))))))));
|
|
18037
18136
|
}
|
|
@@ -18203,7 +18302,7 @@ class KolModal {
|
|
|
18203
18302
|
}
|
|
18204
18303
|
}
|
|
18205
18304
|
render() {
|
|
18206
|
-
return (hAsync(Host, { key: '
|
|
18305
|
+
return (hAsync(Host, { key: '2819e0a6275d7f69108ec59713aa22432bad6465', class: "kol-modal", ref: (el) => {
|
|
18207
18306
|
this.hostElement = el;
|
|
18208
18307
|
} }, this.state._activeElement && (hAsync("div", { class: "overlay" }, hAsync("div", { class: "modal", style: {
|
|
18209
18308
|
width: this.state._width,
|
|
@@ -18281,6 +18380,13 @@ class KolModal {
|
|
|
18281
18380
|
const defaultStyleCss$f = "@layer kol-global {\n .sc-kol-nav-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-nav-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-nav-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-nav-default-h > div {\n display: grid;\n place-items: center;\n }\n :not(.is-compact) nav {\n width: 100%;\n }\n .list {\n display: flex;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .list.vertical {\n flex-direction: column;\n }\n .entry {\n display: flex;\n }\n .entry-item {\n flex-grow: 1;\n }\n}";
|
|
18282
18381
|
var KolNavDefaultStyle0 = defaultStyleCss$f;
|
|
18283
18382
|
|
|
18383
|
+
const entryIsLink = (entryProps) => {
|
|
18384
|
+
return typeof entryProps._href === 'string';
|
|
18385
|
+
};
|
|
18386
|
+
const entryIsButton = (entryProps) => {
|
|
18387
|
+
var _a;
|
|
18388
|
+
return entryProps._href === undefined && typeof ((_a = entryProps._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function';
|
|
18389
|
+
};
|
|
18284
18390
|
class KolNav {
|
|
18285
18391
|
constructor(hostRef) {
|
|
18286
18392
|
registerInstance(this, hostRef);
|
|
@@ -18323,14 +18429,23 @@ class KolNav {
|
|
|
18323
18429
|
collapseChildren(children) {
|
|
18324
18430
|
this.state = Object.assign(Object.assign({}, this.state), { _expandedChildren: this.state._expandedChildren.filter((searchChildren) => searchChildren != children) });
|
|
18325
18431
|
}
|
|
18326
|
-
entry(collapsible, hideLabel, hasChildren,
|
|
18432
|
+
entry(collapsible, hideLabel, hasChildren, entry, expanded) {
|
|
18327
18433
|
const icons = this.state._hasIconsWhenExpanded || this.state._hideLabel
|
|
18328
|
-
?
|
|
18434
|
+
? entry._icons || (this.state._hideLabel ? 'codicon codicon-symbol-method' : undefined)
|
|
18329
18435
|
: undefined;
|
|
18330
|
-
return (hAsync("div", { class: { entry: true, 'hide-label': hideLabel } },
|
|
18436
|
+
return (hAsync("div", { class: { entry: true, 'hide-label': hideLabel } }, entryIsLink(entry) ? (hAsync(KolLinkWcTag, Object.assign({ class: "entry-item" }, entry, { _hideLabel: hideLabel, _icons: icons }))) : (hAsync(KolButtonWcTag, { class: "entry-item", _label: entry._label, _hideLabel: hideLabel, _icons: icons, _on: {
|
|
18437
|
+
onClick: (event, value) => {
|
|
18438
|
+
if (entryIsButton(entry) && typeof entry._on.onClick === 'function') {
|
|
18439
|
+
entry._on.onClick(event, value);
|
|
18440
|
+
}
|
|
18441
|
+
else {
|
|
18442
|
+
this.handleToggleExpansionClick(entry._children);
|
|
18443
|
+
}
|
|
18444
|
+
},
|
|
18445
|
+
} })), hasChildren ? this.expandButton(collapsible, entry, expanded) : ''));
|
|
18331
18446
|
}
|
|
18332
18447
|
expandButton(collapsible, link, expanded) {
|
|
18333
|
-
return (hAsync(
|
|
18448
|
+
return (hAsync(KolButtonWcTag, { class: "expand-button", _ariaExpanded: expanded, _disabled: !collapsible, _icons: 'codicon codicon-' + (expanded ? 'remove' : 'add'), _hideLabel: true, _label: `Untermenü zu ${link._label} ${expanded ? 'schließen' : 'öffnen'}`, _on: { onClick: () => this.handleToggleExpansionClick(link._children) } }));
|
|
18334
18449
|
}
|
|
18335
18450
|
li(collapsible, hideLabel, deep, index, link, orientation) {
|
|
18336
18451
|
const active = !!link._active;
|
|
@@ -18371,11 +18486,11 @@ class KolNav {
|
|
|
18371
18486
|
const collapsible = this.state._collapsible === true;
|
|
18372
18487
|
const hideLabel = this.state._hideLabel === true;
|
|
18373
18488
|
const orientation = this.state._orientation;
|
|
18374
|
-
return (hAsync(Host, { key: '
|
|
18489
|
+
return (hAsync(Host, { key: '8e055bdf686c2adc6338cf663dc5f873836eaba6', class: "kol-nav" }, hAsync("div", { key: '8f095f7c3370e33d085d96cfe36b464d904747af', class: {
|
|
18375
18490
|
nav: true,
|
|
18376
18491
|
[orientation]: true,
|
|
18377
18492
|
'is-compact': this.state._hideLabel,
|
|
18378
|
-
} }, hAsync("nav", { key: '
|
|
18493
|
+
} }, hAsync("nav", { key: 'd9070f9c00f1e19154ca3c571ac94318dfba3c9f', "aria-label": this.state._label, id: "nav" }, hAsync(this.linkList, { key: 'e4d91d4e2221db954a0cb1c4daedddd1fcce70af', collapsible: collapsible, hideLabel: hideLabel, deep: 0, links: this.state._links, orientation: orientation })), hasCompactButton && (hAsync("div", { class: "compact" }, hAsync(KolButtonTag, { _ariaControls: "nav", _ariaExpanded: !hideLabel, _icons: hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left', _hideLabel: true, _label: translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize'), _on: {
|
|
18379
18494
|
onClick: () => {
|
|
18380
18495
|
this.state = Object.assign(Object.assign({}, this.state), { _hideLabel: this.state._hideLabel === false });
|
|
18381
18496
|
},
|
|
@@ -18456,7 +18571,7 @@ class KolNav {
|
|
|
18456
18571
|
}; }
|
|
18457
18572
|
}
|
|
18458
18573
|
|
|
18459
|
-
const defaultStyleCss$e = "@charset \"UTF-8\";\n\n@layer kol-global {\n .sc-kol-pagination-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-pagination-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-pagination-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-pagination-default-h {\n align-items: center;\n display: grid;\n gap:
|
|
18574
|
+
const defaultStyleCss$e = "@charset \"UTF-8\";\n\n@layer kol-global {\n .sc-kol-pagination-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-pagination-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-pagination-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-pagination-default-h {\n align-items: center;\n display: grid;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n }\n .navigation-list {\n align-items: center;\n display: inline-flex;\n flex-wrap: wrap;\n gap: 0.5em;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n .separator:before {\n content: \"•••\";\n }\n}";
|
|
18460
18575
|
var KolPaginationDefaultStyle0 = defaultStyleCss$e;
|
|
18461
18576
|
|
|
18462
18577
|
const leftDoubleArrowIcon = {
|
|
@@ -18626,19 +18741,19 @@ class KolPagination {
|
|
|
18626
18741
|
return null;
|
|
18627
18742
|
}
|
|
18628
18743
|
});
|
|
18629
|
-
return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(
|
|
18744
|
+
return (hAsync(Host, { class: "kol-pagination" }, hAsync("nav", { "aria-label": this.state._label }, hAsync("ul", { class: "navigation-list" }, this.state._hasButtons.first && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "first", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-first'), _on: this.onGoToFirst, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.previous && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "previous", exportparts: "icon", _customClass: this.state._customClass, _disabled: this.state._page <= 1, _icons: leftSingleArrow, _hideLabel: true, _label: translate('kol-page-back'), _on: this.onGoBackward, _tooltipAlign: this.state._tooltipAlign }))), pageButtons, this.state._hasButtons.next && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "next", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightSingleArrowIcon, _hideLabel: true, _label: translate('kol-page-next'), _on: this.onGoForward, _tooltipAlign: this.state._tooltipAlign }))), this.state._hasButtons.last && (hAsync("li", null, hAsync(KolButtonWcTag, { class: "last", exportparts: "icon", _customClass: this.state._customClass, _disabled: count <= this.state._page, _icons: rightDoubleArrowIcon, _hideLabel: true, _label: translate('kol-page-last'), _on: this.onGoToEnd, _tooltipAlign: this.state._tooltipAlign }))))), ((_a = this.state._pageSizeOptions) === null || _a === void 0 ? void 0 : _a.length) > 0 && (hAsync(KolSelectTag, { _hideLabel: true, _id: `pagination-size-${this.nonce}`, _label: translate('kol-entries-per-site'), _options: this.state._pageSizeOptions, _on: {
|
|
18630
18745
|
onChange: this.onChangePageSize,
|
|
18631
18746
|
}, _value: [this.state._pageSize] }))));
|
|
18632
18747
|
}
|
|
18633
18748
|
getUnselectedPageButton(page) {
|
|
18634
|
-
return (hAsync("li", null, hAsync(
|
|
18749
|
+
return (hAsync("li", null, hAsync(KolButtonWcTag, { exportparts: "icon", key: `${this.nonce}-${page}`, _customClass: this.state._customClass, _label: "", _on: {
|
|
18635
18750
|
onClick: (event) => {
|
|
18636
18751
|
this.onClick(event, page);
|
|
18637
18752
|
},
|
|
18638
18753
|
} }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, translate('kol-page')), " ", page))));
|
|
18639
18754
|
}
|
|
18640
18755
|
getSelectedPageButton(page) {
|
|
18641
|
-
return (hAsync("li", null, hAsync(
|
|
18756
|
+
return (hAsync("li", null, hAsync(KolButtonWcTag, { class: "selected", key: `${this.nonce}-selected`, _customClass: this.state._customClass, _disabled: true, _label: "" }, hAsync("span", { slot: "expert" }, hAsync("span", { class: "visually-hidden" }, translate('kol-page')), " ", page))));
|
|
18642
18757
|
}
|
|
18643
18758
|
validateBoundaryCount(value) {
|
|
18644
18759
|
watchNumber(this, '_boundaryCount', Math.max(0, value !== null && value !== void 0 ? value : 1));
|
|
@@ -20847,7 +20962,7 @@ class KolPopover {
|
|
|
20847
20962
|
});
|
|
20848
20963
|
}
|
|
20849
20964
|
render() {
|
|
20850
|
-
return (hAsync(Host, { key: '
|
|
20965
|
+
return (hAsync(Host, { key: '75411d41cdaa39bfb0038556b160d4ed35b21341', ref: this.catchHostAndTriggerElement, class: "kol-popover-wc" }, hAsync("div", { key: '6802b4f0ab7ad5aababaca54048bc62e1179e4e3', class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { key: 'b122939f481081627e2ed57ff3a75799a33c94fe', class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", { key: '38bfe558dd55f601bdf43cc3f0d8478791d9afca' }))));
|
|
20851
20966
|
}
|
|
20852
20967
|
validateAlign(value) {
|
|
20853
20968
|
validateAlign(this, value);
|
|
@@ -20920,7 +21035,7 @@ class KolProcess {
|
|
|
20920
21035
|
};
|
|
20921
21036
|
}
|
|
20922
21037
|
render() {
|
|
20923
|
-
return (hAsync(Host, { key: '
|
|
21038
|
+
return (hAsync(Host, { key: '9494fac580af6ee6a424ded9802ddea6fb7a0850', class: "kol-progress" }, createProgressSVG(this.state), hAsync("progress", { key: 'c027bb91f428b9a01379a5f75ed636dfd97104d7', "aria-busy": this.state._value < this.state._max ? 'true' : 'false', max: this.state._max, value: this.state._value }), hAsync("span", { key: '4e87ca6b592a35472eca7261704fc27236e94dd9', "aria-live": "polite", "aria-relevant": "removals text", class: "visually-hidden" }, this.state._liveValue, " von ", this.state._max, " ", this.state._unit)));
|
|
20924
21039
|
}
|
|
20925
21040
|
validateLabel(value) {
|
|
20926
21041
|
validateLabel(this, value);
|
|
@@ -21029,9 +21144,9 @@ class KolQuote {
|
|
|
21029
21144
|
}
|
|
21030
21145
|
render() {
|
|
21031
21146
|
const hasExpertSlot = showExpertSlot(this.state._quote);
|
|
21032
|
-
return (hAsync(Host, { key: '
|
|
21147
|
+
return (hAsync(Host, { key: '93d15f42ad5eaeb21002ff90c0281ec3dbd74c52', class: "kol-quote" }, hAsync("figure", { key: '9275bb3e226b2bbdf7d050417e243851556846c7', class: {
|
|
21033
21148
|
[this.state._variant]: true,
|
|
21034
|
-
} }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", null, hAsync("cite", null, hAsync(
|
|
21149
|
+
} }, this.state._variant === 'block' ? (hAsync("blockquote", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))) : (hAsync("q", { cite: this.state._href }, this.state._quote, hAsync("span", { "aria-hidden": !hasExpertSlot ? 'true' : undefined, hidden: !hasExpertSlot }, hAsync("slot", { name: "expert" })))), typeof this.state._label === 'string' && this.state._label.length > 0 && (hAsync("figcaption", null, hAsync("cite", null, hAsync(KolLinkTag, { _href: this.state._href, _label: this.state._label, _target: "_blank" })))))));
|
|
21035
21150
|
}
|
|
21036
21151
|
static get watchers() { return {
|
|
21037
21152
|
"_label": ["validateLabel"],
|
|
@@ -21147,7 +21262,7 @@ class SelectController extends InputIconController {
|
|
|
21147
21262
|
}
|
|
21148
21263
|
}
|
|
21149
21264
|
|
|
21150
|
-
const defaultStyleCss$b = "@layer kol-global {\n .sc-kol-select-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-select-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-select-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-select-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:
|
|
21265
|
+
const defaultStyleCss$b = "@layer kol-global {\n .sc-kol-select-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-select-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-select-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-select-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@layer kol-component {}";
|
|
21151
21266
|
var KolSelectDefaultStyle0 = defaultStyleCss$b;
|
|
21152
21267
|
|
|
21153
21268
|
const isSelected = (valueList, optionValue) => {
|
|
@@ -21172,10 +21287,10 @@ class KolSelect {
|
|
|
21172
21287
|
render() {
|
|
21173
21288
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
21174
21289
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
21175
|
-
return (hAsync(Host, { key: '
|
|
21290
|
+
return (hAsync(Host, { key: '6a99ca9939b8feea22389b24047e75df7de3fb07', class: { 'kol-select': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'c0fd316f7e13fa499b7a0f2672347d607fe01fbc', class: {
|
|
21176
21291
|
'hide-label': !!this.state._hideLabel,
|
|
21177
21292
|
select: true,
|
|
21178
|
-
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled,
|
|
21293
|
+
}, _accessKey: this.state._accessKey, _disabled: this.state._disabled, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _icons: this.state._icons, _id: this.state._id, _label: this.state._label, _msg: this.state._msg, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched, onClick: () => { var _a; return (_a = this.ref) === null || _a === void 0 ? void 0 : _a.focus(); }, role: `presentation` }, hAsync("span", { key: '43a8853f439b9a23d3832802f9968308a8639e2e', slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { key: '859d4531edb77433a4f833d4d67088fba62a7b33', slot: "input" }, hAsync("select", { key: 'bd6e1f2be61254d51b68949f306c880dca9b63d8', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, multiple: this.state._multiple, name: this.state._name, required: this.state._required, size: this.state._rows, spellcheck: "false", onClick: this.controller.onFacade.onClick,
|
|
21179
21294
|
onBlur: this.controller.onFacade.onBlur,
|
|
21180
21295
|
onFocus: this.controller.onFacade.onFocus, onChange: this.onChange }, this.state._options.map((option, index) => {
|
|
21181
21296
|
const key = `-${index}`;
|
|
@@ -21215,6 +21330,7 @@ class KolSelect {
|
|
|
21215
21330
|
this._icons = undefined;
|
|
21216
21331
|
this._id = undefined;
|
|
21217
21332
|
this._label = undefined;
|
|
21333
|
+
this._msg = undefined;
|
|
21218
21334
|
this._multiple = false;
|
|
21219
21335
|
this._name = undefined;
|
|
21220
21336
|
this._on = undefined;
|
|
@@ -21267,6 +21383,9 @@ class KolSelect {
|
|
|
21267
21383
|
validateLabel(value) {
|
|
21268
21384
|
this.controller.validateLabel(value);
|
|
21269
21385
|
}
|
|
21386
|
+
validateMsg(value) {
|
|
21387
|
+
this.controller.validateMsg(value);
|
|
21388
|
+
}
|
|
21270
21389
|
validateMultiple(value) {
|
|
21271
21390
|
this.controller.validateMultiple(value);
|
|
21272
21391
|
}
|
|
@@ -21316,6 +21435,7 @@ class KolSelect {
|
|
|
21316
21435
|
"_icons": ["validateIcons"],
|
|
21317
21436
|
"_id": ["validateId"],
|
|
21318
21437
|
"_label": ["validateLabel"],
|
|
21438
|
+
"_msg": ["validateMsg"],
|
|
21319
21439
|
"_multiple": ["validateMultiple"],
|
|
21320
21440
|
"_name": ["validateName"],
|
|
21321
21441
|
"_on": ["validateOn"],
|
|
@@ -21344,6 +21464,7 @@ class KolSelect {
|
|
|
21344
21464
|
"_icons": [1],
|
|
21345
21465
|
"_id": [1],
|
|
21346
21466
|
"_label": [1],
|
|
21467
|
+
"_msg": [16],
|
|
21347
21468
|
"_multiple": [4],
|
|
21348
21469
|
"_name": [1],
|
|
21349
21470
|
"_on": [16],
|
|
@@ -21378,8 +21499,8 @@ class KolSkipNav {
|
|
|
21378
21499
|
};
|
|
21379
21500
|
}
|
|
21380
21501
|
render() {
|
|
21381
|
-
return (hAsync(Host, { key: '
|
|
21382
|
-
return (hAsync("li", { key: index }, hAsync(
|
|
21502
|
+
return (hAsync(Host, { key: 'b9f4d1caf5aaf6b063c1ecdd0dd1baf65999f61a', class: "kol-skip-nav" }, hAsync("nav", { key: 'e22cfe4a60de60505fb646377b3b908315958f4f', "aria-label": this.state._label }, hAsync("ul", { key: '8bf62af710317512ab379226d441fbce34aef8b6' }, this.state._links.map((link, index) => {
|
|
21503
|
+
return (hAsync("li", { key: index }, hAsync(KolLinkWcTag, Object.assign({}, link))));
|
|
21383
21504
|
})))));
|
|
21384
21505
|
}
|
|
21385
21506
|
validateLabel(value, _oldValue, initial = false) {
|
|
@@ -21434,7 +21555,7 @@ class KolSpan {
|
|
|
21434
21555
|
this._label = undefined;
|
|
21435
21556
|
}
|
|
21436
21557
|
render() {
|
|
21437
|
-
return (hAsync(
|
|
21558
|
+
return (hAsync(KolSpanWcTag, { key: '200891a3b4cfb837d7cff1c93664a905f95600d7', _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _accessKey: this._accessKey, class: "kol-span" }, hAsync("slot", { key: 'b23c76157a0f8831111f9d8f661145b0d8ee8425', name: "expert", slot: "expert" })));
|
|
21438
21559
|
}
|
|
21439
21560
|
static get style() { return {
|
|
21440
21561
|
default: KolSpanDefaultStyle0
|
|
@@ -21994,18 +22115,21 @@ var Any = /[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBF
|
|
|
21994
22115
|
|
|
21995
22116
|
var Cc = /[\0-\x1F\x7F-\x9F]/;
|
|
21996
22117
|
|
|
21997
|
-
var regex = /[\xAD\u0600-\u0605\u061C\u06DD\u070F\u0890\u0891\u08E2\u180E\u200B-\u200F\u202A-\u202E\u2060-\u2064\u2066-\u206F\uFEFF\uFFF9-\uFFFB]|\uD804[\uDCBD\uDCCD]|\uD80D[\uDC30-\uDC3F]|\uD82F[\uDCA0-\uDCA3]|\uD834[\uDD73-\uDD7A]|\uDB40[\uDC01\uDC20-\uDC7F]/;
|
|
22118
|
+
var regex$1 = /[\xAD\u0600-\u0605\u061C\u06DD\u070F\u0890\u0891\u08E2\u180E\u200B-\u200F\u202A-\u202E\u2060-\u2064\u2066-\u206F\uFEFF\uFFF9-\uFFFB]|\uD804[\uDCBD\uDCCD]|\uD80D[\uDC30-\uDC3F]|\uD82F[\uDCA0-\uDCA3]|\uD834[\uDD73-\uDD7A]|\uDB40[\uDC01\uDC20-\uDC7F]/;
|
|
21998
22119
|
|
|
21999
22120
|
var P = /[!-#%-\*,-\/:;\?@\[-\]_\{\}\xA1\xA7\xAB\xB6\xB7\xBB\xBF\u037E\u0387\u055A-\u055F\u0589\u058A\u05BE\u05C0\u05C3\u05C6\u05F3\u05F4\u0609\u060A\u060C\u060D\u061B\u061D-\u061F\u066A-\u066D\u06D4\u0700-\u070D\u07F7-\u07F9\u0830-\u083E\u085E\u0964\u0965\u0970\u09FD\u0A76\u0AF0\u0C77\u0C84\u0DF4\u0E4F\u0E5A\u0E5B\u0F04-\u0F12\u0F14\u0F3A-\u0F3D\u0F85\u0FD0-\u0FD4\u0FD9\u0FDA\u104A-\u104F\u10FB\u1360-\u1368\u1400\u166E\u169B\u169C\u16EB-\u16ED\u1735\u1736\u17D4-\u17D6\u17D8-\u17DA\u1800-\u180A\u1944\u1945\u1A1E\u1A1F\u1AA0-\u1AA6\u1AA8-\u1AAD\u1B5A-\u1B60\u1B7D\u1B7E\u1BFC-\u1BFF\u1C3B-\u1C3F\u1C7E\u1C7F\u1CC0-\u1CC7\u1CD3\u2010-\u2027\u2030-\u2043\u2045-\u2051\u2053-\u205E\u207D\u207E\u208D\u208E\u2308-\u230B\u2329\u232A\u2768-\u2775\u27C5\u27C6\u27E6-\u27EF\u2983-\u2998\u29D8-\u29DB\u29FC\u29FD\u2CF9-\u2CFC\u2CFE\u2CFF\u2D70\u2E00-\u2E2E\u2E30-\u2E4F\u2E52-\u2E5D\u3001-\u3003\u3008-\u3011\u3014-\u301F\u3030\u303D\u30A0\u30FB\uA4FE\uA4FF\uA60D-\uA60F\uA673\uA67E\uA6F2-\uA6F7\uA874-\uA877\uA8CE\uA8CF\uA8F8-\uA8FA\uA8FC\uA92E\uA92F\uA95F\uA9C1-\uA9CD\uA9DE\uA9DF\uAA5C-\uAA5F\uAADE\uAADF\uAAF0\uAAF1\uABEB\uFD3E\uFD3F\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE61\uFE63\uFE68\uFE6A\uFE6B\uFF01-\uFF03\uFF05-\uFF0A\uFF0C-\uFF0F\uFF1A\uFF1B\uFF1F\uFF20\uFF3B-\uFF3D\uFF3F\uFF5B\uFF5D\uFF5F-\uFF65]|\uD800[\uDD00-\uDD02\uDF9F\uDFD0]|\uD801\uDD6F|\uD802[\uDC57\uDD1F\uDD3F\uDE50-\uDE58\uDE7F\uDEF0-\uDEF6\uDF39-\uDF3F\uDF99-\uDF9C]|\uD803[\uDEAD\uDF55-\uDF59\uDF86-\uDF89]|\uD804[\uDC47-\uDC4D\uDCBB\uDCBC\uDCBE-\uDCC1\uDD40-\uDD43\uDD74\uDD75\uDDC5-\uDDC8\uDDCD\uDDDB\uDDDD-\uDDDF\uDE38-\uDE3D\uDEA9]|\uD805[\uDC4B-\uDC4F\uDC5A\uDC5B\uDC5D\uDCC6\uDDC1-\uDDD7\uDE41-\uDE43\uDE60-\uDE6C\uDEB9\uDF3C-\uDF3E]|\uD806[\uDC3B\uDD44-\uDD46\uDDE2\uDE3F-\uDE46\uDE9A-\uDE9C\uDE9E-\uDEA2\uDF00-\uDF09]|\uD807[\uDC41-\uDC45\uDC70\uDC71\uDEF7\uDEF8\uDF43-\uDF4F\uDFFF]|\uD809[\uDC70-\uDC74]|\uD80B[\uDFF1\uDFF2]|\uD81A[\uDE6E\uDE6F\uDEF5\uDF37-\uDF3B\uDF44]|\uD81B[\uDE97-\uDE9A\uDFE2]|\uD82F\uDC9F|\uD836[\uDE87-\uDE8B]|\uD83A[\uDD5E\uDD5F]/;
|
|
22000
22121
|
|
|
22122
|
+
var regex = /[\$\+<->\^`\|~\xA2-\xA6\xA8\xA9\xAC\xAE-\xB1\xB4\xB8\xD7\xF7\u02C2-\u02C5\u02D2-\u02DF\u02E5-\u02EB\u02ED\u02EF-\u02FF\u0375\u0384\u0385\u03F6\u0482\u058D-\u058F\u0606-\u0608\u060B\u060E\u060F\u06DE\u06E9\u06FD\u06FE\u07F6\u07FE\u07FF\u0888\u09F2\u09F3\u09FA\u09FB\u0AF1\u0B70\u0BF3-\u0BFA\u0C7F\u0D4F\u0D79\u0E3F\u0F01-\u0F03\u0F13\u0F15-\u0F17\u0F1A-\u0F1F\u0F34\u0F36\u0F38\u0FBE-\u0FC5\u0FC7-\u0FCC\u0FCE\u0FCF\u0FD5-\u0FD8\u109E\u109F\u1390-\u1399\u166D\u17DB\u1940\u19DE-\u19FF\u1B61-\u1B6A\u1B74-\u1B7C\u1FBD\u1FBF-\u1FC1\u1FCD-\u1FCF\u1FDD-\u1FDF\u1FED-\u1FEF\u1FFD\u1FFE\u2044\u2052\u207A-\u207C\u208A-\u208C\u20A0-\u20C0\u2100\u2101\u2103-\u2106\u2108\u2109\u2114\u2116-\u2118\u211E-\u2123\u2125\u2127\u2129\u212E\u213A\u213B\u2140-\u2144\u214A-\u214D\u214F\u218A\u218B\u2190-\u2307\u230C-\u2328\u232B-\u2426\u2440-\u244A\u249C-\u24E9\u2500-\u2767\u2794-\u27C4\u27C7-\u27E5\u27F0-\u2982\u2999-\u29D7\u29DC-\u29FB\u29FE-\u2B73\u2B76-\u2B95\u2B97-\u2BFF\u2CE5-\u2CEA\u2E50\u2E51\u2E80-\u2E99\u2E9B-\u2EF3\u2F00-\u2FD5\u2FF0-\u2FFF\u3004\u3012\u3013\u3020\u3036\u3037\u303E\u303F\u309B\u309C\u3190\u3191\u3196-\u319F\u31C0-\u31E3\u31EF\u3200-\u321E\u322A-\u3247\u3250\u3260-\u327F\u328A-\u32B0\u32C0-\u33FF\u4DC0-\u4DFF\uA490-\uA4C6\uA700-\uA716\uA720\uA721\uA789\uA78A\uA828-\uA82B\uA836-\uA839\uAA77-\uAA79\uAB5B\uAB6A\uAB6B\uFB29\uFBB2-\uFBC2\uFD40-\uFD4F\uFDCF\uFDFC-\uFDFF\uFE62\uFE64-\uFE66\uFE69\uFF04\uFF0B\uFF1C-\uFF1E\uFF3E\uFF40\uFF5C\uFF5E\uFFE0-\uFFE6\uFFE8-\uFFEE\uFFFC\uFFFD]|\uD800[\uDD37-\uDD3F\uDD79-\uDD89\uDD8C-\uDD8E\uDD90-\uDD9C\uDDA0\uDDD0-\uDDFC]|\uD802[\uDC77\uDC78\uDEC8]|\uD805\uDF3F|\uD807[\uDFD5-\uDFF1]|\uD81A[\uDF3C-\uDF3F\uDF45]|\uD82F\uDC9C|\uD833[\uDF50-\uDFC3]|\uD834[\uDC00-\uDCF5\uDD00-\uDD26\uDD29-\uDD64\uDD6A-\uDD6C\uDD83\uDD84\uDD8C-\uDDA9\uDDAE-\uDDEA\uDE00-\uDE41\uDE45\uDF00-\uDF56]|\uD835[\uDEC1\uDEDB\uDEFB\uDF15\uDF35\uDF4F\uDF6F\uDF89\uDFA9\uDFC3]|\uD836[\uDC00-\uDDFF\uDE37-\uDE3A\uDE6D-\uDE74\uDE76-\uDE83\uDE85\uDE86]|\uD838[\uDD4F\uDEFF]|\uD83B[\uDCAC\uDCB0\uDD2E\uDEF0\uDEF1]|\uD83C[\uDC00-\uDC2B\uDC30-\uDC93\uDCA0-\uDCAE\uDCB1-\uDCBF\uDCC1-\uDCCF\uDCD1-\uDCF5\uDD0D-\uDDAD\uDDE6-\uDE02\uDE10-\uDE3B\uDE40-\uDE48\uDE50\uDE51\uDE60-\uDE65\uDF00-\uDFFF]|\uD83D[\uDC00-\uDED7\uDEDC-\uDEEC\uDEF0-\uDEFC\uDF00-\uDF76\uDF7B-\uDFD9\uDFE0-\uDFEB\uDFF0]|\uD83E[\uDC00-\uDC0B\uDC10-\uDC47\uDC50-\uDC59\uDC60-\uDC87\uDC90-\uDCAD\uDCB0\uDCB1\uDD00-\uDE53\uDE60-\uDE6D\uDE70-\uDE7C\uDE80-\uDE88\uDE90-\uDEBD\uDEBF-\uDEC5\uDECE-\uDEDB\uDEE0-\uDEE8\uDEF0-\uDEF8\uDF00-\uDF92\uDF94-\uDFCA]/;
|
|
22123
|
+
|
|
22001
22124
|
var Z = /[ \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000]/;
|
|
22002
22125
|
|
|
22003
22126
|
var ucmicro = /*#__PURE__*/Object.freeze({
|
|
22004
22127
|
__proto__: null,
|
|
22005
22128
|
Any: Any,
|
|
22006
22129
|
Cc: Cc,
|
|
22007
|
-
Cf: regex,
|
|
22130
|
+
Cf: regex$1,
|
|
22008
22131
|
P: P,
|
|
22132
|
+
S: regex,
|
|
22009
22133
|
Z: Z
|
|
22010
22134
|
});
|
|
22011
22135
|
|
|
@@ -22720,7 +22844,7 @@ function isWhiteSpace (code) {
|
|
|
22720
22844
|
|
|
22721
22845
|
// Currently without astral characters support.
|
|
22722
22846
|
function isPunctChar (ch) {
|
|
22723
|
-
return P.test(ch)
|
|
22847
|
+
return P.test(ch) || regex.test(ch)
|
|
22724
22848
|
}
|
|
22725
22849
|
|
|
22726
22850
|
// Markdown ASCII punctuation characters.
|
|
@@ -22907,7 +23031,6 @@ function parseLinkDestination (str, start, max) {
|
|
|
22907
23031
|
const result = {
|
|
22908
23032
|
ok: false,
|
|
22909
23033
|
pos: 0,
|
|
22910
|
-
lines: 0,
|
|
22911
23034
|
str: ''
|
|
22912
23035
|
};
|
|
22913
23036
|
|
|
@@ -22976,52 +23099,66 @@ function parseLinkDestination (str, start, max) {
|
|
|
22976
23099
|
|
|
22977
23100
|
// Parse link title
|
|
22978
23101
|
|
|
22979
|
-
|
|
22980
|
-
|
|
22981
|
-
|
|
23102
|
+
// Parse link title within `str` in [start, max] range,
|
|
23103
|
+
// or continue previous parsing if `prev_state` is defined (equal to result of last execution).
|
|
23104
|
+
//
|
|
23105
|
+
function parseLinkTitle (str, start, max, prev_state) {
|
|
23106
|
+
let code;
|
|
22982
23107
|
let pos = start;
|
|
22983
23108
|
|
|
22984
|
-
const
|
|
23109
|
+
const state = {
|
|
23110
|
+
// if `true`, this is a valid link title
|
|
22985
23111
|
ok: false,
|
|
23112
|
+
// if `true`, this link can be continued on the next line
|
|
23113
|
+
can_continue: false,
|
|
23114
|
+
// if `ok`, it's the position of the first character after the closing marker
|
|
22986
23115
|
pos: 0,
|
|
22987
|
-
|
|
22988
|
-
str: ''
|
|
23116
|
+
// if `ok`, it's the unescaped title
|
|
23117
|
+
str: '',
|
|
23118
|
+
// expected closing marker character code
|
|
23119
|
+
marker: 0
|
|
22989
23120
|
};
|
|
22990
23121
|
|
|
22991
|
-
if (
|
|
23122
|
+
if (prev_state) {
|
|
23123
|
+
// this is a continuation of a previous parseLinkTitle call on the next line,
|
|
23124
|
+
// used in reference links only
|
|
23125
|
+
state.str = prev_state.str;
|
|
23126
|
+
state.marker = prev_state.marker;
|
|
23127
|
+
} else {
|
|
23128
|
+
if (pos >= max) { return state }
|
|
22992
23129
|
|
|
22993
|
-
|
|
23130
|
+
let marker = str.charCodeAt(pos);
|
|
23131
|
+
if (marker !== 0x22 /* " */ && marker !== 0x27 /* ' */ && marker !== 0x28 /* ( */) { return state }
|
|
22994
23132
|
|
|
22995
|
-
|
|
23133
|
+
start++;
|
|
23134
|
+
pos++;
|
|
22996
23135
|
|
|
22997
|
-
|
|
23136
|
+
// if opening marker is "(", switch it to closing marker ")"
|
|
23137
|
+
if (marker === 0x28) { marker = 0x29; }
|
|
22998
23138
|
|
|
22999
|
-
|
|
23000
|
-
|
|
23139
|
+
state.marker = marker;
|
|
23140
|
+
}
|
|
23001
23141
|
|
|
23002
23142
|
while (pos < max) {
|
|
23003
23143
|
code = str.charCodeAt(pos);
|
|
23004
|
-
if (code === marker) {
|
|
23005
|
-
|
|
23006
|
-
|
|
23007
|
-
|
|
23008
|
-
|
|
23009
|
-
|
|
23010
|
-
|
|
23011
|
-
return result
|
|
23012
|
-
} else if (code === 0x0A) {
|
|
23013
|
-
lines++;
|
|
23144
|
+
if (code === state.marker) {
|
|
23145
|
+
state.pos = pos + 1;
|
|
23146
|
+
state.str += unescapeAll(str.slice(start, pos));
|
|
23147
|
+
state.ok = true;
|
|
23148
|
+
return state
|
|
23149
|
+
} else if (code === 0x28 /* ( */ && state.marker === 0x29 /* ) */) {
|
|
23150
|
+
return state
|
|
23014
23151
|
} else if (code === 0x5C /* \ */ && pos + 1 < max) {
|
|
23015
23152
|
pos++;
|
|
23016
|
-
if (str.charCodeAt(pos) === 0x0A) {
|
|
23017
|
-
lines++;
|
|
23018
|
-
}
|
|
23019
23153
|
}
|
|
23020
23154
|
|
|
23021
23155
|
pos++;
|
|
23022
23156
|
}
|
|
23023
23157
|
|
|
23024
|
-
|
|
23158
|
+
// no closing marker found, but this link title may continue on the next line (for references)
|
|
23159
|
+
state.can_continue = true;
|
|
23160
|
+
state.str += unescapeAll(str.slice(start, pos));
|
|
23161
|
+
return state
|
|
23025
23162
|
}
|
|
23026
23163
|
|
|
23027
23164
|
// Just a shortcut for bulk export
|
|
@@ -23170,7 +23307,7 @@ function Renderer () {
|
|
|
23170
23307
|
* }
|
|
23171
23308
|
* ```
|
|
23172
23309
|
*
|
|
23173
|
-
* See [source code](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.
|
|
23310
|
+
* See [source code](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.mjs)
|
|
23174
23311
|
* for more details and examples.
|
|
23175
23312
|
**/
|
|
23176
23313
|
this.rules = assign$1({}, default_rules);
|
|
@@ -24672,6 +24809,14 @@ StateBlock.prototype.Token = Token;
|
|
|
24672
24809
|
|
|
24673
24810
|
// GFM table, https://github.github.com/gfm/#tables-extension-
|
|
24674
24811
|
|
|
24812
|
+
// Limit the amount of empty autocompleted cells in a table,
|
|
24813
|
+
// see https://github.com/markdown-it/markdown-it/issues/1000,
|
|
24814
|
+
//
|
|
24815
|
+
// Both pulldown-cmark and commonmark-hs limit the number of cells this way to ~200k.
|
|
24816
|
+
// We set it to 65k, which can expand user input by a factor of x370
|
|
24817
|
+
// (256x256 square is 1.8kB expanded into 650kB).
|
|
24818
|
+
const MAX_AUTOCOMPLETED_CELLS = 0x10000;
|
|
24819
|
+
|
|
24675
24820
|
function getLine (state, line) {
|
|
24676
24821
|
const pos = state.bMarks[line] + state.tShift[line];
|
|
24677
24822
|
const max = state.eMarks[line];
|
|
@@ -24827,6 +24972,7 @@ function table$1 (state, startLine, endLine, silent) {
|
|
|
24827
24972
|
state.push('thead_close', 'thead', -1);
|
|
24828
24973
|
|
|
24829
24974
|
let tbodyLines;
|
|
24975
|
+
let autocompletedCells = 0;
|
|
24830
24976
|
|
|
24831
24977
|
for (nextLine = startLine + 2; nextLine < endLine; nextLine++) {
|
|
24832
24978
|
if (state.sCount[nextLine] < state.blkIndent) { break }
|
|
@@ -24847,6 +24993,11 @@ function table$1 (state, startLine, endLine, silent) {
|
|
|
24847
24993
|
if (columns.length && columns[0] === '') columns.shift();
|
|
24848
24994
|
if (columns.length && columns[columns.length - 1] === '') columns.pop();
|
|
24849
24995
|
|
|
24996
|
+
// note: autocomplete count can be negative if user specifies more columns than header,
|
|
24997
|
+
// but that does not affect intended use (which is limiting expansion)
|
|
24998
|
+
autocompletedCells += columnCount - columns.length;
|
|
24999
|
+
if (autocompletedCells > MAX_AUTOCOMPLETED_CELLS) { break }
|
|
25000
|
+
|
|
24850
25001
|
if (nextLine === startLine + 2) {
|
|
24851
25002
|
const token_tbo = state.push('tbody_open', 'tbody', 1);
|
|
24852
25003
|
token_tbo.map = tbodyLines = [startLine + 2, 0];
|
|
@@ -25587,8 +25738,6 @@ function list (state, startLine, endLine, silent) {
|
|
|
25587
25738
|
}
|
|
25588
25739
|
|
|
25589
25740
|
function reference (state, startLine, _endLine, silent) {
|
|
25590
|
-
let lines = 0;
|
|
25591
|
-
|
|
25592
25741
|
let pos = state.bMarks[startLine] + state.tShift[startLine];
|
|
25593
25742
|
let max = state.eMarks[startLine];
|
|
25594
25743
|
let nextLine = startLine + 1;
|
|
@@ -25598,45 +25747,53 @@ function reference (state, startLine, _endLine, silent) {
|
|
|
25598
25747
|
|
|
25599
25748
|
if (state.src.charCodeAt(pos) !== 0x5B/* [ */) { return false }
|
|
25600
25749
|
|
|
25601
|
-
|
|
25602
|
-
|
|
25603
|
-
while (++pos < max) {
|
|
25604
|
-
if (state.src.charCodeAt(pos) === 0x5D /* ] */ &&
|
|
25605
|
-
state.src.charCodeAt(pos - 1) !== 0x5C/* \ */) {
|
|
25606
|
-
if (pos + 1 === max) { return false }
|
|
25607
|
-
if (state.src.charCodeAt(pos + 1) !== 0x3A/* : */) { return false }
|
|
25608
|
-
break
|
|
25609
|
-
}
|
|
25610
|
-
}
|
|
25611
|
-
|
|
25612
|
-
const endLine = state.lineMax;
|
|
25750
|
+
function getNextLine (nextLine) {
|
|
25751
|
+
const endLine = state.lineMax;
|
|
25613
25752
|
|
|
25614
|
-
|
|
25615
|
-
|
|
25753
|
+
if (nextLine >= endLine || state.isEmpty(nextLine)) {
|
|
25754
|
+
// empty line or end of input
|
|
25755
|
+
return null
|
|
25756
|
+
}
|
|
25616
25757
|
|
|
25617
|
-
|
|
25618
|
-
state.parentType = 'reference';
|
|
25758
|
+
let isContinuation = false;
|
|
25619
25759
|
|
|
25620
|
-
for (; nextLine < endLine && !state.isEmpty(nextLine); nextLine++) {
|
|
25621
25760
|
// this would be a code block normally, but after paragraph
|
|
25622
25761
|
// it's considered a lazy continuation regardless of what's there
|
|
25623
|
-
if (state.sCount[nextLine] - state.blkIndent > 3) {
|
|
25762
|
+
if (state.sCount[nextLine] - state.blkIndent > 3) { isContinuation = true; }
|
|
25624
25763
|
|
|
25625
25764
|
// quirk for blockquotes, this line should already be checked by that rule
|
|
25626
|
-
if (state.sCount[nextLine] < 0) {
|
|
25765
|
+
if (state.sCount[nextLine] < 0) { isContinuation = true; }
|
|
25766
|
+
|
|
25767
|
+
if (!isContinuation) {
|
|
25768
|
+
const terminatorRules = state.md.block.ruler.getRules('reference');
|
|
25769
|
+
const oldParentType = state.parentType;
|
|
25770
|
+
state.parentType = 'reference';
|
|
25771
|
+
|
|
25772
|
+
// Some tags can terminate paragraph without empty line.
|
|
25773
|
+
let terminate = false;
|
|
25774
|
+
for (let i = 0, l = terminatorRules.length; i < l; i++) {
|
|
25775
|
+
if (terminatorRules[i](state, nextLine, endLine, true)) {
|
|
25776
|
+
terminate = true;
|
|
25777
|
+
break
|
|
25778
|
+
}
|
|
25779
|
+
}
|
|
25627
25780
|
|
|
25628
|
-
|
|
25629
|
-
|
|
25630
|
-
|
|
25631
|
-
|
|
25632
|
-
terminate = true;
|
|
25633
|
-
break
|
|
25781
|
+
state.parentType = oldParentType;
|
|
25782
|
+
if (terminate) {
|
|
25783
|
+
// terminated by another block
|
|
25784
|
+
return null
|
|
25634
25785
|
}
|
|
25635
25786
|
}
|
|
25636
|
-
|
|
25787
|
+
|
|
25788
|
+
const pos = state.bMarks[nextLine] + state.tShift[nextLine];
|
|
25789
|
+
const max = state.eMarks[nextLine];
|
|
25790
|
+
|
|
25791
|
+
// max + 1 explicitly includes the newline
|
|
25792
|
+
return state.src.slice(pos, max + 1)
|
|
25637
25793
|
}
|
|
25638
25794
|
|
|
25639
|
-
|
|
25795
|
+
let str = state.src.slice(pos, max + 1);
|
|
25796
|
+
|
|
25640
25797
|
max = str.length;
|
|
25641
25798
|
let labelEnd = -1;
|
|
25642
25799
|
|
|
@@ -25648,11 +25805,21 @@ function reference (state, startLine, _endLine, silent) {
|
|
|
25648
25805
|
labelEnd = pos;
|
|
25649
25806
|
break
|
|
25650
25807
|
} else if (ch === 0x0A /* \n */) {
|
|
25651
|
-
|
|
25808
|
+
const lineContent = getNextLine(nextLine);
|
|
25809
|
+
if (lineContent !== null) {
|
|
25810
|
+
str += lineContent;
|
|
25811
|
+
max = str.length;
|
|
25812
|
+
nextLine++;
|
|
25813
|
+
}
|
|
25652
25814
|
} else if (ch === 0x5C /* \ */) {
|
|
25653
25815
|
pos++;
|
|
25654
25816
|
if (pos < max && str.charCodeAt(pos) === 0x0A) {
|
|
25655
|
-
|
|
25817
|
+
const lineContent = getNextLine(nextLine);
|
|
25818
|
+
if (lineContent !== null) {
|
|
25819
|
+
str += lineContent;
|
|
25820
|
+
max = str.length;
|
|
25821
|
+
nextLine++;
|
|
25822
|
+
}
|
|
25656
25823
|
}
|
|
25657
25824
|
}
|
|
25658
25825
|
}
|
|
@@ -25664,7 +25831,12 @@ function reference (state, startLine, _endLine, silent) {
|
|
|
25664
25831
|
for (pos = labelEnd + 2; pos < max; pos++) {
|
|
25665
25832
|
const ch = str.charCodeAt(pos);
|
|
25666
25833
|
if (ch === 0x0A) {
|
|
25667
|
-
|
|
25834
|
+
const lineContent = getNextLine(nextLine);
|
|
25835
|
+
if (lineContent !== null) {
|
|
25836
|
+
str += lineContent;
|
|
25837
|
+
max = str.length;
|
|
25838
|
+
nextLine++;
|
|
25839
|
+
}
|
|
25668
25840
|
} else if (isSpace(ch)) ; else {
|
|
25669
25841
|
break
|
|
25670
25842
|
}
|
|
@@ -25679,11 +25851,10 @@ function reference (state, startLine, _endLine, silent) {
|
|
|
25679
25851
|
if (!state.md.validateLink(href)) { return false }
|
|
25680
25852
|
|
|
25681
25853
|
pos = destRes.pos;
|
|
25682
|
-
lines += destRes.lines;
|
|
25683
25854
|
|
|
25684
25855
|
// save cursor state, we could require to rollback later
|
|
25685
25856
|
const destEndPos = pos;
|
|
25686
|
-
const destEndLineNo =
|
|
25857
|
+
const destEndLineNo = nextLine;
|
|
25687
25858
|
|
|
25688
25859
|
// [label]: destination 'title'
|
|
25689
25860
|
// ^^^ skipping those spaces
|
|
@@ -25691,7 +25862,12 @@ function reference (state, startLine, _endLine, silent) {
|
|
|
25691
25862
|
for (; pos < max; pos++) {
|
|
25692
25863
|
const ch = str.charCodeAt(pos);
|
|
25693
25864
|
if (ch === 0x0A) {
|
|
25694
|
-
|
|
25865
|
+
const lineContent = getNextLine(nextLine);
|
|
25866
|
+
if (lineContent !== null) {
|
|
25867
|
+
str += lineContent;
|
|
25868
|
+
max = str.length;
|
|
25869
|
+
nextLine++;
|
|
25870
|
+
}
|
|
25695
25871
|
} else if (isSpace(ch)) ; else {
|
|
25696
25872
|
break
|
|
25697
25873
|
}
|
|
@@ -25699,17 +25875,25 @@ function reference (state, startLine, _endLine, silent) {
|
|
|
25699
25875
|
|
|
25700
25876
|
// [label]: destination 'title'
|
|
25701
25877
|
// ^^^^^^^ parse this
|
|
25702
|
-
|
|
25878
|
+
let titleRes = state.md.helpers.parseLinkTitle(str, pos, max);
|
|
25879
|
+
while (titleRes.can_continue) {
|
|
25880
|
+
const lineContent = getNextLine(nextLine);
|
|
25881
|
+
if (lineContent === null) break
|
|
25882
|
+
str += lineContent;
|
|
25883
|
+
pos = max;
|
|
25884
|
+
max = str.length;
|
|
25885
|
+
nextLine++;
|
|
25886
|
+
titleRes = state.md.helpers.parseLinkTitle(str, pos, max, titleRes);
|
|
25887
|
+
}
|
|
25703
25888
|
let title;
|
|
25704
25889
|
|
|
25705
25890
|
if (pos < max && start !== pos && titleRes.ok) {
|
|
25706
25891
|
title = titleRes.str;
|
|
25707
25892
|
pos = titleRes.pos;
|
|
25708
|
-
lines += titleRes.lines;
|
|
25709
25893
|
} else {
|
|
25710
25894
|
title = '';
|
|
25711
25895
|
pos = destEndPos;
|
|
25712
|
-
|
|
25896
|
+
nextLine = destEndLineNo;
|
|
25713
25897
|
}
|
|
25714
25898
|
|
|
25715
25899
|
// skip trailing spaces until the rest of the line
|
|
@@ -25725,7 +25909,7 @@ function reference (state, startLine, _endLine, silent) {
|
|
|
25725
25909
|
// but it could still be a valid reference if we roll back
|
|
25726
25910
|
title = '';
|
|
25727
25911
|
pos = destEndPos;
|
|
25728
|
-
|
|
25912
|
+
nextLine = destEndLineNo;
|
|
25729
25913
|
while (pos < max) {
|
|
25730
25914
|
const ch = str.charCodeAt(pos);
|
|
25731
25915
|
if (!isSpace(ch)) { break }
|
|
@@ -25756,9 +25940,7 @@ function reference (state, startLine, _endLine, silent) {
|
|
|
25756
25940
|
state.env.references[label] = { title, href };
|
|
25757
25941
|
}
|
|
25758
25942
|
|
|
25759
|
-
state.
|
|
25760
|
-
|
|
25761
|
-
state.line = startLine + lines + 1;
|
|
25943
|
+
state.line = nextLine;
|
|
25762
25944
|
return true
|
|
25763
25945
|
}
|
|
25764
25946
|
|
|
@@ -25815,8 +25997,8 @@ var block_names = [
|
|
|
25815
25997
|
'option',
|
|
25816
25998
|
'p',
|
|
25817
25999
|
'param',
|
|
26000
|
+
'search',
|
|
25818
26001
|
'section',
|
|
25819
|
-
'source',
|
|
25820
26002
|
'summary',
|
|
25821
26003
|
'table',
|
|
25822
26004
|
'tbody',
|
|
@@ -25845,9 +26027,9 @@ const attribute = '(?:\\s+' + attr_name + '(?:\\s*=\\s*' + attr_value + ')?)';
|
|
|
25845
26027
|
const open_tag = '<[A-Za-z][A-Za-z0-9\\-]*' + attribute + '*\\s*\\/?>';
|
|
25846
26028
|
|
|
25847
26029
|
const close_tag = '<\\/[A-Za-z][A-Za-z0-9\\-]*\\s*>';
|
|
25848
|
-
const comment = '
|
|
26030
|
+
const comment = '<!---?>|<!--(?:[^-]|-[^-]|--[^>])*-->';
|
|
25849
26031
|
const processing = '<[?][\\s\\S]*?[?]>';
|
|
25850
|
-
const declaration = '<![A-
|
|
26032
|
+
const declaration = '<![A-Za-z][^>]*>';
|
|
25851
26033
|
const cdata = '<!\\[CDATA\\[[\\s\\S]*?\\]\\]>';
|
|
25852
26034
|
|
|
25853
26035
|
const HTML_TAG_RE = new RegExp('^(?:' + open_tag + '|' + close_tag + '|' + comment +
|
|
@@ -26304,9 +26486,6 @@ StateInline.prototype.push = function (type, tag, nesting) {
|
|
|
26304
26486
|
// - canSplitWord - determine if these markers can be found inside a word
|
|
26305
26487
|
//
|
|
26306
26488
|
StateInline.prototype.scanDelims = function (start, canSplitWord) {
|
|
26307
|
-
let can_open, can_close;
|
|
26308
|
-
let left_flanking = true;
|
|
26309
|
-
let right_flanking = true;
|
|
26310
26489
|
const max = this.posMax;
|
|
26311
26490
|
const marker = this.src.charCodeAt(start);
|
|
26312
26491
|
|
|
@@ -26327,29 +26506,13 @@ StateInline.prototype.scanDelims = function (start, canSplitWord) {
|
|
|
26327
26506
|
const isLastWhiteSpace = isWhiteSpace(lastChar);
|
|
26328
26507
|
const isNextWhiteSpace = isWhiteSpace(nextChar);
|
|
26329
26508
|
|
|
26330
|
-
|
|
26331
|
-
|
|
26332
|
-
|
|
26333
|
-
|
|
26334
|
-
left_flanking = false;
|
|
26335
|
-
}
|
|
26336
|
-
}
|
|
26509
|
+
const left_flanking =
|
|
26510
|
+
!isNextWhiteSpace && (!isNextPunctChar || isLastWhiteSpace || isLastPunctChar);
|
|
26511
|
+
const right_flanking =
|
|
26512
|
+
!isLastWhiteSpace && (!isLastPunctChar || isNextWhiteSpace || isNextPunctChar);
|
|
26337
26513
|
|
|
26338
|
-
|
|
26339
|
-
|
|
26340
|
-
} else if (isLastPunctChar) {
|
|
26341
|
-
if (!(isNextWhiteSpace || isNextPunctChar)) {
|
|
26342
|
-
right_flanking = false;
|
|
26343
|
-
}
|
|
26344
|
-
}
|
|
26345
|
-
|
|
26346
|
-
if (!canSplitWord) {
|
|
26347
|
-
can_open = left_flanking && (!right_flanking || isLastPunctChar);
|
|
26348
|
-
can_close = right_flanking && (!left_flanking || isNextPunctChar);
|
|
26349
|
-
} else {
|
|
26350
|
-
can_open = left_flanking;
|
|
26351
|
-
can_close = right_flanking;
|
|
26352
|
-
}
|
|
26514
|
+
const can_open = left_flanking && (canSplitWord || !right_flanking || isLastPunctChar);
|
|
26515
|
+
const can_close = right_flanking && (canSplitWord || !left_flanking || isNextPunctChar);
|
|
26353
26516
|
|
|
26354
26517
|
return { can_open, can_close, length: count }
|
|
26355
26518
|
};
|
|
@@ -26417,7 +26580,7 @@ function text (state, silent) {
|
|
|
26417
26580
|
// Alternative implementation, for memory.
|
|
26418
26581
|
//
|
|
26419
26582
|
// It costs 10% of performance, but allows extend terminators list, if place it
|
|
26420
|
-
// to `
|
|
26583
|
+
// to `ParserInline` property. Probably, will switch to it sometime, such
|
|
26421
26584
|
// flexibility required.
|
|
26422
26585
|
|
|
26423
26586
|
/*
|
|
@@ -29297,12 +29460,12 @@ function normalizeLinkText (url) {
|
|
|
29297
29460
|
* MarkdownIt provides named presets as a convenience to quickly
|
|
29298
29461
|
* enable/disable active syntax rules and options for common use cases.
|
|
29299
29462
|
*
|
|
29300
|
-
* - ["commonmark"](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/commonmark.
|
|
29463
|
+
* - ["commonmark"](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/commonmark.mjs) -
|
|
29301
29464
|
* configures parser to strict [CommonMark](http://commonmark.org/) mode.
|
|
29302
|
-
* - [default](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/default.
|
|
29465
|
+
* - [default](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/default.mjs) -
|
|
29303
29466
|
* similar to GFM, used when no preset name given. Enables all available rules,
|
|
29304
29467
|
* but still without html, typographer & autolinker.
|
|
29305
|
-
* - ["zero"](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/zero.
|
|
29468
|
+
* - ["zero"](https://github.com/markdown-it/markdown-it/blob/master/lib/presets/zero.mjs) -
|
|
29306
29469
|
* all rules disabled. Useful to quickly setup your config via `.enable()`.
|
|
29307
29470
|
* For example, when you need only `bold` and `italic` markup and nothing else.
|
|
29308
29471
|
*
|
|
@@ -29319,7 +29482,7 @@ function normalizeLinkText (url) {
|
|
|
29319
29482
|
* Can be useful for external highlighters.
|
|
29320
29483
|
* - __linkify__ - `false`. Set `true` to autoconvert URL-like text to links.
|
|
29321
29484
|
* - __typographer__ - `false`. Set `true` to enable [some language-neutral
|
|
29322
|
-
* replacement](https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.
|
|
29485
|
+
* replacement](https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.mjs) +
|
|
29323
29486
|
* quotes beautification (smartquotes).
|
|
29324
29487
|
* - __quotes__ - `“”‘’`, String or Array. Double + single quotes replacement
|
|
29325
29488
|
* pairs, when typographer enabled and smartquotes on. For example, you can
|
|
@@ -29445,7 +29608,7 @@ function MarkdownIt (presetName, options) {
|
|
|
29445
29608
|
* md.renderer.rules['my_token'] = myToken
|
|
29446
29609
|
* ```
|
|
29447
29610
|
*
|
|
29448
|
-
* See [[Renderer]] docs and [source code](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.
|
|
29611
|
+
* See [[Renderer]] docs and [source code](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.mjs).
|
|
29449
29612
|
**/
|
|
29450
29613
|
this.renderer = new Renderer();
|
|
29451
29614
|
|
|
@@ -29453,7 +29616,7 @@ function MarkdownIt (presetName, options) {
|
|
|
29453
29616
|
* MarkdownIt#linkify -> LinkifyIt
|
|
29454
29617
|
*
|
|
29455
29618
|
* [linkify-it](https://github.com/markdown-it/linkify-it) instance.
|
|
29456
|
-
* Used by [linkify](https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/linkify.
|
|
29619
|
+
* Used by [linkify](https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/linkify.mjs)
|
|
29457
29620
|
* rule.
|
|
29458
29621
|
**/
|
|
29459
29622
|
this.linkify = new LinkifyIt();
|
|
@@ -29756,10 +29919,10 @@ class KolSpanWc {
|
|
|
29756
29919
|
render() {
|
|
29757
29920
|
var _a, _b, _c, _d, _e;
|
|
29758
29921
|
const hideExpertSlot = !showExpertSlot(this.state._label);
|
|
29759
|
-
return (hAsync(Host, { key: '
|
|
29922
|
+
return (hAsync(Host, { key: '17cb9b501a4ced92791b8633123c62c89179a7de', class: {
|
|
29760
29923
|
'kol-span-wc': true,
|
|
29761
29924
|
'hide-label': !!this.state._hideLabel,
|
|
29762
|
-
} }, this.state._icons.top && (hAsync(
|
|
29925
|
+
} }, this.state._icons.top && (hAsync(KolIconTag, { 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: '27cb02736fcdfbaa0cd634e3cb31d72be6236132' }, this.state._icons.left && (hAsync(KolIconTag, { 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: 'dc41753567cbb94ba0e4dfcaf9f05e56520a36d1', "aria-hidden": hideExpertSlot ? 'true' : undefined, class: "span-label", hidden: hideExpertSlot }, hAsync("slot", { key: '40f84dbfec15357ebda4ffb43cfff3ba488b5947', name: "expert" })), this.state._accessKey && (hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey)), this.state._icons.right && (hAsync(KolIconTag, { 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, { 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 }))));
|
|
29763
29926
|
}
|
|
29764
29927
|
validateAccessKey(value) {
|
|
29765
29928
|
validateAccessKey(this, value);
|
|
@@ -29813,7 +29976,7 @@ class KolSpanWc {
|
|
|
29813
29976
|
}; }
|
|
29814
29977
|
}
|
|
29815
29978
|
|
|
29816
|
-
const defaultStyleCss$8 = "@layer kol-global {\n .sc-kol-spin-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-spin-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-spin-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .spin.cycle {\n width:
|
|
29979
|
+
const defaultStyleCss$8 = "@layer kol-global {\n .sc-kol-spin-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-spin-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-spin-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .spin.cycle {\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n height: calc(48rem / var(--kolibri-root-font-size, 16));\n }\n .spin.cycle > .loader {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n position: relative;\n animation: 2s linear infinite rotate;\n }\n .spin.cycle > .loader::before {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n inset: 0px;\n border-radius: 50%;\n border: 5px solid #333;\n animation: 3s linear infinite prixClipFix;\n }\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes prixClipFix {\n 0% {\n border-color: #fff;\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 25% {\n border-color: #666;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 50% {\n border-color: #fc0;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n }\n 75% {\n border-color: red;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 100% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n } \n @media (prefers-reduced-motion) {\n .spin.cycle > .loader {\n animation-duration: 4s;\n }\n .spin.cycle > .loader::before {\n animation-duration: 6s;\n }\n }\n}\n@layer kol-component {\n .spin.dot {\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span {\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n border-radius: 50%;\n border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:first-child {\n background-color: #fc0;\n z-index: 0;\n animation: 1s infinite spin1;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(2) {\n background-color: red;\n z-index: 1;\n animation: 1s infinite spin2;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(3) {\n background-color: #000;\n z-index: 1;\n animation: 1s infinite spin2;\n left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(4) {\n background-color: #666;\n z-index: 0;\n animation: 1s infinite spin3;\n left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n }\n @keyframes spin1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes spin2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n }\n }\n @keyframes spin3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n } \n @media (prefers-reduced-motion) {\n .spin.dot > span:first-child,\n .spin.dot > span:nth-child(2),\n .spin.dot > span:nth-child(3),\n .spin.dot > span:nth-child(4) {\n animation-duration: 2s;\n }\n }\n}\n@layer kol-component {\n .spin {\n display: block;\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n}";
|
|
29817
29980
|
var KolSpinDefaultStyle0 = defaultStyleCss$8;
|
|
29818
29981
|
|
|
29819
29982
|
function renderSpin(variant) {
|
|
@@ -29837,7 +30000,7 @@ class KolSpin {
|
|
|
29837
30000
|
};
|
|
29838
30001
|
}
|
|
29839
30002
|
render() {
|
|
29840
|
-
return (hAsync(Host, { key: '
|
|
30003
|
+
return (hAsync(Host, { key: 'ec37d2bdf4b9945800c447ec16e6ea33a6ddb37f', class: "kol-spin" }, this.state._show ? (hAsync("span", { "aria-busy": "true", "aria-label": translate('kol-action-running'), "aria-live": "polite", class: {
|
|
29841
30004
|
spin: true,
|
|
29842
30005
|
[this.state._variant]: true,
|
|
29843
30006
|
}, role: "alert" }, renderSpin(this.state._variant))) : (this.showToggled && hAsync("span", { "aria-label": translate('kol-action-done'), "aria-busy": "false", "aria-live": "polite", role: "alert" }))));
|
|
@@ -29874,7 +30037,7 @@ class KolSpin {
|
|
|
29874
30037
|
}; }
|
|
29875
30038
|
}
|
|
29876
30039
|
|
|
29877
|
-
const defaultStyleCss$7 = "@layer kol-global {\n .sc-kol-split-button-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-split-button-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-split-button-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-split-button-default-h {\n display: flex;\n position: relative;\n }\n .main-button {\n flex-grow: 1;\n text-align: left;\n }\n
|
|
30040
|
+
const defaultStyleCss$7 = "@layer kol-global {\n .sc-kol-split-button-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-split-button-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-split-button-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .sc-kol-split-button-default-h {\n display: flex;\n position: relative;\n }\n .main-button {\n flex-grow: 1;\n text-align: left;\n }\n \n .popover {\n height: 0;\n left: 0;\n min-width: 100%;\n overflow: hidden;\n position: absolute;\n top: 100%;\n transition: height 0.3s ease-in-out;\n }\n .popover-content {\n inset: 0 0 auto 0;\n min-width: 100%;\n position: absolute;\n }\n}";
|
|
29878
30041
|
var KolSplitButtonDefaultStyle0 = defaultStyleCss$7;
|
|
29879
30042
|
|
|
29880
30043
|
class KolSplitButton {
|
|
@@ -29942,12 +30105,12 @@ class KolSplitButton {
|
|
|
29942
30105
|
};
|
|
29943
30106
|
}
|
|
29944
30107
|
render() {
|
|
29945
|
-
return (hAsync(Host, { key: '
|
|
30108
|
+
return (hAsync(Host, { key: '7898654f49f93bc50a417f6835265b569c3a73b2', class: "kol-split-button" }, hAsync(KolButtonWcTag, { key: 'a9e18768bb8059fb837e5eeabca7c01289f06709', class: {
|
|
29946
30109
|
'main-button': true,
|
|
29947
30110
|
button: true,
|
|
29948
30111
|
[this._variant]: this._variant !== 'custom',
|
|
29949
30112
|
[this._customClass]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
|
|
29950
|
-
}, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: '
|
|
30113
|
+
}, _ariaControls: this._ariaControls, _ariaExpanded: this._ariaExpanded, _ariaSelected: this._ariaSelected, _customClass: this._customClass, _disabled: this._disabled, _icons: this._icons, _hideLabel: this._hideLabel, _label: this._label, _name: this._name, _on: this.clickButtonHandler, _role: this._role, _syncValueBySelector: this._syncValueBySelector, _tabIndex: this._tabIndex, _tooltipAlign: this._tooltipAlign, _type: this._type, _value: this._value, _variant: this._variant }), hAsync("div", { key: 'c303390829032681f7755a3e67b88d0cae9921fa', class: "horizontal-line" }), hAsync(KolButtonWcTag, { key: 'c90f62696b693a3d756bb0fd8e7c1a8eb6baf7d9', class: "secondary-button", _disabled: this._disabled, _hideLabel: true, _icons: "codicon codicon-triangle-down", _label: `dropdown ${this.state._show ? 'schließen' : 'öffnen'}`, _on: this.clickToggleHandler }), hAsync("div", { key: '36eb49b4e885ca7518a8a50392d0b5fcbad47839', class: "popover", ref: this.catchDropdownElements }, hAsync("div", { key: '5d4cfe7fc1ed75875834db0e71af50e1788fc907', class: "popover-content" }, hAsync("slot", { key: 'fc467f4eb37e58cb31c4bd3718efeadc0fbf8c08' })))));
|
|
29951
30114
|
}
|
|
29952
30115
|
static get style() { return {
|
|
29953
30116
|
default: KolSplitButtonDefaultStyle0
|
|
@@ -29993,7 +30156,7 @@ class KolSymbol {
|
|
|
29993
30156
|
};
|
|
29994
30157
|
}
|
|
29995
30158
|
render() {
|
|
29996
|
-
return (hAsync(Host, { key: '
|
|
30159
|
+
return (hAsync(Host, { key: 'f873ad7a782cffef4063cf9f988fd14f30670bc4', class: "kol-symbol" }, hAsync("span", { key: '9fddfd0eb165cbcdb75cc405206e7ea6a7df43a3', "aria-label": this.state._label, role: "term" }, this.state._symbol)));
|
|
29997
30160
|
}
|
|
29998
30161
|
validateLabel(value) {
|
|
29999
30162
|
validateLabel(this, value, {
|
|
@@ -30155,7 +30318,7 @@ class KolTable {
|
|
|
30155
30318
|
}, "aria-sort": sortDirection, "data-sort": `sort-${shortSortDirection}` }, hAsync("div", { class: "w-full flex gap-1 items-center" }, hAsync("div", { class: {
|
|
30156
30319
|
'w-full': true,
|
|
30157
30320
|
[headerCell.textAlign]: typeof headerCell.textAlign === 'string' && headerCell.textAlign.length > 0,
|
|
30158
|
-
}, style: { textAlign: headerCell.textAlign } }, headerCell.label), !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (hAsync(
|
|
30321
|
+
}, style: { textAlign: headerCell.textAlign } }, headerCell.label), !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (hAsync(KolButtonTag, { exportparts: "icon", _icons: sortButtonIcon, _hideLabel: true, _label: translate('kol-change-order', { placeholders: { colLabel: headerCell.label } }), _on: {
|
|
30159
30322
|
onClick: () => this.changeCellSort(headerCell),
|
|
30160
30323
|
}, _variant: "ghost" })))));
|
|
30161
30324
|
}
|
|
@@ -30589,7 +30752,7 @@ class KolTable {
|
|
|
30589
30752
|
? this.state._data.length.toString()
|
|
30590
30753
|
: '0',
|
|
30591
30754
|
},
|
|
30592
|
-
})), hAsync("div", null, hAsync(
|
|
30755
|
+
})), hAsync("div", null, hAsync(KolPaginationTag, { _boundaryCount: this.state._pagination._boundaryCount, _customClass: this.state._pagination._customClass, _on: this.handlePagination, _page: this.state._pagination._page, _pageSize: this.state._pagination._pageSize, _pageSizeOptions: this.state._pagination._pageSizeOptions || PAGINATION_OPTIONS, _siblingCount: this.state._pagination._siblingCount, _tooltipAlign: "bottom", _max: this.state._pagination._max || this.state._pagination._max || this.state._data.length, _label: translate('kol-table-pagination-label', { placeholders: { label: this.state._label } }) }))));
|
|
30593
30756
|
}
|
|
30594
30757
|
render() {
|
|
30595
30758
|
var _a, _b;
|
|
@@ -30597,11 +30760,9 @@ class KolTable {
|
|
|
30597
30760
|
const dataField = this.createDataField(displayedData, this.state._headers);
|
|
30598
30761
|
const paginationTop = this._paginationPosition === 'top' || this._paginationPosition === 'both' ? this.renderPagination() : null;
|
|
30599
30762
|
const paginationBottom = this._paginationPosition === 'bottom' || this._paginationPosition === 'both' ? this.renderPagination() : null;
|
|
30600
|
-
return (hAsync(Host, { key: '
|
|
30601
|
-
event.preventDefault();
|
|
30602
|
-
} }, hAsync("table", { key: '600355b22b947a5b262bb94b8ba2ec4a8d8ffe15', style: {
|
|
30763
|
+
return (hAsync(Host, { key: '0b8cd06996a98fcbe8d3296a28d06082d1074328', class: "kol-table" }, this.pageEndSlice > 0 && this.showPagination && paginationTop, hAsync("div", { key: 'f8fabd56df12fd92af06df94a5e6528785b79403', ref: (element) => (this.tableDivElement = element), class: "table", tabindex: this.tableDivElementHasScrollbar ? '-1' : undefined }, hAsync("table", { key: '7289a7ac2e0bee41c13e7de9c9a02686928b0b5a', style: {
|
|
30603
30764
|
minWidth: this.state._minWidth,
|
|
30604
|
-
} }, hAsync("div", { key: '
|
|
30765
|
+
} }, hAsync("div", { key: 'f84baebd6200ea5f72daa75fa3cd354530aa6dfe', class: "focus-element", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined, "aria-describedby": "caption" }, "\u00A0"), hAsync("caption", { key: 'd3c1d14609baea31541ed3c683c8c99a0febd8d9', id: "caption" }, this.state._label), Array.isArray(this.state._headers.horizontal) && (hAsync("thead", null, this.state._headers.horizontal.map((cols, rowIndex) => (hAsync("tr", { key: `thead-${rowIndex}` }, cols.map((col, colIndex) => {
|
|
30605
30766
|
if (col.asTd === true) {
|
|
30606
30767
|
return (hAsync("td", { key: `thead-${rowIndex}-${colIndex}-${col.label}`, class: {
|
|
30607
30768
|
[col.textAlign]: typeof col.textAlign === 'string' && col.textAlign.length > 0,
|
|
@@ -30650,11 +30811,11 @@ class KolTable {
|
|
|
30650
30811
|
}
|
|
30651
30812
|
return (hAsync("th", { class: col.textAlign ? `align-${col.textAlign}` : undefined, key: `thead-${rowIndex}-${colIndex}-${headerCell.label}`, scope: typeof headerCell.colSpan === 'number' && headerCell.colSpan > 1 ? 'colgroup' : 'col', colSpan: headerCell.colSpan, rowSpan: headerCell.rowSpan, style: {
|
|
30652
30813
|
width: col.width,
|
|
30653
|
-
}, "aria-sort": sortDirection, "data-sort": `sort-${shortSortDirection}` }, !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') ? (hAsync(
|
|
30814
|
+
}, "aria-sort": sortDirection, "data-sort": `sort-${shortSortDirection}` }, !this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') ? (hAsync(KolButtonWcTag, { class: "table-sort-button", exportparts: "icon", _icons: { right: sortButtonIcon }, _label: col.label, _on: {
|
|
30654
30815
|
onClick: () => this.changeCellSort(headerCell),
|
|
30655
30816
|
} })) : (col.label)));
|
|
30656
30817
|
}
|
|
30657
|
-
})))))), hAsync("tbody", { key: '
|
|
30818
|
+
})))))), hAsync("tbody", { key: '9572064fca9f8595677ae4053a930b5222a46f75' }, dataField.map(this.renderTableRow)), this.state._dataFoot.length > 0 ? this.renderFoot() : '')), this.pageEndSlice > 0 && this.showPagination && paginationBottom));
|
|
30658
30819
|
}
|
|
30659
30820
|
static get watchers() { return {
|
|
30660
30821
|
"_allowMultiSort": ["validateAllowMultiSort"],
|
|
@@ -30837,16 +30998,16 @@ class KolTabs {
|
|
|
30837
30998
|
};
|
|
30838
30999
|
}
|
|
30839
31000
|
renderButtonGroup() {
|
|
30840
|
-
return (hAsync(
|
|
31001
|
+
return (hAsync(KolButtonGroupWcTag, { class: "tabs-button-group", role: "tablist", "aria-label": this.state._label, onKeyDown: this.onKeyDown }, this.state._tabs.map((button, index) => (hAsync(KolButtonWcTag, { _disabled: button._disabled, _icons: button._icons, _hideLabel: button._hideLabel, _label: button._label, _on: this.callbacks, _tabIndex: this.state._selected === index ? 0 : -1, _tooltipAlign: button._tooltipAlign, _variant: this.state._selected === index ? 'custom' : undefined, _customClass: this.state._selected === index ? 'selected' : undefined, _ariaControls: `tabpanel-${index}`, _ariaSelected: this.state._selected === index, _id: `${this.state._label.replace(/\s/g, '-')}-tab-${index}`, _role: "tab", _value: index }))), this.showCreateTab && (hAsync(KolButtonWcTag, { class: "create-button", _label: this.onCreateLabel, _on: {
|
|
30841
31002
|
onClick: this.onCreate,
|
|
30842
31003
|
} }))));
|
|
30843
31004
|
}
|
|
30844
31005
|
render() {
|
|
30845
|
-
return (hAsync(Host, { key: '
|
|
31006
|
+
return (hAsync(Host, { key: '2fad7d033c45c57688d2278ff26f22a2e77f6742', class: "kol-tabs" }, hAsync("div", { key: '436e7e53f7c7aef6c40312d56f5c3d9546ddbf0e', ref: (el) => {
|
|
30846
31007
|
this.tabPanelsElement = el;
|
|
30847
31008
|
}, class: {
|
|
30848
31009
|
[`tabs-align-${this.state._align}`]: true,
|
|
30849
|
-
} }, this.renderButtonGroup(), hAsync("div", { key: '
|
|
31010
|
+
} }, this.renderButtonGroup(), hAsync("div", { key: '6ce5162fadaeec1a86c0d1c12274bffe17bc2371', class: "tabs-content", ref: this.catchTabPanelHost }))));
|
|
30850
31011
|
}
|
|
30851
31012
|
validateAlign(value) {
|
|
30852
31013
|
validateAlign(this, value);
|
|
@@ -31036,7 +31197,7 @@ class TextareaController extends InputController {
|
|
|
31036
31197
|
}
|
|
31037
31198
|
}
|
|
31038
31199
|
|
|
31039
|
-
const defaultStyleCss$4 = "@layer kol-global {\n .sc-kol-textarea-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-textarea-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-textarea-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-textarea-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:
|
|
31200
|
+
const defaultStyleCss$4 = "@layer kol-global {\n .sc-kol-textarea-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-textarea-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-textarea-default-h {\n \n max-width: 100%;\n }\n * {\n \n box-sizing: border-box;\n }\n \n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n \n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n \n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n \n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed !important;\n opacity: 0.5 !important;\n outline: none !important;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .required label > span::after,\n .required legend > span::after {\n content: \"*\";\n }\n}\n@layer kol-component {\n .sc-kol-textarea-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@layer kol-component {}";
|
|
31040
31201
|
var KolTextareaDefaultStyle0 = defaultStyleCss$4;
|
|
31041
31202
|
|
|
31042
31203
|
const increaseTextareaHeight = (el) => {
|
|
@@ -31056,7 +31217,7 @@ class KolTextarea {
|
|
|
31056
31217
|
render() {
|
|
31057
31218
|
const { ariaDescribedBy } = getRenderStates(this.state);
|
|
31058
31219
|
const hasExpertSlot = showExpertSlot(this.state._label);
|
|
31059
|
-
return (hAsync(Host, { key: '
|
|
31220
|
+
return (hAsync(Host, { key: '636cb3cc4cefb06fd6c60041ac2d623eb758762e', class: { 'kol-textarea': true, 'has-value': this.state._hasValue } }, hAsync(KolInputTag, { key: 'bb0c9dd6917b62d52838672951b1088f078e118f', class: { textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }, _accessKey: this.state._accessKey, _alert: this.state._alert, _currentLength: this.state._currentLength, _disabled: this.state._disabled, _hideError: this.state._hideError, _hasCounter: this.state._hasCounter, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _maxLength: this.state._maxLength, _msg: this.state._msg, _readOnly: this.state._readOnly, _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: '62b64cf042de7c57570353cd443cc4e843df8f83', 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: '5b4d535681a13845342183b030826e344a4457ec', slot: "input" }, hAsync("textarea", Object.assign({ key: 'eb97767e995b143b3394954b716f955c9353685d', ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, autoCapitalize: "off", autoCorrect: "off", disabled: this.state._disabled, id: this.state._id, maxlength: this.state._maxLength, name: this.state._name, readOnly: this.state._readOnly, required: this.state._required, rows: this.state._rows, placeholder: this.state._placeholder, spellcheck: "false" }, this.controller.onFacade, { onInput: this.onInput, style: {
|
|
31060
31221
|
resize: this.state._resize,
|
|
31061
31222
|
}, value: this.state._value }))))));
|
|
31062
31223
|
}
|
|
@@ -31086,6 +31247,7 @@ class KolTextarea {
|
|
|
31086
31247
|
this._id = undefined;
|
|
31087
31248
|
this._label = undefined;
|
|
31088
31249
|
this._maxLength = undefined;
|
|
31250
|
+
this._msg = undefined;
|
|
31089
31251
|
this._name = undefined;
|
|
31090
31252
|
this._on = undefined;
|
|
31091
31253
|
this._placeholder = undefined;
|
|
@@ -31145,6 +31307,9 @@ class KolTextarea {
|
|
|
31145
31307
|
validateMaxLength(value) {
|
|
31146
31308
|
this.controller.validateMaxLength(value);
|
|
31147
31309
|
}
|
|
31310
|
+
validateMsg(value) {
|
|
31311
|
+
this.controller.validateMsg(value);
|
|
31312
|
+
}
|
|
31148
31313
|
validateName(value) {
|
|
31149
31314
|
this.controller.validateName(value);
|
|
31150
31315
|
}
|
|
@@ -31207,6 +31372,7 @@ class KolTextarea {
|
|
|
31207
31372
|
"_id": ["validateId"],
|
|
31208
31373
|
"_label": ["validateLabel"],
|
|
31209
31374
|
"_maxLength": ["validateMaxLength"],
|
|
31375
|
+
"_msg": ["validateMsg"],
|
|
31210
31376
|
"_name": ["validateName"],
|
|
31211
31377
|
"_on": ["validateOn"],
|
|
31212
31378
|
"_placeholder": ["validatePlaceholder"],
|
|
@@ -31238,6 +31404,7 @@ class KolTextarea {
|
|
|
31238
31404
|
"_id": [1],
|
|
31239
31405
|
"_label": [1],
|
|
31240
31406
|
"_maxLength": [2, "_max-length"],
|
|
31407
|
+
"_msg": [16],
|
|
31241
31408
|
"_name": [1],
|
|
31242
31409
|
"_on": [16],
|
|
31243
31410
|
"_placeholder": [1],
|
|
@@ -31266,7 +31433,7 @@ const InternalToast = ({ toastState, onClose, key }) => {
|
|
|
31266
31433
|
}
|
|
31267
31434
|
};
|
|
31268
31435
|
return (hAsync("div", { class: `toast ${toastState.status}`, key: key },
|
|
31269
|
-
hAsync(
|
|
31436
|
+
hAsync(KolAlertTag, { class: "alert", _alert: true, _label: toastState.toast.label, _level: 0, _hasCloser: true, _type: toastState.toast.type, _variant: toastState.toast.alertVariant || 'card', _on: { onClose } },
|
|
31270
31437
|
hAsync("div", { ref: handleRef }, typeof toastState.toast.description === 'string' ? toastState.toast.description : null))));
|
|
31271
31438
|
};
|
|
31272
31439
|
|
|
@@ -31314,7 +31481,7 @@ class KolToastContainer {
|
|
|
31314
31481
|
}, TRANSITION_TIMEOUT);
|
|
31315
31482
|
}
|
|
31316
31483
|
render() {
|
|
31317
|
-
return (hAsync(Host, { key: '
|
|
31484
|
+
return (hAsync(Host, { key: 'f07fd5109ed0d409e24587c68ff6b6ac22029c77', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (hAsync(KolButtonTag, { _label: translate('kol-toast-close-all'), class: "close-all", _on: {
|
|
31318
31485
|
onClick: () => {
|
|
31319
31486
|
void this.closeAll();
|
|
31320
31487
|
},
|
|
@@ -31468,7 +31635,7 @@ class KolTooltip {
|
|
|
31468
31635
|
this.showOrHideTooltip();
|
|
31469
31636
|
}
|
|
31470
31637
|
render() {
|
|
31471
|
-
return (hAsync(Host, { key: '
|
|
31638
|
+
return (hAsync(Host, { key: 'd66390aa1b5fcee783e926c2afcd99d123ca6c3d', class: "kol-tooltip-wc" }, this.state._label !== '' && (hAsync("div", { class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync(KolSpanWcTag, { class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
|
|
31472
31639
|
}
|
|
31473
31640
|
validateAccessKey(value) {
|
|
31474
31641
|
validateAccessKey(this, value);
|
|
@@ -31547,7 +31714,7 @@ class KolTree {
|
|
|
31547
31714
|
this._label = undefined;
|
|
31548
31715
|
}
|
|
31549
31716
|
render() {
|
|
31550
|
-
return (hAsync(Host, { key: '
|
|
31717
|
+
return (hAsync(Host, { key: '1038483261c2b4929beeeeef68594fb81da9ba86', class: "kol-tree" }, hAsync(KolTreeWcTag, { key: 'cac350ec6d6f9b4f601cc4731782ea110921cbf1', _label: this._label }, hAsync("slot", { key: 'c7989f873174400d0fe3dac6a67af3bf6349fc9e' }))));
|
|
31551
31718
|
}
|
|
31552
31719
|
static get style() { return {
|
|
31553
31720
|
default: KolTreeDefaultStyle0
|
|
@@ -31595,7 +31762,7 @@ class KolTreeItem {
|
|
|
31595
31762
|
return (_b = (await ((_a = this.element) === null || _a === void 0 ? void 0 : _a.isOpen()))) !== null && _b !== void 0 ? _b : false;
|
|
31596
31763
|
}
|
|
31597
31764
|
render() {
|
|
31598
|
-
return (hAsync(
|
|
31765
|
+
return (hAsync(KolTreeItemWcTag, { key: '0e5d3a40b309446a14662830d862c9dbfd4968fb', class: "kol-tree-item", _active: this._active, _label: this._label, _open: this._open, _href: this._href, ref: (element) => (this.element = element) }, hAsync("slot", { key: 'e238c62349b04358899f4ea7fe58d4713175a3dd' })));
|
|
31599
31766
|
}
|
|
31600
31767
|
static get style() { return {
|
|
31601
31768
|
default: KolTreeItemDefaultStyle0
|
|
@@ -31635,11 +31802,11 @@ class KolTreeItemWc {
|
|
|
31635
31802
|
this._href = undefined;
|
|
31636
31803
|
}
|
|
31637
31804
|
render() {
|
|
31638
|
-
return (hAsync(Host, { key: '
|
|
31805
|
+
return (hAsync(Host, { key: '83bbef4a6573e8f8db6a79a62264c33b0bc1c8ee', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-item-wc" }, hAsync("li", { key: '7681e149dbabff21b30b58ef9438a1ffa6a6896d', class: "tree-item" }, hAsync(KolLinkTag, { key: 'e13e85b22f341446ca106124b90db1bdc9327123', class: {
|
|
31639
31806
|
'tree-link': true,
|
|
31640
31807
|
active: Boolean(this.state._active),
|
|
31641
|
-
}, _label: "", _href: this.state._href, ref: (element) => (this.linkElement = element), _tabIndex: this.state._active ? 0 : -1 }, hAsync("span", { key: '
|
|
31642
|
-
(this.state._open ? (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleCollapseClick(event) }, "-")) : (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleExpandClick(event) }, "+"))), ' ', this.state._label)), hAsync("ul", { key: '
|
|
31808
|
+
}, _label: "", _href: this.state._href, ref: (element) => (this.linkElement = element), _tabIndex: this.state._active ? 0 : -1 }, hAsync("span", { key: 'c379822a5452765a330f6700a262738dc5aa8414', slot: "expert" }, this.state._hasChildren &&
|
|
31809
|
+
(this.state._open ? (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleCollapseClick(event) }, "-")) : (hAsync("span", { class: "toggle-button", onClick: (event) => void this.handleExpandClick(event) }, "+"))), ' ', this.state._label)), hAsync("ul", { key: 'b09e26cdcad7a8a0e22517056db1562c28805ef2', hidden: !this.state._hasChildren || !this.state._open, role: "group" }, hAsync("slot", { key: '7010ba5c7ff4adbeb277e9e117b54d47d933258a' })))));
|
|
31643
31810
|
}
|
|
31644
31811
|
validateActive(value) {
|
|
31645
31812
|
validateActive(this, value || false);
|
|
@@ -31735,7 +31902,7 @@ class KolTreeWc {
|
|
|
31735
31902
|
validateLabel(this, value);
|
|
31736
31903
|
}
|
|
31737
31904
|
render() {
|
|
31738
|
-
return (hAsync(Host, { key: '
|
|
31905
|
+
return (hAsync(Host, { key: 'e890882e0c30f2dc33e17e0a7aff0a782b9cbaca', onSlotchange: this.handleSlotchange.bind(this), class: "kol-tree-wc" }, hAsync("nav", { key: '5c051db3cb3b7fd89aca1a7d2f19a4677c4345b0', class: "tree", "aria-label": this.state._label }, hAsync("ul", { key: '5b5b42abb8b55c468342890ed40e92d5e2bfb82d', class: "treeview-navigation", role: "tree", "aria-label": this.state._label }, hAsync("slot", { key: '4224f966cb6385a7322cceab67d6a9eea3000eb2' })))));
|
|
31739
31906
|
}
|
|
31740
31907
|
static isTreeItem(element) {
|
|
31741
31908
|
return (element === null || element === void 0 ? void 0 : element.tagName) === TREE_ITEM_TAG_NAME.toUpperCase();
|
|
@@ -31892,7 +32059,7 @@ class KolVersion {
|
|
|
31892
32059
|
};
|
|
31893
32060
|
}
|
|
31894
32061
|
render() {
|
|
31895
|
-
return (hAsync(Host, { key: '
|
|
32062
|
+
return (hAsync(Host, { key: 'a1a7b2f3472afbb4277dbf09170fea6702d36bb9', class: "kol-version" }, hAsync(KolBadgeTag, { key: '7d2bd52c7aa4246b8ef967d3e95f43af4c0f40ba', _color: "#bec5c9", _icons: {
|
|
31896
32063
|
left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
|
|
31897
32064
|
}, _label: this.state._label })));
|
|
31898
32065
|
}
|
|
@@ -32085,14 +32252,22 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
32085
32252
|
__proto__: null
|
|
32086
32253
|
});
|
|
32087
32254
|
|
|
32255
|
+
let initialized = false;
|
|
32256
|
+
const isInitialized = () => initialized;
|
|
32257
|
+
|
|
32088
32258
|
class ToasterService {
|
|
32089
32259
|
constructor(document, options) {
|
|
32090
32260
|
this.document = document;
|
|
32091
32261
|
this.options = options;
|
|
32092
|
-
|
|
32262
|
+
console.log('create', KolToastContainerTag);
|
|
32263
|
+
console.trace();
|
|
32264
|
+
this.toastContainerElement = this.document.createElement(KolToastContainerTag);
|
|
32093
32265
|
this.document.body.prepend(this.toastContainerElement);
|
|
32094
32266
|
}
|
|
32095
32267
|
static getInstance(document, options) {
|
|
32268
|
+
if (!isInitialized()) {
|
|
32269
|
+
throw new Error('Toaster: Call KoliBri bootstrap/register method first.');
|
|
32270
|
+
}
|
|
32096
32271
|
let instance = this.instances.get(document);
|
|
32097
32272
|
if (!instance) {
|
|
32098
32273
|
instance = new ToasterService(document, options);
|