@limetech/lime-elements
Version:
181 lines (180 loc) • 7.05 kB
JavaScript
import { h, Host } from "@stencil/core";
import { getRel } from "../../util/link-helper";
import { getMouseEventHandlers } from "../../util/3d-tilt-hover-effect";
/**
* This component can be used on places such as a start page or a dashboard.
* Clicking on the component should navigate the user to a new screen,
* to which you need to provide a URL, by specifying an `href` for the `link` property.
*
* By default, this navigation will happen within the same browser tab.
* However, it is possible to override that behavior, by specifying a `target`
* for the `link` property
*
* @exampleComponent limel-example-shortcut-basic
* @exampleComponent limel-example-shortcut-notification
* @exampleComponent limel-example-shortcut-styling
* @exampleComponent limel-example-shortcut-with-click-handler
*/
export class Shortcut {
constructor() {
/**
* The text to show below the shortcut. Long label will be truncated.
*/
this.label = null;
/**
* Set to `true` if shortcut is disabled.
*/
this.disabled = false;
this.renderLabel = () => {
if (this.label) {
return h("span", { "aria-hidden": "true" }, this.label);
}
};
this.getAriaLabel = () => {
var _a, _b;
if (this.label && ((_a = this.link) === null || _a === void 0 ? void 0 : _a.title)) {
return this.label + '. ' + this.link.title;
}
if (this.label) {
return this.label;
}
if ((_b = this.link) === null || _b === void 0 ? void 0 : _b.title) {
return this.link.title;
}
};
this.renderNotification = () => {
if (this.badge) {
return h("limel-badge", { label: this.badge });
}
};
}
componentWillLoad() {
const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
this.handleMouseEnter = handleMouseEnter;
this.handleMouseLeave = handleMouseLeave;
}
render() {
var _a, _b, _c, _d, _e;
const rel = getRel((_a = this.link) === null || _a === void 0 ? void 0 : _a.target, (_b = this.link) === null || _b === void 0 ? void 0 : _b.rel);
return (h(Host, { key: '68fa485e1c6552337de3e8304dcb14bd2056f3cc', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'e83e54fcd7776e92938795a2f623e23df14985b0', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: 'b1aa7fec058ef958c71b0a01fc3c1340e66a0422', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '59132d5f6b5d99f38bba8143a2ff39166dce8648' })), this.renderLabel(), this.renderNotification()));
}
static get is() { return "limel-shortcut"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["shortcut.scss"]
};
}
static get styleUrls() {
return {
"$": ["shortcut.css"]
};
}
static get properties() {
return {
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name of icon for the shortcut."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "icon"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The text to show below the shortcut. Long label will be truncated."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "label",
"defaultValue": "null"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set to `true` if shortcut is disabled."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled",
"defaultValue": "false"
},
"badge": {
"type": "any",
"mutable": false,
"complexType": {
"original": "number | string",
"resolved": "number | string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If specified, will display a notification badge\non the shortcut."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "badge"
},
"link": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Link",
"resolved": "Link",
"references": {
"Link": {
"location": "import",
"path": "../../global/shared-types/link.types",
"id": "src/global/shared-types/link.types.ts::Link",
"referenceLocation": "Link"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If supplied, the shortcut will be a clickable link."
},
"getter": false,
"setter": false
}
};
}
static get elementRef() { return "host"; }
}