npm - @public-ui/components - Versions diffs - 1.7.0-rc.11 → 1.7.0-rc.13 - Mend

@public-ui/components 1.7.0-rc.11 → 1.7.0-rc.13

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

package/dist/components/devtools.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{U as initKoliBri,V as getDevMode,W as renderDevAdvice,k as getDocument,L as Log,v as getExperimentalMode,X as getColorContrastAnalysis,Y as KoliBriUtils,Z as koliBriA11yColorContrast,_ as KoliBri,T as koliBriQuerySelector,$ as koliBriQuerySelectorAll,a0 as koliBriQuerySelectorColors,p as parseJson,a1 as stringifyJson}from"./prop.validators.js";function prototypeKoliBri(o,e){try{Object.defineProperty(KoliBri,o,{get:function(){return e}})}catch(e){Log.debug(`KoliBri property ${o} is already bind.`)}}const metaModeLog=(o,e)=>Log.debug(`${o} ${e?"":"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 o=getDocument().body,e=getDocument().createElement("svg");if(e.setAttribute("aria-label","KoliBri-DevTools"),e.setAttribute("xmlns","http://www.w3.org/2000/svg"),e.setAttribute("role","toolbar"),e.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),e.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(e),metaModeLog("Development mode",getDevMode()),metaModeLog("Experimental mode",getExperimentalMode()),metaModeLog("Color contrast analysis",getColorContrastAnalysis()),getColorContrastAnalysis()){const e=setTimeout((()=>{clearTimeout(e),setInterval((()=>{KoliBriUtils.queryHtmlElementColors(getDocument().createElement("div"),koliBriA11yColorContrast(o),!1,!1)}),1e4)}),2500)}}};export{initialize};
+import{U as initKoliBri,V as getDevMode,W as renderDevAdvice,l as getDocument,L as Log,v as getExperimentalMode,X as getColorContrastAnalysis,Y as KoliBriUtils,Z as koliBriA11yColorContrast,_ as KoliBri,T as koliBriQuerySelector,$ as koliBriQuerySelectorAll,a0 as koliBriQuerySelectorColors,f as parseJson,a1 as stringifyJson}from"./prop.validators.js";function prototypeKoliBri(o,e){try{Object.defineProperty(KoliBri,o,{get:function(){return e}})}catch(e){Log.debug(`KoliBri property ${o} is already bind.`)}}const metaModeLog=(o,e)=>Log.debug(`${o} ${e?"":"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 o=getDocument().body,e=getDocument().createElement("svg");if(e.setAttribute("aria-label","KoliBri-DevTools"),e.setAttribute("xmlns","http://www.w3.org/2000/svg"),e.setAttribute("role","toolbar"),e.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),e.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(e),metaModeLog("Development mode",getDevMode()),metaModeLog("Experimental mode",getExperimentalMode()),metaModeLog("Color contrast analysis",getColorContrastAnalysis()),getColorContrastAnalysis()){const e=setTimeout((()=>{clearTimeout(e),setInterval((()=>{KoliBriUtils.queryHtmlElementColors(getDocument().createElement("div"),koliBriA11yColorContrast(o),!1,!1)}),1e4)}),2500)}}};export{initialize};

package/dist/components/hide-error.js ADDED Viewed

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{e as watchBoolean,b as watchString,B as a11yHintDisabled,a as a11yHint,d as devHint,q as setState,o as objectObjectHandler,f as parseJson}from"./prop.validators.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events.js";import{c as validateTabIndex}from"./alternative-button-link-role.js";import{A as AssociatedInputController}from"./component5.js";import{v as validateHideLabel}from"./component2.js";const getRenderStates=t=>{const e="string"==typeof t._error&&t._error.length>0&&!0===t._touched,o="string"==typeof t._hint&&t._hint.length>0,n=[];return!0===e&&n.push(`${t._id}-error`),!0===o&&n.push(`${t._id}-hint`),{hasError:e,hasHint:o,ariaDescribedBy:n}},validateAdjustHeight=(t,e)=>{watchBoolean(t,"_adjustHeight",e)},validateTouched=(t,e)=>{watchBoolean(t,"_touched",e)};class ControlledInputController extends AssociatedInputController{constructor(t,e,o){super(t,e,o),this.component=t}validateAlert(t){watchBoolean(this.component,"_alert",t)}validateTouched(t){validateTouched(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAlert(this.component._alert),this.validateTouched(this.component._touched)}}class InputController extends ControlledInputController{constructor(t,e,o){super(t,e,o),this.valueChangeListeners=[],this.onFacade={onBlur:this.onBlur.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:this.onFocus.bind(this)},this.component=t}validateAccessKey(t){watchString(this.component,"_accessKey",t)}validateAdjustHeight(t){validateAdjustHeight(this.component,t)}validateDisabled(t){watchBoolean(this.component,"_disabled",t),!0===t&&a11yHintDisabled()}validateError(t){watchString(this.component,"_error",t)}validateHideLabel(t){validateHideLabel(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideLabel&&a11yHint("Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.")}}})}validateHint(t){watchString(this.component,"_hint",t)}validateId(t){watchString(this.component,"_id",t,{hooks:{afterPatch:()=>{this.setAttribute("id",this.formAssociated,this.component.state._id)}},minLength:1}),""!==t&&void 0!==t||devHint("Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.")}validateLabel(t){validateLabelWithExpertSlot(this.component,t)}validateOn(t){"object"==typeof t&&setState(this.component,"_on",t)}validateSmartButton(t){objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}setState(this.component,"_smartButton",t)}))}validateTabIndex(t){validateTabIndex(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateAccessKey(this.component._accessKey),this.validateAdjustHeight(this.component._adjustHeight),this.validateError(this.component._error),this.validateDisabled(this.component._disabled),this.validateHideLabel(this.component._hideLabel),this.validateHint(this.component._hint),this.validateId(this.component._id),this.validateLabel(this.component._label),this.validateSmartButton(this.component._smartButton),this.validateOn(this.component._on),this.validateTabIndex(this.component._tabIndex)}onBlur(t){var e;this.component._alert=!0,this.component._touched=!0,stopPropagation(t),tryToDispatchKoliBriEvent("blur",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onBlur)&&this.component._on.onBlur(t)}onChange(t){var e;const o=t.target.value;stopPropagation(t),tryToDispatchKoliBriEvent("change",this.host,o),this.setFormAssociatedValue(o),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onChange)&&this.component._on.onChange(t,o),this.valueChangeListeners.forEach((t=>t(o)))}onClick(t){var e;stopPropagation(t),tryToDispatchKoliBriEvent("click",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onClick)&&this.component._on.onClick(t)}onFocus(t){var e;this.component._alert=!0,stopPropagation(t),tryToDispatchKoliBriEvent("focus",this.host),"function"==typeof(null===(e=this.component._on)||void 0===e?void 0:e.onFocus)&&this.component._on.onFocus(t)}setValue(t,e){var o;this.setFormAssociatedValue(e),"function"==typeof(null===(o=this.component._on)||void 0===o?void 0:o.onChange)&&this.component._on.onChange(t,e)}addValueChangeListener(t){this.valueChangeListeners.push(t)}}const validateHideError=(t,e,o)=>{watchBoolean(t,"_hideError",e,o)};export{InputController as I,getRenderStates as g,validateHideError as v};

package/dist/components/hide-error.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"hide-error.js","mappings":";;;;;;;;;;MASa,eAAe,GAAG,CAAC,KAK/B;EAKA,MAAM,QAAQ,GAAG,OAAO,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,CAAC;EACxG,MAAM,OAAO,GAAG,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;EAE1E,MAAM,eAAe,GAAa,EAAE,CAAC;EACrC,IAAI,QAAQ,KAAK,IAAI,EAAE;IACtB,eAAe,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,CAAC;GAC3C;EACD,IAAI,OAAO,KAAK,IAAI,EAAE;IACrB,eAAe,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,CAAC;GAC1C;EACD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC;AAC/C;;ACfO,MAAM,oBAAoB,GAAG,CAAC,SAAoC,EAAE,KAA4B;EACtG,YAAY,CAAC,SAAS,EAAE,eAAe,EAAE,KAAK,CAAC,CAAC;AACjD,CAAC;;ACFM,MAAM,eAAe,GAAG,CAAC,SAAoC,EAAE,KAAuB;EAC5F,YAAY,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;AAC5C,CAAC;;MCVY,yBAA0B,SAAQ,yBAAyB;EAGvE,YAAmB,SAA4C,EAAE,IAAY,EAAE,IAAkB;IAChG,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;GAC3B;EAEM,aAAa,CAAC,KAAe;IACnC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;GAC9C;EAEM,eAAe,CAAC,KAAe;IACrC,eAAe,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;GACvC;EAEM,iBAAiB;IACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAC1C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;GAC9C;;;MCVW,eAAgB,SAAQ,yBAAyB;EAK7D,YAAmB,SAA4C,EAAE,IAAY,EAAE,IAAkB;IAChG,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;IAHb,yBAAoB,GAA0B,EAAE,CAAC;IAsLlD,aAAQ,GAAG;MAC1B,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;MAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;MAClC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;MAChC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;KAChC,CAAC;IAvLD,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;GAC3B;EAEM,iBAAiB,CAAC,KAAc;IACtC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;GACjD;EAEM,oBAAoB,CAAC,KAA4B;IACvD,oBAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;GAC5C;EAEM,gBAAgB,CAAC,KAAe;IACtC,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;IACjD,IAAI,KAAK,KAAK,IAAI,EAAE;MACnB,gBAAgB,EAAE,CAAC;KACnB;GACD;EAEM,aAAa,CAAC,KAAc;IAClC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;GAC7C;EAEM,iBAAiB,CAAC,KAAe;IACvC,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE;MACxC,KAAK,EAAE;QACN,UAAU,EAAE;UACX,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU,EAAE;YACpC,QAAQ,CAAC,4HAA4H,CAAC,CAAC;WACvI;SACD;OACD;KACD,CAAC,CAAC;GACH;EAEM,YAAY,CAAC,KAAc;IACjC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;GAC5C;EAEM,UAAU,CAAC,KAAc;IAC/B,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE;MACzC,KAAK,EAAE;QACN,UAAU,EAAE;UACX,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAa,CAAC,CAAC;SACjF;OACD;MACD,SAAS,EAAE,CAAC;KACZ,CAAC,CAAC;IACH,IAAI,KAAK,KAAK,EAAE,IAAI,OAAO,KAAK,KAAK,WAAW,EAAE;MACjD,OAAO,CAAC,wHAAwH,CAAC,CAAC;KAClI;GACD;EAEM,aAAa,CAAC,KAAmC;IACvD,2BAA2B,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;GACnD;EAEM,UAAU,CAAC,KAA0B;IAC3C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;MAC9B,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;KACvC;GACD;EAEM,mBAAmB,CAAC,KAA4B;IACtD,mBAAmB,CAAC,KAAK,EAAE;MAC1B,IAAI;QACH,KAAK,GAAG,SAAS,CAAc,KAAe,CAAC,CAAC;OAEhD;MAAC,OAAO,CAAC,EAAE;OAEX;MACD,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;KAChD,CAAC,CAAC;GACH;EAEM,gBAAgB,CAAC,KAAc;IACrC,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;GACxC;EAEM,iBAAiB;IACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC1B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAClD,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IACxD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAC1C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAChD,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAClD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IACxC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAC1C,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IACtD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACpC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;GAChD;EAES,MAAM,CAAC,KAAY;;IAC5B,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,SAAS,CAAC,QAAQ,GAAG,IAAI,CAAC;IAG/B,eAAe,CAAC,KAAK,CAAC,CAAC;IACvB,yBAAyB,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAG7C,IAAI,QAAO,MAAA,IAAI,CAAC,SAAS,CAAC,GAAG,0CAAE,MAAM,CAAA,KAAK,UAAU,EAAE;MACrD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KACjC;GACD;EAES,QAAQ,CAAC,KAAY;;IAC9B,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;IAGvD,eAAe,CAAC,KAAK,CAAC,CAAC;IACvB,yBAAyB,CAAC,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAGtD,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;IAGnC,IAAI,QAAO,MAAA,IAAI,CAAC,SAAS,CAAC,GAAG,0CAAE,QAAQ,CAAA,KAAK,UAAU,EAAE;MAQvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;KAC1C;IAKD,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;GACjE;EAES,OAAO,CAAC,KAAY;;IAE7B,eAAe,CAAC,KAAK,CAAC,CAAC;IACvB,yBAAyB,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAG9C,IAAI,QAAO,MAAA,IAAI,CAAC,SAAS,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;MACtD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KAClC;GACD;EAES,OAAO,CAAC,KAAY;;IAC7B,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC;IAG7B,eAAe,CAAC,KAAK,CAAC,CAAC;IACvB,yBAAyB,CAAC,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAG9C,IAAI,QAAO,MAAA,IAAI,CAAC,SAAS,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;MACtD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KAClC;GACD;EAEM,QAAQ,CAAC,KAAY,EAAE,KAAgC;;IAC7D,IAAI,CAAC,sBAAsB,CAAC,KAAe,CAAC,CAAC;IAC7C,IAAI,QAAO,MAAA,IAAI,CAAC,SAAS,CAAC,GAAG,0CAAE,QAAQ,CAAA,KAAK,UAAU,EAAE;MACvD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;KAC1C;GACD;EAEM,sBAAsB,CAAC,QAA6B;IAC1D,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACzC;;;MCjLW,iBAAiB,GAAG,CAAC,SAAoC,EAAE,KAAyB,EAAE,OAA6B;EAC/H,YAAY,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;AACvD;;;;","names":[],"sources":["src/components/input/controller.ts","src/types/props/adjust-height.ts","src/types/props/touched.ts","src/components/input-adapter-leanup/controller.ts","src/components/@deprecated/input/controller.ts","src/types/props/hide-error.ts"],"sourcesContent":["import { TouchedPropType } from '../../types/props/touched';\n\n/**\n * Berechnet in Abhängigkeit des Component-State, wie die\n * aria-describedby-Attributs gesetzt werden sollen.\n *\n * @param state State der Component\n * @returns Render-States\n */\nexport const getRenderStates = (state: {\n\t_error?: string;\n\t_hint?: string;\n\t_id: string;\n\t_touched?: TouchedPropType;\n}): {\n\thasError: boolean;\n\thasHint: boolean;\n\tariaDescribedBy: string[];\n} => {\n\tconst hasError = typeof state._error === 'string' && state._error.length > 0 && state._touched === true;\n\tconst hasHint = typeof state._hint === 'string' && state._hint.length > 0;\n\n\tconst ariaDescribedBy: string[] = [];\n\tif (hasError === true) {\n\t\tariaDescribedBy.push(`${state._id}-error`);\n\t}\n\tif (hasHint === true) {\n\t\tariaDescribedBy.push(`${state._id}-hint`);\n\t}\n\treturn { hasError, hasHint, ariaDescribedBy };\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type AdjustHeightPropType = boolean;\n\n/**\n * Adjusts the height of the element to its content.\n */\nexport type PropAdjustHeight = {\n\tadjustHeight: AdjustHeightPropType;\n};\n\n/* validator */\nexport const validateAdjustHeight = (component: Generic.Element.Component, value?: AdjustHeightPropType): void => {\n\twatchBoolean(component, '_adjustHeight', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type TouchedPropType = boolean;\n\n/**\n * Shows if the input was touched by a user.\n */\nexport type PropTouched = {\n\ttouched: TouchedPropType;\n};\n\n/* validator */\nexport const validateTouched = (component: Generic.Element.Component, value?: TouchedPropType): void => {\n\twatchBoolean(component, '_touched', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { validateTouched } from '../../types/props/touched';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { AssociatedInputController } from './associated.controller';\nimport { Props, Watches } from './types';\n\nexport class ControlledInputController extends AssociatedInputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this.component, '_alert', value);\n\t}\n\n\tpublic validateTouched(value?: boolean): void {\n\t\tvalidateTouched(this.component, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAlert(this.component._alert);\n\t\tthis.validateTouched(this.component._touched);\n\t}\n}\n","import { Generic } from '@a11y-ui/core';\n\nimport { InputTypeOnDefault } from '../../../types/input/types';\nimport { AdjustHeightPropType, validateAdjustHeight } from '../../../types/props/adjust-height';\nimport { LabelWithExpertSlotPropType, validateLabelWithExpertSlot } from '../../../types/props/label';\nimport { a11yHint, a11yHintDisabled, devHint } from '../../../utils/a11y.tipps';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../../utils/events';\nimport { objectObjectHandler, parseJson, setState, watchBoolean, watchString } from '../../../utils/prop.validators';\nimport { validateTabIndex } from '../../../utils/validators/tab-index';\nimport { ControlledInputController } from '../../input-adapter-leanup/controller';\nimport { Props as ButtonProps } from '../../button/types';\nimport { Props as AdapterProps } from '../../input-adapter-leanup/types';\nimport { Props, Watches } from './types';\nimport { validateHideLabel } from '../../../types/props/hide-label';\n\ntype ValueChangeListener = (value: string) => void;\n\nexport class InputController extends ControlledInputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props & AdapterProps;\n\n\tprivate readonly valueChangeListeners: ValueChangeListener[] = [];\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this.component, '_accessKey', value);\n\t}\n\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tvalidateAdjustHeight(this.component, value);\n\t}\n\n\tpublic validateDisabled(value?: boolean): void {\n\t\twatchBoolean(this.component, '_disabled', value);\n\t\tif (value === true) {\n\t\t\ta11yHintDisabled();\n\t\t}\n\t}\n\n\tpublic validateError(value?: string): void {\n\t\twatchString(this.component, '_error', value);\n\t}\n\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideLabel) {\n\t\t\t\t\t\ta11yHint('Property hide-label for inputs: Only use for exceptions like search inputs that are clearly identifiable by their context.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateHint(value?: string): void {\n\t\twatchString(this.component, '_hint', value);\n\t}\n\n\tpublic validateId(value?: string): void {\n\t\twatchString(this.component, '_id', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tthis.setAttribute('id', this.formAssociated, this.component.state._id as string);\n\t\t\t\t},\n\t\t\t},\n\t\t\tminLength: 1,\n\t\t});\n\t\tif (value === '' || typeof value === 'undefined') {\n\t\t\tdevHint(`Eine eindeutige ID an den Eingabefeldern ist nicht zwingend erforderlich, könnte aber für die E2E-Tests relevant sein.`);\n\t\t}\n\t}\n\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this.component, value);\n\t}\n\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tif (typeof value === 'object') {\n\t\t\tsetState(this.component, '_on', value);\n\t\t}\n\t}\n\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tobjectObjectHandler(value, () => {\n\t\t\ttry {\n\t\t\t\tvalue = parseJson<ButtonProps>(value as string);\n\t\t\t\t// eslint-disable-next-line no-empty\n\t\t\t} catch (e) {\n\t\t\t\t// value behält den ursprünglichen Wert\n\t\t\t}\n\t\t\tsetState(this.component, '_smartButton', value);\n\t\t});\n\t}\n\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this.component, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAccessKey(this.component._accessKey);\n\t\tthis.validateAdjustHeight(this.component._adjustHeight);\n\t\tthis.validateError(this.component._error);\n\t\tthis.validateDisabled(this.component._disabled);\n\t\tthis.validateHideLabel(this.component._hideLabel);\n\t\tthis.validateHint(this.component._hint);\n\t\tthis.validateId(this.component._id);\n\t\tthis.validateLabel(this.component._label);\n\t\tthis.validateSmartButton(this.component._smartButton);\n\t\tthis.validateOn(this.component._on);\n\t\tthis.validateTabIndex(this.component._tabIndex);\n\t}\n\n\tprotected onBlur(event: Event): void {\n\t\tthis.component._alert = true;\n\t\tthis.component._touched = true;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('blur', this.host);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onBlur === 'function') {\n\t\t\tthis.component._on.onBlur(event);\n\t\t}\n\t}\n\n\tprotected onChange(event: Event): void {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, value);\n\n\t\t// Static form handling\n\t\tthis.setFormAssociatedValue(value);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onChange === 'function') {\n\t\t\t/**\n\t\t\t * TODO\n\t\t\t * Value-Handling muss für InputDate und InputNumber optimiert werden\n\t\t\t * - value\n\t\t\t * - valueAsNumber\n\t\t\t * - valueAsDate\n\t\t\t */\n\t\t\tthis.component._on.onChange(event, value);\n\t\t}\n\n\t\t/**\n\t\t * TODO: Was ist das?\n\t\t */\n\t\tthis.valueChangeListeners.forEach((listener) => listener(value));\n\t}\n\n\tprotected onClick(event: Event): void {\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('click', this.host);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onClick === 'function') {\n\t\t\tthis.component._on.onClick(event);\n\t\t}\n\t}\n\n\tprotected onFocus(event: Event): void {\n\t\tthis.component._alert = true;\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('focus', this.host);\n\n\t\t// Callback\n\t\tif (typeof this.component._on?.onFocus === 'function') {\n\t\t\tthis.component._on.onFocus(event);\n\t\t}\n\t}\n\n\tpublic setValue(event: Event, value: string | number | boolean): void {\n\t\tthis.setFormAssociatedValue(value as string);\n\t\tif (typeof this.component._on?.onChange === 'function') {\n\t\t\tthis.component._on.onChange(event, value);\n\t\t}\n\t}\n\n\tpublic addValueChangeListener(listener: ValueChangeListener) {\n\t\tthis.valueChangeListeners.push(listener);\n\t}\n\n\t/**\n\t * Hinweis: In der Subklasse 'InputPasswordController'\n\t * werden die Methoden onBlur und onFocus\n\t * überschrieben.\n\t * Es werden somit zunächst die Methoden der\n\t * Subklasse ausgeführt und danach die der\n\t * Oberklassen.\n\t */\n\tpublic readonly onFacade = {\n\t\tonBlur: this.onBlur.bind(this),\n\t\tonChange: this.onChange.bind(this),\n\t\tonClick: this.onClick.bind(this),\n\t\tonFocus: this.onFocus.bind(this),\n\t};\n}\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean, WatchBooleanOptions } from '../../utils/prop.validators';\n\n/* types */\nexport type HideErrorPropType = boolean;\n\n/**\n * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n */\nexport type PropHideError = {\n\thideError: HideErrorPropType;\n};\n\n/* validator */\nexport const validateHideError = (component: Generic.Element.Component, value?: HideErrorPropType, options?: WatchBooleanOptions): void => {\n\twatchBoolean(component, '_hideError', value, options);\n};\n"],"version":3}

package/dist/components/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{setMode}from"@stencil/core/internal/client";export{getAssetPath,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";import{r as register}from"./i18n.js";export{r as register,t as translations}from"./i18n.js";import{s as setThemeStyle,L as Log,g as getThemeDetails}from"./prop.validators.js";export{K as KoliBriDevHelper,c as configKoliBri}from"./prop.validators.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";const appGlobalScript=async()=>{setMode((e=>(e.shadowRoot instanceof ShadowRoot&&setThemeStyle(e,getThemeDetails(e)),"default"))),await register([],[]),import("./devtools.js").then((e=>{"object"==typeof e&&null!==e&&"function"==typeof e.initialize&&e.initialize()})).catch((e=>{Log.error(e)}))},globalScripts=appGlobalScript;class ToasterService{constructor(e){this.document=e,this.toastContainerElement=this.document.createElement("kol-toast-container"),this.document.body.prepend(this.toastContainerElement)}static getInstance(e){let t=this.instances.get(e);return t||(t=new ToasterService(e),this.instances.set(e,t)),t}dispose(){const e=this.toastContainerElement;e?(this.toastContainerElement=void 0,e.remove()):console.warn("Toaster service is already disposed.")}async enqueue(e){var t;await(null===(t=this.toastContainerElement)||void 0===t?void 0:t.enqueue(e))}}ToasterService.instances=new Map,globalScripts();export{ToasterService};
+import{setMode}from"@stencil/core/internal/client";export{getAssetPath,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";import{r as register}from"./i18n.js";export{r as register,t as translations}from"./i18n.js";import{s as setThemeStyle,L as Log,p as processEnv,g as getThemeDetails}from"./prop.validators.js";export{K as KoliBriDevHelper,c as configKoliBri}from"./prop.validators.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";const appGlobalScript=async()=>{setMode((e=>(e.shadowRoot instanceof ShadowRoot&&setThemeStyle(e,getThemeDetails(e)),"default"))),await register([],[]),import("./devtools.js").then((e=>{"object"==typeof e&&null!==e&&"function"==typeof e.initialize&&e.initialize()})).catch((e=>{Log.error(e)})),processEnv&&import("./index2.js")},globalScripts=appGlobalScript;class ToasterService{constructor(e){this.document=e,this.toastContainerElement=this.document.createElement("kol-toast-container"),this.document.body.prepend(this.toastContainerElement)}static getInstance(e){let t=this.instances.get(e);return t||(t=new ToasterService(e),this.instances.set(e,t)),t}dispose(){const e=this.toastContainerElement;e?(this.toastContainerElement=void 0,e.remove()):console.warn("Toaster service is already disposed.")}async enqueue(e){var t;await(null===(t=this.toastContainerElement)||void 0===t?void 0:t.enqueue(e))}}ToasterService.instances=new Map,globalScripts();export{ToasterService};

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

	@@ -1 +1 @@
1	- {"file":"index.js","mappings":";;;;;;;;;;;~~AAOA~~,wBAAe;EACd,OAAO,CAAC,CAAC,GAAG;IACX,IAAI,GAAG,CAAC,UAAU,YAAY,UAAU,EAAE;MACzC,aAAa,CAAC,GAAG,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC;KACzC;IACD,OAAO,SAAS,CAAC;GACjB,CAAC,CAAC;EAEH,MAAM,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;EAEvB,OAAO,eAAY,CAAC;KAClB,IAAI,CAAC,CAAC,QAAQ;IACd,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,IAAI,IAAI,OAAO,QAAQ,CAAC,UAAU,KAAK,UAAU,EAAE;MACnG,QAAQ,CAAC,UAAU,EAAE,CAAC;KACtB;GACD,CAAC;KACD,KAAK,CAAC,CAAC,KAAK;IACZ,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;GACjB,CAAC,CAAC;~~AAML~~,CAAC;;~~AC9BM~~,MAAM,aAAa,GAAG,eAAe;;MCC/B,cAAc;EAK1B,YAAqC,QAAkB;IAAlB,aAAQ,GAAR,QAAQ,CAAU;IACtD,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAChF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;GACvD;EAKM,OAAO,WAAW,CAAC,QAAkB;IAC3C,IAAI,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC5C,IAAI,CAAC,QAAQ,EAAE;MACd,QAAQ,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC;MACxC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;KACvC;IACD,OAAO,QAAQ,CAAC;GAChB;EAEM,OAAO;IACb,MAAM,OAAO,GAAG,IAAI,CAAC,qBAAqB,CAAC;IAC3C,IAAI,OAAO,EAAE;MACZ,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;MACvC,OAAO,CAAC,MAAM,EAAE,CAAC;KACjB;SAAM;MACN,OAAO,CAAC,IAAI,CAAC,sCAAsC,CAAC,CAAC;KACrD;GACD;EAEM,MAAM,OAAO,CAAC,KAAY;;IAChC,OAAM,MAAA,IAAI,CAAC,qBAAqB,0CAAE,OAAO,CAAC,KAAK,CAAC,CAAA,CAAC;GACjD;;AAjCuB,wBAAS,GAAkC,IAAI,GAAG,EAA4B;;;;;;","names":[],"sources":["src/global/script.ts","@stencil/core/internal/app-globals","src/components/toast/toaster.tsx"],"sourcesContent":["import { getThemeDetails, setThemeStyle } from '@a11y-ui/core';\nimport { setMode } from '@stencil/core';\n\nimport { register } from '../core';\nimport { Log } from '../utils/dev.utils';\n\n// ts-prune-ignore-next\nexport default async (): Promise<void> => {\n\tsetMode((elm) => {\n\t\tif (elm.shadowRoot instanceof ShadowRoot) {\n\t\t\tsetThemeStyle(elm, getThemeDetails(elm));\n\t\t}\n\t\treturn 'default';\n\t});\n\n\tawait register([], []);\n\n\timport('./devtools')\n\t\t.then((devTools) => {\n\t\t\tif (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {\n\t\t\t\tdevTools.initialize();\n\t\t\t}\n\t\t})\n\t\t.catch((error) => {\n\t\t\tLog.error(error);\n\t\t});\n\n\t/* Import scripts necessary for the development server, i.e. the /dev/.html files. Only include in development environment. /\n\tif (~~process.env.NODE_ENV === 'development'~~) {\n\t\timport('../dev');\n\t}\n};\n","import appGlobalScript from '/home/runner/work/kolibri/kolibri/packages/components/src/global/script.ts';\nexport const globalScripts = appGlobalScript;\n","import { Toast } from '../toast-container/types';\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(private readonly document: Document) {\n\t\tthis.toastContainerElement = this.document.createElement('kol-toast-container');\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) {\n\t\tlet instance = this.instances.get(document);\n\t\tif (!instance) {\n\t\t\tinstance = new ToasterService(document);\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\tconsole.warn('Toaster service is already disposed.');\n\t\t}\n\t}\n\n\tpublic async enqueue(toast: Toast) {\n\t\tawait this.toastContainerElement?.enqueue(toast);\n\t}\n}\n"],"version":3}
1	+ {"file":"index.js","mappings":";;;;;;;;;;;AAQA,wBAAe;EACd,OAAO,CAAC,CAAC,GAAG;IACX,IAAI,GAAG,CAAC,UAAU,YAAY,UAAU,EAAE;MACzC,aAAa,CAAC,GAAG,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC;KACzC;IACD,OAAO,SAAS,CAAC;GACjB,CAAC,CAAC;EAEH,MAAM,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;EAEvB,OAAO,eAAY,CAAC;KAClB,IAAI,CAAC,CAAC,QAAQ;IACd,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,IAAI,IAAI,OAAO,QAAQ,CAAC,UAAU,KAAK,UAAU,EAAE;MACnG,QAAQ,CAAC,UAAU,EAAE,CAAC;KACtB;GACD,CAAC;KACD,KAAK,CAAC,CAAC,KAAK;IACZ,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;GACjB,CAAC,CAAC;EAGJ,IAAI,UAAU,EAAE;IACf,OAAO,aAAQ,CAAC,CAAC;GACjB;AACF,CAAC;;AC/BM,MAAM,aAAa,GAAG,eAAe;;MCC/B,cAAc;EAK1B,YAAqC,QAAkB;IAAlB,aAAQ,GAAR,QAAQ,CAAU;IACtD,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAChF,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;GACvD;EAKM,OAAO,WAAW,CAAC,QAAkB;IAC3C,IAAI,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC5C,IAAI,CAAC,QAAQ,EAAE;MACd,QAAQ,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC;MACxC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;KACvC;IACD,OAAO,QAAQ,CAAC;GAChB;EAEM,OAAO;IACb,MAAM,OAAO,GAAG,IAAI,CAAC,qBAAqB,CAAC;IAC3C,IAAI,OAAO,EAAE;MACZ,IAAI,CAAC,qBAAqB,GAAG,SAAS,CAAC;MACvC,OAAO,CAAC,MAAM,EAAE,CAAC;KACjB;SAAM;MACN,OAAO,CAAC,IAAI,CAAC,sCAAsC,CAAC,CAAC;KACrD;GACD;EAEM,MAAM,OAAO,CAAC,KAAY;;IAChC,OAAM,MAAA,IAAI,CAAC,qBAAqB,0CAAE,OAAO,CAAC,KAAK,CAAC,CAAA,CAAC;GACjD;;AAjCuB,wBAAS,GAAkC,IAAI,GAAG,EAA4B;;;;;;","names":[],"sources":["src/global/script.ts","@stencil/core/internal/app-globals","src/components/toast/toaster.tsx"],"sourcesContent":["import { getThemeDetails, setThemeStyle } from '@a11y-ui/core';\nimport { setMode } from '@stencil/core';\n\nimport { register } from '../core';\nimport { Log } from '../utils/dev.utils';\nimport { processEnv } from '../utils/reuse';\n\n// ts-prune-ignore-next\nexport default async (): Promise<void> => {\n\tsetMode((elm) => {\n\t\tif (elm.shadowRoot instanceof ShadowRoot) {\n\t\t\tsetThemeStyle(elm, getThemeDetails(elm));\n\t\t}\n\t\treturn 'default';\n\t});\n\n\tawait register([], []);\n\n\timport('./devtools')\n\t\t.then((devTools) => {\n\t\t\tif (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {\n\t\t\t\tdevTools.initialize();\n\t\t\t}\n\t\t})\n\t\t.catch((error) => {\n\t\t\tLog.error(error);\n\t\t});\n\n\t/* Import scripts necessary for the development server, i.e. the /dev/.html files. Only include in development environment. /\n\tif (processEnv) {\n\t\timport('../dev');\n\t}\n};\n","import appGlobalScript from '/home/runner/work/kolibri/kolibri/packages/components/src/global/script.ts';\nexport const globalScripts = appGlobalScript;\n","import { Toast } from '../toast-container/types';\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(private readonly document: Document) {\n\t\tthis.toastContainerElement = this.document.createElement('kol-toast-container');\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) {\n\t\tlet instance = this.instances.get(document);\n\t\tif (!instance) {\n\t\t\tinstance = new ToasterService(document);\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\tconsole.warn('Toaster service is already disposed.');\n\t\t}\n\t}\n\n\tpublic async enqueue(toast: Toast) {\n\t\tawait this.toastContainerElement?.enqueue(toast);\n\t}\n}\n"],"version":3}

package/dist/components/index2.js ADDED Viewed

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+switch(location.pathname){case"/dev/toaster.html":import("./toaster.js");break;case"/dev/reprod-accordion-does-not-toggle-with-open.html":import("./reprod-accordion-does-not-toggle-with-open.js");break;case"/dev/details-synced-open-state.html":import("./details-synced-open-state.js")}

package/dist/components/index2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"index2.js","mappings":";;;AAEA,QAAQ,QAAQ,CAAC,QAAQ;EACxB,KAAK,mBAAmB;IACvB,OAAO,cAAW,CAAC,CAAC;IACpB,MAAM;EACP,KAAK,sDAAsD;IAC1D,OAAO,iDAA8C,CAAC,CAAC;IACvD,MAAM;EACP,KAAK,qCAAqC;IACzC,OAAO,gCAA6B,CAAC,CAAC;IACtC,MAAM;","names":[],"sources":["src/dev/index.ts"],"sourcesContent":["import './theme-registration';\n\nswitch (location.pathname) {\n\tcase '/dev/toaster.html':\n\t\timport('./toaster');\n\t\tbreak;\n\tcase '/dev/reprod-accordion-does-not-toggle-with-open.html':\n\t\timport('./reprod-accordion-does-not-toggle-with-open');\n\t\tbreak;\n\tcase '/dev/details-synced-open-state.html':\n\t\timport('./details-synced-open-state');\n\t\tbreak;\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{n as nonce}from"./prop.validators.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>abbr{cursor:help}",KolAbbr$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this._label=void 0,this._tooltipAlign="top",this._title=void 0,this.state={_label:"…",_tooltipAlign:"top"}}render(){return h(Host,null,h("abbr",{"aria-labelledby":this.nonce,role:"definition",tabindex:"0",title:this.state._label},h("span",{title:""},h("slot",null))),h("kol-tooltip-wc",{_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label}))}validateLabel(t){validateLabel(this,t)}validateTitle(t){this.validateLabel(t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}componentWillLoad(){this.validateLabel(this._label||this._title),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_label:["validateLabel"],_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-abbr",{_label:[1],_tooltipAlign:[1,"_tooltip-align"],_title:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-abbr","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-abbr":customElements.get(t)||customElements.define(t,KolAbbr$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolAbbr=KolAbbr$1,defineCustomElement=defineCustomElement$1;export{KolAbbr,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{n as nonce}from"./prop.validators.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>abbr{cursor:help}",KolAbbr$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this._label=void 0,this._tooltipAlign="top",this._title=void 0,this.state={_label:"…",_tooltipAlign:"top"}}render(){return h(Host,null,h("abbr",{"aria-labelledby":this.nonce,role:"definition",tabindex:"0",title:this.state._label},h("span",{title:""},h("slot",null))),h("kol-tooltip-wc",{_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label}))}validateLabel(t){validateLabel(this,t)}validateTitle(t){this.validateLabel(t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}componentWillLoad(){this.validateLabel(this._label||this._title),this.validateTooltipAlign(this._tooltipAlign)}static get watchers(){return{_label:["validateLabel"],_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-abbr",{_label:[1],_tooltipAlign:[1,"_tooltip-align"],_title:[1],state:[32]},void 0,{_label:["validateLabel"],_title:["validateTitle"],_tooltipAlign:["validateTooltipAlign"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-abbr","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((t=>{switch(t){case"kol-abbr":customElements.get(t)||customElements.define(t,KolAbbr$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolAbbr=KolAbbr$1,defineCustomElement=defineCustomElement$1;export{KolAbbr,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-abbr.js","mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,~~6sBAA6sB~~;;~~MCiBxtBA~~,SAAO;;;;;IACF,UAAK,GAAG,KAAK,EAAE,CAAC;;yBAwBqB,KAAK;;iBAc3B;MAC/B,MAAM,EAAE,GAAG;MACX,aAAa,EAAE,KAAK;KACpB;;EAvCM,MAAM;IACZ,QACC,EAAC,IAAI,QAEJ,+BAAuB,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IACzF,YAAM,KAAK,EAAC,EAAE,IACb,eAAQ,CACF,CACD,EACP,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,CACzG,EACN;GACF;EAsCM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAc;IAClC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,oBAAoB,CAAC,KAA4B;IACvD,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAClC;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["KolAbbr"],"sources":["src/components/abbr/style.css?tag=kol-abbr&mode=default&encapsulation=shadow","src/components/abbr/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host > abbr {\n\tcursor: help;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { nonce } from '../../utils/dev.utils';\nimport { API, States } from './types';\nimport { TooltipAlignPropType, validateTooltipAlign } from '../../types/props/tooltip-align';\n\n/*\n @slot - Der Begriff, der erläutert werden soll.\n /\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{/ eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex /}\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" tabindex=\"0\" title={this.state._label}>\n\t\t\t\t\t<span title=\"\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t</abbr>\n\t\t\t\t<kol-tooltip-wc _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._label}></kol-tooltip-wc>\n\t\t\t</Host>\n\t\t);\n\t}\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 where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/\n\t Deprecated: Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _title?: string;\n\n\t/\n\t Die State-Parameter repräsentieren den inneren State\n\t * einer Komponente.\n\t \n\t @see: https://stenciljs.com/docs/state\n\t /\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_tooltipAlign: 'top',\n\t};\n\n\t/\n\t Die Watch-Methoden dienen der Möglichkeit zur\n\t * Validierung der Werte eines Properties und\n\t * dem Mapping dessen auf einen anderen internen\n\t * State-Typ.\n\t \n\t @see: https://stenciljs.com/docs/properties#prop-validation\n\t */\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_title')\n\tpublic validateTitle(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._title);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-abbr.js","mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,iuBAAiuB;;MCiB5uBA,SAAO;;;;;IACF,UAAK,GAAG,KAAK,EAAE,CAAC;;yBAwBqB,KAAK;;iBAc3B;MAC/B,MAAM,EAAE,GAAG;MACX,aAAa,EAAE,KAAK;KACpB;;EAvCM,MAAM;IACZ,QACC,EAAC,IAAI,QAEJ,+BAAuB,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,YAAY,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IACzF,YAAM,KAAK,EAAC,EAAE,IACb,eAAQ,CACF,CACD,EACP,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,CACzG,EACN;GACF;EAsCM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAc;IAClC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,oBAAoB,CAAC,KAA4B;IACvD,oBAAoB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAClC;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAbbr"],"sources":["src/components/abbr/style.css?tag=kol-abbr&mode=default&encapsulation=shadow","src/components/abbr/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host > abbr {\n\tcursor: help;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { nonce } from '../../utils/dev.utils';\nimport { API, States } from './types';\nimport { TooltipAlignPropType, validateTooltipAlign } from '../../types/props/tooltip-align';\n\n/*\n @slot - Der Begriff, der erläutert werden soll.\n /\n@Component({\n\ttag: 'kol-abbr',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAbbr implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{/ eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex /}\n\t\t\t\t<abbr aria-labelledby={this.nonce} role=\"definition\" tabindex=\"0\" title={this.state._label}>\n\t\t\t\t\t<span title=\"\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t</abbr>\n\t\t\t\t<kol-tooltip-wc _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._label}></kol-tooltip-wc>\n\t\t\t</Host>\n\t\t);\n\t}\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 where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/\n\t Deprecated: Dieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _title?: string;\n\n\t/\n\t Die State-Parameter repräsentieren den inneren State\n\t * einer Komponente.\n\t \n\t @see: https://stenciljs.com/docs/state\n\t /\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_tooltipAlign: 'top',\n\t};\n\n\t/\n\t Die Watch-Methoden dienen der Möglichkeit zur\n\t * Validierung der Werte eines Properties und\n\t * dem Mapping dessen auf einen anderen internen\n\t * State-Typ.\n\t \n\t @see: https://stenciljs.com/docs/properties#prop-validation\n\t */\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_title')\n\tpublic validateTitle(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tvalidateTooltipAlign(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._title);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";import{m as featureHint,n as nonce,q as setState,l as processEnv}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}.content{inset:0 0 auto 0;width:100%}.transition{transition:height 0.3s ease-in-out}@media (prefers-reduced-motion){.transition{transition-duration:0s}}";featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this.contentElement=null,this.contentWrapperElement=null,this.contentObserver=null,this.transition=!1,this.catchContentElement=e=>{e&&(this.contentElement=e)},this.catchContentWrapperElement=e=>{e&&(this.contentWrapperElement=e)},this.onClick=e=>{this._open=!this._open,setTimeout((()=>{var t;"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&this.state._on.onClick(e,!0===this._open)}))},this._heading=void 0,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"…",_level:1}}resizeWrapper(e){const t=this.contentElement,n=this.contentWrapperElement,o=this.contentObserver;t&&n&&o&&(this._open?(n.style.display="block",setTimeout((()=>{var e;n.style.height=`${null!==(e=null==t?void 0:t.clientHeight)&&void 0!==e?e:0}px`})),e||o.observe(t),n.addEventListener("transitionend",(()=>{n.style.overflow=""}),{once:!0})):(n.style.overflow="hidden",o.unobserve(t),n.style.height="0",this.transition?n.addEventListener("transitionend",(()=>{n.style.display="none"}),{once:!0}):n.style.display="none"))}render(){return h(Host,null,h("div",{class:{accordion:!0,open:!0===this.state._open,close:!0!==this.state._open}},h("kol-heading-wc",{_label:"",_level:this.state._level},h("kol-button-wc",{_ariaControls:this.nonce,_ariaExpanded:this.state._open,_icon:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._label,_on:{onClick:this.onClick}})),h("div",{class:"header"},h("slot",{name:"header"})),h("div",{ref:this.catchContentWrapperElement,class:{wrapper:!0,transition:this.transition}},h("div",{ref:this.catchContentElement,"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},h("slot",{name:"content"})," ",h("slot",null)))))}validateHeading(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&setState(this,"_on",e)}validateOpen(e){validateOpen(this,e,{hooks:{afterPatch:()=>{this.resizeWrapper()}}})}componentWillLoad(){this.validateLabel(this._label||this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open),"test"!==processEnv&&(this.contentObserver=new ResizeObserver(this.resizeWrapper.bind(this))),setTimeout((()=>{this.contentObserver&&this.contentElement&&this.contentObserver.observe(this.contentElement)})),setTimeout((()=>{this.transition=!0}),200)}static get watchers(){return{_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-accordion",{_heading:[1],_label:[1],_level:[2],_on:[16],_open:[1540],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-accordion","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-accordion":customElements.get(e)||customElements.define(e,KolAccordion$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolAccordion=KolAccordion$1,defineCustomElement=defineCustomElement$1;export{KolAccordion,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";import{m as featureHint,n as nonce,q as setState}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.wrapper{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows 0.3s}.accordion.open .wrapper{grid-template-rows:1fr}.animation-wrapper{min-height:0;transition:visibility 0.3s;visibility:hidden}.accordion.open .animation-wrapper{visibility:visible}@media (prefers-reduced-motion){.animation-wrapper,.wrapper{transition-duration:0s}}.accordion kol-heading-wc kol-button-wc button kol-span-wc{justify-items:start}";featureHint("[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend"),featureHint("[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.");const KolAccordion$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.nonce=nonce(),this.onClick=e=>{this._open=!this._open,setTimeout((()=>{var t;"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&this.state._on.onClick(e,!0===this._open)}))},this._heading=void 0,this._label=void 0,this._level=1,this._on=void 0,this._open=!1,this.state={_label:"…",_level:1}}render(){return h(Host,null,h("div",{class:{accordion:!0,open:!0===this.state._open}},h("kol-heading-wc",{_label:"",_level:this.state._level},h("kol-button-wc",{_ariaControls:this.nonce,_ariaExpanded:this.state._open,_icon:this.state._open?"codicon codicon-remove":"codicon codicon-add",_label:this.state._label,_on:{onClick:this.onClick}})),h("div",{class:"header"},h("slot",{name:"header"})),h("div",{class:"wrapper"},h("div",{class:"animation-wrapper"},h("div",{"aria-hidden":!1===this.state._open?"true":void 0,class:"content",id:this.nonce},h("slot",{name:"content"})," ",h("slot",null))))))}validateHeading(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onClick&&setState(this,"_on",e)}validateOpen(e){validateOpen(this,e)}componentWillLoad(){this.validateLabel(this._label||this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateOpen(this._open)}static get watchers(){return{_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-accordion",{_heading:[1],_label:[1],_level:[2],_on:[16],_open:[1540],state:[32]},void 0,{_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_open:["validateOpen"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-accordion","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-accordion":customElements.get(e)||customElements.define(e,KolAccordion$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolAccordion=KolAccordion$1,defineCustomElement=defineCustomElement$1;export{KolAccordion,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-accordion.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,i7BAAi7B;;ACcz8B,WAAW,CAAC;;;;yCAI6B,CAAC,CAAC;AAC3C,WAAW,CAAC,iEAAiE,CAAC,CAAC;MAelEA,cAAY;;;;;IACP,UAAK,GAAG,KAAK,EAAE,CAAC;IACzB,mBAAc,GAAuB,IAAI,CAAC;IAC1C,0BAAqB,GAAuB,IAAI,CAAC;IACjD,oBAAe,GAA0B,IAAI,CAAC;IAC9C,eAAU,GAAG,KAAK,CAAC;IAEV,wBAAmB,GAAG,CAAC,OAAqB;MAC5D,IAAI,OAAO;QAAE,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;KAC3C,CAAC;IACe,+BAA0B,GAAG,CAAC,OAAqB;MACnE,IAAI,OAAO;QAAE,IAAI,CAAC,qBAAqB,GAAG,OAAO,CAAC;KAClD,CAAC;IAyJM,YAAO,GAAG,CAAC,KAAY;MAC9B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;MAQzB,UAAU,CAAC;;QACV,IAAI,QAAO,MAAA,IAAI,CAAC,KAAK,CAAC,GAAG,0CAAE,OAAO,CAAA,KAAK,UAAU,EAAE;UAClD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC;SACnD;OACD,CAAC,CAAC;KACH,CAAC;;;kBAhFqC,CAAC;;iBAWyB,KAAK;iBAEtC;MAC/B,MAAM,EAAE,GAAG;MACX,MAAM,EAAE,CAAC;KACT;;EArGD,aAAa,CAAC,IAA4B;IACzC,MAAM,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;IACpC,MAAM,OAAO,GAAG,IAAI,CAAC,qBAAqB,CAAC;IAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,CAAC;IACtC,IAAI,OAAO,IAAI,OAAO,IAAI,QAAQ,EAAE;MACnC,IAAI,IAAI,CAAC,KAAK,EAAE;QACf,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAChC,UAAU,CAAC;;UACV,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,YAAY,mCAAI,CAAC,IAAI,CAAC;SACzD,CAAC,CAAC;QACH,IAAI,CAAC,IAAI;UAAE,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QACrC,OAAO,CAAC,gBAAgB,CACvB,eAAe,EACf;UACC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;SAC5B,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACd,CAAC;OACF;WAAM;QACN,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAClC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;QAC5B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;QAC3B,IAAI,IAAI,CAAC,UAAU,EAAE;UACpB,OAAO,CAAC,gBAAgB,CACvB,eAAe,EACf;YACC,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;WAC/B,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACd,CAAC;SACF;aAAM;UACN,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;SAC/B;OACD;KACD;GACD;EAEM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,WACC,KAAK,EAAE;QACN,SAAS,EAAE,IAAI;QACf,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI;QAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI;OAChC,IAED,sBAAgB,MAAM,EAAC,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAClD,qBAEC,aAAa,EAAE,IAAI,CAAC,KAAK,EACzB,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,wBAAwB,GAAG,qBAAqB,EAC1E,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GACd,CACD,EACjB,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,EACN,WAAK,GAAG,EAAE,IAAI,CAAC,0BAA0B,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAC/F,WAAK,GAAG,EAAE,IAAI,CAAC,mBAAmB,iBAAe,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,KAAK,GAAG,MAAM,GAAG,SAAS,EAAE,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,KAAK,IAC/H,YAAM,IAAI,EAAC,SAAS,GAAQ,OAC5B,eAAQ,CACH,CACD,CACD,CACA,EACN;GACF;EAmCM,eAAe,CAAC,KAAc;IACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,UAAU,CAAC,KAAiC;IAClD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,UAAU,EAAE;MACvF,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;KAC7B;GACD;EAGM,YAAY,CAAC,KAAoB;IACvC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE;MACzB,KAAK,EAAE;QACN,UAAU,EAAE;UACX,IAAI,CAAC,aAAa,EAAE,CAAC;SACrB;OACD;KACD,CAAC,CAAC;GACH;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,UAAU,KAAK,MAAM;MAAE,IAAI,CAAC,eAAe,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACpG,UAAU,CAAC;MACV,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,cAAc;QAAE,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KACnG,CAAC,CAAC;IAEH,UAAU,CAAC;MACV,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACvB,EAAE,GAAG,CAAC,CAAC;GACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAccordion"],"sources":["src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","src/components/accordion/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n/\n Inside a button the label text ist always centered.\n * So we need text align left.\n /\n.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\tjustify-items: start;\n}\n.content {\n\tinset: 0 0 auto 0;\n\twidth: 100%;\n}\n.transition {\n\ttransition: height 0.3s ease-in-out;\n}\n/ https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion /\n@media (prefers-reduced-motion) {\n\t.transition {\n\t\ttransition-duration: 0s;\n\t}\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { OpenPropType, validateOpen } from '../../types/props/open';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { processEnv } from '../../utils/reuse';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriAccordionCallbacks, States } from './types';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\n/\n \n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n /\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements API {\n\tprivate readonly nonce = nonce();\n\tprivate contentElement: HTMLElement \| null = null;\n\tprivate contentWrapperElement: HTMLElement \| null = null;\n\tprivate contentObserver: ResizeObserver \| null = null;\n\tprivate transition = false;\n\n\tprivate readonly catchContentElement = (element?: HTMLElement) => {\n\t\tif (element) this.contentElement = element;\n\t};\n\tprivate readonly catchContentWrapperElement = (element?: HTMLElement) => {\n\t\tif (element) this.contentWrapperElement = element;\n\t};\n\n\tresizeWrapper(list?: ResizeObserverEntry[]) {\n\t\tconst content = this.contentElement;\n\t\tconst wrapper = this.contentWrapperElement;\n\t\tconst observer = this.contentObserver;\n\t\tif (content && wrapper && observer) {\n\t\t\tif (this._open) {\n\t\t\t\twrapper.style.display = 'block';\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\twrapper.style.height = `${content?.clientHeight ?? 0}px`;\n\t\t\t\t});\n\t\t\t\tif (!list) observer.observe(content);\n\t\t\t\twrapper.addEventListener(\n\t\t\t\t\t'transitionend',\n\t\t\t\t\t() => {\n\t\t\t\t\t\twrapper.style.overflow = '';\n\t\t\t\t\t},\n\t\t\t\t\t{ once: true }\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\twrapper.style.overflow = 'hidden';\n\t\t\t\tobserver.unobserve(content);\n\t\t\t\twrapper.style.height = '0';\n\t\t\t\tif (this.transition) {\n\t\t\t\t\twrapper.addEventListener(\n\t\t\t\t\t\t'transitionend',\n\t\t\t\t\t\t() => {\n\t\t\t\t\t\t\twrapper.style.display = 'none';\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ once: true }\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\twrapper.style.display = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t\tclose: this.state._open !== true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-heading-wc _label=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icon={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}\n\t\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div ref={this.catchContentWrapperElement} class={{ wrapper: true, transition: this.transition }}>\n\t\t\t\t\t\t<div ref={this.catchContentElement} aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" id={this.nonce}>\n\t\t\t\t\t\t\t<slot name=\"content\"></slot> {/ Deprecated for version 2 /}\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _heading?: 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\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-Funktionen an.\n\t /\n\t@Prop() public _on?: KoliBriAccordionCallbacks;\n\n\t/\n\t If set (to true) opens/expands the element, closes if not set (or set to false).\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(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\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tthis.resizeWrapper();\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t\tif (processEnv !== 'test') this.contentObserver = new ResizeObserver(this.resizeWrapper.bind(this));\n\t\tsetTimeout(() => {\n\t\t\tif (this.contentObserver && this.contentElement) this.contentObserver.observe(this.contentElement);\n\t\t});\n\t\t// So it does not transition if it is set to open from the start.\n\t\tsetTimeout(() => {\n\t\t\tthis.transition = true;\n\t\t}, 200);\n\t}\n\n\tprivate onClick = (event: Event) => {\n\t\tthis._open = !this._open;\n\n\t\t/\n\t\t Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t});\n\t};\n}\n"],"version":3}
1	+ {"file":"kol-accordion.js","mappings":"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","names":["KolAccordion"],"sources":["src/components/accordion/style.css?tag=kol-accordion&mode=default&encapsulation=shadow","src/components/accordion/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n/* For animation technique see https://css-tricks.com/css-grid-can-do-auto-height-transitions/ /\n.wrapper {\n\tdisplay: grid;\n\tgrid-template-rows: 0fr;\n\toverflow: hidden;\n\ttransition: grid-template-rows 0.3s;\n}\n.accordion.open .wrapper {\n\tgrid-template-rows: 1fr;\n}\n.animation-wrapper {\n\tmin-height: 0;\n\ttransition: visibility 0.3s;\n\t/ This property is important to keep in sync with the visual transition (template-rows). Without it interactive elements within the accordion would stay focusable. /\n\tvisibility: hidden;\n}\n.accordion.open .animation-wrapper {\n\tvisibility: visible;\n}\n@media (prefers-reduced-motion) {\n\t.animation-wrapper,\n\t.wrapper {\n\t\ttransition-duration: 0s;\n\t}\n} /\n * Inside a button, the caption text is always centered.\n * So we have to align the text to the left.\n /\n.accordion kol-heading-wc kol-button-wc button kol-span-wc {\n\tjustify-items: start;\n}\n","// https://codepen.io/mbxtr/pen/OJPOYg?html-preprocessor=haml\n\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { OpenPropType, validateOpen } from '../../types/props/open';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriAccordionCallbacks, States } from './types';\n\nfeatureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.\n\n- onClick auf der KolAccordion anwenden\n- Click-Event prüft den _open-Status der Accordions\n- Logik Öffnet und Schließt entsprechend`);\nfeatureHint(`[KolAccordion] Tab-Sperre des Inhalts im geschlossenen Zustand.`);\n\n/\n \n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich des Accordions.\n /\n@Component({\n\ttag: 'kol-accordion',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAccordion implements API {\n\tprivate readonly nonce = nonce();\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\taccordion: true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-heading-wc _label=\"\" _level={this.state._level}>\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\t// slot=\"expert\"\n\t\t\t\t\t\t\t_ariaControls={this.nonce}\n\t\t\t\t\t\t\t_ariaExpanded={this.state._open}\n\t\t\t\t\t\t\t_icon={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}\n\t\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t\t_on={{ onClick: this.onClick }}\n\t\t\t\t\t\t></kol-button-wc>\n\t\t\t\t\t</kol-heading-wc>\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"wrapper\">\n\t\t\t\t\t\t<div class=\"animation-wrapper\">\n\t\t\t\t\t\t\t<div aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" id={this.nonce}>\n\t\t\t\t\t\t\t\t<slot name=\"content\"></slot> {/ Deprecated for version 2 /}\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</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/\n\t Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _heading?: 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\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-Funktionen an.\n\t /\n\t@Prop() public _on?: KoliBriAccordionCallbacks;\n\n\t/\n\t If set (to true) opens/expands the element, closes if not set (or set to false).\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_level: 1,\n\t};\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(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\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriAccordionCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null && typeof value.onClick === 'function') {\n\t\t\tsetState(this, '_on', value);\n\t\t}\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: OpenPropType): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tprivate onClick = (event: Event) => {\n\t\tthis._open = !this._open;\n\n\t\t/\n\t\t Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\t\tsetTimeout(() => {\n\t\t\tif (typeof this.state._on?.onClick === 'function') {\n\t\t\t\tthis.state._on.onClick(event, this._open === true);\n\t\t\t}\n\t\t});\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{d as defineCustomElement$2}from"./component7.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.container{border-radius:50%;overflow:hidden;width:100px;height:100px}.image{width:100%;height:100%}.initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#d3d3d3;font-size:2rem}",KolAvatar$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._src=void 0,this._label=void 0}render(){return h(Host,null,h("kol-avatar-wc",{_src:this._src,_label:this._label}))}static get style(){return{default:defaultStyleCss}}},[33,"kol-avatar",{_src:[1],_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar","kol-avatar-wc"].forEach((t=>{switch(t){case"kol-avatar":customElements.get(t)||customElements.define(t,KolAvatar$1);break;case"kol-avatar-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolAvatar=KolAvatar$1,defineCustomElement=defineCustomElement$1;export{KolAvatar,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{d as defineCustomElement$2}from"./component7.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}.container{border-radius:50%;overflow:hidden;width:100px;height:100px}.image{width:100%;height:100%}.initials{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#d3d3d3;font-size:2rem}",KolAvatar$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._src=void 0,this._label=void 0}render(){return h(Host,null,h("kol-avatar-wc",{_src:this._src,_label:this._label}))}static get style(){return{default:defaultStyleCss}}},[33,"kol-avatar",{_src:[1],_label:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-avatar","kol-avatar-wc"].forEach((t=>{switch(t){case"kol-avatar":customElements.get(t)||customElements.define(t,KolAvatar$1);break;case"kol-avatar-wc":customElements.get(t)||defineCustomElement$2()}}))}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,~~w6BAAw6B~~;;~~MCWn7BA~~,WAAS;;;;;;;;EACd,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAkB,CAC/D,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAvatar"],"sources":["src/components/avatar/style.css?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n.container {\n\tborder-radius: 50%;\n\toverflow: hidden;\n\t/theme?/\n\twidth: 100px;\n\theight: 100px;\n}\n.image {\n\twidth: 100%;\n\theight: 100%;\n}\n.initials {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/theme?/\n\tbackground: #d3d3d3;\n\tfont-size: 2rem;\n}\n","import { Component, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-avatar-wc _src={this._src} _label={this._label}></kol-avatar-wc>\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,47BAA47B;;MCWv8BA,WAAS;;;;;;;;EACd,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBAAe,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAkB,CAC/D,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolAvatar"],"sources":["src/components/avatar/style.css?tag=kol-avatar&mode=default&encapsulation=shadow","src/components/avatar/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\n.container {\n\tborder-radius: 50%;\n\toverflow: hidden;\n\t/theme?/\n\twidth: 100px;\n\theight: 100px;\n}\n.image {\n\twidth: 100%;\n\theight: 100%;\n}\n.initials {\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\t/theme?/\n\tbackground: #d3d3d3;\n\tfont-size: 2rem;\n}\n","import { Component, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-avatar',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolAvatar implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-avatar-wc _src={this._src} _label={this._label}></kol-avatar-wc>\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-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{v as validateLabel}from"./label.js";import{F as a11yHintLabelingLandmarks}from"./prop.validators.js";import{w as watchNavLinks}from"./validation.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{d as defineCustomElement$6}from"./component.js";import{d as defineCustomElement$5}from"./shadow2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}li,ul{margin:0;padding:0;list-style:none;display:flex;gap:0.5em;flex-wrap:wrap;place-items:center}kol-icon::part(separator){font-weight:900;font-size:0.7em}kol-icon::part(separator):before{content:'\\f054';font-family:'Font Awesome 6 Free'}",KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.renderLink=(e,t)=>{const a=this.state._links.length-1,n=e._iconOnly||e._hideLabel;return h("li",{key:t},0!==t&&h("kol-icon",{_label:"",_icon:"codicon codicon-chevron-right"}),t===a?h("span",null,n?h("kol-icon",{_label:e._label,_icon:"string"==typeof e._icon?e._icon:"codicon codicon-symbol-event"}):h(Fragment,null,e._label)):h("kol-link",Object.assign({},e)))},this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return h(Host,null,h("nav",{"aria-label":this.state._label},h("ul",null,0===this.state._links.length&&h("li",null,h("kol-icon",{_label:"",_icon:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateAriaLabel(e){this.validateLabel(e)}validateLabel(e,t,a=!1){a||removeNavLabel(this.state._label),validateLabel(this,e),a11yHintLabelingLandmarks(e),addNavLabel(this.state._label)}validateLinks(e){watchNavLinks("KolBreadcrumb",this,e)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-breadcrumb",{_ariaLabel:[1,"_aria-label"],_label:[1],_links:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-breadcrumb":customElements.get(e)||customElements.define(e,KolBreadcrumb$1);break;case"kol-icon":customElements.get(e)||defineCustomElement$6();break;case"kol-link":customElements.get(e)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Fragment,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{F as a11yHintLabelingLandmarks}from"./prop.validators.js";import{w as watchNavLinks}from"./validation.js";import{r as removeNavLabel,a as addNavLabel}from"./unique-nav-labels.js";import{d as defineCustomElement$6}from"./component.js";import{d as defineCustomElement$5}from"./shadow2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}li,ul{margin:0;padding:0;list-style:none;display:flex;gap:0.5em;flex-wrap:wrap;place-items:center}kol-icon::part(separator){font-weight:900;font-size:0.7em}kol-icon::part(separator):before{content:'\\f054';font-family:'Font Awesome 6 Free'}",KolBreadcrumb$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.renderLink=(e,t)=>{const a=this.state._links.length-1,n=e._iconOnly||e._hideLabel;return h("li",{key:t},0!==t&&h("kol-icon",{_label:"",_icon:"codicon codicon-chevron-right"}),t===a?h("span",null,n?h("kol-icon",{_label:e._label,_icon:"string"==typeof e._icon?e._icon:"codicon codicon-symbol-event"}):h(Fragment,null,e._label)):h("kol-link",Object.assign({},e)))},this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return h(Host,null,h("nav",{"aria-label":this.state._label},h("ul",null,0===this.state._links.length&&h("li",null,h("kol-icon",{_label:"",_icon:"codicon codicon-home"}),"…"),this.state._links.map(this.renderLink))))}validateAriaLabel(e){this.validateLabel(e)}validateLabel(e,t,a=!1){a||removeNavLabel(this.state._label),validateLabel(this,e),a11yHintLabelingLandmarks(e),addNavLabel(this.state._label)}validateLinks(e){watchNavLinks("KolBreadcrumb",this,e)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){removeNavLabel(this.state._label)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-breadcrumb",{_ariaLabel:[1,"_aria-label"],_label:[1],_links:[1],state:[32]},void 0,{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-breadcrumb","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-breadcrumb":customElements.get(e)||customElements.define(e,KolBreadcrumb$1);break;case"kol-icon":customElements.get(e)||defineCustomElement$6();break;case"kol-link":customElements.get(e)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolBreadcrumb=KolBreadcrumb$1,defineCustomElement=defineCustomElement$1;export{KolBreadcrumb,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-breadcrumb.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,~~s6BAAs6B~~;;~~MCiBj7BA~~,eAAa;;;;;IACR,eAAU,GAAG,CAAC,IAAyB,EAAE,KAAa;MACtE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;MAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC;MACpD,QACC,UAAI,GAAG,EAAE,KAAK,IACZ,KAAK,KAAK,CAAC,IAAI,gBAAU,MAAM,EAAC,EAAE,EAAC,KAAK,EAAC,+BAA+B,GAAG,EAC3E,KAAK,KAAK,SAAS,IACnB,gBACE,SAAS,IACT,gBAAU,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,8BAA8B,GAAI,KAEtH,EAAC,QAAQ,QAAE,IAAI,CAAC,MAAM,CAAY,CAClC,CACK,KAEP,gCAAc,IAAI,EAAa,CAC/B,CACG,EACJ;KACF,CAAC;;;;iBAoC8B;MAC/B,MAAM,EAAE,GAAG;MACX,MAAM,EAAE,EAAE;KACV;;EArCM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,yBAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjC,cACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,KAC9B,cACC,gBAAU,MAAM,EAAC,EAAE,EAAC,KAAK,EAAC,sBAAsB,GAAG,WAC/C,CACL,EACA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CACnC,CACA,CACA,EACN;GACF;EA4BM,iBAAiB,CAAC,KAAc;IACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;IACrF,IAAI,CAAC,OAAO,EAAE;MACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;IACD,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3B,yBAAyB,CAAC,KAAK,CAAC,CAAC;IACjC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;GAC/B;EAGM,aAAa,CAAC,KAAgC;IACpD,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;GAC5C;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IACpE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;EAEM,oBAAoB;IAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;GAClC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["KolBreadcrumb"],"sources":["src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/component.tsx"],"sourcesContent":["@import url(../style.css);\nli,\nul {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: flex;\n\tgap: 0.5em;\n\tflex-wrap: wrap;\n\tplace-items: center;\n}\nkol-icon::part(separator) {\n\tfont-weight: 900;\n\tfont-size: 0.7em;\n}\nkol-icon::part(separator):before {\n\tcontent: '\\f054';\n\tfont-family: 'Font Awesome 6 Free';\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LinkProps } from '../link/types';\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchNavLinks } from '../nav/validation';\nimport { BreadcrumbLinkProps, API, States } from './types';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements API {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\tconst hideLabel = link._iconOnly \|\| link._hideLabel;\n\t\treturn (\n\t\t\t<li key={index}>\n\t\t\t\t{index !== 0 && <kol-icon _label=\"\" _icon=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{hideLabel ? (\n\t\t\t\t\t\t\t<kol-icon _label={link._label} _icon={typeof link._icon === 'string' ? link._icon : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<kol-link {...link}></kol-link>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _label=\"\" _icon=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t \n\t @deprecated use _label instead\n\t /\n\t@Prop() public _ariaLabel?: 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?: LabelPropType; // TODO: required in v2\n\n\t/\n\t Defines the list of links combined with their labels to render.\n\t /\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/\n\t @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._ariaLabel, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-breadcrumb.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,07BAA07B;;MCiBr8BA,eAAa;;;;;IACR,eAAU,GAAG,CAAC,IAAyB,EAAE,KAAa;MACtE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;MAC/C,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC;MACpD,QACC,UAAI,GAAG,EAAE,KAAK,IACZ,KAAK,KAAK,CAAC,IAAI,gBAAU,MAAM,EAAC,EAAE,EAAC,KAAK,EAAC,+BAA+B,GAAG,EAC3E,KAAK,KAAK,SAAS,IACnB,gBACE,SAAS,IACT,gBAAU,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,8BAA8B,GAAI,KAEtH,EAAC,QAAQ,QAAE,IAAI,CAAC,MAAM,CAAY,CAClC,CACK,KAEP,gCAAc,IAAI,EAAa,CAC/B,CACG,EACJ;KACF,CAAC;;;;iBAoC8B;MAC/B,MAAM,EAAE,GAAG;MACX,MAAM,EAAE,EAAE;KACV;;EArCM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,yBAAiB,IAAI,CAAC,KAAK,CAAC,MAAM,IACjC,cACE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,KAC9B,cACC,gBAAU,MAAM,EAAC,EAAE,EAAC,KAAK,EAAC,sBAAsB,GAAG,WAC/C,CACL,EACA,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CACnC,CACA,CACA,EACN;GACF;EA4BM,iBAAiB,CAAC,KAAc;IACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB,EAAE,SAAyB,EAAE,OAAO,GAAG,KAAK;IACrF,IAAI,CAAC,OAAO,EAAE;MACb,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;KAClC;IACD,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAC3B,yBAAyB,CAAC,KAAK,CAAC,CAAC;IACjC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;GAC/B;EAGM,aAAa,CAAC,KAAgC;IACpD,aAAa,CAAC,eAAe,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;GAC5C;EAEM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,CAAC;IACpE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;EAEM,oBAAoB;IAC1B,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;GAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolBreadcrumb"],"sources":["src/components/breadcrumb/style.css?tag=kol-breadcrumb&mode=default&encapsulation=shadow","src/components/breadcrumb/component.tsx"],"sourcesContent":["@import url(../style.css);\nli,\nul {\n\tmargin: 0;\n\tpadding: 0;\n\tlist-style: none;\n\tdisplay: flex;\n\tgap: 0.5em;\n\tflex-wrap: wrap;\n\tplace-items: center;\n}\nkol-icon::part(separator) {\n\tfont-weight: 900;\n\tfont-size: 0.7em;\n}\nkol-icon::part(separator):before {\n\tcontent: '\\f054';\n\tfont-family: 'Font Awesome 6 Free';\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LinkProps } from '../link/types';\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchNavLinks } from '../nav/validation';\nimport { BreadcrumbLinkProps, API, States } from './types';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\n\n@Component({\n\ttag: 'kol-breadcrumb',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolBreadcrumb implements API {\n\tprivate readonly renderLink = (link: BreadcrumbLinkProps, index: number): JSX.Element => {\n\t\tconst lastIndex = this.state._links.length - 1;\n\t\tconst hideLabel = link._iconOnly \|\| link._hideLabel;\n\t\treturn (\n\t\t\t<li key={index}>\n\t\t\t\t{index !== 0 && <kol-icon _label=\"\" _icon=\"codicon codicon-chevron-right\" />}\n\t\t\t\t{index === lastIndex ? (\n\t\t\t\t\t<span>\n\t\t\t\t\t\t{hideLabel ? (\n\t\t\t\t\t\t\t<kol-icon _label={link._label} _icon={typeof link._icon === 'string' ? link._icon : 'codicon codicon-symbol-event'} />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Fragment>{link._label}</Fragment>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\t<kol-link {...link}></kol-link>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.state._links.length === 0 && (\n\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t<kol-icon _label=\"\" _icon=\"codicon codicon-home\" />…\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.state._links.map(this.renderLink)}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t \n\t @deprecated use _label instead\n\t /\n\t@Prop() public _ariaLabel?: 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?: LabelPropType; // TODO: required in v2\n\n\t/\n\t Defines the list of links combined with their labels to render.\n\t /\n\t@Prop() public _links!: Stringified<BreadcrumbLinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/\n\t @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolBreadcrumb', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label \|\| this._ariaLabel, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"version":3}

package/dist/components/kol-button-group.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 defineCustomElement$2}from"./component10.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>kol-button-group-wc{display:flex;flex-wrap:wrap}",KolButtonGroup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow()}render(){return h(Host,null,h("kol-button-group-wc",null,h("slot",null)))}static get style(){return{default:defaultStyleCss}}},[33,"kol-button-group"]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-group","kol-button-group-wc"].forEach((t=>{switch(t){case"kol-button-group":customElements.get(t)||customElements.define(t,KolButtonGroup$1);break;case"kol-button-group-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolButtonGroup=KolButtonGroup$1,defineCustomElement=defineCustomElement$1;export{KolButtonGroup,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{d as defineCustomElement$2}from"./component10.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>kol-button-group-wc{display:flex;flex-wrap:wrap}",KolButtonGroup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow()}render(){return h(Host,null,h("kol-button-group-wc",null,h("slot",null)))}static get style(){return{default:defaultStyleCss}}},[33,"kol-button-group"]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-group","kol-button-group-wc"].forEach((t=>{switch(t){case"kol-button-group":customElements.get(t)||customElements.define(t,KolButtonGroup$1);break;case"kol-button-group-wc":customElements.get(t)||defineCustomElement$2()}}))}const KolButtonGroup=KolButtonGroup$1,defineCustomElement=defineCustomElement$1;export{KolButtonGroup,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-button-group.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,~~4uBAA4uB~~;;~~MCUvvBA~~,gBAAc;;;;;;EACnB,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,+BACC,eAAQ,CACa,CAChB,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonGroup"],"sources":["src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","src/components/button-group/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n:host > kol-button-group-wc {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-button-group.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,gwBAAgwB;;MCU3wBA,gBAAc;;;;;;EACnB,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,+BACC,eAAQ,CACa,CAChB,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonGroup"],"sources":["src/components/button-group/style.css?tag=kol-button-group&mode=default&encapsulation=shadow","src/components/button-group/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n:host > kol-button-group-wc {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Component, h, Host, JSX } from '@stencil/core';\nimport { Props } from './types';\n\n@Component({\n\ttag: 'kol-button-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonGroup implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-group-wc>\n\t\t\t\t\t<slot />\n\t\t\t\t</kol-button-group-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-button-link.js CHANGED Viewed

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{A as propagateFocus}from"./prop.validators.js";import{d as defineCustomElement$5}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){align-items:baseline;display:inline-flex;place-items:center;text-align:left;text-decoration-line:underline}:is(a,button):is(:focus,:hover){text-decoration-thickness:0.2em}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:#fff;left:unset;padding:1em;position:unset}kol-icon.external-link-icon{display:inline-flex}",KolButtonLink$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propagateFocus(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}render(){return h(Host,null,h("kol-button-wc",{ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icon:this._icon,_hideLabel:this._hideLabel||this._iconOnly,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:"link",_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},h("slot",{name:"expert",slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-button-link",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[4,"_aria-expanded"],_ariaLabel:[1025,"_aria-label"],_ariaSelected:[4,"_aria-selected"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icon:[1],_iconOnly:[4,"_icon-only"],_id:[1],_label:[8],_name:[1],_on:[16],_role:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-link","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-button-link":customElements.get(e)||customElements.define(e,KolButtonLink$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolButtonLink=KolButtonLink$1,defineCustomElement=defineCustomElement$1;export{KolButtonLink,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{A as propagateFocus}from"./prop.validators.js";import{d as defineCustomElement$5}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){align-items:baseline;display:inline-flex;place-items:center;text-align:left;text-decoration-line:underline}:is(a,button):is(:focus,:hover){text-decoration-thickness:0.2em}.hidden{display:none;visibility:hidden}.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}.skip:focus{background-color:#fff;left:unset;padding:1em;position:unset}kol-icon.external-link-icon{display:inline-flex}",KolButtonLink$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.ref=e,propagateFocus(this.host,this.ref)},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0}render(){return h(Host,null,h("kol-button-wc",{ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_icon:this._icon,_hideLabel:this._hideLabel||this._iconOnly,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:"link",_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value},h("slot",{name:"expert",slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-button-link",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[4,"_aria-expanded"],_ariaLabel:[1025,"_aria-label"],_ariaSelected:[4,"_aria-selected"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icon:[1],_iconOnly:[4,"_icon-only"],_id:[1],_label:[8],_name:[1],_on:[16],_role:[1],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-link","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-button-link":customElements.get(e)||customElements.define(e,KolButtonLink$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolButtonLink=KolButtonLink$1,defineCustomElement=defineCustomElement$1;export{KolButtonLink,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-button-link.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG~~,+nCAA+nC~~;;~~MCwB1oCA~~,eAAa;;;;;IAIR,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;qBAyEmC,KAAK;sBAMJ,KAAK;;;;;;;;;;yBAoDW,KAAK;iBAKf,QAAQ;;;EAtI7C,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EAC7C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,MAAM,EACZ,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC1B,CACV,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonLink"],"sources":["src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/component.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { AriaCurrentPropType } from '../../types/props/aria-current';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { StencilUnknown } from '../../types/unknown';\nimport { propagateFocus } from '../../utils/reuse';\nimport { IdPropType } from '../../types/props/id';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { ButtonTypePropType } from '../../types/props/button-type';\nimport { Props } from './types';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { IconPropType } from '../../types/props/icon';\nimport { NamePropType } from '../../types/props/name';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Props {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_hideLabel={this._hideLabel \|\| this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"link\"\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: `date` \| `location` \| `page` \| `step` \| `time` \| `true`. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t \n\t @deprecated aria-current is not necessary for buttons. will be removed in version 2.\n\t /\n\t@Prop() public _ariaCurrent?: AriaCurrentPropType;\n\n\t/\n\t Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/\n\t Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t \n\t @deprecated use _label instead\n\t /\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/\n\t Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t * @TODO: Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _disabled?: boolean = false;\n\n\t/\n\t Hides the label and shows the description in a Tooltip instead.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the icon classnames (e.g. `_icon=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icon?: IconPropType;\n\n\t/\n\t Deprecated: Hides the label and shows the description in a Tooltip instead.\n\t * @deprecated use _hide-label\n\t /\n\t@Prop() public _iconOnly?: boolean;\n\n\t/\n\t Defines the internal ID of the primary component element.\n\t /\n\t@Prop() public _id?: IdPropType;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Defines the technical name of an input field.\n\t /\n\t@Prop() public _name?: NamePropType;\n\n\t/\n\t Gibt die EventCallback-Funktionen für die Button-Events an.\n\t /\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/\n\t Defines the role of the components primary element.\n\t /\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/\n\t Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\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?: ButtonTypePropType = 'button';\n\n\t/\n\t Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n}\n"],"version":3}
1	+ {"file":"kol-button-link.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,mpCAAmpC;;MCwB9pCA,eAAa;;;;;IAIR,aAAQ,GAAG,CAAC,GAA4B;MACxD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;qBAyEmC,KAAK;sBAMJ,KAAK;;;;;;;;;;yBAoDW,KAAK;iBAKf,QAAQ;;;EAtI7C,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,qBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,EAC7C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,MAAM,EACZ,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC1B,CACV,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButtonLink"],"sources":["src/components/button-link/style.css?tag=kol-button-link&mode=default&encapsulation=shadow","src/components/button-link/component.tsx"],"sourcesContent":["@import url(../link.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { AriaCurrentPropType } from '../../types/props/aria-current';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { StencilUnknown } from '../../types/unknown';\nimport { propagateFocus } from '../../utils/reuse';\nimport { IdPropType } from '../../types/props/id';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { ButtonTypePropType } from '../../types/props/button-type';\nimport { Props } from './types';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { IconPropType } from '../../types/props/icon';\nimport { NamePropType } from '../../types/props/name';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\n\n@Component({\n\ttag: 'kol-button-link',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolButtonLink implements Props {\n\t@Element() private readonly host?: HTMLKolButtonLinkElement;\n\tprivate ref?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_hideLabel={this._hideLabel \|\| this._iconOnly}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"link\"\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-button-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/*\n\t Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t /\n\t@Prop() public _accessKey?: string;\n\n\t/\n\t Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t /\n\t@Prop() public _ariaControls?: string;\n\n\t/\n\t Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: `date` \| `location` \| `page` \| `step` \| `time` \| `true`. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t \n\t @deprecated aria-current is not necessary for buttons. will be removed in version 2.\n\t /\n\t@Prop() public _ariaCurrent?: AriaCurrentPropType;\n\n\t/\n\t Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t * @TODO: Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/\n\t Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t \n\t @deprecated use _label instead\n\t /\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/\n\t Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t * @TODO: Change type back to `AriaSelectedPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/\n\t Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _disabled?: boolean = false;\n\n\t/\n\t Hides the label and shows the description in a Tooltip instead.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/\n\t Defines the icon classnames (e.g. `_icon=\"fa-solid fa-user\"`).\n\t /\n\t@Prop() public _icon?: IconPropType;\n\n\t/\n\t Deprecated: Hides the label and shows the description in a Tooltip instead.\n\t * @deprecated use _hide-label\n\t /\n\t@Prop() public _iconOnly?: boolean;\n\n\t/\n\t Defines the internal ID of the primary component element.\n\t /\n\t@Prop() public _id?: IdPropType;\n\n\t/\n\t Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t /\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/\n\t Defines the technical name of an input field.\n\t /\n\t@Prop() public _name?: NamePropType;\n\n\t/\n\t Gibt die EventCallback-Funktionen für die Button-Events an.\n\t /\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/\n\t Defines the role of the components primary element.\n\t /\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/\n\t Selector for synchronizing the value with another input element.\n\t * @internal\n\t /\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/\n\t Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t /\n\t@Prop() public _tabIndex?: number;\n\n\t/\n\t Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t /\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\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?: ButtonTypePropType = 'button';\n\n\t/\n\t Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as validateHasCloser}from"./has-closer.js";import{e as watchBoolean,q as setState}from"./prop.validators.js";import{v as validateLabel}from"./label.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const validateHasFooter=(e,t)=>{watchBoolean(e,"_hasFooter",t)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>div.card{height:100%;position:relative}.close{position:absolute;top:0;right:0}",KolCard$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),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._on=void 0,this._hasCloser=!1,this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._label=void 0,this._level=1,this.state={_label:"…"}}render(){return h(Host,null,h("div",{class:"card"},h("div",{class:"header"},h("kol-heading-wc",{_label:this.state._label,_level:this.state._level}),h("slot",{name:"header"})),h("div",{class:"content"},h("slot",{name:"content"}),h("slot",null)),this.state._hasFooter&&h("div",{class:"footer"},h("slot",{name:"footer"})),this.state._hasCloser&&h("kol-button-wc",{class:"close",_hideLabel:!0,_icon:{left:{icon:"codicon codicon-close"}},_label:translate("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&setState(this,"_on",{onClose:e.onClose})}validateHasCloser(e){validateHasCloser(this,e)}validateHasFooter(e){validateHasFooter(this,e)}validateHeading(e){this.validateLabel(e)}validateHeadline(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateHasFooter(this._hasFooter),this.validateLabel(this._label||this._heading||this._headline),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_label:["validateLabel"],_level:["validateLevel"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-card",{_on:[16],_hasCloser:[4,"_has-closer"],_hasFooter:[4,"_has-footer"],_heading:[1],_headline:[1],_label:[1],_level:[2],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-card":customElements.get(e)||customElements.define(e,KolCard$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolCard=KolCard$1,defineCustomElement=defineCustomElement$1;export{KolCard,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as validateHasCloser}from"./has-closer.js";import{e as watchBoolean,q as setState}from"./prop.validators.js";import{v as validateLabel}from"./label.js";import{w as watchHeadingLevel,d as defineCustomElement$5}from"./component4.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$4}from"./component.js";import{d as defineCustomElement$3}from"./component2.js";import{d as defineCustomElement$2}from"./component3.js";const validateHasFooter=(e,t)=>{watchBoolean(e,"_hasFooter",t)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>div.card{height:100%;position:relative}.close{position:absolute;top:0;right:0}",KolCard$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),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._on=void 0,this._hasCloser=!1,this._hasFooter=!1,this._heading=void 0,this._headline=void 0,this._label=void 0,this._level=1,this.state={_label:"…"}}render(){return h(Host,null,h("div",{class:"card"},h("div",{class:"header"},h("kol-heading-wc",{_label:this.state._label,_level:this.state._level}),h("slot",{name:"header"})),h("div",{class:"content"},h("slot",{name:"content"}),h("slot",null)),this.state._hasFooter&&h("div",{class:"footer"},h("slot",{name:"footer"})),this.state._hasCloser&&h("kol-button-wc",{class:"close",_hideLabel:!0,_icon:{left:{icon:"codicon codicon-close"}},_label:translate("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&setState(this,"_on",{onClose:e.onClose})}validateHasCloser(e){validateHasCloser(this,e)}validateHasFooter(e){validateHasFooter(this,e)}validateHeading(e){this.validateLabel(e)}validateHeadline(e){this.validateLabel(e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateHasFooter(this._hasFooter),this.validateLabel(this._label||this._heading||this._headline),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_label:["validateLabel"],_level:["validateLevel"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-card",{_on:[16],_hasCloser:[4,"_has-closer"],_hasFooter:[4,"_has-footer"],_heading:[1],_headline:[1],_label:[1],_level:[2],state:[32]},void 0,{_on:["validateOn"],_hasCloser:["validateHasCloser"],_hasFooter:["validateHasFooter"],_heading:["validateHeading"],_headline:["validateHeadline"],_label:["validateLabel"],_level:["validateLevel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card","kol-button-wc","kol-heading-wc","kol-icon","kol-span-wc","kol-tooltip-wc"].forEach((e=>{switch(e){case"kol-card":customElements.get(e)||customElements.define(e,KolCard$1);break;case"kol-button-wc":customElements.get(e)||defineCustomElement$6();break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$5();break;case"kol-icon":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip-wc":customElements.get(e)||defineCustomElement$2()}}))}const KolCard=KolCard$1,defineCustomElement=defineCustomElement$1;export{KolCard,defineCustomElement};

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

	@@ -1 +1 @@
1	- {"file":"kol-card.js","mappings":";;;;;;;;;;;;;;AAgBO,MAAM,iBAAiB,GAAG,CAAC,SAAoC,EAAE,KAAyB;EAChG,YAAY,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,CAAC,CAAC;AAC9C,CAAC;;AClBD,MAAM,eAAe,GAAG,~~0wBAA0wB~~;;~~MCyBrxBA~~,SAAO;;;;;IACF,UAAK,GAAG;;MACxB,IAAI,CAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,MAAK,SAAS,EAAE;QACpC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;OACrC;KACD,CAAC;IAEe,OAAE,GAAG;MACrB,OAAO,EAAE,IAAI,CAAC,KAAK;KACnB,CAAC;IAoFM,oBAAe,GAAG,CAAC,KAAc,KACxC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAQ,KAAmC,CAAC,OAAO,KAAK,UAAU,CAAC;;sBApC7E,KAAK;sBAML,KAAK;;;;kBAuBJ,CAAC;iBAER;MAC/B,MAAM,EAAE,GAAG;KACX;;EAhFM,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,WAAK,KAAK,EAAC,MAAM,IAChB,WAAK,KAAK,EAAC,QAAQ,IAClB,sBAAgB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAmB,EACvF,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,EACN,WAAK,KAAK,EAAC,SAAS,IACnB,YAAM,IAAI,EAAC,SAAS,GAAQ,EAE5B,eAAQ,CACH,EACL,IAAI,CAAC,KAAK,CAAC,UAAU,KACrB,WAAK,KAAK,EAAC,QAAQ,IAClB,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACtB,CACN,EAEA,IAAI,CAAC,KAAK,CAAC,UAAU,KACrB,qBACC,KAAK,EAAC,OAAO,EACb,UAAU,QACV,KAAK,EAAE;QACN,IAAI,EAAE;UACL,IAAI,EAAE,uBAAuB;SAC7B;OACD,EACD,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,EAC9B,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,aAAa,EAAC,MAAM,GACJ,CACjB,CACI,CACA,EACN;GACF;EAkDM,UAAU,CAAC,KAAiC;IAClD,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;MAChC,QAAQ,CAA4B,IAAI,EAAE,KAAK,EAAE;QAChD,OAAO,EAAG,KAAoC,CAAC,OAAO;OACtD,CAAC,CAAC;KACH;GACD;EAGM,iBAAiB,CAAC,KAAyB;IACjD,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,iBAAiB,CAAC,KAAyB;IACjD,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,eAAe,CAAC,KAAc;IACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAOM,gBAAgB,CAAC,KAAc;IACrC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,aAAa,CAAC,KAAoB;IACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAEM,iBAAiB;IACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IACnE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;GAC1B~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["KolCard"],"sources":["src/types/props/has-footer.ts","src/components/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\n\nexport type HasFooterPropType = boolean;\n\n/\n Shows the slot=\"footer\".\n /\nexport type PropHasFooter = {\n\thasFooter: HasFooterPropType;\n};\n\n/ validator /\nexport const validateHasFooter = (component: Generic.Element.Component, value?: HasFooterPropType): void => {\n\twatchBoolean(component, '_hasFooter', value);\n};\n","@import url(../style.css);\n:host > div.card {\n\theight: 100%;\n\tposition: relative;\n}\n.close {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { HasCloserPropType, validateHasCloser } from '../../types/props/has-closer';\nimport { HasFooterPropType, validateHasFooter } from '../../types/props/has-footer';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { setState } from '../../utils/prop.validators';\nimport { KoliBriAlertEventCallbacks } from '../alert/types';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriCardEventCallbacks, States } from './types';\n\n/\n @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n /\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements API {\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\treturn (\n\t\t\t<Host>\n\t\t\t\t<div class=\"card\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _label={this.state._label} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"content\"></slot>\n\t\t\t\t\t\t{/ Deprecated for version 2 /}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icon={{\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')}\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></kol-button-wc>\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 Defines the event callback functions for the component.\n\t /\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\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 Shows the slot=\"footer\".\n\t * @TODO: Change type back to `HasFooterPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hasFooter?: boolean = false;\n\n\t/\n\t Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Deprecated: Gibt die Beschriftung der Komponente an.\n\t \n\t @deprecated Verwende stattdessen das Property _heading.\n\t /\n\t@Prop() public _headline?: 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?: 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@State() public state: States = {\n\t\t_label: '…', // '⚠'\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: HasFooterPropType): void {\n\t\tvalidateHasFooter(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateLabel(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\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateLabel(this._label \|\| this._heading \|\| this._headline);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"version":3}
1	+ {"file":"kol-card.js","mappings":"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","names":["KolCard"],"sources":["src/types/props/has-footer.ts","src/components/card/style.css?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types /\n\nexport type HasFooterPropType = boolean;\n\n/\n Shows the slot=\"footer\".\n /\nexport type PropHasFooter = {\n\thasFooter: HasFooterPropType;\n};\n\n/ validator /\nexport const validateHasFooter = (component: Generic.Element.Component, value?: HasFooterPropType): void => {\n\twatchBoolean(component, '_hasFooter', value);\n};\n","@import url(../style.css);\n:host > div.card {\n\theight: 100%;\n\tposition: relative;\n}\n.close {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { HasCloserPropType, validateHasCloser } from '../../types/props/has-closer';\nimport { HasFooterPropType, validateHasFooter } from '../../types/props/has-footer';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { setState } from '../../utils/prop.validators';\nimport { KoliBriAlertEventCallbacks } from '../alert/types';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, KoliBriCardEventCallbacks, States } from './types';\n\n/\n @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot content - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n * @slot header - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Kopfbereich unterhalb der Überschrift der Card.\n * @slot footer - Deprecated für Version 2: Ermöglicht das Einfügen beliebigen HTML's in den Fußbereich der Card.\n /\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements API {\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\treturn (\n\t\t\t<Host>\n\t\t\t\t<div class=\"card\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<kol-heading-wc _label={this.state._label} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t\t\t<slot name=\"header\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot name=\"content\"></slot>\n\t\t\t\t\t\t{/ Deprecated for version 2 /}\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasFooter && (\n\t\t\t\t\t\t<div class=\"footer\">\n\t\t\t\t\t\t\t<slot name=\"footer\"></slot>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icon={{\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')}\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></kol-button-wc>\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 Defines the event callback functions for the component.\n\t /\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\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 Shows the slot=\"footer\".\n\t * @TODO: Change type back to `HasFooterPropType` after Stencil#4663 has been resolved.\n\t /\n\t@Prop() public _hasFooter?: boolean = false;\n\n\t/\n\t Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t /\n\t@Prop() public _heading?: string;\n\n\t/\n\t Deprecated: Gibt die Beschriftung der Komponente an.\n\t \n\t @deprecated Verwende stattdessen das Property _heading.\n\t /\n\t@Prop() public _headline?: 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?: 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@State() public state: States = {\n\t\t_label: '…', // '⚠'\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_hasFooter')\n\tpublic validateHasFooter(value?: HasFooterPropType): void {\n\t\tvalidateHasFooter(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t/\n\t @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\t@Watch('_headline')\n\tpublic validateHeadline(value?: string): void {\n\t\tthis.validateLabel(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\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateHasFooter(this._hasFooter);\n\t\tthis.validateLabel(this._label \|\| this._heading \|\| this._headline);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";import{t as tryToDispatchKoliBriEvent}from"./events.js";import{q as setState}from"./prop.validators.js";import{d as defineCustomElement$3}from"./component.js";import{d as defineCustomElement$2}from"./component12.js";class DetailsAnimationController{constructor(t,e,i){this.detailsElement=t,this.summaryElement=e,this.contentElement=i,this.isClosing=!1,this.isExpanding=!1,this.summaryElement.addEventListener("click",this.handleSummaryClick.bind(this))}handleSummaryClick(t){t.preventDefault(),this.detailsElement.style.overflow="hidden",this.isClosing||!this.detailsElement.open?this.open():(this.isExpanding||this.detailsElement.open)&&this.collapse()}open(){this.detailsElement.style.height=`${this.detailsElement.offsetHeight}px`,this.detailsElement.open=!0,window.requestAnimationFrame(this.expand.bind(this))}expand(){this.isExpanding=!0,this.animateDetailsHeight(this.summaryElement.offsetHeight+this.contentElement.offsetHeight,"expand")}collapse(){this.isClosing=!0,this.animateDetailsHeight(this.summaryElement.offsetHeight,"collapse")}animateDetailsHeight(t,e){const i=this.detailsElement.offsetHeight;this.animation&&this.animation.cancel(),this.animation=this.detailsElement.animate({height:[`${i}px`,`${t}px`]},{duration:matchMedia("(prefers-reduced-motion)").matches?0:250,easing:"ease-out"}),this.animation.addEventListener("finish",(()=>{this.onAnimationFinish()}),{once:!0}),this.animation.addEventListener("cancel",(()=>{"expand"===e?this.isExpanding=!1:this.isClosing=!1}),{once:!0})}onAnimationFinish(){this.detailsElement.open=this.isExpanding,this.animation=void 0,this.isClosing=!1,this.isExpanding=!1,this.detailsElement.style.removeProperty("height"),this.detailsElement.style.removeProperty("overview")}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}details{display:grid}details>summary{cursor:pointer;display:flex;place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid}details>summary:focus>span,details>summary:hover>span,details[open]>summary>span{border-bottom-color:#000}details>kol-indented-text{margin:0.25em 0 0 0.5em}",KolDetails$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.handleToggle=t=>{clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,i,n,s;Boolean(null===(e=this.detailsElement)||void 0===e?void 0:e.open)!==this.state._open&&(this._open=Boolean(null===(i=this.detailsElement)||void 0===i?void 0:i.open),tryToDispatchKoliBriEvent("toggle",this.host,this._open),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onToggle)&&(null===(s=this.state._on)||void 0===s||s.onToggle(t,this._open)))}),25)},this._label=void 0,this._on=void 0,this._open=!1,this._summary=void 0,this.state={_label:"…",_on:{}}}render(){return h(Host,null,h("details",{ref:t=>{this.detailsElement=t},onToggle:this.handleToggle},h("summary",{ref:t=>this.summaryElement=t},this.state._open?h("kol-icon",{_label:"",_icon:"codicon codicon-chevron-down"}):h("kol-icon",{_label:"",_icon:"codicon codicon-chevron-right"}),h("span",null,this.state._label)),h("div",{class:"content",ref:t=>this.contentElement=t},h("kol-indented-text",null,h("slot",null)))))}validateLabel(t){validateLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&"function"==typeof t.onToggle&&setState(this,"_on",t)}validateOpen(t){validateOpen(this,t)}validateSummary(t){this.validateLabel(t)}componentWillLoad(){this.validateLabel(this._label||this._summary),this.validateOn(this._on),this.validateOpen(this._open)}componentDidLoad(){this.detailsElement&&this.summaryElement&&this.contentElement&&new DetailsAnimationController(this.detailsElement,this.summaryElement,this.contentElement)}get host(){return this}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"],_summary:["validateSummary"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-details",{_label:[1],_on:[16],_open:[1540],_summary:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-details","kol-icon","kol-indented-text"].forEach((t=>{switch(t){case"kol-details":customElements.get(t)||customElements.define(t,KolDetails$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$3();break;case"kol-indented-text":customElements.get(t)||defineCustomElement$2()}}))}const KolDetails=KolDetails$1,defineCustomElement=defineCustomElement$1;export{KolDetails,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";import{t as tryToDispatchKoliBriEvent}from"./events.js";import{q as setState}from"./prop.validators.js";import{d as defineCustomElement$3}from"./component.js";import{d as defineCustomElement$2}from"./component12.js";class DetailsAnimationController{constructor(t,e,i){this.detailsElement=t,this.summaryElement=e,this.contentElement=i,this.isClosing=!1,this.isExpanding=!1,this.summaryElement.addEventListener("click",this.handleSummaryClick.bind(this))}handleSummaryClick(t){t.preventDefault(),this.detailsElement.style.overflow="hidden",this.isClosing||!this.detailsElement.open?this.open():(this.isExpanding||this.detailsElement.open)&&this.collapse()}open(){var t;this.detailsElement.style.height=`${null!==(t=this.detailsElement.offsetHeight)&&void 0!==t?t:0}px`,this.detailsElement.open=!0,window.requestAnimationFrame(this.expand.bind(this))}expand(){this.isExpanding=!0,this.animateDetailsHeight(this.summaryElement.offsetHeight+this.contentElement.offsetHeight,"expand")}collapse(){this.isClosing=!0,this.animateDetailsHeight(this.summaryElement.offsetHeight,"collapse")}animateDetailsHeight(t,e){const i=this.detailsElement.offsetHeight;this.animation&&this.animation.cancel(),this.animation=this.detailsElement.animate({height:[`${i}px`,`${t}px`]},{duration:matchMedia("(prefers-reduced-motion)").matches?0:250,easing:"ease-out"}),this.animation.addEventListener("finish",(()=>{this.onAnimationFinish()}),{once:!0}),this.animation.addEventListener("cancel",(()=>{"expand"===e?this.isExpanding=!1:this.isClosing=!1}),{once:!0})}onAnimationFinish(){this.detailsElement.open=this.isExpanding,this.animation=void 0,this.isClosing=!1,this.isExpanding=!1,this.detailsElement.style.removeProperty("height"),this.detailsElement.style.removeProperty("overview")}}const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:block}details{display:grid}details>summary{cursor:pointer;display:flex;place-items:center}details>summary>span{border-bottom-color:grey;border-bottom-style:solid}details>summary:focus>span,details>summary:hover>span,details[open]>summary>span{border-bottom-color:#000}details>kol-indented-text{margin:0.25em 0 0 0.5em}",KolDetails$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.handleToggle=t=>{clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var e,i,n,s;Boolean(null===(e=this.detailsElement)||void 0===e?void 0:e.open)!==this.state._open&&(this._open=Boolean(null===(i=this.detailsElement)||void 0===i?void 0:i.open),tryToDispatchKoliBriEvent("toggle",this.host,this._open),"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n.onToggle)&&(null===(s=this.state._on)||void 0===s||s.onToggle(t,this._open)))}),25)},this._label=void 0,this._on=void 0,this._open=!1,this._summary=void 0,this.state={_label:"…",_on:{}}}render(){return h(Host,null,h("details",{ref:t=>{this.detailsElement=t},onToggle:this.handleToggle},h("summary",{ref:t=>this.summaryElement=t},this.state._open?h("kol-icon",{_label:"",_icon:"codicon codicon-chevron-down"}):h("kol-icon",{_label:"",_icon:"codicon codicon-chevron-right"}),h("span",null,this.state._label)),h("div",{class:"content",ref:t=>this.contentElement=t},h("kol-indented-text",null,h("slot",null)))))}validateLabel(t){validateLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&"function"==typeof t.onToggle&&setState(this,"_on",t)}validateOpen(t){validateOpen(this,t)}validateSummary(t){this.validateLabel(t)}componentWillLoad(){this.validateLabel(this._label||this._summary),this.validateOn(this._on),this.validateOpen(this._open)}componentDidLoad(){if(this.detailsElement&&this.summaryElement&&this.contentElement){const t=new DetailsAnimationController(this.detailsElement,this.summaryElement,this.contentElement);this.state._open&&t.open()}}get host(){return this}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"],_summary:["validateSummary"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-details",{_label:[1],_on:[16],_open:[1540],_summary:[1],state:[32]},void 0,{_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"],_summary:["validateSummary"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-details","kol-icon","kol-indented-text"].forEach((t=>{switch(t){case"kol-details":customElements.get(t)||customElements.define(t,KolDetails$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$3();break;case"kol-indented-text":customElements.get(t)||defineCustomElement$2()}}))}const KolDetails=KolDetails$1,defineCustomElement=defineCustomElement$1;export{KolDetails,defineCustomElement};