@public-ui/components/dist/components/kol-button-wc.js

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

/*!
 * KoliBri - The accessible HTML-Standard
 */
import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{c as watchBoolean,w as watchValidator,m as mapStringOrBoolean2String,e as mapBoolean2String,g as setEventTarget,h as watchString,s as setState}from"./common.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{v as validateAriaControls,a as validateAriaDescription,b as validateAriaExpanded,c as validateAlternativeButtonLinkRole,d as validateButtonVariant}from"./button-variant.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateDisabled}from"./disabled.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateIcons}from"./icons.js";import{v as validateInline}from"./inline.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";import{c as clsx}from"./clsx.js";import{a as KolTooltipWcTag}from"./component-names.js";import"./Alert.js";import"./i18n.js";import{K as KolSpanFc}from"./Span.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{p as propagateSubmitEventToForm,a as propagateResetEventToForm}from"./controller.js";import{A as AssociatedInputController}from"./associated.controller.js";const 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)},KolButtonWc$1=proxyCustomElement(class extends HTMLElement{async focus(){var t;return Promise.resolve(null===(t=this.buttonRef)||void 0===t?void 0:t.focus())}render(){var t;const a=showExpertSlot(this.state._label),e=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim(),i=this.state._accessKey||this.state._shortKey,s=!0===this.state._disabled,l=!0===this.state._hideLabel;return h(Host,{key:"99416124052f5a18686e2ea0fc8db9e9f9066a01"},h("button",{key:"07fe0e9be0846dd5609e707000dc9b6e86bdb348",ref:t=>this.buttonRef=t,accessKey:this.state._accessKey,"aria-controls":this.state._ariaControls,"aria-description":e||void 0,"aria-expanded":mapBoolean2String(this.state._ariaExpanded),"aria-haspopup":this._ariaHasPopup,"aria-keyshortcuts":this.state._shortKey,"aria-label":l&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":mapStringOrBoolean2String(this.state._ariaSelected),class:clsx("kol-button",{"kol-button--disabled":s,[`kol-button--${this.state._buttonVariant}`]:"custom"!==this.state._buttonVariant,"kol-button--inline":!0===this.state._inline,"kol-button--standalone":!1===this.state._inline,"kol-button--hide-label":l,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}),disabled:s,id:this.state._id,name:this.state._name,onClick:this.onClick,onMouseDown:this.onMouseDown,role:this.state._role,tabIndex:this.state._tabIndex,type:this.state._type},h(KolSpanFc,{key:"a72dca8e86940ccc9f9525b9f726dee12f6884a3",class:"kol-button__text",badgeText:i,icons:this.state._icons,hideLabel:l,label:a?"":this.state._label},h("slot",{key:"2d4a2a369fc496087ce41b021e771e7e9c421adf",name:"expert",slot:"expert"}))),l&&h(KolTooltipWcTag,{key:"a6f0f7f8b41875c2a98f1125120e38c22afb8658",ref:t=>this.tooltipRef=t,"aria-hidden":"true",hidden:a,class:"kol-button__tooltip",_badgeText:i,_align:this.state._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))}constructor(t){super(),!1!==t&&this.__registerHost(),this.hideTooltip=()=>{var t;null===(t=this.tooltipRef)||void 0===t||t.hideTooltip()},this.onClick=t=>{var a,e;this.state._hideLabel&&this.hideTooltip(),"submit"===this.state._type?propagateSubmitEventToForm({form:this.host}):"reset"===this.state._type?propagateResetEventToForm({form:this.host}):(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.host&&dispatchDomEvent(this.host,KolEvent.click,this.state._value)},this.onMouseDown=t=>{var a,e,i;null===(i=null===(e=null===(a=this.state)||void 0===a?void 0:a._on)||void 0===e?void 0:e.onMouseDown)||void 0===i||i.call(e,t),this.host&&dispatchDomEvent(this.host,KolEvent.mousedown)},this._disabled=!1,this._hideLabel=!1,this._inline=!1,this._tooltipAlign="top",this._type="button",this._buttonVariant="normal",this.state={_icons:{},_label:"",_on:{},_type:"button",_buttonVariant:"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)}validateInline(t){validateInline(this,t,{defaultValue:!1})}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)}validateButtonVariant(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.validateInline(this._inline),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.validateButtonVariant(this._buttonVariant),validateAccessAndShortKey(this._accessKey,this._shortKey)}get host(){return 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"],_inline:["validateInline"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_buttonVariant:["validateButtonVariant"]}}},[260,"kol-button-wc",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaHasPopup:[1,"_aria-has-popup"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_inline:[4],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_buttonVariant:[1,"_button-variant"],state:[32],focus:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icons:["validateIcons"],_id:["validateId"],_inline:["validateInline"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_buttonVariant:["validateButtonVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button-wc"].forEach(t=>{if("kol-button-wc"===t)customElements.get(t)||customElements.define(t,KolButtonWc$1)})}const KolButtonWc=KolButtonWc$1,defineCustomElement=defineCustomElement$1;export{KolButtonWc,defineCustomElement};