@swisspost/internet-header 1.5.1 → 1.5.2

package/dist/esm/post-skiplinks.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-066666f4.js';
 import { s as state } from './store-837c3490.js';
-import { t as translate } from './language.service-023d2711.js';
+import { t as translate } from './language.service-85d8689e.js';
 import { S as SvgIcon } from './svg-icon.component-e09b4bf9.js';
 
 const postSkiplinksCss = ":host{display:block}.skiplinks a{position:absolute;top:0.5rem;left:0.5rem;clip:rect(0 0 0 0);width:1px;overflow:hidden;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0.25rem;background:white}.skiplinks a:focus-visible{clip:unset;width:auto}";
@@ -39,7 +39,7 @@ const PostSkiplinks = class {
     if (config === undefined) {
       return;
     }
-    return (h(Host, null, h("nav", { class: "skiplinks" }, h("ul", { class: "no-list" }, h("li", null, h("a", { class: "nav-link", href: config.logo.logoLink, accessKey: "0", title: "[ALT + 0]" }, h("span", null, config.logo.logoLinkTitle), h(SvgIcon, { name: "pi-pointy-arrow-right" }))), h("li", null, h("a", { class: "nav-link", href: "#post-internet-header-main-navigation", accessKey: "1", title: "[ALT + 1]", onClick: () => this.focusMain() }, h("span", null, config.translations.navMainAriaLabel), h(SvgIcon, { name: "pi-pointy-arrow-right" }))), mainId ? (h("li", null, h("a", { class: "nav-link", href: `#${mainId}`, accessKey: "2", title: "[ALT + 2]" }, h("span", null, translate('Go to main content')), h(SvgIcon, { name: "pi-pointy-arrow-right" })))) : null, state.search ? (h("li", null, h("a", { class: "nav-link", href: "#post-internet-header-search-button", accessKey: "3", title: "[ALT + 3]", onClick: () => this.focusSearch() }, h("span", null, translate('Go to search')), h(SvgIcon, { name: "pi-pointy-arrow-right" })))) : null, state.login ? (h("li", null, h("a", { class: "nav-link", href: "#post-klp-login-widget", accessKey: "4", title: "[ALT + 4]", onClick: () => this.focusLogin() }, h("span", null, translate('Go to login')), h(SvgIcon, { name: "pi-pointy-arrow-right" })))) : null))));
+    return (h(Host, null, h("div", { class: "skiplinks" }, h("h1", { class: "visually-hidden" }, translate('Navigate on post.ch')), h("ul", { class: "no-list" }, h("li", null, h("a", { class: "nav-link", href: config.logo.logoLink, accessKey: "0", title: "[ALT + 0]" }, h("span", null, config.logo.logoLinkTitle), h(SvgIcon, { name: "pi-pointy-arrow-right" }))), h("li", null, h("a", { class: "nav-link", href: "#post-internet-header-main-navigation", accessKey: "1", title: "[ALT + 1]", onClick: () => this.focusMain() }, h("span", null, config.translations.navMainAriaLabel), h(SvgIcon, { name: "pi-pointy-arrow-right" }))), mainId ? (h("li", null, h("a", { class: "nav-link", href: `#${mainId}`, accessKey: "2", title: "[ALT + 2]" }, h("span", null, translate('Go to main content')), h(SvgIcon, { name: "pi-pointy-arrow-right" })))) : null, state.search ? (h("li", null, h("a", { class: "nav-link", href: "#post-internet-header-search-button", accessKey: "3", title: "[ALT + 3]", onClick: () => this.focusSearch() }, h("span", null, translate('Go to search')), h(SvgIcon, { name: "pi-pointy-arrow-right" })))) : null, state.login ? (h("li", null, h("a", { class: "nav-link", href: "#post-klp-login-widget", accessKey: "4", title: "[ALT + 4]", onClick: () => this.focusLogin() }, h("span", null, translate('Go to login')), h(SvgIcon, { name: "pi-pointy-arrow-right" })))) : null))));
   }
   get host() { return getElement(this); }
 };

package/dist/esm/post-skiplinks.entry.js.map

@@ -1 +1 @@
-{"file":"post-skiplinks.entry.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,qRAAqR;;MCWjS,aAAa;;;;EAGhB,SAAS;;IACf,OAAO,MAAA,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,0CAAE,YAAY,CAAC,IAAI,CAAC,CAAC;GAC/D;EAEO,QAAQ,CAAC,OAAe;IAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC5D,IAAI,CAAC,QAAQ,EAAE;MACb,OAAO;KACR;IAED,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAmB,OAAO,CAAC,CAAC;IACpE,IAAI,SAAS,EAAE;MACb,SAAS,CAAC,QAAQ,EAAE,CAAC;KACtB;GACF;EAEO,SAAS;IACf,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CAAC,CAAC;GACvC;EAEO,WAAW;IACjB,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;GAC9B;EAEO,UAAU;IAChB,IAAI,CAAC,QAAQ,CAAC,uBAAuB,CAAC,CAAC;GACxC;EAED,MAAM;;IACJ,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,CAAC;IAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IAEhC,IAAI,MAAM,KAAK,SAAS,EAAE;MACxB,OAAO;KACR;IAED,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,WAAW,IACpB,UAAI,KAAK,EAAC,SAAS,IACjB,cACE,SAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAC,GAAG,EAAC,KAAK,EAAC,WAAW,IAC7E,gBAAO,MAAM,CAAC,IAAI,CAAC,aAAa,CAAQ,EACxC,EAAC,OAAO,IAAC,IAAI,EAAC,uBAAuB,GAAG,CACtC,CACD,EACL,cACE,SACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,uCAAuC,EAC5C,SAAS,EAAC,GAAG,EACb,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,IAE/B,gBAAO,MAAM,CAAC,YAAY,CAAC,gBAAgB,CAAQ,EACnD,EAAC,OAAO,IAAC,IAAI,EAAC,uBAAuB,GAAG,CACtC,CACD,EACJ,MAAM,IACL,cACE,SAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,MAAM,EAAE,EAAE,SAAS,EAAC,GAAG,EAAC,KAAK,EAAC,WAAW,IACrE,gBAAO,SAAS,CAAC,oBAAoB,CAAC,CAAQ,EAC9C,EAAC,OAAO,IAAC,IAAI,EAAC,uBAAuB,GAAG,CACtC,CACD,IACH,IAAI,EACP,KAAK,CAAC,MAAM,IACX,cACE,SACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,qCAAqC,EAC1C,SAAS,EAAC,GAAG,EACb,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAEjC,gBAAO,SAAS,CAAC,cAAc,CAAC,CAAQ,EACxC,EAAC,OAAO,IAAC,IAAI,EAAC,uBAAuB,GAAG,CACtC,CACD,IACH,IAAI,EACP,KAAK,CAAC,KAAK,IACV,cACE,SACE,KAAK,EAAC,UAAU,EAChB,IAAI,EAAC,wBAAwB,EAC7B,SAAS,EAAC,GAAG,EACb,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,UAAU,EAAE,IAEhC,gBAAO,SAAS,CAAC,aAAa,CAAC,CAAQ,EACvC,EAAC,OAAO,IAAC,IAAI,EAAC,uBAAuB,GAAG,CACtC,CACD,IACH,IAAI,CACL,CACD,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/post-skiplinks/post-skiplinks.scss?tag=post-skiplinks","./src/components/post-skiplinks/post-skiplinks.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.skiplinks {\n  a {\n    position: absolute;\n    top: 0.5rem;\n    left: 0.5rem;\n    clip: rect(0 0 0 0);\n    width: 1px;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    padding: 0.25rem;\n    background: white;\n\n    &:focus-visible {\n      clip: unset;\n      width: auto;\n    }\n  }\n}\n","import { Component, Host, h, Element } from '@stencil/core';\nimport { state } from '../../data/store';\nimport { FocusableElement } from '../../models/header.model';\nimport { translate } from '../../services/language.service';\nimport { SvgIcon } from '../../utils/svg-icon.component';\n\n@Component({\n  tag: 'post-skiplinks',\n  styleUrl: 'post-skiplinks.scss',\n  shadow: false,\n})\nexport class PostSkiplinks {\n  @Element() host: HTMLElement;\n\n  private getMainId() {\n    return document.querySelector('main[id]')?.getAttribute('id');\n  }\n\n  private setFocus(tagname: string) {\n    const rootHost = this.host.closest('.post-internet-header');\n    if (!rootHost) {\n      return;\n    }\n\n    const focusable = rootHost.querySelector<FocusableElement>(tagname);\n    if (focusable) {\n      focusable.setFocus();\n    }\n  }\n\n  private focusMain() {\n    this.setFocus('post-main-navigation');\n  }\n\n  private focusSearch() {\n    this.setFocus('post-search');\n  }\n\n  private focusLogin() {\n    this.setFocus('post-klp-login-widget');\n  }\n\n  render() {\n    const config = state.localizedConfig?.header;\n    const mainId = this.getMainId();\n\n    if (config === undefined) {\n      return;\n    }\n\n    return (\n      <Host>\n        <nav class=\"skiplinks\">\n          <ul class=\"no-list\">\n            <li>\n              <a class=\"nav-link\" href={config.logo.logoLink} accessKey=\"0\" title=\"[ALT + 0]\">\n                <span>{config.logo.logoLinkTitle}</span>\n                <SvgIcon name=\"pi-pointy-arrow-right\" />\n              </a>\n            </li>\n            <li>\n              <a\n                class=\"nav-link\"\n                href=\"#post-internet-header-main-navigation\"\n                accessKey=\"1\"\n                title=\"[ALT + 1]\"\n                onClick={() => this.focusMain()}\n              >\n                <span>{config.translations.navMainAriaLabel}</span>\n                <SvgIcon name=\"pi-pointy-arrow-right\" />\n              </a>\n            </li>\n            {mainId ? (\n              <li>\n                <a class=\"nav-link\" href={`#${mainId}`} accessKey=\"2\" title=\"[ALT + 2]\">\n                  <span>{translate('Go to main content')}</span>\n                  <SvgIcon name=\"pi-pointy-arrow-right\" />\n                </a>\n              </li>\n            ) : null}\n            {state.search ? (\n              <li>\n                <a\n                  class=\"nav-link\"\n                  href=\"#post-internet-header-search-button\"\n                  accessKey=\"3\"\n                  title=\"[ALT + 3]\"\n                  onClick={() => this.focusSearch()}\n                >\n                  <span>{translate('Go to search')}</span>\n                  <SvgIcon name=\"pi-pointy-arrow-right\" />\n                </a>\n              </li>\n            ) : null}\n            {state.login ? (\n              <li>\n                <a\n                  class=\"nav-link\"\n                  href=\"#post-klp-login-widget\"\n                  accessKey=\"4\"\n                  title=\"[ALT + 4]\"\n                  onClick={() => this.focusLogin()}\n                >\n                  <span>{translate('Go to login')}</span>\n                  <SvgIcon name=\"pi-pointy-arrow-right\" />\n                </a>\n              </li>\n            ) : null}\n          </ul>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"post-skiplinks.entry.js","mappings":"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","names":[],"sources":["./src/components/post-skiplinks/post-skiplinks.scss?tag=post-skiplinks","./src/components/post-skiplinks/post-skiplinks.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.skiplinks {\n  a {\n    position: absolute;\n    top: 0.5rem;\n    left: 0.5rem;\n    clip: rect(0 0 0 0);\n    width: 1px;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    padding: 0.25rem;\n    background: white;\n\n    &:focus-visible {\n      clip: unset;\n      width: auto;\n    }\n  }\n}\n","import { Component, Host, h, Element } from '@stencil/core';\nimport { state } from '../../data/store';\nimport { FocusableElement } from '../../models/header.model';\nimport { translate } from '../../services/language.service';\nimport { SvgIcon } from '../../utils/svg-icon.component';\n\n@Component({\n  tag: 'post-skiplinks',\n  styleUrl: 'post-skiplinks.scss',\n  shadow: false,\n})\nexport class PostSkiplinks {\n  @Element() host: HTMLElement;\n\n  private getMainId() {\n    return document.querySelector('main[id]')?.getAttribute('id');\n  }\n\n  private setFocus(tagname: string) {\n    const rootHost = this.host.closest('.post-internet-header');\n    if (!rootHost) {\n      return;\n    }\n\n    const focusable = rootHost.querySelector<FocusableElement>(tagname);\n    if (focusable) {\n      focusable.setFocus();\n    }\n  }\n\n  private focusMain() {\n    this.setFocus('post-main-navigation');\n  }\n\n  private focusSearch() {\n    this.setFocus('post-search');\n  }\n\n  private focusLogin() {\n    this.setFocus('post-klp-login-widget');\n  }\n\n  render() {\n    const config = state.localizedConfig?.header;\n    const mainId = this.getMainId();\n\n    if (config === undefined) {\n      return;\n    }\n\n    return (\n      <Host>\n        <div class=\"skiplinks\">\n          <h1 class=\"visually-hidden\">{translate('Navigate on post.ch')}</h1>\n          <ul class=\"no-list\">\n            <li>\n              <a class=\"nav-link\" href={config.logo.logoLink} accessKey=\"0\" title=\"[ALT + 0]\">\n                <span>{config.logo.logoLinkTitle}</span>\n                <SvgIcon name=\"pi-pointy-arrow-right\" />\n              </a>\n            </li>\n            <li>\n              <a\n                class=\"nav-link\"\n                href=\"#post-internet-header-main-navigation\"\n                accessKey=\"1\"\n                title=\"[ALT + 1]\"\n                onClick={() => this.focusMain()}\n              >\n                <span>{config.translations.navMainAriaLabel}</span>\n                <SvgIcon name=\"pi-pointy-arrow-right\" />\n              </a>\n            </li>\n            {mainId ? (\n              <li>\n                <a class=\"nav-link\" href={`#${mainId}`} accessKey=\"2\" title=\"[ALT + 2]\">\n                  <span>{translate('Go to main content')}</span>\n                  <SvgIcon name=\"pi-pointy-arrow-right\" />\n                </a>\n              </li>\n            ) : null}\n            {state.search ? (\n              <li>\n                <a\n                  class=\"nav-link\"\n                  href=\"#post-internet-header-search-button\"\n                  accessKey=\"3\"\n                  title=\"[ALT + 3]\"\n                  onClick={() => this.focusSearch()}\n                >\n                  <span>{translate('Go to search')}</span>\n                  <SvgIcon name=\"pi-pointy-arrow-right\" />\n                </a>\n              </li>\n            ) : null}\n            {state.login ? (\n              <li>\n                <a\n                  class=\"nav-link\"\n                  href=\"#post-klp-login-widget\"\n                  accessKey=\"4\"\n                  title=\"[ALT + 4]\"\n                  onClick={() => this.focusLogin()}\n                >\n                  <span>{translate('Go to login')}</span>\n                  <SvgIcon name=\"pi-pointy-arrow-right\" />\n                </a>\n              </li>\n            ) : null}\n          </ul>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}