UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

4 lines 8.52 kB
/*! * KoliBri - The accessible HTML-Standard */ import{h,H as Host,r as registerInstance,g as getElement}from"./index-f0de5c73.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events-29e84d75.js";import{n as nonce}from"./dev.utils-0b748391.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller-a3c1b90d.js";import{A as AssociatedInputController}from"./associated.controller-5bee50ee.js";import{a as KolTooltipWcTag,f as KolSpanWcTag}from"./component-names-6ca7e863.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key-e094398d.js";import{i as watchString,b as watchBoolean,w as watchValidator,v as mapBoolean2String,x as mapStringOrBoolean2String,n as setEventTarget,s as setState}from"./prop.validators-64749272.js";import{v as validateAriaDescription,a as validateAriaExpanded,b as validateAlternativeButtonLinkRole}from"./aria-expanded-9f877821.js";import{s as showExpertSlot}from"./reuse-32931294.js";import{v as validateCustomClass}from"./custom-class-cedc9f43.js";import{v as validateDisabled}from"./disabled-e9084205.js";import{v as validateHideLabel}from"./hide-label-8c202307.js";import{v as validateIcons}from"./icons-c857b77d.js";import{a as validateLabelWithExpertSlot}from"./label-e8ec0e3a.js";import{v as validateTooltipAlign}from"./tooltip-align-5902aa96.js";import"./dev.utils-fab45cbc.js";import"./index-da3e0c00.js";import"./common-0f1f2276.js";import"./align-878fb132.js";const validateAriaControls=(t,a)=>{watchString(t,"_ariaControls",a)},validateAriaSelected=(t,a)=>{watchBoolean(t,"_ariaSelected",a)},validateButtonCallbacks=(t,a)=>{watchValidator(t,"_on",(t=>"object"==typeof t&&null!==t),new Set(["ButtonCallbacksPropType {Events.onClick, Events.onMouseDown}"]),a)},buttonTypePropTypeOptions=["button","reset","submit"],validateButtonType=(t,a)=>{watchValidator(t,"_type",(t=>"string"==typeof t&&buttonTypePropTypeOptions.includes(t)),new Set([`KoliBriButtonType {${buttonTypePropTypeOptions.join(", ")}`]),a)},buttonVariantPropTypeOptions=["primary","secondary","normal","tertiary","danger","ghost","custom"],validateButtonVariant=(t,a)=>{watchValidator(t,"_variant",(t=>"string"==typeof t&&buttonVariantPropTypeOptions.includes(t)),new Set([`KoliBriButtonVariant {${buttonVariantPropTypeOptions.join(", ")}`]),a,{defaultValue:"normal"})},KolButtonWc=class{async kolFocus(){var t;null===(t=this.buttonRef)||void 0===t||t.focus()}render(){var t,a;const e=showExpertSlot(this.state._label),i=Boolean(null===(a=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim())||void 0===a?void 0:a.length);return h(Host,{key:"7bcc547614675be7b8bae593bf5ca7f0a73a5c71",class:"kol-button-wc"},h("button",Object.assign({key:"adf0affa306b3ca527e6155f82242903670707c4",ref:this.catchRef,accessKey:this.state._accessKey||void 0,"aria-controls":this.state._ariaControls,"aria-describedby":i?this.internalDescriptionById:void 0,"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:{button:!0,disabled:!0===this.state._disabled,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0,"hide-label":!0===this.state._hideLabel},disabled:this.state._disabled,id:this.state._id,name:this.state._name},this.state._on,{onClick:this.onClick,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type}),h(KolSpanWcTag,{key:"d81ee92cb7f6b9fd53e11dfac489a2593b0a7fd9",class:"button-inner",_badgeText:this.state._accessKey||this.state._shortKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:e?"":this.state._label},h("slot",{key:"4605476f9755f48bab8cebb1659602e44bb26544",name:"expert",slot:"expert"}))),h(KolTooltipWcTag,{key:"e0cd2addfabbc0fa3e1b3875fcf199c21dced923","aria-hidden":"true",hidden:e||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}),i&&h("span",{key:"46bad10f44ba5cd141d97810438c9c6477ad7a74",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}constructor(t){registerInstance(this,t),this.internalDescriptionById=nonce(),this.catchRef=t=>{this.buttonRef=t},this.onClick=t=>{var a,e;"submit"===this.state._type?propagateSubmitEventToForm({form:this.host,ref:this.buttonRef}):"reset"===this.state._type?propagateResetEventToForm({form:this.host,ref:this.buttonRef}):(stopPropagation(t),tryToDispatchKoliBriEvent("click",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(setEventTarget(t,this.buttonRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._value)))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_variant:"normal"},this.controller=new AssociatedInputController(this,"button",this.host)}validateAccessKey(t){validateAccessKey(this,t),validateAccessAndShortKey(t,this._shortKey)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){validateAriaDescription(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaSelected(t){validateAriaSelected(this,t)}validateCustomClass(t){validateCustomClass(this,t)}validateDisabled(t){validateDisabled(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateIcons(t){validateIcons(this,t)}validateId(t){watchString(this,"_id",t)}validateLabel(t){validateLabelWithExpertSlot(this,t,{required:!0})}validateName(t){this.controller.validateName(t)}validateOn(t){validateButtonCallbacks(this,t)}validateRole(t){validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){validateShortKey(this,t),validateAccessAndShortKey(this._accessKey,t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){validateTabIndex(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}validateType(t){validateButtonType(this,t)}validateValue(t){setState(this,"_value",t),this.controller.setFormAssociatedValue(this.state._value)}validateVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcons(this._icons),this.validateId(this._id),this.validateLabel(this._label),this.validateName(this._name),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateSyncValueBySelector(this._syncValueBySelector),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant),validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};export{KolButtonWc as kol_button_wc};