@lumx/core 3.20.1-alpha.44 → 3.20.1-alpha.46

package/js/constants/className/index.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Visually hidden a11y utility class name
+ */
+export declare const VISUALLY_HIDDEN = "visually-hidden";

package/js/constants/className/index.js

@@ -0,0 +1,6 @@
+/**
+ * Visually hidden a11y utility class name
+ */
+const VISUALLY_HIDDEN = 'visually-hidden';
+
+export { VISUALLY_HIDDEN };

package/js/constants/components/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
+ */
+export declare const DIALOG_TRANSITION_DURATION = 400;
+export declare const EXPANSION_PANEL_TRANSITION_DURATION = 400;
+export declare const NOTIFICATION_TRANSITION_DURATION = 200;
+export declare const SLIDESHOW_TRANSITION_DURATION = 5000;
+/**
+ * Delay on hover after which we open or close the tooltip.
+ * Only applies to devices supporting pointer hover.
+ */
+export declare const TOOLTIP_HOVER_DELAY: {
+    open: number;
+    close: number;
+};
+/**
+ * Delay on long press after which we open or close the tooltip.
+ * Only applies to devices not supporting pointer hover.
+ */
+export declare const TOOLTIP_LONG_PRESS_DELAY: {
+    open: number;
+    close: number;
+};

package/js/constants/components/index.js

@@ -0,0 +1,26 @@
+/**
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
+ */
+const DIALOG_TRANSITION_DURATION = 400;
+const EXPANSION_PANEL_TRANSITION_DURATION = 400;
+const NOTIFICATION_TRANSITION_DURATION = 200;
+const SLIDESHOW_TRANSITION_DURATION = 5000;
+/**
+ * Delay on hover after which we open or close the tooltip.
+ * Only applies to devices supporting pointer hover.
+ */
+const TOOLTIP_HOVER_DELAY = {
+    open: 500,
+    close: 500,
+};
+/**
+ * Delay on long press after which we open or close the tooltip.
+ * Only applies to devices not supporting pointer hover.
+ */
+const TOOLTIP_LONG_PRESS_DELAY = {
+    open: 250,
+    close: 3000,
+};
+
+export { DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, NOTIFICATION_TRANSITION_DURATION, SLIDESHOW_TRANSITION_DURATION, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY };

package/js/constants/enums/index.d.ts

@@ -0,0 +1,200 @@
+import type { ValueOf } from '@lumx/core/js/types';
+/**
+ * Alignments.
+ */
+export declare const Alignment: {
+    readonly bottom: "bottom";
+    readonly center: "center";
+    readonly end: "end";
+    readonly left: "left";
+    readonly right: "right";
+    readonly spaceAround: "space-around";
+    readonly spaceBetween: "space-between";
+    readonly spaceEvenly: "space-evenly";
+    readonly start: "start";
+    readonly top: "top";
+};
+export type Alignment = ValueOf<typeof Alignment>;
+export type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
+export type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
+export declare const Theme: {
+    readonly light: "light";
+    readonly dark: "dark";
+};
+export type Theme = ValueOf<typeof Theme>;
+export declare const Size: {
+    readonly xxs: "xxs";
+    readonly xs: "xs";
+    readonly s: "s";
+    readonly m: "m";
+    readonly l: "l";
+    readonly xl: "xl";
+    readonly xxl: "xxl";
+    readonly tiny: "tiny";
+    readonly regular: "regular";
+    readonly medium: "medium";
+    readonly big: "big";
+    readonly huge: "huge";
+};
+export type Size = ValueOf<typeof Size>;
+export type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+export declare const Orientation: {
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+};
+export type Orientation = ValueOf<typeof Orientation>;
+export declare const Emphasis: {
+    readonly low: "low";
+    readonly medium: "medium";
+    readonly high: "high";
+};
+export type Emphasis = ValueOf<typeof Emphasis>;
+/**
+ * List of typographies that can't be customized.
+ */
+export declare const TypographyInterface: {
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+export type TypographyInterface = ValueOf<typeof TypographyInterface>;
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+export declare const TypographyTitleCustom: {
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+};
+export type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+export declare const TypographyCustom: {
+    readonly intro: "custom-intro";
+    readonly 'body-large': "custom-body-large";
+    readonly body: "custom-body";
+    readonly quote: "custom-quote";
+    readonly 'publish-info': "custom-publish-info";
+    readonly button: "custom-button";
+    readonly title1: "custom-title1";
+    readonly title2: "custom-title2";
+    readonly title3: "custom-title3";
+    readonly title4: "custom-title4";
+    readonly title5: "custom-title5";
+    readonly title6: "custom-title6";
+};
+export type TypographyCustom = ValueOf<typeof TypographyCustom>;
+/**
+ * List of all typographies.
+ */
+export declare const Typography: {
+    readonly custom: {
+        readonly intro: "custom-intro";
+        readonly 'body-large': "custom-body-large";
+        readonly body: "custom-body";
+        readonly quote: "custom-quote";
+        readonly 'publish-info': "custom-publish-info";
+        readonly button: "custom-button";
+        readonly title1: "custom-title1";
+        readonly title2: "custom-title2";
+        readonly title3: "custom-title3";
+        readonly title4: "custom-title4";
+        readonly title5: "custom-title5";
+        readonly title6: "custom-title6";
+    };
+    readonly overline: "overline";
+    readonly caption: "caption";
+    readonly body1: "body1";
+    readonly body2: "body2";
+    readonly subtitle1: "subtitle1";
+    readonly subtitle2: "subtitle2";
+    readonly title: "title";
+    readonly headline: "headline";
+    readonly display1: "display1";
+};
+export type Typography = TypographyInterface | TypographyCustom;
+/**
+ * All available aspect ratios.
+ */
+export declare const AspectRatio: {
+    /** Intrinsic content ratio. */
+    readonly original: "original";
+    /** Ratio 3:1 */
+    readonly panoramic: "panoramic";
+    /** Ratio 16:9 */
+    readonly wide: "wide";
+    /** Ratio 3:2 */
+    readonly horizontal: "horizontal";
+    /** Ratio 3:2 */
+    readonly vertical: "vertical";
+    /** Ratio 1:1 */
+    readonly square: "square";
+    /** Ratio constrained by the parent. */
+    readonly free: "free";
+};
+export type AspectRatio = ValueOf<typeof AspectRatio>;
+/**
+ * Semantic info about the purpose of the component
+ */
+export declare const Kind: {
+    readonly info: "info";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly error: "error";
+};
+export type Kind = ValueOf<typeof Kind>;
+/**
+ * All available white-space values
+ * */
+export declare const WhiteSpace: {
+    normal: string;
+    nowrap: string;
+    pre: string;
+    'pre-wrap': string;
+    'pre-line': string;
+    'break-spaces': string;
+};
+export type WhiteSpace = ValueOf<typeof WhiteSpace>;
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+export declare const ColorPalette: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly blue: "blue";
+    readonly dark: "dark";
+    readonly green: "green";
+    readonly yellow: "yellow";
+    readonly red: "red";
+    readonly light: "light";
+    readonly grey: "grey";
+};
+export type ColorPalette = ValueOf<typeof ColorPalette>;
+export type Color = ColorPalette | string;
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+export declare const ColorVariant: {
+    readonly D1: "D1";
+    readonly D2: "D2";
+    readonly L1: "L1";
+    readonly L2: "L2";
+    readonly L3: "L3";
+    readonly L4: "L4";
+    readonly L5: "L5";
+    readonly L6: "L6";
+    readonly N: "N";
+};
+export type ColorVariant = ValueOf<typeof ColorVariant>;
+/** ColorPalette with all possible color variant combination */
+export type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;

package/js/constants/enums/index.js

@@ -0,0 +1,155 @@
+/**
+ * Alignments.
+ */
+const Alignment = {
+    bottom: 'bottom',
+    center: 'center',
+    end: 'end',
+    left: 'left',
+    right: 'right',
+    spaceAround: 'space-around',
+    spaceBetween: 'space-between',
+    spaceEvenly: 'space-evenly',
+    start: 'start',
+    top: 'top',
+};
+const Theme = {
+    light: 'light',
+    dark: 'dark',
+};
+const Size = {
+    xxs: 'xxs',
+    xs: 'xs',
+    s: 's',
+    m: 'm',
+    l: 'l',
+    xl: 'xl',
+    xxl: 'xxl',
+    tiny: 'tiny',
+    regular: 'regular',
+    medium: 'medium',
+    big: 'big',
+    huge: 'huge',
+};
+const Orientation = {
+    horizontal: 'horizontal',
+    vertical: 'vertical',
+};
+const Emphasis = {
+    low: 'low',
+    medium: 'medium',
+    high: 'high',
+};
+/**
+ * List of typographies that can't be customized.
+ */
+const TypographyInterface = {
+    overline: 'overline',
+    caption: 'caption',
+    body1: 'body1',
+    body2: 'body2',
+    subtitle1: 'subtitle1',
+    subtitle2: 'subtitle2',
+    title: 'title',
+    headline: 'headline',
+    display1: 'display1',
+};
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+const TypographyTitleCustom = {
+    title1: 'custom-title1',
+    title2: 'custom-title2',
+    title3: 'custom-title3',
+    title4: 'custom-title4',
+    title5: 'custom-title5',
+    title6: 'custom-title6',
+};
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+const TypographyCustom = {
+    ...TypographyTitleCustom,
+    intro: 'custom-intro',
+    'body-large': 'custom-body-large',
+    body: 'custom-body',
+    quote: 'custom-quote',
+    'publish-info': 'custom-publish-info',
+    button: 'custom-button',
+};
+/**
+ * List of all typographies.
+ */
+const Typography = {
+    ...TypographyInterface,
+    custom: TypographyCustom,
+};
+/**
+ * All available aspect ratios.
+ */
+const AspectRatio = {
+    /** Intrinsic content ratio. */
+    original: 'original',
+    /** Ratio 3:1 */
+    panoramic: 'panoramic',
+    /** Ratio 16:9 */
+    wide: 'wide',
+    /** Ratio 3:2 */
+    horizontal: 'horizontal',
+    /** Ratio 3:2 */
+    vertical: 'vertical',
+    /** Ratio 1:1 */
+    square: 'square',
+    /** Ratio constrained by the parent. */
+    free: 'free',
+};
+/**
+ * Semantic info about the purpose of the component
+ */
+const Kind = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+};
+/**
+ * All available white-space values
+ * */
+const WhiteSpace = {
+    normal: 'normal',
+    nowrap: 'nowrap',
+    pre: 'pre',
+    'pre-wrap': 'pre-wrap',
+    'pre-line': 'pre-line',
+    'break-spaces': 'break-spaces',
+};
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+const ColorPalette = {
+    primary: 'primary',
+    secondary: 'secondary',
+    blue: 'blue',
+    dark: 'dark',
+    green: 'green',
+    yellow: 'yellow',
+    red: 'red',
+    light: 'light',
+    grey: 'grey',
+};
+/**
+ * See SCSS variable $lumx-color-variants
+ */
+const ColorVariant = {
+    D1: 'D1',
+    D2: 'D2',
+    L1: 'L1',
+    L2: 'L2',
+    L3: 'L3',
+    L4: 'L4',
+    L5: 'L5',
+    L6: 'L6',
+    N: 'N',
+};
+
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };

package/js/constants/index.d.ts

@@ -1,232 +1,4 @@
-import { ValueOf } from '../types/ValueOf';
-/**
- * Key codes.
- */
 export * from './keycodes';
-/**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
- */
-export declare const DIALOG_TRANSITION_DURATION = 400;
-export declare const EXPANSION_PANEL_TRANSITION_DURATION = 400;
-export declare const NOTIFICATION_TRANSITION_DURATION = 200;
-export declare const SLIDESHOW_TRANSITION_DURATION = 5000;
-/**
- * Delay on hover after which we open or close the tooltip.
- * Only applies to devices supporting pointer hover.
- */
-export declare const TOOLTIP_HOVER_DELAY: {
-    open: number;
-    close: number;
-};
-/**
- * Delay on long press after which we open or close the tooltip.
- * Only applies to devices not supporting pointer hover.
- */
-export declare const TOOLTIP_LONG_PRESS_DELAY: {
-    open: number;
-    close: number;
-};
-/**
- * Alignments.
- */
-export declare const Alignment: {
-    readonly bottom: "bottom";
-    readonly center: "center";
-    readonly end: "end";
-    readonly left: "left";
-    readonly right: "right";
-    readonly spaceAround: "space-around";
-    readonly spaceBetween: "space-between";
-    readonly spaceEvenly: "space-evenly";
-    readonly start: "start";
-    readonly top: "top";
-};
-export type Alignment = ValueOf<typeof Alignment>;
-export type VerticalAlignment = Extract<Alignment, 'top' | 'center' | 'bottom'>;
-export type HorizontalAlignment = Extract<Alignment, 'right' | 'center' | 'left'>;
-export declare const Theme: {
-    readonly light: "light";
-    readonly dark: "dark";
-};
-export type Theme = ValueOf<typeof Theme>;
-export declare const Size: {
-    readonly xxs: "xxs";
-    readonly xs: "xs";
-    readonly s: "s";
-    readonly m: "m";
-    readonly l: "l";
-    readonly xl: "xl";
-    readonly xxl: "xxl";
-    readonly tiny: "tiny";
-    readonly regular: "regular";
-    readonly medium: "medium";
-    readonly big: "big";
-    readonly huge: "huge";
-};
-export type Size = ValueOf<typeof Size>;
-export type GlobalSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-export declare const Orientation: {
-    readonly horizontal: "horizontal";
-    readonly vertical: "vertical";
-};
-export type Orientation = ValueOf<typeof Orientation>;
-export declare const Emphasis: {
-    readonly low: "low";
-    readonly medium: "medium";
-    readonly high: "high";
-};
-export type Emphasis = ValueOf<typeof Emphasis>;
-/**
- * List of typographies that can't be customized.
- */
-export declare const TypographyInterface: {
-    readonly overline: "overline";
-    readonly caption: "caption";
-    readonly body1: "body1";
-    readonly body2: "body2";
-    readonly subtitle1: "subtitle1";
-    readonly subtitle2: "subtitle2";
-    readonly title: "title";
-    readonly headline: "headline";
-    readonly display1: "display1";
-};
-export type TypographyInterface = ValueOf<typeof TypographyInterface>;
-/**
- * List of title typographies that can be customized (via CSS variables).
- */
-export declare const TypographyTitleCustom: {
-    readonly title1: "custom-title1";
-    readonly title2: "custom-title2";
-    readonly title3: "custom-title3";
-    readonly title4: "custom-title4";
-    readonly title5: "custom-title5";
-    readonly title6: "custom-title6";
-};
-export type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
-/**
- * List of typographies that can be customized (via CSS variables).
- */
-export declare const TypographyCustom: {
-    readonly intro: "custom-intro";
-    readonly 'body-large': "custom-body-large";
-    readonly body: "custom-body";
-    readonly quote: "custom-quote";
-    readonly 'publish-info': "custom-publish-info";
-    readonly button: "custom-button";
-    readonly title1: "custom-title1";
-    readonly title2: "custom-title2";
-    readonly title3: "custom-title3";
-    readonly title4: "custom-title4";
-    readonly title5: "custom-title5";
-    readonly title6: "custom-title6";
-};
-export type TypographyCustom = ValueOf<typeof TypographyCustom>;
-/**
- * List of all typographies.
- */
-export declare const Typography: {
-    readonly custom: {
-        readonly intro: "custom-intro";
-        readonly 'body-large': "custom-body-large";
-        readonly body: "custom-body";
-        readonly quote: "custom-quote";
-        readonly 'publish-info': "custom-publish-info";
-        readonly button: "custom-button";
-        readonly title1: "custom-title1";
-        readonly title2: "custom-title2";
-        readonly title3: "custom-title3";
-        readonly title4: "custom-title4";
-        readonly title5: "custom-title5";
-        readonly title6: "custom-title6";
-    };
-    readonly overline: "overline";
-    readonly caption: "caption";
-    readonly body1: "body1";
-    readonly body2: "body2";
-    readonly subtitle1: "subtitle1";
-    readonly subtitle2: "subtitle2";
-    readonly title: "title";
-    readonly headline: "headline";
-    readonly display1: "display1";
-};
-export type Typography = TypographyInterface | TypographyCustom;
-/**
- * All available aspect ratios.
- */
-export declare const AspectRatio: {
-    /** Intrinsic content ratio. */
-    readonly original: "original";
-    /** Ratio 3:1 */
-    readonly panoramic: "panoramic";
-    /** Ratio 16:9 */
-    readonly wide: "wide";
-    /** Ratio 3:2 */
-    readonly horizontal: "horizontal";
-    /** Ratio 3:2 */
-    readonly vertical: "vertical";
-    /** Ratio 1:1 */
-    readonly square: "square";
-    /** Ratio constrained by the parent. */
-    readonly free: "free";
-};
-export type AspectRatio = ValueOf<typeof AspectRatio>;
-/**
- * Semantic info about the purpose of the component
- */
-export declare const Kind: {
-    readonly info: "info";
-    readonly success: "success";
-    readonly warning: "warning";
-    readonly error: "error";
-};
-export type Kind = ValueOf<typeof Kind>;
-/**
- * All available white-space values
- * */
-export declare const WhiteSpace: {
-    normal: string;
-    nowrap: string;
-    pre: string;
-    'pre-wrap': string;
-    'pre-line': string;
-    'break-spaces': string;
-};
-export type WhiteSpace = ValueOf<typeof WhiteSpace>;
-/**
- * See SCSS variable $lumx-color-palette
- */
-export declare const ColorPalette: {
-    readonly primary: "primary";
-    readonly secondary: "secondary";
-    readonly blue: "blue";
-    readonly dark: "dark";
-    readonly green: "green";
-    readonly yellow: "yellow";
-    readonly red: "red";
-    readonly light: "light";
-    readonly grey: "grey";
-};
-export type ColorPalette = ValueOf<typeof ColorPalette>;
-export type Color = ColorPalette | string;
-/**
- * See SCSS variable $lumx-color-variants
- */
-export declare const ColorVariant: {
-    readonly D1: "D1";
-    readonly D2: "D2";
-    readonly L1: "L1";
-    readonly L2: "L2";
-    readonly L3: "L3";
-    readonly L4: "L4";
-    readonly L5: "L5";
-    readonly L6: "L6";
-    readonly N: "N";
-};
-export type ColorVariant = ValueOf<typeof ColorVariant>;
-/** ColorPalette with all possible color variant combination */
-export type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
-/**
- * Visually hidden a11y utility class name
- */
-export declare const VISUALLY_HIDDEN = "visually-hidden";
+export * from './components';
+export * from './enums';
+export * from './className';