@lumx/core 3.20.1-alpha.11 → 3.20.1-alpha.13

package/js/constants/index.js

@@ -1,13 +1,10 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var js_constants_keycodes = require('./keycodes.js');
+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.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
@@ -16,203 +13,179 @@ 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,
+  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,
+  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',
+  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',
+  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',
+  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',
+  horizontal: 'horizontal',
+  vertical: 'vertical'
 };
 const Emphasis = {
-    low: 'low',
-    medium: 'medium',
-    high: 'high',
+  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',
+  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',
+  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',
+  ...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,
+  ...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',
+  /** 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',
+  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',
+  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',
+  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',
+  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;
+/** ColorPalette with all possible color variant combination */
+
+export { Alignment, AspectRatio, CSS_PREFIX, ColorPalette, ColorVariant, DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, Emphasis, Kind, NOTIFICATION_TRANSITION_DURATION, Orientation, SLIDESHOW_TRANSITION_DURATION, Size, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };

package/js/constants/keycodes.js

@@ -1,50 +1,46 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * The down key code.
  */
 const DOWN_KEY_CODE = 40;
+
 /**
  * The enter/return key code.
  */
 const ENTER_KEY_CODE = 13;
+
 /**
  * The space key code.
  */
 const SPACE_KEY_CODE = 32;
+
 /**
  * The escape key code.
  */
 const ESCAPE_KEY_CODE = 27;
+
 /**
  * The left key code.
  */
 const LEFT_KEY_CODE = 37;
+
 /**
  * The right key code.
  */
 const RIGHT_KEY_CODE = 39;
+
 /**
  * The tab key code.
  */
 const TAB_KEY_CODE = 9;
+
 /**
  * The up key code.
  */
 const UP_KEY_CODE = 38;
+
 /**
  * The up key code.
  */
 const BACKSPACE_KEY_CODE = 8;
 
-exports.BACKSPACE_KEY_CODE = BACKSPACE_KEY_CODE;
-exports.DOWN_KEY_CODE = DOWN_KEY_CODE;
-exports.ENTER_KEY_CODE = ENTER_KEY_CODE;
-exports.ESCAPE_KEY_CODE = ESCAPE_KEY_CODE;
-exports.LEFT_KEY_CODE = LEFT_KEY_CODE;
-exports.RIGHT_KEY_CODE = RIGHT_KEY_CODE;
-exports.SPACE_KEY_CODE = SPACE_KEY_CODE;
-exports.TAB_KEY_CODE = TAB_KEY_CODE;
-exports.UP_KEY_CODE = UP_KEY_CODE;
+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 };

package/js/custom-colors.js

@@ -1,21 +1,17 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
 /**
  * Generate CSS variables for the given color palette.
  */
 function generateCSSColorVariables(palette) {
-    let output = '';
-    for (const [color, variants] of Object.entries(palette)) {
-        if (!variants)
-            continue;
-        for (const [variantName, colorValue] of Object.entries(variants)) {
-            output += `--lumx-color-${color}-${variantName}: ${colorValue};\n`;
-        }
+  let output = '';
+  for (const [color, variants] of Object.entries(palette)) {
+    if (!variants) continue;
+    for (const [variantName, colorValue] of Object.entries(variants)) {
+      output += `--lumx-color-${color}-${variantName}: ${colorValue};\n`;
     }
-    return output;
+  }
+  return output;
 }
+
 /**
  * Add a css rule in a given sheet.
  *
@@ -25,13 +21,13 @@ function generateCSSColorVariables(palette) {
  * @param index    The css rule index.
  */
 function _addCSSRule(sheet, selector, rules, index) {
-    if ('insertRule' in sheet) {
-        sheet.insertRule(`${selector}{${rules}}`, index);
-    }
-    else if ('addRule' in sheet) {
-        sheet.addRule(selector, rules, index);
-    }
+  if ('insertRule' in sheet) {
+    sheet.insertRule(`${selector}{${rules}}`, index);
+  } else if ('addRule' in sheet) {
+    sheet.addRule(selector, rules, index);
+  }
 }
+
 /**
  * Set primary and secondary custom colors.
  *
@@ -40,9 +36,8 @@ function _addCSSRule(sheet, selector, rules, index) {
  * @param selector     The selector used to scope the custom colors (defaults to ':root').
  */
 function setCustomColors(sheet, colorPalette, selector = ':root') {
-    const rules = generateCSSColorVariables(colorPalette);
-    _addCSSRule(sheet, selector, rules, 0);
+  const rules = generateCSSColorVariables(colorPalette);
+  _addCSSRule(sheet, selector, rules, 0);
 }
 
-exports.generateCSSColorVariables = generateCSSColorVariables;
-exports.setCustomColors = setCustomColors;
+export { generateCSSColorVariables, setCustomColors };

package/js/types/Callback.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/Falsy.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/GenericProps.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/HasAriaLabelOrLabelledBy.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/HasClassName.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/HasCloseMode.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/HasTheme.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/HeadingElement.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/Point.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/Predicate.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/RectSize.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/TextElement.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/ValueOf.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/types/index.js

@@ -1,2 +1 @@
-'use strict';
 

package/js/utils/className/fontColorClass.js

@@ -1,20 +1,15 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var js_constants_index = require('../../constants/index.js');
-var js_utils_className_resolveColorWithVariants = require('./resolveColorWithVariants.js');
-require('../../constants/keycodes.js');
+import { ColorVariant } from '../../constants/index.js';
+import { resolveColorWithVariants } from './resolveColorWithVariants.js';
+import '../../constants/keycodes.js';
 
 /**
  * Returns the classname associated to the given color and variant.
  * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-L2`
  */
 function fontColorClass(propColor, propColorVariant) {
-    if (!propColor)
-        return undefined;
-    const [color, colorVariant = js_constants_index.ColorVariant.N] = js_utils_className_resolveColorWithVariants.resolveColorWithVariants(propColor, propColorVariant);
-    return `lumx-color-font-${color}-${colorVariant}`;
+  if (!propColor) return undefined;
+  const [color, colorVariant = ColorVariant.N] = resolveColorWithVariants(propColor, propColorVariant);
+  return `lumx-color-font-${color}-${colorVariant}`;
 }
 
-exports.fontColorClass = fontColorClass;
+export { fontColorClass };

package/js/utils/className/fontColorClass.test.js

@@ -1,18 +1,16 @@
-'use strict';
+import { fontColorClass } from './fontColorClass.js';
+import '../../constants/index.js';
+import '../../constants/keycodes.js';
+import './resolveColorWithVariants.js';
 
-var js_utils_className_fontColorClass = require('./fontColorClass.js');
-require('../../constants/index.js');
-require('../../constants/keycodes.js');
-require('./resolveColorWithVariants.js');
-
-describe(js_utils_className_fontColorClass.fontColorClass, () => {
-    it('should get lumx class for font color', () => {
-        expect(js_utils_className_fontColorClass.fontColorClass('dark')).toBe('lumx-color-font-dark-N');
-    });
-    it('should get lumx class for font color with variant', () => {
-        expect(js_utils_className_fontColorClass.fontColorClass('red', 'L2')).toBe('lumx-color-font-red-L2');
-    });
-    it('should get lumx class for font color with variant with override', () => {
-        expect(js_utils_className_fontColorClass.fontColorClass('red-N', 'L2')).toBe('lumx-color-font-red-L2');
-    });
+describe(fontColorClass, () => {
+  it('should get lumx class for font color', () => {
+    expect(fontColorClass('dark')).toBe('lumx-color-font-dark-N');
+  });
+  it('should get lumx class for font color with variant', () => {
+    expect(fontColorClass('red', 'L2')).toBe('lumx-color-font-red-L2');
+  });
+  it('should get lumx class for font color with variant with override', () => {
+    expect(fontColorClass('red-N', 'L2')).toBe('lumx-color-font-red-L2');
+  });
 });

package/js/utils/className/getBasicClass.js

@@ -1,14 +1,5 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var isBoolean = require('lodash/isBoolean');
-var kebabCase = require('lodash/kebabCase');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var isBoolean__default = /*#__PURE__*/_interopDefaultLegacy(isBoolean);
-var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
+import isBoolean from 'lodash/isBoolean';
+import kebabCase from 'lodash/kebabCase';
 
 /**
  * Get the basic CSS class for the given type.
@@ -18,19 +9,23 @@ var kebabCase__default = /*#__PURE__*/_interopDefaultLegacy(kebabCase);
  * @param  value  The value of the type of the CSS class (e.g.: 'primary', 'button', ...).
  * @return The basic CSS class.
  */
-function getBasicClass({ prefix, type, value, }) {
-    if (isBoolean__default["default"](value)) {
-        if (!value) {
-            // False value should not return a class.
-            return '';
-        }
-        const booleanPrefixes = ['has', 'is'];
-        if (booleanPrefixes.some((booleanPrefix) => type.toString().startsWith(booleanPrefix))) {
-            return `${prefix}--${kebabCase__default["default"](type)}`;
-        }
-        return `${prefix}--is-${kebabCase__default["default"](type)}`;
+function getBasicClass({
+  prefix,
+  type,
+  value
+}) {
+  if (isBoolean(value)) {
+    if (!value) {
+      // False value should not return a class.
+      return '';
+    }
+    const booleanPrefixes = ['has', 'is'];
+    if (booleanPrefixes.some(booleanPrefix => type.toString().startsWith(booleanPrefix))) {
+      return `${prefix}--${kebabCase(type)}`;
     }
-    return `${prefix}--${kebabCase__default["default"](type)}-${value}`;
+    return `${prefix}--is-${kebabCase(type)}`;
+  }
+  return `${prefix}--${kebabCase(type)}-${value}`;
 }
 
-exports.getBasicClass = getBasicClass;
+export { getBasicClass };