@swisspost/internet-header 1.5.0-beta.0

package/dist/collection/collection-manifest.json

@@ -0,0 +1,27 @@
+{
+  "entries": [
+    "./components/post-internet-breadcrumbs/post-internet-breadcrumbs.js",
+    "./components/post-internet-footer/post-internet-footer.js",
+    "./components/post-internet-header/post-internet-header.js",
+    "./components/post-klp-login-widget/post-klp-login-widget.js",
+    "./components/post-language-switch/post-language-switch.js",
+    "./components/post-logo/post-logo.js",
+    "./components/post-main-navigation/post-main-navigation.js",
+    "./components/post-meta-navigation/post-meta-navigation.js",
+    "./components/post-search/post-search.js",
+    "./components/post-skiplinks/post-skiplinks.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "3.0.0",
+    "typescriptVersion": "4.9.4"
+  },
+  "collections": [],
+  "bundles": [
+    {
+      "components": [
+        "swisspost-internet-header"
+      ]
+    }
+  ]
+}

package/dist/collection/components/post-internet-breadcrumbs/components/breadcrumb-list.component.js

@@ -0,0 +1,11 @@
+import { h } from '@stencil/core';
+import { SvgIcon } from '../../../utils/svg-icon.component';
+import { MiddleDropdown } from './middle-dropdown.component';
+import { MiddleLinks } from './middle-links.component';
+export const BreadcrumbList = (props) => {
+  var _a;
+  const homeItem = props.items[0];
+  const lastItem = props.items[props.items.length - 1];
+  return (h("ol", { class: "no-list breadcrumbs-list" }, h("li", null, h("a", { class: "home-link nav-link", href: homeItem.url, tabindex: props.focusable === false ? '-1' : undefined }, h("span", { class: "visually-hidden" }, homeItem.text), h(SvgIcon, { name: "pi-home" })), h(SvgIcon, { name: "pi-arrow-down", classNames: "rotate-270" })), props.isConcatenated ? (h("li", null, h(MiddleDropdown, { items: props.items, dropdownOpen: (_a = props.dropdownOpen) !== null && _a !== void 0 ? _a : false, clickHandler: e => props.clickHandler(e), focusable: props.focusable }))) : (h(MiddleLinks, { items: props.items, icons: true, focusable: props.focusable })), h("li", null, h("a", { class: "last-link nav-link", href: lastItem.url, tabindex: props.focusable === false ? '-1' : undefined, ref: el => (props.lastItemRef !== undefined ? props.lastItemRef(el) : null) }, lastItem.text))));
+};
+//# sourceMappingURL=breadcrumb-list.component.js.map

package/dist/collection/components/post-internet-breadcrumbs/components/breadcrumb-list.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-list.component.js","sourceRoot":"","sources":["../../../../../src/components/post-internet-breadcrumbs/components/breadcrumb-list.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElC,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAO9B,EAAE,EAAE;;EACH,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;EAChC,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;EAErD,OAAO,CACL,UAAI,KAAK,EAAC,0BAA0B;IAClC;MACE,SACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,QAAQ,CAAC,GAAG,EAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;QAEtD,YAAM,KAAK,EAAC,iBAAiB,IAAE,QAAQ,CAAC,IAAI,CAAQ;QACpD,EAAC,OAAO,IAAC,IAAI,EAAC,SAAS,GAAG,CACxB;MACJ,EAAC,OAAO,IAAC,IAAI,EAAC,eAAe,EAAC,UAAU,EAAC,YAAY,GAAW,CAC7D;IACJ,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CACtB;MACE,EAAC,cAAc,IACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,YAAY,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,KAAK,EACzC,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,EACxC,SAAS,EAAE,KAAK,CAAC,SAAS,GAC1B,CACC,CACN,CAAC,CAAC,CAAC,CACF,EAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAC7E;IACD;MAEE,SACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,QAAQ,CAAC,GAAG,EAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACtD,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAE1E,QAAQ,CAAC,IAAI,CACZ,CACD,CACF,CACN,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\r\nimport { IBreadcrumbItem } from '../../../models/breadcrumbs.model';\r\nimport { SvgIcon } from '../../../utils/svg-icon.component';\r\nimport { MiddleDropdown } from './middle-dropdown.component';\r\nimport { MiddleLinks } from './middle-links.component';\r\n\r\nexport const BreadcrumbList = (props: {\r\n  items: IBreadcrumbItem[];\r\n  dropdownOpen?: boolean;\r\n  isConcatenated?: boolean;\r\n  clickHandler: (event?: MouseEvent) => void;\r\n  lastItemRef?: (element: HTMLElement | undefined) => void;\r\n  focusable?: boolean;\r\n}) => {\r\n  const homeItem = props.items[0];\r\n  const lastItem = props.items[props.items.length - 1];\r\n\r\n  return (\r\n    <ol class=\"no-list breadcrumbs-list\">\r\n      <li>\r\n        <a\r\n          class=\"home-link nav-link\"\r\n          href={homeItem.url}\r\n          tabindex={props.focusable === false ? '-1' : undefined}\r\n        >\r\n          <span class=\"visually-hidden\">{homeItem.text}</span>\r\n          <SvgIcon name=\"pi-home\" />\r\n        </a>\r\n        <SvgIcon name=\"pi-arrow-down\" classNames=\"rotate-270\"></SvgIcon>\r\n      </li>\r\n      {props.isConcatenated ? (\r\n        <li>\r\n          <MiddleDropdown\r\n            items={props.items}\r\n            dropdownOpen={props.dropdownOpen ?? false}\r\n            clickHandler={e => props.clickHandler(e)}\r\n            focusable={props.focusable}\r\n          />\r\n        </li>\r\n      ) : (\r\n        <MiddleLinks items={props.items} icons={true} focusable={props.focusable} />\r\n      )}\r\n      <li>\r\n        {/* For some reason, ref is executed twice when resizing above threshold and the second time around, el is null. Thereafter the ellipsis detection does not work anymore due to the null reference. */}\r\n        <a\r\n          class=\"last-link nav-link\"\r\n          href={lastItem.url}\r\n          tabindex={props.focusable === false ? '-1' : undefined}\r\n          ref={el => (props.lastItemRef !== undefined ? props.lastItemRef(el) : null)}\r\n        >\r\n          {lastItem.text}\r\n        </a>\r\n      </li>\r\n    </ol>\r\n  );\r\n};\r\n"]}

package/dist/collection/components/post-internet-breadcrumbs/components/focus-trap.component.js

@@ -0,0 +1,42 @@
+import { h } from '@stencil/core';
+import { tabbable } from 'tabbable';
+let key = 0;
+/**
+ * Trap the focus inside a specific container by prepending/appending two focus trap
+ * input boxes who return the focus into the container.
+ *
+ * @param props active: activate or deactivate the focus trap
+ * @param children Child nodes
+ * @returns
+ */
+export const FocusTrap = (props, children) => {
+  var _a;
+  // Default value for active is true
+  const active = (_a = props.active) !== null && _a !== void 0 ? _a : false;
+  const handleFocusIn = (event, mode) => {
+    if (!children.length) {
+      return;
+    }
+    // Try to get a list of tabbable elements
+    const containerIndex = mode === 'first' ? 0 : children.length - 1;
+    const container = children[containerIndex].$elm$;
+    const focusable = tabbable(container);
+    if (!focusable.length) {
+      return;
+    }
+    // We can trap the focus, cancel the event
+    event.preventDefault();
+    event.stopPropagation();
+    // Select the appropriate element from the list
+    const focusIndex = mode === 'first' ? 0 : focusable.length - 1;
+    let focusElement = focusable[focusIndex];
+    focusElement.focus();
+  };
+  key++;
+  return [
+    h("input", { type: "text", "aria-hidden": "true", class: "visually-hidden", key: `focus-trap-before-${key}`, onFocusin: e => active && handleFocusIn(e, 'last') }),
+    children,
+    h("input", { type: "text", "aria-hidden": "true", class: "visually-hidden", key: `focus-trap-after-${key}`, onFocusin: e => active && handleFocusIn(e, 'first') }),
+  ];
+};
+//# sourceMappingURL=focus-trap.component.js.map

package/dist/collection/components/post-internet-breadcrumbs/components/focus-trap.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap.component.js","sourceRoot":"","sources":["../../../../../src/components/post-internet-breadcrumbs/components/focus-trap.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,IAAI,GAAG,GAAG,CAAC,CAAC;AAEZ;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAA8C,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE;;EACtF,mCAAmC;EACnC,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,MAAM,mCAAI,KAAK,CAAC;EAErC,MAAM,aAAa,GAAG,CAAC,KAAiB,EAAE,IAAsB,EAAE,EAAE;IAClE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;MACpB,OAAO;KACR;IAED,yCAAyC;IACzC,MAAM,cAAc,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IAClE,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC;IACjD,MAAM,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAEtC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;MACrB,OAAO;KACR;IAED,0CAA0C;IAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IAExB,+CAA+C;IAC/C,MAAM,UAAU,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/D,IAAI,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;IACzC,YAAY,CAAC,KAAK,EAAE,CAAC;EACvB,CAAC,CAAC;EAEF,GAAG,EAAE,CAAC;EAEN,OAAO;IACL,aACE,IAAI,EAAC,MAAM,iBACC,MAAM,EAClB,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,qBAAqB,GAAG,EAAE,EAC/B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,IAAI,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC,GAClD;IACF,QAAQ;IACR,aACE,IAAI,EAAC,MAAM,iBACC,MAAM,EAClB,KAAK,EAAC,iBAAiB,EACvB,GAAG,EAAE,oBAAoB,GAAG,EAAE,EAC9B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,IAAI,aAAa,CAAC,CAAC,EAAE,OAAO,CAAC,GACnD;GACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\r\nimport { tabbable } from 'tabbable';\r\n\r\nlet key = 0;\r\n\r\n/**\r\n * Trap the focus inside a specific container by prepending/appending two focus trap\r\n * input boxes who return the focus into the container.\r\n *\r\n * @param props active: activate or deactivate the focus trap\r\n * @param children Child nodes\r\n * @returns\r\n */\r\nexport const FocusTrap: FunctionalComponent<{ active?: boolean }> = (props, children) => {\r\n  // Default value for active is true\r\n  const active = props.active ?? false;\r\n\r\n  const handleFocusIn = (event: FocusEvent, mode: 'first' | 'last') => {\r\n    if (!children.length) {\r\n      return;\r\n    }\r\n\r\n    // Try to get a list of tabbable elements\r\n    const containerIndex = mode === 'first' ? 0 : children.length - 1;\r\n    const container = children[containerIndex].$elm$;\r\n    const focusable = tabbable(container);\r\n\r\n    if (!focusable.length) {\r\n      return;\r\n    }\r\n\r\n    // We can trap the focus, cancel the event\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n\r\n    // Select the appropriate element from the list\r\n    const focusIndex = mode === 'first' ? 0 : focusable.length - 1;\r\n    let focusElement = focusable[focusIndex];\r\n    focusElement.focus();\r\n  };\r\n\r\n  key++;\r\n\r\n  return [\r\n    <input\r\n      type=\"text\"\r\n      aria-hidden=\"true\"\r\n      class=\"visually-hidden\"\r\n      key={`focus-trap-before-${key}`}\r\n      onFocusin={e => active && handleFocusIn(e, 'last')}\r\n    />,\r\n    children,\r\n    <input\r\n      type=\"text\"\r\n      aria-hidden=\"true\"\r\n      class=\"visually-hidden\"\r\n      key={`focus-trap-after-${key}`}\r\n      onFocusin={e => active && handleFocusIn(e, 'first')}\r\n    />,\r\n  ];\r\n};\r\n"]}

package/dist/collection/components/post-internet-breadcrumbs/components/middle-dropdown.component.js

@@ -0,0 +1,8 @@
+import { h } from '@stencil/core';
+import { SvgIcon } from '../../../utils/svg-icon.component';
+import { MiddleLinks } from './middle-links.component';
+import { translate } from '../../../services/language.service';
+export const MiddleDropdown = (props) => {
+  return (h("div", { class: "middle-dropdown-container" }, h("button", { class: "middle-dropdown-button btn btn-blank", type: "button", onClick: event => props.clickHandler(event), tabindex: props.focusable === false ? '-1' : undefined }, h("span", { class: "visually-hidden" }, translate('Open menu')), h("span", { "aria-hidden": "true" }, "...")), h(SvgIcon, { name: "pi-arrow-down", classNames: "rotate-270" }), props.dropdownOpen ? (h("nav", { class: "middle-dropdown" }, h("ul", { class: "no-list" }, h(MiddleLinks, { items: props.items, icons: false, focusable: props.focusable })))) : null));
+};
+//# sourceMappingURL=middle-dropdown.component.js.map

package/dist/collection/components/post-internet-breadcrumbs/components/middle-dropdown.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"middle-dropdown.component.js","sourceRoot":"","sources":["../../../../../src/components/post-internet-breadcrumbs/components/middle-dropdown.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAE/D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAK9B,EAAE,EAAE;EACH,OAAO,CACL,WAAK,KAAK,EAAC,2BAA2B;IACpC,cACE,KAAK,EAAC,sCAAsC,EAC5C,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,EAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;MAEtD,YAAM,KAAK,EAAC,iBAAiB,IAAE,SAAS,CAAC,WAAW,CAAC,CAAQ;MAC7D,2BAAkB,MAAM,UAAW,CAC5B;IACT,EAAC,OAAO,IAAC,IAAI,EAAC,eAAe,EAAC,UAAU,EAAC,YAAY,GAAW;IAC/D,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,iBAAiB;MAC1B,UAAI,KAAK,EAAC,SAAS;QACjB,EAAC,WAAW,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAC1E,CACD,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\r\nimport { SvgIcon } from '../../../utils/svg-icon.component';\r\nimport { IBreadcrumbItem } from '../../../models/breadcrumbs.model';\r\nimport { MiddleLinks } from './middle-links.component';\r\nimport { translate } from '../../../services/language.service';\r\n\r\nexport const MiddleDropdown = (props: {\r\n  items: IBreadcrumbItem[];\r\n  dropdownOpen: boolean;\r\n  clickHandler: (event?: MouseEvent) => void;\r\n  focusable?: boolean;\r\n}) => {\r\n  return (\r\n    <div class=\"middle-dropdown-container\">\r\n      <button\r\n        class=\"middle-dropdown-button btn btn-blank\"\r\n        type=\"button\"\r\n        onClick={event => props.clickHandler(event)}\r\n        tabindex={props.focusable === false ? '-1' : undefined}\r\n      >\r\n        <span class=\"visually-hidden\">{translate('Open menu')}</span>\r\n        <span aria-hidden=\"true\">...</span>\r\n      </button>\r\n      <SvgIcon name=\"pi-arrow-down\" classNames=\"rotate-270\"></SvgIcon>\r\n      {props.dropdownOpen ? (\r\n        <nav class=\"middle-dropdown\">\r\n          <ul class=\"no-list\">\r\n            <MiddleLinks items={props.items} icons={false} focusable={props.focusable} />\r\n          </ul>\r\n        </nav>\r\n      ) : null}\r\n    </div>\r\n  );\r\n};\r\n"]}

package/dist/collection/components/post-internet-breadcrumbs/components/middle-links.component.js

@@ -0,0 +1,6 @@
+import { h } from '@stencil/core';
+import { SvgIcon } from '../../../utils/svg-icon.component';
+export const MiddleLinks = (props) => {
+  return props.items.slice(1, -1).map(item => (h("li", { key: item.url }, h("a", { href: item.url, class: "nav-link", tabindex: props.focusable === false ? '-1' : undefined }, h("span", null, item.text)), props.icons ? h(SvgIcon, { name: "pi-arrow-down", classNames: "rotate-270" }) : null)));
+};
+//# sourceMappingURL=middle-links.component.js.map

package/dist/collection/components/post-internet-breadcrumbs/components/middle-links.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"middle-links.component.js","sourceRoot":"","sources":["../../../../../src/components/post-internet-breadcrumbs/components/middle-links.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAG5D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAI3B,EAAE,EAAE;EACH,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC1C,UAAI,GAAG,EAAE,IAAI,CAAC,GAAG;IACf,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;MACxF,gBAAO,IAAI,CAAC,IAAI,CAAQ,CACtB;IACH,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAC,OAAO,IAAC,IAAI,EAAC,eAAe,EAAC,UAAU,EAAC,YAAY,GAAW,CAAC,CAAC,CAAC,IAAI,CACnF,CACN,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\r\nimport { SvgIcon } from '../../../utils/svg-icon.component';\r\nimport { IBreadcrumbItem } from '../../../models/breadcrumbs.model';\r\n\r\nexport const MiddleLinks = (props: {\r\n  items: IBreadcrumbItem[];\r\n  icons?: boolean;\r\n  focusable?: boolean;\r\n}) => {\r\n  return props.items.slice(1, -1).map(item => (\r\n    <li key={item.url}>\r\n      <a href={item.url} class=\"nav-link\" tabindex={props.focusable === false ? '-1' : undefined}>\r\n        <span>{item.text}</span>\r\n      </a>\r\n      {props.icons ? <SvgIcon name=\"pi-arrow-down\" classNames=\"rotate-270\"></SvgIcon> : null}\r\n    </li>\r\n  ));\r\n};\r\n"]}

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

@@ -0,0 +1,12 @@
+import { h } from '@stencil/core';
+import { SvgIcon } from '../../../utils/svg-icon.component';
+import { FocusTrap } from './focus-trap.component';
+/**
+ * Overlay implementation with focus trap according to
+ * https://www.accessibility-developer-guide.com/examples/widgets/dialog/#modal-dialog
+ *
+ * @param props
+ * @returns
+ */
+export const OverlayComponent = (props) => (h("div", { class: "overlay", onClick: () => props.onClick(), onKeyDown: e => props.onKeyDown !== undefined && props.onKeyDown(e), ref: e => e !== undefined && props.overlayRef(e) }, h("div", { class: "container", role: "dialog" }, h(FocusTrap, null, h("div", { class: "overlay-container", tabindex: "-1" /* For initial focus */, role: "document", onClick: e => e.stopPropagation() }, h("button", { class: `overlay-close btn-blank d-inline-flex align-items-center nav-link ${props.overlay.id}`, onClick: () => props.onClick() }, h("span", { class: "visually-hidden" }, props.closeButtonText), h(SvgIcon, { name: "pi-close" })), h("iframe", { src: props.overlay.target, frameborder: "0", class: "frame", ref: e => e !== undefined && props.iFrameRef(e) }))), h("div", { class: "loader-wrapper" }, h("div", { class: "loader" })))));
+//# sourceMappingURL=overlay.component.js.map

package/dist/collection/components/post-internet-breadcrumbs/components/overlay.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.component.js","sourceRoot":"","sources":["../../../../../src/components/post-internet-breadcrumbs/components/overlay.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAOhC,EAAE,EAAE,CAAC,CACJ,WACE,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,EAC9B,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,KAAK,SAAS,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EACnE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;EAEhD,WAAK,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,QAAQ;IAClC,EAAC,SAAS;MACR,WACE,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAC,IAAI,CAAC,uBAAuB,EACrC,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;QAEjC,cACE,KAAK,EAAE,qEAAqE,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,EAC9F,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE;UAE9B,YAAM,KAAK,EAAC,iBAAiB,IAAE,KAAK,CAAC,eAAe,CAAQ;UAC5D,EAAC,OAAO,IAAC,IAAI,EAAC,UAAU,GAAW,CAC5B;QACT,cACE,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,EACzB,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,OAAO,EACb,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GACvC,CACN,CACI;IACZ,WAAK,KAAK,EAAC,gBAAgB;MACzB,WAAK,KAAK,EAAC,QAAQ,GAAO,CACtB,CACF,CACF,CACP,CAAC","sourcesContent":["import { h } from '@stencil/core';\r\nimport { SvgIcon } from '../../../utils/svg-icon.component';\r\nimport { IBreadcrumbOverlay } from '../../../models/breadcrumbs.model';\r\nimport { FocusTrap } from './focus-trap.component';\r\n\r\n/**\r\n * Overlay implementation with focus trap according to\r\n * https://www.accessibility-developer-guide.com/examples/widgets/dialog/#modal-dialog\r\n *\r\n * @param props\r\n * @returns\r\n */\r\nexport const OverlayComponent = (props: {\r\n  overlay: IBreadcrumbOverlay;\r\n  onClick: () => void;\r\n  onKeyDown?: (event?: KeyboardEvent) => void;\r\n  iFrameRef: (element: HTMLIFrameElement) => void;\r\n  overlayRef: (element: HTMLElement | undefined) => void;\r\n  closeButtonText: string;\r\n}) => (\r\n  <div\r\n    class=\"overlay\"\r\n    onClick={() => props.onClick()}\r\n    onKeyDown={e => props.onKeyDown !== undefined && props.onKeyDown(e)}\r\n    ref={e => e !== undefined && props.overlayRef(e)}\r\n  >\r\n    <div class=\"container\" role=\"dialog\">\r\n      <FocusTrap>\r\n        <div\r\n          class=\"overlay-container\"\r\n          tabindex=\"-1\" /* For initial focus */\r\n          role=\"document\"\r\n          onClick={e => e.stopPropagation()}\r\n        >\r\n          <button\r\n            class={`overlay-close btn-blank d-inline-flex align-items-center nav-link ${props.overlay.id}`}\r\n            onClick={() => props.onClick()}\r\n          >\r\n            <span class=\"visually-hidden\">{props.closeButtonText}</span>\r\n            <SvgIcon name=\"pi-close\"></SvgIcon>\r\n          </button>\r\n          <iframe\r\n            src={props.overlay.target}\r\n            frameborder=\"0\"\r\n            class=\"frame\"\r\n            ref={e => e !== undefined && props.iFrameRef(e)}\r\n          ></iframe>\r\n        </div>\r\n      </FocusTrap>\r\n      <div class=\"loader-wrapper\">\r\n        <div class=\"loader\"></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n);\r\n"]}