@six-group/ui-library 0.0.0-insider.d16ec8e → 0.0.0-insider.d82aaa2

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

@@ -0,0 +1,122 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixDropdown } from "../six-dropdown";
+import { SixMenu } from "../../six-menu/six-menu";
+describe('six-dropdown', () => {
+  it('renders open=false', async () => {
+    const page = await newSpecPage({
+      components: [SixDropdown],
+      html: `<six-dropdown><six-button slot="trigger" caret>Dropdown</six-button><six-menu></six-menu></six-dropdown>`,
+      supportsShadowDom: false,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-dropdown>
+      <div class="dropdown" id="dropdown-1" part="base">
+        <span class="dropdown__trigger" part="trigger">
+          <six-button caret="" slot="trigger">
+            Dropdown
+          </six-button>
+         </span>
+         <div class="dropdown__positioner" hidden="">
+             <div aria-hidden="true" aria-labelledby="dropdown-1" class="dropdown__panel" part="panel" role="menu">
+             <six-menu></six-menu>
+         </div>
+        </div>
+      </div>
+      </six-dropdown>
+    `);
+  });
+  it('renders open=true', async () => {
+    const page = await newSpecPage({
+      components: [SixDropdown],
+      html: `<six-dropdown open="true"><six-button slot="trigger" caret>Dropdown</six-button><six-menu></six-menu></six-dropdown>`,
+      supportsShadowDom: false,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-dropdown open="">
+      <div class="dropdown dropdown--open" id="dropdown-2" part="base">
+        <span class="dropdown__trigger" part="trigger">
+          <six-button caret="" slot="trigger">
+            Dropdown
+          </six-button>
+         </span>
+         <div class="dropdown__positioner" style="position: absolute; left: 0; top: 0; margin: 0;">
+             <div aria-hidden="false" aria-labelledby="dropdown-2" class="dropdown__panel" part="panel" role="menu">
+             <six-menu></six-menu>
+         </div>
+        </div>
+      </div>
+      </six-dropdown>
+    `);
+  });
+  it('renders filter=true', async () => {
+    const page = await newSpecPage({
+      components: [SixDropdown],
+      html: `<six-dropdown open="true" filter="true"><six-button slot="trigger" caret>Dropdown</six-button><six-menu></six-menu></six-dropdown>`,
+      supportsShadowDom: false,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-dropdown open="" filter="true">
+        <div part="base" id="dropdown-3" class="dropdown dropdown--open">
+            <span part="trigger" class="dropdown__trigger"><six-button slot="trigger" caret="">Dropdown</six-button></span>
+            <div class="dropdown__positioner dropdown__positioner__filtered" style="position: absolute; left: 0; top: 0; margin: 0;">
+            <six-input aria-hidden="false" placeholder="Filter..."></six-input>
+            <div part="panel" class="dropdown__panel" role="menu" aria-hidden="false" aria-labelledby="dropdown-3">
+            <six-menu></six-menu></div></div></div>
+            </six-dropdown>
+    `);
+  });
+  it('renders dynamically added options', async () => {
+    // given
+    const page = await newSpecPage({
+      components: [SixDropdown, SixMenu],
+      html: ` <six-dropdown><six-button slot="trigger" caret>Dropdown</six-button></six-dropdown>`,
+    });
+    // when
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    page.root.options = Array.from(Array(3).keys()).map((idx) => ({
+      label: `label ${idx}`,
+      value: `value ${idx}`,
+    }));
+    await page.waitForChanges();
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-dropdown>
+      <mock:shadow-root>
+    <div class="dropdown" id="dropdown-4" part="base">
+          <span class="dropdown__trigger" part="trigger">
+            <slot name="trigger"></slot>
+          </span>
+          <div class="dropdown__positioner" hidden="">
+            <div aria-hidden="true" aria-labelledby="dropdown-4" class="dropdown__panel" part="panel" role="menu">
+              <slot></slot>
+              <six-menu part="menu">
+                <mock:shadow-root>
+                  <div class="menu" part="wrapper">
+                    <div part="base" role="menu" tabindex="0">
+                      <slot></slot>
+                      <six-menu-item value="value 0">
+                        label 0
+                      </six-menu-item>
+                      <six-menu-item value="value 1">
+                        label 1
+                      </six-menu-item>
+                      <six-menu-item value="value 2">
+                        label 2
+                      </six-menu-item>
+                    </div>
+                  </div>
+                </mock:shadow-root>
+              </six-menu>
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+      <six-button caret="" slot="trigger">
+        Dropdown
+      </six-button>
+    </six-dropdown>
+    `);
+  });
+});
+//# sourceMappingURL=six-dropdown.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-dropdown.spec.js","sourceRoot":"","sources":["../../../../src/components/six-dropdown/test/six-dropdown.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;EAC5B,EAAE,CAAC,oBAAoB,EAAE,KAAK,IAAI,EAAE;IAClC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE,0GAA0G;MAChH,iBAAiB,EAAE,KAAK;KACzB,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mBAAmB,EAAE,KAAK,IAAI,EAAE;IACjC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE,sHAAsH;MAC5H,iBAAiB,EAAE,KAAK;KACzB,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;KAe7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;IACnC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE,oIAAoI;MAC1I,iBAAiB,EAAE,KAAK;KACzB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;KAS7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;IACjD,QAAQ;IACR,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC;MAClC,IAAI,EAAE,sFAAsF;KAC7F,CAAC,CAAC;IAEH,OAAO;IACP,6DAA6D;IAC7D,aAAa;IACb,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;MAC5D,KAAK,EAAE,SAAS,GAAG,EAAE;MACrB,KAAK,EAAE,SAAS,GAAG,EAAE;KACtB,CAAC,CAAC,CAAC;IACJ,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,OAAO;IACP,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoC7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixDropdown } from '../six-dropdown';\nimport { SixMenu } from '../../six-menu/six-menu';\n\ndescribe('six-dropdown', () => {\n  it('renders open=false', async () => {\n    const page = await newSpecPage({\n      components: [SixDropdown],\n      html: `<six-dropdown><six-button slot=\"trigger\" caret>Dropdown</six-button><six-menu></six-menu></six-dropdown>`,\n      supportsShadowDom: false,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-dropdown>\n      <div class=\"dropdown\" id=\"dropdown-1\" part=\"base\">\n        <span class=\"dropdown__trigger\" part=\"trigger\">\n          <six-button caret=\"\" slot=\"trigger\">\n            Dropdown\n          </six-button>\n         </span>\n         <div class=\"dropdown__positioner\" hidden=\"\">\n             <div aria-hidden=\"true\" aria-labelledby=\"dropdown-1\" class=\"dropdown__panel\" part=\"panel\" role=\"menu\">\n             <six-menu></six-menu>\n         </div>\n        </div>\n      </div>\n      </six-dropdown>\n    `);\n  });\n\n  it('renders open=true', async () => {\n    const page = await newSpecPage({\n      components: [SixDropdown],\n      html: `<six-dropdown open=\"true\"><six-button slot=\"trigger\" caret>Dropdown</six-button><six-menu></six-menu></six-dropdown>`,\n      supportsShadowDom: false,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-dropdown open=\"\">\n      <div class=\"dropdown dropdown--open\" id=\"dropdown-2\" part=\"base\">\n        <span class=\"dropdown__trigger\" part=\"trigger\">\n          <six-button caret=\"\" slot=\"trigger\">\n            Dropdown\n          </six-button>\n         </span>\n         <div class=\"dropdown__positioner\" style=\"position: absolute; left: 0; top: 0; margin: 0;\">\n             <div aria-hidden=\"false\" aria-labelledby=\"dropdown-2\" class=\"dropdown__panel\" part=\"panel\" role=\"menu\">\n             <six-menu></six-menu>\n         </div>\n        </div>\n      </div>\n      </six-dropdown>\n    `);\n  });\n\n  it('renders filter=true', async () => {\n    const page = await newSpecPage({\n      components: [SixDropdown],\n      html: `<six-dropdown open=\"true\" filter=\"true\"><six-button slot=\"trigger\" caret>Dropdown</six-button><six-menu></six-menu></six-dropdown>`,\n      supportsShadowDom: false,\n    });\n\n    expect(page.root).toEqualHtml(`\n      <six-dropdown open=\"\" filter=\"true\">\n        <div part=\"base\" id=\"dropdown-3\" class=\"dropdown dropdown--open\">\n            <span part=\"trigger\" class=\"dropdown__trigger\"><six-button slot=\"trigger\" caret=\"\">Dropdown</six-button></span>\n            <div class=\"dropdown__positioner dropdown__positioner__filtered\" style=\"position: absolute; left: 0; top: 0; margin: 0;\">\n            <six-input aria-hidden=\"false\" placeholder=\"Filter...\"></six-input>\n            <div part=\"panel\" class=\"dropdown__panel\" role=\"menu\" aria-hidden=\"false\" aria-labelledby=\"dropdown-3\">\n            <six-menu></six-menu></div></div></div>\n            </six-dropdown>\n    `);\n  });\n\n  it('renders dynamically added options', async () => {\n    // given\n    const page = await newSpecPage({\n      components: [SixDropdown, SixMenu],\n      html: ` <six-dropdown><six-button slot=\"trigger\" caret>Dropdown</six-button></six-dropdown>`,\n    });\n\n    // when\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore\n    page.root.options = Array.from(Array(3).keys()).map((idx) => ({\n      label: `label ${idx}`,\n      value: `value ${idx}`,\n    }));\n    await page.waitForChanges();\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-dropdown>\n      <mock:shadow-root>\n    <div class=\"dropdown\" id=\"dropdown-4\" part=\"base\">\n          <span class=\"dropdown__trigger\" part=\"trigger\">\n            <slot name=\"trigger\"></slot>\n          </span>\n          <div class=\"dropdown__positioner\" hidden=\"\">\n            <div aria-hidden=\"true\" aria-labelledby=\"dropdown-4\" class=\"dropdown__panel\" part=\"panel\" role=\"menu\">\n              <slot></slot>\n              <six-menu part=\"menu\">\n                <mock:shadow-root>\n                  <div class=\"menu\" part=\"wrapper\">\n                    <div part=\"base\" role=\"menu\" tabindex=\"0\">\n                      <slot></slot>\n                      <six-menu-item value=\"value 0\">\n                        label 0\n                      </six-menu-item>\n                      <six-menu-item value=\"value 1\">\n                        label 1\n                      </six-menu-item>\n                      <six-menu-item value=\"value 2\">\n                        label 2\n                      </six-menu-item>\n                    </div>\n                  </div>\n                </mock:shadow-root>\n              </six-menu>\n            </div>\n          </div>\n        </div>\n      </mock:shadow-root>\n      <six-button caret=\"\" slot=\"trigger\">\n        Dropdown\n      </six-button>\n    </six-dropdown>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-error-page/six-error-page.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 const TITLE_PER_ERROR_CODE = {
   403: {
     en: 'Access Denied',

package/dist/collection/components/six-error-page/test/six-error-page.spec.js

@@ -0,0 +1,240 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixErrorPage } from "../six-error-page";
+describe('six-error-page', () => {
+  it('should render right page for error code 403 in english', async () => {
+    // given
+    const config = {
+      components: [SixErrorPage],
+      html: `<six-error-page error-code="403" language="en"></six-error-page>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-error-page error-code="403" language="en">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              lock
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Access Denied
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              You don’t have permission to access this page.
+            </div>
+            <div>
+              Please contact an administrator or click the SIX logo on top left.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+  });
+  it('should render right page for error code 403 in german', async () => {
+    // given
+    const config = {
+      components: [SixErrorPage],
+      html: `<six-error-page error-code="403" language="de"></six-error-page>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+        <six-error-page error-code="403" language="de">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              lock
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Kein Zugriff
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              Sie haben keine Zugriffsberechtigung auf diese Seite.
+            </div>
+            <div>
+              Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+  });
+  it('should render right page for error code 404 in english', async () => {
+    // given
+    const config = {
+      components: [SixErrorPage],
+      html: `<six-error-page error-code="404" language="en"></six-error-page>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-error-page error-code="404" language="en">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              find-in-page
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Not Found
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              We have not found the page you requested.
+            </div>
+            <div>
+              Please click the SIX logo on top left.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+  });
+  it('should render right page for error code 404 in german', async () => {
+    // given
+    const config = {
+      components: [SixErrorPage],
+      html: `<six-error-page error-code="404" language="de"></six-error-page>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-error-page error-code="404" language="de">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              find-in-page
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Seite nicht gefunden
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              Wir haben die angeforderte Seite nicht gefunden.
+            </div>
+            <div>
+              Bitte klicken Sie auf das SIX-Logo oben links.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+  });
+  it('should render right page for error code 500 in english', async () => {
+    // given
+    const config = {
+      components: [SixErrorPage],
+      html: `<six-error-page error-code="500" language="en"></six-error-page>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-error-page error-code="500" language="en">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              sentiment-dissatisfied
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Ooops!
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              Sorry, we messed up! We try to fix this.
+            </div>
+            <div>
+              Please click the SIX logo on top left.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+  });
+  it('should render right page for error code 500 in german', async () => {
+    // given
+    const config = {
+      components: [SixErrorPage],
+      html: `<six-error-page error-code="500" language="de"></six-error-page>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-error-page error-code="500" language="de">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              sentiment-dissatisfied
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            Ups!
+          </div>
+          <div class="six-error-page__description" part="description">
+            <div>
+              Sorry, das war unser Fehler! Wir versuchen das zu beheben.
+            </div>
+            <div>
+              Bitte klicken Sie auf das SIX-Logo oben links.
+            </div>
+          </div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+  });
+  it('should render right page for custom error', async () => {
+    // given
+    const config = {
+      components: [SixErrorPage],
+      html: `<six-error-page custom-title="my title" id="custom-error-message" custom-icon="home"></six-error-page>
+        <script type="module">
+          const sixErrorPage = document.getElementById('custom-error-message');
+          sixErrorPage.customDescription = ['My', 'Description'];
+        </script>`,
+    };
+    // when
+    const page = await newSpecPage(config);
+    // then
+    expect(page.root).toEqualHtml(`
+    <six-error-page custom-icon="home" custom-title="my title" id="custom-error-message">
+      <mock:shadow-root>
+        <div part="container">
+          <div class="six-error-page__icon-container" part="icon-container">
+            <six-picto class="six-error-page__icon" part="icon" size="4xl">
+              home
+            </six-picto>
+          </div>
+          <div class="six-error-page__title" part="title">
+            my title
+          </div>
+          <div class="six-error-page__description" part="description"></div>
+        </div>
+      </mock:shadow-root>
+    </six-error-page>
+   `);
+  });
+});
+//# sourceMappingURL=six-error-page.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-error-page.spec.js","sourceRoot":"","sources":["../../../../src/components/six-error-page/test/six-error-page.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixErrorPage } from '../six-error-page';\n\ndescribe('six-error-page', () => {\n  it('should render right page for error code 403 in english', async () => {\n    // given\n    const config = {\n      components: [SixErrorPage],\n      html: `<six-error-page error-code=\"403\" language=\"en\"></six-error-page>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-error-page error-code=\"403\" language=\"en\">\n      <mock:shadow-root>\n        <div part=\"container\">\n          <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n            <six-picto class=\"six-error-page__icon\" part=\"icon\" size=\"4xl\">\n              lock\n            </six-picto>\n          </div>\n          <div class=\"six-error-page__title\" part=\"title\">\n            Access Denied\n          </div>\n          <div class=\"six-error-page__description\" part=\"description\">\n            <div>\n              You don’t have permission to access this page.\n            </div>\n            <div>\n              Please contact an administrator or click the SIX logo on top left.\n            </div>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-error-page>\n   `);\n  });\n\n  it('should render right page for error code 403 in german', async () => {\n    // given\n    const config = {\n      components: [SixErrorPage],\n      html: `<six-error-page error-code=\"403\" language=\"de\"></six-error-page>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n        <six-error-page error-code=\"403\" language=\"de\">\n      <mock:shadow-root>\n        <div part=\"container\">\n          <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n            <six-picto class=\"six-error-page__icon\" part=\"icon\" size=\"4xl\">\n              lock\n            </six-picto>\n          </div>\n          <div class=\"six-error-page__title\" part=\"title\">\n            Kein Zugriff\n          </div>\n          <div class=\"six-error-page__description\" part=\"description\">\n            <div>\n              Sie haben keine Zugriffsberechtigung auf diese Seite.\n            </div>\n            <div>\n              Bitte wenden Sie sich an einen Administrator oder klicken Sie auf das SIX-Logo oben links.\n            </div>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-error-page>\n   `);\n  });\n\n  it('should render right page for error code 404 in english', async () => {\n    // given\n    const config = {\n      components: [SixErrorPage],\n      html: `<six-error-page error-code=\"404\" language=\"en\"></six-error-page>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-error-page error-code=\"404\" language=\"en\">\n      <mock:shadow-root>\n        <div part=\"container\">\n          <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n            <six-picto class=\"six-error-page__icon\" part=\"icon\" size=\"4xl\">\n              find-in-page\n            </six-picto>\n          </div>\n          <div class=\"six-error-page__title\" part=\"title\">\n            Not Found\n          </div>\n          <div class=\"six-error-page__description\" part=\"description\">\n            <div>\n              We have not found the page you requested.\n            </div>\n            <div>\n              Please click the SIX logo on top left.\n            </div>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-error-page>\n   `);\n  });\n\n  it('should render right page for error code 404 in german', async () => {\n    // given\n    const config = {\n      components: [SixErrorPage],\n      html: `<six-error-page error-code=\"404\" language=\"de\"></six-error-page>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-error-page error-code=\"404\" language=\"de\">\n      <mock:shadow-root>\n        <div part=\"container\">\n          <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n            <six-picto class=\"six-error-page__icon\" part=\"icon\" size=\"4xl\">\n              find-in-page\n            </six-picto>\n          </div>\n          <div class=\"six-error-page__title\" part=\"title\">\n            Seite nicht gefunden\n          </div>\n          <div class=\"six-error-page__description\" part=\"description\">\n            <div>\n              Wir haben die angeforderte Seite nicht gefunden.\n            </div>\n            <div>\n              Bitte klicken Sie auf das SIX-Logo oben links.\n            </div>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-error-page>\n   `);\n  });\n\n  it('should render right page for error code 500 in english', async () => {\n    // given\n    const config = {\n      components: [SixErrorPage],\n      html: `<six-error-page error-code=\"500\" language=\"en\"></six-error-page>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-error-page error-code=\"500\" language=\"en\">\n      <mock:shadow-root>\n        <div part=\"container\">\n          <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n            <six-picto class=\"six-error-page__icon\" part=\"icon\" size=\"4xl\">\n              sentiment-dissatisfied\n            </six-picto>\n          </div>\n          <div class=\"six-error-page__title\" part=\"title\">\n            Ooops!\n          </div>\n          <div class=\"six-error-page__description\" part=\"description\">\n            <div>\n              Sorry, we messed up! We try to fix this.\n            </div>\n            <div>\n              Please click the SIX logo on top left.\n            </div>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-error-page>\n   `);\n  });\n\n  it('should render right page for error code 500 in german', async () => {\n    // given\n    const config = {\n      components: [SixErrorPage],\n      html: `<six-error-page error-code=\"500\" language=\"de\"></six-error-page>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-error-page error-code=\"500\" language=\"de\">\n      <mock:shadow-root>\n        <div part=\"container\">\n          <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n            <six-picto class=\"six-error-page__icon\" part=\"icon\" size=\"4xl\">\n              sentiment-dissatisfied\n            </six-picto>\n          </div>\n          <div class=\"six-error-page__title\" part=\"title\">\n            Ups!\n          </div>\n          <div class=\"six-error-page__description\" part=\"description\">\n            <div>\n              Sorry, das war unser Fehler! Wir versuchen das zu beheben.\n            </div>\n            <div>\n              Bitte klicken Sie auf das SIX-Logo oben links.\n            </div>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-error-page>\n   `);\n  });\n\n  it('should render right page for custom error', async () => {\n    // given\n    const config = {\n      components: [SixErrorPage],\n      html: `<six-error-page custom-title=\"my title\" id=\"custom-error-message\" custom-icon=\"home\"></six-error-page>\n        <script type=\"module\">\n          const sixErrorPage = document.getElementById('custom-error-message');\n          sixErrorPage.customDescription = ['My', 'Description'];\n        </script>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-error-page custom-icon=\"home\" custom-title=\"my title\" id=\"custom-error-message\">\n      <mock:shadow-root>\n        <div part=\"container\">\n          <div class=\"six-error-page__icon-container\" part=\"icon-container\">\n            <six-picto class=\"six-error-page__icon\" part=\"icon\" size=\"4xl\">\n              home\n            </six-picto>\n          </div>\n          <div class=\"six-error-page__title\" part=\"title\">\n            my title\n          </div>\n          <div class=\"six-error-page__description\" part=\"description\"></div>\n        </div>\n      </mock:shadow-root>\n    </six-error-page>\n   `);\n  });\n});\n"]}

package/dist/collection/components/six-file-list/six-file-list.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 2.0.0
  * @status experimental

package/dist/collection/components/six-file-list/test/six-file-list.spec.js

@@ -0,0 +1,67 @@
+import { SixFileList } from "../six-file-list";
+import { newSpecPage } from "@stencil/core/testing";
+describe('six-file-list', () => {
+  it('should create a component instance', () => {
+    expect(new SixFileList()).toBeInstanceOf(SixFileList);
+  });
+  it('renders minimal six-file-list', async () => {
+    const page = await newSpecPage({
+      components: [SixFileList],
+      html: `<six-file-list></six-file-list>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <six-file-list>
+          <mock:shadow-root>
+            <div class="six-files-list__container">
+              <slot></slot>
+            </div>
+          </mock:shadow-root>
+        </six-file-list>
+    `);
+  });
+  it('renders six-file-list with items', async () => {
+    const page = await newSpecPage({
+      components: [SixFileList],
+      html: `
+       <six-file-list>
+          <six-file-list-item identifier="id_1" name="file_1.pdf"></six-file-list-item>
+          <six-file-list-item identifier="id_2" name="file_2.pdf" date="23.09.2021, 09:12"></six-file-list-item>
+          <six-file-list-item
+            identifier="id_3"
+            name="file_3.pdf"
+            date="03.12.2021, 10:22"
+            size="75680"
+          ></six-file-list-item>
+          <six-file-list-item
+            identifier="id_4"
+            name="file_4.pdf"
+            date="02.10.2021, 12:25"
+            size="77590"
+            nodownload
+          ></six-file-list-item>
+          <six-file-list-item
+            identifier="id_5"
+            name="file_5.pdf"
+            date="11.07.2021, 10:32"
+            size="72040"
+            nodelete
+          ></six-file-list-item>
+        </six-file-list>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <six-file-list>
+          <mock:shadow-root>
+            <div class="six-files-list__container">
+              <slot></slot>
+            </div>
+          </mock:shadow-root>
+          <six-file-list-item identifier="id_1" name="file_1.pdf"></six-file-list-item>
+          <six-file-list-item date="23.09.2021, 09:12" identifier="id_2" name="file_2.pdf"></six-file-list-item>
+          <six-file-list-item date="03.12.2021, 10:22" identifier="id_3" name="file_3.pdf" size="75680"></six-file-list-item>
+          <six-file-list-item date="02.10.2021, 12:25" identifier="id_4" name="file_4.pdf" nodownload="" size="77590"></six-file-list-item>
+          <six-file-list-item date="11.07.2021, 10:32" identifier="id_5" name="file_5.pdf" nodelete="" size="72040"></six-file-list-item>
+        </six-file-list>
+    `);
+  });
+});
+//# sourceMappingURL=six-file-list.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-file-list.spec.js","sourceRoot":"","sources":["../../../../src/components/six-file-list/test/six-file-list.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;IAC5C,MAAM,CAAC,IAAI,WAAW,EAAE,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;EACxD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE,iCAAiC;KACxC,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;yBAwBa;KACpB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { SixFileList } from '../six-file-list';\nimport { newSpecPage } from '@stencil/core/testing';\n\ndescribe('six-file-list', () => {\n  it('should create a component instance', () => {\n    expect(new SixFileList()).toBeInstanceOf(SixFileList);\n  });\n\n  it('renders minimal six-file-list', async () => {\n    const page = await newSpecPage({\n      components: [SixFileList],\n      html: `<six-file-list></six-file-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <six-file-list>\n          <mock:shadow-root>\n            <div class=\"six-files-list__container\">\n              <slot></slot>\n            </div>\n          </mock:shadow-root>\n        </six-file-list>\n    `);\n  });\n\n  it('renders six-file-list with items', async () => {\n    const page = await newSpecPage({\n      components: [SixFileList],\n      html: `\n       <six-file-list>\n          <six-file-list-item identifier=\"id_1\" name=\"file_1.pdf\"></six-file-list-item>\n          <six-file-list-item identifier=\"id_2\" name=\"file_2.pdf\" date=\"23.09.2021, 09:12\"></six-file-list-item>\n          <six-file-list-item\n            identifier=\"id_3\"\n            name=\"file_3.pdf\"\n            date=\"03.12.2021, 10:22\"\n            size=\"75680\"\n          ></six-file-list-item>\n          <six-file-list-item\n            identifier=\"id_4\"\n            name=\"file_4.pdf\"\n            date=\"02.10.2021, 12:25\"\n            size=\"77590\"\n            nodownload\n          ></six-file-list-item>\n          <six-file-list-item\n            identifier=\"id_5\"\n            name=\"file_5.pdf\"\n            date=\"11.07.2021, 10:32\"\n            size=\"72040\"\n            nodelete\n          ></six-file-list-item>\n        </six-file-list>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <six-file-list>\n          <mock:shadow-root>\n            <div class=\"six-files-list__container\">\n              <slot></slot>\n            </div>\n          </mock:shadow-root>\n          <six-file-list-item identifier=\"id_1\" name=\"file_1.pdf\"></six-file-list-item>\n          <six-file-list-item date=\"23.09.2021, 09:12\" identifier=\"id_2\" name=\"file_2.pdf\"></six-file-list-item>\n          <six-file-list-item date=\"03.12.2021, 10:22\" identifier=\"id_3\" name=\"file_3.pdf\" size=\"75680\"></six-file-list-item>\n          <six-file-list-item date=\"02.10.2021, 12:25\" identifier=\"id_4\" name=\"file_4.pdf\" nodownload=\"\" size=\"77590\"></six-file-list-item>\n          <six-file-list-item date=\"11.07.2021, 10:32\" identifier=\"id_5\" name=\"file_5.pdf\" nodelete=\"\" size=\"72040\"></six-file-list-item>\n        </six-file-list>\n    `);\n  });\n});\n"]}

package/dist/collection/components/six-file-list-item/six-file-list-item.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 /**
  * @since 2.0.0
  * @status experimental
@@ -174,7 +174,8 @@ export class SixFileListItem {
           "references": {
             "SixFileListDownloadPayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.tsx",
+              "id": "src/components/six-file-list-item/six-file-list-item.tsx::SixFileListDownloadPayload"
             }
           }
         }
@@ -194,7 +195,8 @@ export class SixFileListItem {
           "references": {
             "SixFileListRemovePayload": {
               "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.tsx"
+              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.tsx",
+              "id": "src/components/six-file-list-item/six-file-list-item.tsx::SixFileListRemovePayload"
             }
           }
         }

package/dist/collection/components/six-file-list-item/six-file-list-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"six-file-list-item.js","sourceRoot":"","sources":["../../../src/components/six-file-list-item/six-file-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAYxE;;;;GAIG;AAMH,MAAM,OAAO,eAAe;;IAyBlB,iBAAY,GAAG,GAAG,EAAE;MAC1B,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,OAAO;OACR;MAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACxE,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO;OACR;MAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACtE,CAAC,CAAC;sBArCoC,EAAE;gBAGR,EAAE;gBAGF,EAAE;;sBAMI,KAAK;oBAGP,KAAK;;EAwBzC,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,qBAAqB;MAC9B,YACE,KAAK,EAAE;UACL,2BAA2B,EAAE,IAAI;UACjC,qCAAqC,EAAE,IAAI,CAAC,UAAU;SACvD,EACD,OAAO,EAAE,IAAI,CAAC,YAAY,IAEzB,IAAI,CAAC,IAAI,CACL;MACP,YAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAQ;MACzD,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,YAAM,KAAK,EAAC,2BAA2B;QAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;cAAW;MACtG,gBACE,KAAK,EAAE;UACL,2BAA2B,EAAE,IAAI;UACjC,qCAAqC,EAAE,IAAI,CAAC,QAAQ;SACrD,EACD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,UAAU,aAGf,CACP,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nexport interface SixFileListDownloadPayload {\n  fileId: string;\n  name: string;\n}\n\nexport interface SixFileListRemovePayload {\n  fileId: string;\n  name: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list-item',\n  styleUrl: 'six-file-list-item.scss',\n  shadow: true,\n})\nexport class SixFileListItem {\n  /** An id to clearly identify the file */\n  @Prop({ reflect: true }) identifier = '';\n\n  /** The filename */\n  @Prop({ reflect: true }) name = '';\n\n  /** The date when the file was uploaded */\n  @Prop({ reflect: true }) date = '';\n\n  /** The file size. This number will be divided by 1024 to show the filesize in KB */\n  @Prop({ reflect: true }) size?: number;\n\n  /** Set to true if you don't want to allow to download this file */\n  @Prop({ reflect: true }) nodownload = false;\n\n  /** Set to true if you don't want to allow to delete this file */\n  @Prop({ reflect: true }) nodelete = false;\n\n  /** Triggered on file download. */\n  @Event({ eventName: 'six-file-list-item-download' }) downloadEvent!: EventEmitter<SixFileListDownloadPayload>;\n\n  /** Triggered on file remove. */\n  @Event({ eventName: 'six-file-list-item-remove' }) removeEvent!: EventEmitter<SixFileListRemovePayload>;\n\n  private downloadFile = () => {\n    if (this.nodownload) {\n      return;\n    }\n\n    this.downloadEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  private removeFile = () => {\n    if (this.nodelete) {\n      return;\n    }\n\n    this.removeEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  render() {\n    return (\n      <div class=\"six-files-list-item\">\n        <span\n          class={{\n            'six-files-list-item__name': true,\n            'six-files-list-item__name--disabled': this.nodownload,\n          }}\n          onClick={this.downloadFile}\n        >\n          {this.name}\n        </span>\n        <span class=\"six-files-list-item__date\">{this.date}</span>\n        {this.size != null && <span class=\"six-files-list-item__size\">{Math.round(this.size / 1024)} KB</span>}\n        <six-icon\n          class={{\n            'six-files-list-item__icon': true,\n            'six-files-list-item__icon--disabled': this.nodelete,\n          }}\n          size=\"small\"\n          onClick={this.removeFile}\n        >\n          delete\n        </six-icon>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"six-file-list-item.js","sourceRoot":"","sources":["../../../src/components/six-file-list-item/six-file-list-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAYxE;;;;GAIG;AAMH,MAAM,OAAO,eAAe;;IAyBlB,iBAAY,GAAG,GAAG,EAAE;MAC1B,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,OAAO;OACR;MAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACxE,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;QACjB,OAAO;OACR;MAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACtE,CAAC,CAAC;sBArCoC,EAAE;gBAGR,EAAE;gBAGF,EAAE;;sBAMI,KAAK;oBAGP,KAAK;;EAwBzC,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,qBAAqB;MAC9B,YACE,KAAK,EAAE;UACL,2BAA2B,EAAE,IAAI;UACjC,qCAAqC,EAAE,IAAI,CAAC,UAAU;SACvD,EACD,OAAO,EAAE,IAAI,CAAC,YAAY,IAEzB,IAAI,CAAC,IAAI,CACL;MACP,YAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAQ;MACzD,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,YAAM,KAAK,EAAC,2BAA2B;QAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;cAAW;MACtG,gBACE,KAAK,EAAE;UACL,2BAA2B,EAAE,IAAI;UACjC,qCAAqC,EAAE,IAAI,CAAC,QAAQ;SACrD,EACD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,UAAU,aAGf,CACP,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\n\nexport interface SixFileListDownloadPayload {\n  fileId: string;\n  name: string;\n}\n\nexport interface SixFileListRemovePayload {\n  fileId: string;\n  name: string;\n}\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list-item',\n  styleUrl: 'six-file-list-item.scss',\n  shadow: true,\n})\nexport class SixFileListItem {\n  /** An id to clearly identify the file */\n  @Prop({ reflect: true }) identifier = '';\n\n  /** The filename */\n  @Prop({ reflect: true }) name = '';\n\n  /** The date when the file was uploaded */\n  @Prop({ reflect: true }) date = '';\n\n  /** The file size. This number will be divided by 1024 to show the filesize in KB */\n  @Prop({ reflect: true }) size?: number;\n\n  /** Set to true if you don't want to allow to download this file */\n  @Prop({ reflect: true }) nodownload = false;\n\n  /** Set to true if you don't want to allow to delete this file */\n  @Prop({ reflect: true }) nodelete = false;\n\n  /** Triggered on file download. */\n  @Event({ eventName: 'six-file-list-item-download' }) downloadEvent!: EventEmitter<SixFileListDownloadPayload>;\n\n  /** Triggered on file remove. */\n  @Event({ eventName: 'six-file-list-item-remove' }) removeEvent!: EventEmitter<SixFileListRemovePayload>;\n\n  private downloadFile = () => {\n    if (this.nodownload) {\n      return;\n    }\n\n    this.downloadEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  private removeFile = () => {\n    if (this.nodelete) {\n      return;\n    }\n\n    this.removeEvent.emit({ fileId: this.identifier, name: this.name });\n  };\n\n  render() {\n    return (\n      <div class=\"six-files-list-item\">\n        <span\n          class={{\n            'six-files-list-item__name': true,\n            'six-files-list-item__name--disabled': this.nodownload,\n          }}\n          onClick={this.downloadFile}\n        >\n          {this.name}\n        </span>\n        <span class=\"six-files-list-item__date\">{this.date}</span>\n        {this.size != null && <span class=\"six-files-list-item__size\">{Math.round(this.size / 1024)} KB</span>}\n        <six-icon\n          class={{\n            'six-files-list-item__icon': true,\n            'six-files-list-item__icon--disabled': this.nodelete,\n          }}\n          size=\"small\"\n          onClick={this.removeFile}\n        >\n          delete\n        </six-icon>\n      </div>\n    );\n  }\n}\n"]}