@ukic/web-components 2.7.0 → 2.9.0

package/dist/collection/components/ic-navigation-button/test/basic/ic-navigation-button.spec.js

@@ -2,10 +2,10 @@ import { newSpecPage } from "@stencil/core/testing";
 import { Button } from "../../../ic-button/ic-button";
 import { NavigationButton } from "../../ic-navigation-button";
 describe("ic-navigation-button", () => {
-  it("renders", async () => {
-    const page = await newSpecPage({
-      components: [NavigationButton],
-      html: `<ic-navigation-button
+    it("renders", async () => {
+        const page = await newSpecPage({
+            components: [NavigationButton],
+            html: `<ic-navigation-button
         label="button1"
         onclick="alert('test')"
       >
@@ -23,8 +23,8 @@ describe("ic-navigation-button", () => {
         />
       </svg>
     </ic-navigation-button>`,
-    });
-    expect(page.root).toEqualHtml(`
+        });
+        expect(page.root).toEqualHtml(`
       <ic-navigation-button label="button1" onclick="alert('test')">
         <mock:shadow-root>
           <ic-button aria-label="button1" appearance="light" size="large" variant="icon">
@@ -37,48 +37,48 @@ describe("ic-navigation-button", () => {
         </svg>
       </ic-navigation-button>
     `);
-  });
-  it("renders differently if mode is menu", async () => {
-    const page = await newSpecPage({
-      components: [NavigationButton],
-      html: `<ic-navigation-button label="button1" onclick="alert('test')">
+    });
+    it("renders differently if mode is menu", async () => {
+        const page = await newSpecPage({
+            components: [NavigationButton],
+            html: `<ic-navigation-button label="button1" onclick="alert('test')">
       </ic-navigation-button>`,
+        });
+        page.rootInstance.mode = "menu";
+        const el = page.root.shadowRoot.querySelector("ic-button");
+        await page.waitForChanges();
+        expect(el.className).toEqual("popout-menu-button");
     });
-    page.rootInstance.mode = "menu";
-    const el = page.root.shadowRoot.querySelector("ic-button");
-    await page.waitForChanges();
-    expect(el.className).toEqual("popout-menu-button");
-  });
-  it("correctly sets mode on menu open and close", async () => {
-    const page = await newSpecPage({
-      components: [NavigationButton],
-      html: `<ic-navigation-button label="button1" onclick="alert('test')">
+    it("correctly sets mode on menu open and close", async () => {
+        const page = await newSpecPage({
+            components: [NavigationButton],
+            html: `<ic-navigation-button label="button1" onclick="alert('test')">
       </ic-navigation-button>`,
+        });
+        await page.rootInstance.navBarMenuOpenHandler();
+        await page.waitForChanges();
+        expect(page.rootInstance.mode).toEqual("menu");
+        await page.rootInstance.navBarMenuCloseHandler();
+        await page.waitForChanges();
+        expect(page.rootInstance.mode).toEqual("navbar");
     });
-    await page.rootInstance.navBarMenuOpenHandler();
-    await page.waitForChanges();
-    expect(page.rootInstance.mode).toEqual("menu");
-    await page.rootInstance.navBarMenuCloseHandler();
-    await page.waitForChanges();
-    expect(page.rootInstance.mode).toEqual("navbar");
-  });
-  it("correctly sets appearance on theme change", async () => {
-    const page = await newSpecPage({
-      components: [NavigationButton],
-      html: `<ic-navigation-button label="button1" onclick="alert('test')">
+    it("correctly sets appearance on theme change", async () => {
+        const page = await newSpecPage({
+            components: [NavigationButton],
+            html: `<ic-navigation-button label="button1" onclick="alert('test')">
       </ic-navigation-button>`,
+        });
+        await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
+        await page.waitForChanges();
+        expect(page.rootInstance.initialAppearance).toBe("dark");
     });
-    await page.rootInstance.themeChangeHandler({ detail: { mode: "dark" } });
-    await page.waitForChanges();
-    expect(page.rootInstance.initialAppearance).toBe("dark");
-  });
-  it("correctly sets focus", async () => {
-    const page = await newSpecPage({
-      components: [NavigationButton, Button],
-      html: `<ic-navigation-button label="button1" onclick="alert('test')">
+    it("correctly sets focus", async () => {
+        const page = await newSpecPage({
+            components: [NavigationButton, Button],
+            html: `<ic-navigation-button label="button1" onclick="alert('test')">
       </ic-navigation-button>`,
+        });
+        await page.rootInstance.setFocus();
     });
-    await page.rootInstance.setFocus();
-  });
 });
 //# sourceMappingURL=ic-navigation-button.spec.js.map

package/dist/collection/components/ic-navigation-button/test/basic/ic-navigation-button.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-navigation-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-button/test/basic/ic-navigation-button.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;EACpC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;;;;;;;;;;;;;;;;;4BAiBgB;KACvB,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;IACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,MAAM,CAAC;IAChC,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAE3D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;EACrD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;IAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;IAChD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAE/C,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,CAAC;IACjD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;EACnD,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;IACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;MAC9B,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;IACzE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EAC3D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC;MACtC,IAAI,EAAE;8BACkB;KACzB,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;EACrC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationButton } from \"../../ic-navigation-button\";\n\ndescribe(\"ic-navigation-button\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button\n        label=\"button1\"\n        onclick=\"alert('test')\"\n      >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n    </ic-navigation-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n        <mock:shadow-root>\n          <ic-button aria-label=\"button1\" appearance=\"light\" size=\"large\" variant=\"icon\">\n            <slot name=\"icon\" slot=\"left-icon\"></slot>\n          </ic-button>\n        </mock:shadow-root>\n        <svg fill=\"#000000\" height=\"24px\" slot=\"icon\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"></path>\n        </svg>\n      </ic-navigation-button>\n    `);\n  });\n\n  it(\"renders differently if mode is menu\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    page.rootInstance.mode = \"menu\";\n    const el = page.root.shadowRoot.querySelector(\"ic-button\");\n\n    await page.waitForChanges();\n    expect(el.className).toEqual(\"popout-menu-button\");\n  });\n\n  it(\"correctly sets mode on menu open and close\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.navBarMenuOpenHandler();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.mode).toEqual(\"menu\");\n\n    await page.rootInstance.navBarMenuCloseHandler();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.mode).toEqual(\"navbar\");\n  });\n\n  it(\"correctly sets appearance on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.initialAppearance).toBe(\"dark\");\n  });\n\n  it(\"correctly sets focus\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton, Button],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.setFocus();\n  });\n});\n"]}
+{"version":3,"file":"ic-navigation-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-navigation-button/test/basic/ic-navigation-button.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE;;;;;;;;;;;;;;;;;4BAiBgB;SACvB,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE;8BACkB;SACzB,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,MAAM,CAAC;QAChC,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAE3D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,CAAC;IACrD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE;8BACkB;SACzB,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,qBAAqB,EAAE,CAAC;QAChD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAE/C,MAAM,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,CAAC;QACjD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QACzD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,CAAC;YAC9B,IAAI,EAAE;8BACkB;SACzB,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC;QACzE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,gBAAgB,EAAE,MAAM,CAAC;YACtC,IAAI,EAAE;8BACkB;SACzB,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { NavigationButton } from \"../../ic-navigation-button\";\n\ndescribe(\"ic-navigation-button\", () => {\n  it(\"renders\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button\n        label=\"button1\"\n        onclick=\"alert('test')\"\n      >\n      <svg\n        slot=\"icon\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        height=\"24px\"\n        viewBox=\"0 0 24 24\"\n        width=\"24px\"\n        fill=\"#000000\"\n      >\n        <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n        <path\n          d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"\n        />\n      </svg>\n    </ic-navigation-button>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n        <mock:shadow-root>\n          <ic-button aria-label=\"button1\" appearance=\"light\" size=\"large\" variant=\"icon\">\n            <slot name=\"icon\" slot=\"left-icon\"></slot>\n          </ic-button>\n        </mock:shadow-root>\n        <svg fill=\"#000000\" height=\"24px\" slot=\"icon\" viewBox=\"0 0 24 24\" width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path>\n          <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z\"></path>\n        </svg>\n      </ic-navigation-button>\n    `);\n  });\n\n  it(\"renders differently if mode is menu\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    page.rootInstance.mode = \"menu\";\n    const el = page.root.shadowRoot.querySelector(\"ic-button\");\n\n    await page.waitForChanges();\n    expect(el.className).toEqual(\"popout-menu-button\");\n  });\n\n  it(\"correctly sets mode on menu open and close\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.navBarMenuOpenHandler();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.mode).toEqual(\"menu\");\n\n    await page.rootInstance.navBarMenuCloseHandler();\n    await page.waitForChanges();\n\n    expect(page.rootInstance.mode).toEqual(\"navbar\");\n  });\n\n  it(\"correctly sets appearance on theme change\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.themeChangeHandler({ detail: { mode: \"dark\" } });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.initialAppearance).toBe(\"dark\");\n  });\n\n  it(\"correctly sets focus\", async () => {\n    const page = await newSpecPage({\n      components: [NavigationButton, Button],\n      html: `<ic-navigation-button label=\"button1\" onclick=\"alert('test')\">\n      </ic-navigation-button>`,\n    });\n\n    await page.rootInstance.setFocus();\n  });\n});\n"]}

package/dist/collection/components/ic-navigation-group/ic-navigation-group.css

@@ -450,7 +450,7 @@ video {
 }
 
 :host(.in-side-menu) {
-  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-200);
+  border-bottom: var(--ic-border-width) solid var(--ic-architectural-200);
   padding: var(--ic-space-md) 0;
 }