npm - @public-ui/components - Versions diffs - 2.1.8-rc.0 → 2.1.9-rc.0 - Mend

@public-ui/components 2.1.8-rc.0 → 2.1.9-rc.0

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 (717) hide show

package/dist/components/devtools.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{i as initKoliBri,r as renderDevAdvice}from"./dev.utils2.js";import{e as getDevMode,g as getDocument,L as Log,a as getExperimentalMode,f as getColorContrastAnalysis,d as getWindow}from"./dev.utils.js";import{C as koliBriA11yColorContrast,B as koliBriQuerySelector,D as koliBriQuerySelectorAll,E as koliBriQuerySelectorColors,F as KoliBriUtils,p as parseJson,G as stringifyJson}from"./prop.validators.js";const getKoliBri=()=>{let e=getWindow().KoliBri;return void 0===e&&(e={},Object.defineProperty(getWindow(),"KoliBri",{value:e,writable:!1})),e};function prototypeKoliBri(e,t){try{Object.defineProperty(getKoliBri(),e,{get:function(){return t}})}catch(t){Log.debug(`KoliBri property ${e} is already bind.`)}}const metaModeLog=(e,t)=>Log.debug(`${e} ${t?"":"not "}activated`),initialize=()=>{if(initKoliBri(),getDevMode()){renderDevAdvice(),prototypeKoliBri("a11yColorContrast",koliBriA11yColorContrast),prototypeKoliBri("querySelector",koliBriQuerySelector),prototypeKoliBri("querySelectorAll",koliBriQuerySelectorAll),prototypeKoliBri("querySelectorColors",koliBriQuerySelectorColors),prototypeKoliBri("utils",(function(){return KoliBriUtils})),prototypeKoliBri("parseJson",parseJson),prototypeKoliBri("stringifyJson",stringifyJson);const e=getDocument().body,t=getDocument().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',getDocument().body.appendChild(t),metaModeLog("Development mode",getDevMode()),metaModeLog("Experimental mode",getExperimentalMode()),metaModeLog("Color contrast analysis",getColorContrastAnalysis()),getColorContrastAnalysis()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{KoliBriUtils.queryHtmlElementColors(getDocument().createElement("div"),koliBriA11yColorContrast(e),!1,!1)}),1e4)}),2500)}}};export{initialize};
+import{i as initKoliBri,r as renderDevAdvice}from"./dev.utils2.js";import{e as getDevMode,g as getDocument,L as Log,a as getExperimentalMode,f as getColorContrastAnalysis,d as getWindow}from"./dev.utils.js";import{C as koliBriA11yColorContrast,B as koliBriQuerySelector,D as koliBriQuerySelectorAll,E as koliBriQuerySelectorColors,F as KoliBriUtils,p as parseJson,H as stringifyJson}from"./prop.validators.js";const getKoliBri=()=>{let e=getWindow().KoliBri;return void 0===e&&(e={},Object.defineProperty(getWindow(),"KoliBri",{value:e,writable:!1})),e};function prototypeKoliBri(e,t){try{Object.defineProperty(getKoliBri(),e,{get:function(){return t}})}catch(t){Log.debug(`KoliBri property ${e} is already bind.`)}}const metaModeLog=(e,t)=>Log.debug(`${e} ${t?"":"not "}activated`),initialize=()=>{if(initKoliBri(),getDevMode()){renderDevAdvice(),prototypeKoliBri("a11yColorContrast",koliBriA11yColorContrast),prototypeKoliBri("querySelector",koliBriQuerySelector),prototypeKoliBri("querySelectorAll",koliBriQuerySelectorAll),prototypeKoliBri("querySelectorColors",koliBriQuerySelectorColors),prototypeKoliBri("utils",(function(){return KoliBriUtils})),prototypeKoliBri("parseJson",parseJson),prototypeKoliBri("stringifyJson",stringifyJson);const e=getDocument().body,t=getDocument().createElement("svg");if(t.setAttribute("aria-label","KoliBri-DevTools"),t.setAttribute("xmlns","http://www.w3.org/2000/svg"),t.setAttribute("role","toolbar"),t.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),t.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',getDocument().body.appendChild(t),metaModeLog("Development mode",getDevMode()),metaModeLog("Experimental mode",getExperimentalMode()),metaModeLog("Color contrast analysis",getColorContrastAnalysis()),getColorContrastAnalysis()){const t=setTimeout((()=>{clearTimeout(t),setInterval((()=>{KoliBriUtils.queryHtmlElementColors(getDocument().createElement("div"),koliBriA11yColorContrast(e),!1,!1)}),1e4)}),2500)}}};export{initialize};

package/dist/components/events2.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{w as watchValidator,A as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,b as setState}from"./prop.validators.js";import{b as isObject}from"./common.js";const validateTableCallbacks=(e,o)=>{watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),o)},validateTableStatefulCallbacks=(e,o)=>{watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),o)},validateTableData=(e,o,a)=>{emptyStringByArrayHandler(o,(()=>{objectObjectHandler(o,(()=>{void 0===o&&(o=[]);try{o=parseJson(o)}catch(e){}Array.isArray(o)&&o.every((e=>"object"==typeof e&&null!==e))&&setState(e,"_data",o,a)}))}))},validateTableDataFoot=(e,o,a)=>{emptyStringByArrayHandler(o,(()=>{objectObjectHandler(o,(()=>{void 0===o&&(o=[]);try{o=parseJson(o)}catch(e){}Array.isArray(o)&&o.every((e=>"object"==typeof e&&null!==e))&&setState(e,"_dataFoot",o,a)}))}))},validateTableSelection=(e,o)=>{(e=>e&&isObject(e)&&"function"==typeof e.label&&(!e.selectedKeys||Array.isArray(e.selectedKeys)))("string"==typeof o?(()=>{try{return parseJson(o)}catch(e){return}})():o)&&setState(e,"_selection",o)};var Events;!function(e){e.onBlur="onBlur",e.onChange="onChange",e.onClick="onClick",e.onDblClick="onDblClick",e.onFocus="onFocus",e.onInput="onInput",e.onKeyDown="onKeyDown",e.onKeyPress="onKeyPress",e.onKeyUp="onKeyUp",e.onMouseDown="onMouseDown",e.onMouseMove="onMouseMove",e.onMouseOut="onMouseOut",e.onMouseOver="onMouseOver",e.onMouseUp="onMouseUp",e.onReset="onReset",e.onSelect="onSelect",e.onSort="onSort",e.onSelectionChange="onSelectionChange",e.onSubmit="onSubmit",e.onClose="onClose"}(Events||(Events={}));export{Events as E,validateTableDataFoot as a,validateTableSelection as b,validateTableStatefulCallbacks as c,validateTableCallbacks as d,validateTableData as v};
+import{w as watchValidator,A as emptyStringByArrayHandler,g as objectObjectHandler,p as parseJson,b as setState}from"./prop.validators.js";import{b as isObject}from"./common.js";const validateTableCallbacks=(e,a)=>{watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["TableCallbacksPropType {Events.onSort, Events.onSelectionChange}"]),a)},validateTableStatefulCallbacks=(e,a)=>{watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["TableStatefulCallbacksPropType {Events.onSelectionChange}"]),a)},validateTableData=(e,a,o)=>{emptyStringByArrayHandler(a,(()=>{objectObjectHandler(a,(()=>{void 0===a&&(a=[]);try{a=parseJson(a)}catch(e){}Array.isArray(a)&&a.every((e=>"object"==typeof e&&null!==e))&&setState(e,"_data",a,o)}))}))},validateTableDataFoot=(e,a,o)=>{emptyStringByArrayHandler(a,(()=>{objectObjectHandler(a,(()=>{void 0===a&&(a=[]);try{a=parseJson(a)}catch(e){}Array.isArray(a)&&a.every((e=>"object"==typeof e&&null!==e))&&setState(e,"_dataFoot",a,o)}))}))},validateTableSelection=(e,a)=>{(e=>e&&isObject(e)&&"function"==typeof e.label&&(!e.selectedKeys||Array.isArray(e.selectedKeys)))("string"==typeof a?(()=>{try{return parseJson(a)}catch(e){return}})():a)&&setState(e,"_selection",a)};var Events;!function(e){e.onBlur="onBlur",e.onChange="onChange",e.onClick="onClick",e.onDblClick="onDblClick",e.onFocus="onFocus",e.onInput="onInput",e.onKeyDown="onKeyDown",e.onKeyPress="onKeyPress",e.onKeyUp="onKeyUp",e.onMouseDown="onMouseDown",e.onMouseMove="onMouseMove",e.onMouseOut="onMouseOut",e.onMouseOver="onMouseOver",e.onMouseUp="onMouseUp",e.onReset="onReset",e.onSelect="onSelect",e.onSort="onSort",e.onSelectionChange="onSelectionChange",e.onSubmit="onSubmit",e.onClose="onClose"}(Events||(Events={}));export{Events as E,validateTableDataFoot as a,validateTableSelection as b,validateTableStatefulCallbacks as c,validateTableCallbacks as d,validateTableData as v};

package/dist/components/icons.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{o as objectObjectHandler,p as parseJson,w as watchValidator}from"./prop.validators.js";import{i as isString,a as isStyle,b as isObject}from"./common.js";const mapCustomIcon=(t,o,i)=>{isObject(i)?t[o]=i:isString(i,1)&&(t[o]={icon:i})},mapIconProp2State=t=>{let o={};return isString(t,1)?o={left:{icon:t}}:"object"==typeof t&&null!==t&&(mapCustomIcon(o,"top",t.top),mapCustomIcon(o,"right",t.right),mapCustomIcon(o,"bottom",t.bottom),mapCustomIcon(o,"left",t.left)),o},beforePatchIcon=t=>{var o,i,e;if(null===(o=t.nextState)||void 0===o?void 0:o.has("_icons")){const o=null===(i=t.nextState)||void 0===i?void 0:i.get("_icons");null===(e=t.nextState)||void 0===e||e.set("_icons",mapIconProp2State(o))}},isIcon=t=>"object"==typeof t&&null!==t&&(void 0===t.style||isStyle(t.style))&&(void 0===t.label||isString(t.label))&&isString(t.icon,1),validateIcons=(t,o,i={})=>{objectObjectHandler(o,(()=>{var e;try{o=parseJson(o)}catch(t){}watchValidator(t,"_icons",(t=>{const o="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||o||isString(t,1)||"object"==typeof t&&null!==t&&(isString(t.left,1)||isIcon(t.left)||isString(t.right,1)||isIcon(t.right)||isString(t.top,1)||isIcon(t.top)||isString(t.bottom,1)||isIcon(t.bottom))}),new Set(["KoliBriIcon"]),o,Object.assign(Object.assign({},i),{defaultValue:{},hooks:{afterPatch:null===(e=i.hooks)||void 0===e?void 0:e.afterPatch,beforePatch:(t,o,e,n)=>{var s,a;"function"==typeof(null===(s=i.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(a=i.hooks)||void 0===a||a.beforePatch(t,o,e,n)),beforePatchIcon(e)}}}))}))};export{isIcon as i,validateIcons as v};
+import{g as objectObjectHandler,p as parseJson,w as watchValidator}from"./prop.validators.js";import{i as isString,a as isStyle,b as isObject}from"./common.js";const mapCustomIcon=(t,o,i)=>{isObject(i)?t[o]=i:isString(i,1)&&(t[o]={icon:i})},mapIconProp2State=t=>{let o={};return isString(t,1)?o={left:{icon:t}}:"object"==typeof t&&null!==t&&(mapCustomIcon(o,"top",t.top),mapCustomIcon(o,"right",t.right),mapCustomIcon(o,"bottom",t.bottom),mapCustomIcon(o,"left",t.left)),o},beforePatchIcon=t=>{var o,i,e;if(null===(o=t.nextState)||void 0===o?void 0:o.has("_icons")){const o=null===(i=t.nextState)||void 0===i?void 0:i.get("_icons");null===(e=t.nextState)||void 0===e||e.set("_icons",mapIconProp2State(o))}},isIcon=t=>"object"==typeof t&&null!==t&&(void 0===t.style||isStyle(t.style))&&(void 0===t.label||isString(t.label))&&isString(t.icon,1),validateIcons=(t,o,i={})=>{objectObjectHandler(o,(()=>{var e;try{o=parseJson(o)}catch(t){}watchValidator(t,"_icons",(t=>{const o="object"==typeof t&&null!==t&&0===Object.keys(t).length;return null===t||o||isString(t,1)||"object"==typeof t&&null!==t&&(isString(t.left,1)||isIcon(t.left)||isString(t.right,1)||isIcon(t.right)||isString(t.top,1)||isIcon(t.top)||isString(t.bottom,1)||isIcon(t.bottom))}),new Set(["KoliBriIcon"]),o,Object.assign(Object.assign({},i),{defaultValue:{},hooks:{afterPatch:null===(e=i.hooks)||void 0===e?void 0:e.afterPatch,beforePatch:(t,o,e,n)=>{var s,a;"function"==typeof(null===(s=i.hooks)||void 0===s?void 0:s.beforePatch)&&(null===(a=i.hooks)||void 0===a||a.beforePatch(t,o,e,n)),beforePatchIcon(e)}}}))}))};export{isIcon as i,validateIcons as v};

package/dist/components/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{T as Theme,s as setThemeStyle,g as getThemeDetails,r as register$1}from"./prop.validators.js";export{K as KoliBriDevHelper}from"./prop.validators.js";import{setMode}from"@stencil/core/internal/client";export{getAssetPath,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";import{L as Log,s as setDevMode}from"./dev.utils.js";export{s as setCurrentLocation}from"./ariaCurrentService.js";import{s as setCustomTagNames,K as KolToastContainerTag}from"./component-names.js";import{i as initializeI18n}from"./i18n.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.js";var KeyEnum,TagEnum;!function(t){t[t.error=0]="error",t[t.warning=1]="warning",t[t.info=2]="info",t[t.success=3]="success",t[t.message=4]="message",t[t.close=5]="close",t[t["form-description"]=6]="form-description",t[t.of=7]="of",t[t.characters=8]="characters",t[t.new=9]="new",t[t["no-entries"]=10]="no-entries",t[t["change-order"]=11]="change-order",t[t["action-running"]=12]="action-running",t[t["action-done"]=13]="action-done",t[t["page-first"]=14]="page-first",t[t["page-back"]=15]="page-back",t[t["page-next"]=16]="page-next",t[t["page-last"]=17]="page-last",t[t["entries-per-site"]=18]="entries-per-site",t[t["page-current"]=19]="page-current",t[t["page-selected"]=20]="page-selected",t[t["page-per-site"]=21]="page-per-site",t[t["logo-description"]=22]="logo-description",t[t["open-link-in-tab"]=23]="open-link-in-tab",t[t["kolibri-logo"]=24]="kolibri-logo"}(KeyEnum||(KeyEnum={})),function(t){t[t.abbr=0]="abbr",t[t.accordion=1]="accordion",t[t["accordion-group"]=2]="accordion-group",t[t.alert=3]="alert",t[t.avatar=4]="avatar",t[t.badge=5]="badge",t[t.breadcrumb=6]="breadcrumb",t[t.button=7]="button",t[t["button-group"]=8]="button-group",t[t["button-link"]=9]="button-link",t[t.card=10]="card",t[t.combobox=11]="combobox",t[t.details=12]="details",t[t.drawer=13]="drawer",t[t.form=14]="form",t[t.heading=15]="heading",t[t.icon=16]="icon",t[t.image=17]="image",t[t["indented-text"]=18]="indented-text",t[t["input-checkbox"]=19]="input-checkbox",t[t["input-color"]=20]="input-color",t[t["input-date"]=21]="input-date",t[t["input-email"]=22]="input-email",t[t["input-file"]=23]="input-file",t[t["input-number"]=24]="input-number",t[t["input-password"]=25]="input-password",t[t["input-radio"]=26]="input-radio",t[t["input-range"]=27]="input-range",t[t["input-text"]=28]="input-text",t[t.kolibri=29]="kolibri",t[t.link=30]="link",t[t["link-button"]=31]="link-button",t[t["link-group"]=32]="link-group",t[t.logo=33]="logo",t[t.modal=34]="modal",t[t.nav=35]="nav",t[t.pagination=36]="pagination",t[t.progress=37]="progress",t[t.select=38]="select",t[t.separator=39]="separator",t[t["skip-nav"]=40]="skip-nav",t[t.spin=41]="spin",t[t["single-select"]=42]="single-select",t[t["split-button"]=43]="split-button",t[t.symbol=44]="symbol",t[t.table=45]="table",t[t["table-stateless"]=46]="table-stateless",t[t["table-stateful"]=47]="table-stateful",t[t.tabs=48]="tabs",t[t.textarea=49]="textarea",t[t["toast-container"]=50]="toast-container",t[t.toolbar=51]="toolbar",t[t.tooltip=52]="tooltip",t[t.tree=53]="tree",t[t["tree-item"]=54]="tree-item"}(TagEnum||(TagEnum={}));const KoliBri=new Theme("kol",KeyEnum,TagEnum);setMode((t=>{try{t.shadowRoot instanceof ShadowRoot&&setThemeStyle(t,getThemeDetails(t))}catch(t){}return"default"})),import("./devtools.js").then((t=>{"object"==typeof t&&null!==t&&"function"==typeof t.initialize&&t.initialize()})).catch((t=>{Log.error(t)}));const globalFn=()=>{},appGlobalScript=globalFn,globalScripts=appGlobalScript;let initialized=!1;const bootstrap=async(t,e,o)=>{var i,n;setDevMode("development"===(null==o?void 0:o.environment)),initializeI18n(null!==(n=null===(i=null==o?void 0:o.translation)||void 0===i?void 0:i.name)&&void 0!==n?n:"de",null==o?void 0:o.translations),(null==o?void 0:o.transformTagName)&&setCustomTagNames(null==o?void 0:o.transformTagName);const a=await register$1(t,e,o);return initialized=!0,a},register=bootstrap,isInitialized=()=>initialized;class ToasterService{constructor(t,e){this.document=t,this.options=e,this.toastContainerElement=this.document.createElement(KolToastContainerTag),this.document.body.prepend(this.toastContainerElement)}static getInstance(t,e){if(!isInitialized())throw new Error("Toaster: Call KoliBri bootstrap/register method first.");let o=this.instances.get(t);return o||(o=new ToasterService(t,e),this.instances.set(t,o)),o}dispose(){const t=this.toastContainerElement;t?(this.toastContainerElement=void 0,t.remove()):Log.warn("Toaster service is already disposed.",{forceLog:!0})}enqueue(t){var e,o;if(this.toastContainerElement&&"function"==typeof this.toastContainerElement.enqueue)return!t.alertVariant&&(null===(e=this.options)||void 0===e?void 0:e.defaultAlertVariant)&&(t.alertVariant=null===(o=this.options)||void 0===o?void 0:o.defaultAlertVariant),this.toastContainerElement.enqueue(t)}closeAll(t=!1){this.toastContainerElement&&"function"==typeof this.toastContainerElement.closeAll&&this.toastContainerElement.closeAll(t)}}ToasterService.instances=new Map,globalScripts();export{KoliBri,ToasterService,bootstrap,isInitialized,register};
+import{o as oe,s as se,j,G}from"./prop.validators.js";export{K as KoliBriDevHelper}from"./prop.validators.js";import{setMode}from"@stencil/core/internal/client";export{getAssetPath,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";import{L as Log,s as setDevMode}from"./dev.utils.js";export{s as setCurrentLocation}from"./ariaCurrentService.js";import{s as setCustomTagNames,K as KolToastContainerTag}from"./component-names.js";import{i as initializeI18n}from"./i18n.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.js";var KeyEnum,TagEnum;!function(t){t[t.error=0]="error",t[t.warning=1]="warning",t[t.info=2]="info",t[t.success=3]="success",t[t.message=4]="message",t[t.close=5]="close",t[t["form-description"]=6]="form-description",t[t.of=7]="of",t[t.characters=8]="characters",t[t.new=9]="new",t[t["no-entries"]=10]="no-entries",t[t["change-order"]=11]="change-order",t[t["action-running"]=12]="action-running",t[t["action-done"]=13]="action-done",t[t["page-first"]=14]="page-first",t[t["page-back"]=15]="page-back",t[t["page-next"]=16]="page-next",t[t["page-last"]=17]="page-last",t[t["entries-per-site"]=18]="entries-per-site",t[t["page-current"]=19]="page-current",t[t["page-selected"]=20]="page-selected",t[t["page-per-site"]=21]="page-per-site",t[t["logo-description"]=22]="logo-description",t[t["open-link-in-tab"]=23]="open-link-in-tab",t[t["kolibri-logo"]=24]="kolibri-logo"}(KeyEnum||(KeyEnum={})),function(t){t[t.abbr=0]="abbr",t[t.accordion=1]="accordion",t[t["accordion-group"]=2]="accordion-group",t[t.alert=3]="alert",t[t.avatar=4]="avatar",t[t.badge=5]="badge",t[t.breadcrumb=6]="breadcrumb",t[t.button=7]="button",t[t["button-group"]=8]="button-group",t[t["button-link"]=9]="button-link",t[t.card=10]="card",t[t.combobox=11]="combobox",t[t.details=12]="details",t[t.drawer=13]="drawer",t[t.form=14]="form",t[t.heading=15]="heading",t[t.icon=16]="icon",t[t.image=17]="image",t[t["indented-text"]=18]="indented-text",t[t["input-checkbox"]=19]="input-checkbox",t[t["input-color"]=20]="input-color",t[t["input-date"]=21]="input-date",t[t["input-email"]=22]="input-email",t[t["input-file"]=23]="input-file",t[t["input-number"]=24]="input-number",t[t["input-password"]=25]="input-password",t[t["input-radio"]=26]="input-radio",t[t["input-range"]=27]="input-range",t[t["input-text"]=28]="input-text",t[t.kolibri=29]="kolibri",t[t.link=30]="link",t[t["link-button"]=31]="link-button",t[t["link-group"]=32]="link-group",t[t.logo=33]="logo",t[t.modal=34]="modal",t[t.nav=35]="nav",t[t.pagination=36]="pagination",t[t.progress=37]="progress",t[t.select=38]="select",t[t.separator=39]="separator",t[t["skip-nav"]=40]="skip-nav",t[t.spin=41]="spin",t[t["single-select"]=42]="single-select",t[t["split-button"]=43]="split-button",t[t.symbol=44]="symbol",t[t.table=45]="table",t[t["table-stateless"]=46]="table-stateless",t[t["table-stateful"]=47]="table-stateful",t[t.tabs=48]="tabs",t[t.textarea=49]="textarea",t[t["toast-container"]=50]="toast-container",t[t.toolbar=51]="toolbar",t[t.tooltip=52]="tooltip",t[t.tree=53]="tree",t[t["tree-item"]=54]="tree-item"}(TagEnum||(TagEnum={}));const KoliBri=new oe("kol",KeyEnum,TagEnum);setMode((t=>{try{t.shadowRoot instanceof ShadowRoot&&se(t,j(t))}catch(t){}return"default"})),import("./devtools.js").then((t=>{"object"==typeof t&&null!==t&&"function"==typeof t.initialize&&t.initialize()})).catch((t=>{Log.error(t)}));const globalFn=()=>{},appGlobalScript=globalFn,globalScripts=appGlobalScript;let initialized=!1;const bootstrap=async(t,e,o)=>{var n,i;setDevMode("development"===(null==o?void 0:o.environment)),initializeI18n(null!==(i=null===(n=null==o?void 0:o.translation)||void 0===n?void 0:n.name)&&void 0!==i?i:"de",null==o?void 0:o.translations),(null==o?void 0:o.transformTagName)&&setCustomTagNames(null==o?void 0:o.transformTagName);const a=await G(t,e,o);return initialized=!0,a},register=bootstrap,isInitialized=()=>initialized;class ToasterService{constructor(t,e){this.document=t,this.options=e,this.toastContainerElement=this.document.createElement(KolToastContainerTag),this.document.body.prepend(this.toastContainerElement)}static getInstance(t,e){if(!isInitialized())throw new Error("Toaster: Call KoliBri bootstrap/register method first.");let o=this.instances.get(t);return o||(o=new ToasterService(t,e),this.instances.set(t,o)),o}dispose(){const t=this.toastContainerElement;t?(this.toastContainerElement=void 0,t.remove()):Log.warn("Toaster service is already disposed.",{forceLog:!0})}enqueue(t){var e,o;if(this.toastContainerElement&&"function"==typeof this.toastContainerElement.enqueue)return!t.alertVariant&&(null===(e=this.options)||void 0===e?void 0:e.defaultAlertVariant)&&(t.alertVariant=null===(o=this.options)||void 0===o?void 0:o.defaultAlertVariant),this.toastContainerElement.enqueue(t)}closeAll(t=!1){this.toastContainerElement&&"function"==typeof this.toastContainerElement.closeAll&&this.toastContainerElement.closeAll(t)}}ToasterService.instances=new Map,globalScripts();export{KoliBri,ToasterService,bootstrap,isInitialized,register};

package/dist/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index.js","mappings":"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","names":["coreRegister"],"sources":["src/schema/i18n-keys.ts","src/schema/tag-names.ts","src/schema/index.ts","src/global/script.ts","@stencil/core/internal/app-globals","src/core/bootstrap.ts","src/components/toaster/toaster.tsx"],"sourcesContent":["export enum KeyEnum {\n\t'error',\n\t'warning',\n\t'info',\n\t'success',\n\t'message',\n\t'close',\n\t'form-description',\n\t'of',\n\t'characters',\n\t'new',\n\t'no-entries',\n\t'change-order',\n\t'action-running',\n\t'action-done',\n\t'page-first',\n\t'page-back',\n\t'page-next',\n\t'page-last',\n\t'entries-per-site',\n\t'page-current',\n\t'page-selected',\n\t'page-per-site',\n\t'logo-description',\n\t'open-link-in-tab',\n\t'kolibri-logo',\n}\n","export enum TagEnum {\n\t'abbr',\n\t'accordion',\n\t'accordion-group', // TODO: github pr link\n\t'alert',\n\t'avatar',\n\t'badge',\n\t'breadcrumb',\n\t'button',\n\t'button-group',\n\t'button-link',\n\t'card',\n\t'combobox',\n\t'details',\n\t'drawer',\n\t'form',\n\t'heading',\n\t'icon',\n\t'image',\n\t'indented-text',\n\t'input-checkbox',\n\t'input-color',\n\t'input-date',\n\t'input-email',\n\t'input-file',\n\t'input-number',\n\t'input-password',\n\t'input-radio',\n\t'input-range',\n\t'input-text',\n\t'kolibri',\n\t'link',\n\t'link-button',\n\t'link-group',\n\t'logo',\n\t'modal',\n\t'nav',\n\t'pagination',\n\t'progress',\n\t'select',\n\t'separator', // TODO: github pr link\n\t'skip-nav',\n\t'spin',\n\t'single-select',\n\t'split-button',\n\t'symbol',\n\t'table',\n\t'table-stateless',\n\t'table-stateful',\n\t'tabs',\n\t'textarea',\n\t'toast-container',\n\t'toolbar', // TODO: github pr link\n\t'tooltip',\n\t'tree',\n\t'tree-item',\n}\n","import { Theme } from 'adopted-style-sheets';\n\nimport { KeyEnum } from './i18n-keys';\nimport { TagEnum } from './tag-names';\n\nexport const KoliBri = new Theme<'kol', keyof typeof KeyEnum, keyof typeof TagEnum>('kol', KeyEnum, TagEnum);\n\nexport * from './components';\n// export * from './enums'; only for internal use\nexport * from './props';\nexport * from './types';\nexport * from './utils';\nexport * from './validators';\nexport * from './interfaces';\n","import { getThemeDetails, setThemeStyle } from 'adopted-style-sheets';\n\nimport { Log } from '../schema';\nimport { setMode } from '@stencil/core';\n\nsetMode((elm) => {\n\ttry {\n\t\tif (elm.shadowRoot instanceof ShadowRoot) {\n\t\t\tsetThemeStyle(elm, getThemeDetails(elm));\n\t\t}\n\t} catch (error) {\n\t\t/*\n\t\t Try is needed for SSR.\n\t\t * - no HTMLElement is available\n\t\t * - no ShadowRoot is available\n\t\t /\n\t}\n\treturn 'default';\n});\n\nimport('./devtools')\n\t.then((devTools) => {\n\t\tif (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {\n\t\t\tdevTools.initialize();\n\t\t}\n\t})\n\t.catch((error) => {\n\t\tLog.error(error);\n\t});\n","import appGlobalScript from '/home/runner/work/kolibri/kolibri/packages/components/src/global/script.ts';\nexport const globalScripts = appGlobalScript;\n","import type { Generic, LoaderCallback, RegisterOptions } from 'adopted-style-sheets';\nimport { register as coreRegister } from 'adopted-style-sheets';\nimport { setDevMode } from '../schema';\nimport { setCustomTagNames } from './component-names';\nimport { initializeI18n } from './i18n';\n\ntype Environment = 'development' \| 'production';\n\ntype KoliBriOptions = RegisterOptions & {\n\t/\n\t The environment in which the application is running.\n\t /\n\tenvironment?: Environment;\n\t/\n\t This option allows you to transform the component tag names.\n\t /\n\ttransformTagName?: (tagName: string) => string;\n};\n\nlet initialized = false;\n\nexport const bootstrap = async (\n\tthemes:\n\t\t\| Generic.Theming.RegisterPatch<string, string, string>\n\t\t\| Generic.Theming.RegisterPatch<string, string, string>[]\n\t\t\| Set<Generic.Theming.RegisterPatch<string, string, string>>,\n\tloaders: LoaderCallback \| LoaderCallback[] \| Set<LoaderCallback>,\n\toptions?: KoliBriOptions,\n): Promise<void[]> => {\n\tsetDevMode(options?.environment === 'development');\n\n\tinitializeI18n(options?.translation?.name ?? 'de', options?.translations);\n\tif (options?.transformTagName) {\n\t\tsetCustomTagNames(options?.transformTagName);\n\t}\n\tconst coreRegisterReturnValue = await coreRegister(themes, loaders, options);\n\tinitialized = true;\n\n\treturn coreRegisterReturnValue;\n};\n\nexport const register = bootstrap;\nexport const isInitialized = () => initialized;\n","import type { Toast, ToasterOptions } from '../../schema';\nimport { Log } from '../../schema';\nimport { KolToastContainerTag } from '../../core/component-names';\nimport { isInitialized } from '../../core/bootstrap';\n\nexport class ToasterService {\n\tprivate static readonly instances: Map<Document, ToasterService> = new Map<Document, ToasterService>();\n\n\tprivate toastContainerElement?: HTMLKolToastContainerElement;\n\n\tprivate constructor(\n\t\tprivate readonly document: Document,\n\t\tprivate readonly options?: ToasterOptions,\n\t) {\n\t\tthis.toastContainerElement = this.document.createElement(KolToastContainerTag);\n\t\tthis.document.body.prepend(this.toastContainerElement);\n\t}\n\n\t/\n\t Get a toaster for the specified document environment. Each environment has exactly one instance of the service.\n\t /\n\tpublic static getInstance(document: Document, options?: ToasterOptions): ToasterService {\n\t\tif (!isInitialized()) {\n\t\t\tthrow new Error('Toaster: Call KoliBri bootstrap/register method first.');\n\t\t}\n\n\t\tlet instance = this.instances.get(document);\n\t\tif (!instance) {\n\t\t\tinstance = new ToasterService(document, options);\n\t\t\tthis.instances.set(document, instance);\n\t\t}\n\t\treturn instance;\n\t}\n\n\tpublic dispose() {\n\t\tconst element = this.toastContainerElement;\n\t\tif (element) {\n\t\t\tthis.toastContainerElement = undefined;\n\t\t\telement.remove();\n\t\t} else {\n\t\t\tLog.warn('Toaster service is already disposed.', { forceLog: true });\n\t\t}\n\t}\n\n\tpublic enqueue(toast: Toast): Promise<() => void> \| undefined {\n\t\t/\n\t\t We need this condition for SSR. The toast container is not rendered on the server,\n\t\t * so we can't enqueue toasts.\n\t\t */\n\t\tif (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') {\n\t\t\tif (!toast.alertVariant && this.options?.defaultAlertVariant) {\n\t\t\t\ttoast.alertVariant = this.options?.defaultAlertVariant;\n\t\t\t}\n\n\t\t\treturn this.toastContainerElement.enqueue(toast);\n\t\t}\n\t}\n\n\tpublic closeAll(immediate: boolean = false): void {\n\t\tif (this.toastContainerElement && typeof this.toastContainerElement.closeAll === 'function') {\n\t\t\tvoid this.toastContainerElement.closeAll(immediate);\n\t\t}\n\t}\n}\n"],"version":3}
1	+ {"file":"index.js","mappings":"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","names":["Theme","setThemeStyle","getThemeDetails","coreRegister"],"sources":["src/schema/i18n-keys.ts","src/schema/tag-names.ts","src/schema/index.ts","src/global/script.ts","@stencil/core/internal/app-globals","src/core/bootstrap.ts","src/components/toaster/toaster.tsx"],"sourcesContent":["export enum KeyEnum {\n\t'error',\n\t'warning',\n\t'info',\n\t'success',\n\t'message',\n\t'close',\n\t'form-description',\n\t'of',\n\t'characters',\n\t'new',\n\t'no-entries',\n\t'change-order',\n\t'action-running',\n\t'action-done',\n\t'page-first',\n\t'page-back',\n\t'page-next',\n\t'page-last',\n\t'entries-per-site',\n\t'page-current',\n\t'page-selected',\n\t'page-per-site',\n\t'logo-description',\n\t'open-link-in-tab',\n\t'kolibri-logo',\n}\n","export enum TagEnum {\n\t'abbr',\n\t'accordion',\n\t'accordion-group', // TODO: github pr link\n\t'alert',\n\t'avatar',\n\t'badge',\n\t'breadcrumb',\n\t'button',\n\t'button-group',\n\t'button-link',\n\t'card',\n\t'combobox',\n\t'details',\n\t'drawer',\n\t'form',\n\t'heading',\n\t'icon',\n\t'image',\n\t'indented-text',\n\t'input-checkbox',\n\t'input-color',\n\t'input-date',\n\t'input-email',\n\t'input-file',\n\t'input-number',\n\t'input-password',\n\t'input-radio',\n\t'input-range',\n\t'input-text',\n\t'kolibri',\n\t'link',\n\t'link-button',\n\t'link-group',\n\t'logo',\n\t'modal',\n\t'nav',\n\t'pagination',\n\t'progress',\n\t'select',\n\t'separator', // TODO: github pr link\n\t'skip-nav',\n\t'spin',\n\t'single-select',\n\t'split-button',\n\t'symbol',\n\t'table',\n\t'table-stateless',\n\t'table-stateful',\n\t'tabs',\n\t'textarea',\n\t'toast-container',\n\t'toolbar', // TODO: github pr link\n\t'tooltip',\n\t'tree',\n\t'tree-item',\n}\n","import { Theme } from 'adopted-style-sheets';\n\nimport { KeyEnum } from './i18n-keys';\nimport { TagEnum } from './tag-names';\n\nexport const KoliBri = new Theme<'kol', keyof typeof KeyEnum, keyof typeof TagEnum>('kol', KeyEnum, TagEnum);\n\nexport * from './components';\n// export * from './enums'; only for internal use\nexport * from './props';\nexport * from './types';\nexport * from './utils';\nexport * from './validators';\nexport * from './interfaces';\n","import { getThemeDetails, setThemeStyle } from 'adopted-style-sheets';\n\nimport { Log } from '../schema';\nimport { setMode } from '@stencil/core';\n\nsetMode((elm) => {\n\ttry {\n\t\tif (elm.shadowRoot instanceof ShadowRoot) {\n\t\t\tsetThemeStyle(elm, getThemeDetails(elm));\n\t\t}\n\t} catch (error) {\n\t\t/*\n\t\t Try is needed for SSR.\n\t\t * - no HTMLElement is available\n\t\t * - no ShadowRoot is available\n\t\t /\n\t}\n\treturn 'default';\n});\n\nimport('./devtools')\n\t.then((devTools) => {\n\t\tif (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {\n\t\t\tdevTools.initialize();\n\t\t}\n\t})\n\t.catch((error) => {\n\t\tLog.error(error);\n\t});\n","import appGlobalScript from '/home/runner/work/kolibri/kolibri/packages/components/src/global/script.ts';\nexport const globalScripts = appGlobalScript;\n","import type { Generic, LoaderCallback, RegisterOptions } from 'adopted-style-sheets';\nimport { register as coreRegister } from 'adopted-style-sheets';\nimport { setDevMode } from '../schema';\nimport { setCustomTagNames } from './component-names';\nimport { initializeI18n } from './i18n';\n\ntype Environment = 'development' \| 'production';\n\ntype KoliBriOptions = RegisterOptions & {\n\t/\n\t The environment in which the application is running.\n\t /\n\tenvironment?: Environment;\n\t/\n\t This option allows you to transform the component tag names.\n\t /\n\ttransformTagName?: (tagName: string) => string;\n};\n\nlet initialized = false;\n\nexport const bootstrap = async (\n\tthemes:\n\t\t\| Generic.Theming.RegisterPatch<string, string, string>\n\t\t\| Generic.Theming.RegisterPatch<string, string, string>[]\n\t\t\| Set<Generic.Theming.RegisterPatch<string, string, string>>,\n\tloaders: LoaderCallback \| LoaderCallback[] \| Set<LoaderCallback>,\n\toptions?: KoliBriOptions,\n): Promise<void[]> => {\n\tsetDevMode(options?.environment === 'development');\n\n\tinitializeI18n(options?.translation?.name ?? 'de', options?.translations);\n\tif (options?.transformTagName) {\n\t\tsetCustomTagNames(options?.transformTagName);\n\t}\n\tconst coreRegisterReturnValue = await coreRegister(themes, loaders, options);\n\tinitialized = true;\n\n\treturn coreRegisterReturnValue;\n};\n\nexport const register = bootstrap;\nexport const isInitialized = () => initialized;\n","import type { Toast, ToasterOptions } from '../../schema';\nimport { Log } from '../../schema';\nimport { KolToastContainerTag } from '../../core/component-names';\nimport { isInitialized } from '../../core/bootstrap';\n\nexport class ToasterService {\n\tprivate static readonly instances: Map<Document, ToasterService> = new Map<Document, ToasterService>();\n\n\tprivate toastContainerElement?: HTMLKolToastContainerElement;\n\n\tprivate constructor(\n\t\tprivate readonly document: Document,\n\t\tprivate readonly options?: ToasterOptions,\n\t) {\n\t\tthis.toastContainerElement = this.document.createElement(KolToastContainerTag);\n\t\tthis.document.body.prepend(this.toastContainerElement);\n\t}\n\n\t/\n\t Get a toaster for the specified document environment. Each environment has exactly one instance of the service.\n\t /\n\tpublic static getInstance(document: Document, options?: ToasterOptions): ToasterService {\n\t\tif (!isInitialized()) {\n\t\t\tthrow new Error('Toaster: Call KoliBri bootstrap/register method first.');\n\t\t}\n\n\t\tlet instance = this.instances.get(document);\n\t\tif (!instance) {\n\t\t\tinstance = new ToasterService(document, options);\n\t\t\tthis.instances.set(document, instance);\n\t\t}\n\t\treturn instance;\n\t}\n\n\tpublic dispose() {\n\t\tconst element = this.toastContainerElement;\n\t\tif (element) {\n\t\t\tthis.toastContainerElement = undefined;\n\t\t\telement.remove();\n\t\t} else {\n\t\t\tLog.warn('Toaster service is already disposed.', { forceLog: true });\n\t\t}\n\t}\n\n\tpublic enqueue(toast: Toast): Promise<() => void> \| undefined {\n\t\t/\n\t\t We need this condition for SSR. The toast container is not rendered on the server,\n\t\t * so we can't enqueue toasts.\n\t\t */\n\t\tif (this.toastContainerElement && typeof this.toastContainerElement.enqueue === 'function') {\n\t\t\tif (!toast.alertVariant && this.options?.defaultAlertVariant) {\n\t\t\t\ttoast.alertVariant = this.options?.defaultAlertVariant;\n\t\t\t}\n\n\t\t\treturn this.toastContainerElement.enqueue(toast);\n\t\t}\n\t}\n\n\tpublic closeAll(immediate: boolean = false): void {\n\t\tif (this.toastContainerElement && typeof this.toastContainerElement.closeAll === 'function') {\n\t\t\tvoid this.toastContainerElement.closeAll(immediate);\n\t\t}\n\t}\n}\n"],"version":3}

package/dist/components/kol-alert-wc.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{w as watchHeadingLevel}from"./validation.js";import{b as KolHeadingWcTag,c as KolButtonWcTag,e as KolIconTag}from"./component-names.js";import{v as validateHasCloser}from"./has-closer.js";import{L as Log}from"./dev.utils.js";import{c as watchBoolean,b as setState,w as watchValidator}from"./prop.validators.js";import{v as validateLabel}from"./label.js";const alertTypeOptions=["default","info","success","warning","error"],alertVariantOptions=["card","msg"],Icon=e=>h(KolIconTag,{class:"heading-icon",_label:"string"==typeof e.label&&e.label.length>0?"":e.ariaLabel,_icons:e.icon}),AlertIcon=e=>{switch(e.type){case"error":return h(Icon,{ariaLabel:translate("kol-error"),icon:"codicon codicon-error",label:e.label});case"info":return h(Icon,{ariaLabel:translate("kol-info"),icon:"codicon codicon-info",label:e.label});case"warning":return h(Icon,{ariaLabel:translate("kol-warning"),icon:"codicon codicon-warning",label:e.label});case"success":return h(Icon,{ariaLabel:translate("kol-success"),icon:"codicon codicon-pass",label:e.label});default:return h(Icon,{ariaLabel:translate("kol-message"),icon:"codicon codicon-comment",label:e.label})}},KolAlertWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){var e,a;if(this.state._alert){try{Log.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){Log.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return h(Host,{key:"ecb2cd45b14f92cc1c337d2b81382a8cc820e869",class:{"kol-alert-wc":!0,alert:!0,[this.state._type]:!0,[this.state._variant]:!0,hasCloser:!!this.state._hasCloser},role:this.state._alert?"alert":void 0},h("div",{key:"b190de9f62c33d970daabc1b5638132da33c936e",class:"heading"},h(AlertIcon,{key:"e1da8b194a13ec6f9270efc2234caadcee77e827",label:this.state._label,type:this.state._type}),h("div",{key:"7ffd000cfbe218c582791e8646ff5caf9bad5b25",class:"heading-content"},"string"==typeof this.state._label&&(null===(e=this.state._label)||void 0===e?void 0:e.length)>0&&h(KolHeadingWcTag,{key:"f9e7c598243a4868b80b248fdf4dfdeed5d24a2b",_label:this.state._label,_level:this.state._level}),"msg"===this.state._variant&&h("div",{key:"b5b70319b6c7747872e9d8072a1fe7565938f7c1",class:"content"},h("slot",{key:"b75edf24762d861147d5ee5fa0701b4c5a30eed1"}))),this.state._hasCloser&&h(KolButtonWcTag,{key:"cd46afacd1afbc415e1184604b3b1ac9af901c97",class:"close",_ariaDescription:(null===(a=this.state._label)||void 0===a?void 0:a.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:translate("kol-close-alert"),_on:this.on,_tooltipAlign:"left"})),"card"===this.state._variant&&h("div",{key:"2a9670974b00907497abd255e02194301df0c0a2",class:"content"},h("slot",{key:"9bd3de7e485b9865d5f74dfbce4f421d4b1dc9b5"})))}validateAlert(e){watchBoolean(this,"_alert",e)}validateHasCloser(e){validateHasCloser(this,e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateOn(e){this.validateOnValue(e)&&setState(this,"_on",{onClose:e.onClose})}validateType(e){watchValidator(this,"_type",(e=>"string"==typeof e&&alertTypeOptions.includes(e)),new Set(`String {${alertTypeOptions.join(", ")}`),e)}validateVariant(e){watchValidator(this,"_variant",(e=>"string"==typeof e&&alertVariantOptions.includes(e)),new Set(`AlertVariant {${alertVariantOptions.join(", ")}`),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}},[4,"kol-alert-wc",{_alert:[4],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2],_on:[16],_type:[1],_variant:[1],state:[32]},void 0,{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-alert-wc"].forEach((e=>{if("kol-alert-wc"===e)customElements.get(e)||customElements.define(e,KolAlertWc$1)}))}const KolAlertWc=KolAlertWc$1,defineCustomElement=defineCustomElement$1;export{KolAlertWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{w as watchHeadingLevel}from"./validation.js";import{b as KolHeadingWcTag,c as KolButtonWcTag,e as KolIconTag}from"./component-names.js";import{v as validateHasCloser}from"./has-closer.js";import{L as Log}from"./dev.utils.js";import{c as watchBoolean,b as setState,w as watchValidator}from"./prop.validators.js";import{v as validateLabel}from"./label.js";const alertTypeOptions=["default","info","success","warning","error"],alertVariantOptions=["card","msg"],Icon=e=>h(KolIconTag,{class:"heading-icon",_label:"string"==typeof e.label&&e.label.length>0?"":e.ariaLabel,_icons:e.icon}),AlertIcon=e=>{switch(e.type){case"error":return h(Icon,{ariaLabel:translate("kol-error"),icon:"codicon codicon-error",label:e.label});case"info":return h(Icon,{ariaLabel:translate("kol-info"),icon:"codicon codicon-info",label:e.label});case"warning":return h(Icon,{ariaLabel:translate("kol-warning"),icon:"codicon codicon-warning",label:e.label});case"success":return h(Icon,{ariaLabel:translate("kol-success"),icon:"codicon codicon-pass",label:e.label});default:return h(Icon,{ariaLabel:translate("kol-message"),icon:"codicon codicon-comment",label:e.label})}},KolAlertWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){var e,a;if(this.state._alert){try{Log.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){Log.debug("Navigator does not support vibration.")}setTimeout((()=>{this.validateAlert(!1)}),1e4)}return h(Host,{key:"525d331b449dab14b19e54b37a8e977be62b07df",class:{"kol-alert-wc":!0,alert:!0,[this.state._type]:!0,[this.state._variant]:!0,hasCloser:!!this.state._hasCloser},role:this.state._alert?"alert":void 0},h("div",{key:"5683bb429f68a370ffd0371d37876f6413e06d5a",class:"heading"},h(AlertIcon,{key:"085409478d4d78475ac0f9d5fa81c90ace026aef",label:this.state._label,type:this.state._type}),h("div",{key:"d399a49571361d1834497bf333b99a2e27e9011b",class:"heading-content"},"string"==typeof this.state._label&&(null===(e=this.state._label)||void 0===e?void 0:e.length)>0&&h(KolHeadingWcTag,{key:"4cd43cc6b0b0770c0a2a44d3dcc48059fca69449",_label:this.state._label,_level:this.state._level}),"msg"===this.state._variant&&h("div",{key:"c0317feece11a33a933ebd45fa362c55540665ac",class:"content"},h("slot",{key:"114d508c7afbce9e41c426976fd6c0d8658151ab"}))),this.state._hasCloser&&h(KolButtonWcTag,{key:"260911bb402827b893be550d1948501666524313",class:"close",_ariaDescription:(null===(a=this.state._label)||void 0===a?void 0:a.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:translate("kol-close-alert"),_on:this.on,_tooltipAlign:"left"})),"card"===this.state._variant&&h("div",{key:"c331bacde2796ccdf7249e32d5f9d76ee07e2400",class:"content"},h("slot",{key:"624301486b6b9330c985835d5c87667ab12b2b1e"})))}validateAlert(e){watchBoolean(this,"_alert",e)}validateHasCloser(e){validateHasCloser(this,e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateOn(e){this.validateOnValue(e)&&setState(this,"_on",{onClose:e.onClose})}validateType(e){watchValidator(this,"_type",(e=>"string"==typeof e&&alertTypeOptions.includes(e)),new Set(`String {${alertTypeOptions.join(", ")}`),e)}validateVariant(e){watchValidator(this,"_variant",(e=>"string"==typeof e&&alertVariantOptions.includes(e)),new Set(`AlertVariant {${alertVariantOptions.join(", ")}`),e)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateType(this._type),this.validateVariant(this._variant)}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}}},[4,"kol-alert-wc",{_alert:[4],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2],_on:[16],_type:[1],_variant:[1],state:[32]},void 0,{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_type:["validateType"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-alert-wc"].forEach((e=>{if("kol-alert-wc"===e)customElements.get(e)||customElements.define(e,KolAlertWc$1)}))}const KolAlertWc=KolAlertWc$1,defineCustomElement=defineCustomElement$1;export{KolAlertWc,defineCustomElement};

package/dist/components/kol-alert-wc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-alert-wc.js","mappings":"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","names":["KolAlertWc"],"sources":["src/schema/components/alert.ts","src/components/alert/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { HeadingLevel, PropAlert, PropHasCloser, PropLabel } from '../props';\nimport type { EventCallback } from '../types';\n\nexport const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'] as const;\nexport type AlertType = (typeof alertTypeOptions)[number];\n\nexport const alertVariantOptions = ['card', 'msg'] as const;\nexport type AlertVariant = (typeof alertVariantOptions)[number];\n\nexport type KoliBriAlertEventCallbacks = {\n\tonClose?: EventCallback<Event>;\n};\n\ntype RequiredAlertProps = NonNullable<unknown>;\ntype OptionalAlertProps = {\n\tlevel: HeadingLevel;\n\ton: KoliBriAlertEventCallbacks;\n\ttype: AlertType;\n\tvariant: AlertVariant;\n} & PropLabel &\n\tPropAlert &\n\tPropHasCloser;\n\ntype RequiredAlertStates = RequiredAlertProps;\ntype OptionalAlertStates = OptionalAlertProps;\n\nexport type AlertProps = Generic.Element.Members<RequiredAlertProps, OptionalAlertProps>;\nexport type AlertStates = Generic.Element.Members<RequiredAlertStates, OptionalAlertStates>;\nexport type AlertAPI = Generic.Element.ComponentApi<RequiredAlertProps, OptionalAlertProps, RequiredAlertStates, OptionalAlertStates>;\n","import type { JSX } from '@stencil/core';\nimport { Log, alertTypeOptions, alertVariantOptions, setState, validateHasCloser, validateLabel, watchBoolean, watchValidator } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { KolIconTag, KolHeadingWcTag, KolButtonWcTag } from '../../core/component-names';\n\nimport type { AlertAPI, AlertStates, AlertType, AlertVariant, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nconst Icon = (props: { ariaLabel: string; icon: string; label?: string }) => {\n\treturn <KolIconTag class=\"heading-icon\" _label={typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel} _icons={props.icon} />;\n};\n\nconst AlertIcon = (props: { label?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" label={props.label} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" label={props.label} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" label={props.label} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" label={props.label} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" label={props.label} />;\n\t}\n};\n\n/*\n @slot - Der Inhalt der Meldung.\n /\n@Component({\n\ttag: 'kol-alert-wc',\n\tshadow: false,\n})\nexport class KolAlertWc implements AlertAPI {\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\tclass={{\n\t\t\t\t\t'kol-alert-wc': true,\n\t\t\t\t\talert: true,\n\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\thasCloser: !!this.state._hasCloser,\n\t\t\t\t}}\n\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t>\n\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t<AlertIcon label={this.state._label} type={this.state._type} />\n\t\t\t\t\t<div class=\"heading-content\">\n\t\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label?.length > 0 && (\n\t\t\t\t\t\t\t<KolHeadingWcTag _label={this.state._label} _level={this.state._level}></KolHeadingWcTag>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._variant === 'msg' && (\n\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_ariaDescription={this.state._label?.trim() \|\| ''}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label={translate('kol-close-alert')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines whether the screen-readers should read out the notification.\n\t /\n\t@Prop() public _alert?: boolean = false;\n\n\t/\n\t Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\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 Defines either the type of the component or of the components interactive element.\n\t /\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\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@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@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' && alertTypeOptions.includes(value),\n\t\t\tnew Set(`String {${alertTypeOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value?) => typeof value === 'string' && alertVariantOptions.includes(value),\n\t\t\tnew Set(`AlertVariant {${alertVariantOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\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"],"version":3}
1	+ {"file":"kol-alert-wc.js","mappings":"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","names":["KolAlertWc"],"sources":["src/schema/components/alert.ts","src/components/alert/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { HeadingLevel, PropAlert, PropHasCloser, PropLabel } from '../props';\nimport type { EventCallback } from '../types';\n\nexport const alertTypeOptions = ['default', 'info', 'success', 'warning', 'error'] as const;\nexport type AlertType = (typeof alertTypeOptions)[number];\n\nexport const alertVariantOptions = ['card', 'msg'] as const;\nexport type AlertVariant = (typeof alertVariantOptions)[number];\n\nexport type KoliBriAlertEventCallbacks = {\n\tonClose?: EventCallback<Event>;\n};\n\ntype RequiredAlertProps = NonNullable<unknown>;\ntype OptionalAlertProps = {\n\tlevel: HeadingLevel;\n\ton: KoliBriAlertEventCallbacks;\n\ttype: AlertType;\n\tvariant: AlertVariant;\n} & PropLabel &\n\tPropAlert &\n\tPropHasCloser;\n\ntype RequiredAlertStates = RequiredAlertProps;\ntype OptionalAlertStates = OptionalAlertProps;\n\nexport type AlertProps = Generic.Element.Members<RequiredAlertProps, OptionalAlertProps>;\nexport type AlertStates = Generic.Element.Members<RequiredAlertStates, OptionalAlertStates>;\nexport type AlertAPI = Generic.Element.ComponentApi<RequiredAlertProps, OptionalAlertProps, RequiredAlertStates, OptionalAlertStates>;\n","import type { JSX } from '@stencil/core';\nimport { Log, alertTypeOptions, alertVariantOptions, setState, validateHasCloser, validateLabel, watchBoolean, watchValidator } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { KolIconTag, KolHeadingWcTag, KolButtonWcTag } from '../../core/component-names';\n\nimport type { AlertAPI, AlertStates, AlertType, AlertVariant, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nconst Icon = (props: { ariaLabel: string; icon: string; label?: string }) => {\n\treturn <KolIconTag class=\"heading-icon\" _label={typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel} _icons={props.icon} />;\n};\n\nconst AlertIcon = (props: { label?: string; type?: AlertType }) => {\n\tswitch (props.type) {\n\t\tcase 'error':\n\t\t\treturn <Icon ariaLabel={translate('kol-error')} icon=\"codicon codicon-error\" label={props.label} />;\n\t\tcase 'info':\n\t\t\treturn <Icon ariaLabel={translate('kol-info')} icon=\"codicon codicon-info\" label={props.label} />;\n\t\tcase 'warning':\n\t\t\treturn <Icon ariaLabel={translate('kol-warning')} icon=\"codicon codicon-warning\" label={props.label} />;\n\t\tcase 'success':\n\t\t\treturn <Icon ariaLabel={translate('kol-success')} icon=\"codicon codicon-pass\" label={props.label} />;\n\t\tdefault:\n\t\t\treturn <Icon ariaLabel={translate('kol-message')} icon=\"codicon codicon-comment\" label={props.label} />;\n\t}\n};\n\n/*\n @internal\n * @slot - Der Inhalt der Meldung.\n /\n@Component({\n\ttag: 'kol-alert-wc',\n\tshadow: false,\n})\nexport class KolAlertWc implements AlertAPI {\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\tclass={{\n\t\t\t\t\t'kol-alert-wc': true,\n\t\t\t\t\talert: true,\n\t\t\t\t\t[this.state._type as string]: true,\n\t\t\t\t\t[this.state._variant as string]: true,\n\t\t\t\t\thasCloser: !!this.state._hasCloser,\n\t\t\t\t}}\n\t\t\t\trole={this.state._alert ? 'alert' : undefined}\n\t\t\t>\n\t\t\t\t<div class=\"heading\">\n\t\t\t\t\t<AlertIcon label={this.state._label} type={this.state._type} />\n\t\t\t\t\t<div class=\"heading-content\">\n\t\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label?.length > 0 && (\n\t\t\t\t\t\t\t<KolHeadingWcTag _label={this.state._label} _level={this.state._level}></KolHeadingWcTag>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._variant === 'msg' && (\n\t\t\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_ariaDescription={this.state._label?.trim() \|\| ''}\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t_label={translate('kol-close-alert')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines whether the screen-readers should read out the notification.\n\t /\n\t@Prop() public _alert?: boolean = false;\n\n\t/\n\t Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\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 Defines either the type of the component or of the components interactive element.\n\t /\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\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@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@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' && alertTypeOptions.includes(value),\n\t\t\tnew Set(`String {${alertTypeOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: AlertVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value?) => typeof value === 'string' && alertVariantOptions.includes(value),\n\t\t\tnew Set(`AlertVariant {${alertVariantOptions.join(', ')}`),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\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"],"version":3}

package/dist/components/kol-alert.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{d as KolAlertWcTag}from"./component-names.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid 1px;\n  }\n}",KolAlertDefaultStyle0=defaultStyleCss,KolAlert$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){return h(Host,{key:"4f87a50275ed8a213086458ce239ab24148b4e95",class:"kol-alert"},h(KolAlertWcTag,{key:"97764b041f739deb6fda2f01d31993131de5e6ab",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},h("slot",{key:"3108fc83dd474231a55d3ffaf4bb8fae2ac7719d"})))}static get style(){return{default:KolAlertDefaultStyle0}}},[33,"kol-alert",{_alert:[4],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2],_on:[16],_type:[1],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-alert"].forEach((n=>{if("kol-alert"===n)customElements.get(n)||customElements.define(n,KolAlert$1)}))}const KolAlert=KolAlert$1,defineCustomElement=defineCustomElement$1;export{KolAlert,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{d as KolAlertWcTag}from"./component-names.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid 1px;\n  }\n}",KolAlertDefaultStyle0=defaultStyleCss,KolAlert$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._alert=!1,this._hasCloser=!1,this._label=void 0,this._level=1,this._on=void 0,this._type="default",this._variant="msg",this.state={_level:1}}render(){return h(Host,{key:"4f87a50275ed8a213086458ce239ab24148b4e95",class:"kol-alert"},h(KolAlertWcTag,{key:"97764b041f739deb6fda2f01d31993131de5e6ab",_alert:this._alert,_hasCloser:this._hasCloser,_label:this._label,_level:this._level,_on:this._on,_type:this._type,_variant:this._variant},h("slot",{key:"3108fc83dd474231a55d3ffaf4bb8fae2ac7719d"})))}static get style(){return{default:KolAlertDefaultStyle0}}},[33,"kol-alert",{_alert:[4],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2],_on:[16],_type:[1],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-alert"].forEach((n=>{if("kol-alert"===n)customElements.get(n)||customElements.define(n,KolAlert$1)}))}const KolAlert=KolAlert$1,defineCustomElement=defineCustomElement$1;export{KolAlert,defineCustomElement};

package/dist/components/kol-alert.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-alert.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,~~u7IAAu7I~~,CAAC;~~AACh9I~~,8BAAe,eAAe;;MCcjBA,UAAQ;;;;;sBAsBc,KAAK;0BAMD,KAAK;;sBAUJ,CAAC;;qBAUL,SAAS;wBAKH,KAAK;qBAET;YACpC,MAAM,EAAE,CAAC;SACT;;IAxDM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,WAAW,IACtB,EAAC,aAAa,qDACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,8DAAQ,CACO,CACV,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAlert"],"sources":["src/components/alert/style.scss?tag=kol-alert&mode=default&encapsulation=shadow","src/components/alert/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../@shared/kol-alert-mixin.scss';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n\n@include kol-alert-styles;\n","import type { AlertProps, AlertStates, AlertType, AlertVariant, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State } from '@stencil/core';\nimport { KolAlertWcTag } from '../../core/component-names';\n\n/*\n @slot - Der Inhalt der Meldung.\n /\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements AlertProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-alert\">\n\t\t\t\t<KolAlertWcTag\n\t\t\t\t\t_alert={this._alert}\n\t\t\t\t\t_hasCloser={this._hasCloser}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_level={this._level}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolAlertWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines whether the screen-readers should read out the notification.\n\t /\n\t@Prop() public _alert?: boolean = false;\n\n\t/\n\t Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\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 Defines either the type of the component or of the components interactive element.\n\t /\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n}\n"],"version":3}
1	+ {"file":"kol-alert.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,s5QAAs5Q,CAAC;AAC/6Q,8BAAe,eAAe;;MCcjBA,UAAQ;;;;;sBAsBc,KAAK;0BAMD,KAAK;;sBAUJ,CAAC;;qBAUL,SAAS;wBAKH,KAAK;qBAET;YACpC,MAAM,EAAE,CAAC;SACT;;IAxDM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,WAAW,IACtB,EAAC,aAAa,qDACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,8DAAQ,CACO,CACV,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAlert"],"sources":["src/components/alert/style.scss?tag=kol-alert&mode=default&encapsulation=shadow","src/components/alert/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../@shared/kol-alert-mixin.scss';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n}\n\n@include kol-alert-styles;\n","import type { AlertProps, AlertStates, AlertType, AlertVariant, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State } from '@stencil/core';\nimport { KolAlertWcTag } from '../../core/component-names';\n\n/*\n @slot - Der Inhalt der Meldung.\n /\n@Component({\n\ttag: 'kol-alert',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAlert implements AlertProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-alert\">\n\t\t\t\t<KolAlertWcTag\n\t\t\t\t\t_alert={this._alert}\n\t\t\t\t\t_hasCloser={this._hasCloser}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_level={this._level}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolAlertWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Defines whether the screen-readers should read out the notification.\n\t /\n\t@Prop() public _alert?: boolean = false;\n\n\t/\n\t Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t /\n\t@Prop() public _label?: LabelPropType;\n\n\t/\n\t Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\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 Defines either the type of the component or of the components interactive element.\n\t /\n\t@Prop() public _type?: AlertType = 'default';\n\n\t/\n\t Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: AlertVariant = 'msg';\n\n\t@State() public state: AlertStates = {\n\t\t_level: 1,\n\t};\n}\n"],"version":3}

package/dist/components/kol-avatar-wc.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{v as validateImageSource}from"./image-source.js";import{v as validateLabel}from"./label.js";const formatNameAsInitial=a=>0===a.length?"":a[0].toUpperCase(),formatLabelAsInitials=a=>{const t=a.split(/\s+/),e=t.at(0),l=t.at(-1);return t.length>=2&&e&&l?`${formatNameAsInitial(e)}${formatNameAsInitial(l)}`:formatNameAsInitial(a)},KolAvatarWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return h(Host,{key:"672b71c600e54214bbaf86210fe439af3f187c83",class:"kol-avatar-wc"},h("div",{key:"8631bb174ac54c1677149d12979f6837dddd692d","aria-label":translate("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?h("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):h("span",{"aria-hidden":"true",class:"initials"},formatLabelAsInitials(this.state._label.trim()))))}validateSrc(a){validateImageSource(this,a)}validateLabel(a){validateLabel(this,a,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}},[0,"kol-avatar-wc",{_src:[1],_label:[1],state:[32]},void 0,{_src:["validateSrc"],_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar-wc"].forEach((a=>{if("kol-avatar-wc"===a)customElements.get(a)||customElements.define(a,KolAvatarWc$1)}))}const KolAvatarWc=KolAvatarWc$1,defineCustomElement=defineCustomElement$1;export{KolAvatarWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{v as validateImageSource}from"./image-source.js";import{v as validateLabel}from"./label.js";const formatNameAsInitial=a=>0===a.length?"":a[0].toUpperCase(),formatLabelAsInitials=a=>{const t=a.split(/\s+/),e=t.at(0),l=t.at(-1);return t.length>=2&&e&&l?`${formatNameAsInitial(e)}${formatNameAsInitial(l)}`:formatNameAsInitial(a)},KolAvatarWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this._src=void 0,this._label=void 0,this.state={_src:"",_label:""}}render(){return h(Host,{key:"21a63aacea075d070953aa0f10065f962cedf6d3",class:"kol-avatar-wc"},h("div",{key:"013235e4075ca9590f516eb3b5a0c989c28335a0","aria-label":translate("kol-avatar-alt",{placeholders:{name:this.state._label}}),class:"container",role:"img"},this.state._src?h("img",{alt:"","aria-hidden":"true",class:"image",src:this.state._src}):h("span",{"aria-hidden":"true",class:"initials"},formatLabelAsInitials(this.state._label.trim()))))}validateSrc(a){validateImageSource(this,a)}validateLabel(a){validateLabel(this,a,{required:!0})}componentWillLoad(){this.validateSrc(this._src),this.validateLabel(this._label)}static get watchers(){return{_src:["validateSrc"],_label:["validateLabel"]}}},[0,"kol-avatar-wc",{_src:[1],_label:[1],state:[32]},void 0,{_src:["validateSrc"],_label:["validateLabel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar-wc"].forEach((a=>{if("kol-avatar-wc"===a)customElements.get(a)||customElements.define(a,KolAvatarWc$1)}))}const KolAvatarWc=KolAvatarWc$1,defineCustomElement=defineCustomElement$1;export{KolAvatarWc,defineCustomElement};

package/dist/components/kol-avatar-wc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-avatar-wc.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,CAAC,IAAY;IACxC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,EAAE,CAAC;KACV;IAED,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAC9B,CAAC,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,KAAa;IAClD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC1B,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAG1B,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;QACvC,OAAO,GAAG,mBAAmB,CAAC,KAAK,CAAC,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;KACnE;IAED,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC;;~~MCPYA~~,aAAW;;;;;;qBA2Be;YACrC,IAAI,EAAE,EAAE;YACR,MAAM,EAAE,EAAE;SACV;;IA7BM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,IAC1B,0EAAiB,SAAS,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK,IACvH,IAAI,CAAC,KAAK,CAAC,IAAI,IACf,WAAK,GAAG,EAAC,EAAE,iBAAa,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,KAErE,2BAAkB,MAAM,EAAC,KAAK,EAAC,UAAU,IACvC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAC1C,CACP,CACI,CACA,EACN;KACF;IAkBM,WAAW,CAAC,KAA2B;QAC7C,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KACjC;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAEM,iBAAiB;QACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAvatarWc"],"sources":["src/components/avatar/controller.ts","src/components/avatar/component.tsx"],"sourcesContent":["const formatNameAsInitial = (name: string): string => {\n\tif (name.length === 0) {\n\t\treturn '';\n\t}\n\n\treturn name[0].toUpperCase();\n};\n\nexport const formatLabelAsInitials = (label: string): string => {\n\tconst names = label.split(/\\s+/); // split by any whitespace characters\n\tconst first = names.at(0);\n\tconst last = names.at(-1);\n\n\t// names might consist of only one word\n\tif (names.length >= 2 && first && last) {\n\t\treturn `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;\n\t}\n\n\treturn formatNameAsInitial(label);\n};\n","import type { JSX } from '@stencil/core';\nimport { validateImageSource, validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { formatLabelAsInitials } from './controller';\n\nimport type { AvatarAPI, AvatarStates, ImageSourcePropType, LabelPropType } from '../../schema';\n@Component({\n\ttag: 'kol-avatar-wc',\n\tshadow: false,\n})\nexport class KolAvatarWc implements AvatarAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar-wc\">\n\t\t\t\t<div aria-label={translate('kol-avatar-alt', { placeholders: { name: this.state._label } })} class=\"container\" role=\"img\">\n\t\t\t\t\t{this.state._src ? (\n\t\t\t\t\t\t<img alt=\"\" aria-hidden=\"true\" class=\"image\" src={this.state._src} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span aria-hidden=\"true\" class=\"initials\">\n\t\t\t\t\t\t\t{formatLabelAsInitials(this.state._label.trim())}\n\t\t\t\t\t\t</span>\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 Sets the image `src` attribute to the given string.\n\t /\n\t@Prop() public _src?: ImageSourcePropType;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: AvatarStates = {\n\t\t_src: '',\n\t\t_label: '', // ⚠ required\n\t};\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-avatar-wc.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,CAAC,IAAY;IACxC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;QACtB,OAAO,EAAE,CAAC;KACV;IAED,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAC9B,CAAC,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,KAAa;IAClD,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAC1B,MAAM,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAG1B,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,EAAE;QACvC,OAAO,GAAG,mBAAmB,CAAC,KAAK,CAAC,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC;KACnE;IAED,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC;;MCHYA,aAAW;;;;;;qBA2Be;YACrC,IAAI,EAAE,EAAE;YACR,MAAM,EAAE,EAAE;SACV;;IA7BM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,eAAe,IAC1B,0EAAiB,SAAS,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK,IACvH,IAAI,CAAC,KAAK,CAAC,IAAI,IACf,WAAK,GAAG,EAAC,EAAE,iBAAa,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,KAErE,2BAAkB,MAAM,EAAC,KAAK,EAAC,UAAU,IACvC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAC1C,CACP,CACI,CACA,EACN;KACF;IAkBM,WAAW,CAAC,KAA2B;QAC7C,mBAAmB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KACjC;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAEM,iBAAiB;QACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAvatarWc"],"sources":["src/components/avatar/controller.ts","src/components/avatar/component.tsx"],"sourcesContent":["const formatNameAsInitial = (name: string): string => {\n\tif (name.length === 0) {\n\t\treturn '';\n\t}\n\n\treturn name[0].toUpperCase();\n};\n\nexport const formatLabelAsInitials = (label: string): string => {\n\tconst names = label.split(/\\s+/); // split by any whitespace characters\n\tconst first = names.at(0);\n\tconst last = names.at(-1);\n\n\t// names might consist of only one word\n\tif (names.length >= 2 && first && last) {\n\t\treturn `${formatNameAsInitial(first)}${formatNameAsInitial(last)}`;\n\t}\n\n\treturn formatNameAsInitial(label);\n};\n","import type { JSX } from '@stencil/core';\nimport { validateImageSource, validateLabel } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { formatLabelAsInitials } from './controller';\n\nimport type { AvatarAPI, AvatarStates, ImageSourcePropType, LabelPropType } from '../../schema';\n\n/*\n @internal\n /\n@Component({\n\ttag: 'kol-avatar-wc',\n\tshadow: false,\n})\nexport class KolAvatarWc implements AvatarAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar-wc\">\n\t\t\t\t<div aria-label={translate('kol-avatar-alt', { placeholders: { name: this.state._label } })} class=\"container\" role=\"img\">\n\t\t\t\t\t{this.state._src ? (\n\t\t\t\t\t\t<img alt=\"\" aria-hidden=\"true\" class=\"image\" src={this.state._src} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span aria-hidden=\"true\" class=\"initials\">\n\t\t\t\t\t\t\t{formatLabelAsInitials(this.state._label.trim())}\n\t\t\t\t\t\t</span>\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 Sets the image `src` attribute to the given string.\n\t /\n\t@Prop() public _src?: ImageSourcePropType;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t@State() public state: AvatarStates = {\n\t\t_src: '',\n\t\t_label: '', // ⚠ required\n\t};\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"version":3}

package/dist/components/kol-avatar.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{f as KolAvatarWcTag}from"./component-names.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n    /*theme?*/\n    width: 100px;\n    height: 100px;\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*theme?*/\n    background: #d3d3d3;\n    font-size: 40px;\n  }\n}",KolAvatarDefaultStyle0=defaultStyleCss,KolAvatar$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._src=void 0,this._label=void 0}render(){return h(Host,{key:"27dcef5bc7bcb3d600f33e1776e8c1e913ede9d8",class:"kol-avatar"},h(KolAvatarWcTag,{key:"f8c1eb9c59ef3bbcbe704834ce4325284f8e6e8c",_src:this._src,_label:this._label}))}static get style(){return{default:KolAvatarDefaultStyle0}}},[33,"kol-avatar",{_src:[1],_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar"].forEach((n=>{if("kol-avatar"===n)customElements.get(n)||customElements.define(n,KolAvatar$1)}))}const KolAvatar=KolAvatar$1,defineCustomElement=defineCustomElement$1;export{KolAvatar,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{f as KolAvatarWcTag}from"./component-names.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .container {\n    border-radius: 50%;\n    overflow: hidden;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n    /*theme?*/\n    width: 100px;\n    height: 100px;\n  }\n  .image {\n    width: 100%;\n    height: 100%;\n  }\n  .initials {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    /*theme?*/\n    background-color: #d3d3d3;\n    font-size: 40px;\n  }\n}",KolAvatarDefaultStyle0=defaultStyleCss,KolAvatar$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._src=void 0,this._label=void 0}render(){return h(Host,{key:"27dcef5bc7bcb3d600f33e1776e8c1e913ede9d8",class:"kol-avatar"},h(KolAvatarWcTag,{key:"f8c1eb9c59ef3bbcbe704834ce4325284f8e6e8c",_src:this._src,_label:this._label}))}static get style(){return{default:KolAvatarDefaultStyle0}}},[33,"kol-avatar",{_src:[1],_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar"].forEach((n=>{if("kol-avatar"===n)customElements.get(n)||customElements.define(n,KolAvatar$1)}))}const KolAvatar=KolAvatar$1,defineCustomElement=defineCustomElement$1;export{KolAvatar,defineCustomElement};

package/dist/components/kol-avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-avatar.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,~~8kJAA8kJ~~,CAAC;~~AACvmJ~~,+BAAe,eAAe;;MCYjBA,WAAS;;;;;;;;IACd,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,YAAY,IACvB,EAAC,cAAc,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAmB,CACjE,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAvatar"],"sources":["src/components/avatar/style.scss?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\t/* Visible with forced colors /\n\t\toutline: transparent solid 1px;\n\t\t/theme?/\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t/theme?/\n\t\tbackground: #d3d3d3;\n\t\tfont-size: 40px;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { AvatarProps } from '../../schema';\nimport { KolAvatarWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements AvatarProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar\">\n\t\t\t\t<KolAvatarWcTag _src={this._src} _label={this._label}></KolAvatarWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Sets the image `src` attribute to the given string.\n\t /\n\t@Prop() public _src?: string;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"version":3}
1	+ {"file":"kol-avatar.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,olJAAolJ,CAAC;AAC7mJ,+BAAe,eAAe;;MCYjBA,WAAS;;;;;;;;IACd,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,YAAY,IACvB,EAAC,cAAc,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAmB,CACjE,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAvatar"],"sources":["src/components/avatar/style.scss?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.container {\n\t\tborder-radius: 50%;\n\t\toverflow: hidden;\n\t\t/* Visible with forced colors /\n\t\toutline: transparent solid 1px;\n\t\t/theme?/\n\t\twidth: 100px;\n\t\theight: 100px;\n\t}\n\n\t.image {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t.initials {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t/theme?/\n\t\tbackground-color: #d3d3d3;\n\t\tfont-size: 40px;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport type { AvatarProps } from '../../schema';\nimport { KolAvatarWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements AvatarProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-avatar\">\n\t\t\t\t<KolAvatarWcTag _src={this._src} _label={this._label}></KolAvatarWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Sets the image `src` attribute to the given string.\n\t /\n\t@Prop() public _src?: string;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"version":3}

package/dist/components/kol-badge.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{c as KolButtonWcTag,g as KolSpanWcTag}from"./component-names.js";import{n as nonce}from"./dev.utils2.js";import{h as handleColorChange,v as validateColor}from"./color.js";import{f as featureHint,o as objectObjectHandler,p as parseJson,b as setState}from"./prop.validators.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  /* :host implicitly inherits font-size, e.g. for usage in headlines */\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span {\n    display: inline-flex;\n    place-items: center;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host > span > .kol-button-wc button {\n    color: inherit;\n  }\n}",KolBadgeDefaultStyle0=defaultStyleCss;featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.bgColorStr="#000",this.colorStr="#fff",this.id=nonce(),this.handleColorChange=n=>{const t=handleColorChange(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(n){return h(KolButtonWcTag,{_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_variant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return h(Host,{key:"0b334746c26463bbc697f08077e165e56b34a97f",class:"kol-badge"},h("span",{key:"83210f467b224cb691d844a0311f4a31a1ad6e79",class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},h(KolSpanWcTag,{key:"d5a3248d67baa494d9671e0da7de918511af084b",id:n?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),n&&this.renderSmartButton(this.state._smartButton)))}validateColor(n){validateColor(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){objectObjectHandler(n,(()=>{try{n=parseJson(n)}catch(n){}setState(this,"_smartButton",n)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}static get style(){return{default:KolBadgeDefaultStyle0}}},[33,"kol-badge",{_color:[1],_icons:[1],_label:[1],_smartButton:[1,"_smart-button"],state:[32]},void 0,{_color:["validateColor"],_smartButton:["validateSmartButton"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-badge"].forEach((n=>{if("kol-badge"===n)customElements.get(n)||customElements.define(n,KolBadge$1)}))}const KolBadge=KolBadge$1,defineCustomElement=defineCustomElement$1;export{KolBadge,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{c as KolButtonWcTag,g as KolSpanWcTag}from"./component-names.js";import{n as nonce}from"./dev.utils2.js";import{h as handleColorChange,v as validateColor}from"./color.js";import{f as featureHint,g as objectObjectHandler,p as parseJson,b as setState}from"./prop.validators.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  /* :host implicitly inherits font-size, e.g. for usage in headlines */\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span {\n    display: inline-flex;\n    place-items: center;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host > span > .kol-button-wc button {\n    color: inherit;\n  }\n}",KolBadgeDefaultStyle0=defaultStyleCss;featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const KolBadge$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.bgColorStr="#000",this.colorStr="#fff",this.id=nonce(),this.handleColorChange=n=>{const t=handleColorChange(n);this.bgColorStr=t.backgroundColor,this.colorStr=t.foregroundColor},this._color="#000",this._icons=void 0,this._label=void 0,this._smartButton=void 0,this.state={_color:{backgroundColor:"#000",foregroundColor:"#fff"}}}renderSmartButton(n){return h(KolButtonWcTag,{_ariaControls:this.id,_customClass:n._customClass,_disabled:n._disabled,_hideLabel:!0,_icons:n._icons,_id:n._id,_label:n._label,_on:n._on,_tooltipAlign:n._tooltipAlign,_variant:n._variant})}render(){const n="object"==typeof this.state._smartButton&&null!==this.state._smartButton;return h(Host,{key:"0b334746c26463bbc697f08077e165e56b34a97f",class:"kol-badge"},h("span",{key:"83210f467b224cb691d844a0311f4a31a1ad6e79",class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},h(KolSpanWcTag,{key:"d5a3248d67baa494d9671e0da7de918511af084b",id:n?this.id:void 0,_allowMarkdown:!0,_icons:this._icons,_label:this._label}),n&&this.renderSmartButton(this.state._smartButton)))}validateColor(n){validateColor(this,n,{defaultValue:"#000",hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(n){objectObjectHandler(n,(()=>{try{n=parseJson(n)}catch(n){}setState(this,"_smartButton",n)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}static get style(){return{default:KolBadgeDefaultStyle0}}},[33,"kol-badge",{_color:[1],_icons:[1],_label:[1],_smartButton:[1,"_smart-button"],state:[32]},void 0,{_color:["validateColor"],_smartButton:["validateSmartButton"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-badge"].forEach((n=>{if("kol-badge"===n)customElements.get(n)||customElements.define(n,KolBadge$1)}))}const KolBadge=KolBadge$1,defineCustomElement=defineCustomElement$1;export{KolBadge,defineCustomElement};

package/dist/components/kol-breadcrumb.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Fragment,Host}from"@stencil/core/internal/client";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{e as KolIconTag,h as KolLinkTag}from"./component-names.js";import{j as a11yHintLabelingLandmarks}from"./prop.validators.js";import{v as validateLabel}from"./label.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",KolBreadcrumbDefaultStyle0=defaultStyleCss,KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return h("li",{key:e},0!==e&&h(KolIconTag,{_label:"",_icons:"codicon codicon-chevron-right"}),e===t?h("span",null,n._hideLabel?h(KolIconTag,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):h(Fragment,null,n._label)):h(KolLinkTag,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return h(Host,{key:"1cfa36fa9a381d7b470854ec4a550b54817e37d6",class:"kol-breadcrumb"},h("nav",{key:"d913f0b8853e65302801b62abb9ee1a7911ba264","aria-label":this.state._label},h("ul",{key:"9719d99bcfedb925e819b0abf14977692fdabc76"},0===this.state._links.length&&h("li",{key:"1681efdfcdb0eb6d31fe0baf14efa89208ef04e9"},h(KolIconTag,{key:"21f1969a164aaa85d48a8e985e2e788be10a5135",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:KolBreadcrumbDefaultStyle0}}},[33,"kol-breadcrumb",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb"].forEach((n=>{if("kol-breadcrumb"===n)customElements.get(n)||customElements.define(n,KolBreadcrumb$1)}))}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Fragment,Host}from"@stencil/core/internal/client";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{w as watchNavLinks}from"./validation2.js";import{e as KolIconTag,h as KolLinkTag}from"./component-names.js";import{i as a11yHintLabelingLandmarks}from"./prop.validators.js";import{v as validateLabel}from"./label.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  li,\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    place-items: center;\n  }\n  .kol-icon::part(separator) {\n    font-weight: 900;\n    font-size: 0.7em;\n  }\n  .kol-icon::part(separator):before {\n    content: \"\\f054\";\n    font-family: \"Font Awesome 6 Free\";\n  }\n}",KolBreadcrumbDefaultStyle0=defaultStyleCss,KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.renderLink=(n,e)=>{const t=this.state._links.length-1;return h("li",{key:e},0!==e&&h(KolIconTag,{_label:"",_icons:"codicon codicon-chevron-right"}),e===t?h("span",null,n._hideLabel?h(KolIconTag,{_label:n._label,_icons:"string"==typeof n._icons?n._icons:"codicon codicon-symbol-event"}):h(Fragment,null,n._label)):h(KolLinkTag,Object.assign({},n)))},this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return h(Host,{key:"1cfa36fa9a381d7b470854ec4a550b54817e37d6",class:"kol-breadcrumb"},h("nav",{key:"d913f0b8853e65302801b62abb9ee1a7911ba264","aria-label":this.state._label},h("ul",{key:"9719d99bcfedb925e819b0abf14977692fdabc76"},0===this.state._links.length&&h("li",{key:"1681efdfcdb0eb6d31fe0baf14efa89208ef04e9"},h(KolIconTag,{key:"21f1969a164aaa85d48a8e985e2e788be10a5135",_label:"",_icons:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateLabel(n,e,t=!1){t||removeNavLabel(this.state._label),validateLabel(this,n,{required:!0}),a11yHintLabelingLandmarks(n),addNavLabel(this.state._label)}validateLinks(n){watchNavLinks("KolBreadcrumb",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:KolBreadcrumbDefaultStyle0}}},[33,"kol-breadcrumb",{_label:[1],_links:[1],state:[32]},void 0,{_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb"].forEach((n=>{if("kol-breadcrumb"===n)customElements.get(n)||customElements.define(n,KolBreadcrumb$1)}))}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";const KolButtonGroupWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.state={}}render(){return h(Host,{key:"d70d07aee8bf780d21f93ad48d5549e65e889f02",class:"kol-button-group-wc"},h("slot",{key:"3dfb84fee69b23211aab06b29d28690cdebe5ffc"}))}},[4,"kol-button-group-wc",{state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-group-wc"].forEach((t=>{if("kol-button-group-wc"===t)customElements.get(t)||customElements.define(t,KolButtonGroupWc$1)}))}const KolButtonGroupWc=KolButtonGroupWc$1,defineCustomElement=defineCustomElement$1;export{KolButtonGroupWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";const KolButtonGroupWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.state={}}render(){return h(Host,{key:"77e84f58559b809dcbd4c386e1394d279fa7a54d",class:"kol-button-group-wc"},h("slot",{key:"49f435ce5f6c78e6923f6983dfd1944553311f8c"}))}},[4,"kol-button-group-wc",{state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-group-wc"].forEach((t=>{if("kol-button-group-wc"===t)customElements.get(t)||customElements.define(t,KolButtonGroupWc$1)}))}const KolButtonGroupWc=KolButtonGroupWc$1,defineCustomElement=defineCustomElement$1;export{KolButtonGroupWc,defineCustomElement};

package/dist/components/kol-button-group-wc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"kol-button-group-wc.js","mappings":";;;;;~~MAWaA~~,kBAAgB;;;;qBASe,EAAE;;IARtC,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,qBAAqB,IAChC,8DAAQ,CACF,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonGroupWc"],"sources":["src/components/button-group/component.tsx"],"sourcesContent":["import type { ButtonGroupAPI, ButtonGroupStates } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, State } from '@stencil/core';\n\n~~@Component({\n\ttag: 'kol-button-group-wc',\n\tshadow: false,\n})\n~~/*\n @deprecated This component has been deprecated as it does not contribute significantly to accessibility.\n */\nexport class KolButtonGroupWc implements ButtonGroupAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-group-wc\">\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: ButtonGroupStates = {};\n}\n"],"version":3}
1	+ {"file":"kol-button-group-wc.js","mappings":";;;;;MAYaA,kBAAgB;;;;qBASe,EAAE;;IARtC,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,qBAAqB,IAChC,8DAAQ,CACF,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonGroupWc"],"sources":["src/components/button-group/component.tsx"],"sourcesContent":["import type { ButtonGroupAPI, ButtonGroupStates } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, State } from '@stencil/core';\n\n/*\n @deprecated This component has been deprecated as it does not contribute significantly to accessibility.\n * @internal\n */\n@Component({\n\ttag: 'kol-button-group-wc',\n\tshadow: false,\n})\nexport class KolButtonGroupWc implements ButtonGroupAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button-group-wc\">\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@State() public state: ButtonGroupStates = {};\n}\n"],"version":3}