@postnord/web-components/types/globals/helpers.d.ts

PostNord Web Components

import type { PnTopbar, PnLanguages } from './types';
export declare const SE = "SE";
export declare const DK = "DK";
export declare const FI = "FI";
export declare const NO = "NO";
export declare const sv = "sv";
export declare const en = "en";
export declare const da = "da";
export declare const fi = "fi";
export declare const no = "no";
export declare const markets: string[];
export declare const languages: string[];
export declare const marketMap: {
    [key: string]: PnLanguages[];
};
export declare const getBytesFromHumanReadableFileSize: (sizeString: string) => number;
export declare function isSmallScreen(): boolean;
export declare function reduceMotion(): boolean;
export declare const uuidv4: () => string;
export declare function getTopbarHeight(): number;
export declare function getMenuHeight(): number;
export declare function getMenuWidth(): number;
export declare function getTotalHeightOffset(): number;
/**
 * @param {HTMLElement} host Use the `this.hostElement` property.
 *
 * @description The `awaitTopbar` function can be used to wait for the topbar to be available.
 *
 * The function will also setup listeners for any market/language changes from the topbar and updates the host element with the `setAttribute` function.
 *
 * Remember to use a Stencil `@Prop` named `market` and/or `language` to take advantage of the auto update feature.
 *
 * @returns The pnTopbar object.
 */
export declare function awaitTopbar(host: HTMLElement | any): Promise<PnTopbar>;
/**
 * @description Apply the Ripple effect quick and easy.
 *
 * @example
 * ```css
 * // CSS
 * pn-component-name { `@include pn-ripple($blue700) }
 * ```
 *
 * ```js
 * // tsx
 * onClick((e) => ripple(e, this.hostElement, '.pn-ripple-container'))
 * ```
 * @param event The MouseEvent from a onClick handler.
 * @param host The hostElement of the component (root element).
 * @param rippleClass Append the ripple event to this selector instead of the host element.
 */
export declare const ripple: (event: MouseEvent | {
    clientX: number;
    clientY: number;
}, host: HTMLElement, rippleClass?: string) => void;