@limetech/lime-elements 36.1.0-next.8 → 36.1.0

package/dist/collection/components/shortcut/shortcut.js

@@ -0,0 +1,161 @@
+import { h } from '@stencil/core';
+/**
+ * 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;
+      }
+      return undefined;
+    };
+    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;
+  }
+  render() {
+    var _a, _b, _c;
+    return [
+      h("a", { "aria-disabled": this.disabled, href: (_a = this.link) === null || _a === void 0 ? void 0 : _a.href, target: (_b = this.link) === null || _b === void 0 ? void 0 : _b.target, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_c = this.link) === null || _c === void 0 ? void 0 : _c.title }, h("limel-icon", { name: this.icon })),
+      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": "@limetech/lime-elements"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If supplied, the shortcut will be a clickable link."
+        }
+      }
+    };
+  }
+}