@swisspost/internet-header 1.5.0-beta.0

package/dist/types/models/header.model.d.ts

@@ -0,0 +1,163 @@
+import { EventEmitter } from '../stencil-public-runtime';
+import { AdditionalAttribute } from './breadcrumbs.model';
+import { Environment } from './general.model';
+export interface IHeaderConfig {
+  asWebComponent: boolean;
+  isHeaderResponsive: boolean;
+  isLoginWidgetHidden: boolean;
+  showJobsLoginWidget: boolean;
+  icons: {
+    backArrowIcon: IIconConfig;
+    closeIcon: IIconConfig;
+    downArrowIcon: IIconConfig;
+    menuIcon: IIconConfig;
+    rightArrowIcon: IIconConfig;
+    searchIcon: IIconConfig;
+    loginIcon: IIconConfig;
+  };
+  loginWidgetOptions?: ILoginWidgetOptions;
+  loginWidgetId: string;
+  logo: ILogoConfig;
+  mobileMenu: {
+    text: string;
+  };
+  search: ISearchConfig;
+  onlineServiceId: string;
+  navMain: NavMainEntity[];
+  navMeta?: NavMetaEntity[];
+  navLang: NavLangEntity[];
+  translations: IHeaderTranslations;
+}
+export interface IIconConfig {
+  name: string;
+  classes?: string[];
+  additionalAttributes?: AdditionalAttribute[];
+}
+export interface ILoginWidgetOptions {
+  applicationId: string;
+  serviceId: string;
+  appLoginUrl: string;
+  currentLang: string;
+  environment?: Environment;
+  options: {
+    isDebugEnabled: boolean;
+    logoutTargetURL: string;
+  };
+  platform: {
+    endPoint: string;
+    notificationsEndPoint: string;
+    logoutURL: string;
+    keepAliveURL: string;
+    autoLoginURL: string;
+  };
+}
+export interface ILogoConfig {
+  logoLink: string;
+  logoLinkTitle: string;
+  logoSvg: string;
+  logoText: string;
+}
+export interface ISearchConfig {
+  isSearchHidden: boolean;
+  searchPageUrl: string;
+  redirectPattern: string;
+  searchBoxSuggestionsThreshold: string;
+  searchBoxSuggestionsAllNumber: string;
+  searchBoxSuggestionsCoveoNumber: string;
+  placesRedirectUrl: string;
+  packageTrackingRedirectUrl: string;
+  searchHubName: string;
+  searchPipelineName: string;
+  searchRecommendations: ISearchRecommendationContainer;
+}
+export interface ISearchRecommendationContainer {
+  title: string;
+  links: ISearchRecommendation[];
+}
+export interface ISearchRecommendation {
+  href: string;
+  inlineSvg: string;
+  label: string;
+  target: string;
+  additionalAttributes: Array<{
+    name: string;
+    value: string;
+  }>;
+}
+export interface NavMainEntity {
+  id?: string;
+  text: string;
+  title: string;
+  url: string;
+  isActive?: boolean;
+  isActiveOverride?: boolean;
+  noFlyout?: boolean;
+  flyout: FlyoutEntity[];
+}
+export interface FlyoutEntity {
+  title: string;
+  linkList: LinkListEntity[];
+}
+export interface LinkListEntity {
+  title: string;
+  url: string;
+  target?: string;
+  isActive?: boolean;
+  isActiveOverride?: boolean;
+}
+export interface NavMetaEntity {
+  isActive: boolean;
+  isHomeLink: boolean;
+  target?: string;
+  text: string;
+  url: string;
+}
+export interface NavLangEntity {
+  a11yLabel?: string;
+  isCurrent: boolean;
+  lang: string;
+  text: string;
+  title: string;
+  url?: string;
+}
+export interface IHeaderTranslations {
+  backButtonText: string;
+  closeButtonText: string;
+  homeLinkTitle: string;
+  navLangAriaLabel: string;
+  navMainAriaLabel: string;
+  navMetaAriaLabel: string;
+  searchAriaLabel: string;
+  flyoutSearchBoxFloatingLabel: string;
+  searchPlaceholder: string;
+  searchSubmit: string;
+  searchToggle: string;
+  searchToggleExpanded: string;
+  searchA11yLabelClosed: string;
+  searchA11yLabelOpened: string;
+  mobileNavToggleClose: string;
+  mobileNavToggleOpen: string;
+  nonResponsiveHeader: string;
+  loginWidgetText?: string;
+}
+export interface IsFocusable {
+  setFocus: () => void;
+}
+export type FocusableElement = HTMLElement & IsFocusable;
+export interface HasDropdown {
+  toggleDropdown: (force?: boolean) => Promise<boolean>;
+  dropdownToggled: EventEmitter<DropdownEvent>;
+}
+export type DropdownElement = HTMLElement & HasDropdown;
+export type DropdownEvent = {
+  open: boolean;
+  element: DropdownElement;
+};
+export interface ICustomHeaderConfig {
+  navMain: NavMainEntity[];
+}
+export type MainNavScoreList = {
+  main: NavMainEntity;
+  sub?: LinkListEntity;
+  score: number;
+}[];

package/dist/types/models/implementor.model.d.ts

@@ -0,0 +1,22 @@
+export type StickynessOptions = 'none' | 'minimal' | 'main' | 'full';
+/**
+ * Settings any implementor of the internet header can set on the component
+ * itself. Has to be a valid JSON string.
+ *
+ * HTML example (note the quotes):
+ * ```html
+ * <post-internet-header config='{ "serviceId": "test" }'></post-internet-header>
+ * ```
+ * or via JavaScript:
+ * ```js
+ * const header = document.querySelector('post-internet-header');
+ * header.config = { serviceId: 'test' };
+ * ```
+ */
+export interface IImplementorConfig {
+  serviceId: string;
+  stickyness?: StickynessOptions;
+  preferredLanguage?: string;
+  languageCookieName?: string;
+  languageStorageKey?: string;
+}

package/dist/types/models/language.model.d.ts

@@ -0,0 +1,6 @@
+export interface IAvailableLanguage {
+  lang: string;
+  text?: string;
+  title?: string;
+  url?: string;
+}

package/dist/types/models/track-and-trace.model.d.ts

@@ -0,0 +1,25 @@
+export interface TrackAndTraceInfo {
+  ok: boolean;
+  timestamp: string;
+  sending?: {
+    'id': string;
+    'product': string;
+    'state': string;
+    'state-id': number;
+    'recipient': {
+      zipcode: string;
+      city: string;
+    };
+  };
+  events?: [
+    {
+      date: string;
+      time: string;
+      number: string;
+      description: string;
+      zip: string;
+      city: string;
+      coords: [number, number];
+    }
+  ];
+}

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

@@ -0,0 +1,56 @@
+import { Environment, IPortalConfig, ILocalizedConfig, ICustomConfig, ILocalizedCustomConfig, LocalizedConfigParameters } from '../models/general.model';
+import { NavMainEntity } from '../models/header.model';
+/**
+ * Get a localized config object
+ *
+ * @param projectId String identifying the project
+ * @param language [optional] Preferred language
+ * @returns Localized config object
+ */
+export declare const getLocalizedConfig: ({ projectId, environment, language, cookieKey, localStorageKey, activeRouteProp, localizedCustomConfig, osFlyoutOverrides, }: LocalizedConfigParameters) => Promise<ILocalizedConfig>;
+/**
+ * Merge portal config with custom os flyout overrides
+ * @param config Localized config
+ * @param osFlyoutOverrides Overrides for the flyout
+ * @returns Merged localized config
+ */
+export declare const mergeOsFlyoutOverrides: (config: ILocalizedConfig, osFlyoutOverrides: NavMainEntity) => NavMainEntity[];
+/**
+ * Fetch the general config based on project id
+ *
+ * @returns Promise for Post Portal general config
+ */
+export declare const fetchConfig: (projectId: string, environment: Environment) => Promise<IPortalConfig>;
+/**
+ * Generate an URL with all necessary query params to get the configuration.
+ * Project id "test" will return a test configuration
+ * @param projectId string
+ * @param environment int01, int02 or prod
+ * @returns URL pointing to the project config
+ */
+export declare const generateConfigUrl: (projectId: string, environment: Environment) => string;
+/**
+ * Check if project id contains only URL safe characters
+ *
+ * @param projectId Project Id string
+ * @returns The valid project id
+ */
+export declare const isValidProjectId: (projectId: string) => boolean;
+/**
+ * Get the localized config object from a custom config
+ *
+ * @param config String or json object of the custom config
+ * @param language Specific language
+ * @returns Localized custom config object
+ */
+export declare const getLocalizedCustomConfig: (config: string | ICustomConfig, language: string) => ILocalizedCustomConfig | undefined;
+/**
+ * Check if mobile header styles are applied or not
+ * @returns True if browser is smaller than 1024px
+ */
+export declare const isMobile: () => boolean;
+/**
+ * Set unique ID's on main navigation entities but conserve flyout_os to be able to
+ * identify the online-service flyout, which can be configured by osFlyoutOverrides
+ */
+export declare const setMainNavigationIds: (navMainEntities: NavMainEntity[]) => void;

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

@@ -0,0 +1,65 @@
+export declare const getUserLang: (supportedLanguages: string[], implementorPreferredLanguage?: string, localStorageKey?: string, cookieKey?: string) => string | undefined;
+/**
+ * Persist chosen language to local storage
+ * @param lang Currently chose language, two char string
+ */
+export declare const persistLanguageChoice: (lang: string, cookieKey?: string, localStorageKey?: string) => void;
+/**
+ * Read a cookie by name
+ * https://stackoverflow.com/questions/5639346/what-is-the-shortest-function-for-reading-a-cookie-by-name-in-javascript?rq=1
+ * @param name Cookie name
+ * @returns Cookie value or an empty string
+ */
+export declare const getCookie: (name: string) => string;
+/**
+ * Write a new cookie
+ * https://developer.mozilla.org/en-US/docs/Web/API/document/cookie#A_little_framework.3A_a_complete_cookies_reader.2Fwriter_with_full_unicode_support
+ * @param key
+ * @param value
+ */
+export declare const setCookie: (key: string, value: string) => void;
+/**
+ * Simple translate function for general header UI strings
+ *
+ * @param key Translation key
+ * @param lang Force a language
+ * @param translationObject Optionally provide translations
+ * @returns Translated string or the key
+ */
+export declare const translate: (key: string, lang?: string, translationObject?: {
+  'Close overlay': {
+    de: string;
+    fr: string;
+    it: string;
+  };
+  'Current language is English': {
+    de: string;
+    fr: string;
+    it: string;
+  };
+  'Change language': {
+    de: string;
+    fr: string;
+    it: string;
+  };
+  'Go to main content': {
+    de: string;
+    fr: string;
+    it: string;
+  };
+  'Go to search': {
+    de: string;
+    fr: string;
+    it: string;
+  };
+  'Go to login': {
+    de: string;
+    fr: string;
+    it: string;
+  };
+  'Open menu': {
+    de: string;
+    fr: string;
+    it: string;
+  };
+}) => any;

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

@@ -0,0 +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;

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

@@ -0,0 +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[]>;

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

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

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

@@ -0,0 +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>;

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

@@ -0,0 +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;

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

@@ -0,0 +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[];

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

@@ -0,0 +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;

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

@@ -0,0 +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[]];

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

@@ -0,0 +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;