@limetech/lime-elements 36.1.0-next.2 → 36.1.0-next.21

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

@@ -0,0 +1,194 @@
+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, using the `href` property.
+ *
+ * By default, this navigation will happen within the same browser tab.
+ * However, it is possible to override that behavior, using the `target` 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 = () => {
+      if (this.label && this.linkTitle) {
+        return this.label + '. ' + this.linkTitle;
+      }
+      if (this.label) {
+        return this.label;
+      }
+      if (this.linkTitle) {
+        return this.linkTitle;
+      }
+      return undefined;
+    };
+    this.renderNotification = () => {
+      if (this.badge) {
+        return h("limel-badge", { label: this.badge });
+      }
+    };
+    this.icon = undefined;
+    this.label = null;
+    this.linkTitle = null;
+    this.disabled = false;
+    this.href = null;
+    this.target = '_self';
+    this.badge = undefined;
+  }
+  render() {
+    return [
+      h("a", { "aria-disabled": this.disabled, href: this.href, target: this.target, tabindex: "0", "aria-label": this.getAriaLabel(), title: this.linkTitle }, 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"
+      },
+      "linkTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The `title` tag of the hyperlink, which can be used to\nprovide additional information about the link.\nIt improves accessibility both for sighted users\nand users with assistive technologies."
+        },
+        "attribute": "link-title",
+        "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"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The url that the shortcut leads to."
+        },
+        "attribute": "href",
+        "reflect": true,
+        "defaultValue": "null"
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_self' | '_blank' | '_parent' | '_top'",
+          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Where to load the linked URL, as the name for a browsing context:\n- `_self`: in the current browsing context. (Default)\n- `_blank`: in a new tab.\n- `_parent`: in the parent browsing context of the current one.\nIf no parent, behaves as `_self`.\n- `_top`: the topmost browsing context (the \"highest\" context\nthat's an ancestor of the current one). If no ancestors, behaves as `_self`."
+        },
+        "attribute": "target",
+        "reflect": true,
+        "defaultValue": "'_self'"
+      },
+      "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
+      }
+    };
+  }
+}