@limetech/lime-elements
Version:
167 lines (166 loc) • 5.32 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
* @exampleComponent limel-example-shortcut-notification
* @exampleComponent limel-example-shortcut-styling
* @exampleComponent limel-example-shortcut-with-click-handler
*/
export class Shortcut {
constructor() {
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 });
}
};
this.icon = undefined;
this.label = null;
this.disabled = false;
this.badge = undefined;
this.link = undefined;
}
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, { onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { "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", { name: this.icon }), h("limel-3d-hover-effect-glow", null)), 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."
},
"attribute": "icon",
"reflect": true
},
"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."
},
"attribute": "label",
"reflect": true,
"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."
},
"attribute": "disabled",
"reflect": true,
"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."
},
"attribute": "badge",
"reflect": true
},
"link": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Link",
"resolved": "Link",
"references": {
"Link": {
"location": "import",
"path": "../../global/shared-types/link.types"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "If supplied, the shortcut will be a clickable link."
}
}
};
}
static get elementRef() { return "host"; }
}
//# sourceMappingURL=shortcut.js.map