@lumx/core 3.21.1-alpha.0 → 3.21.2-alpha.0

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

@@ -0,0 +1,4 @@
+export * from './keycodes';
+export * from './components';
+export * from './enums';
+export * from './className';

package/js/constants/index.js

@@ -1,218 +1,4 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var js_constants_keycodes = require('./keycodes.js');
-
-/**
- * The prefix to use for the CSS classes.
- */
-const CSS_PREFIX = 'lumx';
-/**
- * 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,
-};
-/**
- * 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',
-};
-
-exports.BACKSPACE_KEY_CODE = js_constants_keycodes.BACKSPACE_KEY_CODE;
-exports.DOWN_KEY_CODE = js_constants_keycodes.DOWN_KEY_CODE;
-exports.ENTER_KEY_CODE = js_constants_keycodes.ENTER_KEY_CODE;
-exports.ESCAPE_KEY_CODE = js_constants_keycodes.ESCAPE_KEY_CODE;
-exports.LEFT_KEY_CODE = js_constants_keycodes.LEFT_KEY_CODE;
-exports.RIGHT_KEY_CODE = js_constants_keycodes.RIGHT_KEY_CODE;
-exports.SPACE_KEY_CODE = js_constants_keycodes.SPACE_KEY_CODE;
-exports.TAB_KEY_CODE = js_constants_keycodes.TAB_KEY_CODE;
-exports.UP_KEY_CODE = js_constants_keycodes.UP_KEY_CODE;
-exports.Alignment = Alignment;
-exports.AspectRatio = AspectRatio;
-exports.CSS_PREFIX = CSS_PREFIX;
-exports.ColorPalette = ColorPalette;
-exports.ColorVariant = ColorVariant;
-exports.DIALOG_TRANSITION_DURATION = DIALOG_TRANSITION_DURATION;
-exports.EXPANSION_PANEL_TRANSITION_DURATION = EXPANSION_PANEL_TRANSITION_DURATION;
-exports.Emphasis = Emphasis;
-exports.Kind = Kind;
-exports.NOTIFICATION_TRANSITION_DURATION = NOTIFICATION_TRANSITION_DURATION;
-exports.Orientation = Orientation;
-exports.SLIDESHOW_TRANSITION_DURATION = SLIDESHOW_TRANSITION_DURATION;
-exports.Size = Size;
-exports.TOOLTIP_HOVER_DELAY = TOOLTIP_HOVER_DELAY;
-exports.TOOLTIP_LONG_PRESS_DELAY = TOOLTIP_LONG_PRESS_DELAY;
-exports.Theme = Theme;
-exports.Typography = Typography;
-exports.TypographyCustom = TypographyCustom;
-exports.TypographyInterface = TypographyInterface;
-exports.TypographyTitleCustom = TypographyTitleCustom;
-exports.WhiteSpace = WhiteSpace;
+export { BACKSPACE_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESCAPE_KEY_CODE, LEFT_KEY_CODE, RIGHT_KEY_CODE, SPACE_KEY_CODE, TAB_KEY_CODE, UP_KEY_CODE } from './keycodes/index.js';
+export { DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, NOTIFICATION_TRANSITION_DURATION, SLIDESHOW_TRANSITION_DURATION, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from './components/index.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace } from './enums/index.js';
+export { VISUALLY_HIDDEN } from './className/index.js';

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

@@ -0,0 +1,36 @@
+/**
+ * The down key code.
+ */
+export declare const DOWN_KEY_CODE = 40;
+/**
+ * The enter/return key code.
+ */
+export declare const ENTER_KEY_CODE = 13;
+/**
+ * The space key code.
+ */
+export declare const SPACE_KEY_CODE = 32;
+/**
+ * The escape key code.
+ */
+export declare const ESCAPE_KEY_CODE = 27;
+/**
+ * The left key code.
+ */
+export declare const LEFT_KEY_CODE = 37;
+/**
+ * The right key code.
+ */
+export declare const RIGHT_KEY_CODE = 39;
+/**
+ * The tab key code.
+ */
+export declare const TAB_KEY_CODE = 9;
+/**
+ * The up key code.
+ */
+export declare const UP_KEY_CODE = 38;
+/**
+ * The up key code.
+ */
+export declare const BACKSPACE_KEY_CODE = 8;