@kelvininc/ui-components
Version:
Kelvin UI Components
62 lines (58 loc) • 6.47 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, K as h, L as Host } from './p-BP5CxQcH.js';
import { d as defineCustomElement$1 } from './p-DQ7v6WT-.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 = /*@__PURE__*/ proxyCustomElement(class KvLink extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
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))));
}
static get style() { return linkCss; }
}, [257, "kv-link", {
"label": [513],
"leftIcon": [513, "left-icon"],
"rightIcon": [513, "right-icon"],
"subtitle": [513],
"disabled": [516],
"inline": [516],
"href": [513],
"target": [513]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-link", "kv-icon"];
components.forEach(tagName => { switch (tagName) {
case "kv-link":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvLink);
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvLink as K, defineCustomElement as d };