@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
505 lines (504 loc) • 20.3 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { __decorate } from "tslib";
import { h } from "@stencil/core";
import { KolLinkWcTag } from "../../core/component-names";
import { createCtaRef, delegateFocus } from "../../utils/element-interaction";
export class KolLink {
constructor() {
this.ctaRef = createCtaRef();
this._disabled = false;
this._hideLabel = false;
this._inline = true;
this._tooltipAlign = 'right';
}
async focus() { }
render() {
return (h(KolLinkWcTag, { key: '081aa2e094a70a0d88ce4ea6294b6e55844a0f8b', ref: this.ctaRef, _accessKey: this._accessKey, _ariaCurrentValue: this._ariaCurrentValue, _ariaControls: this._ariaControls, _ariaDescription: this._ariaDescription, _ariaExpanded: this._ariaExpanded, _disabled: this._disabled, _download: this._download, _hideLabel: this._hideLabel, _href: this._href, _icons: this._icons, _inline: this._inline, _label: this._label, _on: this._on, _shortKey: this._shortKey, _target: this._target, _tooltipAlign: this._tooltipAlign, _variant: this._variant }, h("slot", { key: '6209a78f4c4ad8b22855f4297964d6a722c1362e', name: "expert", slot: "expert" })));
}
static get is() { return "kol-link"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"default": ["./style.scss"]
};
}
static get styleUrls() {
return {
"default": ["style.css"]
};
}
static get properties() {
return {
"_accessKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AccessKeyPropType",
"resolved": "string | undefined",
"references": {
"AccessKeyPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::AccessKeyPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the key combination that can be used to trigger or focus the component's interactive element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_access-key"
},
"_ariaCurrentValue": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AriaCurrentValuePropType",
"resolved": "\"date\" | \"false\" | \"location\" | \"page\" | \"step\" | \"time\" | \"true\" | undefined",
"references": {
"AriaCurrentValuePropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::AriaCurrentValuePropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the value for the aria-current attribute."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_aria-current-value"
},
"_ariaControls": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_aria-controls"
},
"_ariaDescription": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AriaDescriptionPropType",
"resolved": "string | undefined",
"references": {
"AriaDescriptionPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::AriaDescriptionPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the value for the aria-description attribute."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_aria-description"
},
"_ariaExpanded": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "TODO",
"text": ": Change type back to `AriaExpandedPropType` after Stencil#4663 has been resolved."
}],
"text": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_aria-expanded"
},
"_disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Makes the element not focusable and ignore all events."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_disabled",
"defaultValue": "false"
},
"_download": {
"type": "string",
"mutable": false,
"complexType": {
"original": "DownloadPropType",
"resolved": "string | undefined",
"references": {
"DownloadPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::DownloadPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Tells the browser that the link contains a file. Optionally sets the filename."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_download"
},
"_hideLabel": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "TODO",
"text": ": Change type back to `HideLabelPropType` after Stencil#4663 has been resolved."
}],
"text": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_hide-label",
"defaultValue": "false"
},
"_href": {
"type": "string",
"mutable": false,
"complexType": {
"original": "HrefPropType",
"resolved": "string",
"references": {
"HrefPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::HrefPropType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Sets the target URI of the link or citation source."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_href"
},
"_icons": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Stringified<KoliBriIconsProp>",
"resolved": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined",
"references": {
"Stringified": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::Stringified"
},
"KoliBriIconsProp": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::KoliBriIconsProp"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_icons"
},
"_inline": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "InlinePropType",
"resolved": "boolean | undefined",
"references": {
"InlinePropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::InlinePropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_inline",
"defaultValue": "true"
},
"_label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "LabelWithExpertSlotPropType",
"resolved": "string | undefined",
"references": {
"LabelWithExpertSlotPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::LabelWithExpertSlotPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_label"
},
"_on": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "LinkOnCallbacksPropType",
"resolved": "undefined | { onClick?: EventValueOrEventCallback<Event, string> | undefined; }",
"references": {
"LinkOnCallbacksPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::LinkOnCallbacksPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the callback functions for links."
},
"getter": false,
"setter": false
},
"_role": {
"type": "string",
"mutable": false,
"complexType": {
"original": "AlternativeButtonLinkRolePropType",
"resolved": "\"tab\" | \"treeitem\" | undefined",
"references": {
"AlternativeButtonLinkRolePropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::AlternativeButtonLinkRolePropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "deprecated",
"text": "We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future."
}],
"text": "Defines the role of the components primary element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_role"
},
"_shortKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ShortKeyPropType",
"resolved": "string | undefined",
"references": {
"ShortKeyPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::ShortKeyPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_short-key"
},
"_target": {
"type": "string",
"mutable": false,
"complexType": {
"original": "LinkTargetPropType",
"resolved": "string | undefined",
"references": {
"LinkTargetPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::LinkTargetPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines where to open the link."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_target"
},
"_tooltipAlign": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TooltipAlignPropType",
"resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"references": {
"TooltipAlignPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::TooltipAlignPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines where to show the Tooltip preferably: top, right, bottom or left."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_tooltip-align",
"defaultValue": "'right'"
},
"_variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "VariantClassNamePropType",
"resolved": "string | undefined",
"references": {
"VariantClassNamePropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::VariantClassNamePropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines which variant should be used for presentation."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_variant"
}
};
}
static get methods() {
return {
"focus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Sets focus on the internal element.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
}
__decorate([
delegateFocus('ctaRef')
], KolLink.prototype, "focus", null);
//# sourceMappingURL=shadow.js.map