@public-ui/hydrate 2.0.0-rc.7 → 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 +235 -240
- 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
|
|
|
@@ -10160,6 +10180,9 @@ class KolAccordion {
|
|
|
10160
10180
|
constructor(hostRef) {
|
|
10161
10181
|
registerInstance(this, hostRef);
|
|
10162
10182
|
this.nonce = nonce();
|
|
10183
|
+
this.catchRef = (ref) => {
|
|
10184
|
+
propagateFocus(this.host, ref);
|
|
10185
|
+
};
|
|
10163
10186
|
this.onClick = (event) => {
|
|
10164
10187
|
this._open = !this._open;
|
|
10165
10188
|
setTimeout(() => {
|
|
@@ -10182,7 +10205,7 @@ class KolAccordion {
|
|
|
10182
10205
|
return (hAsync(Host, null, hAsync("div", { class: {
|
|
10183
10206
|
accordion: true,
|
|
10184
10207
|
open: this.state._open === true,
|
|
10185
|
-
} }, hAsync("kol-heading-wc", { _label: "", _level: this.state._level }, hAsync("kol-button-wc", { _ariaControls: this.nonce, _ariaExpanded: this.state._open, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { class: "wrapper" }, hAsync("div", { class: "animation-wrapper" }, hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", null)))))));
|
|
10208
|
+
} }, hAsync("kol-heading-wc", { _label: "", _level: this.state._level }, hAsync("kol-button-wc", { ref: this.catchRef, slot: "expert", _ariaControls: this.nonce, _ariaExpanded: this.state._open, _icons: this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add', _label: this.state._label, _on: { onClick: this.onClick } })), hAsync("div", { class: "wrapper" }, hAsync("div", { class: "animation-wrapper" }, hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", id: this.nonce }, hAsync("slot", null)))))));
|
|
10186
10209
|
}
|
|
10187
10210
|
validateLabel(value) {
|
|
10188
10211
|
validateLabel(this, value);
|
|
@@ -10204,6 +10227,7 @@ class KolAccordion {
|
|
|
10204
10227
|
this.validateOn(this._on);
|
|
10205
10228
|
this.validateOpen(this._open);
|
|
10206
10229
|
}
|
|
10230
|
+
get host() { return getElement(this); }
|
|
10207
10231
|
static get watchers() { return {
|
|
10208
10232
|
"_label": ["validateLabel"],
|
|
10209
10233
|
"_level": ["validateLevel"],
|
|
@@ -10229,7 +10253,7 @@ class KolAccordion {
|
|
|
10229
10253
|
}; }
|
|
10230
10254
|
}
|
|
10231
10255
|
|
|
10232
|
-
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}";
|
|
10233
10257
|
|
|
10234
10258
|
class KolAlert {
|
|
10235
10259
|
constructor(hostRef) {
|
|
@@ -10500,7 +10524,7 @@ class KolAlertWc {
|
|
|
10500
10524
|
}; }
|
|
10501
10525
|
}
|
|
10502
10526
|
|
|
10503
|
-
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}";
|
|
10504
10528
|
|
|
10505
10529
|
class KolAvatar {
|
|
10506
10530
|
constructor(hostRef) {
|
|
@@ -11110,7 +11134,7 @@ const handleColorChange = (value) => {
|
|
|
11110
11134
|
};
|
|
11111
11135
|
};
|
|
11112
11136
|
|
|
11113
|
-
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}";
|
|
11114
11138
|
|
|
11115
11139
|
featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
|
|
11116
11140
|
class KolBadge {
|
|
@@ -11210,7 +11234,7 @@ const watchNavLinks = (className, component, value) => {
|
|
|
11210
11234
|
uiUxHintMillerscheZahl(className, component.state._links.length);
|
|
11211
11235
|
};
|
|
11212
11236
|
|
|
11213
|
-
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}";
|
|
11214
11238
|
|
|
11215
11239
|
class KolBreadcrumb {
|
|
11216
11240
|
constructor(hostRef) {
|
|
@@ -11268,14 +11292,13 @@ class KolBreadcrumb {
|
|
|
11268
11292
|
}; }
|
|
11269
11293
|
}
|
|
11270
11294
|
|
|
11271
|
-
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}";
|
|
11272
11296
|
|
|
11273
11297
|
class KolButton {
|
|
11274
11298
|
constructor(hostRef) {
|
|
11275
11299
|
registerInstance(this, hostRef);
|
|
11276
11300
|
this.catchRef = (ref) => {
|
|
11277
|
-
this.
|
|
11278
|
-
propagateFocus(this.host, this.ref);
|
|
11301
|
+
propagateFocus(this.host, ref);
|
|
11279
11302
|
};
|
|
11280
11303
|
this._accessKey = undefined;
|
|
11281
11304
|
this._ariaControls = undefined;
|
|
@@ -11338,7 +11361,7 @@ class KolButton {
|
|
|
11338
11361
|
}; }
|
|
11339
11362
|
}
|
|
11340
11363
|
|
|
11341
|
-
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}";
|
|
11342
11365
|
|
|
11343
11366
|
class KolButtonGroup {
|
|
11344
11367
|
constructor(hostRef) {
|
|
@@ -11380,14 +11403,13 @@ class KolButtonGroupWc {
|
|
|
11380
11403
|
}; }
|
|
11381
11404
|
}
|
|
11382
11405
|
|
|
11383
|
-
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}";
|
|
11384
11407
|
|
|
11385
11408
|
class KolButtonLink {
|
|
11386
11409
|
constructor(hostRef) {
|
|
11387
11410
|
registerInstance(this, hostRef);
|
|
11388
11411
|
this.catchRef = (ref) => {
|
|
11389
|
-
this.
|
|
11390
|
-
propagateFocus(this.host, this.ref);
|
|
11412
|
+
propagateFocus(this.host, ref);
|
|
11391
11413
|
};
|
|
11392
11414
|
this._accessKey = undefined;
|
|
11393
11415
|
this._ariaControls = undefined;
|
|
@@ -12049,7 +12071,7 @@ class KolButtonWc {
|
|
|
12049
12071
|
}; }
|
|
12050
12072
|
}
|
|
12051
12073
|
|
|
12052
|
-
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}";
|
|
12053
12075
|
|
|
12054
12076
|
class KolCard {
|
|
12055
12077
|
constructor(hostRef) {
|
|
@@ -12192,11 +12214,15 @@ class DetailsAnimationController {
|
|
|
12192
12214
|
}
|
|
12193
12215
|
}
|
|
12194
12216
|
|
|
12195
|
-
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}";
|
|
12196
12218
|
|
|
12197
12219
|
class KolDetails {
|
|
12198
12220
|
constructor(hostRef) {
|
|
12199
12221
|
registerInstance(this, hostRef);
|
|
12222
|
+
this.catchRef = (ref) => {
|
|
12223
|
+
this.summaryElement = ref;
|
|
12224
|
+
propagateFocus(this.host, this.summaryElement);
|
|
12225
|
+
};
|
|
12200
12226
|
this.handleToggle = (event) => {
|
|
12201
12227
|
clearTimeout(this.toggleTimeout);
|
|
12202
12228
|
this.toggleTimeout = setTimeout(() => {
|
|
@@ -12222,7 +12248,7 @@ class KolDetails {
|
|
|
12222
12248
|
render() {
|
|
12223
12249
|
return (hAsync(Host, null, hAsync("details", { ref: (el) => {
|
|
12224
12250
|
this.detailsElement = el;
|
|
12225
|
-
}, onToggle: this.handleToggle }, hAsync("summary", { ref:
|
|
12251
|
+
}, onToggle: this.handleToggle }, hAsync("summary", { ref: this.catchRef }, hAsync("kol-icon", { _label: "", _icons: "codicon codicon-chevron-right", class: `icon ${this.state._open ? 'is-open' : ''}` }), hAsync("span", null, this.state._label)), hAsync("div", { "aria-hidden": this.state._open === false ? 'true' : undefined, class: "content", ref: (element) => (this.contentElement = element) }, hAsync("kol-indented-text", null, hAsync("slot", null))))));
|
|
12226
12252
|
}
|
|
12227
12253
|
validateLabel(value) {
|
|
12228
12254
|
validateLabel(this, value);
|
|
@@ -12333,7 +12359,7 @@ class KolForm {
|
|
|
12333
12359
|
}; }
|
|
12334
12360
|
}
|
|
12335
12361
|
|
|
12336
|
-
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}";
|
|
12337
12363
|
|
|
12338
12364
|
class KolHeading {
|
|
12339
12365
|
constructor(hostRef) {
|
|
@@ -12343,7 +12369,7 @@ class KolHeading {
|
|
|
12343
12369
|
this._secondaryHeadline = undefined;
|
|
12344
12370
|
}
|
|
12345
12371
|
render() {
|
|
12346
|
-
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" })));
|
|
12347
12373
|
}
|
|
12348
12374
|
static get style() { return {
|
|
12349
12375
|
default: defaultStyleCss$x
|
|
@@ -12368,19 +12394,19 @@ class KolHeadingWc {
|
|
|
12368
12394
|
this.renderHeadline = (headline, level) => {
|
|
12369
12395
|
switch (level) {
|
|
12370
12396
|
case 1:
|
|
12371
|
-
return (hAsync("h1", { class: "headline" }, headline, hAsync("slot",
|
|
12397
|
+
return (hAsync("h1", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12372
12398
|
case 2:
|
|
12373
|
-
return (hAsync("h2", { class: "headline" }, headline, hAsync("slot",
|
|
12399
|
+
return (hAsync("h2", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12374
12400
|
case 3:
|
|
12375
|
-
return (hAsync("h3", { class: "headline" }, headline, hAsync("slot",
|
|
12401
|
+
return (hAsync("h3", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12376
12402
|
case 4:
|
|
12377
|
-
return (hAsync("h4", { class: "headline" }, headline, hAsync("slot",
|
|
12403
|
+
return (hAsync("h4", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12378
12404
|
case 5:
|
|
12379
|
-
return (hAsync("h5", { class: "headline" }, headline, hAsync("slot",
|
|
12405
|
+
return (hAsync("h5", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12380
12406
|
case 6:
|
|
12381
|
-
return (hAsync("h6", { class: "headline" }, headline, hAsync("slot",
|
|
12407
|
+
return (hAsync("h6", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12382
12408
|
default:
|
|
12383
|
-
return (hAsync("strong", { class: "headline" }, headline, hAsync("slot",
|
|
12409
|
+
return (hAsync("strong", { class: "headline" }, headline, hAsync("slot", { name: "expert" })));
|
|
12384
12410
|
}
|
|
12385
12411
|
};
|
|
12386
12412
|
this.renderSecondaryHeadline = (headline, level) => {
|
|
@@ -12498,7 +12524,7 @@ function validateLoading(component, value) {
|
|
|
12498
12524
|
watchValidator(component, '_loading', (value) => typeof value === 'string' && loadingOptions.includes(value), new Set(loadingOptions), value);
|
|
12499
12525
|
}
|
|
12500
12526
|
|
|
12501
|
-
const defaultStyleCss$v = "@layer kol-component {\n\timg {\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}";
|
|
12527
|
+
const defaultStyleCss$v = "@layer kol-component {\n\t.sc-kol-image-default-h {\n\t\tdisplay: inline-block;\n\t}\n\timg {\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}";
|
|
12502
12528
|
|
|
12503
12529
|
class KolImage {
|
|
12504
12530
|
constructor(hostRef) {
|
|
@@ -12570,7 +12596,7 @@ class KolImage {
|
|
|
12570
12596
|
}; }
|
|
12571
12597
|
}
|
|
12572
12598
|
|
|
12573
|
-
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}";
|
|
12574
12600
|
|
|
12575
12601
|
class KolIndentedText {
|
|
12576
12602
|
constructor(hostRef) {
|
|
@@ -13083,7 +13109,7 @@ const InternalUnderlinedAccessKey = ({ accessKey, label }) => {
|
|
|
13083
13109
|
rest.join(accessKey))) : null));
|
|
13084
13110
|
};
|
|
13085
13111
|
|
|
13086
|
-
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}";
|
|
13087
13113
|
|
|
13088
13114
|
class KolInputCheckbox {
|
|
13089
13115
|
render() {
|
|
@@ -13094,13 +13120,12 @@ class KolInputCheckbox {
|
|
|
13094
13120
|
[this.state._variant]: true,
|
|
13095
13121
|
'hide-label': !!this.state._hideLabel,
|
|
13096
13122
|
checked: this.state._checked,
|
|
13097
|
-
}, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' ? 0 : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
|
|
13123
|
+
}, "data-role": this.state._variant === 'button' ? 'button' : undefined, onKeyPress: this.state._variant === 'button' ? this.onChange : undefined, tabIndex: this.state._variant === 'button' && !this.state._disabled ? 0 : undefined, _accessKey: this.state._accessKey, _alert: this.state._alert, _disabled: this.state._disabled, _error: this.state._error, _hideError: this.state._hideError, _hideLabel: this.state._hideLabel, _hint: this.state._hint, _id: this.state._id, _label: this.state._label, _required: this.state._required, _tooltipAlign: this._tooltipAlign, _touched: this.state._touched }, hAsync("span", { slot: "label" }, hasExpertSlot ? (hAsync("slot", { name: "expert" })) : typeof this.state._accessKey === 'string' ? (hAsync(Fragment, null, hAsync(InternalUnderlinedAccessKey, { accessKey: this.state._accessKey, label: this.state._label }), ' ', hAsync("span", { class: "access-key-hint", "aria-hidden": "true" }, this.state._accessKey))) : (hAsync("span", null, this.state._label))), hAsync("div", { slot: "input" }, hAsync("kol-icon", { class: "icon", onClick: this.handleIconClick.bind(this), _icons: this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked, _label: "" }), hAsync("input", Object.assign({ ref: this.catchRef, title: "", accessKey: this.state._accessKey, "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, "aria-label": this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, checked: this.state._checked, disabled: this.state._disabled, id: this.state._id, indeterminate: this.state._indeterminate, name: this.state._name, required: this.state._required, tabIndex: this.state._tabIndex, type: "checkbox" }, this.controller.onFacade, { onChange: this.onChange, onClick: undefined }))))));
|
|
13098
13124
|
}
|
|
13099
13125
|
constructor(hostRef) {
|
|
13100
13126
|
registerInstance(this, hostRef);
|
|
13101
13127
|
this.catchRef = (ref) => {
|
|
13102
|
-
this.
|
|
13103
|
-
propagateFocus(this.host, this.ref);
|
|
13128
|
+
propagateFocus(this.host, ref);
|
|
13104
13129
|
};
|
|
13105
13130
|
this.onChange = (event) => {
|
|
13106
13131
|
var _a;
|
|
@@ -13372,7 +13397,7 @@ class InputColorController extends InputIconController {
|
|
|
13372
13397
|
}
|
|
13373
13398
|
}
|
|
13374
13399
|
|
|
13375
|
-
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}";
|
|
13376
13401
|
|
|
13377
13402
|
class KolInputColor {
|
|
13378
13403
|
render() {
|
|
@@ -13690,7 +13715,7 @@ InputDateController.isoTimeRegex = /^[0-2]\d:[0-5]\d(:[0-5]\d(?:\.\d+)?)?/;
|
|
|
13690
13715
|
InputDateController.isoWeekRegex = /^\d{4}-W(?:[0-4]\d|5[0-3])$/;
|
|
13691
13716
|
InputDateController.DEFAULT_MAX_DATE = new Date(9999, 11, 31, 23, 59, 59);
|
|
13692
13717
|
|
|
13693
|
-
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}";
|
|
13694
13719
|
|
|
13695
13720
|
class KolInputDate {
|
|
13696
13721
|
render() {
|
|
@@ -14058,7 +14083,7 @@ class InputEmailController extends InputTextEmailController {
|
|
|
14058
14083
|
}
|
|
14059
14084
|
}
|
|
14060
14085
|
|
|
14061
|
-
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}";
|
|
14062
14087
|
|
|
14063
14088
|
class KolInputEmail {
|
|
14064
14089
|
render() {
|
|
@@ -14320,7 +14345,7 @@ class InputFileController extends InputIconController {
|
|
|
14320
14345
|
}
|
|
14321
14346
|
}
|
|
14322
14347
|
|
|
14323
|
-
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}";
|
|
14324
14349
|
|
|
14325
14350
|
class KolInputFile {
|
|
14326
14351
|
render() {
|
|
@@ -14595,7 +14620,7 @@ class InputNumberController extends InputIconController {
|
|
|
14595
14620
|
}
|
|
14596
14621
|
}
|
|
14597
14622
|
|
|
14598
|
-
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}";
|
|
14599
14624
|
|
|
14600
14625
|
class KolInputNumber {
|
|
14601
14626
|
render() {
|
|
@@ -14817,7 +14842,7 @@ class KolInputNumber {
|
|
|
14817
14842
|
}; }
|
|
14818
14843
|
}
|
|
14819
14844
|
|
|
14820
|
-
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}";
|
|
14821
14846
|
|
|
14822
14847
|
class KolInputPassword {
|
|
14823
14848
|
render() {
|
|
@@ -15032,7 +15057,7 @@ class KolInputPassword {
|
|
|
15032
15057
|
}; }
|
|
15033
15058
|
}
|
|
15034
15059
|
|
|
15035
|
-
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}";
|
|
15036
15061
|
|
|
15037
15062
|
class KolInputRadio {
|
|
15038
15063
|
render() {
|
|
@@ -15058,8 +15083,7 @@ class KolInputRadio {
|
|
|
15058
15083
|
constructor(hostRef) {
|
|
15059
15084
|
registerInstance(this, hostRef);
|
|
15060
15085
|
this.catchRef = (ref) => {
|
|
15061
|
-
this.
|
|
15062
|
-
propagateFocus(this.host, this.ref);
|
|
15086
|
+
propagateFocus(this.host, ref);
|
|
15063
15087
|
};
|
|
15064
15088
|
this.onChange = (event) => {
|
|
15065
15089
|
var _a;
|
|
@@ -15265,7 +15289,7 @@ class InputRangeController extends InputIconController {
|
|
|
15265
15289
|
}
|
|
15266
15290
|
}
|
|
15267
15291
|
|
|
15268
|
-
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}";
|
|
15269
15293
|
|
|
15270
15294
|
class KolInputRange {
|
|
15271
15295
|
render() {
|
|
@@ -15480,7 +15504,7 @@ const validateAlert = (component, value) => {
|
|
|
15480
15504
|
watchBoolean(component, '_alert', value);
|
|
15481
15505
|
};
|
|
15482
15506
|
|
|
15483
|
-
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}";
|
|
15484
15508
|
|
|
15485
15509
|
featureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);
|
|
15486
15510
|
class KolInputText {
|
|
@@ -15723,7 +15747,7 @@ class KolInputText {
|
|
|
15723
15747
|
}; }
|
|
15724
15748
|
}
|
|
15725
15749
|
|
|
15726
|
-
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}";
|
|
15727
15751
|
|
|
15728
15752
|
const max$1 = 360;
|
|
15729
15753
|
function degreeToRadians(degree) {
|
|
@@ -15824,14 +15848,13 @@ class KolKolibri {
|
|
|
15824
15848
|
}; }
|
|
15825
15849
|
}
|
|
15826
15850
|
|
|
15827
|
-
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}";
|
|
15828
15852
|
|
|
15829
15853
|
class KolLink {
|
|
15830
15854
|
constructor(hostRef) {
|
|
15831
15855
|
registerInstance(this, hostRef);
|
|
15832
15856
|
this.catchRef = (ref) => {
|
|
15833
|
-
this.
|
|
15834
|
-
propagateFocus(this.host, this.ref);
|
|
15857
|
+
propagateFocus(this.host, ref);
|
|
15835
15858
|
};
|
|
15836
15859
|
this._accessKey = undefined;
|
|
15837
15860
|
this._download = undefined;
|
|
@@ -15878,14 +15901,13 @@ class KolLink {
|
|
|
15878
15901
|
}; }
|
|
15879
15902
|
}
|
|
15880
15903
|
|
|
15881
|
-
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}";
|
|
15882
15905
|
|
|
15883
15906
|
class KolLinkButton {
|
|
15884
15907
|
constructor(hostRef) {
|
|
15885
15908
|
registerInstance(this, hostRef);
|
|
15886
15909
|
this.catchRef = (ref) => {
|
|
15887
|
-
this.
|
|
15888
|
-
propagateFocus(this.host, this.ref);
|
|
15910
|
+
propagateFocus(this.host, ref);
|
|
15889
15911
|
};
|
|
15890
15912
|
this._accessKey = undefined;
|
|
15891
15913
|
this._customClass = undefined;
|
|
@@ -15940,7 +15962,7 @@ class KolLinkButton {
|
|
|
15940
15962
|
}; }
|
|
15941
15963
|
}
|
|
15942
15964
|
|
|
15943
|
-
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}";
|
|
15944
15966
|
|
|
15945
15967
|
const ListItem = (props) => {
|
|
15946
15968
|
const list = [];
|
|
@@ -16416,7 +16438,7 @@ BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Mediz
|
|
|
16416
16438
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
|
|
16417
16439
|
BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
|
|
16418
16440
|
|
|
16419
|
-
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}";
|
|
16420
16442
|
|
|
16421
16443
|
function enumToArray(enumeration, enumAsMap = new Map()) {
|
|
16422
16444
|
Object.entries(enumeration).map(([key, value]) => {
|
|
@@ -16478,7 +16500,7 @@ class KolLogo {
|
|
|
16478
16500
|
}; }
|
|
16479
16501
|
}
|
|
16480
16502
|
|
|
16481
|
-
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}";
|
|
16482
16504
|
|
|
16483
16505
|
class KolModal {
|
|
16484
16506
|
constructor(hostRef) {
|
|
@@ -16595,7 +16617,7 @@ const validateHasCompactButton = (component, value) => {
|
|
|
16595
16617
|
watchBoolean(component, '_hasCompactButton', value);
|
|
16596
16618
|
};
|
|
16597
16619
|
|
|
16598
|
-
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}";
|
|
16599
16621
|
|
|
16600
16622
|
class KolNav {
|
|
16601
16623
|
constructor(hostRef) {
|
|
@@ -16741,7 +16763,7 @@ const validateMax = (component, value, options) => {
|
|
|
16741
16763
|
watchNumber(component, '_max', value, options);
|
|
16742
16764
|
};
|
|
16743
16765
|
|
|
16744
|
-
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}";
|
|
16745
16767
|
|
|
16746
16768
|
const leftDoubleArrowIcon = {
|
|
16747
16769
|
left: 'codicon codicon-debug-reverse-continue',
|
|
@@ -17077,6 +17099,10 @@ class KolPagination {
|
|
|
17077
17099
|
}; }
|
|
17078
17100
|
}
|
|
17079
17101
|
|
|
17102
|
+
const validateShow = (component, value, hooks) => {
|
|
17103
|
+
watchBoolean(component, '_show', value, hooks);
|
|
17104
|
+
};
|
|
17105
|
+
|
|
17080
17106
|
const min = Math.min;
|
|
17081
17107
|
const max = Math.max;
|
|
17082
17108
|
const round = Math.round;
|
|
@@ -18460,41 +18486,46 @@ const computePosition = (reference, floating, options) => {
|
|
|
18460
18486
|
});
|
|
18461
18487
|
};
|
|
18462
18488
|
|
|
18463
|
-
const
|
|
18464
|
-
|
|
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
|
+
}
|
|
18465
18522
|
};
|
|
18466
18523
|
|
|
18467
|
-
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";
|
|
18468
18525
|
|
|
18469
18526
|
class KolPopover {
|
|
18470
18527
|
constructor(hostRef) {
|
|
18471
18528
|
registerInstance(this, hostRef);
|
|
18472
|
-
this.alignPopover = (callBack) => {
|
|
18473
|
-
setTimeout(() => {
|
|
18474
|
-
var _a;
|
|
18475
|
-
if (processEnv !== 'test' && this.triggerElement && this.popoverElement) {
|
|
18476
|
-
const trigger = this.triggerElement;
|
|
18477
|
-
const popoverEl = this.popoverElement;
|
|
18478
|
-
const arrowEl = this.arrowElement;
|
|
18479
|
-
const middleware = [offset((_a = arrowEl === null || arrowEl === void 0 ? void 0 : arrowEl.offsetHeight) !== null && _a !== void 0 ? _a : 10), flip(), shift()];
|
|
18480
|
-
if (arrowEl) {
|
|
18481
|
-
middleware.push(arrow({ element: arrowEl }));
|
|
18482
|
-
}
|
|
18483
|
-
void computePosition(trigger, popoverEl, {
|
|
18484
|
-
placement: this.state._align,
|
|
18485
|
-
middleware: middleware,
|
|
18486
|
-
}).then(({ x, y, middlewareData, placement }) => {
|
|
18487
|
-
this.setPosition(x, y, middlewareData, placement, callBack);
|
|
18488
|
-
});
|
|
18489
|
-
}
|
|
18490
|
-
});
|
|
18491
|
-
};
|
|
18492
|
-
this.showPopover = () => {
|
|
18493
|
-
this.addListenersToBody();
|
|
18494
|
-
this.alignPopover(() => {
|
|
18495
|
-
this.state = Object.assign(Object.assign({}, this.state), { _visible: true });
|
|
18496
|
-
});
|
|
18497
|
-
};
|
|
18498
18529
|
this.hidePopoverByEscape = (event) => {
|
|
18499
18530
|
if (event.key === 'Escape')
|
|
18500
18531
|
this.hidePopover();
|
|
@@ -18524,42 +18555,16 @@ class KolPopover {
|
|
|
18524
18555
|
_visible: false,
|
|
18525
18556
|
};
|
|
18526
18557
|
}
|
|
18527
|
-
|
|
18528
|
-
|
|
18529
|
-
|
|
18530
|
-
|
|
18531
|
-
|
|
18532
|
-
|
|
18533
|
-
|
|
18534
|
-
|
|
18535
|
-
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,
|
|
18536
18566
|
});
|
|
18537
|
-
|
|
18538
|
-
switch (placement) {
|
|
18539
|
-
case 'top':
|
|
18540
|
-
this.arrowElement.style.inset = `100% auto auto ${middlewareData.arrow.x || 0}px`;
|
|
18541
|
-
this.arrowElement.style.translate = '0 -50%';
|
|
18542
|
-
break;
|
|
18543
|
-
case 'right':
|
|
18544
|
-
this.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px 100% auto auto`;
|
|
18545
|
-
this.arrowElement.style.translate = '50% 0';
|
|
18546
|
-
break;
|
|
18547
|
-
case 'bottom':
|
|
18548
|
-
this.arrowElement.style.inset = `auto auto 100% ${middlewareData.arrow.x || 0}px`;
|
|
18549
|
-
this.arrowElement.style.translate = '0 50%';
|
|
18550
|
-
break;
|
|
18551
|
-
case 'left':
|
|
18552
|
-
this.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px auto auto 100%`;
|
|
18553
|
-
this.arrowElement.style.translate = '-50% 0';
|
|
18554
|
-
break;
|
|
18555
|
-
}
|
|
18556
|
-
}
|
|
18557
|
-
if (oldPos.left !== this.popoverElement.style.left || oldPos.top !== this.popoverElement.style.top) {
|
|
18558
|
-
this.alignPopover(callBack);
|
|
18559
|
-
}
|
|
18560
|
-
else if (typeof callBack === 'function') {
|
|
18561
|
-
callBack();
|
|
18562
|
-
}
|
|
18567
|
+
this.state = Object.assign(Object.assign({}, this.state), { _visible: true });
|
|
18563
18568
|
}
|
|
18564
18569
|
}
|
|
18565
18570
|
hidePopover() {
|
|
@@ -18574,14 +18579,18 @@ class KolPopover {
|
|
|
18574
18579
|
const body = getDocument().body;
|
|
18575
18580
|
body.addEventListener('keyup', this.hidePopoverByEscape);
|
|
18576
18581
|
body.addEventListener('click', this.hidePopoverByClickOutside);
|
|
18577
|
-
(_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 });
|
|
18578
18585
|
}
|
|
18579
18586
|
removeListenersToBody() {
|
|
18580
18587
|
var _a;
|
|
18581
18588
|
const body = getDocument().body;
|
|
18582
18589
|
body.removeEventListener('keyup', this.hidePopoverByEscape);
|
|
18583
18590
|
body.removeEventListener('click', this.hidePopoverByClickOutside);
|
|
18584
|
-
(_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
|
+
});
|
|
18585
18594
|
}
|
|
18586
18595
|
render() {
|
|
18587
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))));
|
|
@@ -18592,7 +18601,7 @@ class KolPopover {
|
|
|
18592
18601
|
validateShow(value) {
|
|
18593
18602
|
validateShow(this, value);
|
|
18594
18603
|
if (value)
|
|
18595
|
-
this.showPopover();
|
|
18604
|
+
void this.showPopover();
|
|
18596
18605
|
}
|
|
18597
18606
|
componentWillLoad() {
|
|
18598
18607
|
this.validateAlign(this._align);
|
|
@@ -18605,7 +18614,7 @@ class KolPopover {
|
|
|
18605
18614
|
static get style() { return styleCss$1; }
|
|
18606
18615
|
static get cmpMeta() { return {
|
|
18607
18616
|
"$flags$": 4,
|
|
18608
|
-
"$tagName$": "kol-popover",
|
|
18617
|
+
"$tagName$": "kol-popover-wc",
|
|
18609
18618
|
"$members$": {
|
|
18610
18619
|
"_align": [1],
|
|
18611
18620
|
"_show": [1540],
|
|
@@ -18625,7 +18634,7 @@ var KoliBriProgressVariantEnum;
|
|
|
18625
18634
|
KoliBriProgressVariantEnum["cycle-label-value"] = "cycle-label-value";
|
|
18626
18635
|
})(KoliBriProgressVariantEnum || (KoliBriProgressVariantEnum = {}));
|
|
18627
18636
|
|
|
18628
|
-
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}";
|
|
18629
18638
|
|
|
18630
18639
|
const VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);
|
|
18631
18640
|
const createProgressSVG = (state) => {
|
|
@@ -18735,7 +18744,7 @@ class KolProcess {
|
|
|
18735
18744
|
|
|
18736
18745
|
const koliBriQuoteVariantOptions = ['block', 'inline'];
|
|
18737
18746
|
|
|
18738
|
-
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}";
|
|
18739
18748
|
|
|
18740
18749
|
class KolQuote {
|
|
18741
18750
|
constructor(hostRef) {
|
|
@@ -18901,7 +18910,7 @@ class SelectController extends InputIconController {
|
|
|
18901
18910
|
}
|
|
18902
18911
|
}
|
|
18903
18912
|
|
|
18904
|
-
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}";
|
|
18905
18914
|
|
|
18906
18915
|
const isSelected = (valueList, optionValue) => {
|
|
18907
18916
|
return Array.isArray(valueList) && valueList.includes(optionValue);
|
|
@@ -19113,7 +19122,7 @@ class KolSelect {
|
|
|
19113
19122
|
}; }
|
|
19114
19123
|
}
|
|
19115
19124
|
|
|
19116
|
-
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}";
|
|
19117
19126
|
|
|
19118
19127
|
class KolSkipNav {
|
|
19119
19128
|
constructor(hostRef) {
|
|
@@ -19168,7 +19177,7 @@ class KolSkipNav {
|
|
|
19168
19177
|
}; }
|
|
19169
19178
|
}
|
|
19170
19179
|
|
|
19171
|
-
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}";
|
|
19172
19181
|
|
|
19173
19182
|
class KolSpan {
|
|
19174
19183
|
constructor(hostRef) {
|
|
@@ -31488,7 +31497,7 @@ const validateSpinVariant = (component, value) => {
|
|
|
31488
31497
|
watchValidator(component, '_variant', (value) => typeof value === 'string' && spinVariantPropTypeOptions.includes(value), new Set(spinVariantPropTypeOptions), value);
|
|
31489
31498
|
};
|
|
31490
31499
|
|
|
31491
|
-
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}";
|
|
31492
31501
|
|
|
31493
31502
|
function renderSpin(variant) {
|
|
31494
31503
|
switch (variant) {
|
|
@@ -31548,7 +31557,7 @@ class KolSpin {
|
|
|
31548
31557
|
}; }
|
|
31549
31558
|
}
|
|
31550
31559
|
|
|
31551
|
-
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}";
|
|
31552
31561
|
|
|
31553
31562
|
class KolSplitButton {
|
|
31554
31563
|
constructor(hostRef) {
|
|
@@ -31698,7 +31707,7 @@ class KolSymbol {
|
|
|
31698
31707
|
}; }
|
|
31699
31708
|
}
|
|
31700
31709
|
|
|
31701
|
-
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}";
|
|
31702
31711
|
|
|
31703
31712
|
const PAGINATION_OPTIONS = [10, 20, 50, 100];
|
|
31704
31713
|
const CELL_REFS = new Map();
|
|
@@ -32230,7 +32239,7 @@ class KolTable {
|
|
|
32230
32239
|
}; }
|
|
32231
32240
|
}
|
|
32232
32241
|
|
|
32233
|
-
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}";
|
|
32234
32243
|
|
|
32235
32244
|
class KolTabs {
|
|
32236
32245
|
constructor(hostRef) {
|
|
@@ -32587,7 +32596,7 @@ class TextareaController extends InputController {
|
|
|
32587
32596
|
}
|
|
32588
32597
|
}
|
|
32589
32598
|
|
|
32590
|
-
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}";
|
|
32591
32600
|
|
|
32592
32601
|
const increaseTextareaHeight = (el) => {
|
|
32593
32602
|
el.style.overflow = 'hidden';
|
|
@@ -32825,29 +32834,36 @@ class KolToastContainer {
|
|
|
32825
32834
|
};
|
|
32826
32835
|
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: [newToastState, ...this.state._toastStates] });
|
|
32827
32836
|
setTimeout(() => {
|
|
32828
|
-
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
|
|
32829
32838
|
? Object.assign(Object.assign({}, localToastState), { status: 'settled' }) : localToastState) });
|
|
32830
32839
|
}, TRANSITION_TIMEOUT);
|
|
32840
|
+
return () => {
|
|
32841
|
+
this.handleClose(newToastState);
|
|
32842
|
+
};
|
|
32831
32843
|
}
|
|
32832
32844
|
handleClose(toastState) {
|
|
32833
32845
|
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => {
|
|
32834
|
-
if (localToastState === toastState) {
|
|
32846
|
+
if (localToastState.id === toastState.id) {
|
|
32835
32847
|
localToastState.status = 'removing';
|
|
32836
32848
|
}
|
|
32837
32849
|
return localToastState;
|
|
32838
32850
|
}) });
|
|
32839
32851
|
setTimeout(() => {
|
|
32840
|
-
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) });
|
|
32841
32853
|
}, TRANSITION_TIMEOUT);
|
|
32842
32854
|
}
|
|
32843
|
-
|
|
32855
|
+
async closeAll() {
|
|
32844
32856
|
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => (Object.assign(Object.assign({}, localToastState), { status: 'removing' }))) });
|
|
32845
32857
|
setTimeout(() => {
|
|
32846
32858
|
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: [] });
|
|
32847
32859
|
}, TRANSITION_TIMEOUT);
|
|
32848
32860
|
}
|
|
32849
32861
|
render() {
|
|
32850
|
-
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 })))));
|
|
32851
32867
|
}
|
|
32852
32868
|
static get style() { return {
|
|
32853
32869
|
default: defaultStyleCss$1
|
|
@@ -32857,7 +32873,8 @@ class KolToastContainer {
|
|
|
32857
32873
|
"$tagName$": "kol-toast-container",
|
|
32858
32874
|
"$members$": {
|
|
32859
32875
|
"state": [32],
|
|
32860
|
-
"enqueue": [64]
|
|
32876
|
+
"enqueue": [64],
|
|
32877
|
+
"closeAll": [64]
|
|
32861
32878
|
},
|
|
32862
32879
|
"$listeners$": undefined,
|
|
32863
32880
|
"$lazyBundleId$": "-",
|
|
@@ -32887,50 +32904,11 @@ function hideOverlay(overlay) {
|
|
|
32887
32904
|
}
|
|
32888
32905
|
}
|
|
32889
32906
|
|
|
32890
|
-
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";
|
|
32891
32908
|
|
|
32892
32909
|
class KolTooltip {
|
|
32893
32910
|
constructor(hostRef) {
|
|
32894
32911
|
registerInstance(this, hostRef);
|
|
32895
|
-
this.alignTooltip = () => {
|
|
32896
|
-
var _a;
|
|
32897
|
-
if (processEnv !== 'test' && this.previousSibling && this.tooltipElement) {
|
|
32898
|
-
const target = this.previousSibling;
|
|
32899
|
-
const tooltipEl = this.tooltipElement;
|
|
32900
|
-
const arrowEl = this.arrowElement;
|
|
32901
|
-
const middleware = [offset((_a = arrowEl === null || arrowEl === void 0 ? void 0 : arrowEl.offsetHeight) !== null && _a !== void 0 ? _a : 10), flip(), shift()];
|
|
32902
|
-
if (arrowEl) {
|
|
32903
|
-
middleware.push(arrow({ element: arrowEl }));
|
|
32904
|
-
}
|
|
32905
|
-
void computePosition(target, tooltipEl, {
|
|
32906
|
-
placement: this.state._align,
|
|
32907
|
-
middleware: middleware,
|
|
32908
|
-
}).then(({ x, y, middlewareData, placement }) => {
|
|
32909
|
-
var _a, _b;
|
|
32910
|
-
Object.assign(tooltipEl.style, {
|
|
32911
|
-
left: `${x}px`,
|
|
32912
|
-
top: `${y}px`,
|
|
32913
|
-
visibility: 'visible',
|
|
32914
|
-
});
|
|
32915
|
-
if (arrowEl) {
|
|
32916
|
-
if ((_a = middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.x) {
|
|
32917
|
-
Object.assign(arrowEl.style, {
|
|
32918
|
-
left: `${middlewareData.arrow.x}px`,
|
|
32919
|
-
top: placement === 'bottom' ? `${-arrowEl.offsetHeight / 2}px` : '',
|
|
32920
|
-
bottom: placement === 'top' ? `${-arrowEl.offsetHeight / 2}px` : '',
|
|
32921
|
-
});
|
|
32922
|
-
}
|
|
32923
|
-
else if ((_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.y) {
|
|
32924
|
-
Object.assign(arrowEl.style, {
|
|
32925
|
-
left: placement === 'right' ? `${-arrowEl.offsetWidth / 2}px` : '',
|
|
32926
|
-
right: placement === 'left' ? `${-arrowEl.offsetWidth / 2}px` : '',
|
|
32927
|
-
top: `${middlewareData.arrow.y}px`,
|
|
32928
|
-
});
|
|
32929
|
-
}
|
|
32930
|
-
}
|
|
32931
|
-
});
|
|
32932
|
-
}
|
|
32933
|
-
};
|
|
32934
32912
|
this.showTooltip = () => {
|
|
32935
32913
|
if (this.previousSibling && this.tooltipElement) {
|
|
32936
32914
|
showOverlay(this.tooltipElement);
|
|
@@ -32938,7 +32916,9 @@ class KolTooltip {
|
|
|
32938
32916
|
getDocument().body.addEventListener('keyup', this.hideTooltipByEscape);
|
|
32939
32917
|
const target = this.previousSibling;
|
|
32940
32918
|
const tooltipEl = this.tooltipElement;
|
|
32941
|
-
this.cleanupAutoPositioning = autoUpdate(target, tooltipEl,
|
|
32919
|
+
this.cleanupAutoPositioning = autoUpdate(target, tooltipEl, () => {
|
|
32920
|
+
void this.alignTooltip();
|
|
32921
|
+
});
|
|
32942
32922
|
}
|
|
32943
32923
|
};
|
|
32944
32924
|
this.hideTooltip = () => {
|
|
@@ -33022,6 +33002,16 @@ class KolTooltip {
|
|
|
33022
33002
|
_label: '…',
|
|
33023
33003
|
};
|
|
33024
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
|
+
}
|
|
33025
33015
|
render() {
|
|
33026
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 })))));
|
|
33027
33017
|
}
|
|
@@ -33092,7 +33082,7 @@ class KolTooltip {
|
|
|
33092
33082
|
}; }
|
|
33093
33083
|
}
|
|
33094
33084
|
|
|
33095
|
-
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}";
|
|
33096
33086
|
|
|
33097
33087
|
class KolVersion {
|
|
33098
33088
|
constructor(hostRef) {
|
|
@@ -33296,9 +33286,14 @@ class ToasterService {
|
|
|
33296
33286
|
console.warn('Toaster service is already disposed.');
|
|
33297
33287
|
}
|
|
33298
33288
|
}
|
|
33299
|
-
|
|
33289
|
+
enqueue(toast) {
|
|
33300
33290
|
if (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') {
|
|
33301
|
-
|
|
33291
|
+
return this.toastContainerElement.enqueue(toast);
|
|
33292
|
+
}
|
|
33293
|
+
}
|
|
33294
|
+
closeAll() {
|
|
33295
|
+
if (this.toastContainerElement && typeof this.toastContainerElement.closeAll === 'function') {
|
|
33296
|
+
void this.toastContainerElement.closeAll();
|
|
33302
33297
|
}
|
|
33303
33298
|
}
|
|
33304
33299
|
}
|