@swisspost/internet-header 1.5.0-beta.1 → 1.5.0

package/dist/types/services/route.service.d.ts

@@ -1,39 +1,39 @@
-import { ActiveRouteProp } from '../models/general.model';
-import { NavMainEntity, MainNavScoreList } from '../models/header.model';
-/**
- * Activate the current route based on the config and the match mode
- * @param config Main Navigation Config
- * @param activeRouteProp Match mode
- * @returns Modified Main Navigation Config
- */
-export declare const markActiveRoute: (config: NavMainEntity[], activeRouteProp: ActiveRouteProp) => NavMainEntity[];
-/**
- * Check if the portal config set any active route
- * @param config Main navigation config
- * @returns True if portal set any route as active
- */
-export declare const hasActivePortalRoute: (config: NavMainEntity[]) => boolean;
-export declare const resetActiveStateToPortalConfig: (config: NavMainEntity[]) => NavMainEntity[];
-/**
- * Compile a list of scores based on the map mode, sorted in descending order
- * @param config Main Nav Config
- * @param compareUrl Current Browser URL or a custom URL
- * @param activeRouteProp Match mode
- * @returns A list of scored URLs if any matched
- */
-export declare const compileScoreList: (config: NavMainEntity[], compareUrl: URL, activeRouteProp: ActiveRouteProp) => MainNavScoreList;
-/**
- * Compare two URLs for similarity based on a match mode
- * @param baseUrl Browser URL
- * @param compareUrl Navigatgion URL
- * @param matchMode exact or auto matching
- * @returns Score
- */
-export declare const compareRoutes: (baseUrl: URL, compareUrl: URL, matchMode?: 'auto' | 'exact') => number;
-/**
- * Check how many items in an array match
- * @param a Base array
- * @param b Compare array
- * @returns Score
- */
-export declare const getSimilarityScore: (a: string[], b: string[]) => number;
+import { ActiveRouteProp } from '../models/general.model';
+import { NavMainEntity, MainNavScoreList } from '../models/header.model';
+/**
+ * Activate the current route based on the config and the match mode
+ * @param config Main Navigation Config
+ * @param activeRouteProp Match mode
+ * @returns Modified Main Navigation Config
+ */
+export declare const markActiveRoute: (config: NavMainEntity[], activeRouteProp: ActiveRouteProp) => NavMainEntity[];
+/**
+ * Check if the portal config set any active route
+ * @param config Main navigation config
+ * @returns True if portal set any route as active
+ */
+export declare const hasActivePortalRoute: (config: NavMainEntity[]) => boolean;
+export declare const resetActiveStateToPortalConfig: (config: NavMainEntity[]) => NavMainEntity[];
+/**
+ * Compile a list of scores based on the map mode, sorted in descending order
+ * @param config Main Nav Config
+ * @param compareUrl Current Browser URL or a custom URL
+ * @param activeRouteProp Match mode
+ * @returns A list of scored URLs if any matched
+ */
+export declare const compileScoreList: (config: NavMainEntity[], compareUrl: URL, activeRouteProp: ActiveRouteProp) => MainNavScoreList;
+/**
+ * Compare two URLs for similarity based on a match mode
+ * @param baseUrl Browser URL
+ * @param compareUrl Navigatgion URL
+ * @param matchMode exact or auto matching
+ * @returns Score
+ */
+export declare const compareRoutes: (baseUrl: URL, compareUrl: URL, matchMode?: 'auto' | 'exact') => number;
+/**
+ * Check how many items in an array match
+ * @param a Base array
+ * @param b Compare array
+ * @returns Score
+ */
+export declare const getSimilarityScore: (a: string[], b: string[]) => number;

package/dist/types/services/search/coveo.service.d.ts

@@ -1,9 +1,9 @@
-import { CoveoCompletion } from '../../models/coveo.model';
-/**
- * Get suggestions from coveo
- * https://docs.coveo.com/en/1459/build-a-search-ui/get-query-suggestions#context-object
- *
- * @param query Search term
- * @returns
- */
-export declare const getCoveoSuggestions: (query: string) => Promise<CoveoCompletion[]>;
+import { CoveoCompletion } from '../../models/coveo.model';
+/**
+ * Get suggestions from coveo
+ * https://docs.coveo.com/en/1459/build-a-search-ui/get-query-suggestions#context-object
+ *
+ * @param query Search term
+ * @returns
+ */
+export declare const getCoveoSuggestions: (query: string) => Promise<CoveoCompletion[]>;

package/dist/types/services/search/coveo.settings.d.ts

@@ -1,2 +1,2 @@
-import { CoveoOptions } from '../../models/coveo.model';
-export declare const coveo: CoveoOptions;
+import { CoveoOptions } from '../../models/coveo.model';
+export declare const coveo: CoveoOptions;

package/dist/types/services/search/parcel.service.d.ts

@@ -1,28 +1,28 @@
-import { ISearchConfig } from '../../models/header.model';
-import { TrackAndTraceInfo } from '../../models/track-and-trace.model';
-export declare const getTrackAndTraceApiUrl: (id: string) => string;
-export declare const getTrackAndTraceRedirectUrl: (query: string, { packageTrackingRedirectUrl }: ISearchConfig) => string;
-/**
- * Check whether a query is a tracking id
- *
- * @param query User query
- * @returns Boolean
- */
-export declare const isParcel: (query: string, searchConfig: ISearchConfig) => Promise<boolean>;
-/**
- * Try to get parcel info from a query that is possibly a tracking id.
- * This is mainly used to check if a search should redirect to track&trace instead of the regular search.
- *
- * @param query User query that is possibly a tracking number
- * @returns Track and trace info
- */
-export declare const getParcelInfo: (query: string, { redirectPattern }: ISearchConfig) => Promise<TrackAndTraceInfo>;
-/**
- * Get parcel info if query is a parcel or null
- *
- * @param query Parcel id
- * @returns Parcel info and a redirect url or null if not a parcel
- */
-export declare const getParcelSuggestion: (query: string, searchConfig: ISearchConfig) => Promise<(TrackAndTraceInfo & {
-  url: string;
-}) | null>;
+import { ISearchConfig } from '../../models/header.model';
+import { TrackAndTraceInfo } from '../../models/track-and-trace.model';
+export declare const getTrackAndTraceApiUrl: (id: string) => string;
+export declare const getTrackAndTraceRedirectUrl: (query: string, { packageTrackingRedirectUrl }: ISearchConfig) => string;
+/**
+ * Check whether a query is a tracking id
+ *
+ * @param query User query
+ * @returns Boolean
+ */
+export declare const isParcel: (query: string, searchConfig: ISearchConfig) => Promise<boolean>;
+/**
+ * Try to get parcel info from a query that is possibly a tracking id.
+ * This is mainly used to check if a search should redirect to track&trace instead of the regular search.
+ *
+ * @param query User query that is possibly a tracking number
+ * @returns Track and trace info
+ */
+export declare const getParcelInfo: (query: string, { redirectPattern }: ISearchConfig) => Promise<TrackAndTraceInfo>;
+/**
+ * Get parcel info if query is a parcel or null
+ *
+ * @param query Parcel id
+ * @returns Parcel info and a redirect url or null if not a parcel
+ */
+export declare const getParcelSuggestion: (query: string, searchConfig: ISearchConfig) => Promise<(TrackAndTraceInfo & {
+  url: string;
+}) | null>;

package/dist/types/services/search/places.service.d.ts

@@ -1,24 +1,24 @@
-import { GeocodeLocation } from '../../models/geocode.model';
-/**
- * Query the Gis API for locations and localities (pois)
- *
- * @param query User input string
- * @returns
- */
-export declare const queryPlaces: (query: string) => Promise<GeocodeLocation[]>;
-/**
- * Try to highlight place suggestions
- * Limitation: accented chars are not handled by this basic function
- *
- * @param query Search term
- * @param place Name of the suggested place
- * @returns
- */
-export declare const highlightPlacesString: (query: string | undefined, place: string) => string;
-/**
- * Get the deeplink to any location found via geocoder
- *
- * @param location A location from the Gis API Geocode endpoint
- * @returns
- */
-export declare const getPlacesUrl: (location: GeocodeLocation) => string;
+import { GeocodeLocation } from '../../models/geocode.model';
+/**
+ * Query the Gis API for locations and localities (pois)
+ *
+ * @param query User input string
+ * @returns
+ */
+export declare const queryPlaces: (query: string) => Promise<GeocodeLocation[]>;
+/**
+ * Try to highlight place suggestions
+ * Limitation: accented chars are not handled by this basic function
+ *
+ * @param query Search term
+ * @param place Name of the suggested place
+ * @returns
+ */
+export declare const highlightPlacesString: (query: string | undefined, place: string) => string;
+/**
+ * Get the deeplink to any location found via geocoder
+ *
+ * @param location A location from the Gis API Geocode endpoint
+ * @returns
+ */
+export declare const getPlacesUrl: (location: GeocodeLocation) => string;

package/dist/types/services/search/places.settings.d.ts

@@ -1,3 +1,3 @@
-export declare const gisAPIUrl = "https://places.post.ch/StandortSuche/StaoCacheService";
-export declare const placesUrl = "https://places.post.ch";
-export declare const pois: string[];
+export declare const gisAPIUrl = "https://places.post.ch/StandortSuche/StaoCacheService";
+export declare const placesUrl = "https://places.post.ch";
+export declare const pois: string[];

package/dist/types/services/search/search-utilities.d.ts

@@ -1,15 +1,15 @@
-/**
- * Transform to lowercase, extract accents to separate unicode chars,
- * replace all accent unicode chars so only standard latin chars remain
- * https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript/37511463#37511463
- *
- * @param str Input string
- * @returns
- */
-export declare const hardNormalize: (str: string) => string;
-/**
- * Convert a poi name to a URL compatible slug, logic copied from TOPOS
- * @param fragment A poi name
- * @returns
- */
-export declare const createSlug: (fragment: string) => string;
+/**
+ * Transform to lowercase, extract accents to separate unicode chars,
+ * replace all accent unicode chars so only standard latin chars remain
+ * https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript/37511463#37511463
+ *
+ * @param str Input string
+ * @returns
+ */
+export declare const hardNormalize: (str: string) => string;
+/**
+ * Convert a poi name to a URL compatible slug, logic copied from TOPOS
+ * @param fragment A poi name
+ * @returns
+ */
+export declare const createSlug: (fragment: string) => string;

package/dist/types/services/search/search.service.d.ts

@@ -1,24 +1,24 @@
-import { ISearchConfig } from '../../models/header.model';
-/**
- * Construct a search page url from a query
- *
- * @param query Search term
- * @returns
- */
-export declare const getSearchRedirectUrl: (query: string, searchConfig: ISearchConfig) => Promise<string | undefined>;
-/**
- * Stitch toghether the search page URL
- *
- * @param query Search term
- * @returns Search page URL
- */
-export declare const getSearchPageUrl: (query: string) => string | undefined;
-/**
- * Equalize the length of two arrays while filling up empty slots up to max. length
- *
- * @param arrayA First array
- * @param arrayB Second array
- * @param maxLength Max. length of result array
- * @returns Array with two resulting arrays
- */
-export declare const equalizeArrays: <A, B>(arrayA: A[], arrayB: B[], maxLength?: number) => [A[], B[]];
+import { ISearchConfig } from '../../models/header.model';
+/**
+ * Construct a search page url from a query
+ *
+ * @param query Search term
+ * @returns
+ */
+export declare const getSearchRedirectUrl: (query: string, searchConfig: ISearchConfig) => Promise<string | undefined>;
+/**
+ * Stitch toghether the search page URL
+ *
+ * @param query Search term
+ * @returns Search page URL
+ */
+export declare const getSearchPageUrl: (query: string) => string | undefined;
+/**
+ * Equalize the length of two arrays while filling up empty slots up to max. length
+ *
+ * @param arrayA First array
+ * @param arrayB Second array
+ * @param maxLength Max. length of result array
+ * @returns Array with two resulting arrays
+ */
+export declare const equalizeArrays: <A, B>(arrayA: A[], arrayB: B[], maxLength?: number) => [A[], B[]];

package/dist/types/services/ui.service.d.ts

@@ -1,23 +1,23 @@
-/**
- * Check if an element with `text-overflow: ellipsis;` is fully displayed or concatenated
- * https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection
- *
- * @param element Element to check. This is the element with the `text-overflow: ellipsis;` style
- * @returns
- */
-export declare const isConcatenated: (element: HTMLElement) => boolean;
-/**
- * Check if user preferes reduced motion
- * Windows 10: `Windows Settings` > `Ease of Access` > `Display` > `Simplify and Personalize Windows` > `Show animations in Windows`
- *
- * @returns
- */
-export declare const userPrefersReducedMotion: () => boolean;
-/**
- * Check if an element has a transition applied
- *
- * @param element Element to check. This is the element with the `transition` style
- * @param transition Specific transition to check for (e.g. `translate`)
- * @returns
- */
-export declare const elementHasTransition: (element: HTMLElement, transition: string) => boolean;
+/**
+ * Check if an element with `text-overflow: ellipsis;` is fully displayed or concatenated
+ * https://stackoverflow.com/questions/7738117/html-text-overflow-ellipsis-detection
+ *
+ * @param element Element to check. This is the element with the `text-overflow: ellipsis;` style
+ * @returns
+ */
+export declare const isConcatenated: (element: HTMLElement) => boolean;
+/**
+ * Check if user preferes reduced motion
+ * Windows 10: `Windows Settings` > `Ease of Access` > `Display` > `Simplify and Personalize Windows` > `Show animations in Windows`
+ *
+ * @returns
+ */
+export declare const userPrefersReducedMotion: () => boolean;
+/**
+ * Check if an element has a transition applied
+ *
+ * @param element Element to check. This is the element with the `transition` style
+ * @param transition Specific transition to check for (e.g. `translate`)
+ * @returns
+ */
+export declare const elementHasTransition: (element: HTMLElement, transition: string) => boolean;

package/dist/types/utils/highlighted.component.d.ts

@@ -1,4 +1,4 @@
-export declare const HighlightedText: (props: {
-  text: string;
-  highlightClass?: string;
-}) => any;
+export declare const HighlightedText: (props: {
+  text: string;
+  highlightClass?: string;
+}) => any;

package/dist/types/utils/if.component.d.ts

@@ -1,4 +1,4 @@
-import { JSXBase } from '../stencil-public-runtime';
-export declare const If: (props: {
-  condition: boolean;
-}, children: JSXBase.IntrinsicElements) => JSXBase.IntrinsicElements | null;
+import { JSXBase } from '../stencil-public-runtime';
+export declare const If: (props: {
+  condition: boolean;
+}, children: JSXBase.IntrinsicElements) => JSXBase.IntrinsicElements | null;

package/dist/types/utils/svg-icon.component.d.ts

@@ -1,4 +1,4 @@
-export declare const SvgIcon: (props: {
-  name: string;
-  classNames?: string;
-}) => any;
+export declare const SvgIcon: (props: {
+  name: string;
+  classNames?: string;
+}) => any;

package/dist/types/utils/svg-sprite.component.d.ts

@@ -1 +1 @@
-export declare const SvgSprite: () => any;
+export declare const SvgSprite: () => any;

package/dist/types/utils/utils.d.ts

@@ -1,8 +1,8 @@
-/**
- * Generates a (sequential) unique ID. If prefix is given, the ID is appended to it.
- *
- * @param prefix The value to prefix the ID with
- * @returns Unique ID
- */
-export declare const uniqueId: (prefix?: string) => string;
-export declare const prefersReducedMotion: boolean;
+/**
+ * Generates a (sequential) unique ID. If prefix is given, the ID is appended to it.
+ *
+ * @param prefix The value to prefix the ID with
+ * @returns Unique ID
+ */
+export declare const uniqueId: (prefix?: string) => string;
+export declare const prefersReducedMotion: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/internet-header",
-  "version": "1.5.0-beta.1",
+  "version": "1.5.0",
   "description": "Swiss Post Internet Header",
   "license": "Apache-2.0",
   "main": "loader/index.cjs.js",
@@ -20,23 +20,23 @@
     "loader/"
   ],
   "dependencies": {
-    "@sindresorhus/slugify": "2.1.1",
+    "@sindresorhus/slugify": "2.2.0",
     "@stencil/core": "3.0.0",
-    "@stencil/store": "1.5.0",
+    "@stencil/store": "2.0.3",
     "body-scroll-lock": "4.0.0-beta.0",
     "iframe-resizer": "4.3.2",
     "jquery": "3.6.3",
-    "tabbable": "5.3.3",
+    "tabbable": "6.0.1",
     "throttle-debounce": "3.0.1",
     "url-polyfill": "1.1.12"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",
     "@stencil/eslint-plugin": "0.4.0",
-    "@stencil/sass": "2.0.1",
-    "@swisspost/design-system-styles": "5.2",
+    "@stencil/sass": "2.0.3",
+    "@swisspost/design-system-styles": "5.3.0",
     "@types/iframe-resizer": "3.5.9",
-    "@types/jest": "27.5.1",
+    "@types/jest": "27.5.2",
     "@types/jquery": "3.5.16",
     "@types/node": "18.11.18",
     "@types/throttle-debounce": "2.1.0",

package/readme.md

@@ -1,15 +1,57 @@
-![Swiss Post Logo](https://www.post.ch/-/media/portal-opp/global/logos/logo---die-post.svg?vs=2&sc_lang=en)
-# Swiss Post Internet Header
-The official Swiss Post Internet Header implementation, built with [Stencil JS](https://stenciljs.com/).
-
-## Stencil JS
-Stencil is a compiler for building fast web apps using Web Components.
-
-Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool.  Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
-
-Stencil components are just Web Components, so they work in any major framework or with no framework at all.
-
-Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
-
-## Credits
-![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
+# Swiss Post Internet Header
+
+![Swiss Post Design System splash screen](https://user-images.githubusercontent.com/1659006/187683368-d3aa2534-84be-4580-846e-2cad3796b573.png)
+
+The official Swiss Post Internet Header implementation, built with [Stencil JS](https://stenciljs.com/).
+
+## Documentation
+The header docs are part of the storybook docs for the Design System.
+
+[Internet Header Documentation](https://styles.design-system.post.ch/?path=/story/components-internet-header-getting-started--page)
+
+## Installation
+There are two possibilities to install the header on a page.
+### npm installation
+Use this if your project uses a bundler or a framework like Angular, React or Vue.
+
+```bash
+npm install @swisspost/internet-header
+```
+
+`main.ts`
+```ts
+import { defineCustomElements } from '@swisspost/internet-header';
+
+defineCustomElements();
+```
+
+### Basic installation
+Use this if you want to use the CDN version and if you don't use a bundler or a framework.
+
+`index.html`
+```html
+<body>
+  <swisspost-internet-header project="your-project-id"></swisspost-internet-header>
+  ...
+  <script
+    type="module"
+    src="https://unpkg.com/@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.esm.js"
+  ></script>
+</body>
+```
+
+## Contribute
+
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](CODE_OF_CONDUCT.md)
+
+Considering supporting the Swiss Post Design System with your contribution? Whether you like to contribute new patterns, fix a bug, spotted a typo or have ideas for improvement - we'd love to hear from you. Learn how you can contribute to this project in the [header contribution guidelines](./CONTRIBUTING.md) and also take a look at the [general contribution guidelines](/CONTRIBUTING.md).
+
+For any questions regarding the pattern library, you can reach out on the [discussions page](https://github.com/swisspost/design-system/discussions).
+
+In order to keep our community open and inclusive, we expect you to read and follow our [Code of Conduct](/CODE_OF_CONDUCT.md).
+
+## License
+
+Software contained in this repository is published by the Swiss Post Ltd. under the [Apache 2.0 License](./LICENSE).
+
+© 2022 Swiss Post, Ltd.

package/dist/cjs/if.component-313f59b8.js.map

@@ -1 +0,0 @@
-{"file":"if.component-313f59b8.js","mappings":";;MAEa,EAAE,GAAG,CAChB,KAEC,EACD,QAAmC;EAEnC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;IACpB,OAAO,IAAI,CAAC;GACb;EACD,OAAO,QAAQ,CAAC;AAClB;;;;","names":[],"sources":["./src/utils/if.component.tsx"],"sourcesContent":["import { JSXBase } from '@stencil/core/internal';\r\n\r\nexport const If = (\r\n  props: {\r\n    condition: boolean;\r\n  },\r\n  children: JSXBase.IntrinsicElements,\r\n) => {\r\n  if (!props.condition) {\r\n    return null;\r\n  }\r\n  return children;\r\n};\r\n"],"version":3}