@public-ui/components 1.3.0 → 1.3.1
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.
- package/cheat-sheet.html +6 -6
- package/custom-elements.json +3 -3
- package/dist/cjs/{controller-8342e490.js → controller-3b86e1c6.js} +1 -1
- package/dist/cjs/{controller-8342e490.js.map → controller-3b86e1c6.js.map} +1 -1
- package/dist/cjs/{controller-d28e02c0.js → controller-3f64b13e.js} +1 -1
- package/dist/cjs/{controller-d28e02c0.js.map → controller-3f64b13e.js.map} +1 -1
- package/dist/cjs/{controller-37208c19.js → controller-9ecb5be4.js} +1 -1
- package/dist/cjs/{controller-37208c19.js.map → controller-9ecb5be4.js.map} +1 -1
- package/dist/cjs/{controller-fc8515bc.js → controller-c22d561c.js} +1 -1
- package/dist/cjs/{controller-fc8515bc.js.map → controller-c22d561c.js.map} +1 -1
- package/dist/cjs/kol-button-link.cjs.entry.js +1 -1
- package/dist/cjs/kol-button-wc_2.cjs.entry.js +1 -1
- package/dist/cjs/kol-button-wc_2.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-button.cjs.entry.js +1 -1
- package/dist/cjs/kol-icon.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-color.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-date.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-email.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-file.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-number.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-password.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-radio.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-range.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-text.cjs.entry.js +1 -1
- package/dist/cjs/kol-link-button.cjs.entry.js +1 -1
- package/dist/cjs/kol-link-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-link.cjs.entry.js +1 -1
- package/dist/cjs/kol-pagination.cjs.entry.js +1 -1
- package/dist/cjs/kol-select.cjs.entry.js +1 -1
- package/dist/cjs/kol-textarea.cjs.entry.js +1 -1
- package/dist/cjs/kol-tooltip.cjs.entry.js +1 -1
- package/dist/cjs/kol-tooltip.cjs.entry.js.map +1 -1
- package/dist/cjs/{label-88419619.js → label-370414db.js} +1 -1
- package/dist/cjs/{label-88419619.js.map → label-370414db.js.map} +1 -1
- package/dist/cjs/reuse-28825ead.js +4 -0
- package/dist/cjs/reuse-28825ead.js.map +1 -0
- package/dist/cjs/{tab-index-c69625a6.js → tab-index-954dd1d8.js} +1 -1
- package/dist/cjs/{tab-index-c69625a6.js.map → tab-index-954dd1d8.js.map} +1 -1
- package/dist/cjs/validator-953ea58f.js +4 -0
- package/dist/cjs/validator-953ea58f.js.map +1 -0
- package/dist/components/component.js +1 -1
- package/dist/components/component.js.map +1 -1
- package/dist/components/component2.js.map +1 -1
- package/dist/components/component3.js +1 -1
- package/dist/components/component3.js.map +1 -1
- package/dist/esm/{controller-8e33192f.js → controller-1362fa2f.js} +1 -1
- package/dist/esm/{controller-8e33192f.js.map → controller-1362fa2f.js.map} +1 -1
- package/dist/esm/{controller-46b28944.js → controller-c34d5da2.js} +1 -1
- package/dist/esm/{controller-46b28944.js.map → controller-c34d5da2.js.map} +1 -1
- package/dist/esm/{controller-9bcf44e5.js → controller-ce5dfb44.js} +1 -1
- package/dist/esm/{controller-9bcf44e5.js.map → controller-ce5dfb44.js.map} +1 -1
- package/dist/esm/{controller-1753b7f0.js → controller-f0f7cbc7.js} +1 -1
- package/dist/esm/{controller-1753b7f0.js.map → controller-f0f7cbc7.js.map} +1 -1
- package/dist/esm/kol-button-link.entry.js +1 -1
- package/dist/esm/kol-button-wc_2.entry.js +1 -1
- package/dist/esm/kol-button-wc_2.entry.js.map +1 -1
- package/dist/esm/kol-button.entry.js +1 -1
- package/dist/esm/kol-icon.entry.js.map +1 -1
- package/dist/esm/kol-input-checkbox.entry.js +1 -1
- package/dist/esm/kol-input-color.entry.js +1 -1
- package/dist/esm/kol-input-date.entry.js +1 -1
- package/dist/esm/kol-input-email.entry.js +1 -1
- package/dist/esm/kol-input-file.entry.js +1 -1
- package/dist/esm/kol-input-number.entry.js +1 -1
- package/dist/esm/kol-input-password.entry.js +1 -1
- package/dist/esm/kol-input-radio.entry.js +1 -1
- package/dist/esm/kol-input-range.entry.js +1 -1
- package/dist/esm/kol-input-text.entry.js +1 -1
- package/dist/esm/kol-link-button.entry.js +1 -1
- package/dist/esm/kol-link-wc.entry.js +1 -1
- package/dist/esm/kol-link.entry.js +1 -1
- package/dist/esm/kol-pagination.entry.js +1 -1
- package/dist/esm/kol-select.entry.js +1 -1
- package/dist/esm/kol-textarea.entry.js +1 -1
- package/dist/esm/kol-tooltip.entry.js +1 -1
- package/dist/esm/kol-tooltip.entry.js.map +1 -1
- package/dist/esm/{label-6c8f8ebb.js → label-a6e1b813.js} +1 -1
- package/dist/esm/{label-6c8f8ebb.js.map → label-a6e1b813.js.map} +1 -1
- package/dist/esm/reuse-2f7da8fc.js +4 -0
- package/dist/esm/reuse-2f7da8fc.js.map +1 -0
- package/dist/esm/{tab-index-4314d33e.js → tab-index-2f165a2f.js} +1 -1
- package/dist/esm/{tab-index-4314d33e.js.map → tab-index-2f165a2f.js.map} +1 -1
- package/dist/esm/validator-2e4f8df6.js +4 -0
- package/dist/esm/validator-2e4f8df6.js.map +1 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/LICENSE.txt → LICENSE.txt} +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/all.css +2597 -5174
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/all.min.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/brands.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/brands.min.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/fontawesome.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/fontawesome.min.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/regular.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/regular.min.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/solid.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/solid.min.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/svg-with-js.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/svg-with-js.min.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/v4-font-face.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/v4-font-face.min.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/v4-shims.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/v4-shims.min.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/v5-font-face.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/css → css}/v5-font-face.min.css +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/webfonts → webfonts}/fa-brands-400.ttf +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/webfonts → webfonts}/fa-brands-400.woff2 +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/webfonts → webfonts}/fa-regular-400.ttf +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/webfonts → webfonts}/fa-regular-400.woff2 +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/webfonts → webfonts}/fa-solid-900.ttf +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/webfonts → webfonts}/fa-solid-900.woff2 +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/webfonts → webfonts}/fa-v4compatibility.ttf +0 -0
- package/dist/kolibri/assets/fontawesome-free/{v6/webfonts → webfonts}/fa-v4compatibility.woff2 +0 -0
- package/dist/kolibri/assets/kreon/Kreon-VariableFont_wght.ttf +0 -0
- package/dist/kolibri/assets/kreon/OFL.txt +93 -0
- package/dist/kolibri/assets/kreon/README.txt +67 -0
- package/dist/kolibri/assets/kreon/static/Kreon-Bold.ttf +0 -0
- package/dist/kolibri/assets/kreon/static/Kreon-Light.ttf +0 -0
- package/dist/kolibri/assets/kreon/static/Kreon-Medium.ttf +0 -0
- package/dist/kolibri/assets/kreon/static/Kreon-Regular.ttf +0 -0
- package/dist/kolibri/assets/kreon/static/Kreon-SemiBold.ttf +0 -0
- package/dist/kolibri/assets/kreon/style.css +41 -0
- package/dist/kolibri/{controller-8e33192f.js → controller-1362fa2f.js} +1 -1
- package/dist/kolibri/{controller-8e33192f.js.map → controller-1362fa2f.js.map} +0 -0
- package/dist/kolibri/{controller-46b28944.js → controller-c34d5da2.js} +1 -1
- package/dist/kolibri/{controller-46b28944.js.map → controller-c34d5da2.js.map} +0 -0
- package/dist/kolibri/controller-ce5dfb44.js +4 -0
- package/dist/kolibri/{controller-9bcf44e5.js.map → controller-ce5dfb44.js.map} +1 -1
- package/dist/kolibri/{controller-1753b7f0.js → controller-f0f7cbc7.js} +1 -1
- package/dist/kolibri/{controller-1753b7f0.js.map → controller-f0f7cbc7.js.map} +0 -0
- package/dist/kolibri/kol-button-link.entry.js +1 -1
- package/dist/kolibri/kol-button-wc_2.entry.js +1 -1
- package/dist/kolibri/kol-button-wc_2.entry.js.map +1 -1
- package/dist/kolibri/kol-button.entry.js +1 -1
- package/dist/kolibri/kol-icon.entry.js.map +1 -1
- package/dist/kolibri/kol-input-checkbox.entry.js +1 -1
- package/dist/kolibri/kol-input-color.entry.js +1 -1
- package/dist/kolibri/kol-input-date.entry.js +1 -1
- package/dist/kolibri/kol-input-email.entry.js +1 -1
- package/dist/kolibri/kol-input-file.entry.js +1 -1
- package/dist/kolibri/kol-input-number.entry.js +1 -1
- package/dist/kolibri/kol-input-password.entry.js +1 -1
- package/dist/kolibri/kol-input-radio.entry.js +1 -1
- package/dist/kolibri/kol-input-range.entry.js +1 -1
- package/dist/kolibri/kol-input-text.entry.js +1 -1
- package/dist/kolibri/kol-link-button.entry.js +1 -1
- package/dist/kolibri/kol-link-wc.entry.js +1 -1
- package/dist/kolibri/kol-link-wc.entry.js.map +1 -1
- package/dist/kolibri/kol-link.entry.js +1 -1
- package/dist/kolibri/kol-pagination.entry.js +1 -1
- package/dist/kolibri/kol-select.entry.js +1 -1
- package/dist/kolibri/kol-textarea.entry.js +1 -1
- package/dist/kolibri/kol-tooltip.entry.js +1 -1
- package/dist/kolibri/kol-tooltip.entry.js.map +1 -1
- package/dist/kolibri/{label-6c8f8ebb.js → label-a6e1b813.js} +1 -1
- package/dist/kolibri/{label-6c8f8ebb.js.map → label-a6e1b813.js.map} +0 -0
- package/dist/kolibri/reuse-2f7da8fc.js +4 -0
- package/dist/kolibri/reuse-2f7da8fc.js.map +1 -0
- package/dist/kolibri/{tab-index-4314d33e.js → tab-index-2f165a2f.js} +1 -1
- package/dist/kolibri/{tab-index-4314d33e.js.map → tab-index-2f165a2f.js.map} +0 -0
- package/dist/kolibri/{validator-8ee8737c.js → validator-2e4f8df6.js} +1 -1
- package/dist/kolibri/validator-2e4f8df6.js.map +1 -0
- package/dist/types/components/tooltip/component.d.ts +12 -5
- package/dist/types/components.d.ts +2 -2
- package/doc/tooltip.md +1 -1
- package/jest-test-results.json +1 -1
- package/package.json +1 -1
- package/dist/cjs/reuse-d95dc094.js +0 -4
- package/dist/cjs/reuse-d95dc094.js.map +0 -1
- package/dist/cjs/validator-6f53d4a2.js +0 -4
- package/dist/cjs/validator-6f53d4a2.js.map +0 -1
- package/dist/esm/reuse-f9be4952.js +0 -4
- package/dist/esm/reuse-f9be4952.js.map +0 -1
- package/dist/esm/validator-8ee8737c.js +0 -4
- package/dist/esm/validator-8ee8737c.js.map +0 -1
- package/dist/kolibri/assets/fontawesome-free/v5/LICENSE.txt +0 -34
- package/dist/kolibri/assets/fontawesome-free/v5/css/all.css +0 -4616
- package/dist/kolibri/assets/fontawesome-free/v5/css/all.min.css +0 -5
- package/dist/kolibri/assets/fontawesome-free/v5/css/brands.css +0 -15
- package/dist/kolibri/assets/fontawesome-free/v5/css/brands.min.css +0 -5
- package/dist/kolibri/assets/fontawesome-free/v5/css/fontawesome.css +0 -4582
- package/dist/kolibri/assets/fontawesome-free/v5/css/fontawesome.min.css +0 -5
- package/dist/kolibri/assets/fontawesome-free/v5/css/regular.css +0 -15
- package/dist/kolibri/assets/fontawesome-free/v5/css/regular.min.css +0 -5
- package/dist/kolibri/assets/fontawesome-free/v5/css/solid.css +0 -16
- package/dist/kolibri/assets/fontawesome-free/v5/css/solid.min.css +0 -5
- package/dist/kolibri/assets/fontawesome-free/v5/css/svg-with-js.css +0 -371
- package/dist/kolibri/assets/fontawesome-free/v5/css/svg-with-js.min.css +0 -5
- package/dist/kolibri/assets/fontawesome-free/v5/css/v4-shims.css +0 -2172
- package/dist/kolibri/assets/fontawesome-free/v5/css/v4-shims.min.css +0 -5
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-brands-400.eot +0 -0
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-brands-400.svg +0 -3717
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-brands-400.ttf +0 -0
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-brands-400.woff +0 -0
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-brands-400.woff2 +0 -0
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-regular-400.eot +0 -0
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-regular-400.svg +0 -801
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-regular-400.ttf +0 -0
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-regular-400.woff +0 -0
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-regular-400.woff2 +0 -0
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-solid-900.eot +0 -0
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-solid-900.svg +0 -5034
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-solid-900.ttf +0 -0
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-solid-900.woff +0 -0
- package/dist/kolibri/assets/fontawesome-free/v5/webfonts/fa-solid-900.woff2 +0 -0
- package/dist/kolibri/controller-9bcf44e5.js +0 -4
- package/dist/kolibri/reuse-f9be4952.js +0 -4
- package/dist/kolibri/reuse-f9be4952.js.map +0 -1
- package/dist/kolibri/validator-8ee8737c.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-
|
|
4
|
+
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-2f7da8fc.js";import{I as InputController,g as getRenderStates}from"./controller-ce5dfb44.js";import{w as watchString,b as watchBoolean}from"./prop.validators-ceeab1fe.js";import"./validator-2e4f8df6.js";import"./a11y.tipps-ff5a1a99.js";import"./dev.utils-daaf2f39.js";import"./tab-index-2f165a2f.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";class InputFileController extends InputController{constructor(t,e,i){super(t,e,i),this.component=t}validateAccept(t){watchString(this.component,"_accept",t)}validateMultiple(t){watchBoolean(this.component,"_multiple",t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateValue(t){watchString(this.component,"_value",t),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateValue(this.component._value)}}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}",KolInputFile=class{render(){const{ariaDiscribedBy:t}=getRenderStates(this.state);return h(Host,null,h("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched},h("span",{slot:"label"},h("slot",null)),h("input",Object.assign({ref:this.catchRef,part:"input",title:"",accept:this.state._accept,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,slot:"input",spellcheck:"false",type:"file",value:this.state._value},this.controller.onFacade,{onChange:this.onChange}))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this.onChange=t=>{var e;this.ref instanceof HTMLInputElement&&"file"===this.ref.type&&"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,this.ref.files)},this._accept=void 0,this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._multiple=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_id:"⚠"},this.controller=new InputFileController(this,"file",this.host)}validateAccept(t){this.controller.validateAccept(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return getElement(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputFile.style={default:defaultStyleCss};export{KolInputFile as kol_input_file};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-
|
|
4
|
+
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-2f7da8fc.js";import{p as propergateSubmitEventToForm}from"./controller-01ace904.js";import{I as InputController,g as getRenderStates}from"./controller-ce5dfb44.js";import{a as watchValidator,c as watchJsonArrayString,w as watchString,b as watchBoolean,d as watchNumber}from"./prop.validators-ceeab1fe.js";import"./validator-2e4f8df6.js";import"./a11y.tipps-ff5a1a99.js";import"./dev.utils-daaf2f39.js";import"./tab-index-2f165a2f.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";class InputNumberController extends InputController{constructor(t,e,a){super(t,e,a),this.numberOrIsoDateRegex=/^\d+$|(^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])([T ][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?([+-][0-2]\d:[0-5]\d|Z)?)?$)/,this.parseToString=t=>"string"==typeof t?t:"number"==typeof t?`${t}`:"object"==typeof t&&t instanceof Date?t.toISOString():"",this.validateIso8601=(t,e)=>{const a=parseFloat(e),i=a==e;return watchValidator(this.component,t,(t=>void 0===t||i&&"number"==typeof a||this.numberOrIsoDateRegex.test(t)),new Set(["number","Date","string{ISO-8601}"]),this.parseToString(e))},this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){watchJsonArrayString(this.component,"_list",(t=>"string"==typeof t),t)}validateMax(t){this.validateIso8601("_max",t)}validateMin(t){this.validateIso8601("_min",t)}validatePlaceholder(t){watchString(this.component,"_placeholder",t)}validateReadOnly(t){watchBoolean(this.component,"_readOnly",t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateStep(t){watchNumber(this.component,"_step",t)}validateType(t){watchValidator(this.component,"_type",(t=>"string"==typeof t&&("date"===t||"datetime-local"===t||"month"===t||"number"===t||"time"===t||"week"===t)),new Set(["String {date, datetime-local, month, number, time, week}"]),t)}validateValue(t){this.validateIso8601("_value",t)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateList(this.component._list),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}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}",KolInputNumber=class{render(){const{ariaDiscribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._list)&&this.state._list.length>0;return h(Host,null,h("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched}," ",h("span",{slot:"label"},h("slot",null)),h("input",Object.assign({ref:this.catchRef,part:"input",title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,placeholder:this.state._placeholder,slot:"input",step:this.state._step,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?propergateSubmitEventToForm({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._smartButton=void 0,this._step=void 0,this._tabIndex=void 0,this._touched=!1,this._type="number",this._value=void 0,this.state={_autoComplete:"off",_id:"⚠",_list:[],_type:"number"},this.controller=new InputNumberController(this,"number",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateStep(t){this.controller.validateStep(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_step:["validateStep"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};KolInputNumber.style={default:defaultStyleCss};export{KolInputNumber as kol_input_number};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{d as devHint}from"./a11y.tipps-ff5a1a99.js";import{p as propergateFocus}from"./reuse-
|
|
4
|
+
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{d as devHint}from"./a11y.tipps-ff5a1a99.js";import{p as propergateFocus}from"./reuse-2f7da8fc.js";import{p as propergateSubmitEventToForm}from"./controller-01ace904.js";import{g as getRenderStates}from"./controller-ce5dfb44.js";import{I as InputPasswordController}from"./controller-f0f7cbc7.js";import"./dev.utils-daaf2f39.js";import"./validator-2e4f8df6.js";import"./prop.validators-ceeab1fe.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";import"./tab-index-2f165a2f.js";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}",KolInputPassword=class{render(){const{ariaDiscribedBy:t}=getRenderStates(this.state);return h(Host,null,h("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched},h("span",{slot:"label"},h("slot",null)),h("input",Object.assign({ref:this.catchRef,part:"input",title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",type:"password",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?propergateSubmitEventToForm({form:this.host,ref:this.ref}):this.controller.onFacade.onClick(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._size=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:"⚠"},this.controller=new InputPasswordController(this,"password",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t),"on"===t&&devHint("[KolInputPassword] Die Option 'autocomplete' sollte bei einem Passwort-Eingabefeld nicht auf \"on\" gesetzt werden.")}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputPassword.style={default:defaultStyleCss};export{KolInputPassword as kol_input_password};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-
|
|
4
|
+
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-2f7da8fc.js";import{g as getRenderStates}from"./controller-ce5dfb44.js";import{a as InputRadioController}from"./controller-1362fa2f.js";import"./validator-2e4f8df6.js";import"./a11y.tipps-ff5a1a99.js";import"./dev.utils-daaf2f39.js";import"./prop.validators-ceeab1fe.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";import"./tab-index-2f165a2f.js";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}",KolInputRadio=class{render(){const{ariaDiscribedBy:t,hasError:e}=getRenderStates(this.state);return h(Host,null,h("fieldset",{class:{error:!0===e,disabled:!0===this.state._disabled,required:!0===this.state._required,[this.state._orientation]:!0}},h("legend",{class:"block w-full mb-1 leading-normal"},h("span",null,h("slot",null))),this.state._list.map(((e,i)=>{const a=`${this.state._id}-${i}`;return h("kol-input",{key:a,_disabled:this.state._disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:a,_renderNoLabel:!0,_required:this.state._required,_touched:this.state._touched},h("div",{slot:"input"},h("input",Object.assign({ref:this.state._value===e.value?this.catchRef:void 0,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${a}-label`,part:"input",title:"",type:"radio",id:a,checked:this.state._value===e.value,name:this.state._name||this.state._id,disabled:this.state._disabled||e.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${i}`},this.controller.onFacade,{onChange:this.onChange})),h("label",{htmlFor:`${a}`,id:`${a}-label`,style:{height:this.state._hideLabel&&!0!==this.state._required?"0":void 0,margin:this.state._hideLabel&&!0!==this.state._required?"0":void 0,padding:this.state._hideLabel&&!0!==this.state._required?"0":void 0,visibility:this.state._hideLabel&&!0!==this.state._required?"hidden":void 0}},h("span",null,h("span",null,e.label)))))})),e&&h("kol-alert",{id:"error",_alert:!0,_type:"error",_variant:"msg"},this.state._error)))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this.onChange=t=>{if(t.target instanceof HTMLInputElement){const e=this.controller.getOptionByKey(t.target.value);void 0!==e&&this.controller.setValue(t,e.value)}},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._orientation="vertical",this._required=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_id:"⚠",_list:[],_orientation:"vertical"},this.controller=new InputRadioController(this,"radio",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOrientation(t){this.controller.validateOrientation(t)}validateRequired(t){this.controller.validateRequired(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_orientation:["validateOrientation"],_required:["validateRequired"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputRadio.style={default:defaultStyleCss};export{KolInputRadio as kol_input_radio};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-
|
|
4
|
+
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-2f7da8fc.js";import{I as InputController,g as getRenderStates}from"./controller-ce5dfb44.js";import{a as watchValidator,c as watchJsonArrayString,d as watchNumber}from"./prop.validators-ceeab1fe.js";import"./validator-2e4f8df6.js";import"./a11y.tipps-ff5a1a99.js";import"./dev.utils-daaf2f39.js";import"./tab-index-2f165a2f.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";class InputRangeController extends InputController{constructor(t,e,a){super(t,e,a),this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){watchJsonArrayString(this.component,"_list",(t=>"object"==typeof t&&"string"==typeof t.label&&t.label.length>0),t)}validateMax(t){watchNumber(this.component,"_max",t)}validateMin(t){watchNumber(this.component,"_min",t)}validateStep(t){watchNumber(this.component,"_step",t)}validateValue(t){watchNumber(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateValue(this.component._value)}}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}",KolInputRange=class{render(){const{ariaDiscribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._list)&&this.state._list.length>0;return h(Host,null,h("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_touched:this.state._touched},h("span",{slot:"label"},h("slot",null)),h("input",Object.assign({ref:this.catchRef,part:"input",title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,slot:"input",spellcheck:"false",step:this.state._step,type:"range",value:this.state._value},this.controller.onFacade)),e&&[h("datalist",{id:`${this.state._id}-list`},this.state._list.map((t=>h("option",{value:t.value}))))]))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._step=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:"⚠",_list:[]},this.controller=new InputRangeController(this,"range",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateStep(t){this.controller.validateStep(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputRange.style={default:defaultStyleCss};export{KolInputRange as kol_input_range};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{f as featureHint}from"./a11y.tipps-ff5a1a99.js";import{p as propergateFocus}from"./reuse-
|
|
4
|
+
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{f as featureHint}from"./a11y.tipps-ff5a1a99.js";import{p as propergateFocus}from"./reuse-2f7da8fc.js";import{p as propergateSubmitEventToForm}from"./controller-01ace904.js";import{g as getRenderStates}from"./controller-ce5dfb44.js";import{a as InputTextController}from"./controller-c34d5da2.js";import"./dev.utils-daaf2f39.js";import"./validator-2e4f8df6.js";import"./prop.validators-ceeab1fe.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";import"./tab-index-2f165a2f.js";import"./controller-f0f7cbc7.js";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}";featureHint("[KolInputText] Pre- und post-Label für Währung usw.");const KolInputText=class{render(){const{ariaDiscribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._list)&&this.state._list.length>0;return h(Host,null,this.state._accessKey,h("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched},h("span",{slot:"label"},h("slot",null)),h("input",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,part:"input",pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",title:"",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{var e;this.ref=t,propergateFocus(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{"Enter"===t.code||"NumpadEnter"===t.code?propergateSubmitEventToForm({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,a;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(a=this.ref)||void 0===a?void 0:a.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._size=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_id:"id",_list:[],_type:"text"},this.controller=new InputTextController(this,"text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad()}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};KolInputText.style={default:defaultStyleCss};export{KolInputText as kol_input_text};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{r as registerInstance,h,H as Host,g as getElement}from"./index-0dce65d2.js";import{w as watchString}from"./prop.validators-ceeab1fe.js";import{p as propergateFocus}from"./reuse-
|
|
4
|
+
import{r as registerInstance,h,H as Host,g as getElement}from"./index-0dce65d2.js";import{w as watchString}from"./prop.validators-ceeab1fe.js";import{p as propergateFocus}from"./reuse-2f7da8fc.js";import{w as watchButtonVariant}from"./controller-f22ebfae.js";import{a as translate}from"./i18n-640debcf.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";import"./a11y.tipps-ff5a1a99.js";import"./dev.utils-daaf2f39.js";import"./validator-2e4f8df6.js";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}:host{display:inline-block}:host>kol-button-wc,:host>kol-link-wc{width:inherit}:host>kol-button-wc a,:host>kol-button-wc button,:host>kol-link-wc a,:host>kol-link-wc button{cursor:pointer;display:inline-block;min-height:44px;min-width:44px;padding:0;text-align:center;transition-duration:0.5s;transition-property:background-color, color, border-color;width:inherit}:host>kol-button-wc a:active,:host>kol-button-wc button:active,:host>kol-link-wc a:active,:host>kol-link-wc button:active{outline:0 !important;box-shadow:none !important}:host>kol-button-wc a:disabled,:host>kol-button-wc button:disabled,:host>kol-link-wc a:disabled,:host>kol-link-wc button:disabled{box-shadow:none;cursor:not-allowed;opacity:0.5}",KolLinkButton=class{constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._href=void 0,this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription=translate("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal",this.state={}}render(){return h(Host,null,h("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_href:this._href,_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label,_on:this._on,_role:this._role,_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},h("slot",{name:"expert",slot:"expert"})))}validateCustomClass(t){watchString(this,"_customClass",t,{defaultValue:void 0})}validateVariant(t){watchButtonVariant(this,"_variant",t)}componentWillLoad(){this.validateCustomClass(this._customClass),this.validateVariant(this._variant)}get host(){return getElement(this)}static get watchers(){return{_customClass:["validateCustomClass"],_variant:["validateVariant"]}}};KolLinkButton.style={default:defaultStyleCss};export{KolLinkButton as kol_link_button};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{r as registerInstance,h,H as Host,g as getElement}from"./index-0dce65d2.js";import{a as translate}from"./i18n-640debcf.js";import{w as watchTooltipAlignment}from"./button-link-e6d7d116.js";import{d as devHint,c as a11yHintDisabled}from"./a11y.tipps-ff5a1a99.js";import{n as nonce}from"./dev.utils-daaf2f39.js";import{e as setEventTargetAndStopPropagation,g as mapBoolean2String,w as watchString,a as watchValidator,b as watchBoolean,h as scrollBySelector}from"./prop.validators-ceeab1fe.js";import{p as propergateFocus}from"./reuse-
|
|
4
|
+
import{r as registerInstance,h,H as Host,g as getElement}from"./index-0dce65d2.js";import{a as translate}from"./i18n-640debcf.js";import{w as watchTooltipAlignment}from"./button-link-e6d7d116.js";import{d as devHint,c as a11yHintDisabled}from"./a11y.tipps-ff5a1a99.js";import{n as nonce}from"./dev.utils-daaf2f39.js";import{e as setEventTargetAndStopPropagation,g as mapBoolean2String,w as watchString,a as watchValidator,b as watchBoolean,h as scrollBySelector}from"./prop.validators-ceeab1fe.js";import{p as propergateFocus}from"./reuse-2f7da8fc.js";import{a as validateIcon,w as watchIconAlign,v as validateTabIndex}from"./tab-index-2f165a2f.js";import{v as validateAriaLabel,a as validateLabel}from"./label-a6e1b813.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";import"./validator-2e4f8df6.js";const KolLinkWc=class{constructor(t){registerInstance(this,t),this.nonce=nonce(),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this.onClick=t=>{var a,e;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(t.preventDefault(),setEventTargetAndStopPropagation(t,this.ref),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._href))},this.getRenderValues=()=>{let t={};"string"==typeof this.state._selector&&(t={role:"link",tabIndex:0,onClick:()=>{scrollBySelector(this.state._selector)},onKeyPress:()=>{scrollBySelector(this.state._selector)}});const a="string"==typeof this.state._target&&"_self"!==this.state._target,e={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0)",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:a?"noopener":void 0};return"image"!==this.state._useCase&&!0!==this.state._iconOnly||"string"==typeof this.state._ariaLabel&&0!==this.state._ariaLabel.length||devHint("[KolLink] Es muss ein Aria-Label gesetzt werden, wenn eine Grafik verlinkt oder der Icon-Only-Modus verwendet wird."),{isExternal:a,tagAttrs:e,goToProps:t}},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._disabled=!1,this._href=void 0,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._label=void 0,this._on=void 0,this._role=void 0,this._selector=void 0,this._stealth=!1,this._tabIndex=void 0,this._target=void 0,this._targetDescription=translate("kol-open-link-in-tab"),this._tooltipAlign="right",this._useCase="text",this.state={_ariaLabel:"",_href:"javascript:void(0)",_icon:{},_iconAlign:"left",_label:""}}render(){const{isExternal:t,tagAttrs:a,goToProps:e}=this.getRenderValues();return h(Host,null,h("a",Object.assign({ref:this.catchRef},a,{"aria-controls":this.state._ariaControls,"aria-current":this.state._ariaCurrent,"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-labelledby":"image"===this.state._useCase||!0===this.state._iconOnly?this.nonce:void 0,"aria-selected":mapBoolean2String(this.state._ariaSelected),class:{disabled:!0===this.state._disabled,"skip ":!1!==this.state._stealth,"icon-only":!0===this.state._iconOnly,"external-link":t}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick},e,{role:this.state._role,tabIndex:this.state._tabIndex}),h("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this.state._ariaLabel||this.state._label},h("slot",{name:"expert",slot:"expert"})),t&&h("kol-icon",{class:"external-link-icon",_ariaLabel:this.state._targetDescription,_icon:"fa-solid fa-arrow-up-right-from-square"})),(!0===this.state._iconOnly||"image"===this.state._useCase)&&h("kol-tooltip",{"aria-hidden":"true",_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._ariaLabel||this.state._label}))}validateAriaControls(t){watchString(this,"_ariaControls",t)}validateAriaCurrent(t){watchValidator(this,"_ariaCurrent",(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)}validateDisabled(t){watchBoolean(this,"_disabled",t),!0===t&&a11yHintDisabled()}validateHref(t){watchString(this,"_href",t)}validateIcon(t){validateIcon(this,t)}validateIconAlign(t){watchIconAlign(this,t)}validateIconOnly(t){watchBoolean(this,"_iconOnly",t)}validateLabel(t){validateLabel(this,t)}validateOn(t){"object"==typeof t&&null!==t&&Object.prototype.hasOwnProperty.call(t,"onClick")&&"function"==typeof t.onClick&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){watchString(this,"_role",t)}validateSelector(t){watchString(this,"_selector",t)}validateStealth(t){watchBoolean(this,"_stealth",t)}validateTabIndex(t){validateTabIndex(this,t)}validateTarget(t){watchString(this,"_target",t)}validateTargetDescription(t){watchString(this,"_targetDescription",t)}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}validateUseCase(t){"string"==typeof t&&(this.state=Object.assign(Object.assign({},this.state),{_useCase:t}))}componentWillLoad(){this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateDisabled(this._disabled),this.validateHref(this._href),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateIconOnly(this._iconOnly),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateSelector(this._selector),this.validateStealth(this._stealth),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTargetDescription(this._targetDescription),this.validateTooltipAlign(this._tooltipAlign),this.validateUseCase(this._useCase)}get host(){return getElement(this)}static get watchers(){return{_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_disabled:["validateDisabled"],_href:["validateHref"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_selector:["validateSelector"],_stealth:["validateStealth"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_targetDescription:["validateTargetDescription"],_tooltipAlign:["validateTooltipAlign"],_useCase:["validateUseCase"]}}};export{KolLinkWc as kol_link_wc};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{r as registerInstance,h,H as Host,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-
|
|
4
|
+
import{r as registerInstance,h,H as Host,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-2f7da8fc.js";import"./validator-2e4f8df6.js";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}:host>*{width:inherit;word-spacing:inherit}:host a{overflow:inherit;text-overflow:inherit}:host a:active{text-decoration:none}:host a:focus,:host a:hover{text-decoration-thickness:3px}:host a.kol-visited:visited{color:var(--kolibri-color-visited)}:host a .screen-reader-only{position:absolute;width:1px;clip:rect(0 0 0 0);overflow:hidden}:host a.skip{left:-99999px;overflow:hidden;position:absolute;z-index:9999999}:host a.skip:focus{background:white;box-shadow:0 0 0.5rem 0.5rem white;left:unset;position:unset}",KolLink=class{constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel="",this._ariaSelected=void 0,this._disabled=!1,this._href=void 0,this._icon=void 0,this._iconAlign="left",this._iconOnly=!1,this._label=void 0,this._on=void 0,this._role=void 0,this._selector=void 0,this._stealth=!1,this._tabIndex=void 0,this._target=void 0,this._targetDescription="Der Link wird in einem neuen Tab geöffnet.",this._tooltipAlign="right",this._useCase="text"}render(){return h(Host,null,h("kol-link-wc",{ref:this.catchRef,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_href:this._href,_icon:this._icon,_iconAlign:this._iconAlign,_iconOnly:this._iconOnly,_label:this._label,_on:this._on,_role:this._role,_selector:this._selector,_stealth:this._stealth,_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign,_useCase:this._useCase},h("slot",{name:"expert",slot:"expert"}),h("slot",{slot:"expert"})))}get host(){return getElement(this)}};KolLink.style={default:defaultStyleCss};export{KolLink as kol_link};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{r as registerInstance,h,H as Host}from"./index-0dce65d2.js";import{w as watchTooltipAlignment}from"./button-link-e6d7d116.js";import{n as nonce}from"./dev.utils-daaf2f39.js";import{d as watchNumber,w as watchString,a as watchValidator,c as watchJsonArrayString,p as parseJson}from"./prop.validators-ceeab1fe.js";import{w as watchButtonVariant}from"./controller-f22ebfae.js";import{S as STATE_CHANGE_EVENT}from"./validator-
|
|
4
|
+
import{r as registerInstance,h,H as Host}from"./index-0dce65d2.js";import{w as watchTooltipAlignment}from"./button-link-e6d7d116.js";import{n as nonce}from"./dev.utils-daaf2f39.js";import{d as watchNumber,w as watchString,a as watchValidator,c as watchJsonArrayString,p as parseJson}from"./prop.validators-ceeab1fe.js";import{w as watchButtonVariant}from"./controller-f22ebfae.js";import{S as STATE_CHANGE_EVENT}from"./validator-2e4f8df6.js";import{a as translate}from"./i18n-640debcf.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";import"./a11y.tipps-ff5a1a99.js";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}",leftDoubleArrowIcon={left:"fa-solid fa-angles-left"},leftSingleArrow={left:"fa-solid fa-angle-left"},rightSingleArrowIcon={right:"fa-solid fa-angle-right"},rightDoubleArrowIcon={right:"fa-solid fa-angles-right"},KolPagination=class{constructor(t){registerInstance(this,t),this.nonce=nonce(),this.calcCount=(t,a=1)=>Math.ceil(t/a),this.getCount=()=>this.calcCount(this.state._total,this.state._pageSize),this.onClick=(t,a)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,a),this.onChangePage(t,a)},this.onChangePage=(t,a)=>{const e=setTimeout((()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,a)}))},this.onChangePageSize=(t,a)=>{if("number"==typeof(a=parseInt(a[0]))&&a>0&&this._pageSize!==a){this._pageSize=a;const e=setTimeout((()=>{clearTimeout(e),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,a)=>{let e=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;const s=a.has("_pageSizeOptions")?a.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(s)&&s.length>0){const t=s.find((t=>t.value===e));e=void 0===t?s[0].value:t.value,a.set("_pageSize",e)}const i=a.has("_page")?a.get("_page"):this.state._page,o=a.has("_total")?a.get("_total"):this.state._total;this.syncPage(a,i,a.get("_pageSize"),o)},this.syncPage=(t,a,e,s)=>{if(s>0){const i=this.calcCount(s,e);i>0&&(a>i?(t.set("_page",i),this.onChangePage(STATE_CHANGE_EVENT,i)):a<1&&(t.set("_page",1),this.onChangePage(STATE_CHANGE_EVENT,1)))}},this.beforePageSizeOptions=(t,a)=>{const e=[];if(Array.isArray(t))for(const a of t)"number"==typeof a&&e.push({label:translate("kol-page-per-site",{placeholders:{entries:`${a}`}}),value:a});a.set("_pageSizeOptions",e),this.beforePageSize(e,a)},this._boundaryCount=1,this._customClass=void 0,this._hasButtons=void 0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._total=void 0,this._variant="normal",this.state={_boundaryCount:1,_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_total:0,_variant:"normal"}}render(){var t;let a=!1;const e=this.getCount(),s=Array.from(Array(e).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>e-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(a=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===a?(a=!1,h("span",{key:`${this.nonce}-el-${t}`},"•••")):null));return h(Host,null,h("div",null,this.state._hasButtons.first&&h("kol-button",{_customClass:this.state._customClass,_disabled:this.state._page<=1,_icon:leftDoubleArrowIcon,_iconOnly:!0,_label:translate("kol-page-first"),_on:this.onGoToFirst,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign}),this.state._hasButtons.previous&&h("kol-button",{_customClass:this.state._customClass,_disabled:this.state._page<=1,_icon:leftSingleArrow,_iconOnly:!0,_label:translate("kol-page-back"),_on:this.onGoBackward,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign}),s,this.state._hasButtons.next&&h("kol-button",{_customClass:this.state._customClass,_disabled:e<=this.state._page,_icon:rightSingleArrowIcon,_iconOnly:!0,_label:translate("kol-page-next"),_on:this.onGoForward,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign}),this.state._hasButtons.last&&h("kol-button",{_customClass:this.state._customClass,_disabled:e<=this.state._page,_icon:rightDoubleArrowIcon,_iconOnly:!0,_label:translate("kol-page-last"),_on:this.onGoToEnd,_variant:this.state._variant,_tooltipAlign:this.state._tooltipAlign})),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&h("kol-select",{_hideLabel:!0,_id:"pagination-size",_list:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]},translate("kol-entries-per-site")))}getUnselectedPageButton(t){return h("kol-button",{key:`${this.nonce}-${t}`,_customClass:this.state._customClass,_ariaLabel:translate("kol-page-current",{placeholders:{page:t.toFixed(0)}}),_label:`${t}`,_on:{onClick:a=>{this.onClick(a,t)}},_variant:this.state._variant})}getSelectedPageButton(t){return h("kol-button-wc",{class:"selected",key:`${this.nonce}-selected`,_customClass:this.state._customClass,_disabled:!0,_ariaCurrent:!0,_ariaLabel:translate("kol-page-selected",{placeholders:{page:t.toFixed(0)}}),_label:`${t}`,_variant:this.state._variant})}validateBoundaryCount(t){watchNumber(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){watchString(this,"_customClass",t,{defaultValue:void 0})}validateHasButtons(t){watchValidator(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,a)=>{if("boolean"==typeof t)a.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=parseJson(t)}catch(t){a.delete("_hasButtons")}"object"==typeof t&&null!==t&&a.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){watchNumber(this,"_page",t,{hooks:{beforePatch:(t,a)=>{const e=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize,s=a.has("_total")?a.get("_total"):this.state._total;this.syncPage(a,t,e,s)}}})}validatePageSize(t){watchNumber(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){watchJsonArrayString(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){watchNumber(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateTotal(t){watchNumber(this,"_total",t,{hooks:{beforePatch:(t,a)=>{const e=a.has("_page")?a.get("_page"):this.state._page,s=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;this.syncPage(a,e,s,t)}}})}validateTooltipAlign(t){watchTooltipAlignment(this,"_tooltipAlign",t)}validateVariant(t){watchButtonVariant(this,"_variant",t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateTotal(this._total),this.validateVariant(this._variant),this.validatePage(this._page)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_total:["validateTotal"],_tooltipAlign:["validateTooltipAlign"],_variant:["validateVariant"]}}};KolPagination.style={default:defaultStyleCss};export{KolPagination as kol_pagination};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-
|
|
4
|
+
import{h,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{p as propergateFocus}from"./reuse-2f7da8fc.js";import{I as InputController,g as getRenderStates}from"./controller-ce5dfb44.js";import{w as watchString,c as watchJsonArrayString,b as watchBoolean,d as watchNumber}from"./prop.validators-ceeab1fe.js";import{S as STATE_CHANGE_EVENT}from"./validator-2e4f8df6.js";import{f as fillKeyOptionMap}from"./controller-1362fa2f.js";import"./a11y.tipps-ff5a1a99.js";import"./dev.utils-daaf2f39.js";import"./tab-index-2f165a2f.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";const validateInputSelectList=t=>"object"==typeof t&&null!==t&&"string"==typeof t.label&&t.label.length>0&&(!Array.isArray(t.options)||void 0===t.options.find((t=>!1===validateInputSelectList(t))));class SelectController extends InputController{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchListValue=(t,e)=>{const i=e.has("_list")?e.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),fillKeyOptionMap(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHeight(t){watchString(this.component,"_height",t)}validateList(t){watchJsonArrayString(this.component,"_list",validateInputSelectList,t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(t){watchBoolean(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(t){watchBoolean(this.component,"_required",t)}validateSize(t){watchNumber(this.component,"_size",t,{min:1})}validateValue(t){watchJsonArrayString(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(STATE_CHANGE_EVENT)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}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}",isSelected=(t,e)=>Array.isArray(t)&&t.includes(e),KolSelect=class{renderOptgroup(t,e){var i;return h("optgroup",{disabled:!0===t.disabled,label:t.label},null===(i=t.options)||void 0===i?void 0:i.map(((t,i)=>{const a=`${e}-${i}`;return Array.isArray(t.options)?this.renderOptgroup(t,a):h("option",{disabled:!0===t.disabled,key:a,selected:isSelected(this.state._value,t.value),value:a},t.label)})))}render(){const{ariaDiscribedBy:t}=getRenderStates(this.state);return h(Host,null,h("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched},h("span",{slot:"label"},h("slot",null)),h("select",Object.assign({ref:this.catchRef,part:"select",title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((t,e)=>{const i=`-${e}`;return Array.isArray(t.options)?this.renderOptgroup(t,i):h("option",{disabled:!0===t.disabled,key:i,selected:isSelected(this.state._value,t.value),value:i},t.label)})))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_height:"",_id:"⚠",_list:[],_multiple:!1,_value:[]},this.controller=new SelectController(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:defaultStyleCss};export{KolSelect as kol_select};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{h,F as Fragment,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{a as translate}from"./i18n-640debcf.js";import{b as watchBoolean,d as watchNumber,w as watchString,a as watchValidator,s as setState}from"./prop.validators-ceeab1fe.js";import{p as propergateFocus}from"./reuse-
|
|
4
|
+
import{h,F as Fragment,H as Host,r as registerInstance,g as getElement}from"./index-0dce65d2.js";import{a as translate}from"./i18n-640debcf.js";import{b as watchBoolean,d as watchNumber,w as watchString,a as watchValidator,s as setState}from"./prop.validators-ceeab1fe.js";import{p as propergateFocus}from"./reuse-2f7da8fc.js";import{I as InputController,g as getRenderStates}from"./controller-ce5dfb44.js";import"./index-eb735af6.js";import"./a11y.tipps-ff5a1a99.js";import"./dev.utils-daaf2f39.js";import"./index.m-86dc8c44.js";import"./validator-2e4f8df6.js";import"./tab-index-2f165a2f.js";class TextareaController extends InputController{constructor(t,e,a){super(t,e,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateHasCounter(t){watchBoolean(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){watchNumber(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){watchString(this.component,"_placeholder",t)}validateReadOnly(t){watchBoolean(this.component,"_readOnly",t)}validateResize(t){watchValidator(this.component,"_resize",(t=>"string"==typeof t&&("both"===t||"horizontal"===t||"none"===t||"vertical"===t)),new Set("String {both, horizontal, vertical, none}"),t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateRows(t){watchNumber(this.component,"_rows",t)}validateValue(t){watchString(this.component,"_value",t,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}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}",increaseTextareaHeight=t=>{t.style.overflow="hidden";const e=t.rows,a=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/a);return t.rows=e,i},KolTextarea=class{render(){const{ariaDiscribedBy:t}=getRenderStates(this.state);return h(Host,null,h("kol-input",{_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched},h("span",{slot:"label"},h("slot",null)),h("div",{slot:"input"},h("textarea",Object.assign({ref:this.catchRef,part:"textarea",title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onKeyUp:this.onChange,style:{resize:this.state._resize},value:this.state._value})),this.state._hasCounter&&h("span",{"aria-atomic":"true","aria-live":"polite"},this.state._currentLength,this.state._maxLength&&h(Fragment,null,h("span",{"aria-label":translate("kol-of"),role:"img"},"/"),this.state._maxLength)," ",h("span",null,translate("kol-characters"))))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propergateFocus(this.host,this.ref)},this.onChange=t=>{this.ref instanceof HTMLTextAreaElement&&(setState(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._hasCounter=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._resize="vertical",this._required=void 0,this._rows=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_id:"⚠",_resize:"vertical"},this.controller=new TextareaController(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){this.controller.validateAdjustHeight(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.validateAdjustHeight(this._adjustHeight)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolTextarea.style={default:defaultStyleCss};export{KolTextarea as kol_textarea};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{r as registerInstance,h,H as Host}from"./index-0dce65d2.js";import{w as watchTooltipAlignment}from"./button-link-e6d7d116.js";import{g as getDocument,n as nonce}from"./dev.utils-daaf2f39.js";import{w as watchString}from"./prop.validators-ceeab1fe.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";import"./a11y.tipps-ff5a1a99.js";const defaultStyleCss='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=class{constructor(t){registerInstance(this,t),this.
|
|
4
|
+
import{r as registerInstance,h,H as Host}from"./index-0dce65d2.js";import{w as watchTooltipAlignment}from"./button-link-e6d7d116.js";import{g as getDocument,n as nonce}from"./dev.utils-daaf2f39.js";import{w as watchString}from"./prop.validators-ceeab1fe.js";import{s as smartSetTimeout}from"./reuse-2f7da8fc.js";import"./index-eb735af6.js";import"./index.m-86dc8c44.js";import"./a11y.tipps-ff5a1a99.js";import"./validator-2e4f8df6.js";const defaultStyleCss='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=class{constructor(t){registerInstance(this,t),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"]}}};KolTooltip.style={default:defaultStyleCss};export{KolTooltip as kol_tooltip};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"kol-tooltip.entry.js","mappings":"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","names":[],"sources":["./src/components/tooltip/style.sass?tag=kol-tooltip&mode=default","./src/components/tooltip/component.tsx"],"sourcesContent":["/*\n// @import ../style\n\nkol-badge,\n.tooltip /* fix sass formatter */\n\tfont-size: 1rem\n\tposition: fixed\n\t\t// position: absolute\n\t\t// position: relative\n\tanimation-name: fadeInOpacity\n\tanimation-iteration-count: 1\n\tanimation-timing-function: ease-in\n\tanimation-duration: .5s\n\tdisplay: none\n\tz-index: 1000\n\tmax-width: 300px\n\tbox-shadow: 0 0 0.15rem rgba(255,255,255,0.8)\n\n\t&::after\n\t\tcontent: \" \"\n\t\tposition: absolute\n\t\tborder-style: solid\n\t\tborder-width: 5px\n\n\t&.arrow-left\n\t\t&::after\n\t\t\tmargin-top: -5px\n\t\t\ttop: 50%\n\t\t\tright: 100%\n\t\t\tborder-color: transparent black transparent transparent\n\n\t&.arrow-right\n\t\t&::after\n\t\t\tmargin-top: -5px\n\t\t\ttop: 50%\n\t\t\tleft: 100%\n\t\t\tborder-color: transparent transparent transparent black\n\n\t&.arrow-top\n\t\t&::after\n\t\t\tmargin-left: -5px\n\t\t\tleft: 50%\n\t\t\tbottom: 100%\n\t\t\tborder-color: transparent transparent black transparent\n\n\t&.arrow-bottom\n\t\t&::after\n\t\t\tmargin-left: -5px\n\t\t\tleft: 50%\n\t\t\ttop: 100%\n\t\t\tborder-color: black transparent transparent transparent\n\n\t// &::before\n\t// content: ''\n\t// display: inline-block\n\t// vertical-align: middle\n\t// -webkit-transform: rotate(360deg)\n\t// border-style: solid\n\t// border-width: .5rem .5rem .5rem 0\n\t// border-color: transparent black transparent transparent\n\n@keyframes fadeInOpacity\n\t0%\n\t\topacity: 0\n\n\t100%\n\t\topacity: 1\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Alignment } from '../../types/props/alignment';\nimport { getDocument, nonce } from '../../utils/dev.utils';\nimport { watchString } from '../../utils/prop.validators';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\talign: Alignment;\n\tid: string;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & OptionalProps;\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tooltip',\n\tstyleUrls: {\n\t\tdefault: './style.sass',\n\t},\n\tshadow: false,\n})\nexport class KolTooltip implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t// - eslint-disable-next-line @stencil/own-props-must-be-private\n\tpublic hydrated = false; // TODO: Why?!\n\n\tprivate hostElement?: HTMLElement | null = null;\n\tprivate readonly childElements: HTMLElement[] = [];\n\tprivate tooltipElement?: HTMLKolBadgeElement;\n\n\tprivate alignTooltip = (): void => {\n\t\tconst target = this.childElements[0];\n\n\t\t// getBoundingClientRect is not defined in test suite\n\t\tif (process.env.NODE_ENV !== 'test') {\n\t\t\tconst clientRect = target.getBoundingClientRect();\n\n\t\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\t\tswitch (this.state._align) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tthis.tooltipElement.style.left = `${clientRect.left + target.offsetWidth / 2 - this.tooltipElement.offsetWidth / 2}px`;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\tcase 'right':\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tthis.tooltipElement.style.top = `${clientRect.top + clientRect.height / 2 - this.tooltipElement.offsetHeight / 2}px`;\n\t\t\t\t}\n\t\t\t\tswitch (this.state._align) {\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tthis.tooltipElement.style.left = `calc(${clientRect.left - this.tooltipElement.offsetWidth}px - 0.5em)`;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tthis.tooltipElement.style.left = `calc(${clientRect.right}px + 0.5em)`;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tthis.tooltipElement.style.top = `calc(${clientRect.bottom}px + 0.5em)`;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'top':\n\t\t\t\t\tdefault:\n\t\t\t\t\t\tthis.tooltipElement.style.top = `calc(${clientRect.top - this.tooltipElement.offsetHeight}px - 0.5em)`;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate showTooltip = (): void => {\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.tooltipElement.style.setProperty('display', 'block');\n\t\t\tgetDocument().body.addEventListener('keyup', this.hideTooltipByEscape);\n\t\t\tthis.alignTooltip();\n\t\t\tthis.tooltipElement.style.setProperty('visibility', 'visible');\n\t\t\tdocument.addEventListener('scroll', this.alignTooltip);\n\t\t}\n\t};\n\n\tprivate hideTooltip = (): void => {\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.tooltipElement.style.setProperty('display', 'none');\n\t\t\tthis.tooltipElement.style.setProperty('visibility', 'hidden');\n\t\t\tdocument.removeEventListener('scroll', this.alignTooltip);\n\t\t}\n\t};\n\n\tprivate hideTooltipByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\tgetDocument().body.removeEventListener('keyup', this.hideTooltipByEscape);\n\t\t\tthis.hideTooltip();\n\t\t}\n\t};\n\n\tprivate catchHostElement = (element: HTMLElement | null): void => {\n\t\tthis.hostElement = element;\n\t\tif (this.hostElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst previousSibling = this.hostElement.previousElementSibling;\n\t\t\tif (previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\t\tpreviousSibling.removeEventListener('mouseover', this.showTooltip);\n\t\t\t\tpreviousSibling.addEventListener('mouseover', this.showTooltip);\n\t\t\t\tpreviousSibling.removeEventListener('focus', this.showTooltip);\n\t\t\t\tpreviousSibling.addEventListener('focus', this.showTooltip);\n\t\t\t\tpreviousSibling.removeEventListener('mouseout', this.hideTooltip);\n\t\t\t\tpreviousSibling.addEventListener('mouseout', this.hideTooltip);\n\t\t\t\tpreviousSibling.removeEventListener('blur', this.hideTooltip);\n\t\t\t\tpreviousSibling.addEventListener('blur', this.hideTooltip);\n\t\t\t\tthis.childElements.push(previousSibling as HTMLElement);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate catchTooltipElement = (element?: HTMLKolBadgeElement): void => {\n\t\tthis.tooltipElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tthis.alignTooltip();\n\t\t}, 250);\n\t\treturn (\n\t\t\t<Host ref={this.catchHostElement}>\n\t\t\t\t{this.state._label !== '' && (\n\t\t\t\t\t<kol-badge\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'arrow-bottom': this.state._align === 'top',\n\t\t\t\t\t\t\t'arrow-left': this.state._align === 'right',\n\t\t\t\t\t\t\t'arrow-top': this.state._align === 'bottom',\n\t\t\t\t\t\t\t'arrow-right': this.state._align === 'left',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tref={this.catchTooltipElement}\n\t\t\t\t\t\t_color={{\n\t\t\t\t\t\t\tbackgroundColor: '#333',\n\t\t\t\t\t\t\tcolor: '#ddd',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t></kol-badge>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _align?: Alignment = 'top';\n\n\t/**\n\t * Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Das Label gibt an, welcher Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_id: nonce(),\n\t\t_label: '',\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_align')\n\tpublic validateAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_align', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\twatchString(this, '_label', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t\tthis.hydrated = true;\n\t}\n}\n"],"version":3}
|
|
1
|
+
{"file":"kol-tooltip.entry.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,q+BAAq+B;;MCgCh/B,UAAU;;;IAId,iBAAY,GAAG;MAEe;QACpC,IAAI,IAAI,CAAC,eAAe,EAAmC;UAC1D,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC;UAChE,IAAI,IAAI,CAAC,cAAc,EAAmC;YACzD,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM;cACxB,KAAK,KAAK,CAAC;cACX,KAAK,QAAQ;gBACZ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC;gBACrI,MAAM;cACP,KAAK,MAAM,CAAC;cACZ,KAAK,OAAO,CAAC;cACb;gBACC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC;aACtH;YACD,QAAQ,IAAI,CAAC,KAAK,CAAC,MAAM;cACxB,KAAK,MAAM;gBACV,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,aAAa,CAAC;gBACxG,MAAM;cACP,KAAK,OAAO;gBACX,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,GAAG,QAAQ,UAAU,CAAC,KAAK,aAAa,CAAC;gBACvE,MAAM;cACP,KAAK,QAAQ;gBACZ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,UAAU,CAAC,MAAM,aAAa,CAAC;gBACvE,MAAM;cACP,KAAK,KAAK,CAAC;cACX;gBACC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,GAAG,QAAQ,UAAU,CAAC,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,aAAa,CAAC;aACxG;WACD;SACD;OACD;KACD,CAAC;IAEM,gBAAW,GAAG;MACrB,IAAI,IAAI,CAAC,cAAc,EAAmC;QACzD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC1D,WAAW,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACvE,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAC/D,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;OACvD;KACD,CAAC;IAEM,gBAAW,GAAG;MACrB,IAAI,IAAI,CAAC,cAAc,EAAmC;QACzD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACzD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAC9D,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;OAC1D;KACD,CAAC;IAEM,wBAAmB,GAAG,CAAC,KAAoB;MAClD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;QAC3B,WAAW,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QAC1E,IAAI,CAAC,WAAW,EAAE,CAAC;OACnB;KACD,CAAC;IAEM,iBAAY,GAAG,CAAC,EAAW;MAClC,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;MAC/D,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;MAC3D,EAAE,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;MAC9D,EAAE,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;KAC1D,CAAC;IAEM,oBAAe,GAAG,CAAC,EAAW;MACrC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;MAClE,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;MAC9D,EAAE,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;MACjE,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;KAC7D,CAAC;IAEM,oBAAe,GAAG,CAAC,EAAW;MACrC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;MACzB,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;KACtB,CAAC;IAEM,qBAAgB,GAAG,CAAC,EAAsB;MACjD,IAAI,EAAE,EAAmC;QACxC,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,sBAA4C,CAAC;QACvE,IAAI,IAAI,CAAC,eAAe,EAAmC;UAC1D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;SAC3C;OACD;KACD,CAAC;IAEM,wBAAmB,GAAG,CAAC,EAAwB;MACtD,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC;MACzB,IAAI,IAAI,CAAC,cAAc,EAAmC;QACzD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;OAC1C;KACD,CAAC;IA8EM,mBAAc,GAAG,CAAC,CAAC;IAGnB,4BAAuB,GAAG;MACjC,IAAI,CAAC,cAAc,EAAE,CAAC;MACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACzB,CAAC;IAEM,4BAAuB,GAAG;MACjC,IAAI,CAAC,cAAc,EAAE,CAAC;MACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACzB,CAAC;IAEM,sBAAiB,GAAG;MAC3B,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;MACpC,IAAI,CAAC,gBAAgB,GAAG,UAAU,CAAC;QAClC,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACpC,IAAI,IAAI,CAAC,cAAc,GAAG,CAAC,EAAE;UAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;SACnB;aAAM;UACN,IAAI,CAAC,WAAW,EAAE,CAAC;SACnB;OACD,EAAE,GAAG,CAAC,CAAC;KACR,CAAC;kBApEkC,KAAK;;;iBAeT;MAC/B,MAAM,EAAE,KAAK;MACb,GAAG,EAAE,KAAK,EAAE;MACZ,MAAM,EAAE,EAAE;KACV;;EAlDM,MAAM;IACZ,eAAe,CAAC;MACf,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,eAAe,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC;KACxC,EAAE,GAAG,CAAC,CAAC;IACR,QACC,EAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,gBAAgB,IAC9B,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,EAAE,KACxB,iBACC,KAAK,EAAE;QACN,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,KAAK;QAC3C,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,OAAO;QAC3C,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ;QAC3C,aAAa,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,MAAM;OAC3C,EACD,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAClB,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAC7B,MAAM,EAAE;QACP,eAAe,EAAE,MAAM;QACvB,KAAK,EAAE,MAAM;OACb,EACD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GACb,CACb,CACK,EACN;GACF;EA8BM,aAAa,CAAC,KAAiB;IACrC,qBAAqB,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;GAC7C;EAMM,UAAU,CAAC,KAAc;IAC/B,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;GAChC;EAMM,aAAa,CAAC,KAAc;IAClC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;GACnC;EA8BM,iBAAiB;IACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;EAKM,oBAAoB;IAC1B,IAAI,IAAI,CAAC,eAAe,EAAmC;MAC1D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;KAC3C;IACD,IAAI,IAAI,CAAC,cAAc,EAAmC;MACzD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC1C;GACD;;;;;;;;;;;;;","names":[],"sources":["./src/components/tooltip/style.sass?tag=kol-tooltip&mode=default","./src/components/tooltip/component.tsx"],"sourcesContent":["/*\n// @import ../style\n\nkol-badge,\n.tooltip /* fix sass formatter */\n\tfont-size: 1rem\n\tposition: fixed\n\t\t// position: absolute\n\t\t// position: relative\n\tanimation-name: fadeInOpacity\n\tanimation-iteration-count: 1\n\tanimation-timing-function: ease-in\n\tanimation-duration: .5s\n\tdisplay: none\n\tz-index: 1000\n\tmax-width: 300px\n\tbox-shadow: 0 0 0.15rem rgba(255,255,255,0.8)\n\n\t&::after\n\t\tcontent: \" \"\n\t\tposition: absolute\n\t\tborder-style: solid\n\t\tborder-width: 5px\n\n\t&.arrow-left\n\t\t&::after\n\t\t\tmargin-top: -5px\n\t\t\ttop: 50%\n\t\t\tright: 100%\n\t\t\tborder-color: transparent black transparent transparent\n\n\t&.arrow-right\n\t\t&::after\n\t\t\tmargin-top: -5px\n\t\t\ttop: 50%\n\t\t\tleft: 100%\n\t\t\tborder-color: transparent transparent transparent black\n\n\t&.arrow-top\n\t\t&::after\n\t\t\tmargin-left: -5px\n\t\t\tleft: 50%\n\t\t\tbottom: 100%\n\t\t\tborder-color: transparent transparent black transparent\n\n\t&.arrow-bottom\n\t\t&::after\n\t\t\tmargin-left: -5px\n\t\t\tleft: 50%\n\t\t\ttop: 100%\n\t\t\tborder-color: black transparent transparent transparent\n\n\t// &::before\n\t// content: ''\n\t// display: inline-block\n\t// vertical-align: middle\n\t// -webkit-transform: rotate(360deg)\n\t// border-style: solid\n\t// border-width: .5rem .5rem .5rem 0\n\t// border-color: transparent black transparent transparent\n\n@keyframes fadeInOpacity\n\t0%\n\t\topacity: 0\n\n\t100%\n\t\topacity: 1\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { Alignment } from '../../types/props/alignment';\nimport { getDocument, nonce } from '../../utils/dev.utils';\nimport { watchString } from '../../utils/prop.validators';\nimport { smartSetTimeout } from '../../utils/reuse';\n\n/**\n * API\n */\ntype RequiredProps = {\n\tid: string;\n\tlabel: string;\n};\ntype OptionalProps = {\n\talign: Alignment;\n};\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & OptionalProps;\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tooltip',\n\tstyleUrls: {\n\t\tdefault: './style.sass',\n\t},\n\tshadow: false,\n})\nexport class KolTooltip implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate previousSibling?: HTMLElement | null;\n\tprivate tooltipElement?: HTMLKolBadgeElement;\n\n\tprivate alignTooltip = (): void => {\n\t\t// getBoundingClientRect is not defined in test suite\n\t\tif (process.env.NODE_ENV !== 'test') {\n\t\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\t\tconst clientRect = this.previousSibling.getBoundingClientRect();\n\t\t\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tswitch (this.state._align) {\n\t\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\t\tthis.tooltipElement.style.left = `${clientRect.left + this.previousSibling.offsetWidth / 2 - this.tooltipElement.offsetWidth / 2}px`;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\tthis.tooltipElement.style.top = `${clientRect.top + clientRect.height / 2 - this.tooltipElement.offsetHeight / 2}px`;\n\t\t\t\t\t}\n\t\t\t\t\tswitch (this.state._align) {\n\t\t\t\t\t\tcase 'left':\n\t\t\t\t\t\t\tthis.tooltipElement.style.left = `calc(${clientRect.left - this.tooltipElement.offsetWidth}px - 0.5em)`;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'right':\n\t\t\t\t\t\t\tthis.tooltipElement.style.left = `calc(${clientRect.right}px + 0.5em)`;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\t\tthis.tooltipElement.style.top = `calc(${clientRect.bottom}px + 0.5em)`;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\tthis.tooltipElement.style.top = `calc(${clientRect.top - this.tooltipElement.offsetHeight}px - 0.5em)`;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate showTooltip = (): void => {\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.tooltipElement.style.setProperty('display', 'block');\n\t\t\tgetDocument().body.addEventListener('keyup', this.hideTooltipByEscape);\n\t\t\tthis.alignTooltip();\n\t\t\tthis.tooltipElement.style.setProperty('visibility', 'visible');\n\t\t\tdocument.addEventListener('scroll', this.alignTooltip);\n\t\t}\n\t};\n\n\tprivate hideTooltip = (): void => {\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.tooltipElement.style.setProperty('display', 'none');\n\t\t\tthis.tooltipElement.style.setProperty('visibility', 'hidden');\n\t\t\tdocument.removeEventListener('scroll', this.alignTooltip);\n\t\t}\n\t};\n\n\tprivate hideTooltipByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') {\n\t\t\tgetDocument().body.removeEventListener('keyup', this.hideTooltipByEscape);\n\t\t\tthis.hideTooltip();\n\t\t}\n\t};\n\n\tprivate addListeners = (el: Element): void => {\n\t\tel.addEventListener('mouseover', this.incrementOverFocusCount);\n\t\tel.addEventListener('focus', this.incrementOverFocusCount);\n\t\tel.addEventListener('mouseout', this.decrementOverFocusCount);\n\t\tel.addEventListener('blur', this.decrementOverFocusCount);\n\t};\n\n\tprivate removeListeners = (el: Element): void => {\n\t\tel.removeEventListener('mouseover', this.incrementOverFocusCount);\n\t\tel.removeEventListener('focus', this.incrementOverFocusCount);\n\t\tel.removeEventListener('mouseout', this.decrementOverFocusCount);\n\t\tel.removeEventListener('blur', this.decrementOverFocusCount);\n\t};\n\n\tprivate resyncListeners = (el: Element): void => {\n\t\tthis.removeListeners(el);\n\t\tthis.addListeners(el);\n\t};\n\n\tprivate catchHostElement = (el: HTMLElement | null): void => {\n\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\tthis.previousSibling = el.previousElementSibling as HTMLElement | null;\n\t\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.resyncListeners(this.previousSibling);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate catchTooltipElement = (el?: HTMLKolBadgeElement): void => {\n\t\tthis.tooltipElement = el;\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.resyncListeners(this.tooltipElement);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tsmartSetTimeout(() => {\n\t\t\tthis.alignTooltip();\n\t\t\tsmartSetTimeout(this.alignTooltip, 750);\n\t\t}, 250);\n\t\treturn (\n\t\t\t<Host ref={this.catchHostElement}>\n\t\t\t\t{this.state._label !== '' && (\n\t\t\t\t\t<kol-badge\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'arrow-bottom': this.state._align === 'top',\n\t\t\t\t\t\t\t'arrow-left': this.state._align === 'right',\n\t\t\t\t\t\t\t'arrow-top': this.state._align === 'bottom',\n\t\t\t\t\t\t\t'arrow-right': this.state._align === 'left',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tref={this.catchTooltipElement}\n\t\t\t\t\t\t_color={{\n\t\t\t\t\t\t\tbackgroundColor: '#333',\n\t\t\t\t\t\t\tcolor: '#ddd',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t></kol-badge>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _align?: Alignment = 'top';\n\n\t/**\n\t * Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Das Label gibt an, welcher Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_id: nonce(),\n\t\t_label: '',\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_align')\n\tpublic validateAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_align', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\twatchString(this, '_id', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\twatchString(this, '_label', value);\n\t}\n\n\tprivate overFocusCount = 0;\n\tprivate overFocusTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate incrementOverFocusCount = (): void => {\n\t\tthis.overFocusCount++;\n\t\tthis.showOrHideTooltip();\n\t};\n\n\tprivate decrementOverFocusCount = (): void => {\n\t\tthis.overFocusCount--;\n\t\tthis.showOrHideTooltip();\n\t};\n\n\tprivate showOrHideTooltip = (): void => {\n\t\tclearTimeout(this.overFocusTimeout);\n\t\tthis.overFocusTimeout = setTimeout(() => {\n\t\t\tclearTimeout(this.overFocusTimeout);\n\t\t\tif (this.overFocusCount > 0) {\n\t\t\t\tthis.showTooltip();\n\t\t\t} else {\n\t\t\t\tthis.hideTooltip();\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateId(this._id);\n\t\tthis.validateLabel(this._label);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentDidLoad)\n\t */\n\tpublic disconnectedCallback(): void {\n\t\tif (this.previousSibling /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.previousSibling);\n\t\t}\n\t\tif (this.tooltipElement /* SSR instanceof HTMLElement */) {\n\t\t\tthis.removeListeners(this.tooltipElement);\n\t\t}\n\t}\n}\n"],"version":3}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
|
3
3
|
*/
|
|
4
|
-
import{e as a11yHint}from"./a11y.tipps-ff5a1a99.js";import{w as watchString}from"./prop.validators-ceeab1fe.js";import{c as isEmptyOrPrefixOf}from"./validator-
|
|
4
|
+
import{e as a11yHint}from"./a11y.tipps-ff5a1a99.js";import{w as watchString}from"./prop.validators-ceeab1fe.js";import{c as isEmptyOrPrefixOf}from"./validator-2e4f8df6.js";const syncAriaLabelBeforePatch=(a,e,r,i)=>{const t=e.has("_ariaLabel")?e.get("_ariaLabel"):r.state._ariaLabel;if("string"==typeof t){const a=e.has("_label")?e.get("_label"):r.state._label;!1===isEmptyOrPrefixOf(a,t)&&("_ariaLabel"===i?e.set("_label",t):e.set("_ariaLabel",a),a11yHint("Das abweichende Aria-Label am Schalter ist nicht barrierefrei. Ein abweichendes Aria-Label muss aus Gründern der Barrierefreiheit für die Sprachsteuerung mit dem Label-Text beginnen."))}},validateAriaLabel=(a,e)=>{watchString(a,"_ariaLabel",e,{hooks:{beforePatch:syncAriaLabelBeforePatch}})},validateLabel=(a,e)=>{watchString(a,"_label",e,{hooks:{beforePatch:syncAriaLabelBeforePatch},required:!0})};export{validateLabel as a,validateAriaLabel as v};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"label-
|
|
1
|
+
{"file":"label-a6e1b813.js","mappings":";;;;;;;AASA,MAAM,wBAAwB,GAA2C,CAAC,UAAU,EAAE,SAAS,EAAE,SAAoC,EAAE,GAAG;EACzI,MAAM,SAAS,GAAuB,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,GAAI,SAAS,CAAC,GAAG,CAAC,YAAY,CAAY,GAAI,SAAS,CAAC,KAAK,CAAC,UAAqB,CAAC;EACrJ,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;IAClC,MAAM,KAAK,GAAuB,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAI,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAY,GAAI,SAAS,CAAC,KAAK,CAAC,MAAiB,CAAC;IACrI,IAAI,iBAAiB,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,KAAK,EAAE;MAClD,IAAI,GAAG,KAAK,YAAY,EAAE;QACzB,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;OAEnC;WAAM;QACN,SAAS,CAAC,GAAG,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;OAEnC;MACD,QAAQ,CACP,wLAAwL,CACxL,CAAC;KACF;GACD;AACF,CAAC,CAAC;MAEW,iBAAiB,GAAG,CAAC,SAAoC,EAAE,KAAc;EACrF,WAAW,CAAC,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE;IAC3C,KAAK,EAAE;MACN,WAAW,EAAE,wBAAwB;KACrC;GACD,CAAC,CAAC;AACJ,EAAE;MAEW,aAAa,GAAG,CAAC,SAAoC,EAAE,KAAc;EACjF,WAAW,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;IACvC,KAAK,EAAE;MACN,WAAW,EAAE,wBAAwB;KACrC;IACD,QAAQ,EAAE,IAAI;GACd,CAAC,CAAC;AACJ;;;;","names":[],"sources":["./src/utils/validators/label.ts"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { a11yHint } from '../a11y.tipps';\nimport { watchString } from '../prop.validators';\nimport { isEmptyOrPrefixOf } from '../validator';\n\n/**\n * Ein abweichendes Aria-Label muss aus Gründern der Barrierefreiheit für\n * die Sprachsteuerung mit dem Label-Text beginnen.\n */\nconst syncAriaLabelBeforePatch: Generic.Element.NextStateHooksCallback = (_nextValue, nextState, component: Generic.Element.Component, key): void => {\n\tconst ariaLabel: string | undefined = nextState.has('_ariaLabel') ? (nextState.get('_ariaLabel') as string) : (component.state._ariaLabel as string);\n\tif (typeof ariaLabel === 'string') {\n\t\tconst label: string | undefined = nextState.has('_label') ? (nextState.get('_label') as string) : (component.state._label as string);\n\t\tif (isEmptyOrPrefixOf(label, ariaLabel) === false) {\n\t\t\tif (key === '_ariaLabel') {\n\t\t\t\tnextState.set('_label', ariaLabel);\n\t\t\t\t// smartSetTimeout(() => ((component as Generic.Element.Component & { _label: string })._label = ariaLabel), 50);\n\t\t\t} else {\n\t\t\t\tnextState.set('_ariaLabel', label);\n\t\t\t\t// smartSetTimeout(() => ((component as Generic.Element.Component & { _ariaLabel: string })._ariaLabel = label), 50);\n\t\t\t}\n\t\t\ta11yHint(\n\t\t\t\t`Das abweichende Aria-Label am Schalter ist nicht barrierefrei. Ein abweichendes Aria-Label muss aus Gründern der Barrierefreiheit für die Sprachsteuerung mit dem Label-Text beginnen.`\n\t\t\t);\n\t\t}\n\t}\n};\n\nexport const validateAriaLabel = (component: Generic.Element.Component, value?: string): void => {\n\twatchString(component, '_ariaLabel', value, {\n\t\thooks: {\n\t\t\tbeforePatch: syncAriaLabelBeforePatch,\n\t\t},\n\t});\n};\n\nexport const validateLabel = (component: Generic.Element.Component, value?: string): void => {\n\twatchString(component, '_label', value, {\n\t\thooks: {\n\t\t\tbeforePatch: syncAriaLabelBeforePatch,\n\t\t},\n\t\trequired: true,\n\t});\n};\n"],"version":3}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* KoliBri - The accessible HTML-Standard
|
|
3
|
+
*/
|
|
4
|
+
import{i as isObject}from"./validator-2e4f8df6.js";const propergateFocus=(t,o)=>{isObject(t)&&t&&(t.focus=t=>null==o?void 0:o.focus(t))},smartSetTimeout=(t,o)=>{const e=setTimeout((()=>{clearTimeout(e),t()}),o)};export{propergateFocus as p,smartSetTimeout as s};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"reuse-2f7da8fc.js","mappings":";;;;;MAEa,eAAe,GAAG,CAA+C,IAAQ,EAAE,GAAO;EAC9F,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE;IAC3B,IAAI,CAAC,KAAK,GAAG,CAAC,GAAiB,KAAK,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,KAAK,CAAC,GAAG,CAAC,CAAC;GACpD;AACF,EAAE;MAUW,eAAe,GAAG,CAAC,EAAc,EAAE,KAAc;EAC7D,MAAM,OAAO,GAAG,UAAU,CAAC;IAC1B,YAAY,CAAC,OAAO,CAAC,CAAC;IACtB,EAAE,EAAE,CAAC;GACL,EAAE,KAAK,CAAC,CAAC;AACX;;;;","names":[],"sources":["./src/utils/reuse.ts"],"sourcesContent":["import { isObject } from './validator';\n\nexport const propergateFocus = <H extends HTMLElement, R extends HTMLElement>(host?: H, ref?: R) => {\n\tif (isObject(host) && host) {\n\t\thost.focus = (ops: FocusOptions) => ref?.focus(ops);\n\t}\n};\n\n/**\n * If you need a tiny setTimeout with clearTimeout, you can\n * use this compact implementation.\n *\n * @param cb Callback with the code to run\n * @param delay Timeout delay\n */\n// ts-prune-ignore-next\nexport const smartSetTimeout = (cb: () => void, delay?: number) => {\n\tconst timeout = setTimeout(() => {\n\t\tclearTimeout(timeout);\n\t\tcb();\n\t}, delay);\n};\n"],"version":3}
|