@six-group/ui-library 4.0.3 → 4.1.0

package/dist/esm/six-tile.entry.js

@@ -1,87 +1,87 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8a74f992.js';
-import { h as hasSlot, g as getSlot } from './slot-ad36df3a.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-79d4ef67.js';
+import { h as hasSlot, g as getSlot } from './slot-56531341.js';
 
-const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-elevation-8dp)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
+const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
 
 const SixTile = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sixTileClose = createEvent(this, "six-tile-closed", 7);
-    this.sixTileSelected = createEvent(this, "six-tile-selected", 7);
-    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);
-      }
-      if (this.hasLabelSlot) {
-        const slot = getSlot(this.host, 'label');
-        slot === null || slot === void 0 ? void 0 : slot.addEventListener('click', this.handleClickEvent);
-      }
-    };
-    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" })))));
-  }
-  get host() { return getElement(this); }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.sixTileClose = createEvent(this, "six-tile-closed", 7);
+        this.sixTileSelected = createEvent(this, "six-tile-selected", 7);
+        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);
+            }
+            if (this.hasLabelSlot) {
+                const slot = getSlot(this.host, 'label');
+                slot === null || slot === void 0 ? void 0 : slot.addEventListener('click', this.handleClickEvent);
+            }
+        };
+        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" })))));
+    }
+    get host() { return getElement(this); }
 };
 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];
 };
 SixTile.style = sixTileCss;
 

package/dist/esm/six-tile.entry.js.map

@@ -1 +1 @@
-{"file":"six-tile.entry.js","mappings":"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","names":[],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-elevation-8dp);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","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  @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 = 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"],"version":3}
+{"file":"six-tile.entry.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,2oEAA2oE;;MCcjpE,OAAO;;;;;QAsDV,qBAAgB,GAAG;YACzB,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YAC9C,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAEhD,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;gBACxC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACxD;YAED,IAAI,IAAI,CAAC,YAAY,EAAE;gBACrB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;gBACzC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;aACxD;SACF,CAAC;QA6DM,0BAAqB,GAAG;YAC9B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;SAC1B,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;SAC7B,CAAC;qBAnIc,EAAE;;yBAOE,IAAI;wBAGL,KAAK;8BAIC,IAAI;wBAGO,KAAK;oBAGqB,QAAQ;uBAEnD,IAAI;2BAoBA,KAAK;4BAEJ,KAAK;;;IAZ7B,MAAM,IAAI;QACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;;IAID,MAAM,IAAI;QACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACrB;IAMD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAiBD,MAAM;QACJ,QACE,mBAAa,QAAQ,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,IAClF,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI;gBACV,eAAe,EAAE,IAAI,CAAC,OAAO;gBAC7B,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;aAChC,IAED,WAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,IACrC,uBACE,KAAK,EAAE;gBACL,sBAAsB,EAAE,CAAC,IAAI,CAAC,SAAS;aACxC,EACD,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9B,OAAO,EAAE,IAAI,CAAC,qBAAqB,GACnC,CACE,EAEN,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,IAChC,IAAI,CAAC,QAAQ,KACZ,gBAAU,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAChE,IAAI,CAAC,QAAQ,CACL,CACZ,EACA,IAAI,CAAC,WAAW,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC1C,EAEN,WACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC5C,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBAC9C,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;aAC7C,IAEA,IAAI,CAAC,KAAK,KACT,WACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;aACvB,EACD,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAE7B,IAAI,CAAC,KAAK,CACP,CACP,EACA,IAAI,CAAC,YAAY,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CAC5C,CACF,CACM,EACd;KACH;;;AAYH,MAAM,aAAa,GAAG,CAAC,IAAY;IACjC,OAAO;QACL,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,QAAQ;QAChB,KAAK,EAAE,QAAQ;KAChB,CAAC,IAAI,CAAwB,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAY;IAC5B,OAAO;QACL,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,UAAU;KAClB,CAAC,IAAI,CAAsC,CAAC;AAC/C,CAAC,CAAC;;;;;","names":[],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tile {\n  &--small {\n    --tile-size: 80px;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    --tile-size: 120px;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    --tile-size: 160px;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  min-height: var(--tile-size);\n  width: var(--tile-size);\n\n  background-color: var(--six-color-clay-50);\n\n  display: inline-grid;\n  grid-template-columns: 100%;\n  grid-template-areas:\n    'header'\n    'middle'\n    'footer';\n\n  &:not(.tile--visible) {\n    visibility: hidden;\n  }\n\n  &--elevated {\n    border: 0;\n    box-shadow: var(--six-shadow-medium);\n  }\n}\n\n.tile__header {\n  grid-area: header;\n  height: 5%;\n  justify-self: right;\n  display: flex;\n  justify-content: right;\n  opacity: 0;\n  transition: var(--six-transition-fast) opacity;\n\n  .tile:hover > & {\n    opacity: 1;\n  }\n\n  &--hidden {\n    visibility: hidden;\n  }\n\n  six-icon-button {\n    margin-top: -6px;\n    margin-right: -6px;\n    margin-bottom: -16px;\n  }\n}\n\n.tile__body {\n  grid-area: middle;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n\n  six-icon::part(base) {\n    padding: 0;\n  }\n\n  &--small {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-medium);\n  }\n\n  &--medium {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-large);\n  }\n\n  &--large {\n    @extend .tile__body;\n    --tile-padding-size: var(--six-spacing-x-large);\n  }\n\n  padding-left: var(--tile-padding-size);\n  padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n  grid-area: footer;\n  display: flex;\n  justify-content: center;\n  cursor: pointer;\n  font-weight: var(--six-font-weight-normal);\n  color: var(--six-color-web-rock-900);\n\n  &--small {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xxx-small);\n  }\n\n  &--medium {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-xx-small);\n  }\n\n  &--large {\n    @extend .tile__footer;\n    font-size: var(--six-font-size-small);\n  }\n\n  .label__footer {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: calc(var(--tile-size) - 2em);\n    text-align: center;\n  }\n}\n","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"],"version":3}