@rededor/cura 0.2.1 → 0.3.1

package/dist/cjs/{index-9092c64d.js → index-8686299e.js}

@@ -174,6 +174,10 @@ const parsePropertyValue = (propValue, propType) => {
             // but we'll cheat here and say that the string "false" is the boolean false
             return propValue === 'false' ? false : propValue === '' || !!propValue;
         }
+        if (propType & 2 /* MEMBER_FLAGS.Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
         if (propType & 1 /* MEMBER_FLAGS.String */) {
             // could have been passed as a number or boolean
             // but we still want it as a string
@@ -288,6 +292,31 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
             classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
             classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
         }
+        else if (memberName === 'style') {
+            // update style attribute, css properties and values
+            {
+                for (const prop in oldValue) {
+                    if (!newValue || newValue[prop] == null) {
+                        if (prop.includes('-')) {
+                            elm.style.removeProperty(prop);
+                        }
+                        else {
+                            elm.style[prop] = '';
+                        }
+                    }
+                }
+            }
+            for (const prop in newValue) {
+                if (!oldValue || newValue[prop] !== oldValue[prop]) {
+                    if (prop.includes('-')) {
+                        elm.style.setProperty(prop, newValue[prop]);
+                    }
+                    else {
+                        elm.style[prop] = newValue[prop];
+                    }
+                }
+            }
+        }
         else if ((!isProp ) &&
             memberName[0] === 'o' &&
             memberName[1] === 'n') {

package/dist/cjs/loader.cjs.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-9092c64d.js');
-const appGlobals = require('./app-globals-af978331.js');
+const index = require('./index-8686299e.js');
+const appGlobals = require('./app-globals-5f5b9fbf.js');
 
 /*
  Stencil Client Patch Esm v2.18.1 | MIT Licensed | https://stenciljs.com
@@ -16,7 +16,7 @@ const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
   appGlobals.globalScripts();
-  return index.bootstrapLazy([["dummy-component.cjs",[[1,"dummy-component"]]],["cura-icon_2.cjs",[[1,"cura-icons-view",{"selected":[32]}],[1,"cura-icon",{"name":[513],"color":[513],"size":[8],"iconset":[513],"disabled":[516]}]]]], options);
+  return index.bootstrapLazy([["cura-display_5.cjs",[[1,"cura-icons-view",{"selected":[32]}],[1,"cura-display",{"level":[514],"size":[513]}],[1,"cura-heading",{"level":[514],"size":[513],"weight":[513]}],[1,"cura-paragraph",{"size":[513]}],[1,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]]], options);
   });
 };
 

package/dist/collection/api/cura-api.js

@@ -5,7 +5,16 @@ export default class CuraAPI {
     const themeModule = new CuraThemeModule();
     this.theme = {
       load: function (themeTag) { themeModule.load(themeTag); },
-      setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); }
+      setCustom: function (customThemeDefinitions) { themeModule.setCustom(customThemeDefinitions); },
+      colors: {
+        getColor: function (colorWithDepth) { return themeModule.colors.getColor(colorWithDepth); },
+      },
+      fonts: {
+        getFamily: function (type) { return themeModule.fonts.getFamily(type); },
+        getWeights: function () { return themeModule.fonts.getWeights(); },
+        getSize: function () { return themeModule.fonts.getSize(); },
+        getColor: function () { return themeModule.fonts.getColor(); }
+      }
     };
     if (config && config.customTheme) {
       this.theme.setCustom(config.customTheme);

package/dist/collection/api/modules/cura-theme-colors-module.js

@@ -0,0 +1,69 @@
+import { Static } from "../theme-presets/static";
+export default class CuraThemeColorsModule {
+  constructor() {
+    this.NeutralDepthAlias = {
+      'purewhite': '0',
+      'white': '100',
+      'pale': '200',
+      'lighter': '300',
+      'light': '400',
+      'base': '500',
+      'medium': '600',
+      'dark': '700',
+      'darker': '800',
+      'black': '900',
+    };
+    this.ColorDepthAlias = {
+      'lighter': '100',
+      'light': '300',
+      'base': '500',
+      'dark': '700',
+      'darker': '900'
+    };
+  }
+  /**
+   * Get theme color.
+   * @param colorWithDepth string Ex.: primary-light
+   * @returns css color property. Color definition or related css var from the theme.
+   */
+  getColor(colorWithDepth = "primary-base") {
+    const { color, depth } = this.splitColorDepth(colorWithDepth);
+    const staticColor = this.getStatic(color, depth);
+    if (staticColor)
+      return staticColor;
+    return this.getDynamic(color, depth);
+  }
+  /**
+   * Internal: Look for static color by name and depth.
+   * @param color Color name.
+   * @param depth Depth number or alias.
+   * @returns Static color definition.
+   */
+  getStatic(color, depth) {
+    var _a, _b;
+    return ((_a = Static.color[color]) === null || _a === void 0 ? void 0 : _a[depth]) || ((_b = Static.color[color]) === null || _b === void 0 ? void 0 : _b[this.NeutralDepthAlias[depth]]) || null;
+  }
+  /**
+   * Internal: Look for theme dynamic colors.
+   * @param color Color name.
+   * @param depth Depth number or alias.
+   * @returns Related CSS variable defined by the theme.
+   */
+  getDynamic(color, depth) {
+    const themeVar = this.ColorDepthAlias[depth]
+      ? `--cura-color-${color}-${this.ColorDepthAlias[depth]}`
+      : `--cura-color-${color}-${depth}`;
+    return getComputedStyle(document.body).getPropertyValue(themeVar)
+      ? `var(${themeVar})`
+      : `var(--cura-color-primary-500)`;
+  }
+  /**
+   * Internal: Split color strings
+   * @param colorWithDepth Color string [color]-[depth]. Ex.: primary-dark or primary-700.
+   * @returns Object { color: string, depth: string }.
+   */
+  splitColorDepth(colorWithDepth) {
+    const [color, depth] = colorWithDepth.toLowerCase().split(/-(.*)/);
+    return { color: color !== null && color !== void 0 ? color : "primary", depth: depth !== null && depth !== void 0 ? depth : "base" };
+  }
+}

package/dist/collection/api/modules/cura-theme-fonts-module.js

@@ -0,0 +1,35 @@
+import { ThemeDefault } from "../theme-presets/theme-default";
+export default class CuraThemeFontsModule {
+  constructor() {
+    /**
+     * Get the CSS variable related to the font size base defined by the theme.
+     * @returns Related CSS variable as a string.
+     */
+    this.getSize = () => `var(--cura-font-size)`;
+    /**
+     * Get CSS variable related to the font color defined by the theme.
+     * @returns Related CSS variable as a string.
+     */
+    this.getColor = () => `var(--cura-font-color)`;
+  }
+  /**
+   * Get the CSS variable related to the font family defined by the theme.
+   * @param type 'body' | 'heading' | 'display'
+   * @returns Related css variable as a string.
+   */
+  getFamily(type = "body") {
+    const curaFontFamilyCSSVar = `--cura-font-${type.toLowerCase()}`;
+    return getComputedStyle(document.body).getPropertyValue(curaFontFamilyCSSVar)
+      ? `var(${curaFontFamilyCSSVar})`
+      : 'var(--cura-font-body)';
+  }
+  /**
+   * Get the CSS variables related to font weights defined by the theme.
+   * @returns Object with CSS vars weights definitions for thin, light, regular, medium, bold and black fonts.
+   */
+  getWeights() {
+    const weights = {};
+    Object.keys(ThemeDefault.font.weights).forEach((key) => weights[key] = `var(--cura-font-weights-${key})`);
+    return weights;
+  }
+}

package/dist/collection/api/modules/cura-theme-module.js

@@ -1,7 +1,11 @@
 import { ThemePresets } from "../theme-presets/theme-presets";
+import CuraThemeColorsModule from "./cura-theme-colors-module";
+import CuraThemeFontsModule from "./cura-theme-fonts-module";
 export default class CuraThemeModule {
   constructor() {
     this.prefix = '--cura';
+    this.colors = new CuraThemeColorsModule();
+    this.fonts = new CuraThemeFontsModule();
     /* Private */
     /** Set css var based on object structure */
     this.setCssVar = (prop, path) => {

package/dist/collection/api/theme-presets/static.js

@@ -0,0 +1,103 @@
+/**
+ * Static
+ */
+export const Static = {
+  /* Colors */
+  color: {
+    success: {
+      lighter: '#DFF6E9',
+      light: '#94E1B5',
+      base: '#5FD290',
+      dark: '#3F8C60',
+      darker: '#132A1D',
+      depth100: '#DFF6E9',
+      depth300: '#94E1B5',
+      depth500: '#5FD290',
+      depth700: '#3F8C60',
+      depth900: '#132A1D',
+    },
+    info: {
+      lighter: '#CFE2FF',
+      light: '#95BFFF',
+      base: '#6EA8FF',
+      dark: '#517BBB',
+      darker: '#253855',
+      depth100: '#CFE2FF',
+      depth300: '#95BFFF',
+      depth500: '#6EA8FF',
+      depth700: '#517BBB',
+      depth900: '#253855',
+    },
+    error: {
+      lighter: '#FBDDDD',
+      light: '#F28F8F',
+      base: '#EB5757',
+      dark: '#9D3A3A',
+      darker: '#2F1111',
+      depth100: '#FBDDDD',
+      depth300: '#F28F8F',
+      depth500: '#EB5757',
+      depth700: '#9D3A3A',
+      depth900: '#2F1111',
+    },
+    warning: {
+      lighter: '#FCFAC4',
+      light: '#F8F489',
+      base: '#F5EF4E',
+      dark: '#A39F34',
+      darker: '#313010',
+      depth100: '#FCFAC4',
+      depth300: '#F8F489',
+      depth500: '#F5EF4E',
+      depth700: '#A39F34',
+      depth900: '#313010',
+    },
+    /* neutral: {
+      'pure-white': '#FFFFFF',
+      white: '#F6F6F6',
+      pale: '#E9E9E9',
+      lighter: '#E2E2E2',
+      light: '#D4D4D4',
+      base: '#B7B7B7',
+      medium: '#929292',
+      dark: '#6E6E6E',
+      darker: '#4A4A4A',
+      black: '#262626',
+      depth0: '#FFFFFF',
+      depth100: '#F6F6F6',
+      depth200: '#E9E9E9',
+      depth300: '#E2E2E2',
+      depth400: '#D4D4D4',
+      depth500: '#B7B7B7',
+      depth600: '#929292',
+      depth700: '#6E6E6E',
+      depth800: '#4A4A4A',
+      depth900: '#262626',
+    }, */
+    neutral: {
+      '0': '#FFFFFF',
+      '100': '#F6F6F6',
+      '200': '#E9E9E9',
+      '300': '#E2E2E2',
+      '400': '#D4D4D4',
+      '500': '#B7B7B7',
+      '600': '#929292',
+      '700': '#6E6E6E',
+      '800': '#4A4A4A',
+      '900': '#262626',
+    },
+  },
+  /* Icons */
+  icons: {
+    'sizes': ['128', '72', '64', '48', '40', '32', '24', '20', '16'],
+    'strokes': ['5.25', '3.5', '3.25', '2.75', '2.5', '2.25', '2', '1.75', '1.5'],
+    'default-size': '24',
+  },
+  /* Breakpoints */
+  breakpoints: {
+    small: '576px',
+    medium: '768px',
+    large: '992px',
+    xlarge: '1200px',
+  },
+};

package/dist/collection/api/theme-presets/theme-default.js

@@ -5,39 +5,45 @@ export const ThemeDefault = {
   /* Colors */
   color: {
     primary: {
-      depth100: '#CCD9E7',
-      depth300: '#5580AE',
-      base: '#004186',
-      depth700: '#002B59',
-      depth900: '#00133B'
+      '100': '#71C5E8',
+      '300': '#449CD5',
+      '500': '#005EB8',
+      '700': '#004890',
+      '900': '#002855'
     },
     secondary: {
-      depth100: '#EEE8CE',
-      depth300: '#C6B45C',
-      base: '#AA8E0B',
-      depth700: '#715F07',
-      depth900: '#221C02'
+      '100': '#F5ECE3',
+      '300': '#DDC0A2',
+      '500': '#CCA074',
+      '700': '#886B4D',
+      '900': '#292017'
     },
     accent: {
-      depth100: '#F9E8D5',
-      depth300: '#E4A04F',
-      base: '#DF8D2C',
-      depth700: '#955E1D',
-      depth900: '#2D1C09'
+      '100': '#F9E8D5',
+      '300': '#E4A04F',
+      '500': '#DF8D2C',
+      '700': '#955E1D',
+      '900': '#2D1C09'
     }
   },
   /* Spacing */
   spacing: {
-    base: '8px',
+    base: 4,
   },
   /* Fonts */
   font: {
-    family: {
-      title: 'serif',
-      body: '"Roboto", Helvetica, Arial, sans-serif'
+    size: '14px',
+    color: '#4A4A4A',
+    body: "'Roboto', Arial, Helvetica, sans-serif",
+    heading: "'Roboto', Arial, Helvetica, sans-serif",
+    display: "'Roboto', Arial, Helvetica, sans-serif",
+    weights: {
+      thin: 100,
+      light: 300,
+      regular: 400,
+      medium: 500,
+      bold: 700,
+      black: 900
     },
-    size: {
-      base: '16px',
-    }
   }
 };

package/dist/collection/api/theme-presets/theme-maternity.js

@@ -7,20 +7,18 @@ export const ThemeMaternity = Object.assign(Object.assign({}, ThemeDefault), {
   /* Colors */
   color: {
     primary: {
-      base: '#CD4D9A',
-      depth100: '#FCEFF6',
-      depth300: '#FFBFE5',
-      depth500: '#FF7FCB',
-      depth700: '#99126C',
-      depth900: '#00133B'
+      '100': '#FCEFF6',
+      '300': '#FFBFE5',
+      '500': '#CD4D9A',
+      '700': '#99126C',
+      '900': '#00133B'
     },
     secondary: {
-      base: '#189AB4',
-      depth100: '#EDF3FF',
-      depth300: '#BDD2FF',
-      depth500: '#496BB6',
-      depth700: '#001C58',
-      depth900: '#430E31'
+      '100': '#EDF3FF',
+      '300': '#BDD2FF',
+      '500': '#189AB4',
+      '700': '#001C58',
+      '900': '#430E31'
     }
   }
 });

package/dist/collection/assets/icons/iconset-default-list.js

@@ -1 +1 @@
-export default ["360", "accessibility", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "delete", "desktop", "deslike", "download", "duplicate", "edit", "exam", "expand", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "hate", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "info2", "infoCircle", "key", "language", "language2", "languageEN", "languagePT", "like", "link", "linkExternal", "list", "login", "logout", "love", "mail", "mail2", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "neutral", "news", "notification", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "pulldownG", "pulldownP", "pullupG", "pullupP", "questionCircle", "questionSquare", "range", "reload", "schedule", "search", "secure", "share", "share2", "sound", "soundOff", "subItem", "target", "team", "unLink", "unSecure", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "wifi", "zoomIn", "zoomOut"];
+export default ["360", "accessibility", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "delete", "desktop", "deslike", "download", "duplicate", "edit", "exam", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "google", "hate", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "info2", "infoCircle", "instagram", "key", "language", "language2", "languageEN", "languagePT", "lattes", "like", "likeHand", "link", "linkExternal", "linkedin", "list", "login", "logout", "love", "mail", "mail2", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "neutral", "news", "notification", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "pulldownG", "pulldownP", "pullupG", "pullupP", "questionCircle", "questionSquare", "range", "reload", "schedule", "search", "secure", "share", "share2", "sound", "soundOff", "subItem", "target", "team", "twitter", "unLink", "unSecure", "unlikeHand", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "youtube", "zoomIn", "zoomOut"];