@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
335 lines (326 loc) • 15.4 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { _ as __decorate } from './tslib.es6.js';
import { B as BaseWebComponent } from './variant-quote.js';
import { I as IconFC } from './component3.js';
import { T as TooltipFC } from './component.js';
import { T as TooltipController } from './controller.js';
import './common.js';
import { a as watchValidator, h as watchString, g as setEventTarget, j as devHint } from './prop.validators.js';
import { S as SpanFC, s as showExpertSlot } from './component2.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 } from './aria-expanded.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 { v as validateVariantClassName } from './variant-class-name.js';
import { c as createCtaRef, b as directFocus, e as directClick } from './element-interaction.js';
import { d as dispatchDomEvent, K as KolEvent } from './events.js';
import { o as onLocationChange } from './ariaCurrentService.js';
import { t as translate } from './i18n.js';
import { c as clsx } from './clsx.js';
const ariaCurrentValuePropTypeOptions = ['date', 'location', 'page', 'step', 'time', 'true', 'false'];
const validateAriaCurrentValue = (component, value) => {
watchValidator(component, `_ariaCurrentValue`, (value) => typeof value === 'string' && ariaCurrentValuePropTypeOptions.includes(value), new Set([`AriaCurrentValue {${ariaCurrentValuePropTypeOptions.join(', ')}`]), value, {
defaultValue: 'page',
});
};
const validateAriaOwns = (component, value) => {
watchString(component, '_ariaOwns', value, {
defaultValue: undefined,
});
};
const validateDownload = (component, value) => {
watchString(component, '_download', value);
};
const validateLinkCallbacks = (component, value) => {
if (typeof value === 'object' && typeof (value === null || value === void 0 ? void 0 : value.onClick) === 'function') {
component.state = Object.assign(Object.assign({}, component.state), { _on: value });
}
};
const validateLinkTarget = (component, value) => {
watchString(component, '_target', value);
};
const KolLinkWc$1 = proxyCustomElement(class KolLinkWc extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.ctaRef = createCtaRef();
this.tooltipCtrl = new TooltipController(BaseWebComponent.stateLess);
this.translateOpenLinkInTab = translate('kol-open-link-in-tab');
this.onClick = (event) => {
var _a, _b;
this.tooltipCtrl.hideTooltip();
if (this.state._disabled === true) {
event.preventDefault();
}
else {
if (typeof ((_a = this.state._on) === null || _a === void 0 ? void 0 : _a.onClick) === 'function') {
setEventTarget(event, this.ctaRef.el);
(_b = this.state._on) === null || _b === void 0 ? void 0 : _b.onClick(event, this.state._href);
}
if (this.host) {
dispatchDomEvent(this.host, KolEvent.click, this.state._href);
}
}
};
this.getRenderValues = () => {
const isExternal = typeof this.state._target === 'string' && this.state._target !== '_self';
const tagAttrs = {
href: typeof this.state._href === 'string' && this.state._href.length > 0 ? this.state._href : 'javascript:void(0);',
target: typeof this.state._target === 'string' && this.state._target.length > 0 ? this.state._target : undefined,
rel: isExternal ? 'noopener' : undefined,
download: typeof this.state._download === 'string' ? this.state._download : undefined,
};
if (this.state._hideLabel === true && !this.state._label) {
devHint(`[KolLink] An aria-label must be set when _hide-label is set.`);
}
return { isExternal, tagAttrs };
};
this._disabled = false;
this._hideLabel = false;
this._inline = true;
this._tooltipAlign = 'right';
this.state = {
_ariaCurrentValue: 'page',
_href: '',
_icons: {},
};
}
async focus() { }
async click() { }
render() {
var _a;
const { isExternal, tagAttrs } = this.getRenderValues();
const hasExpertSlot = showExpertSlot(this.state._label);
const ariaDescription = (_a = this.state._ariaDescription) === null || _a === void 0 ? void 0 : _a.trim();
return (h(Host, { key: '4ec894cf85b4e39361eb7001a0bb073a07527416' }, h("a", Object.assign({ key: '92604427272ad2f3d676ad375e18279979fd70f3', ref: this.ctaRef }, tagAttrs, { accessKey: this.state._accessKey, "aria-current": this.state._ariaCurrent, "aria-controls": this.state._ariaControls, "aria-description": ariaDescription || undefined, "aria-disabled": this.state._disabled ? 'true' : undefined, "aria-expanded": typeof this.state._ariaExpanded === 'boolean' ? String(this.state._ariaExpanded) : undefined, "aria-owns": this.state._ariaOwns, "aria-label": this.state._hideLabel && typeof this.state._label === 'string'
? `${this.state._label}${isExternal ? ` (${this.translateOpenLinkInTab})` : ''}`
: undefined, "aria-keyshortcuts": this.state._shortKey, class: clsx('kol-link', {
'kol-link--disabled': this.state._disabled === true,
'kol-link--external-link': isExternal,
'kol-link--hide-label': this.state._hideLabel === true,
[`kol-link--${this.state._variant}`]: this.state._variant !== undefined,
'kol-link--inline': this.state._inline === true,
'kol-link--standalone': this.state._inline === false,
[this.state._customClass]: this.state._variant === 'custom' && typeof this.state._customClass === 'string' && 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(SpanFC, { key: '35b2e3835032e2e906c0513d0cd859c0ab5b241f', class: "kol-link__text", badgeText: this.state._accessKey || this.state._shortKey, icons: this.state._icons, hideLabel: this.state._hideLabel, label: hasExpertSlot ? '' : this.state._label || this.state._href }, h("slot", { key: '499674edbdda752d1c2718ec4cea4574db4eb7ad', name: "expert", slot: "expert" })), isExternal && (h(IconFC, { key: 'edbebe0db35b755c1c2eaaa93969b25d19dc3fd6', class: "kol-link__icon", label: this.state._hideLabel ? '' : this.translateOpenLinkInTab, icons: 'kolicon-link-external', "aria-hidden": this.state._hideLabel }))), this.state._hideLabel === true && !hasExpertSlot && (h("div", { key: '881fe1237ddae06da94ea578fbe96211b0f0f2e8', class: "kol-link__tooltip" }, h(TooltipFC, { key: 'e5553e15922cc7f41999f05b5539e4f93113ac84', badgeText: this.state._accessKey || this.state._shortKey || '', label: typeof this.state._label === 'string' ? this.state._label : typeof this.state._href === 'string' ? this.state._href : '', id: this.tooltipCtrl.getRenderProp('id'), refFloating: this.tooltipCtrl.setTooltipElementRef })))));
}
validateAccessKey(value) {
validateAccessKey(this, value);
validateAccessAndShortKey(value, this._shortKey);
}
validateAriaCurrentValue(value) {
validateAriaCurrentValue(this, value);
}
validateAriaControls(value) {
validateAriaControls(this, value);
}
validateAriaDescription(value) {
validateAriaDescription(this, value);
}
validateAriaExpanded(value) {
validateAriaExpanded(this, value);
}
validateAriaOwns(value) {
validateAriaOwns(this, value);
}
validateCustomClass(value) {
validateCustomClass(this, value);
}
validateDisabled(value) {
validateDisabled(this, value);
}
validateDownload(value) {
validateDownload(this, value);
}
validateHideLabel(value) {
validateHideLabel(this, value);
}
validateHref(value) {
validateHref(this, value, {
required: true,
});
}
validateIcons(value) {
validateIcons(this, value);
}
validateInline(value) {
validateInline(this, value, {
defaultValue: true,
});
}
validateLabel(value) {
validateLabelWithExpertSlot(this, value);
this.tooltipCtrl.watchLabel(typeof value === 'string' ? value : undefined);
}
validateOn(value) {
validateLinkCallbacks(this, value);
}
validateRole(value) {
validateAlternativeButtonLinkRole(this, value);
}
validateShortKey(value) {
validateShortKey(this, value);
validateAccessAndShortKey(this._accessKey, value);
}
validateTabIndex(value) {
validateTabIndex(this, value);
}
validateTarget(value) {
validateLinkTarget(this, value);
}
validateTooltipAlign(value) {
validateTooltipAlign(this, value);
this.tooltipCtrl.watchAlign(value);
}
validateVariantClassName(value) {
validateVariantClassName(this, value);
}
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.validateVariantClassName(this._variant);
this.unsubscribeOnLocationChange = onLocationChange((location) => {
this.state._ariaCurrent = location === this.state._href ? this.state._ariaCurrentValue : undefined;
});
validateAccessAndShortKey(this._accessKey, this._shortKey);
this.tooltipCtrl.componentWillLoad({
label: typeof this.state._label === 'string' ? this.state._label : typeof this.state._href === 'string' ? this.state._href : '',
align: this._tooltipAlign,
});
}
componentDidRender() {
if (this.ctaRef.el) {
this.tooltipCtrl.syncListeners(undefined, this.ctaRef.el, true);
}
}
disconnectedCallback() {
if (this.unsubscribeOnLocationChange) {
this.unsubscribeOnLocationChange();
}
this.tooltipCtrl.destroy();
}
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"],
"_variant": ["validateVariantClassName"]
}; }
}, [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"],
"_variant": [1],
"state": [32],
"focus": [64],
"click": [64]
}, undefined, {
"_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"],
"_variant": ["validateVariantClassName"]
}]);
__decorate([
directFocus('ctaRef')
], KolLinkWc$1.prototype, "focus", null);
__decorate([
directClick('ctaRef')
], KolLinkWc$1.prototype, "click", null);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kol-link-wc"];
components.forEach(tagName => { switch (tagName) {
case "kol-link-wc":
if (!customElements.get(tagName)) {
customElements.define(tagName, KolLinkWc$1);
}
break;
} });
}
const KolLinkWc = KolLinkWc$1;
const defineCustomElement = defineCustomElement$1;
export { KolLinkWc, defineCustomElement };
//# sourceMappingURL=kol-link-wc.js.map
//# sourceMappingURL=kol-link-wc.js.map