@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

package/dist/collection/components/stzh-link/stzh-link.js

@@ -1,427 +1,427 @@
-import { Host, Fragment, h } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
-/**
- * @slot - Slot for text content
- * @slot icon - Slot for icon element
- */
-export class StzhLink {
-  constructor() {
-    /** Icon (use instead of icon slot) */
-    this.icon = "";
-    /** Icon Position */
-    this.iconPosition = "left";
-    /** Size variant */
-    this.size = "default";
-    /** href attribute of the link */
-    this.href = "";
-    /** target if the button is used as link (if href used)  */
-    this.target = "";
-    /** type of the button, if used as button (if no href used) */
-    this.type = "button";
-    /** Variant style */
-    this.variant = "default";
-    /** Badge text */
-    this.badge = "";
-    /** Badge position */
-    this.badgePosition = "icon";
-    /** Disabled status */
-    this.disabled = false;
-    /** Active status */
-    this.active = false;
-    /** Whether only an icon is used inside the link */
-    this.iconOnly = false;
-    /** Label */
-    this.label = "";
-    this.onFocus = (event) => {
-      const focusEvent = new FocusEvent("focus", {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(focusEvent);
-      this.stzhFocus.emit({
-        component: "stzh-link",
-        originalEvent: event
-      });
-    };
-    this.onBlur = (event) => {
-      const blurEvent = new FocusEvent("blur", {
-        view: window,
-        bubbles: false,
-        cancelable: false
-      });
-      this.element.dispatchEvent(blurEvent);
-      this.stzhBlur.emit({
-        component: "stzh-link",
-        originalEvent: event
-      });
-    };
-  }
-  /** Focus link */
-  async setFocus() {
-    this.link.focus();
-  }
-  renderIcon() {
-    return (h("div", { class: "stzh-link__icon-wrapper" }, this.icon ?
-      h("stzh-icon", { class: "stzh-link__icon", name: this.icon })
-      :
-        h("slot", { name: "icon" }), this.badge &&
-      h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
-  }
-  renderContent() {
-    return (h("div", { class: "stzh-link__text" }, this.label ? this.label : h("slot", null)));
-  }
-  renderInner(iconUsed) {
-    return (h(Fragment, null, h("div", { class: "stzh-link__inner" }, this.iconPosition === "left" && this.renderIcon(), this.renderContent(), this.iconPosition === "right" && this.renderIcon()), this.badge && !iconUsed &&
-      h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
-  }
-  render() {
-    const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
-    const classes = {
-      "stzh-link": true,
-      "stzh-link--has-icon": iconUsed,
-      "stzh-link--has-icon-only": this.iconOnly,
-      "stzh-link--has-badge": !!this.badge,
-      "stzh-link--is-disabled": this.disabled,
-      "stzh-link--is-active": this.active,
-      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,
-      [`stzh-link--size-${this.size}`]: !!this.size,
-      [`stzh-link--${this.variant}`]: !!this.variant
-    };
-    return (h(Host, null, this.href ?
-      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, target: this.target, class: classes, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
-      :
-        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
-  }
-  static get is() { return "stzh-link"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["stzh-link.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["stzh-link.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "icon": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon (use instead of icon slot)"
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "iconPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"left\" | \"right\"",
-          "resolved": "\"left\" | \"right\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Icon Position"
-        },
-        "attribute": "icon-position",
-        "reflect": true,
-        "defaultValue": "\"left\""
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"default\" | \"small\"",
-          "resolved": "\"default\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size variant"
-        },
-        "attribute": "size",
-        "reflect": true,
-        "defaultValue": "\"default\""
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "href attribute of the link"
-        },
-        "attribute": "href",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "target if the button is used as link (if href used)"
-        },
-        "attribute": "target",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"button\" | \"submit\" | \"reset\"",
-          "resolved": "\"button\" | \"reset\" | \"submit\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "type of the button, if used as button (if no href used)"
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "\"button\""
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"default\" | \"secondary\"",
-          "resolved": "\"default\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Variant style"
-        },
-        "attribute": "variant",
-        "reflect": true,
-        "defaultValue": "\"default\""
-      },
-      "badge": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Badge text"
-        },
-        "attribute": "badge",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "badgePosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"icon\" | \"link\"",
-          "resolved": "\"icon\" | \"link\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Badge position"
-        },
-        "attribute": "badge-position",
-        "reflect": true,
-        "defaultValue": "\"icon\""
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disabled status"
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Active status"
-        },
-        "attribute": "active",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "iconOnly": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether only an icon is used inside the link"
-        },
-        "attribute": "icon-only",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label"
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "linkAccesskey": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Access key of link (usually a number e.g. 1)"
-        },
-        "attribute": "link-accesskey",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "stzhFocus",
-        "name": "stzhFocus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Focus event"
-        },
-        "complexType": {
-          "original": "StzhLinkFocusEvent",
-          "resolved": "{ component: \"stzh-link\"; originalEvent: FocusEvent; }",
-          "references": {
-            "StzhLinkFocusEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }, {
-        "method": "stzhBlur",
-        "name": "stzhBlur",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Input blur event"
-        },
-        "complexType": {
-          "original": "StzhLinkBlurEvent",
-          "resolved": "{ component: \"stzh-link\"; originalEvent: FocusEvent; }",
-          "references": {
-            "StzhLinkBlurEvent": {
-              "location": "import",
-              "path": "../../index"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Focus link",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
-}
+import { Host, Fragment, h } from "@stencil/core";
+import { hasSlot } from "../../utils/utils";
+/**
+ * @slot - Slot for text content
+ * @slot icon - Slot for icon element
+ */
+export class StzhLink {
+  constructor() {
+    /** Icon (use instead of icon slot) */
+    this.icon = "";
+    /** Icon Position */
+    this.iconPosition = "left";
+    /** Size variant */
+    this.size = "default";
+    /** href attribute of the link */
+    this.href = "";
+    /** target if the button is used as link (if href used)  */
+    this.target = "";
+    /** type of the button, if used as button (if no href used) */
+    this.type = "button";
+    /** Variant style */
+    this.variant = "default";
+    /** Badge text */
+    this.badge = "";
+    /** Badge position */
+    this.badgePosition = "icon";
+    /** Disabled status */
+    this.disabled = false;
+    /** Active status */
+    this.active = false;
+    /** Whether only an icon is used inside the link */
+    this.iconOnly = false;
+    /** Label */
+    this.label = "";
+    this.onFocus = (event) => {
+      const focusEvent = new FocusEvent("focus", {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(focusEvent);
+      this.stzhFocus.emit({
+        component: "stzh-link",
+        originalEvent: event
+      });
+    };
+    this.onBlur = (event) => {
+      const blurEvent = new FocusEvent("blur", {
+        view: window,
+        bubbles: false,
+        cancelable: false
+      });
+      this.element.dispatchEvent(blurEvent);
+      this.stzhBlur.emit({
+        component: "stzh-link",
+        originalEvent: event
+      });
+    };
+  }
+  /** Focus link */
+  async setFocus() {
+    this.link.focus();
+  }
+  renderIcon() {
+    return (h("div", { class: "stzh-link__icon-wrapper" }, this.icon ?
+      h("stzh-icon", { class: "stzh-link__icon", name: this.icon })
+      :
+        h("slot", { name: "icon" }), this.badge &&
+      h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
+  }
+  renderContent() {
+    return (h("div", { class: "stzh-link__text" }, this.label ? this.label : h("slot", null)));
+  }
+  renderInner(iconUsed) {
+    return (h(Fragment, null, h("div", { class: "stzh-link__inner" }, this.iconPosition === "left" && this.renderIcon(), this.renderContent(), this.iconPosition === "right" && this.renderIcon()), this.badge && !iconUsed &&
+      h("stzh-badge", { class: "stzh-link__badge", label: this.badge })));
+  }
+  render() {
+    const iconUsed = hasSlot(this.element, "icon") || !!this.icon;
+    const classes = {
+      "stzh-link": true,
+      "stzh-link--has-icon": iconUsed,
+      "stzh-link--has-icon-only": this.iconOnly,
+      "stzh-link--has-badge": !!this.badge,
+      "stzh-link--is-disabled": this.disabled,
+      "stzh-link--is-active": this.active,
+      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,
+      [`stzh-link--size-${this.size}`]: !!this.size,
+      [`stzh-link--${this.variant}`]: !!this.variant
+    };
+    return (h(Host, null, this.href ?
+      h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, target: this.target, class: classes, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
+      :
+        h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, accessKey: this.linkAccesskey, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
+  }
+  static get is() { return "stzh-link"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stzh-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stzh-link.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon (use instead of icon slot)"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"right\"",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon Position"
+        },
+        "attribute": "icon-position",
+        "reflect": true,
+        "defaultValue": "\"left\""
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"small\"",
+          "resolved": "\"default\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variant"
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "href attribute of the link"
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "target if the button is used as link (if href used)"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"button\" | \"submit\" | \"reset\"",
+          "resolved": "\"button\" | \"reset\" | \"submit\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "type of the button, if used as button (if no href used)"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"button\""
+      },
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"secondary\"",
+          "resolved": "\"default\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Variant style"
+        },
+        "attribute": "variant",
+        "reflect": true,
+        "defaultValue": "\"default\""
+      },
+      "badge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Badge text"
+        },
+        "attribute": "badge",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "badgePosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"icon\" | \"link\"",
+          "resolved": "\"icon\" | \"link\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Badge position"
+        },
+        "attribute": "badge-position",
+        "reflect": true,
+        "defaultValue": "\"icon\""
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disabled status"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Active status"
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "iconOnly": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether only an icon is used inside the link"
+        },
+        "attribute": "icon-only",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Label"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "linkAccesskey": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Access key of link (usually a number e.g. 1)"
+        },
+        "attribute": "link-accesskey",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "stzhFocus",
+        "name": "stzhFocus",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Focus event"
+        },
+        "complexType": {
+          "original": "StzhLinkFocusEvent",
+          "resolved": "{ component: \"stzh-link\"; originalEvent: FocusEvent; }",
+          "references": {
+            "StzhLinkFocusEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }, {
+        "method": "stzhBlur",
+        "name": "stzhBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Input blur event"
+        },
+        "complexType": {
+          "original": "StzhLinkBlurEvent",
+          "resolved": "{ component: \"stzh-link\"; originalEvent: FocusEvent; }",
+          "references": {
+            "StzhLinkBlurEvent": {
+              "location": "import",
+              "path": "../../index"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Focus link",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "element"; }
+}