@six-group/ui-library 0.0.0-insider.012ddb2

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.css

@@ -0,0 +1,6 @@
+.six-files-list__container {
+  padding: 1rem;
+}
+.six-files-list__container :last-child {
+  padding-bottom: 0;
+}

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

@@ -0,0 +1,24 @@
+import { h } from "@stencil/core";
+/**
+ * @since 2.0.0
+ * @status experimental
+ *
+ */
+export class SixFileList {
+    render() {
+        return (h("div", { class: "six-files-list__container" }, h("slot", null)));
+    }
+    static get is() { return "six-file-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-file-list.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-file-list.css"]
+        };
+    }
+}
+//# sourceMappingURL=six-file-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-file-list.js","sourceRoot":"","sources":["../../../src/components/six-file-list/six-file-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;GAIG;AAMH,MAAM,OAAO,WAAW;IACtB,MAAM;QACJ,OAAO,CACL,WAAK,KAAK,EAAC,2BAA2B;YACpC,eAAQ,CACJ,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/**\n * @since 2.0.0\n * @status experimental\n *\n */\n@Component({\n  tag: 'six-file-list',\n  styleUrl: 'six-file-list.scss',\n  shadow: true,\n})\nexport class SixFileList {\n  render() {\n    return (\n      <div class=\"six-files-list__container\">\n        <slot />\n      </div>\n    );\n  }\n}\n"]}

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;IAC7B,EAAE,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC5C,MAAM,CAAC,IAAI,WAAW,EAAE,CAAC,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE,iCAAiC;SACxC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;YACzB,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;yBAwBa;SACpB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;KAa7B,CAAC,CAAC;IACL,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.css

@@ -0,0 +1,36 @@
+.six-files-list-item {
+  padding-bottom: 0.5rem;
+}
+.six-files-list-item__name {
+  color: var(--six-color-action-600);
+  cursor: pointer;
+}
+.six-files-list-item__name--disabled {
+  cursor: inherit;
+  color: var(--six-color-web-rock-500);
+}
+.six-files-list-item__name:hover:not(.six-files-list-item__name--disabled) {
+  color: var(--six-color-action-500);
+}
+.six-files-list-item__date {
+  padding-left: 1rem;
+  color: var(--six-color-web-rock-600);
+}
+.six-files-list-item__size {
+  padding-left: 1rem;
+  color: var(--six-color-web-rock-600);
+}
+.six-files-list-item__icon {
+  padding-left: 0.5rem;
+  display: inline-block;
+  transform: translateY(-3px);
+  cursor: pointer;
+  color: var(--six-color-web-rock-600);
+}
+.six-files-list-item__icon--disabled {
+  cursor: not-allowed;
+  color: var(--six-color-web-rock-500);
+}
+.six-files-list-item__icon:hover:not(.six-files-list-item__icon--disabled) {
+  color: var(--six-color-web-rock-900);
+}

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

@@ -0,0 +1,206 @@
+import { h } from "@stencil/core";
+/**
+ * @since 2.0.0
+ * @status experimental
+ *
+ */
+export class SixFileListItem {
+    constructor() {
+        this.downloadFile = () => {
+            if (this.nodownload) {
+                return;
+            }
+            this.downloadEvent.emit({ fileId: this.identifier, name: this.name });
+        };
+        this.removeFile = () => {
+            if (this.nodelete) {
+                return;
+            }
+            this.removeEvent.emit({ fileId: this.identifier, name: this.name });
+        };
+        this.identifier = '';
+        this.name = '';
+        this.date = '';
+        this.size = undefined;
+        this.nodownload = false;
+        this.nodelete = false;
+    }
+    render() {
+        return (h("div", { class: "six-files-list-item" }, h("span", { class: {
+                'six-files-list-item__name': true,
+                'six-files-list-item__name--disabled': this.nodownload,
+            }, onClick: this.downloadFile }, this.name), h("span", { class: "six-files-list-item__date" }, this.date), this.size != null && h("span", { class: "six-files-list-item__size" }, Math.round(this.size / 1024), " KB"), h("six-icon", { class: {
+                'six-files-list-item__icon': true,
+                'six-files-list-item__icon--disabled': this.nodelete,
+            }, size: "small", onClick: this.removeFile }, "delete")));
+    }
+    static get is() { return "six-file-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-file-list-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-file-list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "An id to clearly identify the file"
+                },
+                "attribute": "identifier",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The filename"
+                },
+                "attribute": "name",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "date": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The date when the file was uploaded"
+                },
+                "attribute": "date",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The file size. This number will be divided by 1024 to show the filesize in KB"
+                },
+                "attribute": "size",
+                "reflect": true
+            },
+            "nodownload": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true if you don't want to allow to download this file"
+                },
+                "attribute": "nodownload",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "nodelete": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true if you don't want to allow to delete this file"
+                },
+                "attribute": "nodelete",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "downloadEvent",
+                "name": "six-file-list-item-download",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered on file download."
+                },
+                "complexType": {
+                    "original": "SixFileListDownloadPayload",
+                    "resolved": "SixFileListDownloadPayload",
+                    "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",
+                            "id": "src/components/six-file-list-item/six-file-list-item.tsx::SixFileListDownloadPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "removeEvent",
+                "name": "six-file-list-item-remove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered on file remove."
+                },
+                "complexType": {
+                    "original": "SixFileListRemovePayload",
+                    "resolved": "SixFileListRemovePayload",
+                    "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",
+                            "id": "src/components/six-file-list-item/six-file-list-item.tsx::SixFileListRemovePayload"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=six-file-list-item.js.map

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

@@ -0,0 +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;;QAyBlB,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,CAAC,UAAU,EAAE;gBACnB,OAAO;aACR;YAED,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACxE,CAAC,CAAC;QAEM,eAAU,GAAG,GAAG,EAAE;YACxB,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QACtE,CAAC,CAAC;0BArCoC,EAAE;oBAGR,EAAE;oBAGF,EAAE;;0BAMI,KAAK;wBAGP,KAAK;;IAwBzC,MAAM;QACJ,OAAO,CACL,WAAK,KAAK,EAAC,qBAAqB;YAC9B,YACE,KAAK,EAAE;oBACL,2BAA2B,EAAE,IAAI;oBACjC,qCAAqC,EAAE,IAAI,CAAC,UAAU;iBACvD,EACD,OAAO,EAAE,IAAI,CAAC,YAAY,IAEzB,IAAI,CAAC,IAAI,CACL;YACP,YAAM,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAQ;YACzD,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,YAAM,KAAK,EAAC,2BAA2B;gBAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;sBAAW;YACtG,gBACE,KAAK,EAAE;oBACL,2BAA2B,EAAE,IAAI;oBACjC,qCAAqC,EAAE,IAAI,CAAC,QAAQ;iBACrD,EACD,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,IAAI,CAAC,UAAU,aAGf,CACP,CACP,CAAC;IACJ,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"]}