Javascript utilities for Baloise Web Applications.
npm i @baloise/web-app-utilsThe language utils helps to list the common languages and to detect the correct ones.
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
}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')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
}We provide various set of language list for our supported countries. Those Languages have the type LanguageModel.
List of german, french, italien & english with the default language german.
Example
LanguagesOfSwitzerland.isValidKey('de') // true
LanguagesOfSwitzerland.isValidKey('be') // falseList of german & english with the default language german.
List of dutch, french, italien & english with the default language dutch.
List of luxembourgish, french & english with the default language luxembourgish.
The language object has only one property the key which has the language key like en.
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.
Scrolls to the ancor element with the attribute data-ref="heading".
Signature
scrollToAnchorElement(referenceName: string): void
Example
<div data-ref="heading">...</div>scrollToAnchorElement('heading')Scrolls to the top of the body.
Signature
scrollToTopOfBody(): void
Opens a new location in the current tab.
Signature
open(url: string): void
Opens the new location in a new tab.
Signature
openInNewWindow(url: string): void
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)) { ... }
...Disables for the whole web application drag and drop.
Signature
disableDragAndDropFiles(): void
Returns some useful information from the browser.
Signature
getBrowserInfo(): BrowserInfo
interface BrowserInfo {
cookiesEnabled?: boolean
language?: string
timezone?: string
userAgent?: string
}The integration utils helps to work with our integration tools like one trust.
Loads the one trust script directly from our main cms system with the necessary parameters.
Signature
loadOneTrustBaloiseSwitzerland(): void
Some useful models to use in the daily business.
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
})
}
}areArraysEqual(a: any, b: any) => boolean
Returns true if the arrays are equal
areArraysEqual(['a', 'b'], ['b', 'a']) // truenow() => 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() => 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(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(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(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(dateString: any) => any
Validates if the given date string matches the iso date format.
isValidIsoString('2022-02-14')
// 'true'format(locale: any, date: Date) => any
Formats the dates according to the given locale.
format('de-CH', new Date())
// '14.2.2022'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(locale: any) => string
Returns the char which separates day form month and year.
dateSeparator('de-CH')
// .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(value: any) => boolean
Returns true if the value is empty
isEnterKey(event: KeyboardEvent) => boolean
Returns true if the keyboard event was triggered by the Enter key
isSpaceKey(event: KeyboardEvent) => boolean
Returns true if the keyboard event was triggered by the Space key
isEscapeKey(event: KeyboardEvent) => boolean
Returns true if the keyboard event was triggered by the Escape key
isBackspaceKey(event: KeyboardEvent) => boolean
Returns true if the keyboard event was triggered by the Backspace key
isArrowDownKey(event: KeyboardEvent) => boolean
Returns true if the keyboard event was triggered by the ArrowDown key
isArrowUpKey(event: KeyboardEvent) => boolean
Returns true if the keyboard event was triggered by the ArrowUp key
isArrowLeftKey(event: KeyboardEvent) => boolean
Returns true if the keyboard event was triggered by the ArrowLeft key
isArrowRightKey(event: KeyboardEvent) => boolean
Returns true if the keyboard event was triggered by the ArrowRight key
isHomeKey(event: KeyboardEvent) => boolean
Returns true if the keyboard event was triggered by the Home key
isEndKey(event: KeyboardEvent) => boolean
Returns true if the keyboard event was triggered by the End key
numberLocale(locale: any) => string
Parses the locale to the correct display locale
numberLocale('de-CH')
// 'de-CH'dateLocale(locale: any) => string
Parses the locale to the correct display locale
numberLocale('de-CH')
// 'fr-CH'isValidMonetaryNumber(stringValue: string) => boolean
Returns true if the arrays are equal
isValidMonetaryNumber(`1'000.99`) // truegetDecimalSeparator(locale: any) => string
Returns the decimal separator of the given locale
getDecimalSeparator('de-ch') // .getThousandSeparator(locale: any) => string
Returns the thousand separator of the given locale
getThousandSeparator('de-ch') // 'formatLocaleNumber(locale: any, number: number, minimumFractionDigits: number) => string
Formats the number into the given locale
formatLocaleNumber('de-ch', 1000.42) // 1'000.42parseLocaleNumber(locale: any, stringNumber: string) => number
Parses the locale formatted number into a native number
parseLocaleNumber('de-ch', '1'000.42') // 1000.42