@public-ui/components 1.3.3-rc.1 → 1.3.3-rc.2

package/dist/components/component.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement as HTMLElement$1,h,Host}from"@stencil/core/internal/client";import{N as Nationalfarben}from"./color.js";import{a as watchValidator,r as rgbaConvert,b as watchNumber,e as a11yHint,f as setEventTargetAndStopPropagation,K as KoliBriDevHelper,h as getExperimalMode,d as devHint,i as getDocument,n as nonce,w as watchString,m as mapStringOrBoolean2String,j as mapBoolean2String,k as watchBoolean,l as a11yHintDisabled,o as setState,p as featureHint,q as objectObjectHandler,t as parseJson}from"./prop.validators.js";import{s}from"./index.m.js";import{c as colorRgba}from"./index2.js";import{i as isObject,d as defineCustomElement$3,v as validateAriaLabel,a as validateIcon,w as watchIconAlign,b as validateLabel}from"./component3.js";import{d as defineCustomElement$4}from"./component2.js";const watchTooltipAlignment=(t,e,a)=>{watchValidator(t,e,(t=>"top"===t||"right"===t||"bottom"===t||"left"===t),new Set(["Alignment {top, right, buttom, left}"]),a,{defaultValue:"top"})},getContrastYIQ=(t,e,a)=>(299*t+587*e+114*a)/1e3>=128?-1:1,calcContrastColor=(t,e,a,o=1)=>{const i=[Math.max(Math.min(Math.round(e[0]+o*Math.max(1,e[0]/100)),255),0),Math.max(Math.min(Math.round(e[1]+o*Math.max(1,e[1]/100)),255),0),Math.max(Math.min(Math.round(e[2]+o*Math.max(1,e[2]/100)),255),0)],n=s(rgbaConvert.hex(`rgba(${t.join(",")},1)`),rgbaConvert.hex(`rgba(${i.join(",")},1)`)),l=i[0]+i[1]+i[2];return 0===l||765===l||n>a?i:calcContrastColor(t,i,a,o)},getContrastColor=(t,e,a,o=1)=>{if(cache.has(t))return cache.get(t);const i=calcContrastColor(t,e,a,o);return cache.set(t,i),i},cache=new Map,createContrastColorPair=(t,e=7)=>{let a=[0,0,0,1],o=[255,255,255,1];"string"==typeof t?(a=colorRgba(t),o=a):"object"==typeof t&&null!==t&&"string"==typeof t.baseColor&&(a=colorRgba(t.baseColor),o="string"==typeof t.contrastColor?colorRgba(t.contrastColor):a);const i=(s=a[0],n=a[1],l=a[2],(299*s+587*n+114*l)/1e3>=128?-1:1);var s,n,l;return o=[...getContrastColor([a[0],a[1],a[2]],[o[0],o[1],o[2]],e,i),1],{baseColor:rgbaConvert.hex(`rgba(${a.join(",")})`),contrastColor:rgbaConvert.hex(`rgba(${o.join(",")})`)}},propergateFocus=(t,e)=>{isObject(t)&&t&&(t.focus=t=>null==e?void 0:e.focus(t))},smartSetTimeout=(t,e)=>{const a=setTimeout((()=>{clearTimeout(a),t()}),e)},options={hooks:{afterPatch:t=>{-1!==t&&0!==t&&a11yHint("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},validateTabIndex=(t,e)=>{watchNumber(t,"_tabIndex",e,options)},searchFormElement=t=>{for(getExperimalMode()&&(devHint("↓ Search form element start."),console.log(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&"KOL-FORM"!==t.tagName;)t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null,getExperimalMode()&&console.log(t);return getExperimalMode()&&devHint("↑ Search form element finished."),t},propergateResetEventToForm=(t={})=>{const e=searchFormElement(t.form);if(e instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===e.tagName)setEventTargetAndStopPropagation(t,e),e.dispatchEvent(t);else if("KOL-FORM"===e.tagName){setEventTargetAndStopPropagation(t,KoliBriDevHelper.querySelector("form",e));const a=e;"object"==typeof a._on&&null!==typeof a._on&&"function"==typeof a._on.onReset&&a._on.onReset(t)}}},propergateSubmitEventToForm=(t={})=>{const e=searchFormElement(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)setEventTargetAndStopPropagation(t,e),e.dispatchEvent(t);else if("KOL-FORM"===e.tagName){setEventTargetAndStopPropagation(t,KoliBriDevHelper.querySelector("form",e));const a=e;"object"==typeof a._on&&null!==typeof a._on&&"function"==typeof a._on.onSubmit&&a._on.onSubmit(t)}}},watchButtonType=(t,e,a)=>{watchValidator(t,e,(t=>"button"===t||"reset"===t||"submit"===t),new Set(["KoliBriButtonType {button, reset, submit}"]),a)},watchButtonVariant=(t,e,a)=>{watchValidator(t,e,(t=>"primary"===t||"secondary"===t||"normal"===t||"danger"===t||"ghost"===t||"custom"===t),new Set(["KoliBriButtonVariant {primary, secondary, normal, danger, ghost, custom}"]),a,{defaultValue:"normal"})},defaultStyleCss$1='kol-badge,.tooltip{font-size:1rem;position:fixed;animation-name:fadeInOpacity;animation-iteration-count:1;animation-timing-function:ease-in;animation-duration:0.5s;display:none;z-index:1000;max-width:300px;box-shadow:0 0 0.15rem rgba(255, 255, 255, 0.8)}kol-badge::after,.tooltip::after{content:" ";position:absolute;border-style:solid;border-width:5px}kol-badge.arrow-left::after,.tooltip.arrow-left::after{margin-top:-5px;top:50%;right:100%;border-color:transparent black transparent transparent}kol-badge.arrow-right::after,.tooltip.arrow-right::after{margin-top:-5px;top:50%;left:100%;border-color:transparent transparent transparent black}kol-badge.arrow-top::after,.tooltip.arrow-top::after{margin-left:-5px;left:50%;bottom:100%;border-color:transparent transparent black transparent}kol-badge.arrow-bottom::after,.tooltip.arrow-bottom::after{margin-left:-5px;left:50%;top:100%;border-color:black transparent transparent transparent}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}',KolTooltip=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.alignTooltip=()=>{if(this.previousSibling){const t=this.previousSibling.getBoundingClientRect();if(this.tooltipElement){switch(this.state._align){case"top":case"bottom":this.tooltipElement.style.left=t.left+this.previousSibling.offsetWidth/2-this.tooltipElement.offsetWidth/2+"px";break;default:this.tooltipElement.style.top=t.top+t.height/2-this.tooltipElement.offsetHeight/2+"px"}switch(this.state._align){case"left":this.tooltipElement.style.left=`calc(${t.left-this.tooltipElement.offsetWidth}px - 0.5em)`;break;case"right":this.tooltipElement.style.left=`calc(${t.right}px + 0.5em)`;break;case"bottom":this.tooltipElement.style.top=`calc(${t.bottom}px + 0.5em)`;break;default:this.tooltipElement.style.top=`calc(${t.top-this.tooltipElement.offsetHeight}px - 0.5em)`}}}},this.showTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","block"),getDocument().body.addEventListener("keyup",this.hideTooltipByEscape),this.alignTooltip(),this.tooltipElement.style.setProperty("visibility","visible"),document.addEventListener("scroll",this.alignTooltip))},this.hideTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),document.removeEventListener("scroll",this.alignTooltip))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(getDocument().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:nonce(),_label:""}}render(){return smartSetTimeout((()=>{this.alignTooltip(),smartSetTimeout(this.alignTooltip,750)}),250),h(Host,{ref:this.catchHostElement},""!==this.state._label&&h("kol-badge",{class:{"arrow-bottom":"top"===this.state._align,"arrow-left":"right"===this.state._align,"arrow-top":"bottom"===this.state._align,"arrow-right":"left"===this.state._align},id:this.state._id,ref:this.catchTooltipElement,_color:{backgroundColor:"#333",color:"#ddd"},_label:this.state._label}))}validateAlign(t){watchTooltipAlignment(this,"_align",t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){watchString(this,"_label",t)}componentWillLoad(){this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}disconnectedCallback(){this.previousSibling&&this.removeListeners(this.previousSibling),this.tooltipElement&&this.removeListeners(this.tooltipElement)}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}static get style(){return{default:defaultStyleCss$1}}},[32,"kol-tooltip",{_align:[1],_id:[1],_label:[1],state:[32]}]);function defineCustomElement$2(){if("undefined"==typeof customElements)return;["kol-tooltip","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-tooltip":customElements.get(t)||customElements.define(t,KolTooltip);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$1();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolButtonWc=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.nonce=nonce(),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this.onClick=t=>{var e,a;"submit"===this.state._type?propergateSubmitEventToForm({form:this.host,ref:this.ref}):"reset"===this.state._type?propergateResetEventToForm({form:this.host,ref:this.ref}):"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)?(setEventTargetAndStopPropagation(t,this.ref),null===(a=this.state._on)||void 0===a||a.onClick(t,this.state._value)):devHint("It was no button click callback configured!")},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_ariaLabel:"",_icon:{},_iconAlign:"left",_label:"",_on:{},_type:"button"}}render(){return h(Host,null,h("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":mapStringOrBoolean2String(this.state._ariaCurrent),"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":!1===this.state._iconOnly?this.state._ariaLabel||this.state._label:void 0,"aria-labelledby":!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._iconOnly},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._ariaLabel||this.state._label},h("slot",{name:"expert",slot:"expert"}))),!0===this.state._iconOnly&&h("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(t){watchString(this,"_accessKey",t)}validateAriaControls(t){watchString(this,"_ariaControls",t)}validateAriaCurrent(t){watchValidator(this,"_ariaControls",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateAriaExpanded(t){watchBoolean(this,"_ariaExpanded",t)}validateAriaLabel(t){validateAriaLabel(this,t)}validateAriaSelected(t){watchBoolean(this,"_ariaSelected",t)}validateCustomClass(t){watchString(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){watchBoolean(this,"_disabled",t),!0===t&&a11yHintDisabled()}validateIcon(t){validateIcon(this,t)}validateIconAlign(t){watchIconAlign(this,t)}validateIconOnly(t){watchBoolean(this,"_iconOnly",t,{defaultValue:!1})}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){watchString(this,"_role",t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}validateType(t){watchButtonType(this,"_type",t)}validateValue(t){setState(this,"_value",t)}validateVariant(t){watchButtonVariant(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateIconOnly(this._iconOnly),this.validateId(this._id),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},[4,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1025,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[516],_icon:[1],_iconAlign:[1,"_icon-align"],_iconOnly:[516,"_icon-only"],_id:[1],_label:[1025],_on:[16],_role:[1],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[16],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc","kol-badge","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-button-wc":customElements.get(t)||customElements.define(t,KolButtonWc);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const defaultStyleCss="@windicss; *{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:700}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{border-width:0}span{display:inline-flex}span kol-button-wc,span .kol-button-wc{box-shadow-left:1px solid rgba(0, 0, 0, 0.25)}";featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const HACK_REG_EX=/^([a-f0-9]{3}|[a-f0-9]{6})$/,KolBadge=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.bgColorStr="#000",this.colorStr="#fff",this.handleColorChange=t=>{let e,a=t;"string"==typeof a?(HACK_REG_EX.test(a)&&(devHint("[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."),a=`#${a}`),e=createContrastColorPair(a)):e=createContrastColorPair({baseColor:a.backgroundColor,contrastColor:a.color}),this.bgColorStr=e.baseColor,this.colorStr=e.contrastColor},this._color=Nationalfarben.Schwarz,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._label=void 0,this._smartButton=void 0,this.state={_color:Nationalfarben.Schwarz}}render(){return h(Host,null,h("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},h("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&h("kol-button-wc",{_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_icon:this.state._smartButton._icon,_iconOnly:!0,_id:this.state._smartButton._id,_label:this.state._smartButton._label,_on:this.state._smartButton._on,_tooltipAlign:this.state._smartButton._tooltipAlign,_variant:this.state._smartButton._variant})))}validateColor(t){watchValidator(this,"_color",(t=>"string"==typeof t||"object"==typeof t&&null!==t),new Set(["string","KoliBriColor"]),t,{defaultValue:Nationalfarben.Schwarz,hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(t){objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}setState(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-badge",{_color:[1],_icon:[1],_iconAlign:[1,"_icon-align"],_iconOnly:[516,"_icon-only"],_label:[1],_smartButton:[1,"_smart-button"],state:[32]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-badge","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-badge":customElements.get(t)||customElements.define(t,KolBadge);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$1();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}export{KolBadge as K,defineCustomElement$1 as a,defineCustomElement as b,KolButtonWc as c,defineCustomElement$2 as d,propergateSubmitEventToForm as e,watchButtonVariant as f,KolTooltip as g,propergateFocus as p,validateTabIndex as v,watchTooltipAlignment as w};
+import{proxyCustomElement,HTMLElement as HTMLElement$1,h,Host}from"@stencil/core/internal/client";import{N as Nationalfarben}from"./color.js";import{a as watchValidator,r as rgbaConvert,b as watchNumber,e as a11yHint,f as setEventTargetAndStopPropagation,K as KoliBriDevHelper,h as getExperimalMode,d as devHint,i as getDocument,n as nonce,w as watchString,m as mapStringOrBoolean2String,j as mapBoolean2String,k as watchBoolean,l as a11yHintDisabled,o as setState,p as featureHint,q as objectObjectHandler,t as parseJson}from"./prop.validators.js";import{s}from"./index.m.js";import{c as colorRgba}from"./index2.js";import{i as isObject,d as defineCustomElement$3,v as validateAriaLabel,a as validateIcon,w as watchIconAlign,b as validateLabel}from"./component3.js";import{d as defineCustomElement$4}from"./component2.js";const watchTooltipAlignment=(t,e,o)=>{watchValidator(t,e,(t=>"top"===t||"right"===t||"bottom"===t||"left"===t),new Set(["Alignment {top, right, buttom, left}"]),o,{defaultValue:"top"})},getContrastYIQ=(t,e,o)=>(299*t+587*e+114*o)/1e3>=128?-1:1,calcContrastColor=(t,e,o,i=1)=>{const n=[Math.max(Math.min(Math.round(e[0]+i*Math.max(1,e[0]/100)),255),0),Math.max(Math.min(Math.round(e[1]+i*Math.max(1,e[1]/100)),255),0),Math.max(Math.min(Math.round(e[2]+i*Math.max(1,e[2]/100)),255),0)],a=s(rgbaConvert.hex(`rgba(${t.join(",")},1)`),rgbaConvert.hex(`rgba(${n.join(",")},1)`)),l=n[0]+n[1]+n[2];return 0===l||765===l||a>o?n:calcContrastColor(t,n,o,i)},getContrastColor=(t,e,o,i=1)=>{if(cache.has(t))return cache.get(t);const n=calcContrastColor(t,e,o,i);return cache.set(t,n),n},cache=new Map,createContrastColorPair=(t,e=7)=>{let o=[0,0,0,1],i=[255,255,255,1];"string"==typeof t?(o=colorRgba(t),i=o):"object"==typeof t&&null!==t&&"string"==typeof t.baseColor&&(o=colorRgba(t.baseColor),i="string"==typeof t.contrastColor?colorRgba(t.contrastColor):o);const n=(a=o[0],s=o[1],l=o[2],(299*a+587*s+114*l)/1e3>=128?-1:1);var a,s,l;return i=[...getContrastColor([o[0],o[1],o[2]],[i[0],i[1],i[2]],e,n),1],{baseColor:rgbaConvert.hex(`rgba(${o.join(",")})`),contrastColor:rgbaConvert.hex(`rgba(${i.join(",")})`)}},propergateFocus=(t,e)=>{isObject(t)&&t&&(t.focus=t=>null==e?void 0:e.focus(t))},smartSetTimeout=(t,e)=>{const o=setTimeout((()=>{clearTimeout(o),t()}),e)},options={hooks:{afterPatch:t=>{-1!==t&&0!==t&&a11yHint("Don’t Use Tabindex Greater than 0: https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html")}}},validateTabIndex=(t,e)=>{watchNumber(t,"_tabIndex",e,options)},searchFormElement=t=>{for(getExperimalMode()&&(devHint("↓ Search form element start."),console.log(t));t instanceof HTMLElement&&"FORM"!==t.tagName&&"KOL-FORM"!==t.tagName;)t=t.parentElement instanceof HTMLElement?t.parentElement:t.parentNode instanceof ShadowRoot?t.parentNode.host:null,getExperimalMode()&&console.log(t);return getExperimalMode()&&devHint("↑ Search form element finished."),t},propergateResetEventToForm=(t={})=>{const e=searchFormElement(t.form);if(e instanceof HTMLElement){const t=new Event("reset",{bubbles:!0,cancelable:!0});if("FORM"===e.tagName)setEventTargetAndStopPropagation(t,e),e.dispatchEvent(t);else if("KOL-FORM"===e.tagName){setEventTargetAndStopPropagation(t,KoliBriDevHelper.querySelector("form",e));const o=e;"object"==typeof o._on&&null!==typeof o._on&&"function"==typeof o._on.onReset&&o._on.onReset(t)}}},propergateSubmitEventToForm=(t={})=>{const e=searchFormElement(t.form);if(e instanceof HTMLElement){const t=new SubmitEvent("submit",{bubbles:!0,cancelable:!0,submitter:e});if("FORM"===e.tagName)setEventTargetAndStopPropagation(t,e),e.dispatchEvent(t);else if("KOL-FORM"===e.tagName){setEventTargetAndStopPropagation(t,KoliBriDevHelper.querySelector("form",e));const o=e;"object"==typeof o._on&&null!==typeof o._on&&"function"==typeof o._on.onSubmit&&o._on.onSubmit(t)}}},watchButtonType=(t,e,o)=>{watchValidator(t,e,(t=>"button"===t||"reset"===t||"submit"===t),new Set(["KoliBriButtonType {button, reset, submit}"]),o)},watchButtonVariant=(t,e,o)=>{watchValidator(t,e,(t=>"primary"===t||"secondary"===t||"normal"===t||"danger"===t||"ghost"===t||"custom"===t),new Set(["KoliBriButtonVariant {primary, secondary, normal, danger, ghost, custom}"]),o,{defaultValue:"normal"})};function getAlignment(t){return t.split("-")[1]}function getLengthFromAxis(t){return"y"===t?"height":"width"}function getSide(t){return t.split("-")[0]}function getMainAxisFromPlacement(t){return["top","bottom"].includes(getSide(t))?"x":"y"}function computeCoordsFromPlacement(t,e,o){let{reference:i,floating:n}=t;const a=i.x+i.width/2-n.width/2,s=i.y+i.height/2-n.height/2,l=getMainAxisFromPlacement(e),r=getLengthFromAxis(l),c=i[r]/2-n[r]/2,d="x"===l;let m;switch(getSide(e)){case"top":m={x:a,y:i.y-n.height};break;case"bottom":m={x:a,y:i.y+i.height};break;case"right":m={x:i.x+i.width,y:s};break;case"left":m={x:i.x-n.width,y:s};break;default:m={x:i.x,y:i.y}}switch(getAlignment(e)){case"start":m[l]-=c*(o&&d?-1:1);break;case"end":m[l]+=c*(o&&d?-1:1)}return m}const computePosition$1=async(t,e,o)=>{const{placement:i="bottom",strategy:n="absolute",middleware:a=[],platform:s}=o,l=a.filter(Boolean),r=await(null==s.isRTL?void 0:s.isRTL(e));let c=await s.getElementRects({reference:t,floating:e,strategy:n}),{x:d,y:m}=computeCoordsFromPlacement(c,i,r),u=i,h={},g=0;for(let o=0;o<l.length;o++){const{name:a,fn:p}=l[o],{x:f,y:b,data:v,reset:y}=await p({x:d,y:m,initialPlacement:i,placement:u,strategy:n,middlewareData:h,rects:c,platform:s,elements:{reference:t,floating:e}});d=null!=f?f:d,m=null!=b?b:m,h={...h,[a]:{...h[a],...v}},y&&g<=50&&(g++,"object"==typeof y&&(y.placement&&(u=y.placement),y.rects&&(c=!0===y.rects?await s.getElementRects({reference:t,floating:e,strategy:n}):y.rects),({x:d,y:m}=computeCoordsFromPlacement(c,u,r))),o=-1)}return{x:d,y:m,placement:u,strategy:n,middlewareData:h}};function expandPaddingObject(t){return{top:0,right:0,bottom:0,left:0,...t}}function getSideObjectFromPadding(t){return"number"!=typeof t?expandPaddingObject(t):{top:t,right:t,bottom:t,left:t}}function rectToClientRect(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function detectOverflow(t,e){var o;void 0===e&&(e={});const{x:i,y:n,platform:a,rects:s,elements:l,strategy:r}=t,{boundary:c="clippingAncestors",rootBoundary:d="viewport",elementContext:m="floating",altBoundary:u=!1,padding:h=0}=e,g=getSideObjectFromPadding(h),p=l[u?"floating"===m?"reference":"floating":m],f=rectToClientRect(await a.getClippingRect({element:null==(o=await(null==a.isElement?void 0:a.isElement(p)))||o?p:p.contextElement||await(null==a.getDocumentElement?void 0:a.getDocumentElement(l.floating)),boundary:c,rootBoundary:d,strategy:r})),b="floating"===m?{...s.floating,x:i,y:n}:s.reference,v=await(null==a.getOffsetParent?void 0:a.getOffsetParent(l.floating)),y=await(null==a.isElement?void 0:a.isElement(v))&&await(null==a.getScale?void 0:a.getScale(v))||{x:1,y:1},_=rectToClientRect(a.convertOffsetParentRelativeRectToViewportRelativeRect?await a.convertOffsetParentRelativeRectToViewportRelativeRect({rect:b,offsetParent:v,strategy:r}):b);return{top:(f.top-_.top+g.top)/y.y,bottom:(_.bottom-f.bottom+g.bottom)/y.y,left:(f.left-_.left+g.left)/y.x,right:(_.right-f.right+g.right)/y.x}}const min$1=Math.min,max$1=Math.max;function within(t,e,o){return max$1(t,min$1(e,o))}const arrow=t=>({name:"arrow",options:t,async fn(e){const{element:o,padding:i=0}=t||{},{x:n,y:a,placement:s,rects:l,platform:r}=e;if(null==o)return{};const c=getSideObjectFromPadding(i),d={x:n,y:a},m=getMainAxisFromPlacement(s),u=getLengthFromAxis(m),h=await r.getDimensions(o),g="y"===m?"top":"left",p="y"===m?"bottom":"right",f=l.reference[u]+l.reference[m]-d[m]-l.floating[u],b=d[m]-l.reference[m],v=await(null==r.getOffsetParent?void 0:r.getOffsetParent(o));let y=v?"y"===m?v.clientHeight||0:v.clientWidth||0:0;0===y&&(y=l.floating[u]);const _=f/2-b/2,w=c[g],x=y-h[u]-c[p],C=y/2-h[u]/2+_,E=within(w,C,x),S=null!=getAlignment(s)&&C!=E&&l.reference[u]/2-(C<w?c[g]:c[p])-h[u]/2<0;return{[m]:d[m]-(S?C<w?w-C:x-C:0),data:{[m]:E,centerOffset:C-E}}}}),oppositeSideMap={left:"right",right:"left",bottom:"top",top:"bottom"};function getOppositePlacement(t){return t.replace(/left|right|bottom|top/g,(t=>oppositeSideMap[t]))}function getAlignmentSides(t,e,o){void 0===o&&(o=!1);const i=getAlignment(t),n=getMainAxisFromPlacement(t),a=getLengthFromAxis(n);let s="x"===n?i===(o?"end":"start")?"right":"left":"start"===i?"bottom":"top";return e.reference[a]>e.floating[a]&&(s=getOppositePlacement(s)),{main:s,cross:getOppositePlacement(s)}}const oppositeAlignmentMap={start:"end",end:"start"};function getOppositeAlignmentPlacement(t){return t.replace(/start|end/g,(t=>oppositeAlignmentMap[t]))}function getExpandedPlacements(t){const e=getOppositePlacement(t);return[getOppositeAlignmentPlacement(t),e,getOppositeAlignmentPlacement(e)]}function getSideList(t,e,o){const i=["left","right"],n=["right","left"],a=["top","bottom"],s=["bottom","top"];switch(t){case"top":case"bottom":return o?e?n:i:e?i:n;case"left":case"right":return e?a:s;default:return[]}}function getOppositeAxisPlacements(t,e,o,i){const n=getAlignment(t);let a=getSideList(getSide(t),"start"===o,i);return n&&(a=a.map((t=>t+"-"+n)),e&&(a=a.concat(a.map(getOppositeAlignmentPlacement)))),a}const flip=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var o;const{placement:i,middlewareData:n,rects:a,initialPlacement:s,platform:l,elements:r}=e,{mainAxis:c=!0,crossAxis:d=!0,fallbackPlacements:m,fallbackStrategy:u="bestFit",fallbackAxisSideDirection:h="none",flipAlignment:g=!0,...p}=t,f=getSide(i),b=getSide(s)===s,v=await(null==l.isRTL?void 0:l.isRTL(r.floating)),y=m||(b||!g?[getOppositePlacement(s)]:getExpandedPlacements(s));m||"none"===h||y.push(...getOppositeAxisPlacements(s,g,h,v));const _=[s,...y],w=await detectOverflow(e,p),x=[];let C=(null==(o=n.flip)?void 0:o.overflows)||[];if(c&&x.push(w[f]),d){const{main:t,cross:e}=getAlignmentSides(i,a,v);x.push(w[t],w[e])}if(C=[...C,{placement:i,overflows:x}],!x.every((t=>t<=0))){var E,S;const t=((null==(E=n.flip)?void 0:E.index)||0)+1,e=_[t];if(e)return{data:{index:t,overflows:C},reset:{placement:e}};let o=null==(S=C.find((t=>t.overflows[0]<=0)))?void 0:S.placement;if(!o)switch(u){case"bestFit":{var A;const t=null==(A=C.map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:A[0];t&&(o=t);break}case"initialPlacement":o=s}if(i!==o)return{reset:{placement:o}}}return{}}}};async function convertValueToCoords(t,e){const{placement:o,platform:i,elements:n}=t,a=await(null==i.isRTL?void 0:i.isRTL(n.floating)),s=getSide(o),l=getAlignment(o),r="x"===getMainAxisFromPlacement(o),c=["left","top"].includes(s)?-1:1,d=a&&r?-1:1,m="function"==typeof e?e(t):e;let{mainAxis:u,crossAxis:h,alignmentAxis:g}="number"==typeof m?{mainAxis:m,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...m};return l&&"number"==typeof g&&(h="end"===l?-1*g:g),r?{x:h*d,y:u*c}:{x:u*c,y:h*d}}const offset=function(t){return void 0===t&&(t=0),{name:"offset",options:t,async fn(e){const{x:o,y:i}=e,n=await convertValueToCoords(e,t);return{x:o+n.x,y:i+n.y,data:n}}}};function getCrossAxis(t){return"x"===t?"y":"x"}const shift=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:o,y:i,placement:n}=e,{mainAxis:a=!0,crossAxis:s=!1,limiter:l={fn:t=>{let{x:e,y:o}=t;return{x:e,y:o}}},...r}=t,c={x:o,y:i},d=await detectOverflow(e,r),m=getMainAxisFromPlacement(getSide(n)),u=getCrossAxis(m);let h=c[m],g=c[u];if(a){const t="y"===m?"bottom":"right";h=within(h+d["y"===m?"top":"left"],h,h-d[t])}if(s){const t="y"===u?"bottom":"right";g=within(g+d["y"===u?"top":"left"],g,g-d[t])}const p=l.fn({...e,[m]:h,[u]:g});return{...p,data:{x:p.x-o,y:p.y-i}}}}};function getWindow(t){var e;return(null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function getComputedStyle$1(t){return getWindow(t).getComputedStyle(t)}function getNodeName(t){return isNode(t)?(t.nodeName||"").toLowerCase():""}let uaString;function getUAString(){if(uaString)return uaString;const t=navigator.userAgentData;return t&&Array.isArray(t.brands)?(uaString=t.brands.map((t=>t.brand+"/"+t.version)).join(" "),uaString):navigator.userAgent}function isHTMLElement(t){return t instanceof getWindow(t).HTMLElement}function isElement(t){return t instanceof getWindow(t).Element}function isNode(t){return t instanceof getWindow(t).Node}function isShadowRoot(t){if("undefined"==typeof ShadowRoot)return!1;return t instanceof getWindow(t).ShadowRoot||t instanceof ShadowRoot}function isOverflowElement(t){const{overflow:e,overflowX:o,overflowY:i,display:n}=getComputedStyle$1(t);return/auto|scroll|overlay|hidden|clip/.test(e+i+o)&&!["inline","contents"].includes(n)}function isTableElement(t){return["table","td","th"].includes(getNodeName(t))}function isContainingBlock(t){const e=/firefox/i.test(getUAString()),o=getComputedStyle$1(t),i=o.backdropFilter||o.WebkitBackdropFilter;return"none"!==o.transform||"none"!==o.perspective||!!i&&"none"!==i||e&&"filter"===o.willChange||e&&!!o.filter&&"none"!==o.filter||["transform","perspective"].some((t=>o.willChange.includes(t)))||["paint","layout","strict","content"].some((t=>{const e=o.contain;return null!=e&&e.includes(t)}))}function isLayoutViewport(){return!/^((?!chrome|android).)*safari/i.test(getUAString())}function isLastTraversableNode(t){return["html","body","#document"].includes(getNodeName(t))}const min=Math.min,max=Math.max,round=Math.round;function getCssDimensions(t){const e=getComputedStyle$1(t);let o=parseFloat(e.width),i=parseFloat(e.height);const n=t.offsetWidth,a=t.offsetHeight,s=round(o)!==n||round(i)!==a;return s&&(o=n,i=a),{width:o,height:i,fallback:s}}function unwrapElement(t){return isElement(t)?t:t.contextElement}const FALLBACK_SCALE={x:1,y:1};function getScale(t){const e=unwrapElement(t);if(!isHTMLElement(e))return FALLBACK_SCALE;const o=e.getBoundingClientRect(),{width:i,height:n,fallback:a}=getCssDimensions(e);let s=(a?round(o.width):o.width)/i,l=(a?round(o.height):o.height)/n;return s&&Number.isFinite(s)||(s=1),l&&Number.isFinite(l)||(l=1),{x:s,y:l}}function getBoundingClientRect(t,e,o,i){var n,a;void 0===e&&(e=!1),void 0===o&&(o=!1);const s=t.getBoundingClientRect(),l=unwrapElement(t);let r=FALLBACK_SCALE;e&&(i?isElement(i)&&(r=getScale(i)):r=getScale(t));const c=l?getWindow(l):window,d=!isLayoutViewport()&&o;let m=(s.left+(d&&(null==(n=c.visualViewport)?void 0:n.offsetLeft)||0))/r.x,u=(s.top+(d&&(null==(a=c.visualViewport)?void 0:a.offsetTop)||0))/r.y,h=s.width/r.x,g=s.height/r.y;if(l){const t=getWindow(l),e=i&&isElement(i)?getWindow(i):i;let o=t.frameElement;for(;o&&i&&e!==t;){const t=getScale(o),e=o.getBoundingClientRect(),i=getComputedStyle(o);e.x+=(o.clientLeft+parseFloat(i.paddingLeft))*t.x,e.y+=(o.clientTop+parseFloat(i.paddingTop))*t.y,m*=t.x,u*=t.y,h*=t.x,g*=t.y,m+=e.x,u+=e.y,o=getWindow(o).frameElement}}return{width:h,height:g,top:u,right:m+h,bottom:u+g,left:m,x:m,y:u}}function getDocumentElement(t){return((isNode(t)?t.ownerDocument:t.document)||window.document).documentElement}function getNodeScroll(t){return isElement(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function getWindowScrollBarX(t){return getBoundingClientRect(getDocumentElement(t)).left+getNodeScroll(t).scrollLeft}function getRectRelativeToOffsetParent(t,e,o){const i=isHTMLElement(e),n=getDocumentElement(e),a=getBoundingClientRect(t,!0,"fixed"===o,e);let s={scrollLeft:0,scrollTop:0};const l={x:0,y:0};if(i||!i&&"fixed"!==o)if(("body"!==getNodeName(e)||isOverflowElement(n))&&(s=getNodeScroll(e)),isHTMLElement(e)){const t=getBoundingClientRect(e,!0);l.x=t.x+e.clientLeft,l.y=t.y+e.clientTop}else n&&(l.x=getWindowScrollBarX(n));return{x:a.left+s.scrollLeft-l.x,y:a.top+s.scrollTop-l.y,width:a.width,height:a.height}}function getParentNode(t){if("html"===getNodeName(t))return t;const e=t.assignedSlot||t.parentNode||(isShadowRoot(t)?t.host:null)||getDocumentElement(t);return isShadowRoot(e)?e.host:e}function getTrueOffsetParent(t){return isHTMLElement(t)&&"fixed"!==getComputedStyle$1(t).position?t.offsetParent:null}function getContainingBlock(t){let e=getParentNode(t);for(;isHTMLElement(e)&&!isLastTraversableNode(e);){if(isContainingBlock(e))return e;e=getParentNode(e)}return null}function getOffsetParent(t){const e=getWindow(t);let o=getTrueOffsetParent(t);for(;o&&isTableElement(o)&&"static"===getComputedStyle$1(o).position;)o=getTrueOffsetParent(o);return o&&("html"===getNodeName(o)||"body"===getNodeName(o)&&"static"===getComputedStyle$1(o).position&&!isContainingBlock(o))?e:o||getContainingBlock(t)||e}function getDimensions(t){return getCssDimensions(t)}function convertOffsetParentRelativeRectToViewportRelativeRect(t){let{rect:e,offsetParent:o,strategy:i}=t;const n=isHTMLElement(o),a=getDocumentElement(o);if(o===a)return e;let s={scrollLeft:0,scrollTop:0},l={x:1,y:1};const r={x:0,y:0};if((n||!n&&"fixed"!==i)&&(("body"!==getNodeName(o)||isOverflowElement(a))&&(s=getNodeScroll(o)),isHTMLElement(o))){const t=getBoundingClientRect(o);l=getScale(o),r.x=t.x+o.clientLeft,r.y=t.y+o.clientTop}return{width:e.width*l.x,height:e.height*l.y,x:e.x*l.x-s.scrollLeft*l.x+r.x,y:e.y*l.y-s.scrollTop*l.y+r.y}}function getViewportRect(t,e){const o=getWindow(t),i=getDocumentElement(t),n=o.visualViewport;let a=i.clientWidth,s=i.clientHeight,l=0,r=0;if(n){a=n.width,s=n.height;const t=isLayoutViewport();(t||!t&&"fixed"===e)&&(l=n.offsetLeft,r=n.offsetTop)}return{width:a,height:s,x:l,y:r}}function getDocumentRect(t){var e;const o=getDocumentElement(t),i=getNodeScroll(t),n=null==(e=t.ownerDocument)?void 0:e.body,a=max(o.scrollWidth,o.clientWidth,n?n.scrollWidth:0,n?n.clientWidth:0),s=max(o.scrollHeight,o.clientHeight,n?n.scrollHeight:0,n?n.clientHeight:0);let l=-i.scrollLeft+getWindowScrollBarX(t);const r=-i.scrollTop;return"rtl"===getComputedStyle$1(n||o).direction&&(l+=max(o.clientWidth,n?n.clientWidth:0)-a),{width:a,height:s,x:l,y:r}}function getNearestOverflowAncestor(t){const e=getParentNode(t);return isLastTraversableNode(e)?t.ownerDocument.body:isHTMLElement(e)&&isOverflowElement(e)?e:getNearestOverflowAncestor(e)}function getOverflowAncestors(t,e){var o;void 0===e&&(e=[]);const i=getNearestOverflowAncestor(t),n=i===(null==(o=t.ownerDocument)?void 0:o.body),a=getWindow(i);return n?e.concat(a,a.visualViewport||[],isOverflowElement(i)?i:[]):e.concat(i,getOverflowAncestors(i))}function getInnerBoundingClientRect(t,e){const o=getBoundingClientRect(t,!0,"fixed"===e),i=o.top+t.clientTop,n=o.left+t.clientLeft,a=isHTMLElement(t)?getScale(t):{x:1,y:1},s=t.clientWidth*a.x,l=t.clientHeight*a.y,r=n*a.x,c=i*a.y;return{top:c,left:r,right:r+s,bottom:c+l,x:r,y:c,width:s,height:l}}function getClientRectFromClippingAncestor(t,e,o){return"viewport"===e?rectToClientRect(getViewportRect(t,o)):isElement(e)?getInnerBoundingClientRect(e,o):rectToClientRect(getDocumentRect(getDocumentElement(t)))}function getClippingElementAncestors(t,e){const o=e.get(t);if(o)return o;let i=getOverflowAncestors(t).filter((t=>isElement(t)&&"body"!==getNodeName(t))),n=null;const a="fixed"===getComputedStyle$1(t).position;let s=a?getParentNode(t):t;for(;isElement(s)&&!isLastTraversableNode(s);){const t=getComputedStyle$1(s),e=isContainingBlock(s);(a?!e&&!n:!e&&"static"===t.position&&!!n&&["absolute","fixed"].includes(n.position))?i=i.filter((t=>t!==s)):n=t,s=getParentNode(s)}return e.set(t,i),i}function getClippingRect(t){let{element:e,boundary:o,rootBoundary:i,strategy:n}=t;const a=[..."clippingAncestors"===o?getClippingElementAncestors(e,this._c):[].concat(o),i],s=a[0],l=a.reduce(((t,o)=>{const i=getClientRectFromClippingAncestor(e,o,n);return t.top=max(i.top,t.top),t.right=min(i.right,t.right),t.bottom=min(i.bottom,t.bottom),t.left=max(i.left,t.left),t}),getClientRectFromClippingAncestor(e,s,n));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}}const platform={getClippingRect:getClippingRect,convertOffsetParentRelativeRectToViewportRelativeRect:convertOffsetParentRelativeRectToViewportRelativeRect,isElement:isElement,getDimensions:getDimensions,getOffsetParent:getOffsetParent,getDocumentElement:getDocumentElement,getScale:getScale,async getElementRects(t){let{reference:e,floating:o,strategy:i}=t;const n=this.getOffsetParent||getOffsetParent,a=this.getDimensions;return{reference:getRectRelativeToOffsetParent(e,await n(o),i),floating:{x:0,y:0,...await a(o)}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>"rtl"===getComputedStyle$1(t).direction},computePosition=(t,e,o)=>{const i=new Map,n={platform:platform,...o},a={...n.platform,_c:i};return computePosition$1(t,e,{...n,platform:a})},defaultStyleCss$1=":host #floating{display:none;position:absolute;animation-name:fadeInOpacity;animation-iteration-count:1;animation-timing-function:ease-in;animation-duration:0.5s;box-sizing:border-box;box-shadow:0 0 0.15rem rgba(255, 255, 255, 0.8)}:host #arrow{position:absolute;width:10px;height:10px;background:#333;transform:rotate(45deg);z-index:999}:host kol-badge{font-size:1rem;max-width:300px;z-index:1000;position:relative}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",KolTooltip=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.alignTooltip=()=>{var t,e;if(this.previousSibling){const o=this.previousSibling;if(this.tooltipElement){const i=this.tooltipElement,n=this.arrowElement,a=[(e=null!==(t=null==n?void 0:n.offsetHeight)&&void 0!==t?t:10,void 0===e&&(e=0),{name:"offset",options:e,async fn(t){const{x:o,y:i}=t,n=await convertValueToCoords(t,e);return{x:o+n.x,y:i+n.y,data:n}}}),flip(),shift()];n&&a.push(arrow({element:n})),computePosition(o,i,{placement:this.state._align,middleware:a}).then((({x:t,y:e,middlewareData:o,placement:a})=>{var s,l;Object.assign(i.style,{left:`${t}px`,top:`${e}px`}),n&&((null===(s=o.arrow)||void 0===s?void 0:s.x)?Object.assign(n.style,{left:`${o.arrow.x}px`,top:"bottom"===a?-n.offsetHeight/2+"px":"",bottom:"top"===a?-n.offsetHeight/2+"px":""}):(null===(l=o.arrow)||void 0===l?void 0:l.y)&&Object.assign(n.style,{left:"right"===a?-n.offsetWidth/2+"px":"",right:"left"===a?-n.offsetWidth/2+"px":"",top:`${o.arrow.y}px`}))}))}}},this.showTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","block"),getDocument().body.addEventListener("keyup",this.hideTooltipByEscape),this.alignTooltip(),this.tooltipElement.style.setProperty("visibility","visible"),document.addEventListener("scroll",this.alignTooltip))},this.hideTooltip=()=>{this.tooltipElement&&(this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),document.removeEventListener("scroll",this.alignTooltip))},this.hideTooltipByEscape=t=>{"Escape"===t.key&&(getDocument().body.removeEventListener("keyup",this.hideTooltipByEscape),this.hideTooltip())},this.addListeners=t=>{t.addEventListener("mouseover",this.incrementOverFocusCount),t.addEventListener("focus",this.incrementOverFocusCount),t.addEventListener("mouseout",this.decrementOverFocusCount),t.addEventListener("blur",this.decrementOverFocusCount)},this.removeListeners=t=>{t.removeEventListener("mouseover",this.incrementOverFocusCount),t.removeEventListener("focus",this.incrementOverFocusCount),t.removeEventListener("mouseout",this.decrementOverFocusCount),t.removeEventListener("blur",this.decrementOverFocusCount)},this.resyncListeners=t=>{this.removeListeners(t),this.addListeners(t)},this.catchHostElement=t=>{t&&(this.previousSibling=t.previousElementSibling,this.previousSibling&&this.resyncListeners(this.previousSibling))},this.catchTooltipElement=t=>{this.tooltipElement=t,this.tooltipElement&&this.resyncListeners(this.tooltipElement)},this.catchArrowElement=t=>{this.arrowElement=t},this.overFocusCount=0,this.incrementOverFocusCount=()=>{this.overFocusCount++,this.showOrHideTooltip()},this.decrementOverFocusCount=()=>{this.overFocusCount--,this.showOrHideTooltip()},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{clearTimeout(this.overFocusTimeout),this.overFocusCount>0?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_id:nonce(),_label:""}}render(){return smartSetTimeout((()=>{this.alignTooltip(),smartSetTimeout(this.alignTooltip,750)}),250),h(Host,{ref:this.catchHostElement},""!==this.state._label&&h("div",{id:"floating",ref:this.catchTooltipElement},h("div",{id:"arrow",ref:this.catchArrowElement}),h("kol-badge",{id:this.state._id,_color:{backgroundColor:"#333",color:"#ddd"},_label:this.state._label})))}validateAlign(t){watchTooltipAlignment(this,"_align",t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){watchString(this,"_label",t)}componentWillLoad(){this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}disconnectedCallback(){this.previousSibling&&this.removeListeners(this.previousSibling),this.tooltipElement&&this.removeListeners(this.tooltipElement)}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}static get style(){return{default:defaultStyleCss$1}}},[32,"kol-tooltip",{_align:[1],_id:[1],_label:[1],state:[32]}]);function defineCustomElement$2(){if("undefined"==typeof customElements)return;["kol-tooltip","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-tooltip":customElements.get(t)||customElements.define(t,KolTooltip);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$1();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolButtonWc=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.nonce=nonce(),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this.onClick=t=>{var e,o;"submit"===this.state._type?propergateSubmitEventToForm({form:this.host,ref:this.ref}):"reset"===this.state._type?propergateResetEventToForm({form:this.host,ref:this.ref}):"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)?(setEventTargetAndStopPropagation(t,this.ref),null===(o=this.state._on)||void 0===o||o.onClick(t,this.state._value)):devHint("It was no button click callback configured!")},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._id=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_ariaLabel:"",_icon:{},_iconAlign:"left",_label:"",_on:{},_type:"button"}}render(){return h(Host,null,h("button",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-current":mapStringOrBoolean2String(this.state._ariaCurrent),"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":!1===this.state._iconOnly?this.state._ariaLabel||this.state._label:void 0,"aria-labelledby":!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"icon-only":!0===this.state._iconOnly},disabled:this.state._disabled,id:this.state._id},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._ariaLabel||this.state._label},h("slot",{name:"expert",slot:"expert"}))),!0===this.state._iconOnly&&h("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAccessKey(t){watchString(this,"_accessKey",t)}validateAriaControls(t){watchString(this,"_ariaControls",t)}validateAriaCurrent(t){watchValidator(this,"_ariaControls",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateAriaExpanded(t){watchBoolean(this,"_ariaExpanded",t)}validateAriaLabel(t){validateAriaLabel(this,t)}validateAriaSelected(t){watchBoolean(this,"_ariaSelected",t)}validateCustomClass(t){watchString(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){watchBoolean(this,"_disabled",t),!0===t&&a11yHintDisabled()}validateIcon(t){validateIcon(this,t)}validateIconAlign(t){watchIconAlign(this,t)}validateIconOnly(t){watchBoolean(this,"_iconOnly",t,{defaultValue:!1})}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){watchString(this,"_role",t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}validateType(t){watchButtonType(this,"_type",t)}validateValue(t){setState(this,"_value",t)}validateVariant(t){watchButtonVariant(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateIconOnly(this._iconOnly),this.validateId(this._id),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_id:["validateId"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}},[4,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[516,"_aria-expanded"],_ariaLabel:[1025,"_aria-label"],_ariaSelected:[516,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[516],_icon:[1],_iconAlign:[1,"_icon-align"],_iconOnly:[516,"_icon-only"],_id:[1],_label:[1025],_on:[16],_role:[1],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[16],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc","kol-badge","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-button-wc":customElements.get(t)||customElements.define(t,KolButtonWc);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const defaultStyleCss="@windicss; *{box-sizing:border-box;font-size:inherit;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}kol-heading-wc{font-weight:700}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:0.25rem;place-items:center}a,button{cursor:pointer}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{border-width:0}span{display:inline-flex}span kol-button-wc,span .kol-button-wc{box-shadow-left:1px solid rgba(0, 0, 0, 0.25)}";featureHint("[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).");const HACK_REG_EX=/^([a-f0-9]{3}|[a-f0-9]{6})$/,KolBadge=proxyCustomElement(class extends HTMLElement$1{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.bgColorStr="#000",this.colorStr="#fff",this.handleColorChange=t=>{let e,o=t;"string"==typeof o?(HACK_REG_EX.test(o)&&(devHint("[KolBadge] Bitte verwenden Sie zukünftig nur noch das Standard-Farbformat für CSS (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)."),o=`#${o}`),e=createContrastColorPair(o)):e=createContrastColorPair({baseColor:o.backgroundColor,contrastColor:o.color}),this.bgColorStr=e.baseColor,this.colorStr=e.contrastColor},this._color=Nationalfarben.Schwarz,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._label=void 0,this._smartButton=void 0,this.state={_color:Nationalfarben.Schwarz}}render(){return h(Host,null,h("span",{class:{"smart-button":"object"==typeof this.state._smartButton&&null!==this.state._smartButton},style:{backgroundColor:this.bgColorStr,color:this.colorStr}},h("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label}),"object"==typeof this.state._smartButton&&null!==this.state._smartButton&&h("kol-button-wc",{_ariaLabel:this.state._smartButton._ariaLabel,_customClass:this.state._smartButton._customClass,_disabled:this.state._smartButton._disabled,_icon:this.state._smartButton._icon,_iconOnly:!0,_id:this.state._smartButton._id,_label:this.state._smartButton._label,_on:this.state._smartButton._on,_tooltipAlign:this.state._smartButton._tooltipAlign,_variant:this.state._smartButton._variant})))}validateColor(t){watchValidator(this,"_color",(t=>"string"==typeof t||"object"==typeof t&&null!==t),new Set(["string","KoliBriColor"]),t,{defaultValue:Nationalfarben.Schwarz,hooks:{beforePatch:this.handleColorChange}})}validateSmartButton(t){objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}setState(this,"_smartButton",t)}))}componentWillLoad(){this.validateColor(this._color),this.validateSmartButton(this._smartButton)}static get watchers(){return{_color:["validateColor"],_smartButton:["validateSmartButton"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-badge",{_color:[1],_icon:[1],_iconAlign:[1,"_icon-align"],_iconOnly:[516,"_icon-only"],_label:[1],_smartButton:[1,"_smart-button"],state:[32]}]);function defineCustomElement(){if("undefined"==typeof customElements)return;["kol-badge","kol-badge","kol-button-wc","kol-icon","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-badge":customElements.get(t)||customElements.define(t,KolBadge);break;case"kol-badge":customElements.get(t)||defineCustomElement();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$1();break;case"kol-icon":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}export{KolBadge as K,defineCustomElement$1 as a,defineCustomElement as b,KolButtonWc as c,defineCustomElement$2 as d,propergateSubmitEventToForm as e,watchButtonVariant as f,KolTooltip as g,propergateFocus as p,validateTabIndex as v,watchTooltipAlignment as w};