@public-ui/hydrate 2.0.0-rc.8 → 2.0.0-rc.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +217 -224
- package/package.json +3 -3
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.7.1 | MIT Licensed | https://stenciljs.com
|
|
10
10
|
*/
|
|
11
11
|
const CONTENT_REF_ID = 'r';
|
|
12
12
|
const ORG_LOCATION_ID = 'o';
|
|
@@ -4961,7 +4961,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
|
|
|
4961
4961
|
|
|
4962
4962
|
|
|
4963
4963
|
const NAMESPACE = 'kolibri';
|
|
4964
|
-
const BUILD = /* kolibri */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true,
|
|
4964
|
+
const BUILD = /* kolibri */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: true, hydrateServerSide: true, hydratedAttribute: false, hydratedClass: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: true, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, shadowDomShim: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
|
|
4965
4965
|
|
|
4966
4966
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
4967
4967
|
|
|
@@ -5275,7 +5275,7 @@ var loglevel = createCommonjsModule(function (module) {
|
|
|
5275
5275
|
}));
|
|
5276
5276
|
});
|
|
5277
5277
|
|
|
5278
|
-
const STORE="object"==typeof window?window:"object"==typeof global?global:"object"==typeof self?self:{};let lockThemePatching=!0,warrentyWarning=!1;const THEME_NAME_PATTERN=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,isThemeNameValid=e=>"string"==typeof e&&THEME_NAME_PATTERN.test(e),validateThemeName=e=>{if(!1===isThemeNameValid(e))throw new Error(`[Theming] The theme identifier "${"string"==typeof e?e:""}" (Type: ${typeof e}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},patchThemeTag=(e,t,o)=>{validateThemeName(e),!0===lockThemePatching&&!1===warrentyWarning&&(warrentyWarning=!0,loglevel.warn(`[Theming] The theme process is locked. This means that the theme "${e}" should not be patched.\n\
|
|
5278
|
+
const STORE="object"==typeof window?window:"object"==typeof global?global:"object"==typeof self?self:{};let lockThemePatching=!0,warrentyWarning=!1;const THEME_NAME_PATTERN=/^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/,isThemeNameValid=e=>"string"==typeof e&&THEME_NAME_PATTERN.test(e),validateThemeName=e=>{if(!1===isThemeNameValid(e))throw new Error(`[Theming] The theme identifier "${"string"==typeof e?e:""}" (Type: ${typeof e}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`)},patchThemeTag=(e,t,o,s=!1)=>{validateThemeName(e),!0===lockThemePatching&&!1===warrentyWarning&&(warrentyWarning=!0,loglevel.warn(`[Theming] The theme process is locked. This means that the theme "${e}" should not be patched.\n\n\timport { register } from 'adopted-style-sheets';\n\timport { defineCustomElements } from '...';\n\timport { THEME } from '...';\n\n\tregister(THEME, defineCustomElements)\n\t.then(() => {\n\t\t// run your app or website\n\t})\n\t.catch(console.warn);`)),"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={}),"object"!=typeof STORE.A11yUi||null===STORE.A11yUi||"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes||(STORE.A11yUi.Themes={}),"object"!=typeof STORE.A11yUi||null===STORE.A11yUi||"object"!=typeof STORE.A11yUi.Themes||null===STORE.A11yUi.Themes||"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]||(STORE.A11yUi.Themes[e]={}),"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes&&"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]&&(s&&"string"==typeof STORE.A11yUi.Themes[e][t]?STORE.A11yUi.Themes[e][t]+=o:STORE.A11yUi.Themes[e][t]=o);},patchTheme=(e,t,o=!1)=>{if(validateThemeName(e),"object"==typeof t&&null!==t){Object.getOwnPropertyNames(t).forEach((s=>{const r=t[s];"string"==typeof r&&r.length>0&&patchThemeTag(e,s,r,o);}));}return e},getThemeNode=e=>{if(e instanceof HTMLElement){if("string"==typeof e.dataset.theme)return e;{let t=e.parentNode;for(;t instanceof ShadowRoot;)t=t.host;return getThemeNode(t)}}return null},getEncroachCss=(e={})=>"false"!==e.themeEncroachCss&&"true"!==e.themeReset&&{mode:"after"===e.themeEncroachCssMode||"before"===e.themeEncroachCssMode?e.themeEncroachCssMode:"before"},isTheCurrentThemeConfigValid=()=>"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Theme&&null!==STORE.A11yUi.Theme&&"boolean"==typeof STORE.A11yUi.Theme.cache&&"object"==typeof STORE.A11yUi.Theme.encroachCss&&null!==typeof STORE.A11yUi.Theme.encroachCss&&"string"==typeof STORE.A11yUi.Theme.encroachCss.mode&&"string"==typeof STORE.A11yUi.Theme.name,isTheCurrentThemeNotDefault=()=>!1==("object"==typeof STORE.A11yUi&&null!==STORE.A11yUi)||!1==("object"==typeof STORE.A11yUi.Theme&&null!==STORE.A11yUi.Theme)||"default"!==STORE.A11yUi.Theme.name,getThemeDetails=e=>{if(isTheCurrentThemeConfigValid())return STORE.A11yUi.Theme;{const t={cache:!0,encroachCss:getEncroachCss(),loglevel:"silent",name:null},o=getThemeNode(e);return o instanceof HTMLElement&&(t.cache="false"!==o.dataset.themeCache,t.encroachCss=getEncroachCss(o.dataset),t.loglevel="debug"===o.dataset.themeLoglevel?o.dataset.themeLoglevel:"silent",t.name=o.dataset.theme||null),t}},getThemeOptionDefaults=(e,t)=>({cache:!1!==t.cache,detect:"auto"===t.detect?"auto":"fixed",encroachCss:!1!==t.encroachCss&&("object"!=typeof t.encroachCss||null==t.encroachCss||"after"!==t.encroachCss.mode&&"before"!==t.encroachCss.mode?{mode:"before"}:t.encroachCss),loglevel:"debug"===t.loglevel?t.loglevel:"silent",name:"string"==typeof t.name?t.name:e}),setConfigureTheme=(e,t)=>{!1===isTheCurrentThemeConfigValid()&&isTheCurrentThemeNotDefault()&&"object"==typeof t&&null!==t&&("fixed"===(t=getThemeOptionDefaults(e,t)).detect?(null===t.name&&"string"==typeof e&&(t.name=e),e===t.name&&("object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={}),STORE.A11yUi.Theme=t,loglevel.info(`[Theming] Theme "${e}" was set as default theme.`))):loglevel.warn("[Theming] The presetting of theme options is only relevant by using 'fixed' detection mode."));};let registered=!1;const register$1=(e,t,o={})=>{!1===registered&&(registered=!0,lockThemePatching=!1),"function"==typeof e?e=new Set([e]):Array.isArray(e)&&(e=new Set(e)),e instanceof Set&&e.forEach((e=>{"function"==typeof e&&1===e.length?setConfigureTheme(e(patchTheme),{cache:o.theme?.cache,detect:o.theme?.detect,encroachCss:o.theme?.encroachCss,name:o.theme?.name}):loglevel.error("[Theming] Es wurde versucht eine nicht kompatibles Theme zu laden.");})),lockThemePatching=!0,"function"==typeof t?t=new Set([t]):Array.isArray(t)&&(t=new Set(t));const s=[];return t.forEach((e=>s.push(e()))),Promise.all(s)};const STYLING_TASK_QUEUE=new Map,HYDRATED_HISTORY=[],CSS_PROPERTIES_REGISTERED=new Set,CSS_STYLE_CACHE=new Map,REGEX_CSS_PROPERTIES=/--[^;]+/g,REGEX_SPLIT_CSS_PROPERTY=/:/;"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi||(STORE.A11yUi={CSS_STYLE_CACHE:CSS_STYLE_CACHE,HYDRATED_HISTORY:HYDRATED_HISTORY,STYLING_TASK_QUEUE:STYLING_TASK_QUEUE});const extractProperties=(e,t)=>{let o=t.match(REGEX_CSS_PROPERTIES);if(Array.isArray(o)){o=o.filter((e=>REGEX_SPLIT_CSS_PROPERTY.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}CSS_PROPERTIES_REGISTERED.add(e);},getCssStyle=(e,t)=>"object"==typeof STORE.A11yUi&&null!==STORE.A11yUi&&"object"==typeof STORE.A11yUi.Themes&&null!==STORE.A11yUi.Themes&&"object"==typeof STORE.A11yUi.Themes[e]&&null!==STORE.A11yUi.Themes[e]&&"string"==typeof STORE.A11yUi.Themes[e][t]?STORE.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",removeStyle=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName))break;e.removeChild(t);}},patchStyle=(e,t)=>{try{const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t);})),e.adoptedStyleSheets=o;}catch(o){t.reverse().forEach((t=>{const o=document.createElement("style");o.innerHTML=t,e.insertBefore(o,e.firstChild);}));}},encroachStyles=(e,t,o)=>{if(!1!==o){const s=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let r;try{r=[...Array.from(e.adoptedStyleSheets)];}catch(e){r=[];}"before"===o?.mode?(s.reverse().forEach((e=>t.unshift(e.innerHTML))),r.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(s.forEach((e=>t.push(e.innerHTML))),r.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},setThemeStyleAfterHydrated=(e,t,o)=>{const s=t.name||"default";let r;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");r=e.shadowRoot;}catch(t){r=e;}if(CSS_STYLE_CACHE.get(s)?.has(e.tagName))switchStyle(e,r,CSS_STYLE_CACHE.get(s)?.get(e.tagName),o);else {const a=getCssStyle(s,"PROPERTIES"),n=getCssStyle(s,"GLOBAL"),l=getCssStyle(s,e.tagName);!1===CSS_PROPERTIES_REGISTERED.has(s)&&extractProperties(s,n);const i=[a,n,l];encroachStyles(r,i,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,i),!0===t.cache&&(!1===CSS_STYLE_CACHE.has(s)&&CSS_STYLE_CACHE.set(s,new Map),CSS_STYLE_CACHE.get(s)?.set(e.tagName,i)),switchStyle(e,r,i,o);}},switchStyle=(e,t,o,s)=>{removeStyle(t),patchStyle(t,o),e.style.display=s;},logHydratedHistory=e=>{"debug"===e.loglevel&&HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:STYLING_TASK_QUEUE.size});},pushToDoTask=(e,t)=>{STYLING_TASK_QUEUE.set(e,{styleDisplay:e.style.display?`${e.style.display}`:null,themeDetails:t});},loggedPushToDoTask=(e,t)=>{pushToDoTask(e,t),logHydratedHistory(t);},deleteDoneTask=e=>{STYLING_TASK_QUEUE.delete(e);},loggedDeleteDoneTask=(e,t)=>{deleteDoneTask(e),logHydratedHistory(t);},waitForHydrated=e=>{const t=setTimeout((()=>{if(clearTimeout(t),STYLING_TASK_QUEUE.has(e)&&e.classList.contains("hydrated")){const{styleDisplay:t,themeDetails:o}=STYLING_TASK_QUEUE.get(e);setThemeStyleAfterHydrated(e,o,t),loggedDeleteDoneTask(e,o);}else waitForHydrated(e);}),25);},observerCallback=e=>{for(const t of e)if(STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=STYLING_TASK_QUEUE.get(t.target);setThemeStyleAfterHydrated(t.target,o,e),loggedDeleteDoneTask(t.target,o);}},observerOptions={attributes:!0,attributeFilter:["class"],childList:!1,subtree:!1};let observer;try{observer=new MutationObserver(observerCallback);}catch(e){observer=null;}const setThemeStyle=(e,t)=>{loggedPushToDoTask(e,t),observer?observer.observe(e,observerOptions):waitForHydrated(e),e.style.display="none";};
|
|
5279
5279
|
|
|
5280
5280
|
const consoleLogger = {
|
|
5281
5281
|
type: 'logger',
|
|
@@ -7850,7 +7850,7 @@ const initKoliBri = () => {
|
|
|
7850
7850
|
| . ' | .-. | | | ,--. | .-. \\ | .--' ,--.
|
|
7851
7851
|
| |\\ \\ | '-' | | | | | | '--' / | | | |
|
|
7852
7852
|
\`--' \`--´ \`---´ \`--' \`--' \`------´ \`--' \`--'
|
|
7853
|
-
🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.
|
|
7853
|
+
🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.0-rc.9
|
|
7854
7854
|
`, {
|
|
7855
7855
|
forceLog: true,
|
|
7856
7856
|
});
|
|
@@ -8033,14 +8033,14 @@ function hydrateApp(e, t, o, n, s) {
|
|
|
8033
8033
|
}, e.document.createElementNS = function t(o, n) {
|
|
8034
8034
|
const s = $.call(e.document, o, n);
|
|
8035
8035
|
return f(s), s;
|
|
8036
|
-
}, p = global.setTimeout((function
|
|
8036
|
+
}, p = global.setTimeout((function I() {
|
|
8037
8037
|
a(`Hydrate exceeded timeout${function e(t) {
|
|
8038
8038
|
return Array.from(t).map(waitingOnElementMsg);
|
|
8039
8039
|
}(d)}`);
|
|
8040
8040
|
}), t.timeout), plt.$resourcesUrl$ = new URL(t.resourcesUrl || "./", doc.baseURI).href,
|
|
8041
8041
|
globalScripts(), g(e.document.body), y().then(l).catch(a);
|
|
8042
|
-
} catch (
|
|
8043
|
-
a(
|
|
8042
|
+
} catch (D) {
|
|
8043
|
+
a(D);
|
|
8044
8044
|
}
|
|
8045
8045
|
}
|
|
8046
8046
|
|
|
@@ -8251,10 +8251,13 @@ const createTime = (e, t = "") => {
|
|
|
8251
8251
|
r !== (r = r.replace(/^xlink\:?/, "")) && (t = r, d = !0), null == n || !1 === n ? !1 === n && "" !== e.getAttribute(t) || (d ? e.removeAttributeNS(XLINK_NS, t) : e.removeAttribute(t)) : (!a || 4 & l || s) && !i && (n = !0 === n ? "" : n,
|
|
8252
8252
|
d ? e.setAttributeNS(XLINK_NS, t, n) : e.setAttribute(t, n));
|
|
8253
8253
|
}
|
|
8254
|
-
} else t = "-" === t[2] ? t.slice(3) : isMemberInElement(win, r) ? r.slice(2) : r[2] + t.slice(3),
|
|
8255
|
-
o
|
|
8254
|
+
} else if (t = "-" === t[2] ? t.slice(3) : isMemberInElement(win, r) ? r.slice(2) : r[2] + t.slice(3),
|
|
8255
|
+
o || n) {
|
|
8256
|
+
const s = t.endsWith(CAPTURE_EVENT_SUFFIX);
|
|
8257
|
+
t = t.replace(CAPTURE_EVENT_REGEX, ""), o && plt.rel(e, t, o, s), n && plt.ael(e, t, n, s);
|
|
8258
|
+
}
|
|
8256
8259
|
}
|
|
8257
|
-
}, parseClassListRegex = /\s/, parseClassList = e => e ? e.split(parseClassListRegex) : [], updateElement = (e, t, o, n) => {
|
|
8260
|
+
}, parseClassListRegex = /\s/, parseClassList = e => e ? e.split(parseClassListRegex) : [], CAPTURE_EVENT_SUFFIX = "Capture", CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$"), updateElement = (e, t, o, n) => {
|
|
8258
8261
|
const s = 11 === t.$elm$.nodeType && t.$elm$.host ? t.$elm$.host : t.$elm$, l = e && e.$attrs$ || EMPTY_OBJ, a = t.$attrs$ || EMPTY_OBJ;
|
|
8259
8262
|
for (n in l) n in a || setAccessor(s, n, l[n], void 0, o, t.$flags$);
|
|
8260
8263
|
for (n in a) setAccessor(s, n, l[n], a[n], o, t.$flags$);
|
|
@@ -8263,28 +8266,31 @@ const createTime = (e, t = "") => {
|
|
|
8263
8266
|
let scopeId, contentRef, hostTagName, useNativeShadowDom = !1, checkSlotFallbackVisibility = !1, checkSlotRelocate = !1, isSvgMode = !1;
|
|
8264
8267
|
|
|
8265
8268
|
const createElm = (e, t, o, n) => {
|
|
8266
|
-
|
|
8267
|
-
|
|
8268
|
-
|
|
8269
|
-
|
|
8270
|
-
|
|
8271
|
-
isSvgMode && "
|
|
8272
|
-
|
|
8273
|
-
|
|
8274
|
-
|
|
8275
|
-
|
|
8269
|
+
var s;
|
|
8270
|
+
const l = t.$children$[o];
|
|
8271
|
+
let a, r, i, d = 0;
|
|
8272
|
+
if (!useNativeShadowDom && (checkSlotRelocate = !0, "slot" === l.$tag$ && (scopeId && n.classList.add(scopeId + "-s"),
|
|
8273
|
+
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 {
|
|
8274
|
+
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$) ,
|
|
8275
|
+
isSvgMode && "foreignObject" === l.$tag$ && (isSvgMode = !1), updateElement(null, l, isSvgMode),
|
|
8276
|
+
null != scopeId && a["s-si"] !== scopeId && a.classList.add(a["s-si"] = scopeId),
|
|
8277
|
+
l.$children$) for (d = 0; d < l.$children$.length; ++d) r = createElm(e, l, d, a),
|
|
8278
|
+
r && a.appendChild(r);
|
|
8279
|
+
("svg" === l.$tag$ ? isSvgMode = !1 : "foreignObject" === a.tagName && (isSvgMode = !0));
|
|
8276
8280
|
}
|
|
8277
|
-
return (
|
|
8278
|
-
|
|
8279
|
-
|
|
8280
|
-
|
|
8281
|
+
return (a["s-hn"] = hostTagName, 3 & l.$flags$ && (a["s-sr"] = !0,
|
|
8282
|
+
a["s-fs"] = null === (s = l.$attrs$) || void 0 === s ? void 0 : s.slot, a["s-cr"] = contentRef,
|
|
8283
|
+
a["s-sn"] = l.$name$ || "", i = e && e.$children$ && e.$children$[o], i && i.$tag$ === l.$tag$ && e.$elm$ && putBackInOriginalLocation(e.$elm$, !1))),
|
|
8284
|
+
a;
|
|
8281
8285
|
}, putBackInOriginalLocation = (e, t) => {
|
|
8286
|
+
var o;
|
|
8282
8287
|
plt.$flags$ |= 1;
|
|
8283
|
-
const
|
|
8284
|
-
for (let e =
|
|
8285
|
-
const
|
|
8286
|
-
|
|
8287
|
-
|
|
8288
|
+
const n = e.childNodes;
|
|
8289
|
+
for (let e = n.length - 1; e >= 0; e--) {
|
|
8290
|
+
const s = n[e];
|
|
8291
|
+
s["s-hn"] !== hostTagName && s["s-ol"] && (parentReferenceNode(s).insertBefore(s, referenceNode(s)),
|
|
8292
|
+
s["s-ol"].remove(), s["s-ol"] = void 0, s["s-sh"] = void 0, 1 === s.nodeType && s.setAttribute("slot", null !== (o = s["s-sn"]) && void 0 !== o ? o : ""),
|
|
8293
|
+
checkSlotRelocate = !0), t && putBackInOriginalLocation(s, t);
|
|
8288
8294
|
}
|
|
8289
8295
|
plt.$flags$ &= -2;
|
|
8290
8296
|
}, addVnodes = (e, t, o, n, s, l) => {
|
|
@@ -8329,8 +8335,8 @@ const createElm = (e, t, o, n) => {
|
|
|
8329
8335
|
if (e["s-sr"]) {
|
|
8330
8336
|
const o = e["s-sn"];
|
|
8331
8337
|
e.hidden = !1;
|
|
8332
|
-
for (const n of t) if (n["s-hn"] !== e["s-hn"] || "" !== o) {
|
|
8333
|
-
if (1 === n.nodeType && o === n.getAttribute("slot")) {
|
|
8338
|
+
for (const n of t) if (n !== e) if (n["s-hn"] !== e["s-hn"] || "" !== o) {
|
|
8339
|
+
if (1 === n.nodeType && (o === n.getAttribute("slot") || o === n["s-sn"])) {
|
|
8334
8340
|
e.hidden = !0;
|
|
8335
8341
|
break;
|
|
8336
8342
|
}
|
|
@@ -8347,12 +8353,13 @@ const createElm = (e, t, o, n) => {
|
|
|
8347
8353
|
if (s["s-sr"] && (t = s["s-cr"]) && t.parentNode) {
|
|
8348
8354
|
o = t.parentNode.childNodes;
|
|
8349
8355
|
const e = s["s-sn"];
|
|
8350
|
-
for (n = o.length - 1; n >= 0; n--) if (t = o[n], !t["s-cn"]
|
|
8356
|
+
for (n = o.length - 1; n >= 0; n--) if (t = o[n], !(t["s-cn"] || t["s-nr"] || t["s-hn"] === s["s-hn"] || BUILD.experimentalSlotFixes )) if (isNodeLocatedInSlot(t, e)) {
|
|
8351
8357
|
let o = relocateNodes.find((e => e.$nodeToRelocate$ === t));
|
|
8352
|
-
checkSlotFallbackVisibility = !0, t["s-sn"] = t["s-sn"] || e, o ? o.$
|
|
8358
|
+
checkSlotFallbackVisibility = !0, t["s-sn"] = t["s-sn"] || e, o ? (o.$nodeToRelocate$["s-sh"] = s["s-hn"],
|
|
8359
|
+
o.$slotRefNode$ = s) : (t["s-sh"] = s["s-hn"], relocateNodes.push({
|
|
8353
8360
|
$slotRefNode$: s,
|
|
8354
8361
|
$nodeToRelocate$: t
|
|
8355
|
-
}), t["s-sr"] && relocateNodes.map((e => {
|
|
8362
|
+
})), t["s-sr"] && relocateNodes.map((e => {
|
|
8356
8363
|
isNodeLocatedInSlot(e.$nodeToRelocate$, t["s-sn"]) && (o = relocateNodes.find((e => e.$nodeToRelocate$ === t)),
|
|
8357
8364
|
o && !e.$slotRefNode$ && (e.$slotRefNode$ = o.$slotRefNode$));
|
|
8358
8365
|
}));
|
|
@@ -8365,33 +8372,46 @@ const createElm = (e, t, o, n) => {
|
|
|
8365
8372
|
}, isNodeLocatedInSlot = (e, t) => 1 === e.nodeType ? null === e.getAttribute("slot") && "" === t || e.getAttribute("slot") === t : e["s-sn"] === t || "" === t, nullifyVNodeRefs = e => {
|
|
8366
8373
|
(e.$attrs$ && e.$attrs$.ref && e.$attrs$.ref(null), e.$children$ && e.$children$.map(nullifyVNodeRefs));
|
|
8367
8374
|
}, renderVdom = (e, t, o = !1) => {
|
|
8368
|
-
|
|
8369
|
-
|
|
8370
|
-
if (
|
|
8371
|
-
|
|
8372
|
-
|
|
8373
|
-
(
|
|
8374
|
-
|
|
8375
|
+
var n, s;
|
|
8376
|
+
const l = e.$hostElement$, a = e.$cmpMeta$, r = e.$vnode$ || newVNode(null, null), i = isHost(t) ? t : h(null, null, t);
|
|
8377
|
+
if (hostTagName = l.tagName, BUILD.isDev ) ;
|
|
8378
|
+
if (a.$attrsToReflect$ && (i.$attrs$ = i.$attrs$ || {}, a.$attrsToReflect$.map((([e, t]) => i.$attrs$[t] = l[e]))),
|
|
8379
|
+
o && i.$attrs$) for (const e of Object.keys(i.$attrs$)) l.hasAttribute(e) && ![ "key", "ref", "style", "class" ].includes(e) && (i.$attrs$[e] = l[e]);
|
|
8380
|
+
if (i.$tag$ = null, i.$flags$ |= 4, e.$vnode$ = i, i.$elm$ = r.$elm$ = l.shadowRoot || l,
|
|
8381
|
+
(scopeId = l["s-sc"]), (contentRef = l["s-cr"],
|
|
8382
|
+
useNativeShadowDom = supportsShadow, checkSlotFallbackVisibility = !1), patch(r, i),
|
|
8375
8383
|
BUILD.slotRelocation) {
|
|
8376
8384
|
if (plt.$flags$ |= 1, checkSlotRelocate) {
|
|
8377
|
-
|
|
8378
|
-
|
|
8379
|
-
|
|
8380
|
-
|
|
8381
|
-
|
|
8382
|
-
|
|
8383
|
-
for (r = 0; r < relocateNodes.length; r++) if (e = relocateNodes[r], t = e.$nodeToRelocate$,
|
|
8384
|
-
e.$slotRefNode$) {
|
|
8385
|
-
for (n = e.$slotRefNode$.parentNode, s = e.$slotRefNode$.nextSibling, o = t["s-ol"]; o = o.previousSibling; ) if (l = o["s-nr"],
|
|
8386
|
-
l && l["s-sn"] === t["s-sn"] && n === l.parentNode && (l = l.nextSibling, !l || !l["s-nr"])) {
|
|
8387
|
-
s = l;
|
|
8388
|
-
break;
|
|
8385
|
+
markSlotContentForRelocation(i.$elm$);
|
|
8386
|
+
for (const e of relocateNodes) {
|
|
8387
|
+
const t = e.$nodeToRelocate$;
|
|
8388
|
+
if (!t["s-ol"]) {
|
|
8389
|
+
const e = originalLocationDebugNode(t) ;
|
|
8390
|
+
e["s-nr"] = t, t.parentNode.insertBefore(t["s-ol"] = e, t);
|
|
8389
8391
|
}
|
|
8390
|
-
|
|
8391
|
-
|
|
8392
|
-
|
|
8392
|
+
}
|
|
8393
|
+
for (const e of relocateNodes) {
|
|
8394
|
+
const t = e.$nodeToRelocate$, o = e.$slotRefNode$;
|
|
8395
|
+
if (o) {
|
|
8396
|
+
const e = o.parentNode;
|
|
8397
|
+
let l = o.nextSibling;
|
|
8398
|
+
{
|
|
8399
|
+
let o = null === (n = t["s-ol"]) || void 0 === n ? void 0 : n.previousSibling;
|
|
8400
|
+
for (;o; ) {
|
|
8401
|
+
let n = null !== (s = o["s-nr"]) && void 0 !== s ? s : null;
|
|
8402
|
+
if (n && n["s-sn"] === t["s-sn"] && e === n.parentNode && (n = n.nextSibling, !n || !n["s-nr"])) {
|
|
8403
|
+
l = n;
|
|
8404
|
+
break;
|
|
8405
|
+
}
|
|
8406
|
+
o = o.previousSibling;
|
|
8407
|
+
}
|
|
8408
|
+
}
|
|
8409
|
+
(!l && e !== t.parentNode || t.nextSibling !== l) && t !== l && (!t["s-hn"] && t["s-ol"] && (t["s-hn"] = t["s-ol"].parentNode.nodeName),
|
|
8410
|
+
e.insertBefore(t, l));
|
|
8411
|
+
} else 1 === t.nodeType && (t.hidden = !0);
|
|
8412
|
+
}
|
|
8393
8413
|
}
|
|
8394
|
-
checkSlotFallbackVisibility && updateFallbackSlotVisibility(
|
|
8414
|
+
checkSlotFallbackVisibility && updateFallbackSlotVisibility(i.$elm$), plt.$flags$ &= -2,
|
|
8395
8415
|
relocateNodes.length = 0;
|
|
8396
8416
|
}
|
|
8397
8417
|
}, slotReferenceDebugNode = e => doc.createComment(`<slot${e.$name$ ? ' name="' + e.$name$ + '"' : ""}> (host=${hostTagName.toLowerCase()})`), originalLocationDebugNode = e => doc.createComment("org-location for " + (e.localName ? `<${e.localName}> (host=${e["s-hn"]})` : `[${e.textContent}]`)), attachToAncestor = (e, t) => {
|
|
@@ -10086,7 +10106,7 @@ const validateTooltipAlign = (component, value) => {
|
|
|
10086
10106
|
validateAlignment(component, '_tooltipAlign', value);
|
|
10087
10107
|
};
|
|
10088
10108
|
|
|
10089
|
-
const defaultStyleCss$I = "@layer kol-global {\n\t
|
|
10109
|
+
const defaultStyleCss$I = "@layer kol-global {\n\t.sc-kol-abbr-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-abbr-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-abbr-default-h > abbr {\n\t\tcursor: help;\n\t}\n}";
|
|
10090
10110
|
|
|
10091
10111
|
class KolAbbr {
|
|
10092
10112
|
constructor(hostRef) {
|
|
@@ -10148,7 +10168,7 @@ const watchHeadingLevel = (component, value) => {
|
|
|
10148
10168
|
});
|
|
10149
10169
|
};
|
|
10150
10170
|
|
|
10151
|
-
const defaultStyleCss$H = "@layer kol-global {\n\t
|
|
10171
|
+
const defaultStyleCss$H = "@layer kol-global {\n\t.sc-kol-accordion-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-accordion-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-accordion-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t\n\t.wrapper {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 0fr;\n\t\toverflow: hidden;\n\t\ttransition: grid-template-rows 0.3s;\n\t}\n\n\t.accordion.open .wrapper {\n\t\tgrid-template-rows: 1fr;\n\t}\n\n\t.animation-wrapper {\n\t\tmin-height: 0;\n\t\ttransition: visibility 0.3s;\n\t\t\n\t\tvisibility: hidden;\n\t}\n\n\t.accordion.open .animation-wrapper {\n\t\tvisibility: visible;\n\t}\n\n\t@media (prefers-reduced-motion) {\n\t\t.animation-wrapper,\n\t\t.wrapper {\n\t\t\ttransition-duration: 0s;\n\t\t}\n\t} \n\t.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}";
|
|
10152
10172
|
|
|
10153
10173
|
featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
|
|
10154
10174
|
|
|
@@ -10233,7 +10253,7 @@ class KolAccordion {
|
|
|
10233
10253
|
}; }
|
|
10234
10254
|
}
|
|
10235
10255
|
|
|
10236
|
-
const defaultStyleCss$G = "@layer kol-global {\n\t
|
|
10256
|
+
const defaultStyleCss$G = "@layer kol-global {\n\t.sc-kol-alert-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-alert-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-alert-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tkol-alert-wc {\n\t\tdisplay: grid;\n\t}\n\n\tkol-alert-wc .heading {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tkol-alert-wc .heading > div {\n\t\tflex-grow: 1;\n\t}\n}";
|
|
10237
10257
|
|
|
10238
10258
|
class KolAlert {
|
|
10239
10259
|
constructor(hostRef) {
|
|
@@ -10504,7 +10524,7 @@ class KolAlertWc {
|
|
|
10504
10524
|
}; }
|
|
10505
10525
|
}
|
|
10506
10526
|
|
|
10507
|
-
const defaultStyleCss$F = "@layer kol-global {\n\t
|
|
10527
|
+
const defaultStyleCss$F = "@layer kol-global {\n\t.sc-kol-avatar-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-avatar-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-avatar-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\t\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t\n\t\tbackground: #d3d3d3;\n\t\tfont-size: 2rem;\n\t}\n}";
|
|
10508
10528
|
|
|
10509
10529
|
class KolAvatar {
|
|
10510
10530
|
constructor(hostRef) {
|
|
@@ -11114,7 +11134,7 @@ const handleColorChange = (value) => {
|
|
|
11114
11134
|
};
|
|
11115
11135
|
};
|
|
11116
11136
|
|
|
11117
|
-
const defaultStyleCss$E = "@layer kol-global {\n\t
|
|
11137
|
+
const defaultStyleCss$E = "@layer kol-global {\n\t.sc-kol-badge-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-badge-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-badge-default-h > span {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t}\n\n\t.sc-kol-badge-default-h > span > kol-button-wc button {\n\t\tcolor: inherit;\n\t}\n}";
|
|
11118
11138
|
|
|
11119
11139
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
11120
11140
|
class KolBadge {
|
|
@@ -11214,7 +11234,7 @@ const watchNavLinks = (className, component, value) => {
|
|
|
11214
11234
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
11215
11235
|
};
|
|
11216
11236
|
|
|
11217
|
-
const defaultStyleCss$D = "@layer kol-global {\n\t
|
|
11237
|
+
const defaultStyleCss$D = "@layer kol-global {\n\t.sc-kol-breadcrumb-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-breadcrumb-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tli,\n\tul {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tlist-style: none;\n\t\tdisplay: flex;\n\t\tgap: 0.5em;\n\t\tflex-wrap: wrap;\n\t\tplace-items: center;\n\t}\n\n\tkol-icon::part(separator) {\n\t\tfont-weight: 900;\n\t\tfont-size: 0.7em;\n\t}\n\n\tkol-icon::part(separator):before {\n\t\tcontent: '\\f054';\n\t\tfont-family: 'Font Awesome 6 Free';\n\t}\n}";
|
|
11218
11238
|
|
|
11219
11239
|
class KolBreadcrumb {
|
|
11220
11240
|
constructor(hostRef) {
|
|
@@ -11272,7 +11292,7 @@ class KolBreadcrumb {
|
|
|
11272
11292
|
}; }
|
|
11273
11293
|
}
|
|
11274
11294
|
|
|
11275
|
-
const defaultStyleCss$C = "@layer kol-global {\n\t
|
|
11295
|
+
const defaultStyleCss$C = "@layer kol-global {\n\t.sc-kol-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\n\t\t&::before {\n\t\t\t\n\t\t\tcontent: '\\200B';\n\t\t}\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
|
|
11276
11296
|
|
|
11277
11297
|
class KolButton {
|
|
11278
11298
|
constructor(hostRef) {
|
|
@@ -11341,7 +11361,7 @@ class KolButton {
|
|
|
11341
11361
|
}; }
|
|
11342
11362
|
}
|
|
11343
11363
|
|
|
11344
|
-
const defaultStyleCss$B = "@layer kol-global {\n\t
|
|
11364
|
+
const defaultStyleCss$B = "@layer kol-global {\n\t.sc-kol-button-group-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-button-group-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-button-group-default-h > kol-button-group-wc {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}";
|
|
11345
11365
|
|
|
11346
11366
|
class KolButtonGroup {
|
|
11347
11367
|
constructor(hostRef) {
|
|
@@ -11383,7 +11403,7 @@ class KolButtonGroupWc {
|
|
|
11383
11403
|
}; }
|
|
11384
11404
|
}
|
|
11385
11405
|
|
|
11386
|
-
const defaultStyleCss$A = "@layer kol-global {\n\t
|
|
11406
|
+
const defaultStyleCss$A = "@layer kol-global {\n\t.sc-kol-button-link-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-button-link-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-button-link-default-h {\n\t\tdisplay: inline-block;\n\t}\n\n\t:is(a, button) {\n\t\talign-items: baseline;\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: left;\n\t\ttext-decoration-line: underline;\n\t}\n\n\t:is(a, button):is(:focus, :hover) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t.skip {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\t.skip:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tpadding: 1em;\n\t\tposition: unset;\n\t}\n\n\tkol-icon.external-link-icon {\n\t\tdisplay: inline-flex;\n\t}\n}";
|
|
11387
11407
|
|
|
11388
11408
|
class KolButtonLink {
|
|
11389
11409
|
constructor(hostRef) {
|
|
@@ -12051,7 +12071,7 @@ class KolButtonWc {
|
|
|
12051
12071
|
}; }
|
|
12052
12072
|
}
|
|
12053
12073
|
|
|
12054
|
-
const defaultStyleCss$z = "@layer kol-global {\n\t
|
|
12074
|
+
const defaultStyleCss$z = "@layer kol-global {\n\t.sc-kol-card-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-card-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-card-default-h > div.card {\n\t\theight: 100%;\n\t\tposition: relative;\n\t}\n\n\t.close {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t}\n}";
|
|
12055
12075
|
|
|
12056
12076
|
class KolCard {
|
|
12057
12077
|
constructor(hostRef) {
|
|
@@ -12194,7 +12214,7 @@ class DetailsAnimationController {
|
|
|
12194
12214
|
}
|
|
12195
12215
|
}
|
|
12196
12216
|
|
|
12197
|
-
const defaultStyleCss$y = "@layer kol-global {\n\t
|
|
12217
|
+
const defaultStyleCss$y = "@layer kol-global {\n\t.sc-kol-details-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-details-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-details-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tdetails {\n\t\tdisplay: grid;\n\t}\n\n\tdetails > summary {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tdetails > summary > span {\n\t\tborder-bottom-color: grey;\n\t\tborder-bottom-style: solid;\n\t}\n\n\tdetails > summary:focus > span,\n\tdetails > summary:hover > span,\n\tdetails[open] > summary > span {\n\t\tborder-bottom-color: #000;\n\t}\n\n\tdetails > kol-indented-text {\n\t\tmargin: 0.25em 0 0 0.5em;\n\t}\n}\n/*!@.icon.is-open::part(icon)*/.icon.is-open.sc-kol-details-default::part(icon) {\n\ttransform: rotate(90deg);\n}";
|
|
12198
12218
|
|
|
12199
12219
|
class KolDetails {
|
|
12200
12220
|
constructor(hostRef) {
|
|
@@ -12339,7 +12359,7 @@ class KolForm {
|
|
|
12339
12359
|
}; }
|
|
12340
12360
|
}
|
|
12341
12361
|
|
|
12342
|
-
const defaultStyleCss$x = "@layer kol-global {\n\t
|
|
12362
|
+
const defaultStyleCss$x = "@layer kol-global {\n\t.sc-kol-heading-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-heading-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-heading-default-h > kol-heading-wc {\n\t\tdisplay: grid;\n\t}\n\n\t.sc-kol-heading-default-h > kol-heading-wc > .overline {\n\t\torder: 1;\n\t}\n\n\t.sc-kol-heading-default-h > kol-heading-wc > .headline {\n\t\torder: 2;\n\t}\n}";
|
|
12343
12363
|
|
|
12344
12364
|
class KolHeading {
|
|
12345
12365
|
constructor(hostRef) {
|
|
@@ -12349,7 +12369,7 @@ class KolHeading {
|
|
|
12349
12369
|
this._secondaryHeadline = undefined;
|
|
12350
12370
|
}
|
|
12351
12371
|
render() {
|
|
12352
|
-
return (hAsync("kol-heading-wc", { _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline }, hAsync("slot",
|
|
12372
|
+
return (hAsync("kol-heading-wc", { _label: this._label, _level: this._level, _secondaryHeadline: this._secondaryHeadline }, hAsync("slot", { name: "expert", slot: "expert" })));
|
|
12353
12373
|
}
|
|
12354
12374
|
static get style() { return {
|
|
12355
12375
|
default: defaultStyleCss$x
|
|
@@ -12374,19 +12394,19 @@ class KolHeadingWc {
|
|
|
12374
12394
|
this.renderHeadline = (headline, level) => {
|
|
12375
12395
|
switch (level) {
|
|
12376
12396
|
case 1:
|
|
12377
|
-
return (hAsync("h1", { class: "headline" }, headline, hAsync("slot",
|
|
12397
|
+
return (hAsync("h1", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12378
12398
|
case 2:
|
|
12379
|
-
return (hAsync("h2", { class: "headline" }, headline, hAsync("slot",
|
|
12399
|
+
return (hAsync("h2", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12380
12400
|
case 3:
|
|
12381
|
-
return (hAsync("h3", { class: "headline" }, headline, hAsync("slot",
|
|
12401
|
+
return (hAsync("h3", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12382
12402
|
case 4:
|
|
12383
|
-
return (hAsync("h4", { class: "headline" }, headline, hAsync("slot",
|
|
12403
|
+
return (hAsync("h4", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12384
12404
|
case 5:
|
|
12385
|
-
return (hAsync("h5", { class: "headline" }, headline, hAsync("slot",
|
|
12405
|
+
return (hAsync("h5", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12386
12406
|
case 6:
|
|
12387
|
-
return (hAsync("h6", { class: "headline" }, headline, hAsync("slot",
|
|
12407
|
+
return (hAsync("h6", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12388
12408
|
default:
|
|
12389
|
-
return (hAsync("strong", { class: "headline" }, headline, hAsync("slot",
|
|
12409
|
+
return (hAsync("strong", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12390
12410
|
}
|
|
12391
12411
|
};
|
|
12392
12412
|
this.renderSecondaryHeadline = (headline, level) => {
|
|
@@ -12576,7 +12596,7 @@ class KolImage {
|
|
|
12576
12596
|
}; }
|
|
12577
12597
|
}
|
|
12578
12598
|
|
|
12579
|
-
const defaultStyleCss$u = "@layer kol-global {\n\t
|
|
12599
|
+
const defaultStyleCss$u = "@layer kol-global {\n\t.sc-kol-indented-text-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-indented-text-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-indented-text-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-indented-text-default-h > div {\n\t\tborder-left-style: solid;\n\t\tpadding-left: 0.5em;\n\t}\n}";
|
|
12580
12600
|
|
|
12581
12601
|
class KolIndentedText {
|
|
12582
12602
|
constructor(hostRef) {
|
|
@@ -13089,7 +13109,7 @@ const InternalUnderlinedAccessKey = ({ accessKey, label }) => {
|
|
|
13089
13109
|
rest.join(accessKey))) : null));
|
|
13090
13110
|
};
|
|
13091
13111
|
|
|
13092
|
-
const defaultStyleCss$t = "@layer kol-global {\n\t
|
|
13112
|
+
const defaultStyleCss$t = "@layer kol-global {\n\t.sc-kol-input-checkbox-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-checkbox-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-checkbox-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tkol-input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tjustify-items: left;\n\t}\n\n\tkol-input.default,\n\tkol-input.switch {\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\tkol-input .input {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\torder: 1;\n\t}\n\n\tkol-input .input div {\n\t\tdisplay: inline-flex;\n\t}\n\n\tkol-input .input input {\n\t\tmargin: 0;\n\t}\n\n\tkol-input label {\n\t\torder: 2;\n\t}\n\n\tkol-input .hint,\n\tkol-input.error > kol-alert {\n\t\tgrid-column: span 2;\n\t}\n\n\tkol-input kol-alert.error {\n\t\torder: 3;\n\t}\n\n\tkol-input .hint {\n\t\torder: 4;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n\n\tinput {\n\t\tborder-style: solid;\n\t\tborder-width: 2px;\n\t\tline-height: 24px;\n\t}\n\n\tinput[type='checkbox'] {\n\t\tappearance: none;\n\t\tbackground-color: #fff;\n\t\tcursor: pointer;\n\t\ttransition: 0.5s;\n\t}\n\n\tinput[type='checkbox'].kol-disabled:before {\n\t\tcursor: not-allowed;\n\t}\n\n\tinput[type='checkbox']:before {\n\t\tcontent: '';\n\t\tcursor: pointer;\n\t}\n\n\t.default kol-icon {\n\t\tdisplay: none;\n\t}\n\n\tkol-input.required .tooltip-content .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.button {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: var(--a11y-min-size) auto;\n\t\tgrid-template-areas: 'error error' 'input label' 'hint hint';\n\t}\n\n\t.button[tabindex]:focus {\n\t\t\n\t\tcursor: inherit;\n\t}\n\n\t.button input {\n\t\tdisplay: none;\n\t}\n\n\t.button > .error {\n\t\tgrid-area: error;\n\t}\n\n\t.button > label {\n\t\tgrid-area: label;\n\t}\n\n\t.button > .input {\n\t\tgrid-area: input;\n\t}\n\n\t.button > .hint {\n\t\tgrid-area: hint;\n\t}\n\n\t.button .icon {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\t}\n}\n\n@layer kol-component {\n\t.default input[type='checkbox'] {\n\t\theight: 1.5em;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:before {\n\t\tdisplay: block;\n\t\theight: 1.5em;\n\t\tposition: relative;\n\t\twidth: 1.5em;\n\t}\n\n\t.default input[type='checkbox']:checked:before {\n\t\tborder-radius: 1px;\n\t\tborder-style: solid;\n\t\tborder-width: 0 3px 3px 0;\n\t\theight: 0.75em;\n\t\tleft: calc(0.375em - 2px);\n\t\ttransform: rotate(40deg) translate(-50%, -50%);\n\t\ttop: calc(0.7125em - 2px);\n\t\twidth: 0.375em;\n\t}\n\n\t.default input[type='checkbox']:indeterminate:before {\n\t\tbackground-color: #000;\n\t\theight: 0.2em;\n\t\tleft: 0.24em;\n\t\ttop: 0.575em;\n\t\twidth: 0.8em;\n\t}\n}\n\n@layer kol-component {\n\t.switch .input {\n\t\tposition: relative;\n\t}\n\n\t.switch input[type='checkbox'] {\n\t\tdisplay: inline-block;\n\t\theight: 1.7em;\n\t\tmin-width: 3.2em;\n\t\tposition: relative;\n\t\twidth: 3.2em;\n\t}\n\n\t.switch input[type='checkbox']::before {\n\t\tbackground-color: #000;\n\t\theight: 1.2em;\n\t\tleft: calc(0.25em - 2px);\n\t\ttop: calc(0.25em - 2px);\n\t\tposition: absolute;\n\t\ttransition: 0.5s;\n\t\twidth: 1.2em;\n\t}\n\n\t.switch input[type='checkbox']:checked::before {\n\t\ttransform: translateX(1.5em);\n\t}\n\n\t.switch input[type='checkbox']:indeterminate::before {\n\t\ttransform: translateX(0.75em);\n\t}\n\n\t.switch .icon {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: 1.2em;\n\t\theight: 1.2em;\n\t\tposition: absolute;\n\t\tz-index: 1;\n\t\ttop: 50%;\n\t\tleft: 4px;\n\t\ttransform: translate(0, -50%);\n\t\ttransition: 0.5s;\n\t\tcolor: #000;\n\t}\n\n\t.switch:has(input:checked) .icon {\n\t\ttransform: translate(1.5em, -50%);\n\t}\n\n\t.switch:has(input:indeterminate) .icon {\n\t\ttransform: translate(0.75em, -50%);\n\t}\n}";
|
|
13093
13113
|
|
|
13094
13114
|
class KolInputCheckbox {
|
|
13095
13115
|
render() {
|
|
@@ -13377,7 +13397,7 @@ class InputColorController extends InputIconController {
|
|
|
13377
13397
|
}
|
|
13378
13398
|
}
|
|
13379
13399
|
|
|
13380
|
-
const defaultStyleCss$s = "@layer kol-global {\n\t
|
|
13400
|
+
const defaultStyleCss$s = "@layer kol-global {\n\t.sc-kol-input-color-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-color-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-color-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tdiv.input {\n\t\tcursor: pointer;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
|
|
13381
13401
|
|
|
13382
13402
|
class KolInputColor {
|
|
13383
13403
|
render() {
|
|
@@ -13695,7 +13715,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
13695
13715
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
13696
13716
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
13697
13717
|
|
|
13698
|
-
const defaultStyleCss$r = "@layer kol-global {\n\t
|
|
13718
|
+
const defaultStyleCss$r = "@layer kol-global {\n\t.sc-kol-input-date-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-date-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-date-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tkol-input-number {\n\t\tdisplay: block;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
|
|
13699
13719
|
|
|
13700
13720
|
class KolInputDate {
|
|
13701
13721
|
render() {
|
|
@@ -14063,7 +14083,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
14063
14083
|
}
|
|
14064
14084
|
}
|
|
14065
14085
|
|
|
14066
|
-
const defaultStyleCss$q = "@layer kol-global {\n\t
|
|
14086
|
+
const defaultStyleCss$q = "@layer kol-global {\n\t.sc-kol-input-email-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-email-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-email-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
|
|
14067
14087
|
|
|
14068
14088
|
class KolInputEmail {
|
|
14069
14089
|
render() {
|
|
@@ -14325,7 +14345,7 @@ class InputFileController extends InputIconController {
|
|
|
14325
14345
|
}
|
|
14326
14346
|
}
|
|
14327
14347
|
|
|
14328
|
-
const defaultStyleCss$p = "@layer kol-global {\n\t
|
|
14348
|
+
const defaultStyleCss$p = "@layer kol-global {\n\t.sc-kol-input-file-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-file-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-file-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\tlabel input[type='file']::-webkit-file-upload-button {\n\t\tdisplay: none;\n\t}\n\n\tlabel input[type='file']:before {\n\t\tcontent: 'Datei auswählen';\n\t}\n\n\tlabel input[multiple]:before {\n\t\tcontent: 'Dateien auswählen';\n\t}\n\n\tdiv.input {\n\t\tcursor: pointer;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
|
|
14329
14349
|
|
|
14330
14350
|
class KolInputFile {
|
|
14331
14351
|
render() {
|
|
@@ -14600,7 +14620,7 @@ class InputNumberController extends InputIconController {
|
|
|
14600
14620
|
}
|
|
14601
14621
|
}
|
|
14602
14622
|
|
|
14603
|
-
const defaultStyleCss$o = "@layer kol-global {\n\t
|
|
14623
|
+
const defaultStyleCss$o = "@layer kol-global {\n\t.sc-kol-input-number-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-number-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-number-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
|
|
14604
14624
|
|
|
14605
14625
|
class KolInputNumber {
|
|
14606
14626
|
render() {
|
|
@@ -14822,7 +14842,7 @@ class KolInputNumber {
|
|
|
14822
14842
|
}; }
|
|
14823
14843
|
}
|
|
14824
14844
|
|
|
14825
|
-
const defaultStyleCss$n = "@layer kol-global {\n\t
|
|
14845
|
+
const defaultStyleCss$n = "@layer kol-global {\n\t.sc-kol-input-password-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-password-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-password-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
|
|
14826
14846
|
|
|
14827
14847
|
class KolInputPassword {
|
|
14828
14848
|
render() {
|
|
@@ -15037,7 +15057,7 @@ class KolInputPassword {
|
|
|
15037
15057
|
}; }
|
|
15038
15058
|
}
|
|
15039
15059
|
|
|
15040
|
-
const defaultStyleCss$m = "@layer kol-global {\n\t
|
|
15060
|
+
const defaultStyleCss$m = "@layer kol-global {\n\t.sc-kol-input-radio-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-radio-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-radio-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-radio-default-h {\n\t\t--border-width: 2px;\n\t\t--input-size: 1.5em;\n\t}\n\n\tkol-input .icons {\n\t\tdisplay: none;\n\t}\n\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tinput {\n\t\tappearance: none;\n\t\tborder-width: var(--border-width);\n\t\tborder-style: solid;\n\t\tborder-radius: 100%;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\theight: var(--input-size);\n\t\tmargin: 0;\n\t\tmin-height: var(--input-size);\n\t\tmin-width: var(--input-size);\n\t\tpadding: 0;\n\t\twidth: var(--input-size);\n\t}\n\n\tinput:before {\n\t\tborder-radius: 100%;\n\t\tcontent: '';\n\t\tmargin: auto;\n\t\theight: calc(var(--input-size) / 2);\n\t\twidth: calc(var(--input-size) / 2);\n\t}\n\n\tinput:checked:before {\n\t\tbackground-color: #000;\n\t}\n\n\tfieldset {\n\t\tdisplay: flex;\n\t}\n\n\tfieldset.vertical {\n\t\tflex-direction: column;\n\t}\n\n\tfieldset .input-slot {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t}\n\n\t\n\t.required label > span::after {\n\t\tcontent: '';\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
|
|
15041
15061
|
|
|
15042
15062
|
class KolInputRadio {
|
|
15043
15063
|
render() {
|
|
@@ -15269,7 +15289,7 @@ class InputRangeController extends InputIconController {
|
|
|
15269
15289
|
}
|
|
15270
15290
|
}
|
|
15271
15291
|
|
|
15272
|
-
const defaultStyleCss$l = "@layer kol-global {\n\t
|
|
15292
|
+
const defaultStyleCss$l = "@layer kol-global {\n\t.sc-kol-input-range-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-range-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-range-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.inputs-wrapper {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\tinput[type='number'] {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t\twidth: var(--kolibri-input-range--input-number--width);\n\t}\n\n\t\n\tinput[type='range'] {\n\t\tappearance: none;\n\t\tbackground-color: #d3d3d3;\n\t\tborder: 1px solid #000;\n\t\tdisplay: inline-block;\n\t\tflex-grow: 1;\n\t\theight: 0.5rem;\n\t\tline-height: 1.5em;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\twidth: 0; \n\t}\n\n\tinput[type='range']::-webkit-slider-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-webkit-appearance: none;\n\t}\n\n\tinput[type='range']::-moz-range-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-moz-appearance: none;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n\n\n@media (prefers-contrast: more) {\n\t/*!@::-webkit-slider-thumb*/.sc-kol-input-range-default::-webkit-slider-thumb {\n\t\toutline: 1px solid currentColor;\n\t}\n}";
|
|
15273
15293
|
|
|
15274
15294
|
class KolInputRange {
|
|
15275
15295
|
render() {
|
|
@@ -15484,7 +15504,7 @@ const validateAlert = (component, value) => {
|
|
|
15484
15504
|
watchBoolean(component, '_alert', value);
|
|
15485
15505
|
};
|
|
15486
15506
|
|
|
15487
|
-
const defaultStyleCss$k = "@layer kol-global {\n\t
|
|
15507
|
+
const defaultStyleCss$k = "@layer kol-global {\n\t.sc-kol-input-text-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-input-text-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-input-text-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
|
|
15488
15508
|
|
|
15489
15509
|
featureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);
|
|
15490
15510
|
class KolInputText {
|
|
@@ -15727,7 +15747,7 @@ class KolInputText {
|
|
|
15727
15747
|
}; }
|
|
15728
15748
|
}
|
|
15729
15749
|
|
|
15730
|
-
const defaultStyleCss$j = "@layer kol-global {\n\t
|
|
15750
|
+
const defaultStyleCss$j = "@layer kol-global {\n\t.sc-kol-kolibri-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-kolibri-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-kolibri-default-h {\n\t\tdisplay: inline-block;\n\t}\n\n\ttext {\n\t\tfont-size: 90px;\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}";
|
|
15731
15751
|
|
|
15732
15752
|
const max$1 = 360;
|
|
15733
15753
|
function degreeToRadians(degree) {
|
|
@@ -15828,7 +15848,7 @@ class KolKolibri {
|
|
|
15828
15848
|
}; }
|
|
15829
15849
|
}
|
|
15830
15850
|
|
|
15831
|
-
const defaultStyleCss$i = "@layer kol-global {\n\t
|
|
15851
|
+
const defaultStyleCss$i = "@layer kol-global {\n\t.sc-kol-link-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-link-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-link-default-h {\n\t\tdisplay: inline-block;\n\t}\n\n\t:is(a, button) {\n\t\talign-items: baseline;\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: left;\n\t\ttext-decoration-line: underline;\n\t}\n\n\t:is(a, button):is(:focus, :hover) {\n\t\ttext-decoration-thickness: 0.2em;\n\t}\n\n\t.hidden {\n\t\tdisplay: none;\n\t\tvisibility: hidden;\n\t}\n\n\t.skip {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\t.skip:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tpadding: 1em;\n\t\tposition: unset;\n\t}\n\n\tkol-icon.external-link-icon {\n\t\tdisplay: inline-flex;\n\t}\n}";
|
|
15832
15852
|
|
|
15833
15853
|
class KolLink {
|
|
15834
15854
|
constructor(hostRef) {
|
|
@@ -15881,7 +15901,7 @@ class KolLink {
|
|
|
15881
15901
|
}; }
|
|
15882
15902
|
}
|
|
15883
15903
|
|
|
15884
|
-
const defaultStyleCss$h = "@layer kol-global {\n\t
|
|
15904
|
+
const defaultStyleCss$h = "@layer kol-global {\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-link-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-link-button-default-h {\n\t\tdisplay: inline-block;\n\t}\n\t:is(a, button) {\n\t\tdisplay: inline-flex;\n\t\tplace-items: center;\n\t\ttext-align: center;\n\t\ttext-decoration-line: none;\n\n\t\t&::before {\n\t\t\t\n\t\t\tcontent: '\\200B';\n\t\t}\n\t}\n\t\n\t:is(a, button) > kol-span-wc {\n\t\tmargin: auto;\n\t\twidth: 100%;\n\t}\n\t:is(button):disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}";
|
|
15885
15905
|
|
|
15886
15906
|
class KolLinkButton {
|
|
15887
15907
|
constructor(hostRef) {
|
|
@@ -15942,7 +15962,7 @@ class KolLinkButton {
|
|
|
15942
15962
|
}; }
|
|
15943
15963
|
}
|
|
15944
15964
|
|
|
15945
|
-
const defaultStyleCss$g = "@layer kol-global {\n\t
|
|
15965
|
+
const defaultStyleCss$g = "@layer kol-global {\n\t.sc-kol-link-group-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-link-group-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tul {\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tnav.horizontal ul {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tnav.horizontal li {\n\t\tmargin-left: 1.25rem;\n\t\tmargin-right: 0.25rem;\n\t}\n\n\tnav.horizontal li:first-child {\n\t\tmargin-left: 0;\n\t}\n\n\tnav.horizontal li:last-child {\n\t\tmargin-right: 0;\n\t}\n\n\tnav.vertical li {\n\t\tmargin-left: 1.75rem;\n\t\tmargin-right: 0.5rem;\n\t}\n\n\tli.list-none {\n\t\tlist-style-type: none !important;\n\t\tmargin-left: 0;\n\t}\n}";
|
|
15946
15966
|
|
|
15947
15967
|
const ListItem = (props) => {
|
|
15948
15968
|
const list = [];
|
|
@@ -16418,7 +16438,7 @@ BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Mediz
|
|
|
16418
16438
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
|
|
16419
16439
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
|
|
16420
16440
|
|
|
16421
|
-
const defaultStyleCss$f = "@layer kol-global {\n\t
|
|
16441
|
+
const defaultStyleCss$f = "@layer kol-global {\n\t.sc-kol-logo-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-logo-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-logo-default-h {\n\t\tdisplay: inline-block;\n\t}\n\n\ttext {\n\t\tfont-size: 16px;\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}";
|
|
16422
16442
|
|
|
16423
16443
|
function enumToArray(enumeration, enumAsMap = new Map()) {
|
|
16424
16444
|
Object.entries(enumeration).map(([key, value]) => {
|
|
@@ -16480,7 +16500,7 @@ class KolLogo {
|
|
|
16480
16500
|
}; }
|
|
16481
16501
|
}
|
|
16482
16502
|
|
|
16483
|
-
const defaultStyleCss$e = "@layer kol-global {\n\t
|
|
16503
|
+
const defaultStyleCss$e = "@layer kol-global {\n\t.sc-kol-modal-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-modal-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.overlay {\n\t\tbackground-color: rgba(0, 0, 0, 0.33);\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\tinset: 0;\n\t\tposition: fixed;\n\t\twidth: 100%;\n\t\tz-index: 100;\n\t}\n\n\t.modal {\n\t\tmargin: auto;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}";
|
|
16484
16504
|
|
|
16485
16505
|
class KolModal {
|
|
16486
16506
|
constructor(hostRef) {
|
|
@@ -16597,7 +16617,7 @@ const validateHasCompactButton = (component, value) => {
|
|
|
16597
16617
|
watchBoolean(component, '_hasCompactButton', value);
|
|
16598
16618
|
};
|
|
16599
16619
|
|
|
16600
|
-
const defaultStyleCss$d = "@layer kol-global {\n\t
|
|
16620
|
+
const defaultStyleCss$d = "@layer kol-global {\n\t.sc-kol-nav-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-nav-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-nav-default-h > div {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\tnav {\n\t\twidth: 100%;\n\t}\n\n\t.list {\n\t\tdisplay: flex;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.list.vertical {\n\t\tflex-direction: column;\n\t}\n\n\t.entry {\n\t\tdisplay: flex;\n\t}\n\n\t.button-link-text-switch {\n\t\tflex-grow: 1;\n\t}\n\n\t.entry kol-span-wc {\n\t\tjustify-items: start;\n\t}\n}";
|
|
16601
16621
|
|
|
16602
16622
|
class KolNav {
|
|
16603
16623
|
constructor(hostRef) {
|
|
@@ -16743,7 +16763,7 @@ const validateMax = (component, value, options) => {
|
|
|
16743
16763
|
watchNumber(component, '_max', value, options);
|
|
16744
16764
|
};
|
|
16745
16765
|
|
|
16746
|
-
const defaultStyleCss$c = "@layer kol-global {\n\t
|
|
16766
|
+
const defaultStyleCss$c = "@layer kol-global {\n\t.sc-kol-pagination-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-pagination-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-pagination-default-h {\n\t\talign-items: center;\n\t\tdisplay: grid;\n\t\tgap: 1rem;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\t.navigation-list {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t\tgap: 0.5em;\n\t\tlist-style: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\t.separator:before {\n\t\tcontent: '•••';\n\t}\n}";
|
|
16747
16767
|
|
|
16748
16768
|
const leftDoubleArrowIcon = {
|
|
16749
16769
|
left: 'codicon codicon-debug-reverse-continue',
|
|
@@ -17079,6 +17099,10 @@ class KolPagination {
|
|
|
17079
17099
|
}; }
|
|
17080
17100
|
}
|
|
17081
17101
|
|
|
17102
|
+
const validateShow = (component, value, hooks) => {
|
|
17103
|
+
watchBoolean(component, '_show', value, hooks);
|
|
17104
|
+
};
|
|
17105
|
+
|
|
17082
17106
|
const min = Math.min;
|
|
17083
17107
|
const max = Math.max;
|
|
17084
17108
|
const round = Math.round;
|
|
@@ -18462,41 +18486,46 @@ const computePosition = (reference, floating, options) => {
|
|
|
18462
18486
|
});
|
|
18463
18487
|
};
|
|
18464
18488
|
|
|
18465
|
-
const
|
|
18466
|
-
|
|
18489
|
+
const alignFloatingElements = async ({ floatingElement, referenceElement, arrowElement, align = 'top' }) => {
|
|
18490
|
+
var _a, _b, _c;
|
|
18491
|
+
if (processEnv !== 'test') {
|
|
18492
|
+
const middleware = [offset((_a = arrowElement === null || arrowElement === void 0 ? void 0 : arrowElement.offsetHeight) !== null && _a !== void 0 ? _a : 10), flip(), shift()];
|
|
18493
|
+
if (arrowElement) {
|
|
18494
|
+
middleware.push(arrow({ element: arrowElement }));
|
|
18495
|
+
}
|
|
18496
|
+
const { x, y, middlewareData, placement } = await computePosition(referenceElement, floatingElement, {
|
|
18497
|
+
placement: align,
|
|
18498
|
+
middleware: middleware,
|
|
18499
|
+
});
|
|
18500
|
+
Object.assign(floatingElement.style, {
|
|
18501
|
+
left: `${x}px`,
|
|
18502
|
+
top: `${y}px`,
|
|
18503
|
+
visibility: 'visible',
|
|
18504
|
+
});
|
|
18505
|
+
if (arrowElement) {
|
|
18506
|
+
if ((_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x) {
|
|
18507
|
+
Object.assign(arrowElement.style, {
|
|
18508
|
+
left: `${middlewareData.arrow.x}px`,
|
|
18509
|
+
top: placement === 'bottom' ? `${-arrowElement.offsetHeight / 2}px` : '',
|
|
18510
|
+
bottom: placement === 'top' ? `${-arrowElement.offsetHeight / 2}px` : '',
|
|
18511
|
+
});
|
|
18512
|
+
}
|
|
18513
|
+
else if ((_c = middlewareData.arrow) === null || _c === void 0 ? void 0 : _c.y) {
|
|
18514
|
+
Object.assign(arrowElement.style, {
|
|
18515
|
+
left: placement === 'right' ? `${-arrowElement.offsetWidth / 2}px` : '',
|
|
18516
|
+
right: placement === 'left' ? `${-arrowElement.offsetWidth / 2}px` : '',
|
|
18517
|
+
top: `${middlewareData.arrow.y}px`,
|
|
18518
|
+
});
|
|
18519
|
+
}
|
|
18520
|
+
}
|
|
18521
|
+
}
|
|
18467
18522
|
};
|
|
18468
18523
|
|
|
18469
|
-
const styleCss$1 = "
|
|
18524
|
+
const styleCss$1 = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\tkol-popover .hidden {\n\t\tdisplay: none;\n\t}\n\n\tkol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\tkol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\tkol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n";
|
|
18470
18525
|
|
|
18471
18526
|
class KolPopover {
|
|
18472
18527
|
constructor(hostRef) {
|
|
18473
18528
|
registerInstance(this, hostRef);
|
|
18474
|
-
this.alignPopover = (callBack) => {
|
|
18475
|
-
setTimeout(() => {
|
|
18476
|
-
var _a;
|
|
18477
|
-
if (processEnv !== 'test' && this.triggerElement && this.popoverElement) {
|
|
18478
|
-
const trigger = this.triggerElement;
|
|
18479
|
-
const popoverEl = this.popoverElement;
|
|
18480
|
-
const arrowEl = this.arrowElement;
|
|
18481
|
-
const middleware = [offset((_a = arrowEl === null || arrowEl === void 0 ? void 0 : arrowEl.offsetHeight) !== null && _a !== void 0 ? _a : 10), flip(), shift()];
|
|
18482
|
-
if (arrowEl) {
|
|
18483
|
-
middleware.push(arrow({ element: arrowEl }));
|
|
18484
|
-
}
|
|
18485
|
-
void computePosition(trigger, popoverEl, {
|
|
18486
|
-
placement: this.state._align,
|
|
18487
|
-
middleware: middleware,
|
|
18488
|
-
}).then(({ x, y, middlewareData, placement }) => {
|
|
18489
|
-
this.setPosition(x, y, middlewareData, placement, callBack);
|
|
18490
|
-
});
|
|
18491
|
-
}
|
|
18492
|
-
});
|
|
18493
|
-
};
|
|
18494
|
-
this.showPopover = () => {
|
|
18495
|
-
this.addListenersToBody();
|
|
18496
|
-
this.alignPopover(() => {
|
|
18497
|
-
this.state = Object.assign(Object.assign({}, this.state), { _visible: true });
|
|
18498
|
-
});
|
|
18499
|
-
};
|
|
18500
18529
|
this.hidePopoverByEscape = (event) => {
|
|
18501
18530
|
if (event.key === 'Escape')
|
|
18502
18531
|
this.hidePopover();
|
|
@@ -18526,42 +18555,16 @@ class KolPopover {
|
|
|
18526
18555
|
_visible: false,
|
|
18527
18556
|
};
|
|
18528
18557
|
}
|
|
18529
|
-
|
|
18530
|
-
|
|
18531
|
-
|
|
18532
|
-
|
|
18533
|
-
|
|
18534
|
-
|
|
18535
|
-
|
|
18536
|
-
|
|
18537
|
-
top: `${y}px`,
|
|
18558
|
+
async showPopover() {
|
|
18559
|
+
this.addListenersToBody();
|
|
18560
|
+
if (this.triggerElement && this.popoverElement) {
|
|
18561
|
+
await alignFloatingElements({
|
|
18562
|
+
align: this._align,
|
|
18563
|
+
referenceElement: this.triggerElement,
|
|
18564
|
+
arrowElement: this.arrowElement,
|
|
18565
|
+
floatingElement: this.popoverElement,
|
|
18538
18566
|
});
|
|
18539
|
-
|
|
18540
|
-
switch (placement) {
|
|
18541
|
-
case 'top':
|
|
18542
|
-
this.arrowElement.style.inset = `100% auto auto ${middlewareData.arrow.x || 0}px`;
|
|
18543
|
-
this.arrowElement.style.translate = '0 -50%';
|
|
18544
|
-
break;
|
|
18545
|
-
case 'right':
|
|
18546
|
-
this.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px 100% auto auto`;
|
|
18547
|
-
this.arrowElement.style.translate = '50% 0';
|
|
18548
|
-
break;
|
|
18549
|
-
case 'bottom':
|
|
18550
|
-
this.arrowElement.style.inset = `auto auto 100% ${middlewareData.arrow.x || 0}px`;
|
|
18551
|
-
this.arrowElement.style.translate = '0 50%';
|
|
18552
|
-
break;
|
|
18553
|
-
case 'left':
|
|
18554
|
-
this.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px auto auto 100%`;
|
|
18555
|
-
this.arrowElement.style.translate = '-50% 0';
|
|
18556
|
-
break;
|
|
18557
|
-
}
|
|
18558
|
-
}
|
|
18559
|
-
if (oldPos.left !== this.popoverElement.style.left || oldPos.top !== this.popoverElement.style.top) {
|
|
18560
|
-
this.alignPopover(callBack);
|
|
18561
|
-
}
|
|
18562
|
-
else if (typeof callBack === 'function') {
|
|
18563
|
-
callBack();
|
|
18564
|
-
}
|
|
18567
|
+
this.state = Object.assign(Object.assign({}, this.state), { _visible: true });
|
|
18565
18568
|
}
|
|
18566
18569
|
}
|
|
18567
18570
|
hidePopover() {
|
|
@@ -18576,14 +18579,18 @@ class KolPopover {
|
|
|
18576
18579
|
const body = getDocument().body;
|
|
18577
18580
|
body.addEventListener('keyup', this.hidePopoverByEscape);
|
|
18578
18581
|
body.addEventListener('click', this.hidePopoverByClickOutside);
|
|
18579
|
-
(_a = document.scrollingElement) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll',
|
|
18582
|
+
(_a = document.scrollingElement) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', () => {
|
|
18583
|
+
void this.showPopover();
|
|
18584
|
+
}, { passive: true });
|
|
18580
18585
|
}
|
|
18581
18586
|
removeListenersToBody() {
|
|
18582
18587
|
var _a;
|
|
18583
18588
|
const body = getDocument().body;
|
|
18584
18589
|
body.removeEventListener('keyup', this.hidePopoverByEscape);
|
|
18585
18590
|
body.removeEventListener('click', this.hidePopoverByClickOutside);
|
|
18586
|
-
(_a = document.scrollingElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll',
|
|
18591
|
+
(_a = document.scrollingElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', () => {
|
|
18592
|
+
void this.showPopover();
|
|
18593
|
+
});
|
|
18587
18594
|
}
|
|
18588
18595
|
render() {
|
|
18589
18596
|
return (hAsync(Host, { ref: this.catchHostAndTriggerElement }, hAsync("div", { class: { popover: true, hidden: !this.state._show, show: this.state._visible }, ref: this.catchPopoverElement }, hAsync("div", { class: `arrow ${this.state._align}`, ref: this.catchArrowElement }), hAsync("slot", null))));
|
|
@@ -18594,7 +18601,7 @@ class KolPopover {
|
|
|
18594
18601
|
validateShow(value) {
|
|
18595
18602
|
validateShow(this, value);
|
|
18596
18603
|
if (value)
|
|
18597
|
-
this.showPopover();
|
|
18604
|
+
void this.showPopover();
|
|
18598
18605
|
}
|
|
18599
18606
|
componentWillLoad() {
|
|
18600
18607
|
this.validateAlign(this._align);
|
|
@@ -18607,7 +18614,7 @@ class KolPopover {
|
|
|
18607
18614
|
static get style() { return styleCss$1; }
|
|
18608
18615
|
static get cmpMeta() { return {
|
|
18609
18616
|
"$flags$": 4,
|
|
18610
|
-
"$tagName$": "kol-popover",
|
|
18617
|
+
"$tagName$": "kol-popover-wc",
|
|
18611
18618
|
"$members$": {
|
|
18612
18619
|
"_align": [1],
|
|
18613
18620
|
"_show": [1540],
|
|
@@ -18627,7 +18634,7 @@ var KoliBriProgressVariantEnum;
|
|
|
18627
18634
|
KoliBriProgressVariantEnum["cycle-label-value"] = "cycle-label-value";
|
|
18628
18635
|
})(KoliBriProgressVariantEnum || (KoliBriProgressVariantEnum = {}));
|
|
18629
18636
|
|
|
18630
|
-
const defaultStyleCss$b = "@layer kol-global {\n\t
|
|
18637
|
+
const defaultStyleCss$b = "@layer kol-global {\n\t.sc-kol-progress-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-progress-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tprogress {\n\t\tdisplay: block;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\twidth: 0;\n\t}\n\n\t.bar .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.bar .background {\n\t\tfill: lightgray;\n\t\tstroke: white;\n\t}\n\n\t.bar .progress {\n\t\tfill: #0075ff;\n\t\tstroke: transparent;\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t.cycle .background {\n\t\tfill: transparent;\n\t\tstroke: lightgray;\n\t}\n\n\t.cycle .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.cycle .whitespace {\n\t\tfill: transparent;\n\t\tstroke: white;\n\t}\n\n\t.cycle .progress {\n\t\tfill: transparent;\n\t\tstroke: #0075ff;\n\t\ttransform-origin: 50% 50%;\n\t\ttransform: rotate(-90deg);\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t\n\t@media (prefers-reduced-motion) {\n\t\t.progress {\n\t\t\ttransition-duration: 0s;\n\t\t\ttransition-delay: 0s;\n\t\t}\n\t}\n}";
|
|
18631
18638
|
|
|
18632
18639
|
const VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
|
|
18633
18640
|
const createProgressSVG = (state) => {
|
|
@@ -18737,7 +18744,7 @@ class KolProcess {
|
|
|
18737
18744
|
|
|
18738
18745
|
const koliBriQuoteVariantOptions = ['block', 'inline'];
|
|
18739
18746
|
|
|
18740
|
-
const defaultStyleCss$a = "@layer kol-global {\n\t
|
|
18747
|
+
const defaultStyleCss$a = "@layer kol-global {\n\t.sc-kol-quote-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-quote-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}";
|
|
18741
18748
|
|
|
18742
18749
|
class KolQuote {
|
|
18743
18750
|
constructor(hostRef) {
|
|
@@ -18903,7 +18910,7 @@ class SelectController extends InputIconController {
|
|
|
18903
18910
|
}
|
|
18904
18911
|
}
|
|
18905
18912
|
|
|
18906
|
-
const defaultStyleCss$9 = "@layer kol-global {\n\t
|
|
18913
|
+
const defaultStyleCss$9 = "@layer kol-global {\n\t.sc-kol-select-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-select-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-select-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
|
|
18907
18914
|
|
|
18908
18915
|
const isSelected = (valueList, optionValue) => {
|
|
18909
18916
|
return Array.isArray(valueList) && valueList.includes(optionValue);
|
|
@@ -19115,7 +19122,7 @@ class KolSelect {
|
|
|
19115
19122
|
}; }
|
|
19116
19123
|
}
|
|
19117
19124
|
|
|
19118
|
-
const defaultStyleCss$8 = "@layer kol-global {\n\t
|
|
19125
|
+
const defaultStyleCss$8 = "@layer kol-global {\n\t.sc-kol-skip-nav-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-skip-nav-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tul {\n\t\tdisplay: grid;\n\t\tlist-style: none;\n\t\tplace-items: center;\n\t}\n\n\tul li {\n\t\theight: 0;\n\t}\n\n\tkol-link-wc a {\n\t\tleft: -99999px;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\tz-index: 9999999;\n\t\tline-height: 1em;\n\t}\n\n\tkol-link-wc a:focus {\n\t\tbackground-color: #fff;\n\t\tleft: unset;\n\t\tposition: unset;\n\t}\n}";
|
|
19119
19126
|
|
|
19120
19127
|
class KolSkipNav {
|
|
19121
19128
|
constructor(hostRef) {
|
|
@@ -19170,7 +19177,7 @@ class KolSkipNav {
|
|
|
19170
19177
|
}; }
|
|
19171
19178
|
}
|
|
19172
19179
|
|
|
19173
|
-
const defaultStyleCss$7 = "@layer kol-global {\n\t
|
|
19180
|
+
const defaultStyleCss$7 = "@layer kol-global {\n\t.sc-kol-span-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-span-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}";
|
|
19174
19181
|
|
|
19175
19182
|
class KolSpan {
|
|
19176
19183
|
constructor(hostRef) {
|
|
@@ -31490,7 +31497,7 @@ const validateSpinVariant = (component, value) => {
|
|
|
31490
31497
|
watchValidator(component, '_variant', (value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value), new Set(spinVariantPropTypeOptions), value);
|
|
31491
31498
|
};
|
|
31492
31499
|
|
|
31493
|
-
const defaultStyleCss$6 = "@layer kol-global {\n\t
|
|
31500
|
+
const defaultStyleCss$6 = "@layer kol-global {\n\t.sc-kol-spin-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-spin-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.spin.cycle {\n\t\twidth: 3rem;\n\t\theight: 3rem;\n\t}\n\n\t.spin.cycle > .loader {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder-radius: 50%;\n\t\tposition: relative;\n\t\tanimation: 2s linear infinite rotate;\n\t}\n\n\t.spin.cycle > .loader::before {\n\t\tcontent: '';\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tinset: 0px;\n\t\tborder-radius: 50%;\n\t\tborder: 5px solid #333;\n\t\tanimation: 3s linear infinite prixClipFix;\n\t}\n\n\t@keyframes rotate {\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n\t@keyframes prixClipFix {\n\t\t0% {\n\t\t\tborder-color: #fff;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n\t\t}\n\t\t25% {\n\t\t\tborder-color: #666;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n\t\t}\n\t\t50% {\n\t\t\tborder-color: #fc0;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n\t\t}\n\t\t75% {\n\t\t\tborder-color: red;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n\t\t}\n\t\t100% {\n\t\t\tborder-color: #000;\n\t\t\tclip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n\t\t}\n\t} \n\t@media (prefers-reduced-motion) {\n\t\t.spin.cycle > .loader {\n\t\t\tanimation-duration: 4s;\n\t\t}\n\n\t\t.spin.cycle > .loader::before {\n\t\t\tanimation-duration: 6s;\n\t\t}\n\t}\n}\n\n@layer kol-component {\n\t.spin.dot {\n\t\theight: 1rem;\n\t\twidth: 3rem;\n\t}\n\n\t.spin.dot > span {\n\t\tanimation-timing-function: cubic-bezier(0, 1, 1, 0);\n\t\tborder-radius: 50%;\n\t\tborder: 0.1rem solid #fff;\n\t\theight: 0.8rem;\n\t\tposition: absolute;\n\t\ttop: 0.1rem;\n\t\twidth: 0.8rem;\n\t}\n\n\t.spin.dot > span:first-child {\n\t\tbackground-color: #fc0;\n\t\tz-index: 0;\n\t\tanimation: 1s infinite spin1;\n\t\tleft: 0.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(2) {\n\t\tbackground-color: red;\n\t\tz-index: 1;\n\t\tanimation: 1s infinite spin2;\n\t\tleft: 0.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(3) {\n\t\tbackground-color: #000;\n\t\tz-index: 1;\n\t\tanimation: 1s infinite spin2;\n\t\tleft: 1.1rem;\n\t}\n\n\t.spin.dot > span:nth-child(4) {\n\t\tbackground-color: #666;\n\t\tz-index: 0;\n\t\tanimation: 1s infinite spin3;\n\t\tleft: 2.1rem;\n\t}\n\n\t@keyframes spin1 {\n\t\t0% {\n\t\t\ttransform: scale(0);\n\t\t}\n\t\t100% {\n\t\t\ttransform: scale(1);\n\t\t}\n\t}\n\t@keyframes spin2 {\n\t\t0% {\n\t\t\ttransform: translate(0, 0);\n\t\t}\n\t\t100% {\n\t\t\ttransform: translate(1rem, 0);\n\t\t}\n\t}\n\t@keyframes spin3 {\n\t\t0% {\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t100% {\n\t\t\ttransform: scale(0);\n\t\t}\n\t} \n\t@media (prefers-reduced-motion) {\n\t\t.spin.dot > span:first-child,\n\t\t.spin.dot > span:nth-child(2),\n\t\t.spin.dot > span:nth-child(3),\n\t\t.spin.dot > span:nth-child(4) {\n\t\t\tanimation-duration: 2s;\n\t\t}\n\t}\n}\n\n@layer kol-component {\n\t.spin {\n\t\tdisplay: block;\n\t\tpadding: 0.125rem;\n\t\tposition: relative;\n\t}\n}";
|
|
31494
31501
|
|
|
31495
31502
|
function renderSpin(variant) {
|
|
31496
31503
|
switch (variant) {
|
|
@@ -31550,7 +31557,7 @@ class KolSpin {
|
|
|
31550
31557
|
}; }
|
|
31551
31558
|
}
|
|
31552
31559
|
|
|
31553
|
-
const defaultStyleCss$5 = "@layer kol-global {\n\t
|
|
31560
|
+
const defaultStyleCss$5 = "@layer kol-global {\n\t.sc-kol-split-button-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-split-button-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-split-button-default-h {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t}\n\n\t.main-button {\n\t\tflex-grow: 1;\n\t\ttext-align: left;\n\t}\n\n\t.main-button kol-span-wc {\n\t\tplace-items: start;\n\t}\n\n\t.secondary-button button {\n\t\theight: 100%;\n\t}\n\n\t.horizontal-line {\n\t\tbackground-color: rgba(0, 0, 0, 0.2);\n\t\tborder-radius: 2px;\n\t\theight: 70%;\n\t\tmargin-block: auto;\n\t\twidth: 1px;\n\t}\n\n\t\n\t.popover {\n\t\theight: 0;\n\t\tleft: 0;\n\t\tmin-width: 100%;\n\t\toverflow: hidden;\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\ttransition: height 0.3s ease-in-out;\n\t}\n\n\t.popover-content {\n\t\tinset: 0 0 auto 0;\n\t\tmin-width: 100%;\n\t\tposition: absolute;\n\t}\n}";
|
|
31554
31561
|
|
|
31555
31562
|
class KolSplitButton {
|
|
31556
31563
|
constructor(hostRef) {
|
|
@@ -31700,7 +31707,7 @@ class KolSymbol {
|
|
|
31700
31707
|
}; }
|
|
31701
31708
|
}
|
|
31702
31709
|
|
|
31703
|
-
const defaultStyleCss$4 = "@layer kol-global {\n\t
|
|
31710
|
+
const defaultStyleCss$4 = "@layer kol-global {\n\t.sc-kol-table-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-table-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-table-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-table-default-h {\n\t\tdisplay: grid;\n\t}\n\n\t.sc-kol-table-default-h > div.table {\n\t\tmax-width: 100%;\n\t\torder: 1;\n\t\toverflow-x: auto;\n\t\toverflow-y: hidden;\n\t}\n\n\t.sc-kol-table-default-h > div.table table {\n\t\twidth: 100%;\n\t}\n\n\tth > div {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t\tplace-items: center;\n\t}\n\n\tdiv.pagination {\n\t\torder: 2;\n\t}\n\n\tdiv.pagination,\n\tdiv.pagination > div:last-child {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t@media (min-width: 1024px) {\n\t\tdiv.pagination,\n\t\tdiv.pagination > div:last-child {\n\t\t\tgrid-auto-flow: column;\n\t\t}\n\n\t\tdiv.pagination kol-pagination {\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n}";
|
|
31704
31711
|
|
|
31705
31712
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
31706
31713
|
const CELL_REFS = new Map();
|
|
@@ -32232,7 +32239,7 @@ class KolTable {
|
|
|
32232
32239
|
}; }
|
|
32233
32240
|
}
|
|
32234
32241
|
|
|
32235
|
-
const defaultStyleCss$3 = "@layer kol-global {\n\t
|
|
32242
|
+
const defaultStyleCss$3 = "@layer kol-global {\n\t.sc-kol-tabs-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-tabs-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-tabs-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tkol-button-group-wc {\n\t\tdisplay: inline-flex;\n\t\tflex-wrap: wrap;\n\t}\n\n\tkol-button-group-wc button {\n\t\tborder-bottom-color: transparent;\n\t\tborder-bottom-style: solid;\n\t\tdisplay: block;\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-right kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 2;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-left kol-button-group-wc {\n\t\tdisplay: grid;\n\t\torder: 0;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom kol-button-group-wc {\n\t\torder: 2;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-top kol-button-group-wc > div {\n\t\tdisplay: flex;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\t\tmargin: 0 1em 0 0;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-top > kol-button-group-wc > div > div {\n\t\tmargin: 0 1em;\n\t}\n\n\t.sc-kol-tabs-default-h > div {\n\t\tdisplay: grid;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-left kol-button-group-wc,\n\t.sc-kol-tabs-default-h > .tabs-align-top kol-button-group-wc {\n\t\torder: 0;\n\t}\n\n\t.sc-kol-tabs-default-h > .tabs-align-bottom kol-button-group-wc,\n\t.sc-kol-tabs-default-h > .tabs-align-right kol-button-group-wc {\n\t\torder: 1;\n\t}\n\n\t.sc-kol-tabs-default-h > div.tabs-align-left kol-button-group-wc > div,\n\t.sc-kol-tabs-default-h > div.tabs-align-left kol-button-group-wc > div > div,\n\t.sc-kol-tabs-default-h > div.tabs-align-right kol-button-group-wc > div,\n\t.sc-kol-tabs-default-h > div.tabs-align-right kol-button-group-wc > div > div {\n\t\tdisplay: grid;\n\t}\n\n\t.sc-kol-tabs-default-h > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n\t.sc-kol-tabs-default-h > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\t\twidth: 100%;\n\t}\n\n\t.sc-kol-tabs-default-h > div.tabs-align-bottom kol-button-group-wc div,\n\t.sc-kol-tabs-default-h > div.tabs-align-top kol-button-group-wc div {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\t}\n}";
|
|
32236
32243
|
|
|
32237
32244
|
class KolTabs {
|
|
32238
32245
|
constructor(hostRef) {
|
|
@@ -32589,7 +32596,7 @@ class TextareaController extends InputController {
|
|
|
32589
32596
|
}
|
|
32590
32597
|
}
|
|
32591
32598
|
|
|
32592
|
-
const defaultStyleCss$2 = "@layer kol-global {\n\t
|
|
32599
|
+
const defaultStyleCss$2 = "@layer kol-global {\n\t.sc-kol-textarea-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-textarea-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.sc-kol-textarea-default-h {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t\n\t\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}";
|
|
32593
32600
|
|
|
32594
32601
|
const increaseTextareaHeight = (el) => {
|
|
32595
32602
|
el.style.overflow = 'hidden';
|
|
@@ -32827,29 +32834,36 @@ class KolToastContainer {
|
|
|
32827
32834
|
};
|
|
32828
32835
|
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: [newToastState, ...this.state._toastStates] });
|
|
32829
32836
|
setTimeout(() => {
|
|
32830
|
-
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => localToastState === newToastState
|
|
32837
|
+
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => localToastState.id === newToastState.id
|
|
32831
32838
|
? Object.assign(Object.assign({}, localToastState), { status: 'settled' }) : localToastState) });
|
|
32832
32839
|
}, TRANSITION_TIMEOUT);
|
|
32840
|
+
return () => {
|
|
32841
|
+
this.handleClose(newToastState);
|
|
32842
|
+
};
|
|
32833
32843
|
}
|
|
32834
32844
|
handleClose(toastState) {
|
|
32835
32845
|
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => {
|
|
32836
|
-
if (localToastState === toastState) {
|
|
32846
|
+
if (localToastState.id === toastState.id) {
|
|
32837
32847
|
localToastState.status = 'removing';
|
|
32838
32848
|
}
|
|
32839
32849
|
return localToastState;
|
|
32840
32850
|
}) });
|
|
32841
32851
|
setTimeout(() => {
|
|
32842
|
-
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.filter((localToastState) => localToastState !== toastState) });
|
|
32852
|
+
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id) });
|
|
32843
32853
|
}, TRANSITION_TIMEOUT);
|
|
32844
32854
|
}
|
|
32845
|
-
|
|
32855
|
+
async closeAll() {
|
|
32846
32856
|
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => (Object.assign(Object.assign({}, localToastState), { status: 'removing' }))) });
|
|
32847
32857
|
setTimeout(() => {
|
|
32848
32858
|
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: [] });
|
|
32849
32859
|
}, TRANSITION_TIMEOUT);
|
|
32850
32860
|
}
|
|
32851
32861
|
render() {
|
|
32852
|
-
return (hAsync(Fragment, null, this.state._toastStates.length > 1 && (hAsync("kol-button", { _label: translate('kol-toast-close-all'), class: "close-all", _on: {
|
|
32862
|
+
return (hAsync(Fragment, null, this.state._toastStates.length > 1 && (hAsync("kol-button", { _label: translate('kol-toast-close-all'), class: "close-all", _on: {
|
|
32863
|
+
onClick: () => {
|
|
32864
|
+
void this.closeAll();
|
|
32865
|
+
},
|
|
32866
|
+
} })), this.state._toastStates.map((toastState) => (hAsync(InternalToast, { toastState: toastState, onClose: () => this.handleClose(toastState), key: toastState.id })))));
|
|
32853
32867
|
}
|
|
32854
32868
|
static get style() { return {
|
|
32855
32869
|
default: defaultStyleCss$1
|
|
@@ -32859,7 +32873,8 @@ class KolToastContainer {
|
|
|
32859
32873
|
"$tagName$": "kol-toast-container",
|
|
32860
32874
|
"$members$": {
|
|
32861
32875
|
"state": [32],
|
|
32862
|
-
"enqueue": [64]
|
|
32876
|
+
"enqueue": [64],
|
|
32877
|
+
"closeAll": [64]
|
|
32863
32878
|
},
|
|
32864
32879
|
"$listeners$": undefined,
|
|
32865
32880
|
"$lazyBundleId$": "-",
|
|
@@ -32889,50 +32904,11 @@ function hideOverlay(overlay) {
|
|
|
32889
32904
|
}
|
|
32890
32905
|
}
|
|
32891
32906
|
|
|
32892
|
-
const styleCss = "
|
|
32907
|
+
const styleCss = "/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\tkol-tooltip-wc .tooltip-floating {\n\t\tanimation-duration: 0.5s;\n\t\tanimation-iteration-count: 1;\n\t\tanimation-name: fadeInOpacity;\n\t\tanimation-timing-function: ease-in;\n\t\tbox-sizing: border-box;\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\tvisibility: hidden;\n\t\t/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tmax-width: 90vw;\n\t\tmax-height: 90vh;\n\t}\n\n\t/* Shared between content and arrow */\n\tkol-tooltip-wc .tooltip-area {\n\t\tbackground-color: #fff;\n\t\tcolor: #000;\n\t}\n\n\tkol-tooltip-wc .tooltip-arrow {\n\t\theight: 10px;\n\t\tposition: absolute;\n\t\ttransform: rotate(45deg);\n\t\twidth: 10px;\n\t\tz-index: 999;\n\t}\n\n\tkol-tooltip-wc .tooltip-content {\n\t\tposition: relative;\n\t\tz-index: 1000;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n";
|
|
32893
32908
|
|
|
32894
32909
|
class KolTooltip {
|
|
32895
32910
|
constructor(hostRef) {
|
|
32896
32911
|
registerInstance(this, hostRef);
|
|
32897
|
-
this.alignTooltip = () => {
|
|
32898
|
-
var _a;
|
|
32899
|
-
if (processEnv !== 'test' && this.previousSibling && this.tooltipElement) {
|
|
32900
|
-
const target = this.previousSibling;
|
|
32901
|
-
const tooltipEl = this.tooltipElement;
|
|
32902
|
-
const arrowEl = this.arrowElement;
|
|
32903
|
-
const middleware = [offset((_a = arrowEl === null || arrowEl === void 0 ? void 0 : arrowEl.offsetHeight) !== null && _a !== void 0 ? _a : 10), flip(), shift()];
|
|
32904
|
-
if (arrowEl) {
|
|
32905
|
-
middleware.push(arrow({ element: arrowEl }));
|
|
32906
|
-
}
|
|
32907
|
-
void computePosition(target, tooltipEl, {
|
|
32908
|
-
placement: this.state._align,
|
|
32909
|
-
middleware: middleware,
|
|
32910
|
-
}).then(({ x, y, middlewareData, placement }) => {
|
|
32911
|
-
var _a, _b;
|
|
32912
|
-
Object.assign(tooltipEl.style, {
|
|
32913
|
-
left: `${x}px`,
|
|
32914
|
-
top: `${y}px`,
|
|
32915
|
-
visibility: 'visible',
|
|
32916
|
-
});
|
|
32917
|
-
if (arrowEl) {
|
|
32918
|
-
if ((_a = middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.x) {
|
|
32919
|
-
Object.assign(arrowEl.style, {
|
|
32920
|
-
left: `${middlewareData.arrow.x}px`,
|
|
32921
|
-
top: placement === 'bottom' ? `${-arrowEl.offsetHeight / 2}px` : '',
|
|
32922
|
-
bottom: placement === 'top' ? `${-arrowEl.offsetHeight / 2}px` : '',
|
|
32923
|
-
});
|
|
32924
|
-
}
|
|
32925
|
-
else if ((_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.y) {
|
|
32926
|
-
Object.assign(arrowEl.style, {
|
|
32927
|
-
left: placement === 'right' ? `${-arrowEl.offsetWidth / 2}px` : '',
|
|
32928
|
-
right: placement === 'left' ? `${-arrowEl.offsetWidth / 2}px` : '',
|
|
32929
|
-
top: `${middlewareData.arrow.y}px`,
|
|
32930
|
-
});
|
|
32931
|
-
}
|
|
32932
|
-
}
|
|
32933
|
-
});
|
|
32934
|
-
}
|
|
32935
|
-
};
|
|
32936
32912
|
this.showTooltip = () => {
|
|
32937
32913
|
if (this.previousSibling && this.tooltipElement) {
|
|
32938
32914
|
showOverlay(this.tooltipElement);
|
|
@@ -32940,7 +32916,9 @@ class KolTooltip {
|
|
|
32940
32916
|
getDocument().body.addEventListener('keyup', this.hideTooltipByEscape);
|
|
32941
32917
|
const target = this.previousSibling;
|
|
32942
32918
|
const tooltipEl = this.tooltipElement;
|
|
32943
|
-
this.cleanupAutoPositioning = autoUpdate(target, tooltipEl,
|
|
32919
|
+
this.cleanupAutoPositioning = autoUpdate(target, tooltipEl, () => {
|
|
32920
|
+
void this.alignTooltip();
|
|
32921
|
+
});
|
|
32944
32922
|
}
|
|
32945
32923
|
};
|
|
32946
32924
|
this.hideTooltip = () => {
|
|
@@ -33024,6 +33002,16 @@ class KolTooltip {
|
|
|
33024
33002
|
_label: '…',
|
|
33025
33003
|
};
|
|
33026
33004
|
}
|
|
33005
|
+
async alignTooltip() {
|
|
33006
|
+
if (this.tooltipElement && this.previousSibling) {
|
|
33007
|
+
await alignFloatingElements({
|
|
33008
|
+
align: this._align,
|
|
33009
|
+
referenceElement: this.previousSibling,
|
|
33010
|
+
arrowElement: this.arrowElement,
|
|
33011
|
+
floatingElement: this.tooltipElement,
|
|
33012
|
+
});
|
|
33013
|
+
}
|
|
33014
|
+
}
|
|
33027
33015
|
render() {
|
|
33028
33016
|
return (hAsync(Host, null, this.state._label !== '' && (hAsync("div", { class: "tooltip-floating", ref: this.catchTooltipElement }, hAsync("div", { class: "tooltip-area tooltip-arrow", ref: this.catchArrowElement }), hAsync("kol-span-wc", { class: "tooltip-area tooltip-content", id: this.state._id, _accessKey: this._accessKey, _label: this.state._label })))));
|
|
33029
33017
|
}
|
|
@@ -33094,7 +33082,7 @@ class KolTooltip {
|
|
|
33094
33082
|
}; }
|
|
33095
33083
|
}
|
|
33096
33084
|
|
|
33097
|
-
const defaultStyleCss = "@layer kol-global {\n\t
|
|
33085
|
+
const defaultStyleCss = "@layer kol-global {\n\t.sc-kol-version-default-h {\n\t\t\n\t\t--a11y-min-size: 44px;\n\t\t\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t\n\t\thyphens: auto;\n\t\t\n\t\tletter-spacing: inherit;\n\t\t\n\t\tword-break: break-word;\n\t\t\n\t\tword-spacing: inherit;\n\t}\n\n\t\n\t\n\t\n\t\n\t\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t\n\t\tfont-family: inherit;\n\t\t\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; \n\t}\n}\n\n@layer kol-global {\n\t.sc-kol-version-default-h {\n\t\t\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t\n\t\tbox-sizing: border-box;\n\t}\n\n\t\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}";
|
|
33098
33086
|
|
|
33099
33087
|
class KolVersion {
|
|
33100
33088
|
constructor(hostRef) {
|
|
@@ -33298,9 +33286,14 @@ class ToasterService {
|
|
|
33298
33286
|
console.warn('Toaster service is already disposed.');
|
|
33299
33287
|
}
|
|
33300
33288
|
}
|
|
33301
|
-
|
|
33289
|
+
enqueue(toast) {
|
|
33302
33290
|
if (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') {
|
|
33303
|
-
|
|
33291
|
+
return this.toastContainerElement.enqueue(toast);
|
|
33292
|
+
}
|
|
33293
|
+
}
|
|
33294
|
+
closeAll() {
|
|
33295
|
+
if (this.toastContainerElement && typeof this.toastContainerElement.closeAll === 'function') {
|
|
33296
|
+
void this.toastContainerElement.closeAll();
|
|
33304
33297
|
}
|
|
33305
33298
|
}
|
|
33306
33299
|
}
|