@swisspost/internet-header 1.13.0 → 1.13.2

package/dist/collection/components/post-internet-breadcrumbs/post-internet-breadcrumbs.js

@@ -9,318 +9,316 @@ import { SvgSprite } from "../../utils/svg-sprite.component";
 import { BreadcrumbList } from "./components/breadcrumb-list.component";
 import { prefersReducedMotion } from "../../utils/utils";
 export class PostInternetBreadcrumbs {
-  constructor() {
-    this.customItems = undefined;
-    this.hideButtons = false;
-    this.customBreadcrumbItems = undefined;
-    this.overlayVisible = undefined;
-    this.isConcatenated = undefined;
-    this.dropdownOpen = false;
-    this.refsReady = false;
-  }
-  /**
-   * Toggle an overlay associated with a button.
-   * @param {IBreadcrumbOverlay['id']} overlayId
-   */
-  async toggleOverlayById(overlayId) {
-    var _a, _b;
-    const buttons = (_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.breadcrumb.buttons;
-    const overlay = (_b = buttons === null || buttons === void 0 ? void 0 : buttons.find(button => button.overlay.id === overlayId)) === null || _b === void 0 ? void 0 : _b.overlay;
-    if (!overlay) {
-      console.warn(`Internet Header: Failed to toggle overlay with id #${overlayId} as it was not found in the breadcrumb buttons config.`);
-      return;
+    constructor() {
+        this.customItems = undefined;
+        this.hideButtons = false;
+        this.customBreadcrumbItems = undefined;
+        this.overlayVisible = undefined;
+        this.isConcatenated = undefined;
+        this.dropdownOpen = false;
+        this.refsReady = false;
     }
-    this.toggleOverlay(overlay);
-  }
-  connectedCallback() {
-    this.debouncedResize = debounce(200, this.handleResize.bind(this));
-    window.addEventListener('resize', this.debouncedResize, { passive: true });
-  }
-  disconnectedCallback() {
-    window.removeEventListener('resize', this.debouncedResize);
-    window.removeEventListener('click', this.handleWindowClick);
-    clearAllBodyScrollLocks();
-  }
-  async componentWillLoad() {
-    // Wait for the config to arrive, then render the header
-    try {
-      this.customBreadcrumbItems =
-        typeof this.customItems === 'string' ? JSON.parse(this.customItems) : this.customItems;
+    /**
+     * Toggle an overlay associated with a button.
+     * @param {IBreadcrumbOverlay['id']} overlayId
+     */
+    async toggleOverlayById(overlayId) {
+        var _a, _b;
+        const buttons = (_a = state.localizedConfig) === null || _a === void 0 ? void 0 : _a.breadcrumb.buttons;
+        const overlay = (_b = buttons === null || buttons === void 0 ? void 0 : buttons.find(button => button.overlay.id === overlayId)) === null || _b === void 0 ? void 0 : _b.overlay;
+        if (!overlay) {
+            console.warn(`Internet Header: Failed to toggle overlay with id #${overlayId} as it was not found in the breadcrumb buttons config.`);
+            return;
+        }
+        this.toggleOverlay(overlay);
     }
-    catch (error) {
-      console.error(error);
+    connectedCallback() {
+        this.debouncedResize = debounce(200, this.handleResize.bind(this));
+        window.addEventListener('resize', this.debouncedResize, { passive: true });
     }
-  }
-  componentDidLoad() {
-    // Initially check if breadcrumb items are concatenated
-    window.requestAnimationFrame(() => {
-      this.handleResize();
-    });
-  }
-  handleCustomConfigChange(newValue) {
-    try {
-      this.customBreadcrumbItems = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.debouncedResize);
+        window.removeEventListener('click', this.handleWindowClick);
+        clearAllBodyScrollLocks();
     }
-    catch (error) {
-      console.error(error);
+    async componentWillLoad() {
+        // Wait for the config to arrive, then render the header
+        try {
+            this.customBreadcrumbItems =
+                typeof this.customItems === 'string' ? JSON.parse(this.customItems) : this.customItems;
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    componentDidLoad() {
+        // Initially check if breadcrumb items are concatenated
+        window.requestAnimationFrame(() => {
+            this.handleResize();
+        });
     }
-  }
-  handleResize() {
-    // Catch and exclude vertical resize events, e.g. scrolling in iPhone
-    if (window.innerWidth === this.lastWindowWidth) {
-      return;
+    handleCustomConfigChange(newValue) {
+        try {
+            this.customBreadcrumbItems = typeof newValue === 'string' ? JSON.parse(newValue) : newValue;
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    handleResize() {
+        // Catch and exclude vertical resize events, e.g. scrolling in iPhone
+        if (window.innerWidth === this.lastWindowWidth) {
+            return;
+        }
+        this.lastWindowWidth = window.innerWidth;
+        this.checkConcatenation();
     }
-    this.lastWindowWidth = window.innerWidth;
-    this.checkConcatenation();
-  }
-  checkConcatenation() {
-    if (this.controlNavRef && this.visibleNavRef) {
-      this.refsReady = true;
-      // Delay the check
-      window.requestAnimationFrame(() => {
+    checkConcatenation() {
         if (this.controlNavRef && this.visibleNavRef) {
-          this.isConcatenated = this.controlNavRef.clientWidth > this.visibleNavRef.clientWidth;
+            this.refsReady = true;
+            // Delay the check
+            window.requestAnimationFrame(() => {
+                if (this.controlNavRef && this.visibleNavRef) {
+                    this.isConcatenated = this.controlNavRef.clientWidth > this.visibleNavRef.clientWidth;
+                }
+            });
+        }
+    }
+    toggleOverlay(overlay, force) {
+        var _a;
+        const newVisibility = force !== null && force !== void 0 ? force : !this.overlayVisible;
+        if (newVisibility) {
+            // Will trigger overlayRef() once the HTML is rendered
+            this.overlayVisible = newVisibility;
+            this.currentOverlay = overlay;
+            this.setBodyScroll(overlay);
+        }
+        else {
+            const activeToggler = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.breadcrumb-buttons [aria-expanded="true"]');
+            if (this.openAnimation && this.loadedAnimation) {
+                this.openAnimation.reverse();
+                this.loadedAnimation.reverse();
+                // Delay hiding overlay until after the animation finishes
+                Promise.all([this.openAnimation.finished, this.loadedAnimation.finished]).then(() => {
+                    if (activeToggler) {
+                        activeToggler.focus();
+                    }
+                    this.overlayVisible = newVisibility;
+                    this.setBodyScroll(overlay);
+                });
+            }
+        }
+    }
+    /**
+     * Disable or re-enable body scrolling, depending on whether overlay is visible or not
+     */
+    setBodyScroll(overlay) {
+        if (this.overlayVisible) {
+            // @ts-ignore
+            disableBodyScroll(overlay, { reserveScrollBarGap: true });
+        }
+        else {
+            // @ts-ignore
+            enableBodyScroll(overlay);
         }
-      });
     }
-  }
-  toggleOverlay(overlay, force) {
-    var _a;
-    const newVisibility = force !== null && force !== void 0 ? force : !this.overlayVisible;
-    if (newVisibility) {
-      // Will trigger overlayRef() once the HTML is rendered
-      this.overlayVisible = newVisibility;
-      this.currentOverlay = overlay;
-      this.setBodyScroll(overlay);
+    toggleDropdown(force) {
+        this.dropdownOpen = force !== null && force !== void 0 ? force : !this.dropdownOpen;
+        if (this.dropdownOpen) {
+            requestAnimationFrame(() => {
+                document.addEventListener('click', this.handleWindowClick.bind(this), { once: true });
+            });
+        }
+    }
+    handleWindowClick() {
+        this.toggleDropdown(false);
     }
-    else {
-      const activeToggler = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.breadcrumb-buttons [aria-expanded="true"]');
-      if (this.openAnimation && this.loadedAnimation) {
-        this.openAnimation.reverse();
-        this.loadedAnimation.reverse();
-        // Delay hiding overlay until after the animation finishes
-        Promise.all([this.openAnimation.finished, this.loadedAnimation.finished]).then(() => {
-          if (activeToggler) {
-            activeToggler.focus();
-          }
-          this.overlayVisible = newVisibility;
-          this.setBodyScroll(overlay);
+    registerIFrameResizer(iFrame) {
+        if (!iFrame) {
+            return;
+        }
+        iFrame.addEventListener('load', () => {
+            var _a, _b, _c;
+            iframeResizer({
+                heightCalculationMethod: 'taggedElement',
+                scrolling: true,
+                checkOrigin: false,
+            }, iFrame);
+            const duration = prefersReducedMotion ? 0 : 300;
+            this.loadedAnimation = (_a = iFrame.parentElement) === null || _a === void 0 ? void 0 : _a.animate([{ opacity: 1, visibility: 'visible', transform: 'translateY(0px)' }], { duration, fill: 'forwards' });
+            (_b = iFrame.parentElement) === null || _b === void 0 ? void 0 : _b.classList.add('loaded');
+            (_c = this.loadedAnimation) === null || _c === void 0 ? void 0 : _c.finished.then(() => {
+                var _a;
+                (_a = iFrame.parentElement) === null || _a === void 0 ? void 0 : _a.focus();
+            });
         });
-      }
     }
-  }
-  /**
-   * Disable or re-enable body scrolling, depending on whether overlay is visible or not
-   */
-  setBodyScroll(overlay) {
-    if (this.overlayVisible) {
-      // @ts-ignore
-      disableBodyScroll(overlay, { reserveScrollBarGap: true });
+    /**
+     * Reference function for the overlay element got called. It is either null (overlay closed)
+     * or contains the overlay element as parameter.
+     * @param e Overlay element or null
+     * @returns void
+     */
+    overlayRef(e) {
+        if (!e) {
+            return;
+        }
+        const duration = prefersReducedMotion ? 0 : 500;
+        this.openAnimation = e.animate([{ opacity: 1, visibility: 'visible' }], {
+            duration,
+            fill: 'forwards',
+        });
     }
-    else {
-      // @ts-ignore
-      enableBodyScroll(overlay);
+    handleKeyDown(event) {
+        if (event.key.toLowerCase() === 'escape') {
+            this.toggleOverlay(this.currentOverlay, false);
+        }
     }
-  }
-  toggleDropdown(force) {
-    this.dropdownOpen = force !== null && force !== void 0 ? force : !this.dropdownOpen;
-    if (this.dropdownOpen) {
-      requestAnimationFrame(() => {
-        document.addEventListener('click', this.handleWindowClick.bind(this), { once: true });
-      });
+    handleToggleDropdown() {
+        this.toggleDropdown();
     }
-  }
-  handleWindowClick() {
-    this.toggleDropdown(false);
-  }
-  registerIFrameResizer(iFrame) {
-    if (!iFrame) {
-      return;
+    handleToggleOverlay() {
+        this.toggleOverlay(this.currentOverlay, false);
     }
-    iFrame.addEventListener('load', () => {
-      var _a, _b, _c;
-      iframeResizer({
-        heightCalculationMethod: 'taggedElement',
-        scrolling: true,
-        checkOrigin: false,
-      }, iFrame);
-      const duration = prefersReducedMotion ? 0 : 300;
-      this.loadedAnimation = (_a = iFrame.parentElement) === null || _a === void 0 ? void 0 : _a.animate([{ opacity: 1, visibility: 'visible', transform: 'translateY(0px)' }], { duration, fill: 'forwards' });
-      (_b = iFrame.parentElement) === null || _b === void 0 ? void 0 : _b.classList.add('loaded');
-      (_c = this.loadedAnimation) === null || _c === void 0 ? void 0 : _c.finished.then(() => {
-        var _a;
-        (_a = iFrame.parentElement) === null || _a === void 0 ? void 0 : _a.focus();
-      });
-    });
-  }
-  /**
-   * Reference function for the overlay element got called. It is either null (overlay closed)
-   * or contains the overlay element as parameter.
-   * @param e Overlay element or null
-   * @returns void
-   */
-  overlayRef(e) {
-    if (!e) {
-      return;
+    handleControlNavRef(element) {
+        this.controlNavRef = element;
+        this.checkConcatenation();
     }
-    const duration = prefersReducedMotion ? 0 : 500;
-    this.openAnimation = e.animate([{ opacity: 1, visibility: 'visible' }], {
-      duration,
-      fill: 'forwards',
-    });
-  }
-  handleKeyDown(event) {
-    if (event.key.toLowerCase() === 'escape') {
-      this.toggleOverlay(this.currentOverlay, false);
+    handleVisibleNavRef(element) {
+        this.visibleNavRef = element;
+        this.checkConcatenation();
     }
-  }
-  handleToggleDropdown() {
-    this.toggleDropdown();
-  }
-  handleToggleOverlay() {
-    this.toggleOverlay(this.currentOverlay, false);
-  }
-  handleControlNavRef(element) {
-    this.controlNavRef = element;
-    this.checkConcatenation();
-  }
-  handleVisibleNavRef(element) {
-    this.visibleNavRef = element;
-    this.checkConcatenation();
-  }
-  render() {
-    // There is something wrong entirely
-    // eslint-disable-next-line @stencil-community/strict-boolean-conditions
-    if (!state) {
-      console.warn(`Internet Breadcrumbs: Could not load config. Please make sure that you included the <swisspost-internet-header></swisspost-internet-header> component.`);
-      return null;
+    render() {
+        // There is something wrong entirely
+        // eslint-disable-next-line @stencil-community/strict-boolean-conditions
+        if (!state) {
+            console.warn(`Internet Breadcrumbs: Could not load config. Please make sure that you included the <swisspost-internet-header></swisspost-internet-header> component.`);
+            return null;
+        }
+        // Config is not loaded yet
+        if (!state.localizedConfig) {
+            return null;
+        }
+        // Config has loaded but there is no breadcrumbs config
+        // eslint-disable-next-line @stencil-community/strict-boolean-conditions
+        if (!state.localizedConfig.breadcrumb) {
+            console.warn(`Internet Header: Current project "${state.projectId}" does not include a breadcrumb config. The breadcrumbs will not be rendered. Remove `, document.querySelector('swisspost-internet-breadcrumbs'), `from your markup or configure the breadcrumbs in your portal config to stop seeing this warning.`);
+            return null;
+        }
+        const breadcrumbConfig = state.localizedConfig.breadcrumb;
+        const items = this.customBreadcrumbItems !== undefined
+            ? [...breadcrumbConfig.items, ...this.customBreadcrumbItems]
+            : breadcrumbConfig.items;
+        return (h(Host, null, h(SvgSprite, null), h("div", { class: "breadcrumbs" }, h("div", { class: "hidden-control-breadcrumbs", "aria-hidden": "true", tabindex: "-1" }, h("nav", { class: "breadcrumbs-nav", ref: e => e !== undefined && this.handleControlNavRef(e) }, h(BreadcrumbList, { items: items, focusable: false, clickHandler: () => { } }))), h("nav", { "aria-label": breadcrumbConfig.a11yLabel, ref: e => e !== undefined && this.handleVisibleNavRef(e), class: {
+                'breadcrumbs-nav': true,
+                'visually-hidden': !this.refsReady,
+            } }, h(BreadcrumbList, { items: items, dropdownOpen: this.dropdownOpen, isConcatenated: this.isConcatenated, clickHandler: () => this.handleToggleDropdown() })), !this.hideButtons && (h("div", { class: "breadcrumb-buttons" }, breadcrumbConfig.buttons.map(button => (h("button", { class: "btn btn-secondary btn-icon", key: button.text, "aria-expanded": `${Boolean(this.overlayVisible && this.currentOverlay === button.overlay)}`, onClick: () => this.toggleOverlay(button.overlay, true) }, h(SvgIcon, { name: button.svgIcon.name }), h("span", { class: "visually-hidden" }, button.text)))))), this.overlayVisible && (h(OverlayComponent, { overlayRef: e => e !== undefined && this.overlayRef(e), iFrameRef: e => e !== undefined && this.registerIFrameResizer(e), overlay: this.currentOverlay, onClick: () => this.handleToggleOverlay(), onKeyDown: (e) => this.handleKeyDown(e), closeButtonText: state.localizedConfig.header.translations.closeButtonText }))), h("slot", null)));
     }
-    // Config is not loaded yet
-    if (!state.localizedConfig) {
-      return null;
+    static get is() { return "swisspost-internet-breadcrumbs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-internet-breadcrumbs.scss"]
+        };
     }
-    // Config has loaded but there is no breadcrumbs config
-    // eslint-disable-next-line @stencil-community/strict-boolean-conditions
-    if (!state.localizedConfig.breadcrumb) {
-      console.warn(`Internet Header: Current project "${state.projectId}" does not include a breadcrumb config. The breadcrumbs will not be rendered. Remove `, document.querySelector('swisspost-internet-breadcrumbs'), `from your markup or configure the breadcrumbs in your portal config to stop seeing this warning.`);
-      return null;
+    static get styleUrls() {
+        return {
+            "$": ["post-internet-breadcrumbs.css"]
+        };
     }
-    const breadcrumbConfig = state.localizedConfig.breadcrumb;
-    const items = this.customBreadcrumbItems !== undefined
-      ? [...breadcrumbConfig.items, ...this.customBreadcrumbItems]
-      : breadcrumbConfig.items;
-    return (h(Host, null, h(SvgSprite, null), h("div", { class: "breadcrumbs" }, h("div", { class: "hidden-control-breadcrumbs", "aria-hidden": "true", tabindex: "-1" }, h("nav", { class: "breadcrumbs-nav", ref: e => e !== undefined && this.handleControlNavRef(e) }, h(BreadcrumbList, { items: items, focusable: false, clickHandler: () => { } }))), h("nav", { "aria-label": breadcrumbConfig.a11yLabel, ref: e => e !== undefined && this.handleVisibleNavRef(e), class: {
-        'breadcrumbs-nav': true,
-        'visually-hidden': !this.refsReady,
-      } }, h(BreadcrumbList, { items: items, dropdownOpen: this.dropdownOpen, isConcatenated: this.isConcatenated, clickHandler: () => this.handleToggleDropdown() })), !this.hideButtons && (h("div", { class: "breadcrumb-buttons" }, breadcrumbConfig.buttons.map(button => (h("button", { class: "btn btn-secondary btn-icon", key: button.text, "aria-expanded": `${Boolean(this.overlayVisible && this.currentOverlay === button.overlay)}`, onClick: () => this.toggleOverlay(button.overlay, true) }, h(SvgIcon, { name: button.svgIcon.name }), h("span", { class: "visually-hidden" }, button.text)))))), this.overlayVisible && (h(OverlayComponent, { overlayRef: e => e !== undefined && this.overlayRef(e), iFrameRef: e => e !== undefined && this.registerIFrameResizer(e), overlay: this.currentOverlay, onClick: () => this.handleToggleOverlay(), onKeyDown: (e) => this.handleKeyDown(e), closeButtonText: state.localizedConfig.header.translations.closeButtonText }))), h("slot", null)));
-  }
-  static get is() { return "swisspost-internet-breadcrumbs"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["post-internet-breadcrumbs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["post-internet-breadcrumbs.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "customItems": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | IBreadcrumbItem[]",
-          "resolved": "IBreadcrumbItem[] | string | undefined",
-          "references": {
-            "IBreadcrumbItem": {
-              "location": "import",
-              "path": "../../models/breadcrumbs.model",
-              "id": "src/models/breadcrumbs.model.ts::IBreadcrumbItem"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "custom-items",
-        "reflect": false
-      },
-      "hideButtons": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Hide all buttons."
-        },
-        "attribute": "hide-buttons",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "customBreadcrumbItems": {},
-      "overlayVisible": {},
-      "isConcatenated": {},
-      "dropdownOpen": {},
-      "refsReady": {}
-    };
-  }
-  static get methods() {
-    return {
-      "toggleOverlayById": {
-        "complexType": {
-          "signature": "(overlayId: IBreadcrumbOverlay['id']) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "overlayId"
-                }],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    static get properties() {
+        return {
+            "customItems": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | IBreadcrumbItem[]",
+                    "resolved": "IBreadcrumbItem[] | string | undefined",
+                    "references": {
+                        "IBreadcrumbItem": {
+                            "location": "import",
+                            "path": "../../models/breadcrumbs.model",
+                            "id": "src/models/breadcrumbs.model.ts::IBreadcrumbItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "custom-items",
+                "reflect": false
             },
-            "IBreadcrumbOverlay": {
-              "location": "import",
-              "path": "../../models/breadcrumbs.model",
-              "id": "src/models/breadcrumbs.model.ts::IBreadcrumbOverlay"
+            "hideButtons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide all buttons."
+                },
+                "attribute": "hide-buttons",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Toggle an overlay associated with a button.",
-          "tags": [{
-              "name": "param",
-              "text": "overlayId"
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "customItems",
-        "methodName": "handleCustomConfigChange"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "customBreadcrumbItems": {},
+            "overlayVisible": {},
+            "isConcatenated": {},
+            "dropdownOpen": {},
+            "refsReady": {}
+        };
+    }
+    static get methods() {
+        return {
+            "toggleOverlayById": {
+                "complexType": {
+                    "signature": "(overlayId: IBreadcrumbOverlay['id']) => Promise<void>",
+                    "parameters": [{
+                            "name": "overlayId",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "IBreadcrumbOverlay": {
+                            "location": "import",
+                            "path": "../../models/breadcrumbs.model",
+                            "id": "src/models/breadcrumbs.model.ts::IBreadcrumbOverlay"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle an overlay associated with a button.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "overlayId"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "customItems",
+                "methodName": "handleCustomConfigChange"
+            }];
+    }
 }
 //# sourceMappingURL=post-internet-breadcrumbs.js.map