@ukic/web-components 2.8.0 → 2.10.0

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

@@ -1,12 +1,12 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { Alert } from "../../ic-alert";
 describe("ic-alert component", () => {
-  it("should render with a heading when supplied", async () => {
-    const page = await newSpecPage({
-      components: [Alert],
-      html: `<ic-alert heading="Test heading"></ic-alert>`,
-    });
-    expect(page.root).toEqualHtml(`
+    it("should render with a heading when supplied", async () => {
+        const page = await newSpecPage({
+            components: [Alert],
+            html: `<ic-alert heading="Test heading"></ic-alert>`,
+        });
+        expect(page.root).toEqualHtml(`
         <ic-alert class="dark" heading="Test heading" role="alert">
             <mock:shadow-root>
                 <div class="container container-neutral">
@@ -33,13 +33,13 @@ describe("ic-alert component", () => {
                 </div>
             </mock:shadow-root>
         </ic-alert>`);
-  });
-  it("should render with a message when supplied", async () => {
-    const page = await newSpecPage({
-      components: [Alert],
-      html: `<ic-alert message="Test message"></ic-alert>`,
     });
-    expect(page.root).toEqualHtml(`
+    it("should render with a message when supplied", async () => {
+        const page = await newSpecPage({
+            components: [Alert],
+            html: `<ic-alert message="Test message"></ic-alert>`,
+        });
+        expect(page.root).toEqualHtml(`
         <ic-alert class="dark" message="Test message" role="alert">
             <mock:shadow-root>
                 <div class="container container-neutral">
@@ -63,13 +63,13 @@ describe("ic-alert component", () => {
                 </div>
             </mock:shadow-root>
         </ic-alert>`);
-  });
-  it("should render an action in the correct position when supplied", async () => {
-    const page = await newSpecPage({
-      components: [Alert],
-      html: `<ic-alert message="This has an action"><button slot="action"></button></ic-alert>`,
     });
-    expect(page.root).toEqualHtml(`
+    it("should render an action in the correct position when supplied", async () => {
+        const page = await newSpecPage({
+            components: [Alert],
+            html: `<ic-alert message="This has an action"><button slot="action"></button></ic-alert>`,
+        });
+        expect(page.root).toEqualHtml(`
         <ic-alert class="dark" message="This has an action" role="alert">
             <mock:shadow-root>
                 <div class="container container-neutral">
@@ -97,13 +97,13 @@ describe("ic-alert component", () => {
             </mock:shadow-root>
             <button slot="action"></button>
         </ic-alert>`);
-  });
-  it("should render with a dismiss icon when the prop is applied", async () => {
-    const page = await newSpecPage({
-      components: [Alert],
-      html: `<ic-alert message="This is dismissible" dismissible=true></ic-alert>`,
     });
-    expect(page.root).toEqualHtml(`
+    it("should render with a dismiss icon when the prop is applied", async () => {
+        const page = await newSpecPage({
+            components: [Alert],
+            html: `<ic-alert message="This is dismissible" dismissible=true></ic-alert>`,
+        });
+        expect(page.root).toEqualHtml(`
             <ic-alert class="dark" message="This is dismissible" dismissible=true role="alert">
                 <mock:shadow-root>
                     <div class="container container-neutral">
@@ -130,13 +130,13 @@ describe("ic-alert component", () => {
                     </div>
                 </mock:shadow-root>
             </ic-alert>`);
-  });
-  it("should render an element in the message slot", async () => {
-    const page = await newSpecPage({
-      components: [Alert],
-      html: `<ic-alert heading="Using custom message"><ic-typography variant="h1" slot="message">Custom h1 message</ic-typography></ic-alert>`,
     });
-    expect(page.root).toEqualHtml(`
+    it("should render an element in the message slot", async () => {
+        const page = await newSpecPage({
+            components: [Alert],
+            html: `<ic-alert heading="Using custom message"><ic-typography variant="h1" slot="message">Custom h1 message</ic-typography></ic-alert>`,
+        });
+        expect(page.root).toEqualHtml(`
         <ic-alert class="dark" heading="Using custom message" role="alert">
             <mock:shadow-root>
                 <div class="container container-neutral">
@@ -163,20 +163,20 @@ describe("ic-alert component", () => {
             </mock:shadow-root>
             <ic-typography variant="h1" slot="message">Custom h1 message</ic-typography>
         </ic-alert>`);
-  });
-  it("should close on dismiss icon click", async () => {
-    const page = await newSpecPage({
-      components: [Alert],
-      html: `<ic-alert message="This is dismissible" dismissible=true></ic-alert>`,
     });
-    let alert = await page.root.shadowRoot.querySelector("div.container-neutral");
-    const dismissButton = await page.root.shadowRoot.querySelector("ic-button");
-    expect(alert).not.toBeNull();
-    expect(dismissButton).not.toBeNull();
-    await dismissButton.click();
-    await page.waitForChanges();
-    alert = await page.root.shadowRoot.querySelector("div.container-neutral");
-    expect(alert).toBeNull();
-  });
+    it("should close on dismiss icon click", async () => {
+        const page = await newSpecPage({
+            components: [Alert],
+            html: `<ic-alert message="This is dismissible" dismissible=true></ic-alert>`,
+        });
+        let alert = await page.root.shadowRoot.querySelector("div.container-neutral");
+        const dismissButton = await page.root.shadowRoot.querySelector("ic-button");
+        expect(alert).not.toBeNull();
+        expect(dismissButton).not.toBeNull();
+        await dismissButton.click();
+        await page.waitForChanges();
+        alert = await page.root.shadowRoot.querySelector("div.container-neutral");
+        expect(alert).toBeNull();
+    });
 });
 //# sourceMappingURL=ic-alert.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ic-alert.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/basic/ic-alert.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../ic-alert\";\n\ndescribe(\"ic-alert component\", () => {\n  it(\"should render with a heading when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" heading=\"Test heading\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n                                <p>\n                                    Test heading\n                                </p>\n                            </ic-typography>\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\"></ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n        </ic-alert>`);\n  });\n\n  it(\"should render with a message when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"Test message\"></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" message=\"Test message\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                    <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\">\n                                    Test message\n                                </ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n        </ic-alert>`);\n  });\n\n  it(\"should render an action in the correct position when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"This has an action\"><button slot=\"action\"></button></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" message=\"This has an action\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\">\n                                    This has an action\n                                </ic-typography>\n                            </slot>\n                        </div>\n                        <div class=\"alert-action-container\">\n                            <slot name=\"action\"></slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n            <button slot=\"action\"></button>\n        </ic-alert>`);\n  });\n\n  it(\"should render with a dismiss icon when the prop is applied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n            <ic-alert class=\"dark\" message=\"This is dismissible\" dismissible=true role=\"alert\">\n                <mock:shadow-root>\n                    <div class=\"container container-neutral\">\n                        <div class=\"alert-icon-container\">\n                            <div class=\"divider divider-neutral\"></div>\n                            <span class=\"alert-icon icon-neutral svg-container\">\n                                svg\n                            </span>\n                        </div>\n                        <div class=\"alert-content\">\n                            <div class=\"alert-message\">\n                                <slot name=\"message\">\n                                    <ic-typography variant=\"body\">\n                                        This is dismissible\n                                    </ic-typography>\n                                </slot>\n                            </div>\n                        </div>\n                        <div class=\"dismiss-icon-container\">\n                            <ic-button appearance=\"dark\" class=\"dismiss-icon svg-container\" title=\"dismiss\" variant=\"icon\">\n                                svg\n                            </ic-button>\n                        </div>\n                    </div>\n                </mock:shadow-root>\n            </ic-alert>`);\n  });\n\n  it(\"should render an element in the message slot\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert heading=\"Using custom message\"><ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" heading=\"Using custom message\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                            <span class=\"alert-icon icon-neutral svg-container\">\n                                svg\n                            </span>\n                        </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n                                <p>\n                                    Using custom message\n                                </p>\n                            </ic-typography>\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\"></ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\"></div>\n                </div>\n            </mock:shadow-root>\n            <ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography>\n        </ic-alert>`);\n  });\n\n  it(\"should close on dismiss icon click\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n    });\n\n    let alert = await page.root.shadowRoot.querySelector(\n      \"div.container-neutral\"\n    );\n    const dismissButton = await page.root.shadowRoot.querySelector(\"ic-button\");\n\n    expect(alert).not.toBeNull();\n    expect(dismissButton).not.toBeNull();\n\n    await dismissButton.click();\n\n    await page.waitForChanges();\n    alert = await page.root.shadowRoot.querySelector(\"div.container-neutral\");\n\n    expect(alert).toBeNull();\n  });\n});\n"]}
+{"version":3,"file":"ic-alert.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/basic/ic-alert.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Alert } from \"../../ic-alert\";\n\ndescribe(\"ic-alert component\", () => {\n  it(\"should render with a heading when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert heading=\"Test heading\"></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" heading=\"Test heading\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n                                <p>\n                                    Test heading\n                                </p>\n                            </ic-typography>\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\"></ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n        </ic-alert>`);\n  });\n\n  it(\"should render with a message when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"Test message\"></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" message=\"Test message\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                    <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\">\n                                    Test message\n                                </ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n        </ic-alert>`);\n  });\n\n  it(\"should render an action in the correct position when supplied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"This has an action\"><button slot=\"action\"></button></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" message=\"This has an action\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                        <span class=\"alert-icon icon-neutral svg-container\">\n                            svg\n                        </span>\n                    </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\">\n                                    This has an action\n                                </ic-typography>\n                            </slot>\n                        </div>\n                        <div class=\"alert-action-container\">\n                            <slot name=\"action\"></slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\">\n                    </div>\n                </div>\n            </mock:shadow-root>\n            <button slot=\"action\"></button>\n        </ic-alert>`);\n  });\n\n  it(\"should render with a dismiss icon when the prop is applied\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n            <ic-alert class=\"dark\" message=\"This is dismissible\" dismissible=true role=\"alert\">\n                <mock:shadow-root>\n                    <div class=\"container container-neutral\">\n                        <div class=\"alert-icon-container\">\n                            <div class=\"divider divider-neutral\"></div>\n                            <span class=\"alert-icon icon-neutral svg-container\">\n                                svg\n                            </span>\n                        </div>\n                        <div class=\"alert-content\">\n                            <div class=\"alert-message\">\n                                <slot name=\"message\">\n                                    <ic-typography variant=\"body\">\n                                        This is dismissible\n                                    </ic-typography>\n                                </slot>\n                            </div>\n                        </div>\n                        <div class=\"dismiss-icon-container\">\n                            <ic-button appearance=\"dark\" class=\"dismiss-icon svg-container\" title=\"dismiss\" variant=\"icon\">\n                                svg\n                            </ic-button>\n                        </div>\n                    </div>\n                </mock:shadow-root>\n            </ic-alert>`);\n  });\n\n  it(\"should render an element in the message slot\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert heading=\"Using custom message\"><ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography></ic-alert>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n        <ic-alert class=\"dark\" heading=\"Using custom message\" role=\"alert\">\n            <mock:shadow-root>\n                <div class=\"container container-neutral\">\n                    <div class=\"alert-icon-container\">\n                        <div class=\"divider divider-neutral\"></div>\n                            <span class=\"alert-icon icon-neutral svg-container\">\n                                svg\n                            </span>\n                        </div>\n                    <div class=\"alert-content\">\n                        <div class=\"alert-message\">\n                            <ic-typography class=\"alert-title\" variant=\"subtitle-large\">\n                                <p>\n                                    Using custom message\n                                </p>\n                            </ic-typography>\n                            <slot name=\"message\">\n                                <ic-typography variant=\"body\"></ic-typography>\n                            </slot>\n                        </div>\n                    </div>\n                    <div class=\"dismiss-icon-container\"></div>\n                </div>\n            </mock:shadow-root>\n            <ic-typography variant=\"h1\" slot=\"message\">Custom h1 message</ic-typography>\n        </ic-alert>`);\n  });\n\n  it(\"should close on dismiss icon click\", async () => {\n    const page = await newSpecPage({\n      components: [Alert],\n      html: `<ic-alert message=\"This is dismissible\" dismissible=true></ic-alert>`,\n    });\n\n    let alert = await page.root.shadowRoot.querySelector(\n      \"div.container-neutral\"\n    );\n    const dismissButton = await page.root.shadowRoot.querySelector(\"ic-button\");\n\n    expect(alert).not.toBeNull();\n    expect(dismissButton).not.toBeNull();\n\n    await dismissButton.click();\n\n    await page.waitForChanges();\n    alert = await page.root.shadowRoot.querySelector(\"div.container-neutral\");\n\n    expect(alert).toBeNull();\n  });\n});\n"]}

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js

@@ -3,169 +3,169 @@ import ArrowUpward from "./assets/ArrowUpward.svg";
 import { onComponentPropUndefinedChange, onComponentRequiredPropUndefined, } from "../../utils/helpers";
 const backToTopLabel = "Back to top";
 export class BackToTop {
-  constructor() {
-    this.topObserver = null;
-    this.setTargetElVisible = (visible) => {
-      this.targetElVisible = visible;
-    };
-    this.setFooterVisible = (visible) => {
-      this.checkForClassificationBanner();
-      if (typeof window !== "undefined" && window.scrollY === 0) {
+    constructor() {
+        this.topObserver = null;
+        this.setTargetElVisible = (visible) => {
+            this.targetElVisible = visible;
+        };
+        this.setFooterVisible = (visible) => {
+            this.checkForClassificationBanner();
+            if (typeof window !== "undefined" && window.scrollY === 0) {
+                this.footerVisible = false;
+            }
+            else {
+                this.footerVisible = visible;
+            }
+        };
+        this.targetElObserverCallback = (entries) => {
+            this.setTargetElVisible(entries[0].isIntersecting);
+        };
+        this.footerObserverCallback = (entries) => {
+            this.setFooterVisible(entries[0].isIntersecting);
+        };
+        this.findTargetEl = (target) => {
+            let targetElement = null;
+            if (target === null || target === undefined) {
+                console.log("Error: No target ID specified for back to top component - defaulting to top of page");
+            }
+            else {
+                targetElement = document.querySelector(target.indexOf("#") === 0 ? target : "#" + target);
+                if (targetElement === null) {
+                    console.log(`Error: Back to top target element '${target}' not found - defaulting to top of page`);
+                }
+            }
+            return targetElement;
+        };
+        this.createTopObserver = (target) => {
+            this.targetEl = this.findTargetEl(target);
+            let objParent;
+            //remove old element & observer
+            if (this.topObserver !== null) {
+                const observedEl = document.querySelector("#ic-back-to-top-target");
+                if (observedEl !== null) {
+                    this.topObserver.unobserve(observedEl);
+                    observedEl.remove();
+                }
+            }
+            if (this.targetEl === null) {
+                objParent = document.body;
+                this.targetEl = objParent.firstElementChild;
+                this.isTargetElNull = true;
+            }
+            else {
+                objParent = this.targetEl.parentNode;
+                this.isTargetElNull = false;
+            }
+            //insert a new 0px height element before specified target that can be used to determine when page is scrolled
+            const objBackToTopTargetEl = document.createElement("div");
+            objBackToTopTargetEl.setAttribute("id", "ic-back-to-top-target");
+            objParent.insertBefore(objBackToTopTargetEl, this.targetEl);
+            // resize observer needs to factor in any top margin on the target el
+            const marginTop = getComputedStyle(this.targetEl).marginTop;
+            this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {
+                threshold: [0],
+                rootMargin: `${marginTop} 0px 0px 0px`,
+            });
+            this.topObserver.observe(objBackToTopTargetEl);
+        };
+        this.handleClick = () => {
+            if (this.isTargetElNull) {
+                window.scrollTo(0, 0);
+            }
+            else {
+                this.targetEl.scrollIntoView();
+            }
+        };
+        this.checkForClassificationBanner = () => {
+            //adjust position for classification banner at bottom
+            const banners = document.querySelectorAll("ic-classification-banner:not([inline='true'])");
+            this.bannerOffset = banners.length > 0;
+        };
+        this.bannerOffset = false;
         this.footerVisible = false;
-      }
-      else {
-        this.footerVisible = visible;
-      }
-    };
-    this.targetElObserverCallback = (entries) => {
-      this.setTargetElVisible(entries[0].isIntersecting);
-    };
-    this.footerObserverCallback = (entries) => {
-      this.setFooterVisible(entries[0].isIntersecting);
-    };
-    this.findTargetEl = (target) => {
-      let targetElement = null;
-      if (target === null || target === undefined) {
-        console.log("Error: No target ID specified for back to top component - defaulting to top of page");
-      }
-      else {
-        targetElement = document.querySelector(target.indexOf("#") === 0 ? target : "#" + target);
-        if (targetElement === null) {
-          console.log(`Error: Back to top target element '${target}' not found - defaulting to top of page`);
+        this.targetElVisible = true;
+        this.target = undefined;
+    }
+    watchPropHandler(newValue, oldValue) {
+        //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value
+        onComponentPropUndefinedChange(oldValue, newValue, () => {
+            this.createTopObserver(newValue);
+        });
+    }
+    componentWillLoad() {
+        this.createTopObserver(this.target);
+        this.checkForClassificationBanner();
+        //observer for when footer scrolls into view
+        let footers = document.querySelectorAll("ic-footer");
+        if (footers.length === 0) {
+            footers = document.querySelectorAll("footer");
         }
-      }
-      return targetElement;
-    };
-    this.createTopObserver = (target) => {
-      this.targetEl = this.findTargetEl(target);
-      let objParent;
-      //remove old element & observer
-      if (this.topObserver !== null) {
-        const observedEl = document.querySelector("#ic-back-to-top-target");
-        if (observedEl !== null) {
-          this.topObserver.unobserve(observedEl);
-          observedEl.remove();
+        if (footers.length) {
+            const footerEl = footers[footers.length - 1];
+            const threshold = this.bannerOffset ? 0.15 : 0;
+            const footerObserver = new IntersectionObserver(this.footerObserverCallback, { threshold: [threshold] });
+            footerObserver.observe(footerEl);
         }
-      }
-      if (this.targetEl === null) {
-        objParent = document.body;
-        this.targetEl = objParent.firstElementChild;
-        this.isTargetElNull = true;
-      }
-      else {
-        objParent = this.targetEl.parentNode;
-        this.isTargetElNull = false;
-      }
-      //insert a new 0px height element before specified target that can be used to determine when page is scrolled
-      const objBackToTopTargetEl = document.createElement("div");
-      objBackToTopTargetEl.setAttribute("id", "ic-back-to-top-target");
-      objParent.insertBefore(objBackToTopTargetEl, this.targetEl);
-      // resize observer needs to factor in any top margin on the target el
-      const marginTop = getComputedStyle(this.targetEl).marginTop;
-      this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {
-        threshold: [0],
-        rootMargin: `${marginTop} 0px 0px 0px`,
-      });
-      this.topObserver.observe(objBackToTopTargetEl);
-    };
-    this.handleClick = () => {
-      if (this.isTargetElNull) {
-        window.scrollTo(0, 0);
-      }
-      else {
-        this.targetEl.scrollIntoView();
-      }
-    };
-    this.checkForClassificationBanner = () => {
-      //adjust position for classification banner at bottom
-      const banners = document.querySelectorAll("ic-classification-banner:not([inline='true'])");
-      this.bannerOffset = banners.length > 0;
-    };
-    this.bannerOffset = false;
-    this.footerVisible = false;
-    this.targetElVisible = true;
-    this.target = undefined;
-  }
-  watchPropHandler(newValue, oldValue) {
-    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value
-    onComponentPropUndefinedChange(oldValue, newValue, () => {
-      this.createTopObserver(newValue);
-    });
-  }
-  componentWillLoad() {
-    this.createTopObserver(this.target);
-    this.checkForClassificationBanner();
-    //observer for when footer scrolls into view
-    let footers = document.querySelectorAll("ic-footer");
-    if (footers.length === 0) {
-      footers = document.querySelectorAll("footer");
     }
-    if (footers.length) {
-      const footerEl = footers[footers.length - 1];
-      const threshold = this.bannerOffset ? 0.15 : 0;
-      const footerObserver = new IntersectionObserver(this.footerObserverCallback, { threshold: [threshold] });
-      footerObserver.observe(footerEl);
+    componentDidLoad() {
+        onComponentRequiredPropUndefined([{ prop: this.target, propName: "target" }], "Back to Top");
+    }
+    render() {
+        const { bannerOffset, targetElVisible, footerVisible } = this;
+        return (h("button", { class: {
+                ["ic-back-to-top-link"]: true,
+                ["offset-banner"]: bannerOffset,
+                ["show"]: !targetElVisible,
+                ["by-footer"]: footerVisible,
+            }, "aria-label": backToTopLabel, onClick: this.handleClick }, h("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), h("ic-typography", { variant: "subtitle-small" }, h("span", null, backToTopLabel))));
+    }
+    static get is() { return "ic-back-to-top"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-back-to-top.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-back-to-top.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The ID of the element to jump back to when the link is clicked."
+                },
+                "attribute": "target",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "bannerOffset": {},
+            "footerVisible": {},
+            "targetElVisible": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "target",
+                "methodName": "watchPropHandler"
+            }];
     }
-  }
-  componentDidLoad() {
-    onComponentRequiredPropUndefined([{ prop: this.target, propName: "target" }], "Back to Top");
-  }
-  render() {
-    const { bannerOffset, targetElVisible, footerVisible } = this;
-    return (h("button", { class: {
-        ["ic-back-to-top-link"]: true,
-        ["offset-banner"]: bannerOffset,
-        ["show"]: !targetElVisible,
-        ["by-footer"]: footerVisible,
-      }, "aria-label": backToTopLabel, onClick: this.handleClick }, h("span", { class: "ic-back-to-top-icon", innerHTML: ArrowUpward }), h("ic-typography", { variant: "subtitle-small" }, h("span", null, backToTopLabel))));
-  }
-  static get is() { return "ic-back-to-top"; }
-  static get encapsulation() { return "shadow"; }
-  static get delegatesFocus() { return true; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ic-back-to-top.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ic-back-to-top.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The ID of the element to jump back to when the link is clicked."
-        },
-        "attribute": "target",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "bannerOffset": {},
-      "footerVisible": {},
-      "targetElVisible": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "target",
-        "methodName": "watchPropHandler"
-      }];
-  }
 }
 //# sourceMappingURL=ic-back-to-top.js.map

package/dist/collection/components/ic-back-to-top/ic-back-to-top.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BackToTop {\n  private isTargetElNull: boolean;\n  private targetEl: Element;\n  private topObserver: IntersectionObserver = null;\n\n  @Element() el: HTMLIcBackToTopElement;\n\n  @State() bannerOffset: boolean = false;\n  @State() footerVisible: boolean = false;\n  @State() targetElVisible: boolean = true;\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n    this.checkForClassificationBanner();\n\n    //observer for when footer scrolls into view\n    let footers = document.querySelectorAll(\n      \"ic-footer\"\n    ) as NodeListOf<HTMLElement>;\n    if (footers.length === 0) {\n      footers = document.querySelectorAll(\"footer\");\n    }\n\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.checkForClassificationBanner();\n    if (typeof window !== \"undefined\" && window.scrollY === 0) {\n      this.footerVisible = false;\n    } else {\n      this.footerVisible = visible;\n    }\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element => {\n    let targetElement: Element = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        target.indexOf(\"#\") === 0 ? target : \"#\" + target\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = getComputedStyle(this.targetEl).marginTop;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl.scrollIntoView();\n    }\n  };\n\n  private checkForClassificationBanner = () => {\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    this.bannerOffset = banners.length > 0;\n  };\n\n  render() {\n    const { bannerOffset, targetElVisible, footerVisible } = this;\n    return (\n      <button\n        class={{\n          [\"ic-back-to-top-link\"]: true,\n          [\"offset-banner\"]: bannerOffset,\n          [\"show\"]: !targetElVisible,\n          [\"by-footer\"]: footerVisible,\n        }}\n        aria-label={backToTopLabel}\n        onClick={this.handleClick}\n      >\n        <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n        <ic-typography variant=\"subtitle-small\">\n          <span>{backToTopLabel}</span>\n        </ic-typography>\n      </button>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ic-back-to-top/ic-back-to-top.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport ArrowUpward from \"./assets/ArrowUpward.svg\";\nimport {\n  onComponentPropUndefinedChange,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\nconst backToTopLabel = \"Back to top\";\n\n@Component({\n  tag: \"ic-back-to-top\",\n  styleUrl: \"ic-back-to-top.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BackToTop {\n  private isTargetElNull: boolean;\n  private targetEl: Element;\n  private topObserver: IntersectionObserver = null;\n\n  @Element() el: HTMLIcBackToTopElement;\n\n  @State() bannerOffset: boolean = false;\n  @State() footerVisible: boolean = false;\n  @State() targetElVisible: boolean = true;\n\n  /**\n   * The ID of the element to jump back to when the link is clicked.\n   */\n  @Prop() target!: string;\n\n  @Watch(\"target\")\n  watchPropHandler(newValue: string, oldValue: string): void {\n    //added for gatsby rehydration issue where prop is initially undefined but then changes to actual value\n    onComponentPropUndefinedChange(oldValue, newValue, () => {\n      this.createTopObserver(newValue);\n    });\n  }\n\n  componentWillLoad(): void {\n    this.createTopObserver(this.target);\n    this.checkForClassificationBanner();\n\n    //observer for when footer scrolls into view\n    let footers = document.querySelectorAll(\n      \"ic-footer\"\n    ) as NodeListOf<HTMLElement>;\n    if (footers.length === 0) {\n      footers = document.querySelectorAll(\"footer\");\n    }\n\n    if (footers.length) {\n      const footerEl = footers[footers.length - 1];\n      const threshold = this.bannerOffset ? 0.15 : 0;\n      const footerObserver = new IntersectionObserver(\n        this.footerObserverCallback,\n        { threshold: [threshold] }\n      );\n      footerObserver.observe(footerEl);\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.target, propName: \"target\" }],\n      \"Back to Top\"\n    );\n  }\n\n  private setTargetElVisible = (visible: boolean) => {\n    this.targetElVisible = visible;\n  };\n\n  private setFooterVisible = (visible: boolean) => {\n    this.checkForClassificationBanner();\n    if (typeof window !== \"undefined\" && window.scrollY === 0) {\n      this.footerVisible = false;\n    } else {\n      this.footerVisible = visible;\n    }\n  };\n\n  private targetElObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setTargetElVisible(entries[0].isIntersecting);\n  };\n\n  private footerObserverCallback = (entries: IntersectionObserverEntry[]) => {\n    this.setFooterVisible(entries[0].isIntersecting);\n  };\n\n  private findTargetEl = (target: string): Element => {\n    let targetElement: Element = null;\n    if (target === null || target === undefined) {\n      console.log(\n        \"Error: No target ID specified for back to top component - defaulting to top of page\"\n      );\n    } else {\n      targetElement = document.querySelector(\n        target.indexOf(\"#\") === 0 ? target : \"#\" + target\n      );\n      if (targetElement === null) {\n        console.log(\n          `Error: Back to top target element '${target}' not found - defaulting to top of page`\n        );\n      }\n    }\n    return targetElement;\n  };\n\n  private createTopObserver = (target: string) => {\n    this.targetEl = this.findTargetEl(target);\n    let objParent: HTMLElement;\n\n    //remove old element & observer\n    if (this.topObserver !== null) {\n      const observedEl = document.querySelector(\"#ic-back-to-top-target\");\n      if (observedEl !== null) {\n        this.topObserver.unobserve(observedEl);\n        observedEl.remove();\n      }\n    }\n\n    if (this.targetEl === null) {\n      objParent = document.body;\n      this.targetEl = objParent.firstElementChild;\n      this.isTargetElNull = true;\n    } else {\n      objParent = this.targetEl.parentNode as HTMLElement;\n      this.isTargetElNull = false;\n    }\n\n    //insert a new 0px height element before specified target that can be used to determine when page is scrolled\n    const objBackToTopTargetEl = document.createElement(\"div\");\n    objBackToTopTargetEl.setAttribute(\"id\", \"ic-back-to-top-target\");\n    objParent.insertBefore(objBackToTopTargetEl, this.targetEl);\n\n    // resize observer needs to factor in any top margin on the target el\n    const marginTop = getComputedStyle(this.targetEl).marginTop;\n    this.topObserver = new IntersectionObserver(this.targetElObserverCallback, {\n      threshold: [0],\n      rootMargin: `${marginTop} 0px 0px 0px`,\n    });\n    this.topObserver.observe(objBackToTopTargetEl);\n  };\n\n  private handleClick = () => {\n    if (this.isTargetElNull) {\n      window.scrollTo(0, 0);\n    } else {\n      this.targetEl.scrollIntoView();\n    }\n  };\n\n  private checkForClassificationBanner = () => {\n    //adjust position for classification banner at bottom\n    const banners = document.querySelectorAll(\n      \"ic-classification-banner:not([inline='true'])\"\n    );\n    this.bannerOffset = banners.length > 0;\n  };\n\n  render() {\n    const { bannerOffset, targetElVisible, footerVisible } = this;\n    return (\n      <button\n        class={{\n          [\"ic-back-to-top-link\"]: true,\n          [\"offset-banner\"]: bannerOffset,\n          [\"show\"]: !targetElVisible,\n          [\"by-footer\"]: footerVisible,\n        }}\n        aria-label={backToTopLabel}\n        onClick={this.handleClick}\n      >\n        <span class=\"ic-back-to-top-icon\" innerHTML={ArrowUpward} />\n\n        <ic-typography variant=\"subtitle-small\">\n          <span>{backToTopLabel}</span>\n        </ic-typography>\n      </button>\n    );\n  }\n}\n"]}