@baloise/web-app-utils
    TypeScript icon, indicating that this package has built-in type declarations

    3.9.0 • Public • Published

    @baloise/web-app-utils

    Continuous Release npm npm bundle size npm GitHub GitHub issues

    Javascript utilities for Baloise Web Applications.

    Installation guide

    Using npm

    npm i @baloise/web-app-utils

    Table of Content

    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

    Keywords

    none

    Install

    npm i @baloise/web-app-utils

    DownloadsWeekly Downloads

    471

    Version

    3.9.0

    License

    Apache-2.0

    Unpacked Size

    132 kB

    Total Files

    24

    Last publish

    Collaborators

    • assistentenitch
    • madalina.iacob
    • yannickholzenkamp
    • montakasparsone
    • team_mortal
    • mladenplaninicic
    • nobilo
    • thomasseyssenstpo
    • se-aperto-com
    • baopso
    • hirsch88