@kelvininc/ui-components
Version:
Kelvin UI Components
262 lines (261 loc) • 9.83 kB
JavaScript
import { Host, h } from "@stencil/core";
/**
* @part container - The link's container
* @part label - The link's label
*/
export class KvLink {
constructor() {
/** @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 is() { return "kv-link"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["link.scss"]
};
}
static get styleUrls() {
return {
"$": ["link.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"attribute": "label",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Main component label"
},
"getter": false,
"setter": false,
"reflect": true
},
"leftIcon": {
"type": "string",
"attribute": "left-icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The name of the icon to be rendered on the left side of the label"
},
"getter": false,
"setter": false,
"reflect": true
},
"rightIcon": {
"type": "string",
"attribute": "right-icon",
"mutable": false,
"complexType": {
"original": "EIconName",
"resolved": "EIconName",
"references": {
"EIconName": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EIconName"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The name of the icon to be rendered on the right side of the label"
},
"getter": false,
"setter": false,
"reflect": true
},
"subtitle": {
"type": "string",
"attribute": "subtitle",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Description for the label"
},
"getter": false,
"setter": false,
"reflect": true
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the link are disabled. Default: false"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"inline": {
"type": "boolean",
"attribute": "inline",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Whether the link is displayed inline. Default: false"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"href": {
"type": "string",
"attribute": "href",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The anchor's link to open when clicking"
},
"getter": false,
"setter": false,
"reflect": true
},
"target": {
"type": "string",
"attribute": "target",
"mutable": false,
"complexType": {
"original": "EAnchorTarget",
"resolved": "EAnchorTarget.BrowserDefault | EAnchorTarget.NewTab | EAnchorTarget.Parent | EAnchorTarget.Top",
"references": {
"EAnchorTarget": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::EAnchorTarget"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The anchor's target"
},
"getter": false,
"setter": false,
"reflect": true
}
};
}
static get events() {
return [{
"method": "labelClick",
"name": "labelClick",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when clicking the label"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}];
}
}