@six-group/ui-library 0.0.0-insider.ebd822a → 0.0.0-insider.f015905

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

@@ -1,314 +1,315 @@
-import { h } from '@stencil/core';
-import { hasSlot } from '../../utils/slot';
+import { h } from "@stencil/core";
+import { getSlot, 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"
+    constructor() {
+        this.handleSlotChange = () => {
+            this.hasIconSlot = hasSlot(this.host, 'icon');
+            this.hasLabelSlot = hasSlot(this.host, 'label');
+            if (this.hasIconSlot) {
+                const slot = getSlot(this.host, 'icon');
+                slot === null || slot === void 0 ? void 0 : slot.addEventListener('click', this.handleClickEvent);
             }
-          }
-        }
-      }, {
-        "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"
+            if (this.hasLabelSlot) {
+                const slot = getSlot(this.host, 'label');
+                slot === null || slot === void 0 ? void 0 : slot.addEventListener('click', this.handleClickEvent);
             }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+        };
+        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;
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    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": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "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'"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hides the tile",
-          "tags": []
-        }
-      },
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+        };
+    }
+    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",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "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",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the tile",
+                    "tags": []
+                }
+            },
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows the tile",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the tile",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
+        };
+    }
+    static get elementRef() { return "host"; }
 }
 const closeIconSize = (size) => {
-  return {
-    small: 'xxSmall',
-    medium: 'medium',
-    large: 'medium',
-  }[size];
+    return {
+        small: 'xxSmall',
+        medium: 'medium',
+        large: 'medium',
+    }[size];
 };
 const iconSize = (size) => {
-  return {
-    small: 'xLarge',
-    medium: 'xxLarge',
-    large: 'xxxLarge',
-  }[size];
+    return {
+        small: 'xLarge',
+        medium: 'xxLarge',
+        large: 'xxxLarge',
+    }[size];
 };
 //# sourceMappingURL=six-tile.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"six-tile.js","sourceRoot":"","sources":["../../../src/components/six-tile/six-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName;\n\n  /** Flag, whether the tile is closeable. */\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  @Prop() disableTooltip: boolean = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  handleSlotChange() {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      let slot: HTMLElement = this.host.querySelector(`[slot=\"icon\"]`);\n      slot.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      let slot: HTMLElement = this.host.querySelector(`[slot=\"label\"]`);\n      slot.addEventListener('click', this.handleClickEvent);\n    }\n  }\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"]}
+{"version":3,"file":"six-tile.js","sourceRoot":"","sources":["../../../src/components/six-tile/six-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n */\n\n@Component({\n  tag: 'six-tile',\n  styleUrl: 'six-tile.scss',\n  shadow: true,\n})\nexport class SixTile {\n  @Element() host!: HTMLSixTileElement;\n\n  /** The tile's label. */\n  @Prop() label = '';\n\n  /** The icon's name. */\n  @Prop() iconName?: string;\n\n  /** Flag, whether the tile is closeable. */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() closeable = true;\n\n  /** Flag, whether the tile should cast a shadow. */\n  @Prop() elevated = false;\n\n  /** Enables tile tooltip for tiles */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() disableTooltip = true;\n\n  /** Set to true to disable the tile. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The tile's size. */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  @State() visible = true;\n\n  /** Emitted when the tile was closed. */\n  @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the tile is selected. */\n  @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n  /** Hides the tile */\n  @Method()\n  async hide() {\n    this.visible = false;\n  }\n\n  /** Shows the tile */\n  @Method()\n  async show() {\n    this.visible = true;\n  }\n\n  @State() hasIconSlot = false;\n\n  @State() hasLabelSlot = false;\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange = () => {\n    this.hasIconSlot = hasSlot(this.host, 'icon');\n    this.hasLabelSlot = hasSlot(this.host, 'label');\n\n    if (this.hasIconSlot) {\n      const slot = getSlot(this.host, 'icon');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n\n    if (this.hasLabelSlot) {\n      const slot = getSlot(this.host, 'label');\n      slot?.addEventListener('click', this.handleClickEvent);\n    }\n  };\n\n  render() {\n    return (\n      <six-tooltip disabled={this.disableTooltip || this.label === ''} content={this.label}>\n        <div\n          part=\"base\"\n          class={{\n            tile: true,\n            'tile--visible': this.visible,\n            'tile--small': this.size === 'small',\n            'tile--medium': this.size === 'medium',\n            'tile--large': this.size === 'large',\n            'tile--elevated': this.elevated,\n          }}\n        >\n          <div part=\"header\" class=\"tile__header\">\n            <six-icon-button\n              class={{\n                'tile__header--hidden': !this.closeable,\n              }}\n              name=\"close\"\n              size={closeIconSize(this.size)}\n              onClick={this.handleCloseClickEvent}\n            />\n          </div>\n\n          <div part=\"body\" class=\"tile__body\">\n            {this.iconName && (\n              <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n                {this.iconName}\n              </six-icon>\n            )}\n            {this.hasIconSlot && <slot name=\"icon\"></slot>}\n          </div>\n\n          <div\n            part=\"footer\"\n            class={{\n              'tile__footer--small': this.size === 'small',\n              'tile__footer--medium': this.size === 'medium',\n              'tile__footer--large': this.size === 'large',\n            }}\n          >\n            {this.label && (\n              <div\n                class={{\n                  '.label__footer': true,\n                }}\n                onClick={this.handleClickEvent}\n              >\n                {this.label}\n              </div>\n            )}\n            {this.hasLabelSlot && <slot name=\"label\"></slot>}\n          </div>\n        </div>\n      </six-tooltip>\n    );\n  }\n\n  private handleCloseClickEvent = () => {\n    this.visible = false;\n    this.sixTileClose.emit();\n  };\n\n  private handleClickEvent = () => {\n    this.sixTileSelected.emit();\n  };\n}\n\nconst closeIconSize = (size: string) => {\n  return {\n    small: 'xxSmall',\n    medium: 'medium',\n    large: 'medium',\n  }[size] as 'xSmall' | 'medium';\n};\n\nconst iconSize = (size: string) => {\n  return {\n    small: 'xLarge',\n    medium: 'xxLarge',\n    large: 'xxxLarge',\n  }[size] as 'xLarge' | 'xxLarge' | 'xxxLarge';\n};\n"]}