UNPKG

@public-ui/components

Version:

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

4 lines 10.3 kB
/*! * KoliBri - The accessible HTML-Standard */ import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{e as KolIconTag,a as KolTooltipWcTag}from"./component-names.js";import{w as watchValidator,h as watchString,g as setEventTarget,l as devHint}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 validateHref}from"./href.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{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{o as onLocationChange}from"./ariaCurrentService.js";import{c as clsx}from"./clsx.js";import"./Alert.js";import{t as translate}from"./i18n.js";import{K as KolSpanFc}from"./Span.js";const ariaCurrentValuePropTypeOptions=["date","location","page","step","time","true","false"],validateAriaCurrentValue=(t,a)=>{watchValidator(t,"_ariaCurrentValue",t=>"string"==typeof t&&ariaCurrentValuePropTypeOptions.includes(t),new Set([`AriaCurrentValue {${ariaCurrentValuePropTypeOptions.join(", ")}`]),a,{defaultValue:"page"})},validateAriaOwns=(t,a)=>{watchString(t,"_ariaOwns",a,{defaultValue:void 0})},validateDownload=(t,a)=>{watchString(t,"_download",a)},validateLinkCallbacks=(t,a)=>{"object"==typeof a&&"function"==typeof(null==a?void 0:a.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:a}))},validateLinkTarget=(t,a)=>{watchString(t,"_target",a)},KolLinkWc$1=proxyCustomElement(class extends HTMLElement{constructor(t){super(),!1!==t&&this.__registerHost(),this.translateOpenLinkInTab=translate("kol-open-link-in-tab"),this.catchRef=t=>{this.anchorRef=t},this.hideTooltip=()=>{var t;null===(t=this.tooltipRef)||void 0===t||t.hideTooltip()},this.onClick=t=>{var a,e;this.state._hideLabel&&this.hideTooltip(),!0===this.state._disabled?t.preventDefault():("function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(t.preventDefault(),setEventTarget(t,this.anchorRef),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._href)),this.host&&dispatchDomEvent(this.host,KolEvent.click,this.state._href))},this.getRenderValues=()=>{const t="string"==typeof this.state._target&&"_self"!==this.state._target,a={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:t?"noopener":void 0,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||devHint("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:t,tagAttrs:a}},this._disabled=!1,this._hideLabel=!1,this._inline=!0,this._tooltipAlign="right",this._buttonVariant="normal",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async kolFocus(){var t;null===(t=this.anchorRef)||void 0===t||t.focus()}render(){var t;const{isExternal:a,tagAttrs:e}=this.getRenderValues(),i=showExpertSlot(this.state._label),s=null===(t=this.state._ariaDescription)||void 0===t?void 0:t.trim();return h(Host,{key:"892c5cc729d746dc7b1f046d1b43f198752d2806"},h("a",Object.assign({key:"66793d9388bdd0b7d291fc1d137ba269cfd2b228",ref:this.catchRef},e,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-controls":this.state._ariaControls,"aria-description":s||void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${a?` (${this.translateOpenLinkInTab})`:""}`:void 0,"aria-keyshortcuts":this.state._shortKey,class:clsx("kol-link",{"kol-link--disabled":!0===this.state._disabled,"kol-link--external-link":a,"kol-link--hide-label":!0===this.state._hideLabel,[`kol-link--${this.state._buttonVariant}`]:"custom"!==this.state._buttonVariant,"kol-link--inline":!0===this.state._inline,"kol-link--standalone":!1===this.state._inline,[this.state._customClass]:"custom"===this.state._buttonVariant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0})},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),h(KolSpanFc,{key:"5c7d16010d9be97330357727cd077a5938d34e7f",class:"kol-link__text",badgeText:this.state._accessKey||this.state._shortKey,icons:this.state._icons,hideLabel:this.state._hideLabel,label:i?"":this.state._label||this.state._href},h("slot",{key:"b01d5620e864c978c8e87b5601b8736334af2959",name:"expert",slot:"expert"})),a&&h(KolIconTag,{key:"4a817ada365a0c78003c921049be05705dd532ea",class:"kol-link__icon",_label:this.state._hideLabel?"":this.translateOpenLinkInTab,_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),!0===this.state._hideLabel&&h(KolTooltipWcTag,{key:"509f958cb96c22e1f037c9c82bd74ef4e89e0b3d","aria-hidden":"true",class:"kol-link__tooltip",ref:t=>this.tooltipRef=t,hidden:i,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}))}validateAccessKey(t){validateAccessKey(this,t),validateAccessAndShortKey(t,this._shortKey)}validateAriaCurrentValue(t){validateAriaCurrentValue(this,t)}validateAriaControls(t){validateAriaControls(this,t)}validateAriaDescription(t){validateAriaDescription(this,t)}validateAriaExpanded(t){validateAriaExpanded(this,t)}validateAriaOwns(t){validateAriaOwns(this,t)}validateCustomClass(t){validateCustomClass(this,t)}validateDisabled(t){validateDisabled(this,t)}validateDownload(t){validateDownload(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateHref(t){validateHref(this,t,{required:!0})}validateIcons(t){validateIcons(this,t)}validateInline(t){validateInline(this,t,{defaultValue:!0})}validateLabel(t){validateLabelWithExpertSlot(this,t)}validateOn(t){validateLinkCallbacks(this,t)}validateRole(t){validateAlternativeButtonLinkRole(this,t)}validateShortKey(t){validateShortKey(this,t),validateAccessAndShortKey(this._accessKey,t)}validateTabIndex(t){validateTabIndex(this,t)}validateTarget(t){validateLinkTarget(this,t)}validateTooltipAlign(t){validateTooltipAlign(this,t)}validateButtonVariant(t){validateButtonVariant(this,t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaControls(this._ariaControls),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateInline(this._inline),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.validateButtonVariant(this._buttonVariant),this.unsubscribeOnLocationChange=onLocationChange(t=>{this.state._ariaCurrent=t===this.state._href?this.state._ariaCurrentValue:void 0}),validateAccessAndShortKey(this._accessKey,this._shortKey)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_inline:["validateInline"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_buttonVariant:["validateButtonVariant"]}}},[260,"kol-link-wc",{_accessKey:[1,"_access-key"],_ariaCurrentValue:[1,"_aria-current-value"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaOwns:[1,"_aria-owns"],_customClass:[1,"_custom-class"],_disabled:[4],_download:[1],_hideLabel:[4,"_hide-label"],_href:[1],_icons:[1],_inline:[4],_label:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_tabIndex:[2,"_tab-index"],_target:[1],_tooltipAlign:[1,"_tooltip-align"],_buttonVariant:[1,"_button-variant"],state:[32],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaControls:["validateAriaControls"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_inline:["validateInline"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_buttonVariant:["validateButtonVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link-wc"].forEach(t=>{if("kol-link-wc"===t)customElements.get(t)||customElements.define(t,KolLinkWc$1)})}const KolLinkWc=KolLinkWc$1,defineCustomElement=defineCustomElement$1;export{KolLinkWc,defineCustomElement};