@kelvininc/ui-components
Version:
Kelvin UI Components
32 lines (28 loc) • 5.51 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BOTigrTZ.js';
import './wizard.types-COrzvkrr.js';
const linkCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host .link-container{width:fit-content;display:flex;flex-direction:column}:host .link-container--disabled{cursor:not-allowed;user-select:none}:host .link-container .label{display:inline-flex;align-items:center;gap:var(--link-gap-default);outline:none;font-family:Proxima Nova;font-weight:400;font-size:14px;line-height:20px;letter-spacing:0;cursor:pointer;user-select:none;pointer-events:all;font-weight:var(--kv-link-font-weight, var(--font-weight-regular));pointer-events:var(--kv-link-pointer-events, all);cursor:var(--kv-link-cursor, pointer);color:var(--link-label-default);text-decoration:none;transition:text-decoration 0.2s ease}:host .link-container .label kv-icon,:host .link-container .label ::slotted(kv-icon){--icon-color:currentColor;--icon-width:var(--link-icon-size-default);--icon-height:var(--link-icon-size-default)}:host .link-container .label:visited:not(.label--disabled){color:var(--link-label-visited)}:host .link-container .label:focus:not(.label--disabled),:host .link-container .label:hover:not(.label--disabled){color:var(--link-label-hover);text-decoration:underline;text-decoration-thickness:var(--link-decoration-thickness-default);text-decoration-color:var(--link-decoration-color-hover)}:host .link-container .label:focus:not(.label--disabled) kv-icon,:host .link-container .label:focus:not(.label--disabled) ::slotted(kv-icon),:host .link-container .label:hover:not(.label--disabled) kv-icon,:host .link-container .label:hover:not(.label--disabled) ::slotted(kv-icon){--icon-color:var(--link-icon-color-hover)}:host .link-container .label--disabled{color:var(--link-label-disabled);pointer-events:none}:host .link-container .label--disabled kv-icon,:host .link-container .label--disabled ::slotted(kv-icon){--icon-color:var(--link-icon-color-disabled)}:host .link-container .label--inline{text-decoration:underline;text-decoration-thickness:var(--inline-link-decoration-thickness-default);text-decoration-color:var(--inline-link-decoration-color-default);color:var(--inline-link-label-default)}:host .link-container .label--inline kv-icon,:host .link-container .label--inline ::slotted(kv-icon){--icon-color:currentColor;--icon-width:var(--inline-link-icon-size-default);--icon-height:var(--inline-link-icon-size-default)}:host .link-container .label--inline:visited:not(.label--disabled){color:var(--inline-link-label-visited);text-decoration-color:var(--inline-link-decoration-color-visited)}:host .link-container .label--inline:focus:not(.label--disabled),:host .link-container .label--inline:hover:not(.label--disabled){color:var(--inline-link-label-hover);text-decoration-color:var(--inline-link-decoration-color-hover)}:host .link-container .label--inline:focus:not(.label--disabled) kv-icon,:host .link-container .label--inline:focus:not(.label--disabled) ::slotted(kv-icon),:host .link-container .label--inline:hover:not(.label--disabled) kv-icon,:host .link-container .label--inline:hover:not(.label--disabled) ::slotted(kv-icon){--icon-color:var(--inline-link-icon-color-hover)}:host .link-container .label--inline.label--disabled{color:var(--inline-link-label-disabled);text-decoration-color:var(--inline-link-decoration-color-disabled)}:host .link-container .label--inline.label--disabled kv-icon,:host .link-container .label--inline.label--disabled ::slotted(kv-icon){--icon-color:var(--inline-link-icon-color-disabled)}:host .link-container .subtitle{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--text-container-neutral-subtle)}";
const KvLink = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.labelClick = createEvent(this, "labelClick", 7);
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.inline = false;
this.onLabelClick = event => {
this.labelClick.emit(event);
};
}
render() {
return (h(Host, { key: '9f661c069d7fd6127aaf5608725ce16db3272743' }, h("div", { key: 'f8cd4fc5f0462cfaf871b8891b90dff228397cc9', class: {
'link-container': true,
'link-container--disabled': this.disabled
}, part: "container" }, h("a", { key: 'd632ff195bfbcfc9ab09e4c4fe2685c6c62ed745', tabIndex: this.disabled ? -1 : 0, class: {
'label': true,
'label--disabled': this.disabled,
'label--inline': this.inline
}, href: this.href, target: this.target, onClick: this.onLabelClick, part: "label" }, h("slot", { key: '5f9829fdb5db7226a50f54e651ce6eb98f3b5a87', name: "left" }, this.leftIcon && h("kv-icon", { key: 'de48db0d50116de04661f67f1f43162ccca8d95d', name: this.leftIcon })), this.label && h("span", { key: 'dc0ea8c41a59fec9ece6fa4f205935027dbe61dd', part: "label-text" }, this.label), h("slot", { key: '1e93edb1e9edeb7e23f66705111ddf4b5e6b7dd1', name: "right" }, this.rightIcon && h("kv-icon", { key: 'b9bb250af26ddc9101ea0ca1893e28c68eaa762f', name: this.rightIcon }))), this.subtitle && h("div", { key: '20d8397868a2824ac222a588b8d037592e5ecf38', class: "subtitle" }, this.subtitle))));
}
};
KvLink.style = linkCss;
export { KvLink as kv_link };