@six-group/ui-library 4.2.6 → 4.3.0

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

@@ -1,69 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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;IACxB,EAAE,CAAC,6BAA6B,EAAE,KAAK,IAAI,EAAE;QAC3C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE,uDAAuD;SAC9D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;KAsB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4BAA4B,EAAE,KAAK,IAAI,EAAE;QAC1C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,OAAO,CAAC;YACrB,IAAI,EAAE;;;;kBAIM;SACb,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,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"]}

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

@@ -1,496 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { SixTimepicker } from "../six-timepicker";
-describe('six-timepicker', () => {
-    it('should render default timepicker', async () => {
-        var _a, _b;
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker></six-timepicker>`,
-        };
-        // when initially loaded
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-    <six-timepicker>
-    <mock:shadow-root>
-      <div class="timepicker__container" part="container">
-        <six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
-          <span class="prefix" part="icon" slot="prefix">
-            <six-icon size="medium">
-              watch_later
-            </six-icon>
-          </span>
-        </six-input>
-      </div>
-    </mock:shadow-root>
-  </six-timepicker>
-   `);
-        // when setting a value and opening the popup
-        if (((_a = page.root) === null || _a === void 0 ? void 0 : _a.shadowRoot) != null) {
-            page.root.value = '20:00:00';
-            (_b = page.root.shadowRoot.querySelector('six-input')) === null || _b === void 0 ? void 0 : _b.click();
-        }
-        await page.waitForChanges();
-        // then expect the correct time to be rendered
-        expect(page.root).toEqualHtml(`
-<six-timepicker open="">
-  <mock:shadow-root>
-    <div class="timepicker__container" part="container">
-      <six-input errortext="" label="" part="input" size="medium" value="20:00:00">
-        <span class="prefix" part="icon" slot="prefix">
-          <six-icon size="medium">
-            watch_later
-          </six-icon>
-        </span>
-      </six-input>
-      <div class="timepicker__popup" part="popup">
-        <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
-        <div class="timepicker__separator">
-          <span>
-            :
-          </span>
-        </div>
-        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="0"></six-item-picker>
-        <div class="timepicker__separator">
-          <span>
-            :
-          </span>
-        </div>
-        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="0"></six-item-picker>
-      </div>
-    </div>
-  </mock:shadow-root>
-</six-timepicker>
-   `);
-    });
-    it('should render open timepicker', async () => {
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker open value="13:20:59"></six-timepicker>`,
-        };
-        // when
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-    <six-timepicker open="" value="13:20:59">
-      <mock:shadow-root>
-        <div class="timepicker__container" part="container">
-          <six-input errortext="" label="" part="input" size="medium" value="13:20:59">
-            <span class="prefix" part="icon" slot="prefix">
-              <six-icon size="medium">
-                watch_later
-              </six-icon>
-            </span>
-          </six-input>
-          <div class="timepicker__popup" part="popup">
-            <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
-            <div class="timepicker__separator">
-              <span>
-                :
-              </span>
-            </div>
-            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
-            <div class="timepicker__separator">
-              <span>
-                :
-              </span>
-            </div>
-            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
-          </div>
-        </div>
-      </mock:shadow-root>
-    </six-timepicker>
-   `);
-    });
-    it('should render inline timepicker', async () => {
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker inline value="13:20:59"></six-timepicker>`,
-        };
-        // when
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-    <six-timepicker inline="" open="" value="13:20:59">
-    <mock:shadow-root>
-      <div class="timepicker__container" part="container">
-        <six-input class="input--hide" errortext="" label="" part="input" size="medium" value="13:20:59">
-          <span class="prefix" part="icon" slot="prefix">
-            <six-icon size="medium">
-              watch_later
-            </six-icon>
-          </span>
-        </six-input>
-        <div class="timepicker__popup timepicker__popup--is-inline" part="popup">
-          <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
-          <div class="timepicker__separator">
-            <span>
-              :
-            </span>
-          </div>
-          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
-          <div class="timepicker__separator">
-            <span>
-              :
-            </span>
-          </div>
-          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
-        </div>
-      </div>
-    </mock:shadow-root>
-  </six-timepicker>
-   `);
-    });
-    it('should render open timepicker with default time', async () => {
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker open default-time="13:20:59"></six-timepicker>`,
-        };
-        // when
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-    <six-timepicker default-time="13:20:59" open="">
-    <mock:shadow-root>
-      <div class="timepicker__container" part="container">
-        <six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
-          <span class="prefix" part="icon" slot="prefix">
-            <six-icon size="medium">
-              watch_later
-            </six-icon>
-          </span>
-        </six-input>
-        <div class="timepicker__popup" part="popup">
-          <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
-          <div class="timepicker__separator">
-            <span>
-              :
-            </span>
-          </div>
-          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
-          <div class="timepicker__separator">
-            <span>
-              :
-            </span>
-          </div>
-          <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
-        </div>
-      </div>
-    </mock:shadow-root>
-  </six-timepicker>
-   `);
-    });
-    it('should render timepicker with different separator', async () => {
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker open value="11:59:20" separator="-"></six-timepicker>`,
-        };
-        // when
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-    <six-timepicker open="" separator="-" value="11:59:20">
-      <mock:shadow-root>
-        <div class="timepicker__container" part="container">
-          <six-input errortext="" label="" part="input" size="medium" value="11:59:20">
-            <span class="prefix" part="icon" slot="prefix">
-              <six-icon size="medium">
-                watch_later
-              </six-icon>
-            </span>
-          </six-input>
-          <div class="timepicker__popup" part="popup">
-            <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="11"></six-item-picker>
-            <div class="timepicker__separator">
-              <span>
-                -
-              </span>
-            </div>
-            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
-            <div class="timepicker__separator">
-              <span>
-                -
-              </span>
-            </div>
-            <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
-          </div>
-        </div>
-      </mock:shadow-root>
-    </six-timepicker>
-   `);
-    });
-    it('should render timepicker with different format', async () => {
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker open value="03:45:20:PM" format="hh:mm:ss:aa"></six-timepicker>`,
-        };
-        // when
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-<six-timepicker format="hh:mm:ss:aa" open="" value="03:45:20:PM">
-  <mock:shadow-root>
-    <div class="timepicker__container" part="container">
-      <six-input errortext="" label="" part="input" size="medium" value="03:45:20:PM">
-        <span class="prefix" part="icon" slot="prefix">
-          <six-icon size="medium">
-            watch_later
-          </six-icon>
-        </span>
-      </six-input>
-      <div class="timepicker__popup" part="popup">
-        <six-item-picker interval="35" max="11" min="0" padded="" timeout="300" type="number" value="3"></six-item-picker>
-        <div class="timepicker__separator">
-          <span>
-            :
-          </span>
-        </div>
-        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="45"></six-item-picker>
-        <div class="timepicker__separator">
-          <span>
-            :
-          </span>
-        </div>
-        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
-        <six-item-picker interval="35" padded="" timeout="300" type="custom" value="PM"></six-item-picker>
-      </div>
-    </div>
-  </mock:shadow-root>
-</six-timepicker>
-   `);
-    });
-    it('should render timepicker with adjusted timeout and interval', async () => {
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker open value="13:20:59" timeout="500" interval="150"></six-timepicker>`,
-        };
-        // when
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-<six-timepicker interval="150" open="" timeout="500" value="13:20:59">
-  <mock:shadow-root>
-    <div class="timepicker__container" part="container">
-      <six-input errortext="" label="" part="input" size="medium" value="13:20:59">
-        <span class="prefix" part="icon" slot="prefix">
-          <six-icon size="medium">
-            watch_later
-          </six-icon>
-        </span>
-      </six-input>
-      <div class="timepicker__popup" part="popup">
-        <six-item-picker interval="150" max="23" min="0" padded="" timeout="500" type="number" value="13"></six-item-picker>
-        <div class="timepicker__separator">
-          <span>
-            :
-          </span>
-        </div>
-        <six-item-picker interval="150" max="59" min="0" padded="" timeout="500" type="number" value="20"></six-item-picker>
-        <div class="timepicker__separator">
-          <span>
-            :
-          </span>
-        </div>
-        <six-item-picker interval="150" max="59" min="0" padded="" timeout="500" type="number" value="59"></six-item-picker>
-      </div>
-    </div>
-  </mock:shadow-root>
-</six-timepicker>
-   `);
-    });
-    it('should render timepicker with placeholder', async () => {
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker placeholder="HH:mm:ss"></six-timepicker>`,
-        };
-        // when
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-<six-timepicker placeholder="HH:mm:ss">
-  <mock:shadow-root>
-    <div class="timepicker__container" part="container">
-      <six-input class="input--empty" errortext="" label="" part="input" placeholder="HH:mm:ss" size="medium" value="">
-        <span class="prefix" part="icon" slot="prefix">
-          <six-icon size="medium">
-            watch_later
-          </six-icon>
-        </span>
-      </six-input>
-    </div>
-  </mock:shadow-root>
-</six-timepicker>
-   `);
-    });
-    it('should render readonly timepicker', async () => {
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker value="02:00:00" readonly></six-timepicker>`,
-        };
-        // when
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-<six-timepicker readonly="" value="02:00:00">
-  <mock:shadow-root>
-    <div class="timepicker__container" part="container">
-      <six-input errortext="" label="" part="input" readonly="" size="medium" value="02:00:00">
-        <span class="prefix" part="icon" slot="prefix">
-          <six-icon size="medium">
-            watch_later
-          </six-icon>
-        </span>
-      </six-input>
-    </div>
-  </mock:shadow-root>
-</six-timepicker>
-   `);
-    });
-    it('should render disabled timepicker', async () => {
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker value="02:00:00" disabled></six-timepicker>`,
-        };
-        // when
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-<six-timepicker disabled="" value="02:00:00">
-  <mock:shadow-root>
-    <div class="timepicker__container" part="container">
-      <six-input disabled="" errortext="" label="" part="input" size="medium" value="02:00:00">
-        <span class="prefix" part="icon" slot="prefix">
-          <six-icon size="medium">
-            watch_later
-          </six-icon>
-        </span>
-      </six-input>
-    </div>
-  </mock:shadow-root>
-</six-timepicker>
-   `);
-    });
-    it('should render timepicker in correct sizes', async () => {
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker size="small"></six-timepicker>`,
-        };
-        // when
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-<six-timepicker size="small">
-  <mock:shadow-root>
-    <div class="timepicker__container" part="container">
-      <six-input class="input--empty" errortext="" label="" part="input" size="small" value="">
-        <span class="prefix" part="icon" slot="prefix">
-          <six-icon size="small">
-            watch_later
-          </six-icon>
-        </span>
-      </six-input>
-    </div>
-  </mock:shadow-root>
-</six-timepicker>
-   `);
-        // when changing size
-        if (page.root != null) {
-            page.root.size = 'medium';
-        }
-        await page.waitForChanges();
-        // then expect medium sized timepicker
-        expect(page.root).toEqualHtml(`
-<six-timepicker size="small">
-  <mock:shadow-root>
-    <div class="timepicker__container" part="container">
-      <six-input class="input--empty" errortext="" label="" part="input" size="medium" value="">
-        <span class="prefix" part="icon" slot="prefix">
-          <six-icon size="medium">
-            watch_later
-          </six-icon>
-        </span>
-      </six-input>
-    </div>
-  </mock:shadow-root>
-</six-timepicker>
-   `);
-        // when changing size
-        if (page.root != null) {
-            page.root.size = 'large';
-        }
-        await page.waitForChanges();
-        // then expect medium sized timepicker
-        expect(page.root).toEqualHtml(`
-<six-timepicker size="small">
-  <mock:shadow-root>
-    <div class="timepicker__container" part="container">
-      <six-input class="input--empty" errortext="" label="" part="input" size="large" value="">
-        <span class="prefix" part="icon" slot="prefix">
-          <six-icon size="medium">
-            watch_later
-          </six-icon>
-        </span>
-      </six-input>
-    </div>
-  </mock:shadow-root>
-</six-timepicker>
-   `);
-    });
-    it('should render open timepicker with icon on the right', async () => {
-        // given
-        const config = {
-            components: [SixTimepicker],
-            html: `<six-timepicker open value="13:20:59" icon-position="right" clearable></six-timepicker>`,
-        };
-        // when
-        const page = await newSpecPage(config);
-        // then
-        expect(page.root).toEqualHtml(`
-<six-timepicker clearable="" icon-position="right" open="" value="13:20:59">
-  <mock:shadow-root>
-    <div class="timepicker__container" part="container">
-      <six-input errortext="" label="" part="input" size="medium" value="13:20:59">
-        <span class="prefix prefix--right" part="icon" slot="prefix">
-          <six-icon size="medium">
-            watch_later
-          </six-icon>
-        </span>
-        <button class="timepicker_clear timepicker_clear--left" slot="suffix" tabindex="-1" type="button">
-          <six-icon size="small">
-            clear
-          </six-icon>
-        </button>
-      </six-input>
-      <div class="timepicker__popup" part="popup">
-        <six-item-picker interval="35" max="23" min="0" padded="" timeout="300" type="number" value="13"></six-item-picker>
-        <div class="timepicker__separator">
-          <span>
-            :
-          </span>
-        </div>
-        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="20"></six-item-picker>
-        <div class="timepicker__separator">
-          <span>
-            :
-          </span>
-        </div>
-        <six-item-picker interval="35" max="59" min="0" padded="" timeout="300" type="number" value="59"></six-item-picker>
-      </div>
-    </div>
-  </mock:shadow-root>
-</six-timepicker>
-   `);
-    });
-});
-//# sourceMappingURL=six-timepicker.spec.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"six-timepicker.spec.js","sourceRoot":"","sources":["../../../../src/components/six-timepicker/test/six-timepicker.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixTimepicker } from '../six-timepicker';\n\ndescribe('six-timepicker', () => {\n  it('should render default timepicker', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker></six-timepicker>`,\n    };\n\n    // when initially loaded\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-timepicker>\n    <mock:shadow-root>\n      <div class=\"timepicker__container\" part=\"container\">\n        <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"\">\n          <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n            <six-icon size=\"medium\">\n              watch_later\n            </six-icon>\n          </span>\n        </six-input>\n      </div>\n    </mock:shadow-root>\n  </six-timepicker>\n   `);\n\n    // when setting a value and opening the popup\n    if (page.root?.shadowRoot != null) {\n      page.root.value = '20:00:00';\n      page.root.shadowRoot.querySelector('six-input')?.click();\n    }\n    await page.waitForChanges();\n\n    // then expect the correct time to be rendered\n    expect(page.root).toEqualHtml(`\n<six-timepicker open=\"\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"20:00:00\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n      <div class=\"timepicker__popup\" part=\"popup\">\n        <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"0\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"0\"></six-item-picker>\n      </div>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render open timepicker', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open value=\"13:20:59\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-timepicker open=\"\" value=\"13:20:59\">\n      <mock:shadow-root>\n        <div class=\"timepicker__container\" part=\"container\">\n          <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"13:20:59\">\n            <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n              <six-icon size=\"medium\">\n                watch_later\n              </six-icon>\n            </span>\n          </six-input>\n          <div class=\"timepicker__popup\" part=\"popup\">\n            <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"13\"></six-item-picker>\n            <div class=\"timepicker__separator\">\n              <span>\n                :\n              </span>\n            </div>\n            <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n            <div class=\"timepicker__separator\">\n              <span>\n                :\n              </span>\n            </div>\n            <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"59\"></six-item-picker>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-timepicker>\n   `);\n  });\n\n  it('should render inline timepicker', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker inline value=\"13:20:59\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-timepicker inline=\"\" open=\"\" value=\"13:20:59\">\n    <mock:shadow-root>\n      <div class=\"timepicker__container\" part=\"container\">\n        <six-input class=\"input--hide\" errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"13:20:59\">\n          <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n            <six-icon size=\"medium\">\n              watch_later\n            </six-icon>\n          </span>\n        </six-input>\n        <div class=\"timepicker__popup timepicker__popup--is-inline\" part=\"popup\">\n          <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"13\"></six-item-picker>\n          <div class=\"timepicker__separator\">\n            <span>\n              :\n            </span>\n          </div>\n          <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n          <div class=\"timepicker__separator\">\n            <span>\n              :\n            </span>\n          </div>\n          <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"59\"></six-item-picker>\n        </div>\n      </div>\n    </mock:shadow-root>\n  </six-timepicker>\n   `);\n  });\n\n  it('should render open timepicker with default time', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open default-time=\"13:20:59\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-timepicker default-time=\"13:20:59\" open=\"\">\n    <mock:shadow-root>\n      <div class=\"timepicker__container\" part=\"container\">\n        <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"\">\n          <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n            <six-icon size=\"medium\">\n              watch_later\n            </six-icon>\n          </span>\n        </six-input>\n        <div class=\"timepicker__popup\" part=\"popup\">\n          <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"13\"></six-item-picker>\n          <div class=\"timepicker__separator\">\n            <span>\n              :\n            </span>\n          </div>\n          <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n          <div class=\"timepicker__separator\">\n            <span>\n              :\n            </span>\n          </div>\n          <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"59\"></six-item-picker>\n        </div>\n      </div>\n    </mock:shadow-root>\n  </six-timepicker>\n   `);\n  });\n\n  it('should render timepicker with different separator', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open value=\"11:59:20\" separator=\"-\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n    <six-timepicker open=\"\" separator=\"-\" value=\"11:59:20\">\n      <mock:shadow-root>\n        <div class=\"timepicker__container\" part=\"container\">\n          <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"11:59:20\">\n            <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n              <six-icon size=\"medium\">\n                watch_later\n              </six-icon>\n            </span>\n          </six-input>\n          <div class=\"timepicker__popup\" part=\"popup\">\n            <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"11\"></six-item-picker>\n            <div class=\"timepicker__separator\">\n              <span>\n                -\n              </span>\n            </div>\n            <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"59\"></six-item-picker>\n            <div class=\"timepicker__separator\">\n              <span>\n                -\n              </span>\n            </div>\n            <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n          </div>\n        </div>\n      </mock:shadow-root>\n    </six-timepicker>\n   `);\n  });\n\n  it('should render timepicker with different format', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open value=\"03:45:20:PM\" format=\"hh:mm:ss:aa\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker format=\"hh:mm:ss:aa\" open=\"\" value=\"03:45:20:PM\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"03:45:20:PM\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n      <div class=\"timepicker__popup\" part=\"popup\">\n        <six-item-picker interval=\"35\" max=\"11\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"3\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"45\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n        <six-item-picker interval=\"35\" padded=\"\" timeout=\"300\" type=\"custom\" value=\"PM\"></six-item-picker>\n      </div>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render timepicker with adjusted timeout and interval', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open value=\"13:20:59\" timeout=\"500\" interval=\"150\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker interval=\"150\" open=\"\" timeout=\"500\" value=\"13:20:59\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"13:20:59\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n      <div class=\"timepicker__popup\" part=\"popup\">\n        <six-item-picker interval=\"150\" max=\"23\" min=\"0\" padded=\"\" timeout=\"500\" type=\"number\" value=\"13\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"150\" max=\"59\" min=\"0\" padded=\"\" timeout=\"500\" type=\"number\" value=\"20\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"150\" max=\"59\" min=\"0\" padded=\"\" timeout=\"500\" type=\"number\" value=\"59\"></six-item-picker>\n      </div>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render timepicker with placeholder', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker placeholder=\"HH:mm:ss\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker placeholder=\"HH:mm:ss\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" placeholder=\"HH:mm:ss\" size=\"medium\" value=\"\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render readonly timepicker', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker value=\"02:00:00\" readonly></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker readonly=\"\" value=\"02:00:00\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input errortext=\"\" label=\"\" part=\"input\" readonly=\"\" size=\"medium\" value=\"02:00:00\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render disabled timepicker', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker value=\"02:00:00\" disabled></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker disabled=\"\" value=\"02:00:00\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input disabled=\"\" errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"02:00:00\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render timepicker in correct sizes', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker size=\"small\"></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker size=\"small\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" size=\"small\" value=\"\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"small\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n\n    // when changing size\n    if (page.root != null) {\n      page.root.size = 'medium';\n    }\n    await page.waitForChanges();\n\n    // then expect medium sized timepicker\n    expect(page.root).toEqualHtml(`\n<six-timepicker size=\"small\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n\n    // when changing size\n    if (page.root != null) {\n      page.root.size = 'large';\n    }\n    await page.waitForChanges();\n\n    // then expect medium sized timepicker\n    expect(page.root).toEqualHtml(`\n<six-timepicker size=\"small\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input class=\"input--empty\" errortext=\"\" label=\"\" part=\"input\" size=\"large\" value=\"\">\n        <span class=\"prefix\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n      </six-input>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n\n  it('should render open timepicker with icon on the right', async () => {\n    // given\n    const config = {\n      components: [SixTimepicker],\n      html: `<six-timepicker open value=\"13:20:59\" icon-position=\"right\" clearable></six-timepicker>`,\n    };\n\n    // when\n    const page = await newSpecPage(config);\n\n    // then\n    expect(page.root).toEqualHtml(`\n<six-timepicker clearable=\"\" icon-position=\"right\" open=\"\" value=\"13:20:59\">\n  <mock:shadow-root>\n    <div class=\"timepicker__container\" part=\"container\">\n      <six-input errortext=\"\" label=\"\" part=\"input\" size=\"medium\" value=\"13:20:59\">\n        <span class=\"prefix prefix--right\" part=\"icon\" slot=\"prefix\">\n          <six-icon size=\"medium\">\n            watch_later\n          </six-icon>\n        </span>\n        <button class=\"timepicker_clear timepicker_clear--left\" slot=\"suffix\" tabindex=\"-1\" type=\"button\">\n          <six-icon size=\"small\">\n            clear\n          </six-icon>\n        </button>\n      </six-input>\n      <div class=\"timepicker__popup\" part=\"popup\">\n        <six-item-picker interval=\"35\" max=\"23\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"13\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"20\"></six-item-picker>\n        <div class=\"timepicker__separator\">\n          <span>\n            :\n          </span>\n        </div>\n        <six-item-picker interval=\"35\" max=\"59\" min=\"0\" padded=\"\" timeout=\"300\" type=\"number\" value=\"59\"></six-item-picker>\n      </div>\n    </div>\n  </mock:shadow-root>\n</six-timepicker>\n   `);\n  });\n});\n"]}