@six-group/ui-library 0.0.0-insider.a358260 → 0.0.0-insider.b8b84f6

package/dist/collection/components/six-textarea/test/six-textarea.spec.js

@@ -0,0 +1,117 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixTextarea } from "../six-textarea";
+describe('six-textarea', () => {
+  let page;
+  let textarea;
+  beforeEach(async () => {
+    var _a;
+    global.ResizeObserver = jest.fn().mockImplementation(() => ({
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    }));
+    page = (await newSpecPage({
+      components: [SixTextarea],
+      html: `<six-textarea></six-textarea>`,
+      supportsShadowDom: true,
+    }));
+    const element = (_a = page.root.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('textarea');
+    if (element != null) {
+      textarea = element;
+      return;
+    }
+    fail('textarea not found');
+  });
+  it('renders', async () => {
+    // then
+    expect(page.root).toEqualHtml(`
+      <six-textarea size="medium" value="">
+        <mock:shadow-root>
+         <div class="form-control form-control--medium" part="form-control">
+           <label aria-hidden="true" class="form-control__label" htmlfor="textarea-1" id="textarea-label-1" part="label">
+             <slot name="label"></slot>
+           </label>
+           <div class="form-control__input">
+             <div class="textarea textarea--empty textarea--medium textarea--resize-vertical" part="base"><textarea aria-labelledby="textarea-label-1" autocapitalize="off" autocorrect="off" class="textarea__control" id="textarea-1" part="textarea" rows="4" value=""></textarea>
+             </div>
+           </div>
+           <div aria-hidden="true" class="form-control__error-text" id="input-error-text-1" part="error-text"></div>
+           <div aria-hidden="true" class="form-control__help-text" id="textarea-help-text-1" part="help-text">
+             <slot name="help-text"></slot>
+           </div>
+         </div>
+       </mock:shadow-root>
+     </six-textarea>
+    `);
+  });
+  it('should properly dispatch blur event', async () => {
+    const spy = jest.fn();
+    page.root.addEventListener('six-textarea-blur', spy);
+    await page.waitForChanges();
+    // when
+    textarea.dispatchEvent(new Event('blur'));
+    await page.waitForChanges();
+    // then
+    expect(spy).toHaveBeenCalledWith(expect.objectContaining({
+      detail: undefined,
+      type: 'six-textarea-blur',
+    }));
+    // when
+    page.root.value = 'some new value';
+    await page.waitForChanges();
+    textarea.dispatchEvent(new Event('blur'));
+    await page.waitForChanges();
+    // then
+    expect(spy).toHaveBeenCalledWith(expect.objectContaining({
+      detail: undefined,
+      type: 'six-textarea-blur',
+    }));
+  });
+  it('should properly dispatch focus event', async () => {
+    const spy = jest.fn();
+    page.root.addEventListener('six-textarea-focus', spy);
+    await page.waitForChanges();
+    // when
+    textarea.dispatchEvent(new Event('focus'));
+    await page.waitForChanges();
+    // then
+    expect(spy).toHaveBeenCalledWith(expect.objectContaining({
+      detail: undefined,
+      type: 'six-textarea-focus',
+    }));
+    // when
+    page.root.value = 'some new value';
+    await page.waitForChanges();
+    textarea.dispatchEvent(new Event('focus'));
+    await page.waitForChanges();
+    // then
+    expect(spy).toHaveBeenCalledWith(expect.objectContaining({
+      detail: undefined,
+      type: 'six-textarea-focus',
+    }));
+  });
+  it('should properly dispatch input event', async () => {
+    const spy = jest.fn();
+    page.root.addEventListener('six-textarea-input', spy);
+    await page.waitForChanges();
+    // when
+    textarea.dispatchEvent(new Event('input'));
+    await page.waitForChanges();
+    // then
+    expect(spy).toHaveBeenCalledWith(expect.objectContaining({
+      detail: undefined,
+      type: 'six-textarea-input',
+    }));
+    // when
+    page.root.value = 'some new value';
+    await page.waitForChanges();
+    textarea.dispatchEvent(new Event('input'));
+    await page.waitForChanges();
+    // then
+    expect(spy).toHaveBeenCalledWith(expect.objectContaining({
+      detail: undefined,
+      type: 'six-textarea-input',
+    }));
+  });
+});
+//# sourceMappingURL=six-textarea.spec.js.map

package/dist/collection/components/six-textarea/test/six-textarea.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-textarea.spec.js","sourceRoot":"","sources":["../../../../src/components/six-textarea/test/six-textarea.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage, SpecPage } from '@stencil/core/testing';\nimport { SixTextarea } from '../six-textarea';\n\ninterface TypedSpecPage<T> extends SpecPage {\n  root: HTMLElement & T;\n}\n\ndescribe('six-textarea', () => {\n  let page: TypedSpecPage<SixTextarea>;\n  let textarea: HTMLTextAreaElement;\n\n  beforeEach(async () => {\n    global.ResizeObserver = jest.fn().mockImplementation(() => ({\n      observe: jest.fn(),\n      unobserve: jest.fn(),\n      disconnect: jest.fn(),\n    }));\n\n    page = (await newSpecPage({\n      components: [SixTextarea],\n      html: `<six-textarea></six-textarea>`,\n      supportsShadowDom: true,\n    })) as TypedSpecPage<SixTextarea>;\n\n    const element = page.root.shadowRoot?.querySelector('textarea');\n    if (element != null) {\n      textarea = element;\n      return;\n    }\n    fail('textarea not found');\n  });\n\n  it('renders', async () => {\n    // then\n    expect(page.root).toEqualHtml(`\n      <six-textarea size=\"medium\" value=\"\">\n        <mock:shadow-root>\n         <div class=\"form-control form-control--medium\" part=\"form-control\">\n           <label aria-hidden=\"true\" class=\"form-control__label\" htmlfor=\"textarea-1\" id=\"textarea-label-1\" part=\"label\">\n             <slot name=\"label\"></slot>\n           </label>\n           <div class=\"form-control__input\">\n             <div class=\"textarea textarea--empty textarea--medium textarea--resize-vertical\" part=\"base\"><textarea aria-labelledby=\"textarea-label-1\" autocapitalize=\"off\" autocorrect=\"off\" class=\"textarea__control\" id=\"textarea-1\" part=\"textarea\" rows=\"4\" value=\"\"></textarea>\n             </div>\n           </div>\n           <div aria-hidden=\"true\" class=\"form-control__error-text\" id=\"input-error-text-1\" part=\"error-text\"></div>\n           <div aria-hidden=\"true\" class=\"form-control__help-text\" id=\"textarea-help-text-1\" part=\"help-text\">\n             <slot name=\"help-text\"></slot>\n           </div>\n         </div>\n       </mock:shadow-root>\n     </six-textarea>\n    `);\n  });\n\n  it('should properly dispatch blur event', async () => {\n    const spy = jest.fn();\n    page.root.addEventListener('six-textarea-blur', spy);\n    await page.waitForChanges();\n\n    // when\n    textarea.dispatchEvent(new Event('blur'));\n    await page.waitForChanges();\n\n    // then\n    expect(spy).toHaveBeenCalledWith(\n      expect.objectContaining({\n        detail: undefined,\n        type: 'six-textarea-blur',\n      })\n    );\n\n    // when\n    page.root.value = 'some new value';\n    await page.waitForChanges();\n    textarea.dispatchEvent(new Event('blur'));\n    await page.waitForChanges();\n\n    // then\n    expect(spy).toHaveBeenCalledWith(\n      expect.objectContaining({\n        detail: undefined,\n        type: 'six-textarea-blur',\n      })\n    );\n  });\n\n  it('should properly dispatch focus event', async () => {\n    const spy = jest.fn();\n    page.root.addEventListener('six-textarea-focus', spy);\n    await page.waitForChanges();\n\n    // when\n    textarea.dispatchEvent(new Event('focus'));\n    await page.waitForChanges();\n\n    // then\n    expect(spy).toHaveBeenCalledWith(\n      expect.objectContaining({\n        detail: undefined,\n        type: 'six-textarea-focus',\n      })\n    );\n\n    // when\n    page.root.value = 'some new value';\n    await page.waitForChanges();\n    textarea.dispatchEvent(new Event('focus'));\n    await page.waitForChanges();\n\n    // then\n    expect(spy).toHaveBeenCalledWith(\n      expect.objectContaining({\n        detail: undefined,\n        type: 'six-textarea-focus',\n      })\n    );\n  });\n\n  it('should properly dispatch input event', async () => {\n    const spy = jest.fn();\n    page.root.addEventListener('six-textarea-input', spy);\n    await page.waitForChanges();\n\n    // when\n    textarea.dispatchEvent(new Event('input'));\n    await page.waitForChanges();\n\n    // then\n    expect(spy).toHaveBeenCalledWith(\n      expect.objectContaining({\n        detail: undefined,\n        type: 'six-textarea-input',\n      })\n    );\n\n    // when\n    page.root.value = 'some new value';\n    await page.waitForChanges();\n    textarea.dispatchEvent(new Event('input'));\n    await page.waitForChanges();\n\n    // then\n    expect(spy).toHaveBeenCalledWith(\n      expect.objectContaining({\n        detail: undefined,\n        type: 'six-textarea-input',\n      })\n    );\n  });\n});\n"]}

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

@@ -1,11 +1,23 @@
-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.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();
@@ -32,24 +44,9 @@ export class SixTile {
   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,
@@ -101,15 +98,15 @@ export class SixTile {
         "defaultValue": "''"
       },
       "iconName": {
-        "type": "any",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string | undefined",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "The icon's name."
@@ -233,7 +230,8 @@ export class SixTile {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -253,7 +251,8 @@ export class SixTile {
           "references": {
             "EmptyPayload": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::EmptyPayload"
             }
           }
         }
@@ -267,7 +266,8 @@ export class SixTile {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -283,7 +283,8 @@ export class SixTile {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

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":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEhG,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEpD;;;GAGG;AAOH,MAAM,OAAO,OAAO;;IAoDV,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;MAC9C,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;MAEhD,IAAI,IAAI,CAAC,WAAW,EAAE;QACpB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;QACxC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;OACxD;MAED,IAAI,IAAI,CAAC,YAAY,EAAE;QACrB,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACzC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;OACxD;IACH,CAAC,CAAC;IA6DM,0BAAqB,GAAG,GAAG,EAAE;MACnC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC,CAAC;iBAjIc,EAAE;;qBAME,IAAI;oBAGL,KAAK;0BAGC,IAAI;oBAGO,KAAK;gBAGqB,QAAQ;mBAEnD,IAAI;uBAoBA,KAAK;wBAEJ,KAAK;;EAd7B,qBAAqB;EAErB,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAED,qBAAqB;EAErB,KAAK,CAAC,IAAI;IACR,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;EACtB,CAAC;EAMD,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAiBD,MAAM;IACJ,OAAO,CACL,mBAAa,QAAQ,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK;MAClF,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;UACL,IAAI,EAAE,IAAI;UACV,eAAe,EAAE,IAAI,CAAC,OAAO;UAC7B,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;UACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;UACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;UACpC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;SAChC;QAED,WAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc;UACrC,uBACE,KAAK,EAAE;cACL,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;QAEN,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY;UAChC,IAAI,CAAC,QAAQ,IAAI,CAChB,gBAAU,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAChE,IAAI,CAAC,QAAQ,CACL,CACZ;UACA,IAAI,CAAC,WAAW,IAAI,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC1C;QAEN,WACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;YACL,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;YAC5C,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC9C,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;WAC7C;UAEA,IAAI,CAAC,KAAK,IAAI,CACb,WACE,KAAK,EAAE;cACL,gBAAgB,EAAE,IAAI;aACvB,EACD,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAE7B,IAAI,CAAC,KAAK,CACP,CACP;UACA,IAAI,CAAC,YAAY,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ,CAC5C,CACF,CACM,CACf,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUF;AAED,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,EAAE;EACrC,OAAO;IACL,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,QAAQ;GAChB,CAAC,IAAI,CAAwB,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAY,EAAE,EAAE;EAChC,OAAO;IACL,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,UAAU;GAClB,CAAC,IAAI,CAAsC,CAAC;AAC/C,CAAC,CAAC","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  @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"]}

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

@@ -0,0 +1,69 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixTile } from "../six-tile";
+describe('six-tile', () => {
+  it('renders six-tile with props', async () => {
+    const page = await newSpecPage({
+      components: [SixTile],
+      html: `<six-tile label="Medium" icon-name="home"></six-tile>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-tile label="Medium" icon-name="home" size="medium">
+        <mock:shadow-root>
+          <six-tooltip disabled="" content="Medium">
+            <div class="tile tile--medium tile--visible" part="base">
+              <div class="tile__header" part="header">
+                <six-icon-button name="close" size="medium"></six-icon-button>
+              </div>
+              <div class="tile__body" part="body">
+                <six-icon size="xxLarge">
+                  home
+                </six-icon>
+              </div>
+              <div class="tile__footer--medium" part="footer">
+                <div class=".label__footer">
+                  Medium
+                </div>
+              </div>
+            </div>
+          </six-tooltip>
+        </mock:shadow-root>
+      </six-tile>
+    `);
+  });
+  it('renders six-tile with slot', async () => {
+    const page = await newSpecPage({
+      components: [SixTile],
+      html: `
+      <six-tile>
+        <six-icon slot="icon">delete</six-icon>
+        <div slot="label">short label</div>
+      </six-tile>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-tile size="medium">
+        <mock:shadow-root>
+          <six-tooltip content="" disabled="">
+            <div class="tile tile--medium tile--visible" part="base">
+              <div class="tile__header" part="header">
+                <six-icon-button name="close" size="medium"></six-icon-button>
+              </div>
+              <div class="tile__body" part="body">
+                <slot name="icon"></slot>
+              </div>
+              <div class="tile__footer--medium" part="footer">
+                <slot name="label"></slot>
+              </div>
+            </div>
+          </six-tooltip>
+        </mock:shadow-root>
+        <six-icon slot="icon">
+          delete
+        </six-icon>
+        <div slot="label">
+          short label
+        </div>
+      </six-tile>
+    `);
+  });
+});
+//# sourceMappingURL=six-tile.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-tile.spec.js","sourceRoot":"","sources":["../../../../src/components/six-tile/test/six-tile.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EACxB,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;IAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;MACrB,IAAI,EAAE,uDAAuD;KAC9D,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;IAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;MACrB,IAAI,EAAE;;;;kBAIM;KACb,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixTile } from '../six-tile';\n\ndescribe('six-tile', () => {\n  it('renders six-tile with props', async () => {\n    const page = await newSpecPage({\n      components: [SixTile],\n      html: `<six-tile label=\"Medium\" icon-name=\"home\"></six-tile>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-tile label=\"Medium\" icon-name=\"home\" size=\"medium\">\n        <mock:shadow-root>\n          <six-tooltip disabled=\"\" content=\"Medium\">\n            <div class=\"tile tile--medium tile--visible\" part=\"base\">\n              <div class=\"tile__header\" part=\"header\">\n                <six-icon-button name=\"close\" size=\"medium\"></six-icon-button>\n              </div>\n              <div class=\"tile__body\" part=\"body\">\n                <six-icon size=\"xxLarge\">\n                  home\n                </six-icon>\n              </div>\n              <div class=\"tile__footer--medium\" part=\"footer\">\n                <div class=\".label__footer\">\n                  Medium\n                </div>\n              </div>\n            </div>\n          </six-tooltip>\n        </mock:shadow-root>\n      </six-tile>\n    `);\n  });\n\n  it('renders six-tile with slot', async () => {\n    const page = await newSpecPage({\n      components: [SixTile],\n      html: `\n      <six-tile>\n        <six-icon slot=\"icon\">delete</six-icon>\n        <div slot=\"label\">short label</div>\n      </six-tile>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-tile size=\"medium\">\n        <mock:shadow-root>\n          <six-tooltip content=\"\" disabled=\"\">\n            <div class=\"tile tile--medium tile--visible\" part=\"base\">\n              <div class=\"tile__header\" part=\"header\">\n                <six-icon-button name=\"close\" size=\"medium\"></six-icon-button>\n              </div>\n              <div class=\"tile__body\" part=\"body\">\n                <slot name=\"icon\"></slot>\n              </div>\n              <div class=\"tile__footer--medium\" part=\"footer\">\n                <slot name=\"label\"></slot>\n              </div>\n            </div>\n          </six-tooltip>\n        </mock:shadow-root>\n        <six-icon slot=\"icon\">\n          delete\n        </six-icon>\n        <div slot=\"label\">\n          short label\n        </div>\n      </six-tile>\n    `);\n  });\n});\n"]}