npm - @public-ui/components - Versions diffs - 1.4.0-rc.5 → 1.4.0-rc.7 - Mend

@public-ui/components 1.4.0-rc.5 → 1.4.0-rc.7

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.

Files changed (551) hide show

package/dist/kolibri/index-599f5430.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["root","definition","module","exports","log","this","noop","undefinedType","isIE","window","navigator","test","userAgent","logMethods","bindMethod","obj","methodName","method","bind","Function","prototype","call","e","apply","arguments","traceForIE","console","trace","realMethod","undefined","replaceLoggingMethods","level","loggerName","i","length","methodFactory","debug","enableLoggingWhenConsoleArrives","defaultMethodFactory","Logger","name","defaultLevel","factory","self","currentLevel","storageKey","persistLevelIfPossible","levelNum","levelName","toUpperCase","localStorage","ignore","document","cookie","encodeURIComponent","getPersistedLevel","storedLevel","location","indexOf","exec","slice","levels","clearPersistedLevel","removeItem","TRACE","DEBUG","INFO","WARN","ERROR","SILENT","getLevel","setLevel","persist","setDefaultLevel","resetLevel","enableAll","disableAll","initialLevel","defaultLogger","_loggersByName","getLogger","TypeError","logger","_log","noConflict","getLoggers","STORE","global","lockThemePatching","warrentyWarning","THEME_NAME_PATTERN","isThemeNameValid","validateThemeName","Error","patchThemeTag","themeName","tagName","css","warn","A11yUi","Themes","patchTheme","map","tagNames","Object","getOwnPropertyNames","forEach","cssStyle","getThemeNode","element","HTMLElement","dataset","theme","parentNode","ShadowRoot","host","getEncroachCss","themeEncroachCss","themeReset","mode","themeEncroachCssMode","isTheCurrentThemeConfigValid","Theme","cache","encroachCss","isTheCurrentThemeNotDefault","getThemeDetails","details","loglevel","themeNode","themeCache","themeLoglevel","getThemeOptionDefaults","options","detect","setConfigureTheme","info","registered","register","themes","loaders","Set","Array","isArray","error","promises","loader","push","Promise","all","STYLING_TASK_QUEUE","Map","HYDRATED_HISTORY","CSS_PROPERTIES_REGISTERED","CSS_STYLE_CACHE","REGEX_CSS_PROPERTIES","REGEX_SPLIT_CSS_PROPERTY","extractProperties","properties","match","filter","property","style","createElement","innerHTML","join","querySelector","appendChild","add","getCssStyle","replace","removeStyle","shadow","childNode","from","childNodes","HTMLStyleElement","removeChild","patchStyle","styles","styleSheets","styleSheet","CSSStyleSheet","replaceSync","adoptedStyleSheets","reverse","styleElement","insertBefore","firstChild","encroachStyles","defaultStyleNodes","node","defaultStyleSheets","unshift","cssRules","rule","cssText","setThemeStyleAfterHydrated","elm","themeDetails","styleDisplay","shadowRoot","get","has","switchStyle","PROPERTY_STYLE","GLOBAL_STYLE","TAG_STYLE","STYLES","set","display","logHydratedHistory","timestamp","Date","now","numberOfTasks","size","pushToDoTask","loggedPushToDoTask","deleteDoneTask","delete","loggedDeleteDoneTask","waitForHydrated","T","setTimeout","clearTimeout","classList","contains","observerCallback","mutationsList","mutation","target","observerOptions","attributes","attributeFilter","childList","subtree","observer","MutationObserver","setThemeStyle","observe"],"sources":["./node_modules/loglevel/lib/loglevel.js","./node_modules/@a11y-ui/core/dist/index.mjs"],"sourcesContent":["/*\n* loglevel - https://github.com/pimterry/loglevel\n*\n* Copyright (c) 2013 Tim Perry\n* Licensed under the MIT license.\n*/\n(function (root, definition) {\n \"use strict\";\n if (typeof define === 'function' && define.amd) {\n define(definition);\n } else if (typeof module === 'object' && module.exports) {\n module.exports = definition();\n } else {\n root.log = definition();\n }\n}(this, function () {\n \"use strict\";\n\n // Slightly dubious tricks to cut down minimized file size\n var noop = function() {};\n var undefinedType = \"undefined\";\n var isIE = (typeof window !== undefinedType) && (typeof window.navigator !== undefinedType) && (\n /Trident\\/|MSIE /.test(window.navigator.userAgent)\n );\n\n var logMethods = [\n \"trace\",\n \"debug\",\n \"info\",\n \"warn\",\n \"error\"\n ];\n\n // Cross-browser bind equivalent that works at least back to IE6\n function bindMethod(obj, methodName) {\n var method = obj[methodName];\n if (typeof method.bind === 'function') {\n return method.bind(obj);\n } else {\n try {\n return Function.prototype.bind.call(method, obj);\n } catch (e) {\n // Missing bind shim or IE8 + Modernizr, fallback to wrapping\n return function() {\n return Function.prototype.apply.apply(method, [obj, arguments]);\n };\n }\n }\n }\n\n // Trace() doesn't print the message in IE, so for that case we need to wrap it\n function traceForIE() {\n if (console.log) {\n if (console.log.apply) {\n console.log.apply(console, arguments);\n } else {\n // In old IE, native console methods themselves don't have apply().\n Function.prototype.apply.apply(console.log, [console, arguments]);\n }\n }\n if (console.trace) console.trace();\n }\n\n // Build the best logging method possible for this env\n // Wherever possible we want to bind, not wrap, to preserve stack traces\n function realMethod(methodName) {\n if (methodName === 'debug') {\n methodName = 'log';\n }\n\n if (typeof console === undefinedType) {\n return false; // No method possible, for now - fixed later by enableLoggingWhenConsoleArrives\n } else if (methodName === 'trace' && isIE) {\n return traceForIE;\n } else if (console[methodName] !== undefined) {\n return bindMethod(console, methodName);\n } else if (console.log !== undefined) {\n return bindMethod(console, 'log');\n } else {\n return noop;\n }\n }\n\n // These private functions always need `this` to be set properly\n\n function replaceLoggingMethods(level, loggerName) {\n /*jshint validthis:true */\n for (var i = 0; i < logMethods.length; i++) {\n var methodName = logMethods[i];\n this[methodName] = (i < level) ?\n noop :\n this.methodFactory(methodName, level, loggerName);\n }\n\n // Define log.log as an alias for log.debug\n this.log = this.debug;\n }\n\n // In old IE versions, the console isn't present until you first open it.\n // We build realMethod() replacements here that regenerate logging methods\n function enableLoggingWhenConsoleArrives(methodName, level, loggerName) {\n return function () {\n if (typeof console !== undefinedType) {\n replaceLoggingMethods.call(this, level, loggerName);\n this[methodName].apply(this, arguments);\n }\n };\n }\n\n // By default, we use closely bound real methods wherever possible, and\n // otherwise we wait for a console to appear, and then try again.\n function defaultMethodFactory(methodName, level, loggerName) {\n /*jshint validthis:true */\n return realMethod(methodName) ||\n enableLoggingWhenConsoleArrives.apply(this, arguments);\n }\n\n function Logger(name, defaultLevel, factory) {\n var self = this;\n var currentLevel;\n defaultLevel = defaultLevel == null ? \"WARN\" : defaultLevel;\n\n var storageKey = \"loglevel\";\n if (typeof name === \"string\") {\n storageKey += \":\" + name;\n } else if (typeof name === \"symbol\") {\n storageKey = undefined;\n }\n\n function persistLevelIfPossible(levelNum) {\n var levelName = (logMethods[levelNum] || 'silent').toUpperCase();\n\n if (typeof window === undefinedType || !storageKey) return;\n\n // Use localStorage if available\n try {\n window.localStorage[storageKey] = levelName;\n return;\n } catch (ignore) {}\n\n // Use session cookie as fallback\n try {\n window.document.cookie =\n encodeURIComponent(storageKey) + \"=\" + levelName + \";\";\n } catch (ignore) {}\n }\n\n function getPersistedLevel() {\n var storedLevel;\n\n if (typeof window === undefinedType || !storageKey) return;\n\n try {\n storedLevel = window.localStorage[storageKey];\n } catch (ignore) {}\n\n // Fallback to cookies if local storage gives us nothing\n if (typeof storedLevel === undefinedType) {\n try {\n var cookie = window.document.cookie;\n var location = cookie.indexOf(\n encodeURIComponent(storageKey) + \"=\");\n if (location !== -1) {\n storedLevel = /^([^;]+)/.exec(cookie.slice(location))[1];\n }\n } catch (ignore) {}\n }\n\n // If the stored level is not valid, treat it as if nothing was stored.\n if (self.levels[storedLevel] === undefined) {\n storedLevel = undefined;\n }\n\n return storedLevel;\n }\n\n function clearPersistedLevel() {\n if (typeof window === undefinedType || !storageKey) return;\n\n // Use localStorage if available\n try {\n window.localStorage.removeItem(storageKey);\n return;\n } catch (ignore) {}\n\n // Use session cookie as fallback\n try {\n window.document.cookie =\n encodeURIComponent(storageKey) + \"=; expires=Thu, 01 Jan 1970 00:00:00 UTC\";\n } catch (ignore) {}\n }\n\n /*\n *\n * Public logger API - see https://github.com/pimterry/loglevel for details\n *\n */\n\n self.name = name;\n\n self.levels = { \"TRACE\": 0, \"DEBUG\": 1, \"INFO\": 2, \"WARN\": 3,\n \"ERROR\": 4, \"SILENT\": 5};\n\n self.methodFactory = factory || defaultMethodFactory;\n\n self.getLevel = function () {\n return currentLevel;\n };\n\n self.setLevel = function (level, persist) {\n if (typeof level === \"string\" && self.levels[level.toUpperCase()] !== undefined) {\n level = self.levels[level.toUpperCase()];\n }\n if (typeof level === \"number\" && level >= 0 && level <= self.levels.SILENT) {\n currentLevel = level;\n if (persist !== false) { // defaults to true\n persistLevelIfPossible(level);\n }\n replaceLoggingMethods.call(self, level, name);\n if (typeof console === undefinedType && level < self.levels.SILENT) {\n return \"No console available for logging\";\n }\n } else {\n throw \"log.setLevel() called with invalid level: \" + level;\n }\n };\n\n self.setDefaultLevel = function (level) {\n defaultLevel = level;\n if (!getPersistedLevel()) {\n self.setLevel(level, false);\n }\n };\n\n self.resetLevel = function () {\n self.setLevel(defaultLevel, false);\n clearPersistedLevel();\n };\n\n self.enableAll = function(persist) {\n self.setLevel(self.levels.TRACE, persist);\n };\n\n self.disableAll = function(persist) {\n self.setLevel(self.levels.SILENT, persist);\n };\n\n // Initialize with the right level\n var initialLevel = getPersistedLevel();\n if (initialLevel == null) {\n initialLevel = defaultLevel;\n }\n self.setLevel(initialLevel, false);\n }\n\n /*\n *\n * Top-level API\n *\n */\n\n var defaultLogger = new Logger();\n\n var _loggersByName = {};\n defaultLogger.getLogger = function getLogger(name) {\n if ((typeof name !== \"symbol\" && typeof name !== \"string\") || name === \"\") {\n throw new TypeError(\"You must supply a name when creating a logger.\");\n }\n\n var logger = _loggersByName[name];\n if (!logger) {\n logger = _loggersByName[name] = new Logger(\n name, defaultLogger.getLevel(), defaultLogger.methodFactory);\n }\n return logger;\n };\n\n // Grab the current global log variable in case of overwrite\n var _log = (typeof window !== undefinedType) ? window.log : undefined;\n defaultLogger.noConflict = function() {\n if (typeof window !== undefinedType &&\n window.log === defaultLogger) {\n window.log = _log;\n }\n\n return defaultLogger;\n };\n\n defaultLogger.getLoggers = function getLoggers() {\n return _loggersByName;\n };\n\n // ES6 default export, for compatibility\n defaultLogger['default'] = defaultLogger;\n\n return defaultLogger;\n}));\n","import log from 'loglevel';\n\nconst createTranslation = (name, map) => {\n return (patch) => patch(name, map);\n};\n\nconst createTheme = (name, map) => {\n return (patch) => patch(name, map);\n};\n\nconst STORE = typeof window === \"object\" ? window : typeof global === \"object\" ? global : typeof self === \"object\" ? self : {};\n\nlet lockThemePatching = true;\nlet warrentyWarning = false;\nconst THEME_NAME_PATTERN = /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/;\nconst isThemeNameValid = (name) => {\n return typeof name === \"string\" && THEME_NAME_PATTERN.test(name);\n};\nconst validateThemeName = (name) => {\n if (isThemeNameValid(name) === false) {\n throw new Error(\n `[Theming] The theme identifier \"${typeof name === \"string\" ? name : \"\"}\" (Type: ${typeof name}) is not valid. Please use only follow this pattern: /^[a-z][a-z0-9]{1,}(-[a-z0-9]+)?$/`\n );\n }\n};\nconst patchThemeTag = (themeName, tagName, css) => {\n validateThemeName(themeName);\n if (lockThemePatching === true && warrentyWarning === false) {\n warrentyWarning = true;\n log.warn(\n `[Theming] The theme process is locked. This means that the theme \"${themeName}\" should not be patched.\n\nimport { register } from '@a11y-ui/core';\nimport { defineCustomElements } from '...';\nimport { THEME } from '...';\n\nregister(THEME, defineCustomElements)\n\t.then(() => {\n\t\tconst htmlDivElement: HTMLElement | null = document.querySelector<HTMLElement>('#my-app');\n if (htmlDivElement instanceof HTMLElement) {\n const root = createRoot(htmlDivElement);\n root.render(<App />);\n }\n })\n .catch(console.warn);`\n );\n }\n if (typeof STORE.A11yUi !== \"object\" || STORE.A11yUi === null) {\n STORE.A11yUi = {};\n }\n if (typeof STORE.A11yUi === \"object\" && STORE.A11yUi !== null && (typeof STORE.A11yUi.Themes !== \"object\" || STORE.A11yUi.Themes === null)) {\n STORE.A11yUi.Themes = {};\n }\n if (typeof STORE.A11yUi === \"object\" && STORE.A11yUi !== null && typeof STORE.A11yUi.Themes === \"object\" && STORE.A11yUi.Themes !== null && (typeof STORE.A11yUi.Themes[themeName] !== \"object\" || STORE.A11yUi.Themes[themeName] === null)) {\n STORE.A11yUi.Themes[themeName] = {};\n }\n if (typeof STORE.A11yUi === \"object\" && STORE.A11yUi !== null && typeof STORE.A11yUi.Themes === \"object\" && STORE.A11yUi.Themes !== null && typeof STORE.A11yUi.Themes[themeName] === \"object\" && STORE.A11yUi.Themes[themeName] !== null) {\n STORE.A11yUi.Themes[themeName][tagName] = css;\n }\n};\nconst patchTheme = (name, map) => {\n validateThemeName(name);\n if (typeof map === \"object\" && map !== null) {\n const tagNames = Object.getOwnPropertyNames(map);\n tagNames.forEach((tagName) => {\n const cssStyle = map[tagName];\n if (typeof cssStyle === \"string\" && cssStyle.length > 0) {\n patchThemeTag(name, tagName, cssStyle);\n }\n });\n }\n return name;\n};\nconst getThemeNode = (element) => {\n if (element instanceof HTMLElement) {\n if (typeof element.dataset.theme === \"string\") {\n return element;\n } else {\n let parentNode = element.parentNode;\n while (parentNode instanceof ShadowRoot) {\n parentNode = parentNode.host;\n }\n return getThemeNode(parentNode);\n }\n } else {\n return null;\n }\n};\nconst getEncroachCss = (dataset = {}) => {\n if (dataset.themeEncroachCss === \"false\" || dataset.themeReset === \"true\") {\n return false;\n } else {\n return {\n mode: dataset.themeEncroachCssMode === \"after\" || dataset.themeEncroachCssMode === \"before\" ? dataset.themeEncroachCssMode : \"before\"\n };\n }\n};\nconst isTheCurrentThemeConfigValid = () => typeof STORE.A11yUi === \"object\" && STORE.A11yUi !== null && typeof STORE.A11yUi.Theme === \"object\" && STORE.A11yUi.Theme !== null && typeof STORE.A11yUi.Theme.cache === \"boolean\" && typeof STORE.A11yUi.Theme.encroachCss === \"object\" && typeof STORE.A11yUi.Theme.encroachCss !== null && typeof STORE.A11yUi.Theme.encroachCss.mode === \"string\" && typeof STORE.A11yUi.Theme.name === \"string\";\nconst isTheCurrentThemeNotDefault = () => (typeof STORE.A11yUi === \"object\" && STORE.A11yUi !== null) === false || (typeof STORE.A11yUi.Theme === \"object\" && STORE.A11yUi.Theme !== null) === false || STORE.A11yUi.Theme.name !== \"default\";\nconst getThemeDetails = (element) => {\n if (isTheCurrentThemeConfigValid()) {\n return STORE.A11yUi.Theme;\n } else {\n const details = {\n cache: true,\n encroachCss: getEncroachCss(),\n loglevel: \"silent\",\n name: null\n };\n const themeNode = getThemeNode(element);\n if (themeNode instanceof HTMLElement) {\n details.cache = themeNode.dataset.themeCache !== \"false\";\n details.encroachCss = getEncroachCss(themeNode.dataset);\n details.loglevel = themeNode.dataset.themeLoglevel === \"debug\" ? themeNode.dataset.themeLoglevel : \"silent\";\n details.name = themeNode.dataset.theme || null;\n }\n return details;\n }\n};\nconst getTheme = (element) => {\n return getThemeDetails(element).name;\n};\nconst getThemeOptionDefaults = (themeName, options) => {\n return {\n cache: options.cache !== false,\n // default: true\n detect: options.detect === \"auto\" ? \"auto\" : \"fixed\",\n // default: 'fixed'\n encroachCss: options.encroachCss === false ? false : typeof options.encroachCss === \"object\" && options.encroachCss != null && (options.encroachCss.mode === \"after\" || options.encroachCss.mode === \"before\") ? options.encroachCss : {\n mode: \"before\"\n // default: 'before'\n },\n loglevel: options.loglevel === \"debug\" ? options.loglevel : \"silent\",\n // default: 'silent'\n name: typeof options.name === \"string\" ? options.name : themeName\n // default: themeName\n };\n};\nconst setConfigureTheme = (themeName, options) => {\n if (isTheCurrentThemeConfigValid() === false && isTheCurrentThemeNotDefault()) {\n if (\n // Die Options müssen ein Objekt sein.\n typeof options === \"object\" && options !== null\n ) {\n options = getThemeOptionDefaults(themeName, options);\n if (\n /**\n * The presetting of theme options is only relevant by using 'fixed'\n * detection mode.\n */\n options.detect === \"fixed\"\n ) {\n if (options.name === null && typeof themeName === \"string\") {\n options.name = themeName;\n }\n if (\n /**\n * Wenn mehrere Themes geladen werden, dann wird nur der Theme-Name gesetzt,\n * der mit dem Name eines Themes übereinstimmt.\n */\n themeName === options.name\n ) {\n if (typeof STORE.A11yUi !== \"object\" || STORE.A11yUi === null) {\n STORE.A11yUi = {};\n }\n STORE.A11yUi.Theme = options;\n log.info(`[Theming] Theme \"${themeName}\" was set as default theme.`);\n }\n } else {\n log.warn(`[Theming] The presetting of theme options is only relevant by using 'fixed' detection mode.`);\n }\n }\n }\n};\nlet registered = false;\nconst register = (themes, loaders, options = {}) => {\n if (registered === false) {\n registered = true;\n lockThemePatching = false;\n }\n if (typeof themes === \"function\") {\n themes = /* @__PURE__ */ new Set([themes]);\n } else if (Array.isArray(themes)) {\n themes = new Set(themes);\n }\n if (themes instanceof Set) {\n themes.forEach((theme) => {\n if (typeof theme === \"function\" && theme.length === 1) {\n setConfigureTheme(theme(patchTheme), {\n cache: options.theme?.cache,\n detect: options.theme?.detect,\n encroachCss: options.theme?.encroachCss,\n name: options.theme?.name\n });\n } else {\n log.error(`[Theming] Es wurde versucht eine nicht kompatibles Theme zu laden.`);\n }\n });\n }\n lockThemePatching = true;\n if (typeof loaders === \"function\") {\n loaders = /* @__PURE__ */ new Set([loaders]);\n } else if (Array.isArray(loaders)) {\n loaders = new Set(loaders);\n }\n const promises = [];\n loaders.forEach((loader) => promises.push(loader()));\n return Promise.all(promises);\n};\n\nconst _RobustStore = class {\n constructor(object, identifier) {\n this.store = this.createStore(object, identifier);\n }\n static getInstance(identifier, object) {\n let instance = _RobustStore.instances.get(identifier);\n if (instance === void 0) {\n instance = new _RobustStore(object, identifier);\n _RobustStore.instances.set(identifier, instance);\n }\n return instance;\n }\n createStore(object, identifier) {\n Object.defineProperty(object, identifier, {\n enumerable: false,\n value: {},\n writable: false\n });\n return object[identifier];\n }\n recursiveSetItem(store, key, value, options = _RobustStore.options) {\n let storeValue = typeof value === \"object\" && value !== null ? {} : value;\n Object.defineProperty(store, key, {\n enumerable: options.enumerable === true,\n get: () => storeValue,\n /**\n * Die set Methode muss eigentlich ein this.recursiveSetItem aufrufen.\n */\n set: options.immutable === true ? void 0 : (value2) => storeValue = value2\n });\n if (typeof value === \"object\" && value !== null) {\n for (const [k, v] of Object.entries(value)) {\n this.recursiveSetItem(store[key], k, v, options);\n }\n }\n }\n setItem(key, value, options = _RobustStore.options) {\n this.recursiveSetItem(this.store, key, value, options);\n return this;\n }\n getItem(key) {\n if (Array.isArray(key)) {\n return key.map((k) => this.getItem(k));\n }\n return this.store[key];\n }\n};\nlet RobustStore = _RobustStore;\nRobustStore.options = {\n enumerable: false,\n immutable: false\n};\nRobustStore.instances = /* @__PURE__ */ new Map();\n\nconst STYLING_TASK_QUEUE = /* @__PURE__ */ new Map();\nconst HYDRATED_HISTORY = [];\nconst CSS_PROPERTIES_REGISTERED = /* @__PURE__ */ new Set();\nconst CSS_STYLE_CACHE = /* @__PURE__ */ new Map();\nconst REGEX_CSS_PROPERTIES = /--[^;]+/g;\nconst REGEX_SPLIT_CSS_PROPERTY = /:/;\nif (typeof STORE.A11yUi !== \"object\" || STORE.A11yUi === null) {\n STORE.A11yUi = {\n CSS_STYLE_CACHE,\n HYDRATED_HISTORY,\n STYLING_TASK_QUEUE\n };\n}\nconst extractProperties = (themeName, css) => {\n let properties = css.match(REGEX_CSS_PROPERTIES);\n if (Array.isArray(properties)) {\n properties = properties.filter((property) => REGEX_SPLIT_CSS_PROPERTY.test(property));\n const style = document.createElement(\"style\");\n style.innerHTML = `.${themeName} {${properties.join(\";\")}}`;\n document.querySelector(\"head\")?.appendChild(style);\n }\n CSS_PROPERTIES_REGISTERED.add(themeName);\n};\nconst getCssStyle = (themeName, tagName) => {\n if (\n /**\n * Search custom StyleSheet in Config\n * TODO: Performance???\n */\n typeof STORE.A11yUi === \"object\" && STORE.A11yUi !== null && typeof STORE.A11yUi.Themes === \"object\" && STORE.A11yUi.Themes !== null && typeof STORE.A11yUi.Themes[themeName] === \"object\" && STORE.A11yUi.Themes[themeName] !== null && typeof STORE.A11yUi.Themes[themeName][tagName] === \"string\"\n ) {\n return STORE.A11yUi.Themes[themeName][tagName].replace(\n /\\r?\\n/g,\n \"\"\n );\n } else {\n return \"\";\n }\n};\nconst removeStyle = (shadow) => {\n for (const childNode of Array.from(shadow.childNodes)) {\n if (childNode instanceof HTMLStyleElement && childNode.tagName === \"STYLE\") {\n shadow.removeChild(childNode);\n } else {\n break;\n }\n }\n};\nconst patchStyle = (shadow, styles) => {\n try {\n const styleSheets = [];\n styles.forEach((style) => {\n const styleSheet = new CSSStyleSheet();\n styleSheet.replaceSync(style);\n styleSheets.push(styleSheet);\n });\n shadow.adoptedStyleSheets = styleSheets;\n } catch (e) {\n styles.reverse().forEach((style) => {\n const styleElement = document.createElement(\"style\");\n styleElement.innerHTML = style;\n shadow.insertBefore(styleElement, shadow.firstChild);\n });\n }\n};\nconst encroachStyles = (shadow, styles, encroachCss) => {\n if (encroachCss !== false) {\n const defaultStyleNodes = [\n ...Array.from(shadow.childNodes).filter((node) => node instanceof HTMLStyleElement && node.tagName === \"STYLE\")\n ];\n let defaultStyleSheets;\n try {\n defaultStyleSheets = [...Array.from(shadow.adoptedStyleSheets)];\n } catch (e) {\n defaultStyleSheets = [];\n }\n if (encroachCss?.mode === \"before\") {\n defaultStyleNodes.reverse().forEach((style) => styles.unshift(style.innerHTML));\n defaultStyleSheets.reverse().forEach(\n (style) => styles.unshift(\n Array.from(style.cssRules).map((rule) => rule.cssText).join(\"\")\n )\n );\n } else if (encroachCss?.mode === \"after\") {\n defaultStyleNodes.forEach((style) => styles.push(style.innerHTML));\n defaultStyleSheets.forEach(\n (style) => styles.push(\n Array.from(style.cssRules).map((rule) => rule.cssText).join(\"\")\n )\n );\n }\n }\n};\nconst setThemeStyleAfterHydrated = (elm, themeDetails, styleDisplay) => {\n const themeName = themeDetails.name || \"default\";\n let shadow;\n try {\n if (elm.shadowRoot === null) {\n throw new Error(\"ShadowRoot is null\");\n }\n shadow = elm.shadowRoot;\n } catch (e) {\n shadow = elm;\n }\n if (CSS_STYLE_CACHE.get(themeName)?.has(elm.tagName)) {\n switchStyle(elm, shadow, CSS_STYLE_CACHE.get(themeName)?.get(elm.tagName), styleDisplay);\n } else {\n const PROPERTY_STYLE = getCssStyle(themeName, \"PROPERTIES\");\n const GLOBAL_STYLE = getCssStyle(themeName, \"GLOBAL\");\n const TAG_STYLE = getCssStyle(themeName, elm.tagName);\n if (CSS_PROPERTIES_REGISTERED.has(themeName) === false) {\n extractProperties(themeName, GLOBAL_STYLE);\n }\n const STYLES = [PROPERTY_STYLE, GLOBAL_STYLE, TAG_STYLE];\n encroachStyles(shadow, STYLES, themeDetails.encroachCss);\n if (themeDetails.loglevel === \"debug\") {\n console.log(elm.tagName, STYLES);\n }\n if (themeDetails.cache === true) {\n if (CSS_STYLE_CACHE.has(themeName) === false) {\n CSS_STYLE_CACHE.set(themeName, /* @__PURE__ */ new Map());\n }\n CSS_STYLE_CACHE.get(themeName)?.set(elm.tagName, STYLES);\n }\n switchStyle(elm, shadow, STYLES, styleDisplay);\n }\n};\nconst switchStyle = (elm, shadow, styles, styleDisplay) => {\n removeStyle(shadow);\n patchStyle(shadow, styles);\n elm.style.display = styleDisplay;\n};\nconst logHydratedHistory = (themeDetails) => {\n if (themeDetails.loglevel === \"debug\") {\n HYDRATED_HISTORY.push({\n timestamp: Date.now(),\n numberOfTasks: STYLING_TASK_QUEUE.size\n });\n }\n};\nconst pushToDoTask = (elm, themeDetails) => {\n STYLING_TASK_QUEUE.set(elm, {\n /**\n * Das Element soll solange nicht sichtbar bleiben\n * bis der Style im DOM gesetzt ist.\n */\n styleDisplay: `${elm.style.display}`,\n themeDetails\n });\n};\nconst loggedPushToDoTask = (elm, themeDetails) => {\n pushToDoTask(elm, themeDetails);\n logHydratedHistory(themeDetails);\n};\nconst deleteDoneTask = (elm) => {\n STYLING_TASK_QUEUE.delete(elm);\n};\nconst loggedDeleteDoneTask = (elm, themeDetails) => {\n deleteDoneTask(elm);\n logHydratedHistory(themeDetails);\n};\nconst waitForHydrated = (elm) => {\n const T = setTimeout(() => {\n clearTimeout(T);\n if (STYLING_TASK_QUEUE.has(elm) && elm.classList.contains(\"hydrated\")) {\n const { styleDisplay, themeDetails } = STYLING_TASK_QUEUE.get(elm);\n setThemeStyleAfterHydrated(elm, themeDetails, styleDisplay);\n loggedDeleteDoneTask(elm, themeDetails);\n } else {\n waitForHydrated(elm);\n }\n }, 25);\n};\nconst observerCallback = (mutationsList) => {\n for (const mutation of mutationsList) {\n if (\n /**\n * Save by observer config\n */\n // mutation.type === 'attributes' &&\n // mutation.attributeName === 'class' &&\n /**\n * Implizit check for HTMLElement\n */\n // mutation.target &&\n STYLING_TASK_QUEUE.has(mutation.target) && mutation.target.classList.contains(\"hydrated\")\n ) {\n const { styleDisplay, themeDetails } = STYLING_TASK_QUEUE.get(mutation.target);\n setThemeStyleAfterHydrated(mutation.target, themeDetails, styleDisplay);\n loggedDeleteDoneTask(mutation.target, themeDetails);\n }\n }\n};\nconst observerOptions = {\n attributes: true,\n attributeFilter: [\"class\"],\n childList: false,\n subtree: false\n};\nlet observer;\ntry {\n observer = new MutationObserver(observerCallback);\n} catch (e) {\n observer = null;\n}\nconst setThemeStyle = (elm, themeDetails) => {\n loggedPushToDoTask(elm, themeDetails);\n if (observer) {\n observer.observe(elm, observerOptions);\n } else {\n waitForHydrated(elm);\n }\n elm.style.display = \"none\";\n};\n\nclass Theme {\n constructor(prefix, keyEnum, tagEnum) {\n this.createTheme = (name, map) => createTheme(name, map);\n this.createTranslation = (name, map) => createTranslation(name, map);\n this.Prefix = prefix;\n this.Key = Object.getOwnPropertyNames(keyEnum);\n this.Tag = Object.getOwnPropertyNames(tagEnum);\n }\n}\n\nexport { RobustStore, STORE, Theme, getTheme, getThemeDetails, patchTheme, patchThemeTag, register, setThemeStyle };\n"],"mappings":"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"}

package/dist/kolibri/index.esm.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-export{c as BUNDESAEMTER,e as BUNDESANSTALTEN,a as BUNDESMINISTERIEN,f as BUND_LOGO_TEXT_MAP,b as Bundesamt,d as Bundesanstalt,B as Bundesministerium}from"./bund-7a6ffb62.js";export{T as ToasterService,c as configKoliBri}from"./dev.utils-3ec9f837.js";export{K as KoliBriDevHelper}from"./prop.validators-a08ab31d.js";export{r as register,t as translations}from"./i18n-885e621b.js";import"./reuse-2b3b6999.js";import"./index-c40aa715.js";import"./a11y.tipps-353a7f35.js";
+export{c as BUNDESAEMTER,e as BUNDESANSTALTEN,a as BUNDESMINISTERIEN,f as BUND_LOGO_TEXT_MAP,b as Bundesamt,d as Bundesanstalt,B as Bundesministerium}from"./bund-7a6ffb62.js";export{T as ToasterService,c as configKoliBri}from"./dev.utils-3ec9f837.js";export{K as KoliBriDevHelper}from"./prop.validators-88dff60e.js";export{r as register,t as translations}from"./i18n-21ff76e6.js";import"./reuse-2b3b6999.js";import"./index-599f5430.js";import"./a11y.tipps-353a7f35.js";

package/dist/kolibri/kol-abbr.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,H as r}from"./index-0dce65d2.js";import{w as t}from"./button-link-48807a8e.js";import{n as l}from"./dev.utils-3ec9f837.js";import{w as e}from"./prop.validators-a08ab31d.js";import"./reuse-2b3b6999.js";import"./index-c40aa715.js";import"./a11y.tipps-353a7f35.js";const a=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host>abbr{cursor:help}",s=class{constructor(o){i(this,o),this.nonce=l(),this._tooltipAlign="top",this._title=void 0,this.state={_title:"",_tooltipAlign:"top"}}render(){return o(r,null,o("abbr",{"aria-labelledby":this.nonce,role:"definition",title:this.state._title},o("span",{title:""},o("slot",null))),o("kol-tooltip",{_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._title}))}validateTitle(i){e(this,"_title",i,{required:!0})}validateTooltipAlign(i){t(this,"_tooltipAlign",i)}componentWillLoad(){this.validateTitle(this._title),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}}};s.style={default:a};export{s as kol_abbr};
+import{r as i,h as o,H as r}from"./index-50adf9a0.js";import{w as t}from"./button-link-72d562a8.js";import{n as l}from"./dev.utils-3ec9f837.js";import{w as e}from"./prop.validators-88dff60e.js";import"./reuse-2b3b6999.js";import"./index-599f5430.js";import"./a11y.tipps-353a7f35.js";const a=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host>abbr{cursor:help}",s=class{constructor(o){i(this,o),this.nonce=l(),this._tooltipAlign="top",this._title=void 0,this.state={_title:"",_tooltipAlign:"top"}}render(){return o(r,null,o("abbr",{"aria-labelledby":this.nonce,role:"definition",title:this.state._title},o("span",{title:""},o("slot",null))),o("kol-tooltip",{_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._title}))}validateTitle(i){e(this,"_title",i,{required:!0})}validateTooltipAlign(i){t(this,"_tooltipAlign",i)}componentWillLoad(){this.validateTitle(this._title),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}}};s.style={default:a};export{s as kol_abbr};

package/dist/kolibri/kol-abbr.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","KolAbbr","this","nonce","_title","_tooltipAlign","render","h","Host","role","title","state","_align","_id","_label","validateTitle","value","watchString","required","validateTooltipAlign","watchTooltipAlignment","componentWillLoad"],"sources":["./src/components/abbr/style.css?tag=kol-abbr&mode=default&encapsulation=shadow","./src/components/abbr/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > abbr {\n\tcursor: help;\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Alignment } from '../../types/props/alignment';\nimport { nonce } from '../../utils/dev.utils';\nimport { watchString } from '../../utils/prop.validators';\n\n/*\n API\n /\ntype RequiredProps = {\n\ttitle: string;\n};\ntype OptionalProps = {\n\ttooltipAlign: Alignment;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & OptionalProps;\ntype OptionalStates = unknown;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" title={this.state._title}>\n\t\t\t\t\t<span title=\"\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t</abbr>\n\t\t\t\t<kol-tooltip _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._title}></kol-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.\n\t /\n\t@Prop() public _title!: string;\n\n\t/\n\t Die State-Parameter repräsentieren den inneren State\n\t * einer Komponente.\n\t \n\t @see: https://stenciljs.com/docs/state\n\t /\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_title: '',\n\t\t_tooltipAlign: 'top',\n\t};\n\n\t/\n\t Die Watch-Methoden dienen der Möglichkeit zur\n\t * Validierung der Werte eines Properties und\n\t * dem Mapping dessen auf einen anderen internen\n\t * State-Typ.\n\t \n\t @see: https://stenciljs.com/docs/properties#prop-validation\n\t /\n\t@Watch('_title')\n\tpublic validateTitle(value?: string): void {\n\t\twatchString(this, '_title', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateTitle(this._title);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"mappings":";;;2RAAA,MAAMA,EAAkB,~~4nC,~~MC8BXC,EAAO,M,yBACFC,KAAAC,MAAQA,I,mBAkBkB,M,iCAgBX,CAC/BC,OAAQ,GACRC,cAAe,M,CAlCTC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,0BAAuBL,KAAKC,MAAOM,KAAK,aAAaC,MAAOR,KAAKS,MAAMP,QACtEG,EAAA,QAAMG,MAAM,IACXH,EAAA,eAGFA,EAAA,eAAaK,OAAQV,KAAKS,MAAMN,cAAeQ,IAAKX,KAAKC,MAAOW,OAAQZ,KAAKS,MAAMP,S,CAsC/EW,cAAcC,GACpBC,EAAYf,KAAM,SAAUc,EAAO,CAClCE,SAAU,M,CAQLC,qBAAqBH,GAC3BI,EAAsBlB,KAAM,gBAAiBc,E,CAMvCK,oBACNnB,KAAKa,cAAcb,KAAKE,QACxBF,KAAKiB,qBAAqBjB,KAAKG,c"}
1	+ {"version":3,"names":["defaultStyleCss","KolAbbr","this","nonce","_title","_tooltipAlign","render","h","Host","role","title","state","_align","_id","_label","validateTitle","value","watchString","required","validateTooltipAlign","watchTooltipAlignment","componentWillLoad"],"sources":["./src/components/abbr/style.css?tag=kol-abbr&mode=default&encapsulation=shadow","./src/components/abbr/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > abbr {\n\tcursor: help;\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Alignment } from '../../types/props/alignment';\nimport { nonce } from '../../utils/dev.utils';\nimport { watchString } from '../../utils/prop.validators';\n\n/*\n API\n /\ntype RequiredProps = {\n\ttitle: string;\n};\ntype OptionalProps = {\n\ttooltipAlign: Alignment;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & OptionalProps;\ntype OptionalStates = unknown;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" title={this.state._title}>\n\t\t\t\t\t<span title=\"\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t</abbr>\n\t\t\t\t<kol-tooltip _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._title}></kol-tooltip>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll.\n\t /\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/\n\t Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.\n\t /\n\t@Prop() public _title!: string;\n\n\t/\n\t Die State-Parameter repräsentieren den inneren State\n\t * einer Komponente.\n\t \n\t @see: https://stenciljs.com/docs/state\n\t /\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_title: '',\n\t\t_tooltipAlign: 'top',\n\t};\n\n\t/\n\t Die Watch-Methoden dienen der Möglichkeit zur\n\t * Validierung der Werte eines Properties und\n\t * dem Mapping dessen auf einen anderen internen\n\t * State-Typ.\n\t \n\t @see: https://stenciljs.com/docs/properties#prop-validation\n\t /\n\t@Watch('_title')\n\tpublic validateTitle(value?: string): void {\n\t\twatchString(this, '_title', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateTitle(this._title);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"mappings":";;;2RAAA,MAAMA,EAAkB,+pC,MC8BXC,EAAO,M,yBACFC,KAAAC,MAAQA,I,mBAkBkB,M,iCAgBX,CAC/BC,OAAQ,GACRC,cAAe,M,CAlCTC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,0BAAuBL,KAAKC,MAAOM,KAAK,aAAaC,MAAOR,KAAKS,MAAMP,QACtEG,EAAA,QAAMG,MAAM,IACXH,EAAA,eAGFA,EAAA,eAAaK,OAAQV,KAAKS,MAAMN,cAAeQ,IAAKX,KAAKC,MAAOW,OAAQZ,KAAKS,MAAMP,S,CAsC/EW,cAAcC,GACpBC,EAAYf,KAAM,SAAUc,EAAO,CAClCE,SAAU,M,CAQLC,qBAAqBH,GAC3BI,EAAsBlB,KAAM,gBAAiBc,E,CAMvCK,oBACNnB,KAAKa,cAAcb,KAAKE,QACxBF,KAAKiB,qBAAqBjB,KAAKG,c"}

package/dist/kolibri/kol-accordion.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as e,H as o}from"./index-0dce65d2.js";import{f as t}from"./a11y.tipps-353a7f35.js";import{w as n,s as r,b as s}from"./prop.validators-a08ab31d.js";import{w as a}from"./validation-fbd9c031.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";import"./index-c40aa715.js";const l=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}";t("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),t("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const d=class{constructor(e){i(this,e),this.catchAriaExpanded=e=>{e instanceof HTMLButtonElement&&(this.buttonRef=e,this.triggerAriaExpanded(e))},this.triggerAriaExpanded=e=>{e.setAttribute("aria-expanded",this.state._open?"true":"false")},this.onClick=e=>{this._open=!1===this._open;const i=setTimeout((()=>{var o;clearTimeout(i),"function"==typeof(null===(o=this.state._on)||void 0===o?void 0:o.onClick)&&this.state._on.onClick(e,!0===this._open),this.buttonRef instanceof HTMLButtonElement&&this.triggerAriaExpanded(this.buttonRef)}))},this._heading=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_heading:"⚠",_level:1}}render(){return e(o,null,e("div",{part:"accordion "+(this.state._open?"open":"close")},e("kol-heading-wc",{_label:"",_level:this.state._level},e("button",{ref:this.catchAriaExpanded,onClick:this.onClick},e("kol-icon",{_ariaLabel:"",_icon:this.state._open?"fa-solid fa-minus":"fa-solid fa-plus",_part:this.state._open?"close":"open"}),e("span",null,this.state._heading))),e("div",{part:"header"},e("slot",{name:"header"})),e("div",{part:"content",style:!1===this.state._open?{display:"none",height:"0",visibility:"hidden"}:void 0},e("slot",{name:"content"}))))}validateHeading(e){n(this,"_heading",e,{required:!0})}validateLevel(e){a(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&r(this,"_on",e)}validateOpen(e){s(this,"_open",e)}componentWillLoad(){this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};d.style={default:l};export{d as kol_accordion};
+import{r as i,h as e,H as o}from"./index-50adf9a0.js";import{f as t}from"./a11y.tipps-353a7f35.js";import{w as n,s as r,b as s}from"./prop.validators-88dff60e.js";import{w as a}from"./validation-63fb9e79.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";import"./index-599f5430.js";const l=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}";t("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),t("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const d=class{constructor(e){i(this,e),this.catchAriaExpanded=e=>{e instanceof HTMLButtonElement&&(this.buttonRef=e,this.triggerAriaExpanded(e))},this.triggerAriaExpanded=e=>{e.setAttribute("aria-expanded",this.state._open?"true":"false")},this.onClick=e=>{this._open=!1===this._open;const i=setTimeout((()=>{var o;clearTimeout(i),"function"==typeof(null===(o=this.state._on)||void 0===o?void 0:o.onClick)&&this.state._on.onClick(e,!0===this._open),this.buttonRef instanceof HTMLButtonElement&&this.triggerAriaExpanded(this.buttonRef)}))},this._heading=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_heading:"⚠",_level:1}}render(){return e(o,null,e("div",{part:"accordion "+(this.state._open?"open":"close")},e("kol-heading-wc",{_label:"",_level:this.state._level},e("button",{ref:this.catchAriaExpanded,onClick:this.onClick},e("kol-icon",{_ariaLabel:"",_icon:this.state._open?"fa-solid fa-minus":"fa-solid fa-plus",_part:this.state._open?"close":"open"}),e("span",null,this.state._heading))),e("div",{part:"header"},e("slot",{name:"header"})),e("div",{part:"content",style:!1===this.state._open?{display:"none",height:"0",visibility:"hidden"}:void 0},e("slot",{name:"content"}))))}validateHeading(e){n(this,"_heading",e,{required:!0})}validateLevel(e){a(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&r(this,"_on",e)}validateOpen(e){s(this,"_open",e)}componentWillLoad(){this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}};d.style={default:l};export{d as kol_accordion};

package/dist/kolibri/kol-accordion.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","featureHint","KolAccordion","this","catchAriaExpanded","button","HTMLButtonElement","buttonRef","triggerAriaExpanded","setAttribute","state","_open","onClick","event","timeout","setTimeout","clearTimeout","_a","_on","_heading","_level","render","h","Host","part","_label","ref","_ariaLabel","_icon","_part","name","style","display","height","visibility","undefined","validateHeading","value","watchString","required","validateLevel","watchHeadingLevel","validateOn","setState","validateOpen","watchBoolean","componentWillLoad"],"sources":["./src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","./src/components/accordion/component.tsx"],"sourcesContent":["@import '../style.css';\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\n\nimport { EventValueOrEventCallback } from '../../types/callbacks';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\nexport type KoliBriAccordionCallbacks = {\n\t[Events.onClick]?: EventValueOrEventCallback<Event, boolean>;\n};\n\n/*\n API\n /\ntype RequiredProps = {\n\theading: string;\n};\ntype OptionalProps = {\n\tlevel: HeadingLevel;\n\topen: boolean;\n\ton: KoliBriAccordionCallbacks;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part accordion - Ermöglicht das Stylen des äußeren Container des Accordions.\n * @part open - Ermöglicht das Stylen des geöffneten Zustands und Icons.\n * @part close - Ermöglicht das Stylen des geschlossenen Zustands und Icons.\n * @part icon - Ermöglicht das Stylen der Icons.\n * @part header - Ermöglicht das Stylen des Kopfbereichs.\n * @part content - Ermöglicht das Stylen des Inhaltsbereichs.\n \n @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n /\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate buttonRef?: HTMLButtonElement;\n\t// private content?: HTMLDivElement;\n\n\tprivate catchAriaExpanded = (button?: HTMLButtonElement) => {\n\t\tif (button instanceof HTMLButtonElement) {\n\t\t\tthis.buttonRef = button;\n\t\t\tthis.triggerAriaExpanded(button);\n\t\t}\n\t};\n\tprivate triggerAriaExpanded = (button: HTMLButtonElement) => {\n\t\tbutton.setAttribute('aria-expanded', this.state._open ? 'true' : 'false');\n\t};\n\n\tpublic render(): JSX.Element {\n\t\t// const height = this.content?.getBoundingClientRect().height ?? 0;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div part={`accordion ${this.state._open ? 'open' : 'close'}`}>\n\t\t\t\t\t<kol-heading-wc _label=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<button ref={this.catchAriaExpanded} onClick={this.onClick}>\n\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon={this.state._open ? 'fa-solid fa-minus' : 'fa-solid fa-plus'} _part={this.state._open ? 'close' : 'open'} />\n\t\t\t\t\t\t\t<span>{this.state._heading}</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div part=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tpart=\"content\"\n\t\t\t\t\t\t// ref={(r) => (this.content = r)}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tthis.state._open === false\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tdisplay: 'none',\n\t\t\t\t\t\t\t\t\t\theight: '0',\n\t\t\t\t\t\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// style={\n\t\t\t\t\t\t// \tthis.state._open\n\t\t\t\t\t\t// \t\t? height > 0 && processEnv !== 'test' // TODO: remove this check when testing is fixed\n\t\t\t\t\t\t// \t\t\t? {\n\t\t\t\t\t\t// \t\t\t\theight: `${height}px`,\n\t\t\t\t\t\t// \t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\t}\n\t\t\t\t\t\t// \t\t\t: undefined\n\t\t\t\t\t\t// \t\t: {\n\t\t\t\t\t\t// \t\t\theight: '0',\n\t\t\t\t\t\t// \t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t// \t\t}\n\t\t\t\t\t\t// }\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt die Überschrift des Accordions an.\n\t /\n\t@Prop() public _heading!: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t /\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/\n\t Gibt die EventCallback-Funktionen an.\n\t /\n\t@Prop() public _on?: KoliBriAccordionCallbacks;\n\n\t/\n\t Gibt an, ob das Accordion geöffnet ist.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_heading: '⚠',\n\t\t_level: 1,\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\twatchBoolean(this, '_open', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t /\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tprivate onClick = (event: Event) => {\n\t\tthis._open = this._open === false;\n\n\t\t/\n\t\t Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t\tif (this.buttonRef instanceof HTMLButtonElement) {\n\t\t\t\tthis.triggerAriaExpanded(this.buttonRef);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"mappings":";;;wSAAA,MAAMA,EAAkB,~~qmCCYxBC~~,EAAY,+OAKZA,EAAY,mE,MAyCCC,EAAY,M,yBAIhBC,KAAAC,kBAAqBC,IAC5B,GAAIA,aAAkBC,kBAAmB,CACxCH,KAAKI,UAAYF,EACjBF,KAAKK,oBAAoBH,E,GAGnBF,KAAAK,oBAAuBH,IAC9BA,EAAOI,aAAa,gBAAiBN,KAAKO,MAAMC,MAAQ,OAAS,QAAQ,EA6HlER,KAAAS,QAAWC,IAClBV,KAAKQ,MAAQR,KAAKQ,QAAU,MAQ5B,MAAMG,EAAUC,YAAW,K,MAC1BC,aAAaF,GACb,WAAWG,EAAAd,KAAKO,MAAMQ,OAAG,MAAAD,SAAA,SAAAA,EAAEL,WAAY,WAAY,CAClDT,KAAKO,MAAMQ,IAAIN,QAAQC,EAAOV,KAAKQ,QAAU,K,CAE9C,GAAIR,KAAKI,qBAAqBD,kBAAmB,CAChDH,KAAKK,oBAAoBL,KAAKI,U,IAE9B,E,oCAnFoC,E,8BAU0B,M,WAKjC,CAC/BY,SAAU,IACVC,OAAQ,E,CAzEFC,SAEN,OACCC,EAACC,EAAI,KACJD,EAAA,OAAKE,KAAM,aAAarB,KAAKO,MAAMC,MAAQ,OAAS,WACnDW,EAAA,kBAAgBG,OAAO,GAAGL,OAAQjB,KAAKO,MAAMU,QAC5CE,EAAA,UAAQI,IAAKvB,KAAKC,kBAAmBQ,QAAST,KAAKS,SAClDU,EAAA,YAAUK,WAAW,GAAGC,MAAOzB,KAAKO,MAAMC,MAAQ,oBAAsB,mBAAoBkB,MAAO1B,KAAKO,MAAMC,MAAQ,QAAU,SAChIW,EAAA,YAAOnB,KAAKO,MAAMS,YAGpBG,EAAA,OAAKE,KAAK,UACTF,EAAA,QAAMQ,KAAK,YAEZR,EAAA,OACCE,KAAK,UAELO,MACC5B,KAAKO,MAAMC,QAAU,MAClB,CACAqB,QAAS,OACTC,OAAQ,IACRC,WAAY,UAEZC,WAiBJb,EAAA,QAAMQ,KAAK,c,CAuCTM,gBAAgBC,GACtBC,EAAYnC,KAAM,WAAYkC,EAAO,CACpCE,SAAU,M,CAQLC,cAAcH,GACpBI,EAAkBtC,KAAMkC,E,CAOlBK,WAAWL,GACjB,UAAWA,IAAU,UAAYA,IAAU,aAAeA,EAAMzB,UAAY,WAAY,CACvF+B,EAASxC,KAAM,MAAOkC,E,EAQjBO,aAAaP,GACnBQ,EAAa1C,KAAM,QAASkC,E,CAMtBS,oBACN3C,KAAKiC,gBAAgBjC,KAAKgB,UAC1BhB,KAAKqC,cAAcrC,KAAKiB,QACxBjB,KAAKuC,WAAWvC,KAAKe,KACrBf,KAAKyC,aAAazC,KAAKQ,M"}
1	+ {"version":3,"names":["defaultStyleCss","featureHint","KolAccordion","this","catchAriaExpanded","button","HTMLButtonElement","buttonRef","triggerAriaExpanded","setAttribute","state","_open","onClick","event","timeout","setTimeout","clearTimeout","_a","_on","_heading","_level","render","h","Host","part","_label","ref","_ariaLabel","_icon","_part","name","style","display","height","visibility","undefined","validateHeading","value","watchString","required","validateLevel","watchHeadingLevel","validateOn","setState","validateOpen","watchBoolean","componentWillLoad"],"sources":["./src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","./src/components/accordion/component.tsx"],"sourcesContent":["@import '../style.css';\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\n\nimport { EventValueOrEventCallback } from '../../types/callbacks';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\nexport type KoliBriAccordionCallbacks = {\n\t[Events.onClick]?: EventValueOrEventCallback<Event, boolean>;\n};\n\n/*\n API\n /\ntype RequiredProps = {\n\theading: string;\n};\ntype OptionalProps = {\n\tlevel: HeadingLevel;\n\topen: boolean;\n\ton: KoliBriAccordionCallbacks;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part accordion - Ermöglicht das Stylen des äußeren Container des Accordions.\n * @part open - Ermöglicht das Stylen des geöffneten Zustands und Icons.\n * @part close - Ermöglicht das Stylen des geschlossenen Zustands und Icons.\n * @part icon - Ermöglicht das Stylen der Icons.\n * @part header - Ermöglicht das Stylen des Kopfbereichs.\n * @part content - Ermöglicht das Stylen des Inhaltsbereichs.\n \n @slot header - Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n /\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate buttonRef?: HTMLButtonElement;\n\t// private content?: HTMLDivElement;\n\n\tprivate catchAriaExpanded = (button?: HTMLButtonElement) => {\n\t\tif (button instanceof HTMLButtonElement) {\n\t\t\tthis.buttonRef = button;\n\t\t\tthis.triggerAriaExpanded(button);\n\t\t}\n\t};\n\tprivate triggerAriaExpanded = (button: HTMLButtonElement) => {\n\t\tbutton.setAttribute('aria-expanded', this.state._open ? 'true' : 'false');\n\t};\n\n\tpublic render(): JSX.Element {\n\t\t// const height = this.content?.getBoundingClientRect().height ?? 0;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div part={`accordion ${this.state._open ? 'open' : 'close'}`}>\n\t\t\t\t\t<kol-heading-wc _label=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<button ref={this.catchAriaExpanded} onClick={this.onClick}>\n\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon={this.state._open ? 'fa-solid fa-minus' : 'fa-solid fa-plus'} _part={this.state._open ? 'close' : 'open'} />\n\t\t\t\t\t\t\t<span>{this.state._heading}</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div part=\"header\">\n\t\t\t\t\t\t<slot name=\"header\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tpart=\"content\"\n\t\t\t\t\t\t// ref={(r) => (this.content = r)}\n\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\tthis.state._open === false\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\tdisplay: 'none',\n\t\t\t\t\t\t\t\t\t\theight: '0',\n\t\t\t\t\t\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// style={\n\t\t\t\t\t\t// \tthis.state._open\n\t\t\t\t\t\t// \t\t? height > 0 && processEnv !== 'test' // TODO: remove this check when testing is fixed\n\t\t\t\t\t\t// \t\t\t? {\n\t\t\t\t\t\t// \t\t\t\theight: `${height}px`,\n\t\t\t\t\t\t// \t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\t}\n\t\t\t\t\t\t// \t\t\t: undefined\n\t\t\t\t\t\t// \t\t: {\n\t\t\t\t\t\t// \t\t\theight: '0',\n\t\t\t\t\t\t// \t\t\toverflow: 'hidden',\n\t\t\t\t\t\t// \t\t\tvisibility: 'hidden',\n\t\t\t\t\t\t// \t\t}\n\t\t\t\t\t\t// }\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot name=\"content\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt die Überschrift des Accordions an.\n\t /\n\t@Prop() public _heading!: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t /\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/\n\t Gibt die EventCallback-Funktionen an.\n\t /\n\t@Prop() public _on?: KoliBriAccordionCallbacks;\n\n\t/\n\t Gibt an, ob das Accordion geöffnet ist.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_heading: '⚠',\n\t\t_level: 1,\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\twatchBoolean(this, '_open', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t /\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tprivate onClick = (event: Event) => {\n\t\tthis._open = this._open === false;\n\n\t\t/\n\t\t Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t\tif (this.buttonRef instanceof HTMLButtonElement) {\n\t\t\t\tthis.triggerAriaExpanded(this.buttonRef);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"mappings":";;;wSAAA,MAAMA,EAAkB,woCCYxBC,EAAY,+OAKZA,EAAY,mE,MAyCCC,EAAY,M,yBAIhBC,KAAAC,kBAAqBC,IAC5B,GAAIA,aAAkBC,kBAAmB,CACxCH,KAAKI,UAAYF,EACjBF,KAAKK,oBAAoBH,E,GAGnBF,KAAAK,oBAAuBH,IAC9BA,EAAOI,aAAa,gBAAiBN,KAAKO,MAAMC,MAAQ,OAAS,QAAQ,EA6HlER,KAAAS,QAAWC,IAClBV,KAAKQ,MAAQR,KAAKQ,QAAU,MAQ5B,MAAMG,EAAUC,YAAW,K,MAC1BC,aAAaF,GACb,WAAWG,EAAAd,KAAKO,MAAMQ,OAAG,MAAAD,SAAA,SAAAA,EAAEL,WAAY,WAAY,CAClDT,KAAKO,MAAMQ,IAAIN,QAAQC,EAAOV,KAAKQ,QAAU,K,CAE9C,GAAIR,KAAKI,qBAAqBD,kBAAmB,CAChDH,KAAKK,oBAAoBL,KAAKI,U,IAE9B,E,oCAnFoC,E,8BAU0B,M,WAKjC,CAC/BY,SAAU,IACVC,OAAQ,E,CAzEFC,SAEN,OACCC,EAACC,EAAI,KACJD,EAAA,OAAKE,KAAM,aAAarB,KAAKO,MAAMC,MAAQ,OAAS,WACnDW,EAAA,kBAAgBG,OAAO,GAAGL,OAAQjB,KAAKO,MAAMU,QAC5CE,EAAA,UAAQI,IAAKvB,KAAKC,kBAAmBQ,QAAST,KAAKS,SAClDU,EAAA,YAAUK,WAAW,GAAGC,MAAOzB,KAAKO,MAAMC,MAAQ,oBAAsB,mBAAoBkB,MAAO1B,KAAKO,MAAMC,MAAQ,QAAU,SAChIW,EAAA,YAAOnB,KAAKO,MAAMS,YAGpBG,EAAA,OAAKE,KAAK,UACTF,EAAA,QAAMQ,KAAK,YAEZR,EAAA,OACCE,KAAK,UAELO,MACC5B,KAAKO,MAAMC,QAAU,MAClB,CACAqB,QAAS,OACTC,OAAQ,IACRC,WAAY,UAEZC,WAiBJb,EAAA,QAAMQ,KAAK,c,CAuCTM,gBAAgBC,GACtBC,EAAYnC,KAAM,WAAYkC,EAAO,CACpCE,SAAU,M,CAQLC,cAAcH,GACpBI,EAAkBtC,KAAMkC,E,CAOlBK,WAAWL,GACjB,UAAWA,IAAU,UAAYA,IAAU,aAAeA,EAAMzB,UAAY,WAAY,CACvF+B,EAASxC,KAAM,MAAOkC,E,EAQjBO,aAAaP,GACnBQ,EAAa1C,KAAM,QAASkC,E,CAMtBS,oBACN3C,KAAKiC,gBAAgBjC,KAAKgB,UAC1BhB,KAAKqC,cAAcrC,KAAKiB,QACxBjB,KAAKuC,WAAWvC,KAAKe,KACrBf,KAAKyC,aAAazC,KAAKQ,M"}

package/dist/kolibri/kol-alert.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as r,H as o}from"./index-0dce65d2.js";import{f as a}from"./a11y.tipps-353a7f35.js";import{L as e}from"./dev.utils-3ec9f837.js";import{b as s,w as l,s as t,a as n}from"./prop.validators-a08ab31d.js";import{w as c}from"./validation-fbd9c031.js";import{a as d}from"./i18n-885e621b.js";import"./reuse-2b3b6999.js";import"./index-c40aa715.js";const h=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host>div{background-color:white;border-color:var(--kolibri-border-color);border-radius:var(--kolibri-border-radius);border-style:solid;border-width:var(--kolibri-border-width);display:flex;overflow:hidden;width:100%}:host>div.error{border-color:var(--kolibri-color-error)}:host>div.error .icon{background-color:var(--kolibri-color-error)}:host>div.info{border-color:var(--kolibri-color-info)}:host>div.info .icon{background-color:var(--kolibri-color-info)}:host>div.success{border-color:var(--kolibri-color-success)}:host>div.success .icon{background-color:var(--kolibri-color-success)}:host>div.warning{border-color:var(--kolibri-color-warning)}:host>div.warning .icon{background-color:var(--kolibri-color-warning)}:host>div .icon{color:white;display:inline-block;padding:0 var(--kolibri-spacing)}:host>div>div{display:grid}:host>div>div .heading{display:inline-block;padding:0 var(--kolibri-spacing)}:host>div>div .heading .icon{border-radius:0 0 var(--kolibri-border-radius) 0;margin-left:var(--kolibri-spacing);margin-right:var(--kolibri-spacing)}:host>div>div>div:last-child{padding:var(--kolibri-spacing)}",b=i=>r("kol-icon",{class:"icon",_ariaLabel:"string"==typeof i.heading&&i.heading.length>0?"":i.ariaLabel,_icon:i.icon}),f=i=>{switch(i.type){case"error":return r(b,{ariaLabel:d("kol-error"),icon:"fa-solid fa-circle-xmark",heading:i.heading});case"info":return r(b,{ariaLabel:d("kol-info"),icon:"fa-solid fa-circle-info",heading:i.heading});case"warning":return r(b,{ariaLabel:d("kol-warning"),icon:"fa-solid fa-triangle-exclamation",heading:i.heading});case"success":return r(b,{ariaLabel:d("kol-success"),icon:"fa-solid fa-circle-check",heading:i.heading});default:return r(b,{ariaLabel:d("kol-message"),icon:"fa-regular fa-comment",heading:i.heading})}},v=class{constructor(a){i(this,a),this.close=()=>{var i;void 0!==(null===(i=this._on)||void 0===i?void 0:i.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this._alert=!1,this._hasCloser=!1,this._heading=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){if(this.state._alert){try{e.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(i){e.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return r(o,null,r("div",{class:{[this.state._type]:!0,[this.state._variant]:!0},role:this.state._alert?"alert":void 0},"msg"===this.state._variant&&r(f,{heading:this.state._heading,type:this.state._type}),r("div",null,("string"==typeof this.state._heading&&this.state._heading.length>0||"card"===this.state._variant)&&r("kol-heading-wc",{class:"heading",_label:this.state._heading||"",_level:this.state._level},"card"===this.state._variant&&r(f,{heading:this.state._heading,type:this.state._type})),r("div",{class:"content"},r("slot",null)),this.state._hasCloser&&r("kol-button-wc",{class:"close",_icon:{left:{icon:"fa-solid fa-circle-xmark"}},_iconOnly:!0,_label:d("kol-close"),_on:this.on,_tooltipAlign:"left"}))))}validateAlert(i){s(this,"_alert",i)}validateHasCloser(i){s(this,"_hasCloser",i)}validateHeading(i){l(this,"_heading",i)}validateLevel(i){c(this,i)}validateOn(i){if("object"==typeof i&&null!==i){a("[KolAlert] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const r={};"function"!=typeof i.onClose&&!0!==i.onClose||(r.onClose=i.onClose),t(this,"_on",r)}}validateType(i){n(this,"_type",(i=>"string"==typeof i&&("default"===i||"error"===i||"info"===i||"success"===i||"warning"===i)),new Set("String {success, info, warning, error}"),i)}validateVariant(i){n(this,"_variant",(i=>"card"===i||"msg"===i),new Set("AlertVariant {card, msg}"),i)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};v.style={default:h};export{v as kol_alert};
+import{r as i,h as o,H as r}from"./index-50adf9a0.js";import{L as a}from"./dev.utils-3ec9f837.js";import{b as e,w as t,s as l,a as s}from"./prop.validators-88dff60e.js";import{w as n}from"./validation-63fb9e79.js";import{a as d}from"./i18n-21ff76e6.js";import"./reuse-2b3b6999.js";import"./index-599f5430.js";import"./a11y.tipps-353a7f35.js";const c=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host>div{background-color:white;border-color:var(--kolibri-border-color);border-radius:var(--kolibri-border-radius);border-style:solid;border-width:calc(2 * var(--kolibri-border-width));display:inline-block;overflow:hidden;width:100%}:host>div>div.heading{display:grid;gap:var(--kolibri-spacing);grid-template-columns:2em auto 44px;place-items:stretch start}:host>div>div.heading .heading-icon{display:inline-flex;color:white;padding:0.5em;place-items:center}:host>div.card>div.heading .heading-icon{border-radius:0 0 var(--kolibri-border-radius) 0}:host>div>div.heading>div{align-self:center;display:grid;gap:var(--kolibri-spacing)}:host>div.card>div.content{padding:var(--kolibri-spacing)}:host>div.default{border-color:var(--kolibri-color-normal)}:host>div.default .heading-icon{background-color:var(--kolibri-color-normal)}:host>div.error{border-color:var(--kolibri-color-error)}:host>div.error .heading-icon{background-color:var(--kolibri-color-error)}:host>div.info{border-color:var(--kolibri-color-info)}:host>div.info .heading-icon{background-color:var(--kolibri-color-info)}:host>div.success{border-color:var(--kolibri-color-success)}:host>div.success .heading-icon{background-color:var(--kolibri-color-success)}:host>div.warning{border-color:var(--kolibri-color-warning)}:host>div.warning .heading-icon{background-color:var(--kolibri-color-warning)}.close,.close>button{min-width:44px;min-height:44px}",h=i=>o("kol-icon",{class:"heading-icon",_ariaLabel:"string"==typeof i.heading&&i.heading.length>0?"":i.ariaLabel,_icon:i.icon}),b=i=>{switch(i.type){case"error":return o(h,{ariaLabel:d("kol-error"),icon:"fa-solid fa-circle-xmark",heading:i.heading});case"info":return o(h,{ariaLabel:d("kol-info"),icon:"fa-solid fa-circle-info",heading:i.heading});case"warning":return o(h,{ariaLabel:d("kol-warning"),icon:"fa-solid fa-triangle-exclamation",heading:i.heading});case"success":return o(h,{ariaLabel:d("kol-success"),icon:"fa-solid fa-circle-check",heading:i.heading});default:return o(h,{ariaLabel:d("kol-message"),icon:"fa-regular fa-comment",heading:i.heading})}},f=class{constructor(o){i(this,o),this.close=()=>{var i;void 0!==(null===(i=this._on)||void 0===i?void 0:i.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=i=>"object"==typeof i&&null!==i&&"function"==typeof i.onClose,this._alert=!1,this._hasCloser=!1,this._heading=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){var i;if(this.state._alert){try{a.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(i){a.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return o(r,null,o("div",{class:{[this.state._type]:!0,[this.state._variant]:!0},role:this.state._alert?"alert":void 0},o("div",{class:"heading"},o(b,{heading:this.state._heading,type:this.state._type}),o("div",null,"string"==typeof this.state._heading&&(null===(i=this.state._heading)||void 0===i?void 0:i.length)>0&&o("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),"msg"===this._variant&&o("div",{class:"content"},o("slot",null))),this.state._hasCloser&&o("kol-button-wc",{class:"close",_icon:{left:{icon:"fa-solid fa-xmark"}},_iconOnly:!0,_label:d("kol-close"),_on:this.on,_tooltipAlign:"left"})),"card"===this._variant&&o("div",{class:"content"},o("slot",null))))}validateAlert(i){e(this,"_alert",i)}validateHasCloser(i){e(this,"_hasCloser",i)}validateHeading(i){t(this,"_heading",i)}validateLevel(i){n(this,i)}validateOn(i){this.validateOnValue(i)&&l(this,"_on",{onClose:i.onClose})}validateType(i){s(this,"_type",(i=>"string"==typeof i&&("default"===i||"error"===i||"info"===i||"success"===i||"warning"===i)),new Set("String {success, info, warning, error}"),i)}validateVariant(i){s(this,"_variant",(i=>"card"===i||"msg"===i),new Set("AlertVariant {card, msg}"),i)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}};f.style={default:c};export{f as kol_alert};

package/dist/kolibri/kol-alert.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","Icon","props","h","class","_ariaLabel","heading","length","ariaLabel","_icon","icon","AlertIcon","type","translate","KolAlert","this","close","_a","_on","onClose","undefined","Event","on","onClick","_level","render","state","_alert","Log","debug","navigator","vibrate","e","setTimeout","validateAlert","Host","_type","_variant","role","_heading","_label","_hasCloser","left","_iconOnly","_tooltipAlign","value","watchBoolean","validateHasCloser","validateHeading","watchString","validateLevel","watchHeadingLevel","validateOn","featureHint","callbacks","setState","validateType","watchValidator","Set","validateVariant","componentWillLoad"],"sources":["./src/components/alert/style.css?tag=kol-alert&mode=default&encapsulation=shadow","./src/components/alert/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > div {\n\tbackground-color: white;\n\tborder-color: var(--kolibri-border-color);\n\tborder-radius: var(--kolibri-border-radius);\n\tborder-style: solid;\n\tborder-width: var(--kolibri-border-width);\n\tdisplay: flex;\n\toverflow: hidden;\n\twidth: 100%;\n}\n:host > div.error {\n\tborder-color: var(--kolibri-color-error);\n}\n:host > div.error .icon {\n\tbackground-color: var(--kolibri-color-error);\n}\n:host > div.info {\n\tborder-color: var(--kolibri-color-info);\n}\n:host > div.info .icon {\n\tbackground-color: var(--kolibri-color-info);\n}\n:host > div.success {\n\tborder-color: var(--kolibri-color-success);\n}\n:host > div.success .icon {\n\tbackground-color: var(--kolibri-color-success);\n}\n:host > div.warning {\n\tborder-color: var(--kolibri-color-warning);\n}\n:host > div.warning .icon {\n\tbackground-color: var(--kolibri-color-warning);\n}\n:host > div .icon {\n\tcolor: white;\n\tdisplay: inline-block;\n\tpadding: 0 var(--kolibri-spacing);\n}\n:host > div > div {\n\tdisplay: grid;\n}\n:host > div > div .heading {\n\tdisplay: inline-block;\n\tpadding: 0 var(--kolibri-spacing);\n}\n:host > div > div .heading .icon {\n\tborder-radius: 0 0 var(--kolibri-border-radius) 0;\n\tmargin-left: var(--kolibri-spacing);\n\tmargin-right: var(--kolibri-spacing);\n}\n:host > div > div > div:last-child {\n\tpadding: var(--kolibri-spacing);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AlertType, AlertVariant, KoliBriAlertEventCallbacks } from '../../types/alert';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { Log } from '../../utils/dev.utils';\nimport { setState, watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { translate } from '../../i18n';\n\n/*\n API\n /\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\talert: boolean;\n\thasCloser: boolean;\n\theading: string;\n\tlevel: HeadingLevel;\n\ton: KoliBriAlertEventCallbacks;\n\ttype: AlertType;\n\tvariant: AlertVariant;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst Icon = (props: { ariaLabel: string; icon: string; heading?: string }) => {\n\treturn <kol-icon class=\"icon\" _ariaLabel={typeof props.heading === 'string' && props.heading.length > 0 ? '' : props.ariaLabel} _icon={props.icon} />;\n};\n\nconst AlertIcon = (props: { heading?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"fa-solid fa-circle-xmark\" heading={props.heading} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"fa-solid fa-circle-info\" heading={props.heading} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"fa-solid fa-triangle-exclamation\" heading={props.heading} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"fa-solid fa-circle-check\" heading={props.heading} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"fa-regular fa-comment\" heading={props.heading} />;\n\t}\n};\n\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/\n\t\t\t - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t /\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\t}}\n\t\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'msg' && <AlertIcon heading={this.state._heading} type={this.state._type} />}\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{((typeof this.state._heading === 'string' && this.state._heading.length > 0) \|\| this.state._variant === 'card') && (\n\t\t\t\t\t\t\t<kol-heading-wc class=\"heading\" _label={this.state._heading \|\| ''} _level={this.state._level}>\n\t\t\t\t\t\t\t\t{this.state._variant === 'card' && <AlertIcon heading={this.state._heading} type={this.state._type} />}\n\t\t\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t\t_icon={{\n\t\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\t\ticon: 'fa-solid fa-circle-xmark',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung vorlesen soll.\n\t /\n\t@Prop({ reflect: true }) public _alert?: boolean = false;\n\n\t/\n\t Gibt an, ob der Alert ein Schließen-Icon hat.\n\t /\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/\n\t Gibt den Titel der Meldung an.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t /\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/\n\t Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t /\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\n\n\t/\n\t Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.\n\t /\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/\n\t Gibt an, welche Benachrichtigungsvariante dargestellt wird.\n\t /\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_level: 1,\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\twatchBoolean(this, '_hasCloser', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolAlert] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriAlertEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' \|\| value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriAlertEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' \|\| value === 'error' \|\| value === 'info' \|\| value === 'success' \|\| value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'card' \|\| value === 'msg', new Set('AlertVariant {card, msg}'), value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["defaultStyleCss","Icon","props","h","class","_ariaLabel","heading","length","ariaLabel","_icon","icon","AlertIcon","type","translate","KolAlert","this","close","_a","_on","onClose","undefined","Event","on","onClick","validateOnValue","value","_level","render","state","_alert","Log","debug","navigator","vibrate","e","setTimeout","validateAlert","Host","_type","_variant","role","_heading","_label","_hasCloser","left","_iconOnly","_tooltipAlign","watchBoolean","validateHasCloser","validateHeading","watchString","validateLevel","watchHeadingLevel","validateOn","setState","validateType","watchValidator","Set","validateVariant","componentWillLoad"],"sources":["./src/components/alert/style.css?tag=kol-alert&mode=default&encapsulation=shadow","./src/components/alert/component.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > div {\n\tbackground-color: white;\n\tborder-color: var(--kolibri-border-color);\n\tborder-radius: var(--kolibri-border-radius);\n\tborder-style: solid;\n\tborder-width: calc(2 * var(--kolibri-border-width));\n\tdisplay: inline-block;\n\toverflow: hidden;\n\twidth: 100%;\n}\n\n:host > div > div.heading {\n\tdisplay: grid;\n\tgap: var(--kolibri-spacing);\n\tgrid-template-columns: 2em auto 44px;\n\tplace-items: stretch start;\n}\n:host > div > div.heading .heading-icon {\n\tdisplay: inline-flex;\n\tcolor: white;\n\tpadding: 0.5em;\n\tplace-items: center;\n}\n:host > div.card > div.heading .heading-icon {\n\tborder-radius: 0 0 var(--kolibri-border-radius) 0;\n}\n:host > div > div.heading > div {\n\talign-self: center;\n\tdisplay: grid;\n\tgap: var(--kolibri-spacing);\n}\n:host > div.card > div.content {\n\tpadding: var(--kolibri-spacing);\n}\n:host > div.default {\n\tborder-color: var(--kolibri-color-normal);\n}\n:host > div.default .heading-icon {\n\tbackground-color: var(--kolibri-color-normal);\n}\n:host > div.error {\n\tborder-color: var(--kolibri-color-error);\n}\n:host > div.error .heading-icon {\n\tbackground-color: var(--kolibri-color-error);\n}\n:host > div.info {\n\tborder-color: var(--kolibri-color-info);\n}\n:host > div.info .heading-icon {\n\tbackground-color: var(--kolibri-color-info);\n}\n:host > div.success {\n\tborder-color: var(--kolibri-color-success);\n}\n:host > div.success .heading-icon {\n\tbackground-color: var(--kolibri-color-success);\n}\n:host > div.warning {\n\tborder-color: var(--kolibri-color-warning);\n}\n:host > div.warning .heading-icon {\n\tbackground-color: var(--kolibri-color-warning);\n}\n\n/* close button /\n\n.close,\n.close > button {\n\tmin-width: 44px;\n\tmin-height: 44px;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { AlertType, AlertVariant, KoliBriAlertEventCallbacks } from '../../types/alert';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { Log } from '../../utils/dev.utils';\nimport { setState, watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { translate } from '../../i18n';\n\n/\n API\n /\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\talert: boolean;\n\thasCloser: boolean;\n\theading: string;\n\tlevel: HeadingLevel;\n\ton: KoliBriAlertEventCallbacks;\n\ttype: AlertType;\n\tvariant: AlertVariant;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst Icon = (props: { ariaLabel: string; icon: string; heading?: string }) => {\n\treturn <kol-icon class=\"heading-icon\" _ariaLabel={typeof props.heading === 'string' && props.heading.length > 0 ? '' : props.ariaLabel} _icon={props.icon} />;\n};\n\nconst AlertIcon = (props: { heading?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"fa-solid fa-circle-xmark\" heading={props.heading} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"fa-solid fa-circle-info\" heading={props.heading} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"fa-solid fa-triangle-exclamation\" heading={props.heading} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"fa-solid fa-circle-check\" heading={props.heading} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"fa-regular fa-comment\" heading={props.heading} />;\n\t}\n};\n\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tif (this.state._alert) {\n\t\t\t/\n\t\t\t - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate\n\t\t\t * - https://googlechrome.github.io/samples/vibration/\n\t\t\t /\n\t\t\ttry {\n\t\t\t\tLog.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);\n\t\t\t} catch (e) {\n\t\t\t\tLog.debug('Navigator does not support vibration.');\n\t\t\t}\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.validateAlert(false);\n\t\t\t}, 10000);\n\t\t}\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\t}}\n\t\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t\t>\n\t\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t\t<AlertIcon heading={this.state._heading} type={this.state._type} />\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t{typeof this.state._heading === 'string' && this.state._heading?.length > 0 && (\n\t\t\t\t\t\t\t\t<kol-heading-wc _label={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this._variant === 'msg' && (\n\t\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t\t_icon={{\n\t\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\t\ticon: 'fa-solid fa-xmark',\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_iconOnly\n\t\t\t\t\t\t\t\t_label={translate('kol-close')}\n\t\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this._variant === 'card' && (\n\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt an, ob der Screenreader die Meldung vorlesen soll.\n\t /\n\t@Prop({ reflect: true }) public _alert?: boolean = false;\n\n\t/\n\t Gibt an, ob der Alert ein Schließen-Icon hat.\n\t /\n\t@Prop({ reflect: true }) public _hasCloser?: boolean = false;\n\n\t/\n\t Gibt den Titel der Meldung an.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat.\n\t /\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/\n\t Gibt die EventCallback-Function für das Schließen des Alerts an.\n\t /\n\t@Prop() public _on?: KoliBriAlertEventCallbacks;\n\n\t/\n\t Gibt an, ob es sich um eine Erfolgs-, Info-, Warnung- oder Fehlermeldung handelt.\n\t /\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/\n\t Gibt an, welche Benachrichtigungsvariante dargestellt wird.\n\t /\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_level: 1,\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: boolean): void {\n\t\twatchBoolean(this, '_hasCloser', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriAlertEventCallbacks).onClose === 'function';\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAlertEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriAlertEventCallbacks>(\n\t\t\t\tthis,\n\t\t\t\t'_on',\n\t\t\t\t{\n\t\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t\t}\n\t\t\t\t// {\n\t\t\t\t// \tafterPatch: (value: unknown) => {\n\t\t\t\t// \t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t\t// \t},\n\t\t\t\t// }\n\t\t\t);\n\t\t\t// } else {\n\t\t\t// \tsetState<KoliBriAlertEventCallbacks>(this, '_on', null, {\n\t\t\t// \t\tafterPatch: (value: unknown) => {\n\t\t\t// \t\t\tthis._hasCloser = this.validateOnValue(value);\n\t\t\t// \t\t},\n\t\t\t// \t});\n\t\t}\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' \|\| value === 'error' \|\| value === 'info' \|\| value === 'success' \|\| value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'card' \|\| value === 'msg', new Set('AlertVariant {card, msg}'), value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateType(this._type);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":"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"}

package/dist/kolibri/kol-badge.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as o,h as t,H as i}from"./index-0dce65d2.js";import{f as r,d as s,a as e}from"./a11y.tipps-353a7f35.js";import{r as a,c as n,a as l,o as c,p as d,s as b}from"./prop.validators-a08ab31d.js";import{c as h}from"./index-d14da386.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";import"./index-c40aa715.js";const f=(t,o,r)=>(299*t+587*o+114*r)/1e3>=128?-1:1,p=(t,o,r,i=1)=>{const s=[Math.max(Math.min(Math.round(o[0]+i*Math.max(1,o[0]/100)),255),0),Math.max(Math.min(Math.round(o[1]+i*Math.max(1,o[1]/100)),255),0),Math.max(Math.min(Math.round(o[2]+i*Math.max(1,o[2]/100)),255),0)],e=n(a.hex(`rgba(${t.join(",")},1)`),a.hex(`rgba(${s.join(",")},1)`)),l=s[0]+s[1]+s[2];return 0===l||765===l||e>r?{background:t,foreground:s,contrast:e}:p(t,s,r,i)},u=new Map,g=(t,o,r,a=1)=>{if(u.has(t))return u.get(t);const i=p(t,o,r,a);return u.set(t,i),i},k=(t,o=7)=>{let r=[0,0,0,1],i=[255,255,255,1];"string"==typeof t?(r=h(t),i=r):"object"==typeof t&&null!==t&&"string"==typeof t.background&&"string"==typeof t.foreground&&(r=h(t.background),i="string"==typeof t.foreground?h(t.foreground):r);const s=f(r[0],r[1],r[2]),n=g([r[0],r[1],r[2]],[i[0],i[1],i[2]],o,s);return i=[...n.foreground,1],{background:a.hex(`rgba(${r.join(",")})`),foreground:a.hex(`rgba(${i.join(",")})`),contrast:n.contrast}},m=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host>span{display:inline-flex}:host>span>kol-button-wc{box-shadow-left:1px solid rgba(0, 0, 0, 0.25)}:host>span>kol-button-wc button{color:inherit}";r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const y=/^([a-f0-9]{3}|[a-f0-9]{6})$/,w=class{constructor(t){o(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.handleColorChange=t=>{let o,r=t;"string"==typeof r?(y.test(r)&&(s("[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."),r=`#${r}`),o=k(r)):o=k({background:r.backgroundColor,foreground:r.color}),o.contrast<7&&e(`[KolBadge] The contrast of ${o.contrast} (≥7, AAA) is too low, between the color pair ${o.background} and ${o.foreground}.`),this.bgColorStr=o.background,this.colorStr=o.foreground},this._color="#000",this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._smartButton=void 0,this.state={_color:"#000"}}render(){return t(i,null,t("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},t("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&t("kol-button-wc",{_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_icon:this.state._smartButton._icon,_iconOnly:!0,_id:this.state._smartButton._id,_label:this.state._smartButton._label,_on:this.state._smartButton._on,_tooltipAlign:this.state._smartButton._tooltipAlign,_variant:this.state._smartButton._variant})))}validateColor(t){l(this,"_color",(t=>"string"==typeof t||"object"==typeof t&&null!==t&&"string"==typeof t.backgroundColor&&"string"==typeof t.color),new Set(["string","KoliBriColor"]),t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(t){c(t,(()=>{try{t=d(t)}catch(t){}b(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};w.style={default:m};export{w as kol_badge};
+import{r as o,h as t,H as i}from"./index-50adf9a0.js";import{f as r,d as s,a as e}from"./a11y.tipps-353a7f35.js";import{r as a,c as n,a as l,o as c,p as h,s as d}from"./prop.validators-88dff60e.js";import{c as f}from"./index-d14da386.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";import"./index-599f5430.js";const b=(t,o,r)=>(299*t+587*o+114*r)/1e3>=128?-1:1,p=(t,o,r,i=1)=>{const s=[Math.max(Math.min(Math.round(o[0]+i*Math.max(1,o[0]/100)),255),0),Math.max(Math.min(Math.round(o[1]+i*Math.max(1,o[1]/100)),255),0),Math.max(Math.min(Math.round(o[2]+i*Math.max(1,o[2]/100)),255),0)],e=n(a.hex(`rgba(${t.join(",")},1)`),a.hex(`rgba(${s.join(",")},1)`)),l=s[0]+s[1]+s[2];return 0===l||765===l||e>r?{background:t,foreground:s,contrast:e}:p(t,s,r,i)},u=new Map,g=(t,o,r,a=1)=>{if(u.has(t))return u.get(t);const i=p(t,o,r,a);return u.set(t,i),i},k=(t,o=7)=>{let r=[0,0,0,1],i=[255,255,255,1];"string"==typeof t?(r=f(t),i=r):"object"==typeof t&&null!==t&&"string"==typeof t.background&&"string"==typeof t.foreground&&(r=f(t.background),i="string"==typeof t.foreground?f(t.foreground):r);const s=b(r[0],r[1],r[2]),n=g([r[0],r[1],r[2]],[i[0],i[1],i[2]],o,s);return i=[...n.foreground,1],{background:a.hex(`rgba(${r.join(",")})`),foreground:a.hex(`rgba(${i.join(",")})`),contrast:n.contrast}},m=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host>span{display:inline-flex}:host>span>kol-button-wc{border-left:1px solid rgba(0, 0, 0, 0.25)}:host>span>kol-button-wc button{color:inherit}";r("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const y=/^([a-f0-9]{3}|[a-f0-9]{6})$/,w=class{constructor(t){o(this,t),this.bgColorStr="#000",this.colorStr="#fff",this.handleColorChange=t=>{let o,r=t;"string"==typeof r?(y.test(r)&&(s("[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."),r=`#${r}`),o=k(r)):o=k({background:r.backgroundColor,foreground:r.color}),o.contrast<7&&e(`[KolBadge] The contrast of ${o.contrast} (≥7, AAA) is too low, between the color pair ${o.background} and ${o.foreground}.`),this.bgColorStr=o.background,this.colorStr=o.foreground},this._color="#000",this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._smartButton=void 0,this.state={_color:"#000"}}render(){return t(i,null,t("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},t("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&t("kol-button-wc",{_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_icon:this.state._smartButton._icon,_iconOnly:!0,_id:this.state._smartButton._id,_label:this.state._smartButton._label,_on:this.state._smartButton._on,_tooltipAlign:this.state._smartButton._tooltipAlign,_variant:this.state._smartButton._variant})))}validateColor(t){l(this,"_color",(t=>"string"==typeof t||"object"==typeof t&&null!==t&&"string"==typeof t.backgroundColor&&"string"==typeof t.color),new Set(["string","KoliBriColor"]),t,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(t){c(t,(()=>{try{t=h(t)}catch(t){}d(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}};w.style={default:m};export{w as kol_badge};

package/dist/kolibri/kol-badge.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["getContrastYIQ","r","g","b","yiq","calcColorContrast","baseColor","contrastColor","ratio","dir","color","Math","max","min","round","contrast","hex","rgbaConvert","join","summe","background","foreground","cache","Map","getColorContrast","has","get","set","createContrastColorPair","contrastRatio","colorRgba","colorContrast","defaultStyleCss","featureHint","HACK_REG_EX","KolBadge","this","bgColorStr","colorStr","handleColorChange","value","test","devHint","backgroundColor","a11yHint","_color","render","h","Host","class","state","_smartButton","style","_icon","_iconOnly","_label","_ariaLabel","_customClass","_disabled","_id","_on","_tooltipAlign","_variant","validateColor","watchValidator","Set","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["./src/components/badge/contrast.ts","./src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","./src/components/badge/component.tsx"],"sourcesContent":["import { rgbaConvert } from './rgba-convert';\nimport { hex } from 'wcag-contrast';\nimport { colorRgba } from './color-rgba';\nimport { RGB } from 'color-convert/conversions';\n\ntype RGBA = [number, number, number, number];\n\n// const calcColor = (color: RGBA, diff: number): RGBA => [\n// Math.max(Math.min(Math.round(color[0] + (color[0] / 100 + 1) * diff), 255), 0),\n// Math.max(Math.min(Math.round(color[1] + (color[1] / 100 + 1) * diff), 255), 0),\n// Math.max(Math.min(Math.round(color[2] + (color[2] / 100 + 1) * diff), 255), 0),\n// color[3],\n// ];\n\n// const relativeLuminanceFormel = (c: number): number => {\n// if (c <= 0.03928) {\n// return c / 12.92;\n// } else {\n// return ((c + 0.055) / 1.055) ** 2.4;\n// }\n// };\n// // https://www.w3.org/TR/WCAG20/#contrast-ratiodef\n// const relativeLuminance = (r: number, g: number, b: number): number => {\n// return (\n// 0.2126 * relativeLuminanceFormel(r) + 0.7152 * relativeLuminanceFormel(g) + 0.0722 * relativeLuminanceFormel(b)\n// );\n// };\n\n// https://css-tricks.com/snippets/javascript/random-hex-color/\n// const randomColor = () => Math.floor(Math.random() * 16777215).toString(16);\n\n// https://24ways.org/2010/calculating-color-contrast/\n// ts-prune-ignore-next\nexport const getContrastYIQ = (r: number, g: number, b: number): number => {\n\tconst yiq = (r * 299 + g * 587 + b * 114) / 1000;\n\treturn yiq >= 128 ? -1 : 1;\n};\n\ntype ColorPair<T> = {\n\tbackground: T;\n\tforeground: T;\n};\n\nexport type ColorContrast<T> = ColorPair<T> & {\n\tcontrast: number;\n};\n\n// ts-prune-ignore-next\nexport const calcColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tconst color: RGB = [\n\t\tMath.max(Math.min(Math.round(contrastColor[0] + dir * Math.max(1, contrastColor[0] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[1] + dir * Math.max(1, contrastColor[1] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[2] + dir * Math.max(1, contrastColor[2] / 100)), 255), 0),\n\t];\n\tconst contrast = hex(rgbaConvert.hex(`rgba(${baseColor.join(',')},1)`), rgbaConvert.hex(`rgba(${color.join(',')},1)`));\n\tconst summe = color[0] + color[1] + color[2];\n\tif (summe === 0 \|\| summe === 765 \|\| contrast > ratio) {\n\t\treturn {\n\t\t\tbackground: baseColor,\n\t\t\tforeground: color,\n\t\t\tcontrast,\n\t\t};\n\t} else {\n\t\treturn calcColorContrast(baseColor, color, ratio, dir);\n\t}\n};\n\nconst cache: Map<unknown, ColorContrast<RGB>> = new Map();\n\n// ts-prune-ignore-next\nexport const getColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tif (cache.has(baseColor)) {\n\t\treturn cache.get(baseColor) as ColorContrast<RGB>;\n\t}\n\tconst color = calcColorContrast(baseColor, contrastColor, ratio, dir);\n\tcache.set(baseColor, color);\n\treturn color;\n};\n\nexport const createContrastColorPair = (color: string \| ColorPair<string>, contrastRatio = 7): ColorContrast<string> => {\n\tlet baseColor: RGBA = [0, 0, 0, 1];\n\tlet contrastColor: RGBA = [255, 255, 255, 1];\n\tif (typeof color === 'string') {\n\t\tbaseColor = colorRgba(color);\n\t\tcontrastColor = baseColor;\n\t} else if (typeof color === 'object' && color !== null && typeof color.background === 'string' && typeof color.foreground === 'string') {\n\t\tbaseColor = colorRgba(color.background);\n\t\tif (typeof color.foreground === 'string') {\n\t\t\tcontrastColor = colorRgba(color.foreground);\n\t\t} else {\n\t\t\tcontrastColor = baseColor;\n\t\t}\n\t}\n\tconst yiq = getContrastYIQ(baseColor[0], baseColor[1], baseColor[2]);\n\tconst colorContrast = getColorContrast(\n\t\t[baseColor[0], baseColor[1], baseColor[2]],\n\t\t[contrastColor[0], contrastColor[1], contrastColor[2]],\n\t\tcontrastRatio,\n\t\tyiq\n\t);\n\tcontrastColor = [...colorContrast.foreground, 1];\n\n\treturn {\n\t\tbackground: rgbaConvert.hex(`rgba(${baseColor.join(',')})`),\n\t\tforeground: rgbaConvert.hex(`rgba(${contrastColor.join(',')})`),\n\t\tcontrast: colorContrast.contrast,\n\t};\n};\n","@import '../style.css';\n\n:host > span {\n\tdisplay: inline-flex;\n}\n:host > span > kol-button-wc {\n\tbox-shadow-left: 1px solid rgba(0, 0, 0, 0.25);\n}\n:host > span > kol-button-wc button {\n\tcolor: inherit;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { a11yHint, devHint, featureHint } from '../../utils/a11y.tipps';\nimport { objectObjectHandler, parseJson, setState, watchValidator } from '../../utils/prop.validators';\nimport { ColorContrast, createContrastColorPair } from './contrast';\n\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\nconst HACK_REG_EX = /^([a-f0-9]{3}\|[a-f0-9]{6})$/;\n\nexport type KoliBriColor = {\n\tbackgroundColor: string;\n\tcolor: string;\n};\n\n/*\n API\n /\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\tcolor: Stringified<KoliBriColor>;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\tsmartButton: Stringified<ButtonProps>;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tcolor: Stringified<KoliBriColor>;\n};\ntype OptionalStates = {\n\tsmartButton: ButtonProps;\n};\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements Props {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}></kol-span-wc>\n\t\t\t\t\t{typeof this.state._smartButton === 'object' && this.state._smartButton !== null && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t_ariaLabel={this.state._smartButton._ariaLabel}\n\t\t\t\t\t\t\t_customClass={this.state._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._smartButton._disabled}\n\t\t\t\t\t\t\t_icon={this.state._smartButton._icon}\n\t\t\t\t\t\t\t_iconOnly={true}\n\t\t\t\t\t\t\t_id={this.state._smartButton._id}\n\t\t\t\t\t\t\t_label={this.state._smartButton._label}\n\t\t\t\t\t\t\t_on={this.state._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this.state._smartButton._variant}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt die Farbe des Hintergrundes bzw. der Schrift an.\n\t /\n\t@Prop() public _color?: string \| KoliBriColor = '#000';\n\n\t/\n\t Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/)\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/\n\t Gibt an, ob nur das Icon angezeigt wird.\n\t /\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/\n\t Gibt den Label-Text des Badges an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t /\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_color: '#000',\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tlet color = value as string \| KoliBriColor;\n\t\tlet colorContrast: ColorContrast<string>;\n\t\tif (typeof color === 'string') {\n\t\t\tif (HACK_REG_EX.test(color)) {\n\t\t\t\t// Catch Breaking Change - remove next Major\n\t\t\t\tdevHint(\n\t\t\t\t\t`[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).`\n\t\t\t\t);\n\t\t\t\tcolor = `#${color}`;\n\t\t\t}\n\t\t\tcolorContrast = createContrastColorPair(color);\n\t\t} else {\n\t\t\tcolorContrast = createContrastColorPair({\n\t\t\t\tbackground: color.backgroundColor,\n\t\t\t\tforeground: color.color,\n\t\t\t});\n\t\t}\n\t\tif (colorContrast.contrast < 7) {\n\t\t\ta11yHint(\n\t\t\t\t`[KolBadge] The contrast of ${colorContrast.contrast} (≥7, AAA) is too low, between the color pair ${colorContrast.background} and ${colorContrast.foreground}.`\n\t\t\t);\n\t\t}\n\t\tthis.bgColorStr = colorContrast.background;\n\t\tthis.colorStr = colorContrast.foreground;\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_color')\n\tpublic validateColor(value?: string \| KoliBriColor): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_color',\n\t\t\t(value) =>\n\t\t\t\ttypeof value === 'string' \|\|\n\t\t\t\t(typeof value === 'object' && value !== null && typeof value.backgroundColor === 'string' && typeof value.color === 'string'),\n\t\t\tnew Set(['string', 'KoliBriColor']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: '#000',\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps \| string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["getContrastYIQ","r","g","b","yiq","calcColorContrast","baseColor","contrastColor","ratio","dir","color","Math","max","min","round","contrast","hex","rgbaConvert","join","summe","background","foreground","cache","Map","getColorContrast","has","get","set","createContrastColorPair","contrastRatio","colorRgba","colorContrast","defaultStyleCss","featureHint","HACK_REG_EX","KolBadge","this","bgColorStr","colorStr","handleColorChange","value","test","devHint","backgroundColor","a11yHint","_color","render","h","Host","class","state","_smartButton","style","_icon","_iconOnly","_label","_ariaLabel","_customClass","_disabled","_id","_on","_tooltipAlign","_variant","validateColor","watchValidator","Set","defaultValue","hooks","beforePatch","validateSmartButton","objectObjectHandler","parseJson","e","setState","componentWillLoad"],"sources":["./src/components/badge/contrast.ts","./src/components/badge/style.css?tag=kol-badge&mode=default&encapsulation=shadow","./src/components/badge/component.tsx"],"sourcesContent":["import { rgbaConvert } from './rgba-convert';\nimport { hex } from 'wcag-contrast';\nimport { colorRgba } from './color-rgba';\nimport { RGB } from 'color-convert/conversions';\n\ntype RGBA = [number, number, number, number];\n\n// const calcColor = (color: RGBA, diff: number): RGBA => [\n// Math.max(Math.min(Math.round(color[0] + (color[0] / 100 + 1) * diff), 255), 0),\n// Math.max(Math.min(Math.round(color[1] + (color[1] / 100 + 1) * diff), 255), 0),\n// Math.max(Math.min(Math.round(color[2] + (color[2] / 100 + 1) * diff), 255), 0),\n// color[3],\n// ];\n\n// const relativeLuminanceFormel = (c: number): number => {\n// if (c <= 0.03928) {\n// return c / 12.92;\n// } else {\n// return ((c + 0.055) / 1.055) ** 2.4;\n// }\n// };\n// // https://www.w3.org/TR/WCAG20/#contrast-ratiodef\n// const relativeLuminance = (r: number, g: number, b: number): number => {\n// return (\n// 0.2126 * relativeLuminanceFormel(r) + 0.7152 * relativeLuminanceFormel(g) + 0.0722 * relativeLuminanceFormel(b)\n// );\n// };\n\n// https://css-tricks.com/snippets/javascript/random-hex-color/\n// const randomColor = () => Math.floor(Math.random() * 16777215).toString(16);\n\n// https://24ways.org/2010/calculating-color-contrast/\n// ts-prune-ignore-next\nexport const getContrastYIQ = (r: number, g: number, b: number): number => {\n\tconst yiq = (r * 299 + g * 587 + b * 114) / 1000;\n\treturn yiq >= 128 ? -1 : 1;\n};\n\ntype ColorPair<T> = {\n\tbackground: T;\n\tforeground: T;\n};\n\nexport type ColorContrast<T> = ColorPair<T> & {\n\tcontrast: number;\n};\n\n// ts-prune-ignore-next\nexport const calcColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tconst color: RGB = [\n\t\tMath.max(Math.min(Math.round(contrastColor[0] + dir * Math.max(1, contrastColor[0] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[1] + dir * Math.max(1, contrastColor[1] / 100)), 255), 0),\n\t\tMath.max(Math.min(Math.round(contrastColor[2] + dir * Math.max(1, contrastColor[2] / 100)), 255), 0),\n\t];\n\tconst contrast = hex(rgbaConvert.hex(`rgba(${baseColor.join(',')},1)`), rgbaConvert.hex(`rgba(${color.join(',')},1)`));\n\tconst summe = color[0] + color[1] + color[2];\n\tif (summe === 0 \|\| summe === 765 \|\| contrast > ratio) {\n\t\treturn {\n\t\t\tbackground: baseColor,\n\t\t\tforeground: color,\n\t\t\tcontrast,\n\t\t};\n\t} else {\n\t\treturn calcColorContrast(baseColor, color, ratio, dir);\n\t}\n};\n\nconst cache: Map<unknown, ColorContrast<RGB>> = new Map();\n\n// ts-prune-ignore-next\nexport const getColorContrast = (baseColor: RGB, contrastColor: RGB, ratio: number, dir = 1): ColorContrast<RGB> => {\n\tif (cache.has(baseColor)) {\n\t\treturn cache.get(baseColor) as ColorContrast<RGB>;\n\t}\n\tconst color = calcColorContrast(baseColor, contrastColor, ratio, dir);\n\tcache.set(baseColor, color);\n\treturn color;\n};\n\nexport const createContrastColorPair = (color: string \| ColorPair<string>, contrastRatio = 7): ColorContrast<string> => {\n\tlet baseColor: RGBA = [0, 0, 0, 1];\n\tlet contrastColor: RGBA = [255, 255, 255, 1];\n\tif (typeof color === 'string') {\n\t\tbaseColor = colorRgba(color);\n\t\tcontrastColor = baseColor;\n\t} else if (typeof color === 'object' && color !== null && typeof color.background === 'string' && typeof color.foreground === 'string') {\n\t\tbaseColor = colorRgba(color.background);\n\t\tif (typeof color.foreground === 'string') {\n\t\t\tcontrastColor = colorRgba(color.foreground);\n\t\t} else {\n\t\t\tcontrastColor = baseColor;\n\t\t}\n\t}\n\tconst yiq = getContrastYIQ(baseColor[0], baseColor[1], baseColor[2]);\n\tconst colorContrast = getColorContrast(\n\t\t[baseColor[0], baseColor[1], baseColor[2]],\n\t\t[contrastColor[0], contrastColor[1], contrastColor[2]],\n\t\tcontrastRatio,\n\t\tyiq\n\t);\n\tcontrastColor = [...colorContrast.foreground, 1];\n\n\treturn {\n\t\tbackground: rgbaConvert.hex(`rgba(${baseColor.join(',')})`),\n\t\tforeground: rgbaConvert.hex(`rgba(${contrastColor.join(',')})`),\n\t\tcontrast: colorContrast.contrast,\n\t};\n};\n","@import '../style.css';\n\n:host > span {\n\tdisplay: inline-flex;\n}\n:host > span > kol-button-wc {\n\tborder-left: 1px solid rgba(0, 0, 0, 0.25);\n}\n:host > span > kol-button-wc button {\n\tcolor: inherit;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { a11yHint, devHint, featureHint } from '../../utils/a11y.tipps';\nimport { objectObjectHandler, parseJson, setState, watchValidator } from '../../utils/prop.validators';\nimport { ColorContrast, createContrastColorPair } from './contrast';\n\nfeatureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);\n\nconst HACK_REG_EX = /^([a-f0-9]{3}\|[a-f0-9]{6})$/;\n\nexport type KoliBriColor = {\n\tbackgroundColor: string;\n\tcolor: string;\n};\n\n/*\n API\n /\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\tcolor: Stringified<KoliBriColor>;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\tsmartButton: Stringified<ButtonProps>;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tcolor: Stringified<KoliBriColor>;\n};\ntype OptionalStates = {\n\tsmartButton: ButtonProps;\n};\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-badge',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBadge implements Props {\n\tprivate bgColorStr = '#000';\n\tprivate colorStr = '#fff';\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: this.bgColorStr,\n\t\t\t\t\t\tcolor: this.colorStr,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}></kol-span-wc>\n\t\t\t\t\t{typeof this.state._smartButton === 'object' && this.state._smartButton !== null && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t_ariaLabel={this.state._smartButton._ariaLabel}\n\t\t\t\t\t\t\t_customClass={this.state._smartButton._customClass}\n\t\t\t\t\t\t\t_disabled={this.state._smartButton._disabled}\n\t\t\t\t\t\t\t_icon={this.state._smartButton._icon}\n\t\t\t\t\t\t\t_iconOnly={true}\n\t\t\t\t\t\t\t_id={this.state._smartButton._id}\n\t\t\t\t\t\t\t_label={this.state._smartButton._label}\n\t\t\t\t\t\t\t_on={this.state._smartButton._on}\n\t\t\t\t\t\t\t_tooltipAlign={this.state._smartButton._tooltipAlign}\n\t\t\t\t\t\t\t_variant={this.state._smartButton._variant}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt die Farbe des Hintergrundes bzw. der Schrift an.\n\t /\n\t@Prop() public _color?: string \| KoliBriColor = '#000';\n\n\t/\n\t Gibt einen Identifier eines Icons aus den Icofont's an. (https://icofont.com/)\n\t /\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/\n\t Gibt an, ob nur das Icon angezeigt wird.\n\t /\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/\n\t Gibt den Label-Text des Badges an.\n\t /\n\t@Prop() public _label!: string;\n\n\t/\n\t Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t /\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_color: '#000',\n\t};\n\n\tprivate handleColorChange = (value: unknown) => {\n\t\tlet color = value as string \| KoliBriColor;\n\t\tlet colorContrast: ColorContrast<string>;\n\t\tif (typeof color === 'string') {\n\t\t\tif (HACK_REG_EX.test(color)) {\n\t\t\t\t// Catch Breaking Change - remove next Major\n\t\t\t\tdevHint(\n\t\t\t\t\t`[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).`\n\t\t\t\t);\n\t\t\t\tcolor = `#${color}`;\n\t\t\t}\n\t\t\tcolorContrast = createContrastColorPair(color);\n\t\t} else {\n\t\t\tcolorContrast = createContrastColorPair({\n\t\t\t\tbackground: color.backgroundColor,\n\t\t\t\tforeground: color.color,\n\t\t\t});\n\t\t}\n\t\tif (colorContrast.contrast < 7) {\n\t\t\ta11yHint(\n\t\t\t\t`[KolBadge] The contrast of ${colorContrast.contrast} (≥7, AAA) is too low, between the color pair ${colorContrast.background} and ${colorContrast.foreground}.`\n\t\t\t);\n\t\t}\n\t\tthis.bgColorStr = colorContrast.background;\n\t\tthis.colorStr = colorContrast.foreground;\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_color')\n\tpublic validateColor(value?: string \| KoliBriColor): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_color',\n\t\t\t(value) =>\n\t\t\t\ttypeof value === 'string' \|\|\n\t\t\t\t(typeof value === 'object' && value !== null && typeof value.backgroundColor === 'string' && typeof value.color === 'string'),\n\t\t\tnew Set(['string', 'KoliBriColor']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: '#000',\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps \| string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this, '_smartButton', value);\n\t\t});\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateSmartButton(this._smartButton);\n\t}\n}\n"],"mappings":"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"}

package/dist/kolibri/kol-breadcrumb.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,F as r,H as a}from"./index-0dce65d2.js";import{b as l}from"./a11y.tipps-353a7f35.js";import{w as e}from"./prop.validators-a08ab31d.js";import{w as s}from"./validation-c5d00cca.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";import"./index-c40aa715.js";const t=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}",n=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){const i=this.state._links.length-1;return o(a,null,o("nav",{"aria-label":this.state._ariaLabel},o("ul",null,0===this.state._links.length&&o("li",null,o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-house"}),"…"),this.state._links.map(((a,l)=>o("li",{key:l},0!==l&&o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-right",_part:"separator",exportparts:"separator"}),l===i?o("span",null,a._iconOnly?o("kol-icon",{_ariaLabel:a._label,_icon:"string"==typeof a._icon?a._icon:"fa-solid fa-link-slash"}):o(r,null,a._label)):o("kol-link",Object.assign({exportparts:"link",_useCase:"nav"},a,{_ariaLabel:a._label}),a._label)))))))}validateAriaLabel(i){e(this,"_ariaLabel",i,{required:!0}),l(i)}validateLinks(i){s("KolBreadcrumb",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};n.style={default:t};export{n as kol_breadcrumb};
+import{r as i,h as o,F as r,H as a}from"./index-50adf9a0.js";import{b as e}from"./a11y.tipps-353a7f35.js";import{w as l}from"./prop.validators-88dff60e.js";import{w as t}from"./validation-29598b1e.js";import"./dev.utils-3ec9f837.js";import"./reuse-2b3b6999.js";import"./index-599f5430.js";const s=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;place-items:center start}:host kol-icon[exportparts*='separator']{padding:0 0.5rem}:host kol-icon::part(icon separator){font-weight:900;font-size:0.875rem}:host kol-icon::part(icon separator)::before{color:black;content:'\\f054';font-family:'Font Awesome 6 Free'}",n=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){const i=this.state._links.length-1;return o(a,null,o("nav",{"aria-label":this.state._ariaLabel},o("ul",null,0===this.state._links.length&&o("li",null,o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-house"}),"…"),this.state._links.map(((a,l)=>o("li",{key:l},0!==l&&o("kol-icon",{_ariaLabel:"",_icon:"fa-solid fa-angle-right",_part:"separator",exportparts:"separator"}),l===i?o("span",null,a._iconOnly?o("kol-icon",{_ariaLabel:a._label,_icon:"string"==typeof a._icon?a._icon:"fa-solid fa-link-slash"}):o(r,null,a._label)):o("kol-link",Object.assign({exportparts:"link",_useCase:"nav"},a,{_ariaLabel:a._label}),a._label)))))))}validateAriaLabel(i){l(this,"_ariaLabel",i,{required:!0}),e(i)}validateLinks(i){t("KolBreadcrumb",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};n.style={default:s};export{n as kol_breadcrumb};

package/dist/kolibri/kol-breadcrumb.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","KolBreadcrumb","_ariaLabel","_links","render","lastIndex","this","state","length","h","Host","_icon","map","link","index","key","_part","exportparts","_iconOnly","_label","Fragment","Object","assign","_useCase","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","./src/components/breadcrumb/component.tsx"],"sourcesContent":["@import '../style.css';\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\n\n/*\n API\n /\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part link - Ermöglicht das Stylen der Links.\n * @part separator - Ermöglicht das Ändern des Separator-Icons.\n /\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-house\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map((link, index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t{index !== 0 && <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-right\" _part=\"separator\" exportparts=\"separator\" />}\n\t\t\t\t\t\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t{link._iconOnly ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<kol-icon _ariaLabel={link._label} _icon={typeof link._icon === 'string' ? link._icon : 'fa-solid fa-link-slash'} />\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<kol-link exportparts=\"link\" _useCase=\"nav\" {...link} _ariaLabel={link._label}>\n\t\t\t\t\t\t\t\t\t\t\t{link._label}\n\t\t\t\t\t\t\t\t\t\t</kol-link>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t /\n\t@Prop() public _ariaLabel!: string;\n\n\t/\n\t Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t /\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;iSAAA,MAAMA,EAAkB,~~qmC~~,MCqCXC,EAAa,M,oFAmDO,CAC/BC,WAAY,IACZC,OAAQ,G,CApDFC,SACN,MAAMC,EAAYC,KAAKC,MAAMJ,OAAOK,OAAS,EAC7C,OACCC,EAACC,EAAI,KACJD,EAAA,oBAAiBH,KAAKC,MAAML,YAC3BO,EAAA,UACEH,KAAKC,MAAMJ,OAAOK,SAAW,GAC7BC,EAAA,UACCA,EAAA,YAAUP,WAAW,GAAGS,MAAM,sBAAsB,KAGrDL,KAAKC,MAAMJ,OAAOS,KAAI,CAACC,EAAMC,IAE5BL,EAAA,MAAIM,IAAKD,GACPA,IAAU,GAAKL,EAAA,YAAUP,WAAW,GAAGS,MAAM,0BAA0BK,MAAM,YAAYC,YAAY,cACrGH,IAAUT,EACVI,EAAA,YACEI,EAAKK,UACLT,EAAA,YAAUP,WAAYW,EAAKM,OAAQR,aAAcE,EAAKF,QAAU,SAAWE,EAAKF,MAAQ,2BAExFF,EAACW,EAAQ,KAAEP,EAAKM,SAIlBV,EAAA,WAAAY,OAAAC,OAAA,CAAUL,YAAY,OAAOM,SAAS,OAAUV,EAAI,CAAEX,WAAYW,EAAKM,SACrEN,EAAKM,a,CAkCTK,kBAAkBC,GACxBC,EAAYpB,KAAM,aAAcmB,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAOpBI,cAAcJ,GACpBK,EAAc,gBAAiBxB,KAAMmB,E,CAM/BM,oBACNzB,KAAKkB,kBAAkBlB,KAAKJ,YAC5BI,KAAKuB,cAAcvB,KAAKH,O"}
1	+ {"version":3,"names":["defaultStyleCss","KolBreadcrumb","_ariaLabel","_links","render","lastIndex","this","state","length","h","Host","_icon","map","link","index","key","_part","exportparts","_iconOnly","_label","Fragment","Object","assign","_useCase","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","./src/components/breadcrumb/component.tsx"],"sourcesContent":["@import '../style.css';\n\nul {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tplace-items: center start;\n}\n:host kol-icon[exportparts='separator'] {\n\tpadding: 0 0.5rem;\n}\n:host kol-icon::part(icon separator) {\n\tfont-weight: 900;\n\tfont-size: 0.875rem;\n}\n:host kol-icon::part(icon separator)::before {\n\tcolor: black;\n\tcontent: '\\f054';\n\tfont-family: 'Font Awesome 6 Free';\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { NavLinkProps } from '../link/component';\nimport { watchNavLinks } from '../nav/validation';\n\n/\n API\n /\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<NavLinkProps[]>;\n};\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: NavLinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/\n @part link - Ermöglicht das Stylen der Links.\n * @part separator - Ermöglicht das Ändern des Separator-Icons.\n /\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-house\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map((link, index: number) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t\t{index !== 0 && <kol-icon _ariaLabel=\"\" _icon=\"fa-solid fa-angle-right\" _part=\"separator\" exportparts=\"separator\" />}\n\t\t\t\t\t\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t{link._iconOnly ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<kol-icon _ariaLabel={link._label} _icon={typeof link._icon === 'string' ? link._icon : 'fa-solid fa-link-slash'} />\n\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<kol-link exportparts=\"link\" _useCase=\"nav\" {...link} _ariaLabel={link._label}>\n\t\t\t\t\t\t\t\t\t\t\t{link._label}\n\t\t\t\t\t\t\t\t\t\t</kol-link>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t /\n\t@Prop() public _ariaLabel!: string;\n\n\t/\n\t Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t /\n\t@Prop() public _links!: Stringified<NavLinkProps[]>;\n\n\t/\n\t @see: components/abbr/component.tsx (@State)\n\t /\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t /\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<NavLinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;iSAAA,MAAMA,EAAkB,i9C,MCqCXC,EAAa,M,oFAmDO,CAC/BC,WAAY,IACZC,OAAQ,G,CApDFC,SACN,MAAMC,EAAYC,KAAKC,MAAMJ,OAAOK,OAAS,EAC7C,OACCC,EAACC,EAAI,KACJD,EAAA,oBAAiBH,KAAKC,MAAML,YAC3BO,EAAA,UACEH,KAAKC,MAAMJ,OAAOK,SAAW,GAC7BC,EAAA,UACCA,EAAA,YAAUP,WAAW,GAAGS,MAAM,sBAAsB,KAGrDL,KAAKC,MAAMJ,OAAOS,KAAI,CAACC,EAAMC,IAE5BL,EAAA,MAAIM,IAAKD,GACPA,IAAU,GAAKL,EAAA,YAAUP,WAAW,GAAGS,MAAM,0BAA0BK,MAAM,YAAYC,YAAY,cACrGH,IAAUT,EACVI,EAAA,YACEI,EAAKK,UACLT,EAAA,YAAUP,WAAYW,EAAKM,OAAQR,aAAcE,EAAKF,QAAU,SAAWE,EAAKF,MAAQ,2BAExFF,EAACW,EAAQ,KAAEP,EAAKM,SAIlBV,EAAA,WAAAY,OAAAC,OAAA,CAAUL,YAAY,OAAOM,SAAS,OAAUV,EAAI,CAAEX,WAAYW,EAAKM,SACrEN,EAAKM,a,CAkCTK,kBAAkBC,GACxBC,EAAYpB,KAAM,aAAcmB,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAOpBI,cAAcJ,GACpBK,EAAc,gBAAiBxB,KAAMmB,E,CAM/BM,oBACNzB,KAAKkB,kBAAkBlB,KAAKJ,YAC5BI,KAAKuB,cAAcvB,KAAKH,O"}

package/dist/kolibri/kol-button-group-wc.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r,h as s,H as t}from"./index-0dce65d2.js";const o=class{constructor(s){r(this,s),this.state={}}render(){return s(t,null,s("slot",null))}};export{o as kol_button_group_wc};
+import{r,h as s,H as t}from"./index-50adf9a0.js";const o=class{constructor(s){r(this,s),this.state={}}render(){return s(t,null,s("slot",null))}};export{o as kol_button_group_wc};

package/dist/kolibri/kol-button-group.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as o,h as r,H as i}from"./index-0dce65d2.js";const l=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host>kol-button-group-wc{display:inline-flex;flex-wrap:wrap;gap:calc(2 * var(--kolibri-spacing))}",e=class{constructor(r){o(this,r)}render(){return r(i,null,r("kol-button-group-wc",null,r("slot",null)))}};e.style={default:l};export{e as kol_button_group};
+import{r as o,h as r,H as i}from"./index-50adf9a0.js";const l=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host>kol-button-group-wc{display:inline-flex;flex-wrap:wrap;gap:calc(2 * var(--kolibri-spacing))}",a=class{constructor(r){o(this,r)}render(){return r(i,null,r("kol-button-group-wc",null,r("slot",null)))}};a.style={default:l};export{a as kol_button_group};

package/dist/kolibri/kol-button-group.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["defaultStyleCss","KolButtonGroup","render","h","Host"],"sources":["./src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","./src/components/button-group/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n\tgap: calc(2 * var(--kolibri-spacing));\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,~~usC~~,MCWXC,EAAc,M,yBACnBC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,2BACCA,EAAA,c"}
1	+ {"version":3,"names":["defaultStyleCss","KolButtonGroup","render","h","Host"],"sources":["./src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","./src/components/button-group/shadow.tsx"],"sourcesContent":["@import '../style.css';\n\n:host > kol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n\tgap: calc(2 * var(--kolibri-spacing));\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\n\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;sDAAA,MAAMA,EAAkB,0uC,MCWXC,EAAc,M,yBACnBC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,2BACCA,EAAA,c"}

package/dist/kolibri/kol-button-link.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as o,H as e,g as t}from"./index-0dce65d2.js";import{a as r}from"./reuse-2b3b6999.js";const n=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{box-sizing:border-box;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}:host>kol-link-wc a{display:inline-flex;gap:0.25rem;place-items:center;text-decoration:none}button{background-color:transparent}a,button{background-image:repeating-linear-gradient(to right, #66ddec, #66ddec);background-repeat:no-repeat;background-position:left 0 bottom 0;background-size:25% 0.25ex;border-radius:var(--spacing);color:var(--color-petrol);font-family:var(--font-family-sans);font-size:inherit;text-transform:uppercase;transition-delay:0;transition-timing-function:ease-in-out;transition-duration:0.5s;transition-property:background-color, border-color, color}a:focus,a:hover,button:focus,button:hover{background-size:100% 0.25ex;color:var(--color-achat)}a>kol-span-wc,button>kol-span-wc{gap:0.25em}.hidden{display:none;visibility:hidden}a.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999}a.skip:focus{background-color:white;box-shadow:0 0 0.5rem 0.5rem white;left:unset;position:unset}",s=class{constructor(o){i(this,o),this.catchRef=i=>{this.ref=i,r(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._disabled=!1,this._icon=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}render(){return o(e,null,o("kol-button-wc",{ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icon:this._icon,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},o("slot",{name:"expert",slot:"expert"})))}get host(){return t(this)}};s.style={default:n};export{s as kol_button_link};
+import{r as i,h as o,H as e,g as t}from"./index-50adf9a0.js";import{a as n}from"./reuse-2b3b6999.js";const r=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}a,button,input,select,textarea{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}kol-link-wc,kol-link-button-wc{display:inline-block}kol-link-wc a,kol-button-wc button{background-color:transparent;display:inline-flex;font-size:inherit;gap:var(--kolibri-spacing);place-items:center;text-decoration-line:underline}a:focus,a:hover,button:focus,button:hover{text-decoration-thickness:0.2em}kol-icon{padding:0 var(--kolibri-spacing);display:inline-block}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:white;box-shadow:0 0 calc(2 * var(--kolibri-spacing)) calc(2 * var(--kolibri-spacing)) white;left:unset;position:unset}",s=class{constructor(o){i(this,o),this.catchRef=i=>{this.ref=i,n(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._disabled=!1,this._icon=void 0,this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}render(){return o(e,null,o("kol-button-wc",{ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icon:this._icon,_iconOnly:this._iconOnly,_id:this._id,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},o("slot",{name:"expert",slot:"expert"})))}get host(){return t(this)}};s.style={default:r};export{s as kol_button_link};