@public-ui/components 4.2.0 → 4.3.0-rc.0

package/dist/esm/devtools-CnPiO1UI.js

@@ -0,0 +1,101 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import { V as isDevMode, L as Log, v as getDocument, E as getWindow, W as koliBriA11yColorContrast, Q as koliBriQuerySelector, X as koliBriQuerySelectorAll, Y as koliBriQuerySelectorColors, _ as KoliBriUtils, p as parseJson, $ as stringifyJson, J as getExperimentalMode, a0 as getColorContrastAnalysis } from './common-DEEjER7G.js';
+import { i as initKoliBri, r as renderDevAdvice } from './dev.utils-HhhlYW_9.js';
+import './index-Brmny3Vg.js';
+
+const getKoliBri = () => {
+    let kolibri = getWindow().KoliBri;
+    if (kolibri === undefined) {
+        kolibri = {};
+        Object.defineProperty(getWindow(), 'KoliBri', {
+            value: kolibri,
+            writable: false,
+        });
+    }
+    return kolibri;
+};
+function prototypeKoliBri(name, cb) {
+    try {
+        Object.defineProperty(getKoliBri(), name, {
+            get: function () {
+                return cb;
+            },
+        });
+    }
+    catch (_a) {
+        Log.debug(`KoliBri property ${name} is already bind.`);
+    }
+}
+const metaModeLog = (name, active) => Log.debug(`${name} ${active ? '' : 'not '}activated`);
+const initialize = () => {
+    initKoliBri();
+    if (isDevMode()) {
+        renderDevAdvice();
+        prototypeKoliBri('a11yColorContrast', koliBriA11yColorContrast);
+        prototypeKoliBri('querySelector', koliBriQuerySelector);
+        prototypeKoliBri('querySelectorAll', koliBriQuerySelectorAll);
+        prototypeKoliBri('querySelectorColors', koliBriQuerySelectorColors);
+        prototypeKoliBri('utils', function () {
+            return KoliBriUtils;
+        });
+        prototypeKoliBri('parseJson', parseJson);
+        prototypeKoliBri('stringifyJson', stringifyJson);
+        metaModeLog('Development mode', isDevMode());
+        metaModeLog('Experimental mode', getExperimentalMode());
+        metaModeLog('Color contrast analysis', getColorContrastAnalysis());
+        setTimeout(() => {
+            try {
+                const document = getDocument();
+                const body = document === null || document === void 0 ? void 0 : document.body;
+                if (document && body && typeof document.createElement === 'function') {
+                    const div = document.createElement('svg');
+                    div.setAttribute('aria-label', 'KoliBri-DevTools');
+                    div.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+                    div.setAttribute('role', 'toolbar');
+                    div.setAttribute('style', 'position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;');
+                    div.innerHTML = `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="50"
+  height="50"
+  viewBox="0 0 600 600"
+>
+  <path d="M353 322L213 304V434L353 322Z" fill="#047" />
+  <path d="M209 564V304L149 434L209 564Z" fill="#047" />
+  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />
+  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />
+  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />
+  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />
+</svg>`;
+                    body.appendChild(div);
+                }
+            }
+            catch (error) {
+                Log.debug(['Could not initialize DevTools UI (likely in SSR/test environment):', error]);
+            }
+        }, 100);
+        if (getColorContrastAnalysis()) {
+            const timeout = setTimeout(() => {
+                clearTimeout(timeout);
+                try {
+                    const document = getDocument();
+                    const body = document === null || document === void 0 ? void 0 : document.body;
+                    if (document && body && typeof document.createElement === 'function') {
+                        setInterval(() => {
+                            KoliBriUtils.queryHtmlElementColors(document.createElement('div'), koliBriA11yColorContrast(body), false, false);
+                        }, 10000);
+                    }
+                }
+                catch (error) {
+                    Log.debug(['Could not initialize color contrast analysis:', error]);
+                }
+            }, 2500);
+        }
+    }
+};
+
+export { initialize };
+//# sourceMappingURL=devtools-CnPiO1UI.js.map
+
+//# sourceMappingURL=devtools-CnPiO1UI.js.map

package/dist/esm/devtools-CnPiO1UI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-CnPiO1UI.js","sources":["src/global/devtools.ts"],"sourcesContent":["import {\n\tgetColorContrastAnalysis,\n\tgetDocument,\n\tgetExperimentalMode,\n\tgetWindow,\n\tisDevMode,\n\tkoliBriA11yColorContrast,\n\tkoliBriQuerySelector,\n\tkoliBriQuerySelectorAll,\n\tkoliBriQuerySelectorColors,\n\tKoliBriUtils,\n\tLog,\n\tparseJson,\n\tstringifyJson,\n} from '../schema';\nimport { initKoliBri, renderDevAdvice } from '../utils/dev.utils';\n\nconst getKoliBri = (): Record<string, unknown> => {\n\tlet kolibri = getWindow().KoliBri;\n\tif (kolibri === undefined) {\n\t\tkolibri = {};\n\t\tObject.defineProperty(getWindow(), 'KoliBri', {\n\t\t\tvalue: kolibri,\n\t\t\twritable: false,\n\t\t});\n\t}\n\treturn kolibri;\n};\n\nfunction prototypeKoliBri<T>(name: string, cb: T) {\n\ttry {\n\t\tObject.defineProperty(getKoliBri(), name, {\n\t\t\tget: function () {\n\t\t\t\treturn cb;\n\t\t\t},\n\t\t});\n\t} catch {\n\t\tLog.debug(`KoliBri property ${name} is already bind.`);\n\t}\n}\n\nconst metaModeLog = (name: string, active: boolean) => Log.debug(`${name} ${active ? '' : 'not '}activated`);\n\nexport const initialize = (): void => {\n\tinitKoliBri();\n\tif (isDevMode()) {\n\t\trenderDevAdvice();\n\n\t\tprototypeKoliBri('a11yColorContrast', koliBriA11yColorContrast);\n\t\tprototypeKoliBri('querySelector', koliBriQuerySelector);\n\t\tprototypeKoliBri('querySelectorAll', koliBriQuerySelectorAll);\n\t\tprototypeKoliBri('querySelectorColors', koliBriQuerySelectorColors);\n\t\tprototypeKoliBri('utils', function () {\n\t\t\treturn KoliBriUtils;\n\t\t});\n\t\tprototypeKoliBri('parseJson', parseJson);\n\t\tprototypeKoliBri('stringifyJson', stringifyJson);\n\n\t\tmetaModeLog('Development mode', isDevMode());\n\t\tmetaModeLog('Experimental mode', getExperimentalMode());\n\t\tmetaModeLog('Color contrast analysis', getColorContrastAnalysis());\n\n\t\t// Delay DOM manipulation to ensure document is ready\n\t\tsetTimeout(() => {\n\t\t\ttry {\n\t\t\t\tconst document = getDocument();\n\t\t\t\tconst body = document?.body;\n\n\t\t\t\t// Only proceed if we have a valid document and body\n\t\t\t\tif (document && body && typeof document.createElement === 'function') {\n\t\t\t\t\tconst div = document.createElement('svg');\n\t\t\t\t\tdiv.setAttribute('aria-label', 'KoliBri-DevTools');\n\t\t\t\t\tdiv.setAttribute('xmlns', 'http://www.w3.org/2000/svg');\n\t\t\t\t\tdiv.setAttribute('role', 'toolbar');\n\t\t\t\t\tdiv.setAttribute('style', 'position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;');\n\t\t\t\t\tdiv.innerHTML = `<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"50\"\n  height=\"50\"\n  viewBox=\"0 0 600 600\"\n>\n  <path d=\"M353 322L213 304V434L353 322Z\" fill=\"#047\" />\n  <path d=\"M209 564V304L149 434L209 564Z\" fill=\"#047\" />\n  <path d=\"M357 316L417 250L361 210L275 244L357 316Z\" fill=\"#047\" />\n  <path d=\"M353 318L35 36L213 300L353 318Z\" fill=\"#047\" />\n  <path d=\"M329 218L237 92L250 222L272 241L329 218Z\" fill=\"#047\" />\n  <path d=\"M391 286L565 272L421 252L391 286Z\" fill=\"#047\" />\n</svg>`;\n\n\t\t\t\t\tbody.appendChild(div);\n\t\t\t\t}\n\t\t\t} catch (error) {\n\t\t\t\tLog.debug(['Could not initialize DevTools UI (likely in SSR/test environment):', error]);\n\t\t\t}\n\t\t}, 100);\n\n\t\tif (getColorContrastAnalysis()) {\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\ttry {\n\t\t\t\t\tconst document = getDocument();\n\t\t\t\t\tconst body = document?.body;\n\t\t\t\t\tif (document && body && typeof document.createElement === 'function') {\n\t\t\t\t\t\tsetInterval(() => {\n\t\t\t\t\t\t\tKoliBriUtils.queryHtmlElementColors(document.createElement('div'), koliBriA11yColorContrast(body), false, false);\n\t\t\t\t\t\t}, 10000);\n\t\t\t\t\t}\n\t\t\t\t} catch (error) {\n\t\t\t\t\tLog.debug(['Could not initialize color contrast analysis:', error]);\n\t\t\t\t}\n\t\t\t}, 2500);\n\t\t}\n\n\t\t// setTimeout(() => {\n\t\t//   const kolButton = koliBriQuerySelector<HTMLButtonElement>(document, '[_label=\"Aktion ausführen\"]');\n\t\t//   if (kolButton) {\n\t\t//     const button = koliBriQuerySelector<HTMLButtonElement>(kolButton?.shadowRoot as ShadowRoot, 'button');\n\t\t//     if (button) {\n\t\t//       kolButton.style.backgroundColor = '#988';\n\t\t//       button.style.backgroundColor = 'inherit';\n\t\t//       button.style.color = '#988';\n\t\t//       const kolButtonColors = koliBriQuerySelectorColors('[_label=\"Aktion ausführen\"]');\n\t\t//       console.log(\n\t\t//         koliBriQuerySelectorColors('button', {\n\t\t//           ...kolButtonColors,\n\t\t//         })\n\t\t//       );\n\t\t//     }\n\t\t//   }\n\t\t// }, 2500);\n\t}\n};\n"],"names":[],"mappings":";;;;;;;AAiBA,MAAM,UAAU,GAAG,MAA8B;AAChD,IAAA,IAAI,OAAO,GAAG,SAAS,EAAE,CAAC,OAAO;AACjC,IAAA,IAAI,OAAO,KAAK,SAAS,EAAE;QAC1B,OAAO,GAAG,EAAE;AACZ,QAAA,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE;AAC7C,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,SAAA,CAAC;;AAEH,IAAA,OAAO,OAAO;AACf,CAAC;AAED,SAAS,gBAAgB,CAAI,IAAY,EAAE,EAAK,EAAA;AAC/C,IAAA,IAAI;AACH,QAAA,MAAM,CAAC,cAAc,CAAC,UAAU,EAAE,EAAE,IAAI,EAAE;AACzC,YAAA,GAAG,EAAE,YAAA;AACJ,gBAAA,OAAO,EAAE;aACT;AACD,SAAA,CAAC;;IACD,OAAA,EAAA,EAAM;AACP,QAAA,GAAG,CAAC,KAAK,CAAC,oBAAoB,IAAI,CAAA,iBAAA,CAAmB,CAAC;;AAExD;AAEA,MAAM,WAAW,GAAG,CAAC,IAAY,EAAE,MAAe,KAAK,GAAG,CAAC,KAAK,CAAC,CAAG,EAAA,IAAI,CAAI,CAAA,EAAA,MAAM,GAAG,EAAE,GAAG,MAAM,CAAW,SAAA,CAAA,CAAC;AAErG,MAAM,UAAU,GAAG,MAAW;AACpC,IAAA,WAAW,EAAE;IACb,IAAI,SAAS,EAAE,EAAE;AAChB,QAAA,eAAe,EAAE;AAEjB,QAAA,gBAAgB,CAAC,mBAAmB,EAAE,wBAAwB,CAAC;AAC/D,QAAA,gBAAgB,CAAC,eAAe,EAAE,oBAAoB,CAAC;AACvD,QAAA,gBAAgB,CAAC,kBAAkB,EAAE,uBAAuB,CAAC;AAC7D,QAAA,gBAAgB,CAAC,qBAAqB,EAAE,0BAA0B,CAAC;QACnE,gBAAgB,CAAC,OAAO,EAAE,YAAA;AACzB,YAAA,OAAO,YAAY;AACpB,SAAC,CAAC;AACF,QAAA,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC;AACxC,QAAA,gBAAgB,CAAC,eAAe,EAAE,aAAa,CAAC;AAEhD,QAAA,WAAW,CAAC,kBAAkB,EAAE,SAAS,EAAE,CAAC;AAC5C,QAAA,WAAW,CAAC,mBAAmB,EAAE,mBAAmB,EAAE,CAAC;AACvD,QAAA,WAAW,CAAC,yBAAyB,EAAE,wBAAwB,EAAE,CAAC;QAGlE,UAAU,CAAC,MAAK;AACf,YAAA,IAAI;AACH,gBAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;gBAC9B,MAAM,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,MAAA,GAAA,MAAA,GAAA,QAAQ,CAAE,IAAI;gBAG3B,IAAI,QAAQ,IAAI,IAAI,IAAI,OAAO,QAAQ,CAAC,aAAa,KAAK,UAAU,EAAE;oBACrE,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AACzC,oBAAA,GAAG,CAAC,YAAY,CAAC,YAAY,EAAE,kBAAkB,CAAC;AAClD,oBAAA,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,4BAA4B,CAAC;AACvD,oBAAA,GAAG,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC;AACnC,oBAAA,GAAG,CAAC,YAAY,CAAC,OAAO,EAAE,8EAA8E,CAAC;oBACzG,GAAG,CAAC,SAAS,GAAG,CAAA;;;;;;;;;;;;OAYd;AAEF,oBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;;;YAErB,OAAO,KAAK,EAAE;gBACf,GAAG,CAAC,KAAK,CAAC,CAAC,oEAAoE,EAAE,KAAK,CAAC,CAAC;;SAEzF,EAAE,GAAG,CAAC;QAEP,IAAI,wBAAwB,EAAE,EAAE;AAC/B,YAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAK;gBAC/B,YAAY,CAAC,OAAO,CAAC;AACrB,gBAAA,IAAI;AACH,oBAAA,MAAM,QAAQ,GAAG,WAAW,EAAE;oBAC9B,MAAM,IAAI,GAAG,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAR,MAAA,GAAA,MAAA,GAAA,QAAQ,CAAE,IAAI;oBAC3B,IAAI,QAAQ,IAAI,IAAI,IAAI,OAAO,QAAQ,CAAC,aAAa,KAAK,UAAU,EAAE;wBACrE,WAAW,CAAC,MAAK;AAChB,4BAAA,YAAY,CAAC,sBAAsB,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,wBAAwB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC;yBAChH,EAAE,KAAK,CAAC;;;gBAET,OAAO,KAAK,EAAE;oBACf,GAAG,CAAC,KAAK,CAAC,CAAC,+CAA+C,EAAE,KAAK,CAAC,CAAC;;aAEpE,EAAE,IAAI,CAAC;;;AAqBX;;;;"}

package/dist/esm/disabled-CtaJsBT2.js

@@ -0,0 +1,21 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import { e as watchBoolean, B as a11yHintDisabled } from './common-DEEjER7G.js';
+
+const validateDisabled = (component, value) => {
+    watchBoolean(component, '_disabled', value, {
+        hooks: {
+            afterPatch: (value) => {
+                if (value === true) {
+                    a11yHintDisabled();
+                }
+            },
+        },
+    });
+};
+
+export { validateDisabled as v };
+//# sourceMappingURL=disabled-CtaJsBT2.js.map
+
+//# sourceMappingURL=disabled-CtaJsBT2.js.map

package/dist/esm/disabled-CtaJsBT2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disabled-CtaJsBT2.js","sources":["src/schema/props/disabled.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { a11yHintDisabled, watchBoolean } from '../utils';\n\n/* types */\nexport type DisabledPropType = boolean;\n\n/**\n * Makes the element not focusable and ignore all events.\n */\nexport type PropDisabled = {\n\tdisabled: DisabledPropType;\n};\n\n/* validator */\nexport const validateDisabled = (component: Generic.Element.Component, value?: DisabledPropType): void => {\n\twatchBoolean(component, '_disabled', value, {\n\t\thooks: {\n\t\t\tafterPatch: (value) => {\n\t\t\t\tif (value === true) {\n\t\t\t\t\ta11yHintDisabled();\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t});\n};\n"],"names":[],"mappings":";;;;;MAea,gBAAgB,GAAG,CAAC,SAAoC,EAAE,KAAwB,KAAU;AACxG,IAAA,YAAY,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE;AAC3C,QAAA,KAAK,EAAE;AACN,YAAA,UAAU,EAAE,CAAC,KAAK,KAAI;AACrB,gBAAA,IAAI,KAAK,KAAK,IAAI,EAAE;AACnB,oBAAA,gBAAgB,EAAE;;aAEnB;AACD,SAAA;AACD,KAAA,CAAC;AACH;;;;"}

package/dist/esm/element-focus-BQXzaLL9.js

@@ -0,0 +1,159 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import { a as __rest } from './tslib.es6-QNbPBOk5.js';
+
+const MAX_TIMEOUT_DURATION = 5000;
+function waitForThemed(host) {
+    return new Promise((resolve, reject) => {
+        let timeoutId;
+        const observer = new MutationObserver(() => {
+            if (host.hasAttribute('data-themed')) {
+                if (timeoutId) {
+                    clearTimeout(timeoutId);
+                }
+                observer.disconnect();
+                resolve();
+            }
+        });
+        observer.observe(host, {
+            attributes: true,
+            attributeFilter: ['data-themed'],
+        });
+        if (host.hasAttribute('data-themed')) {
+            observer.disconnect();
+            resolve();
+            return;
+        }
+        timeoutId = setTimeout(() => {
+            observer.disconnect();
+            reject(new Error('Timeout waiting for data-themed attribute'));
+        }, MAX_TIMEOUT_DURATION);
+    });
+}
+
+const MAX_CLICK_ATTEMPTS = 3;
+async function delegateClick(host, callback) {
+    try {
+        if (!host.hasAttribute('data-themed')) {
+            await waitForThemed(host);
+        }
+        await callback();
+    }
+    catch (_a) {
+        throw new Error(`The interactive element inside the KoliBri web component could not be clicked. Try calling the click method on the web component after a short delay again.`);
+    }
+}
+function isElementVisible(element) {
+    if (!element)
+        return false;
+    const rect = element.getBoundingClientRect();
+    return rect.width > 0 && rect.height > 0;
+}
+async function setClick(element) {
+    let attempts = 0;
+    do {
+        if (element) {
+            element.click();
+        }
+        await new Promise((r) => requestAnimationFrame(r));
+        attempts++;
+    } while (!isElementVisible(element) && attempts < MAX_CLICK_ATTEMPTS);
+}
+
+const MAX_FOCUS_ATTEMPTS = 10;
+function waitForElementInViewport(element, timeoutMs = 2000) {
+    return new Promise((resolve) => {
+        let resolved = false;
+        let observer;
+        let removeScrollEndListener;
+        const done = () => {
+            if (resolved) {
+                return;
+            }
+            resolved = true;
+            clearTimeout(timeoutId);
+            removeScrollEndListener === null || removeScrollEndListener === void 0 ? void 0 : removeScrollEndListener();
+            removeScrollEndListener = undefined;
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            resolve();
+        };
+        const timeoutId = setTimeout(done, timeoutMs);
+        if (typeof window !== 'undefined' && 'onscrollend' in window) {
+            const handleScrollEnd = (event) => {
+                const target = event.target;
+                if (!(target instanceof Node) || !target.contains(element)) {
+                    return;
+                }
+                done();
+            };
+            document.addEventListener('scrollend', handleScrollEnd, { capture: true });
+            removeScrollEndListener = () => {
+                document.removeEventListener('scrollend', handleScrollEnd, { capture: true });
+            };
+            return;
+        }
+        if (typeof IntersectionObserver === 'undefined') {
+            done();
+            return;
+        }
+        observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting)) {
+                done();
+            }
+        }, { threshold: 0 });
+        observer.observe(element);
+    });
+}
+async function delegateFocus(host, callback) {
+    try {
+        if (!host.hasAttribute('data-themed')) {
+            await waitForThemed(host);
+        }
+        await callback();
+    }
+    catch (_a) {
+        throw new Error(`The interactive element inside the KoliBri web component could not be focused. Try calling the focus method on the web component after a short delay again.`);
+    }
+}
+function isActiveElement(element) {
+    const root = element.getRootNode();
+    if (root instanceof ShadowRoot) {
+        return root.activeElement === element;
+    }
+    return document.activeElement === element;
+}
+const FOCUS_OPTIONS = {
+    preventScroll: true,
+};
+async function setFocus(element, options) {
+    if (!element) {
+        return;
+    }
+    const _a = options !== null && options !== void 0 ? options : {}, { afterFocus } = _a, scrollOptions = __rest(_a, ["afterFocus"]);
+    const hasScrollOptions = options && ('behavior' in scrollOptions || 'block' in scrollOptions || 'inline' in scrollOptions);
+    let attempts = 0;
+    do {
+        if (element) {
+            element.focus(FOCUS_OPTIONS);
+        }
+        await new Promise((r) => requestAnimationFrame(r));
+        attempts++;
+    } while (!isActiveElement(element) && attempts < MAX_FOCUS_ATTEMPTS);
+    const focused = isActiveElement(element);
+    if (hasScrollOptions) {
+        const scrollIntoViewOptions = Object.assign(Object.assign({}, scrollOptions), { behavior: scrollOptions.behavior });
+        element.scrollIntoView(scrollIntoViewOptions);
+    }
+    if (afterFocus && focused) {
+        if (hasScrollOptions && scrollOptions.behavior === 'smooth') {
+            await waitForElementInViewport(element);
+        }
+        afterFocus();
+    }
+}
+
+export { delegateClick as a, setClick as b, delegateFocus as d, setFocus as s };
+//# sourceMappingURL=element-focus-BQXzaLL9.js.map
+
+//# sourceMappingURL=element-focus-BQXzaLL9.js.map

package/dist/esm/element-focus-BQXzaLL9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-focus-BQXzaLL9.js","sources":["src/utils/element-themed.ts","src/utils/element-click.ts","src/utils/element-focus.ts"],"sourcesContent":["const MAX_TIMEOUT_DURATION = 5000;\n\n/**\n * Waits until the `data-themed` attribute is set on the host element.\n * Uses a MutationObserver to detect the attribute change and rejects with a\n * timeout error if the attribute is not set within the configured duration.\n *\n * @param host - The Stencil host element to observe\n * @see MAX_TIMEOUT_DURATION\n */\nfunction waitForThemed(host: HTMLElement): Promise<void> {\n\treturn new Promise<void>((resolve, reject) => {\n\t\tlet timeoutId: ReturnType<typeof setTimeout> | undefined;\n\t\tconst observer = new MutationObserver(() => {\n\t\t\tif (host.hasAttribute('data-themed')) {\n\t\t\t\tif (timeoutId) {\n\t\t\t\t\tclearTimeout(timeoutId);\n\t\t\t\t}\n\t\t\t\tobserver.disconnect();\n\t\t\t\tresolve();\n\t\t\t}\n\t\t});\n\n\t\tobserver.observe(host, {\n\t\t\tattributes: true,\n\t\t\tattributeFilter: ['data-themed'],\n\t\t});\n\n\t\tif (host.hasAttribute('data-themed')) {\n\t\t\tobserver.disconnect();\n\t\t\tresolve();\n\t\t\treturn;\n\t\t}\n\n\t\ttimeoutId = setTimeout(() => {\n\t\t\tobserver.disconnect();\n\t\t\treject(new Error('Timeout waiting for data-themed attribute'));\n\t\t}, MAX_TIMEOUT_DURATION);\n\t});\n}\n\nexport { MAX_TIMEOUT_DURATION, waitForThemed };\n","import { waitForThemed } from './element-themed';\n\nconst MAX_CLICK_ATTEMPTS = 3;\n\n/**\n * Delegates click after the component is themed and ready.\n * Waits for the `data-themed` attribute on the host element before invoking the callback.\n *\n * @param host - The Stencil host element\n * @param callback - Async function that triggers click on the desired inner element\n * @throws {Error} If theming times out or the callback fails\n */\nexport async function delegateClick(host: HTMLElement, callback: () => Promise<void>): Promise<void> {\n\ttry {\n\t\tif (!host.hasAttribute('data-themed')) {\n\t\t\tawait waitForThemed(host);\n\t\t}\n\t\tawait callback();\n\t} catch {\n\t\tthrow new Error(\n\t\t\t`The interactive element inside the KoliBri web component could not be clicked. Try calling the click method on the web component after a short delay again.`,\n\t\t);\n\t}\n}\n\n/**\n * Checks whether the given element is currently visible.\n * Uses getBoundingClientRect to reliably detect visibility for all positioning types,\n * including position: fixed, which returns null for offsetParent despite being visible.\n *\n * @param element - The element to check\n */\nfunction isElementVisible(element: HTMLElement): boolean {\n\tif (!element) return false;\n\tconst rect = element.getBoundingClientRect();\n\treturn rect.width > 0 && rect.height > 0;\n}\n\n/**\n * Attempts to click the given element immediately and then again on each animation frame until\n * it becomes visible or the maximum number of attempts is reached.\n * Uses {@link isElementVisible} in the loop condition to decide whether another retry is needed.\n *\n * @param element - The element to click\n * @see MAX_CLICK_ATTEMPTS\n */\nexport async function setClick(element: HTMLElement): Promise<void> {\n\tlet attempts = 0;\n\tdo {\n\t\tif (element) {\n\t\t\telement.click();\n\t\t}\n\t\tawait new Promise((r) => requestAnimationFrame(r));\n\t\tattempts++;\n\t} while (!isElementVisible(element) && attempts < MAX_CLICK_ATTEMPTS);\n}\n\n/**\n * Interface for elements that support async click behavior.\n */\nexport interface ClickableElement {\n\tclick(): Promise<void>;\n}\n","import type { KolFocusOptions } from '../schema';\nimport { waitForThemed } from './element-themed';\n\nconst MAX_FOCUS_ATTEMPTS = 10;\n\n/**\n * Waits for scroll completion affecting the given element.\n * Uses the native `scrollend` event when available and falls back to viewport\n * intersection detection via {@link IntersectionObserver}.\n * A safety timeout guarantees the promise always resolves.\n *\n * @param element - The element to observe\n * @param timeoutMs - Maximum time to wait before resolving regardless of visibility (default 2000 ms)\n */\nfunction waitForElementInViewport(element: HTMLElement, timeoutMs = 2000): Promise<void> {\n\treturn new Promise<void>((resolve) => {\n\t\tlet resolved = false;\n\t\tlet observer: IntersectionObserver | undefined;\n\t\tlet removeScrollEndListener: (() => void) | undefined;\n\n\t\tconst done = () => {\n\t\t\tif (resolved) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tresolved = true;\n\t\t\tclearTimeout(timeoutId);\n\t\t\tremoveScrollEndListener?.();\n\t\t\tremoveScrollEndListener = undefined;\n\t\t\tobserver?.disconnect();\n\t\t\tresolve();\n\t\t};\n\n\t\tconst timeoutId = setTimeout(done, timeoutMs);\n\n\t\tif (typeof window !== 'undefined' && 'onscrollend' in window) {\n\t\t\tconst handleScrollEnd = (event: Event): void => {\n\t\t\t\tconst target = event.target;\n\t\t\t\tif (!(target instanceof Node) || !target.contains(element)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tdone();\n\t\t\t};\n\n\t\t\tdocument.addEventListener('scrollend', handleScrollEnd, { capture: true });\n\t\t\tremoveScrollEndListener = () => {\n\t\t\t\tdocument.removeEventListener('scrollend', handleScrollEnd, { capture: true });\n\t\t\t};\n\t\t\treturn;\n\t\t}\n\n\t\tif (typeof IntersectionObserver === 'undefined') {\n\t\t\tdone();\n\t\t\treturn;\n\t\t}\n\n\t\tobserver = new IntersectionObserver(\n\t\t\t(entries) => {\n\t\t\t\tif (entries.some((entry) => entry.isIntersecting)) {\n\t\t\t\t\tdone();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ threshold: 0 },\n\t\t);\n\n\t\tobserver.observe(element);\n\t});\n}\n\n/**\n * Delegates focus after the component is themed and ready.\n * Waits for the `data-themed` attribute on the host element before invoking the callback.\n *\n * @param host - The Stencil host element\n * @param callback - Async function that applies focus to the desired inner element\n * @throws {Error} If theming times out or the callback fails\n */\nexport async function delegateFocus(host: HTMLElement, callback: () => Promise<void>): Promise<void> {\n\ttry {\n\t\tif (!host.hasAttribute('data-themed')) {\n\t\t\tawait waitForThemed(host);\n\t\t}\n\t\tawait callback();\n\t} catch {\n\t\tthrow new Error(\n\t\t\t`The interactive element inside the KoliBri web component could not be focused. Try calling the focus method on the web component after a short delay again.`,\n\t\t);\n\t}\n}\n\n/**\n * Checks whether the given element is currently the active element.\n * Handles elements inside a Shadow DOM by querying the shadow root's `activeElement`\n * instead of `document.activeElement`, which only reflects the shadow host in that case.\n *\n * @param element - The element to check\n */\nfunction isActiveElement(element: HTMLElement): boolean {\n\tconst root = element.getRootNode();\n\tif (root instanceof ShadowRoot) {\n\t\treturn root.activeElement === element;\n\t}\n\treturn document.activeElement === element;\n}\n\nconst FOCUS_OPTIONS = {\n\tpreventScroll: true,\n} satisfies FocusOptions;\n\n/**\n * Attempts to focus the given element on each animation frame until\n * it becomes the active element or the maximum number of attempts is reached.\n * Uses {@link isActiveElement} to correctly detect focus inside Shadow DOM.\n *\n * When `options` are provided the element is scrolled into view using the supplied\n * {@link ScrollIntoViewOptions} (preventing the browser's default scroll triggered by\n * `focus()` to avoid a double-scroll). If `options.afterFocus` is set, the callback is\n * invoked after the element is focused and – for smooth-scroll transitions – after\n * scrolling settles (`scrollend`, with {@link IntersectionObserver} fallback).\n *\n * @param element - The element to focus\n * @param options - Optional scroll behaviour and completion callback\n * @see MAX_FOCUS_ATTEMPTS\n */\nexport async function setFocus(element: HTMLElement | undefined | null, options?: KolFocusOptions): Promise<void> {\n\tif (!element) {\n\t\treturn;\n\t}\n\tconst { afterFocus, ...scrollOptions } = options ?? {};\n\tconst hasScrollOptions = options && ('behavior' in scrollOptions || 'block' in scrollOptions || 'inline' in scrollOptions);\n\n\tlet attempts = 0;\n\tdo {\n\t\tif (element) {\n\t\t\telement.focus(FOCUS_OPTIONS);\n\t\t}\n\t\tawait new Promise((r) => requestAnimationFrame(r));\n\t\tattempts++;\n\t} while (!isActiveElement(element) && attempts < MAX_FOCUS_ATTEMPTS);\n\n\tconst focused = isActiveElement(element);\n\n\tif (hasScrollOptions) {\n\t\tconst scrollIntoViewOptions: ScrollIntoViewOptions = { ...scrollOptions, behavior: scrollOptions.behavior };\n\t\telement.scrollIntoView(scrollIntoViewOptions);\n\t}\n\n\tif (afterFocus && focused) {\n\t\tif (hasScrollOptions && scrollOptions.behavior === 'smooth') {\n\t\t\tawait waitForElementInViewport(element);\n\t\t}\n\t\tafterFocus();\n\t}\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/element-interaction-C5-6aPzz.js

@@ -0,0 +1,64 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import { s as setFocus, b as setClick, d as delegateFocus$1, a as delegateClick$1 } from './element-focus-BQXzaLL9.js';
+
+function createCtaRef() {
+    const ref = ((el) => {
+        ref.el = el;
+    });
+    ref.el = undefined;
+    return ref;
+}
+function makeMethodDecorator(fn) {
+    return (_target, _key, descriptor) => {
+        descriptor.value = async function () {
+            return fn(this);
+        };
+        return descriptor;
+    };
+}
+function makeFocusDecorator(fn) {
+    return (_target, _key, descriptor) => {
+        descriptor.value = async function (options) {
+            return fn(this, options);
+        };
+        return descriptor;
+    };
+}
+function directFocus(refPropName) {
+    return makeFocusDecorator((self, options) => {
+        var _a;
+        const element = (_a = self[refPropName]) === null || _a === void 0 ? void 0 : _a.el;
+        return element ? setFocus(element, options) : Promise.resolve();
+    });
+}
+function directClick(refPropName) {
+    return makeMethodDecorator((self) => {
+        const element = self[refPropName].el;
+        return element ? setClick(element) : Promise.resolve();
+    });
+}
+function delegateFocus(refPropName) {
+    return makeFocusDecorator((self, options) => {
+        const host = self['host'];
+        if (!host)
+            return Promise.resolve();
+        return delegateFocus$1(host, () => {
+            var _a;
+            const element = (_a = self[refPropName]) === null || _a === void 0 ? void 0 : _a.el;
+            return element ? setFocus(element, options) : Promise.resolve();
+        });
+    });
+}
+function delegateClick(refPropName) {
+    return makeMethodDecorator((self) => delegateClick$1(self['host'], () => {
+        const element = self[refPropName].el;
+        return element ? setClick(element) : Promise.resolve();
+    }));
+}
+
+export { delegateClick as a, directFocus as b, createCtaRef as c, delegateFocus as d, directClick as e };
+//# sourceMappingURL=element-interaction-C5-6aPzz.js.map
+
+//# sourceMappingURL=element-interaction-C5-6aPzz.js.map

package/dist/esm/element-interaction-C5-6aPzz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-interaction-C5-6aPzz.js","sources":["src/utils/element-interaction.ts"],"sourcesContent":["import type { KolFocusOptions } from '../schema';\nimport { delegateClick as delegateClickImpl, setClick } from './element-click';\nimport { delegateFocus as delegateFocusImpl, setFocus } from './element-focus';\n\nexport type CtaRef<T extends HTMLElement = HTMLElement> = {\n\t(ref?: T): void;\n\tel?: T;\n};\n\nexport function createCtaRef<T extends HTMLElement = HTMLElement>(): CtaRef<T> {\n\tconst ref = ((el?: T) => {\n\t\tref.el = el;\n\t}) as CtaRef<T>;\n\tref.el = undefined;\n\treturn ref;\n}\n\ntype MethodDecorator_ = (_target: object, _key: string, descriptor: PropertyDescriptor) => PropertyDescriptor;\n\nfunction makeMethodDecorator(fn: (this_: Record<string, unknown>) => Promise<void>): MethodDecorator_ {\n\treturn (_target, _key, descriptor) => {\n\t\tdescriptor.value = async function (this: Record<string, unknown>) {\n\t\t\treturn fn(this);\n\t\t};\n\t\treturn descriptor;\n\t};\n}\n\nfunction makeFocusDecorator(fn: (this_: Record<string, unknown>, options?: KolFocusOptions) => Promise<void>): MethodDecorator_ {\n\treturn (_target, _key, descriptor) => {\n\t\tdescriptor.value = async function (this: Record<string, unknown>, options?: KolFocusOptions) {\n\t\t\treturn fn(this, options);\n\t\t};\n\t\treturn descriptor;\n\t};\n}\n\n/**\n * Method decorator for `focus()` on WC (non-shadow) components.\n * @param refPropName - Class property holding the focusable CtaRef\n */\nexport function directFocus(refPropName: string): MethodDecorator_ {\n\treturn makeFocusDecorator((self, options) => {\n\t\tconst element = (self[refPropName] as CtaRef | undefined)?.el;\n\t\treturn element ? setFocus(element, options) : Promise.resolve();\n\t});\n}\n\n/**\n * Method decorator for `click()` on WC (non-shadow) components.\n * @param refPropName - Class property holding the clickable CtaRef\n */\nexport function directClick(refPropName: string): MethodDecorator_ {\n\treturn makeMethodDecorator((self) => {\n\t\tconst element = (self[refPropName] as CtaRef).el;\n\t\treturn element ? setClick(element) : Promise.resolve();\n\t});\n}\n\n/**\n * Method decorator for `focus()` on shadow components.\n * Waits for theming before delegating focus to the ref element.\n * @param refPropName - Class property holding the focusable CtaRef\n */\nexport function delegateFocus(refPropName: string): MethodDecorator_ {\n\treturn makeFocusDecorator((self, options) => {\n\t\tconst host = self['host'] as HTMLElement | undefined;\n\t\tif (!host) return Promise.resolve();\n\t\treturn delegateFocusImpl(host, () => {\n\t\t\tconst element = (self[refPropName] as CtaRef | undefined)?.el;\n\t\t\treturn element ? setFocus(element, options) : Promise.resolve();\n\t\t});\n\t});\n}\n\n/**\n * Method decorator for `focus()` that delegates to a controller's `focus` method.\n * Use this for components that own a controller with its own focus implementation.\n * @param ctrlPropName - Class property holding the controller\n */\nexport function ctrlFocus(ctrlPropName: string): MethodDecorator_ {\n\treturn makeFocusDecorator(async (self, options) => {\n\t\tconst ctrl = self[ctrlPropName] as { focus?: (options?: KolFocusOptions) => Promise<void> } | undefined;\n\t\tawait ctrl?.focus?.(options);\n\t});\n}\n\n/**\n * Method decorator for `click()` on shadow components.\n * Waits for theming before delegating click to the ref element.\n * @param refPropName - Class property holding the clickable CtaRef\n */\nexport function delegateClick(refPropName: string): MethodDecorator_ {\n\treturn makeMethodDecorator((self) =>\n\t\tdelegateClickImpl(self['host'] as HTMLElement, () => {\n\t\t\tconst element = (self[refPropName] as CtaRef).el;\n\t\t\treturn element ? setClick(element) : Promise.resolve();\n\t\t}),\n\t);\n}\n"],"names":["delegateFocusImpl","delegateClickImpl"],"mappings":";;;;;SASgB,YAAY,GAAA;AAC3B,IAAA,MAAM,GAAG,IAAI,CAAC,EAAM,KAAI;AACvB,QAAA,GAAG,CAAC,EAAE,GAAG,EAAE;AACZ,KAAC,CAAc;AACf,IAAA,GAAG,CAAC,EAAE,GAAG,SAAS;AAClB,IAAA,OAAO,GAAG;AACX;AAIA,SAAS,mBAAmB,CAAC,EAAqD,EAAA;AACjF,IAAA,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,KAAI;QACpC,UAAU,CAAC,KAAK,GAAG,kBAAK;AACvB,YAAA,OAAO,EAAE,CAAC,IAAI,CAAC;AAChB,SAAC;AACD,QAAA,OAAO,UAAU;AAClB,KAAC;AACF;AAEA,SAAS,kBAAkB,CAAC,EAAgF,EAAA;AAC3G,IAAA,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,KAAI;AACpC,QAAA,UAAU,CAAC,KAAK,GAAG,gBAA+C,OAAyB,EAAA;AAC1F,YAAA,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC;AACzB,SAAC;AACD,QAAA,OAAO,UAAU;AAClB,KAAC;AACF;AAMM,SAAU,WAAW,CAAC,WAAmB,EAAA;AAC9C,IAAA,OAAO,kBAAkB,CAAC,CAAC,IAAI,EAAE,OAAO,KAAI;;AAC3C,QAAA,MAAM,OAAO,GAAG,CAAC,EAAA,GAAA,IAAI,CAAC,WAAW,CAAwB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,EAAE;AAC7D,QAAA,OAAO,OAAO,GAAG,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,EAAE;AAChE,KAAC,CAAC;AACH;AAMM,SAAU,WAAW,CAAC,WAAmB,EAAA;AAC9C,IAAA,OAAO,mBAAmB,CAAC,CAAC,IAAI,KAAI;QACnC,MAAM,OAAO,GAAI,IAAI,CAAC,WAAW,CAAY,CAAC,EAAE;AAChD,QAAA,OAAO,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,EAAE;AACvD,KAAC,CAAC;AACH;AAOM,SAAU,aAAa,CAAC,WAAmB,EAAA;AAChD,IAAA,OAAO,kBAAkB,CAAC,CAAC,IAAI,EAAE,OAAO,KAAI;AAC3C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAA4B;AACpD,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,OAAO,CAAC,OAAO,EAAE;AACnC,QAAA,OAAOA,eAAiB,CAAC,IAAI,EAAE,MAAK;;AACnC,YAAA,MAAM,OAAO,GAAG,CAAC,EAAA,GAAA,IAAI,CAAC,WAAW,CAAwB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,EAAE;AAC7D,YAAA,OAAO,OAAO,GAAG,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,EAAE;AAChE,SAAC,CAAC;AACH,KAAC,CAAC;AACH;AAmBM,SAAU,aAAa,CAAC,WAAmB,EAAA;AAChD,IAAA,OAAO,mBAAmB,CAAC,CAAC,IAAI,KAC/BC,eAAiB,CAAC,IAAI,CAAC,MAAM,CAAgB,EAAE,MAAK;QACnD,MAAM,OAAO,GAAI,IAAI,CAAC,WAAW,CAAY,CAAC,EAAE;AAChD,QAAA,OAAO,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,EAAE;KACtD,CAAC,CACF;AACF;;;;"}

package/dist/esm/events-BhfZTW2e.js

@@ -0,0 +1,43 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+var KolEvent;
+(function (KolEvent) {
+    KolEvent["blur"] = "blur";
+    KolEvent["cancel"] = "cancel";
+    KolEvent["change"] = "change";
+    KolEvent["changeHeaderCells"] = "changeheadercells";
+    KolEvent["changePage"] = "changepage";
+    KolEvent["changePageSize"] = "changepagesize";
+    KolEvent["click"] = "click";
+    KolEvent["close"] = "close";
+    KolEvent["create"] = "create";
+    KolEvent["error"] = "error";
+    KolEvent["focus"] = "focus";
+    KolEvent["input"] = "input";
+    KolEvent["keydown"] = "keydown";
+    KolEvent["load"] = "load";
+    KolEvent["mousedown"] = "mousedown";
+    KolEvent["reset"] = "reset";
+    KolEvent["select"] = "select";
+    KolEvent["selectionChange"] = "selectionchange";
+    KolEvent["sort"] = "sort";
+    KolEvent["submit"] = "submit";
+    KolEvent["toggle"] = "toggle";
+})(KolEvent || (KolEvent = {}));
+const DEFAULT_OPTIONS = {
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+};
+function createKoliBriEvent(event, detail = null) {
+    return new CustomEvent(event, Object.assign(Object.assign({}, DEFAULT_OPTIONS), { detail }));
+}
+function dispatchDomEvent(target, event, detail) {
+    return target.dispatchEvent(createKoliBriEvent(event, detail));
+}
+
+export { KolEvent as K, dispatchDomEvent as d };
+//# sourceMappingURL=events-BhfZTW2e.js.map
+
+//# sourceMappingURL=events-BhfZTW2e.js.map

package/dist/esm/events-BhfZTW2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events-BhfZTW2e.js","sources":["src/utils/events.ts"],"sourcesContent":["enum KolEvent {\n\tblur = 'blur',\n\tcancel = 'cancel',\n\tchange = 'change',\n\tchangeHeaderCells = 'changeheadercells',\n\tchangePage = 'changepage',\n\tchangePageSize = 'changepagesize',\n\tclick = 'click',\n\tclose = 'close',\n\tcreate = 'create',\n\terror = 'error',\n\tfocus = 'focus',\n\tinput = 'input',\n\tkeydown = 'keydown',\n\tload = 'load',\n\tmousedown = 'mousedown',\n\treset = 'reset',\n\tselect = 'select',\n\tselectionChange = 'selectionchange',\n\tsort = 'sort',\n\tsubmit = 'submit',\n\ttoggle = 'toggle',\n}\n\nconst DEFAULT_OPTIONS = {\n\tbubbles: true,\n\tcancelable: true,\n\tcomposed: true,\n} as const;\n\nfunction createKoliBriEvent<T>(event: KolEvent, detail: T | null = null): CustomEvent<T | null> {\n\treturn new CustomEvent<T | null>(event, {\n\t\t...DEFAULT_OPTIONS,\n\t\tdetail,\n\t});\n}\n\nfunction dispatchDomEvent<T>(target: EventTarget, event: KolEvent, detail?: T): boolean {\n\treturn target.dispatchEvent(createKoliBriEvent<T>(event, detail));\n}\n\nexport { KolEvent, dispatchDomEvent };\n"],"names":[],"mappings":";;;AAAA,IAAK;AAAL,CAAA,UAAK,QAAQ,EAAA;AACZ,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,QAAA,CAAA,mBAAA,CAAA,GAAA,mBAAuC;AACvC,IAAA,QAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AACzB,IAAA,QAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC;AACjC,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,QAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AACnB,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,QAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,QAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AACf,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,QAAA,CAAA,iBAAA,CAAA,GAAA,iBAAmC;AACnC,IAAA,QAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AACb,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AACjB,IAAA,QAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AAClB,CAAC,EAtBI,QAAQ,KAAR,QAAQ,GAsBZ,EAAA,CAAA,CAAA;AAED,MAAM,eAAe,GAAG;AACvB,IAAA,OAAO,EAAE,IAAI;AACb,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,QAAQ,EAAE,IAAI;CACL;AAEV,SAAS,kBAAkB,CAAI,KAAe,EAAE,SAAmB,IAAI,EAAA;IACtE,OAAO,IAAI,WAAW,CAAW,KAAK,kCAClC,eAAe,CAAA,EAAA,EAClB,MAAM,EAAA,CAAA,CACL;AACH;AAEA,SAAS,gBAAgB,CAAI,MAAmB,EAAE,KAAe,EAAE,MAAU,EAAA;IAC5E,OAAO,MAAM,CAAC,aAAa,CAAC,kBAAkB,CAAI,KAAK,EAAE,MAAM,CAAC,CAAC;AAClE;;;;"}

package/dist/esm/has-closer-GBI76y-L.js

@@ -0,0 +1,13 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import { e as watchBoolean } from './common-DEEjER7G.js';
+
+const validateHasCloser = (component, value) => {
+    watchBoolean(component, '_hasCloser', value);
+};
+
+export { validateHasCloser as v };
+//# sourceMappingURL=has-closer-GBI76y-L.js.map
+
+//# sourceMappingURL=has-closer-GBI76y-L.js.map

package/dist/esm/has-closer-GBI76y-L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"has-closer-GBI76y-L.js","sources":["src/schema/props/has-closer.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasCloserPropType = boolean;\n\n/**\n * Defines whether the element can be closed.\n */\nexport type PropHasCloser = {\n\thasCloser: HasCloserPropType;\n};\n\n/* validator */\nexport const validateHasCloser = (component: Generic.Element.Component, value?: HasCloserPropType): void => {\n\twatchBoolean(component, '_hasCloser', value);\n};\n"],"names":[],"mappings":";;;;;MAea,iBAAiB,GAAG,CAAC,SAAoC,EAAE,KAAyB,KAAU;AAC1G,IAAA,YAAY,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC;AAC7C;;;;"}

package/dist/esm/hide-label-CWFMK5Iz.js

@@ -0,0 +1,13 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import { e as watchBoolean } from './common-DEEjER7G.js';
+
+const validateHideLabel = (component, value, options = {}) => {
+    watchBoolean(component, '_hideLabel', value, options);
+};
+
+export { validateHideLabel as v };
+//# sourceMappingURL=hide-label-CWFMK5Iz.js.map
+
+//# sourceMappingURL=hide-label-CWFMK5Iz.js.map

package/dist/esm/hide-label-CWFMK5Iz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hide-label-CWFMK5Iz.js","sources":["src/schema/props/hide-label.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchBooleanOptions } from '../utils';\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HideLabelPropType = boolean;\n\n/**\n * Tells the element to hide the label.\n */\nexport type PropHideLabel = {\n\thideLabel: HideLabelPropType;\n};\n\n/* validator */\nexport const validateHideLabel = (component: Generic.Element.Component, value?: HideLabelPropType, options: WatchBooleanOptions = {}): void => {\n\twatchBoolean(component, '_hideLabel', value, options);\n};\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,iBAAiB,GAAG,CAAC,SAAoC,EAAE,KAAyB,EAAE,OAAA,GAA+B,EAAE,KAAU;IAC7I,YAAY,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,CAAC;AACtD;;;;"}

package/dist/esm/href-yQN98Z4F.js

@@ -0,0 +1,13 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import { g as watchString } from './common-DEEjER7G.js';
+
+const validateHref = (component, value, options = {}) => {
+    watchString(component, '_href', value, options);
+};
+
+export { validateHref as v };
+//# sourceMappingURL=href-yQN98Z4F.js.map
+
+//# sourceMappingURL=href-yQN98Z4F.js.map

package/dist/esm/href-yQN98Z4F.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"href-yQN98Z4F.js","sources":["src/schema/props/href.ts"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type HrefPropType = string;\n\n/**\n * Defines the target URI of the link.\n */\nexport type PropHref = {\n\thref: HrefPropType;\n};\n\nexport type HrefProp = Generic.Element.Members<PropHref, unknown>;\n\n/* validator */\nexport const validateHref = (component: Generic.Element.Component, value?: HrefPropType, options: WatchStringOptions = {}): void => {\n\twatchString(component, '_href', value, options);\n};\n"],"names":[],"mappings":";;;;;AAkBO,MAAM,YAAY,GAAG,CAAC,SAAoC,EAAE,KAAoB,EAAE,OAAA,GAA8B,EAAE,KAAU;IAClI,WAAW,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC;AAChD;;;;"}

package/dist/esm/i18n-CaL2ODdQ.js

@@ -0,0 +1,19 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import { g as getI18nInstance, i as initializeI18n } from './i18n-B2d_exHc.js';
+import { A as isTestMode } from './common-DEEjER7G.js';
+
+let translate = (key, options) => {
+    var _a;
+    const i18n = (_a = getI18nInstance()) !== null && _a !== void 0 ? _a : initializeI18n('de');
+    return i18n.translate(key, options);
+};
+if (isTestMode()) {
+    translate = (key) => key;
+}
+
+export { translate as t };
+//# sourceMappingURL=i18n-CaL2ODdQ.js.map
+
+//# sourceMappingURL=i18n-CaL2ODdQ.js.map

package/dist/esm/i18n-CaL2ODdQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n-CaL2ODdQ.js","sources":["src/i18n.ts"],"sourcesContent":["import type { ComponentKeys, ResourcePrefix } from './core/i18n';\nimport { getI18nInstance, initializeI18n } from './core/i18n';\nimport { isTestMode } from './schema';\n\ntype Options = {\n\tcount?: number;\n\tplaceholders?: { [K: string]: string };\n};\n\nexport type TranslationKey = `${Lowercase<ResourcePrefix>}-${Lowercase<ComponentKeys>}`;\n\nexport let translate = (key: TranslationKey, options?: Options) => {\n\tconst i18n = getI18nInstance() ?? initializeI18n('de');\n\treturn i18n.translate(key, options);\n};\n\nif (isTestMode()) {\n\ttranslate = (key): string => key;\n}\n"],"names":[],"mappings":";;;;;;IAWW,SAAS,GAAG,CAAC,GAAmB,EAAE,OAAiB,KAAI;;IACjE,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,eAAe,EAAE,mCAAI,cAAc,CAAC,IAAI,CAAC;IACtD,OAAO,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,CAAC;AACpC;AAEA,IAAI,UAAU,EAAE,EAAE;AACjB,IAAA,SAAS,GAAG,CAAC,GAAG,KAAa,GAAG;AACjC;;;;"}

package/dist/esm/icons-DOGnS2Iv.js

@@ -0,0 +1,84 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import { o as objectObjectHandler, p as parseJson, b as watchValidator, i as isString, F as isStyle, G as isObject } from './common-DEEjER7G.js';
+
+const mapCustomIcon = (state, alignment, icon) => {
+    if (isObject(icon)) {
+        state[alignment] = icon;
+    }
+    else if (isString(icon, 1)) {
+        state[alignment] = {
+            icon: icon,
+        };
+    }
+};
+const mapIconProp2State = (icon) => {
+    let state = {};
+    if (isString(icon, 1)) {
+        state = {
+            left: {
+                icon: icon,
+            },
+        };
+    }
+    else if (typeof icon === 'object' && icon !== null) {
+        mapCustomIcon(state, 'top', icon.top);
+        mapCustomIcon(state, 'right', icon.right);
+        mapCustomIcon(state, 'bottom', icon.bottom);
+        mapCustomIcon(state, 'left', icon.left);
+    }
+    return state;
+};
+const beforePatchIcon = (component) => {
+    var _a, _b, _c;
+    if ((_a = component.nextState) === null || _a === void 0 ? void 0 : _a.has('_icons')) {
+        const icons = (_b = component.nextState) === null || _b === void 0 ? void 0 : _b.get('_icons');
+        (_c = component.nextState) === null || _c === void 0 ? void 0 : _c.set('_icons', mapIconProp2State(icons));
+    }
+};
+const isIcon = (value) => typeof value === 'object' &&
+    value !== null &&
+    (typeof value.style === 'undefined' || isStyle(value.style)) &&
+    (typeof value.label === 'undefined' || isString(value.label)) &&
+    isString(value.icon, 1);
+const validateIcons = (component, value, options = {}) => {
+    objectObjectHandler(value, () => {
+        var _a;
+        try {
+            value = parseJson(value);
+        }
+        catch (_b) {
+        }
+        watchValidator(component, '_icons', (value) => {
+            const valueIsEmptyObject = typeof value === 'object' && value !== null && Object.keys(value).length === 0;
+            return (value === null ||
+                valueIsEmptyObject ||
+                isString(value, 1) ||
+                (typeof value === 'object' &&
+                    value !== null &&
+                    (isString(value.left, 0) ||
+                        isIcon(value.left) ||
+                        isString(value.right, 0) ||
+                        isIcon(value.right) ||
+                        isString(value.top, 0) ||
+                        isIcon(value.top) ||
+                        isString(value.bottom, 0) ||
+                        isIcon(value.bottom))));
+        }, new Set(['KoliBriIcon']), value, Object.assign(Object.assign({}, options), { defaultValue: {}, hooks: {
+                afterPatch: (_a = options.hooks) === null || _a === void 0 ? void 0 : _a.afterPatch,
+                beforePatch: (nextValue, nextState, component, key) => {
+                    var _a, _b;
+                    if (typeof ((_a = options.hooks) === null || _a === void 0 ? void 0 : _a.beforePatch) === 'function') {
+                        (_b = options.hooks) === null || _b === void 0 ? void 0 : _b.beforePatch(nextValue, nextState, component, key);
+                    }
+                    beforePatchIcon(component);
+                },
+            } }));
+    });
+};
+
+export { validateIcons as v };
+//# sourceMappingURL=icons-DOGnS2Iv.js.map
+
+//# sourceMappingURL=icons-DOGnS2Iv.js.map