@baloise/web-app-utils

Javascript utilities for Baloise Web Applications.

Installation guide

Using npm

npm i @baloise/web-app-utils

Table of Content

• Language Utils
• Browser Utils
• Integration Utils
• Common Model Utils
• Common Utils

Language Utils

The language utils helps to list the common languages and to detect the correct ones.

LanguageModel

valueOf

Returns the Language of the given language key or if the lauage is not registered it returns undefined.

Signature valueOf(key: string): Language | undefined

Example

const language = LanguageModel.valueOf('de')
if (language === undefined) {
  // language is not registered
}

valueOfOrDefault

Returns the Language of the given language key or if the language is not registered it returns the default one.

Signature valueOfOrDefault(key: string): Language

Example

const language = LanguageModel.valueOfOrDefault('de')

isValidKey

Verifies if the given language key is registered as a supported language or not.

Signature isValidKey(key: string): boolean

Example

if (LanguageModel.isValidKey('de')) {
  // language key is valid
} else {
  // language key is not valid
}

Languages

We provide various set of language list for our supported countries. Those Languages have the type LanguageModel.

LanguagesOfSwitzerland

List of german, french, italien & english with the default language german.

Example

LanguagesOfSwitzerland.isValidKey('de') // true
LanguagesOfSwitzerland.isValidKey('be') // false

LanguagesOfGermany

List of german & english with the default language german.

LanguagesOfBelgium

List of dutch, french, italien & english with the default language dutch.

LanguagesOfLuxembourg

List of luxembourgish, french & english with the default language luxembourgish.

Language

The language object has only one property the key which has the language key like en.

Browser Utils

The browser utils solve some common request when working with the broser api.

For working with cookies we recommand to use the library js-cookie.

For working with the url we recommand to use the library query-string.

Functions

scrollToAnchorElement

Scrolls to the ancor element with the attribute data-ref="heading".

Signature scrollToAnchorElement(referenceName: string): void

Example

<div data-ref="heading">...</div>

scrollToAnchorElement('heading')

scrollToTopOfBody

Scrolls to the top of the body.

Signature scrollToTopOfBody(): void

open

Opens a new location in the current tab.

Signature open(url: string): void

openInNewWindow

Opens the new location in a new tab.

Signature openInNewWindow(url: string): void

getBrowserLanguage

Returns the main language key. For example if the browser has the language de-CH this function return the language key de, so we can use our LangaugeModel.

Signature getBrowserLanguage(): string

Example

const langKey = getBrowserLanguage()
if(LanguagesOfSwitzerland.isValidKey(langKey)) { ... }
...

disableDragAndDropFiles

Disables for the whole web application drag and drop.

Signature disableDragAndDropFiles(): void

getBrowserInfo

Returns some useful information from the browser.

Signature getBrowserInfo(): BrowserInfo

interface BrowserInfo {
  cookiesEnabled?: boolean
  language?: string
  timezone?: string
  userAgent?: string
}

Integration Utils

The integration utils helps to work with our integration tools like one trust.

loadOneTrustBaloiseSwitzerland

Loads the one trust script directly from our main cms system with the necessary parameters.

Signature loadOneTrustBaloiseSwitzerland(): void

Common Model Utils

Some useful models to use in the daily business.

RequestState

The RequestState enum helps to have a state variable to show the current stand of an api call.

export enum RequestState {
  INIT,
  RUNNING,
  SUCCESS,
  ERROR,
}

Example (Angular)

import { Component, OnInit } from '@angular/core'
import { RequestState } from '@baloise/web-app-utils'
import { ConfirmEmailService, EmailConfirmationResponse } from '../confirm-email.service'

@Component({
  selector: 'confirm-email-page',
  templateUrl: './confirm-email.page.component.html',
  styleUrls: ['./confirm-email.page.component.scss'],
})
export class ConfirmEmailPageComponent implements OnInit {
  confirmEmailResponse: EmailConfirmationResponse
  requestState: RequestState = RequestState.INIT

  constructor(private confirmEmailService: ConfirmEmailService) {}

  confirmEmail() {
    this.requestState = RequestState.RUNNING
    this.confirmEmailService
      .confirmEmail()
      .toPromise()
      .then(resp => {
        this.requestState = RequestState.SUCCESS
        this.confirmEmailResponse = resp
      })
      .catch(() => {
        this.requestState = RequestState.ERROR
      })
  }
}

Common Utils

API

areArraysEqual

areArraysEqual(a: any, b: any) => boolean

Returns true if the arrays are equal

areArraysEqual(['a', 'b'], ['b', 'a']) // true

now

now() => Date

Returns a JS Date instance of the exact moment

const date = now()
// Wed Mar 10 2021 20:30:32 GMT+0100 (Central European Standard Time)

today

today() => Date

Returns a JS Date instance of today with time being set to 0

const date = today()
// Wed Mar 10 2021 00:00:00 GMT+0100 (Central European Standard Time)

floorTime

floorTime(date: Date) => Date

Returns a JS Date instance with time being set to 0

const date = floorTime(new Date())
// Wed Mar 10 2021 00:00:00 GMT+0100 (Central European Standard Time)

ceilTime

ceilTime(date: Date) => Date

Returns a JS Date instance with the time set to the possible end

const date = ceilTime(new Date())
// Wed Mar 10 2021 23:59:59 GMT+0100 (Central European Standard Time)

formatDateString

formatDateString(date: Date) => string

Return the formatted date string in ISO 8601 format. Options may be passed to control the parts and notations of the date.

const dateString = formatDateString(new Date())
// '2022-02-14'

isValidIsoString

isValidIsoString(dateString: any) => any

Validates if the given date string matches the iso date format.

isValidIsoString('2022-02-14')
// 'true'

format

format(locale: any, date: Date) => any

Formats the dates according to the given locale.

format('de-CH', new Date())
// '14.2.2022'

parse

parse(dateString: string, locale: any) => any

Parses the iso date string into a javascript date object.

const dateString = parse('2021-03-10')
// Wed Mar 10 2021 00:00:00 GMT+0100 (Central European Standard Time)

dateSeparator

dateSeparator(locale: any) => string

Returns the char which separates day form month and year.

dateSeparator('de-CH')
// .

debounce

debounce(func: any, wait: any) => any

The debounce function wait a certain amount of time before running the inner function again. This should reduce the number of times a function is called.

const debounceFunction = debounce(function () {
  // The function's code
}, 250)

window.addEventListener('resize', debounceFunction)

isEmpty

isEmpty(value: any) => boolean

Returns true if the value is empty

isEnterKey

isEnterKey(event: KeyboardEvent) => boolean

Returns true if the keyboard event was triggered by the Enter key

isSpaceKey

isSpaceKey(event: KeyboardEvent) => boolean

Returns true if the keyboard event was triggered by the Space key

isEscapeKey

isEscapeKey(event: KeyboardEvent) => boolean

Returns true if the keyboard event was triggered by the Escape key

isBackspaceKey

isBackspaceKey(event: KeyboardEvent) => boolean

Returns true if the keyboard event was triggered by the Backspace key

isArrowDownKey

isArrowDownKey(event: KeyboardEvent) => boolean

Returns true if the keyboard event was triggered by the ArrowDown key

isArrowUpKey

isArrowUpKey(event: KeyboardEvent) => boolean

Returns true if the keyboard event was triggered by the ArrowUp key

numberLocale

numberLocale(locale: any) => string

Parses the locale to the correct display locale

numberLocale('de-CH')
// 'de-CH'

dateLocale

dateLocale(locale: any) => string

Parses the locale to the correct display locale

numberLocale('de-CH')
// 'fr-CH'

isValidMonetaryNumber

isValidMonetaryNumber(stringValue: string) => boolean

Returns true if the arrays are equal

isValidMonetaryNumber(`1'000.99`) // true

getDecimalSeparator

getDecimalSeparator(locale: any) => string

Returns the decimal separator of the given locale

getDecimalSeparator('de-ch') // .

getThousandSeparator

getThousandSeparator(locale: any) => string

Returns the thousand separator of the given locale

getThousandSeparator('de-ch') // '

formatLocaleNumber

formatLocaleNumber(locale: any, number: number, minimumFractionDigits: number) => string

Formats the number into the given locale

formatLocaleNumber('de-ch', 1000.42) // 1'000.42

parseLocaleNumber

parseLocaleNumber(locale: any, stringNumber: string) => number

Parses the locale formatted number into a native number

parseLocaleNumber('de-ch', '1'000.42') // 1000.42