@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

package/dist/collection/components/six-tile/six-tile.js

@@ -1,315 +1,314 @@
-import { Component, Element, Event, h, Method, Prop, State } from '@stencil/core';
-import { hasSlot } from '../../utils/slot';
-/**
- * @since 1.0
- * @status stable
- */
-export class SixTile {
-  constructor() {
-    /** The tile's label. */
-    this.label = '';
-    /** Flag, whether the tile is closeable. */
-    this.closeable = true;
-    /** Flag, whether the tile should cast a shadow. */
-    this.elevated = false;
-    /** Enables tile tooltip for tiles */
-    this.disableTooltip = true;
-    /** Set to true to disable the tile. */
-    this.disabled = false;
-    /** The tile's size. */
-    this.size = 'medium';
-    this.visible = true;
-    this.hasIconSlot = false;
-    this.hasLabelSlot = false;
-    this.handleCloseClickEvent = () => {
-      this.visible = false;
-      this.sixTileClose.emit();
-    };
-    this.handleClickEvent = () => {
-      this.sixTileSelected.emit();
-    };
-  }
-  /** Hides the tile */
-  async hide() {
-    this.visible = false;
-  }
-  /** Shows the tile */
-  async show() {
-    this.visible = true;
-  }
-  connectedCallback() {
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-  }
-  handleSlotChange() {
-    this.hasIconSlot = hasSlot(this.host, 'icon');
-    this.hasLabelSlot = hasSlot(this.host, 'label');
-    if (this.hasIconSlot) {
-      let slot = this.host.querySelector(`[slot="icon"]`);
-      slot.addEventListener('click', this.handleClickEvent);
-    }
-    if (this.hasLabelSlot) {
-      let slot = this.host.querySelector(`[slot="label"]`);
-      slot.addEventListener('click', this.handleClickEvent);
-    }
-  }
-  render() {
-    return (h("six-tooltip", { disabled: this.disableTooltip || this.label === '', content: this.label },
-      h("div", { part: "base", class: {
-          tile: true,
-          'tile--visible': this.visible,
-          'tile--small': this.size === 'small',
-          'tile--medium': this.size === 'medium',
-          'tile--large': this.size === 'large',
-          'tile--elevated': this.elevated,
-        } },
-        h("div", { part: "header", class: "tile__header" },
-          h("six-icon-button", { class: {
-              'tile__header--hidden': !this.closeable,
-            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })),
-        h("div", { part: "body", class: "tile__body" },
-          this.iconName && (h("six-icon", { onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)),
-          this.hasIconSlot && h("slot", { name: "icon" })),
-        h("div", { part: "footer", class: {
-            'tile__footer--small': this.size === 'small',
-            'tile__footer--medium': this.size === 'medium',
-            'tile__footer--large': this.size === 'large',
-          } },
-          this.label && (h("div", { class: {
-              '.label__footer': true,
-            }, onClick: this.handleClickEvent }, this.label)),
-          this.hasLabelSlot && h("slot", { name: "label" })))));
-  }
-  static get is() { return "six-tile"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-tile.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-tile.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The tile's label."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "iconName": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The icon's name."
-      },
-      "attribute": "icon-name",
-      "reflect": false
-    },
-    "closeable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Flag, whether the tile is closeable."
-      },
-      "attribute": "closeable",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "elevated": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Flag, whether the tile should cast a shadow."
-      },
-      "attribute": "elevated",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "disableTooltip": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Enables tile tooltip for tiles"
-      },
-      "attribute": "disable-tooltip",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to disable the tile."
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The tile's size."
-      },
-      "attribute": "size",
-      "reflect": true,
-      "defaultValue": "'medium'"
-    }
-  }; }
-  static get states() { return {
-    "visible": {},
-    "hasIconSlot": {},
-    "hasLabelSlot": {}
-  }; }
-  static get events() { return [{
-      "method": "sixTileClose",
-      "name": "six-tile-closed",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the tile was closed."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }, {
-      "method": "sixTileSelected",
-      "name": "six-tile-selected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the tile is selected."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "hide": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Hides the tile",
-        "tags": []
-      }
-    },
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Shows the tile",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-}
-const closeIconSize = (size) => {
-  return {
-    small: 'xxSmall',
-    medium: 'medium',
-    large: 'medium',
-  }[size];
-};
-const iconSize = (size) => {
-  return {
-    small: 'xLarge',
-    medium: 'xxLarge',
-    large: 'xxxLarge',
-  }[size];
-};
+import { h } from '@stencil/core';
+import { hasSlot } from '../../utils/slot';
+/**
+ * @since 1.0
+ * @status stable
+ */
+export class SixTile {
+  constructor() {
+    this.handleCloseClickEvent = () => {
+      this.visible = false;
+      this.sixTileClose.emit();
+    };
+    this.handleClickEvent = () => {
+      this.sixTileSelected.emit();
+    };
+    this.label = '';
+    this.iconName = undefined;
+    this.closeable = true;
+    this.elevated = false;
+    this.disableTooltip = true;
+    this.disabled = false;
+    this.size = 'medium';
+    this.visible = true;
+    this.hasIconSlot = false;
+    this.hasLabelSlot = false;
+  }
+  /** Hides the tile */
+  async hide() {
+    this.visible = false;
+  }
+  /** Shows the tile */
+  async show() {
+    this.visible = true;
+  }
+  connectedCallback() {
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+  }
+  handleSlotChange() {
+    this.hasIconSlot = hasSlot(this.host, 'icon');
+    this.hasLabelSlot = hasSlot(this.host, 'label');
+    if (this.hasIconSlot) {
+      let slot = this.host.querySelector(`[slot="icon"]`);
+      slot.addEventListener('click', this.handleClickEvent);
+    }
+    if (this.hasLabelSlot) {
+      let slot = this.host.querySelector(`[slot="label"]`);
+      slot.addEventListener('click', this.handleClickEvent);
+    }
+  }
+  render() {
+    return (h("six-tooltip", { disabled: this.disableTooltip || this.label === '', content: this.label }, h("div", { part: "base", class: {
+        tile: true,
+        'tile--visible': this.visible,
+        'tile--small': this.size === 'small',
+        'tile--medium': this.size === 'medium',
+        'tile--large': this.size === 'large',
+        'tile--elevated': this.elevated,
+      } }, h("div", { part: "header", class: "tile__header" }, h("six-icon-button", { class: {
+        'tile__header--hidden': !this.closeable,
+      }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), h("div", { part: "body", class: "tile__body" }, this.iconName && (h("six-icon", { onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && h("slot", { name: "icon" })), h("div", { part: "footer", class: {
+        'tile__footer--small': this.size === 'small',
+        'tile__footer--medium': this.size === 'medium',
+        'tile__footer--large': this.size === 'large',
+      } }, this.label && (h("div", { class: {
+        '.label__footer': true,
+      }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && h("slot", { name: "label" })))));
+  }
+  static get is() { return "six-tile"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["six-tile.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["six-tile.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The tile's label."
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "iconName": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The icon's name."
+        },
+        "attribute": "icon-name",
+        "reflect": false
+      },
+      "closeable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Flag, whether the tile is closeable."
+        },
+        "attribute": "closeable",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "elevated": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Flag, whether the tile should cast a shadow."
+        },
+        "attribute": "elevated",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disableTooltip": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enables tile tooltip for tiles"
+        },
+        "attribute": "disable-tooltip",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set to true to disable the tile."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The tile's size."
+        },
+        "attribute": "size",
+        "reflect": true,
+        "defaultValue": "'medium'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "visible": {},
+      "hasIconSlot": {},
+      "hasLabelSlot": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sixTileClose",
+        "name": "six-tile-closed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the tile was closed."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }, {
+        "method": "sixTileSelected",
+        "name": "six-tile-selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the tile is selected."
+        },
+        "complexType": {
+          "original": "EmptyPayload",
+          "resolved": "undefined",
+          "references": {
+            "EmptyPayload": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "hide": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Hides the tile",
+          "tags": []
+        }
+      },
+      "show": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Shows the tile",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+const closeIconSize = (size) => {
+  return {
+    small: 'xxSmall',
+    medium: 'medium',
+    large: 'medium',
+  }[size];
+};
+const iconSize = (size) => {
+  return {
+    small: 'xLarge',
+    medium: 'xxLarge',
+    large: 'xxxLarge',
+  }[size];
+};
+//# sourceMappingURL=six-tile.js.map