@front10/helpers 2.0.16 → 2.0.18

package/dist/BuildClass/BuildClass.js

@@ -809,6 +809,20 @@ var buildClass = function buildClass(props) {
           } else content = "".concat(styles[p] ? "{".concat(prop, ":").concat(styles[p], "}") : "");
         }
 
+        if (prop === "@theme" && styles[p] && Array.isArray(styles[p])) {
+          styles[p].forEach(function (item) {
+            var result = content;
+            var newItem = item;
+            if (!newItem.startsWith("@theme:")) newItem = "@theme:".concat(newItem);
+            newItem = (0, _ThemeProvider.getValueFromPath)(newItem, tokenTheme) || {};
+            Object.keys(newItem).map(function (k) {
+              result += "".concat(k, ":").concat(newItem[k], ";");
+            });
+            content = result;
+          });
+          content = "{".concat(content, "}");
+        }
+
         if (styles[p] && _typeof(styles[p]) === "object" && styles[p].constructor === Object) {
           content = "{".concat(Object.entries(styles[p]).reduce(function (content, _ref) {
             var _ref2 = _slicedToArray(_ref, 2),

package/dist/ThemeBuilder/ThemeBuilder.js

@@ -14,6 +14,10 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterat
 var generateTypographyStyles = function generateTypographyStyles(typography) {
   var style = "";
 
+  if (typography.css && typeof typography.css === "string") {
+    style += typography.css;
+  }
+
   if (typography.fonts && _typeof(typography.fonts) === "object") {
     Object.keys(typography.fonts).map(function (fontName) {
       if (_typeof(typography.fonts[fontName]) === "object") {

package/dist/front10-helpers.js

@@ -0,0 +1,2 @@
+var o=function(o){var n=o.toString(16);return 1===n.length?"0"+n:n},n=function(o,n){var t;return void 0===n&&(n=.5),!!/^#([A-Fa-f0-9]{3}){1,2}$/.test(o)&&(3===(t=o.substring(1).split("")).length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]),"rgba("+((t="0x"+t.join(""))>>16&255)+","+(t>>8&255)+","+(255&t)+","+n+")")},t=function(o){var n;return!!/^#([A-Fa-f0-9]{3}){1,2}$/.test(o)&&(3===(n=o.substring(1).split("")).length&&(n=[n[0],n[0],n[1],n[1],n[2],n[2]]),{r:(n="0x"+n.join(""))>>16&255,g:n>>8&255,b:255&n})},r=function(o){var n=t(o);return!!n&&((299*n.r+587*n.g+114*n.b)/1e3>=128?"#000000":"#FFFFFF")},e=function(o,n,t){return o/n*t},a=function(n,r){var a,l,c=t(n),i={};return!!c&&(r<0?(i.r=c.r-parseInt(c.r/100*-r,10),i.g=c.g-parseInt(c.g/100*-r,10),i.b=c.b-parseInt(c.b/100*-r,10)):(i.r=parseInt(e(255-c.r,100,r),10)+c.r,i.g=parseInt(e(255-c.g,100,r),10)+c.g,i.b=parseInt(e(255-c.b,100,r),10)+c.b),a=i.g,l=i.b,"#"+o(i.r)+o(a)+o(l))},l=function(o,n,e){void 0===e&&(e=22);var l=100/Math.ceil(e/2),c=l*Math.floor(e/2),i=[];if(t(o))for(var f=0;f<e;f+=1){var s=a(o,c-f*l),d=r(s);i.push({name:f>e/2?n+"-"+f:f===e/2?n:n+"-"+(f+1),color:s,textColor:d})}return i},c=function(){return"undefined"!=typeof window},i=function(o,t,r){var e=t.color,a=t.color,l=t.color,c=t.color,i=t.color,f=t.textColor,s=t.textColor,d=t.color,b=t.textColor;return o[r+2]?a=o[r+2].color:o[r-2]&&(a=o[r-2].color),o[r+1]?l=o[r+1].color:o[r-1]&&(l=o[r-1].color),o[r+2]?c=o[r+2].color:o[r-2]&&(c=o[r-2].color),o[r+4]?i=o[r+4].color:o[r-4]&&(i=o[r-4].color),o[r+4]?f=o[r+4].textColor:o[r-4]&&(f=o[r-4].textColor),o[r+2]?e=o[r+2].color:o[r-2]&&(e=o[r-2].color),o[r+2]?s=o[r+2].textColor:o[r-2]&&(s=o[r-2].textColor),o[r+3]?d=o[r+3].color:o[r-3]&&(d=o[r-3].color),o[r+3]?b=o[r+3].textColor:o[r-3]&&(b=o[r-3].textColor),"\n  button.fr-btn-"+t.name+"{\n    background-color:"+t.color+";\n    border-color:"+t.color+";\n    color:"+t.textColor+" !important;\n  }\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):focus,\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):hover{\n    background-color:"+e+";\n    border-color:"+e+";\n    color:"+s+"\n  }\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-show > .fr-btn-outline-"+t.name+".fr-dropdown-toggle{\n    color: "+b+";\n    background-color: "+d+";\n    border-color: "+d+";\n  }\n  .fr-border-"+t.name+"{border-color: "+t.color+" !important;}\n  .fr-bg-"+t.name+"{background-color: "+t.color+" !important;}\n  .gradient.fr-bg-"+t.name+",fr-btn-outline-"+t.name+":hover,\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled){\n    background-image: linear-gradient(to bottom,"+t.color+","+a+");\n  }\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):hover,\n  button.gradient.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):hover{\n    background-image: linear-gradient(to bottom,"+t.color+","+l+");\n    color: "+t.textColor+";\n  }\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.gradient.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):active{\n    background-image: linear-gradient(to bottom,"+c+","+i+");\n    color: "+f+";\n  }\n  .fr-text-"+t.name+"{color: "+t.color+" !important;}\n  .fr-btn-outline-"+t.name+"{\n    color: "+t.color+";\n    border-color: "+t.color+";\n  }\n  .fr-btn-outline-"+t.name+":hover{\n    color: "+t.textColor+";\n    background-color: "+t.color+";\n    border-color: "+t.color+";\n  }\n  .fr-btn-outline-"+t.name+".fr-disabled,\n  .fr-btn-outline-"+t.name+":disabled{\n    color: "+t.color+" !important;\n    background-color: transparent !important;\n    border-color: "+t.color+" !important;\n  }\n  .fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled).fr-active:focus,\n  .fr-show > .fr-btn-outline-"+t.name+".fr-dropdown-toggle:focus{\n    box-shadow: 0 0 0 0.2rem "+n(t.color)+";\n  }\n  .fr-btn-"+t.name+":focus, .fr-btn-outline-"+t.name+":focus{\n    box-shadow: 0 0 0 0.2rem "+n(t.color)+";\n  }\n  .fr-component-hover-"+t.name+":hover:not(.fr-row):not([class^=fr-col]):not(button)>*{\n    color:"+t.textColor+" !important;\n  }\n  .fr-component-hover-"+t.name+":hover:not(button){\n    background-color:"+t.color+" !important;\n    border-color:"+e+" !important;\n  }\n  .fr-icon.fr-i-"+t.name+" path{\n    fill: "+t.color+";\n  }\n  .fr-btn-"+t.name+" .fr-icon path{\n    fill: "+t.textColor+";\n  }\n"};"undefined"!=typeof window&&(window.FR||(window.FR={}),window.FR.initTheme=function(o){var t=[],e={palette:{},designTokens:o.designTokens||{}},a=[];if(o.config&&o.config.outputFields&&(a=o.config.outputFields),a.includes("colors")&&(e.colors=o.colors),a.includes("typography")&&(e.typography=o.typography),o){if(o.typography&&t.push(function(o){var n="";return o.css&&"string"==typeof o.css&&(n+=o.css),o.fonts&&"object"==typeof o.fonts&&Object.keys(o.fonts).map(function(t){return"object"==typeof o.fonts[t]&&(o.fonts[t].preset?n+="@import url('"+o.fonts[t].preset+"');":Array.isArray(o.fonts[t].src)&&(n+="@font-face {\n            font-family: '"+(o.fonts[t].alias?o.fonts[t].alias:t)+"';\n            "+(o.fonts[t].fontStyle?"font-style:"+o.fonts[t].fontStyle+";":"")+"\n            "+(o.fonts[t].fontWeight?"font-weight:"+o.fonts[t].fontWeight+";":"")+"\n            "+(o.fonts[t].fontDisplay?"font-display:"+o.fonts[t].fontDisplay+";":"")+"\n            src:",o.fonts[t].local&&o.fonts[t].local.forEach(function(o){n+="local('"+o+"'),"}),o.fonts[t].src.forEach(function(r,e){n+="url('"+r.url+"') format('"+r.format+"')"+(e<o.fonts[t].src.length-1?",":"")}),n+="}"),n+=".fr-font-name-"+t.toLocaleLowerCase().replace(/ /g,"-")+"{font-family: '"+(o.fonts[t].alias?o.fonts[t].alias:t)+"', 'sans-serif'}"),t}),n}(o.typography)),o.colors){t.push(["button.fr-btn:disabled{\n          background-color:"+(o.components&&o.components.button&&o.components.button.disabled&&o.components.button.disabled.bgColor?o.components.button.disabled.bgColor:"#d4d4d4")+";\n          border-color:"+(o.components&&o.components.button&&o.components.button.disabled&&o.components.button.disabled.bgColor?o.components.button.disabled.bgColor:"#d4d4d4")+";\n          color:"+(o.components&&o.components.button&&o.components.button.disabled&&o.components.button.disabled.bgColor?o.components.button.disabled.bgColor:"#afafaf")+"\n        }\n    "]);for(var f=Object.keys(o.colors),s=0;s<f.length;s+=1){var d=f[s],b=o.colors[f[s]];if("none"!==b){e.palette[""+d]=b;var u=l(b,d);if(o.config&&o.config.generatePalette)u.forEach(function(o,n){if(e.palette[""+o.name]=o.color,c()){var r=i(u,o,n);t.push(r.replace(/\n. |\r/g,""))}});else if(c()){var m=i(u,{color:b,name:d,textColor:r(b)},11);t.push(m.replace(/\n. |\r/g,""))}}}if(o.colors.primary){var p=n(o.colors.primary,.25);t.push(".fr-focus:focus, .fr-form-control:focus, .fr-focus\\:focus{box-shadow: 0 0 0 0.2rem "+p+";outline: 0;}")}}if(c()&&"undefined"!=typeof document){var g=document.getElementById("frTheming");if(g)g.innerHTML=t.join(" ");else{var h=""+t.join(" "),v=document.body||document.getElementsByTagName("body")[0],y=document.createElement("style");y.type="text/css",y.id="frTheming",y.styleSheet?y.styleSheet.cssText=h:y.appendChild(document.createTextNode(h)),v.appendChild(y)}}}return e});
+//# sourceMappingURL=front10-helpers.js.map

package/dist/front10-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"front10-helpers.js","sources":["../src/Color/Color.js","../src/canI/canI.js","../src/ThemeBuilder/ThemeBuilder.js","../src/index.js"],"sourcesContent":["const componentToHex = c => {\n  const hex = c.toString(16);\n  return hex.length === 1 ? `0${hex}` : hex;\n};\n\nconst rgb2Hex = (r, g, b) =>\n  `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;\n\nconst hexToRGBA = (hex, alpha = 0.5) => {\n  let c;\n  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n    c = hex.substring(1).split(\"\");\n    if (c.length === 3) {\n      c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n    }\n    c = `0x${c.join(\"\")}`;\n    return `rgba(${(c >> 16) & 255},${(c >> 8) & 255},${c & 255},${alpha})`;\n  } else {\n    // console.error(\"Bad Hex:\", hex, \"Alpha: \", alpha);\n    return false;\n  }\n};\n\nconst isColor = color => {\n  if (hex2RGB(color)) return true;\n  else return false;\n};\n\nconst hex2RGB = hex => {\n  let c;\n  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n    c = hex.substring(1).split(\"\");\n    if (c.length === 3) {\n      c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n    }\n    c = `0x${c.join(\"\")}`;\n    // eslint-disable-next-line no-bitwise\n    return { r: (c >> 16) & 255, g: (c >> 8) & 255, b: c & 255 };\n  } else {\n    return false;\n    // throw new Error(\"Bad Hex\");\n  }\n};\n\n// https://24ways.org/2010/calculating-color-contrast\n// https://www.w3.org/WAI/ER/WD-AERT/#color-contrast\nconst getContrast = hexColor => {\n  const rgb = hex2RGB(hexColor);\n  if (rgb) {\n    const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;\n    return yiq >= 128 ? \"#000000\" : \"#FFFFFF\";\n  } else return false;\n};\n\nconst variacion = (H, Z, value) => {\n  return (H / Z) * value;\n};\n\n// https://www.w3.org/TR/WCAG20/#relativeluminancedef\nconst colorBrightness = (color, value) => {\n  const rgb = hex2RGB(color);\n  const t = {};\n  if (rgb) {\n    if (value < 0) {\n      t.r = rgb.r - parseInt((rgb.r / 100) * -value, 10);\n      t.g = rgb.g - parseInt((rgb.g / 100) * -value, 10);\n      t.b = rgb.b - parseInt((rgb.b / 100) * -value, 10);\n    } else {\n      t.r = parseInt(variacion(255 - rgb.r, 100, value), 10) + rgb.r;\n      t.g = parseInt(variacion(255 - rgb.g, 100, value), 10) + rgb.g;\n      t.b = parseInt(variacion(255 - rgb.b, 100, value), 10) + rgb.b;\n    }\n    return rgb2Hex(t.r, t.g, t.b);\n  } else return false;\n};\n\n/**\n * Function to generate a colors palette.\n * This function return a array of colors\n * in the following format: [{color: 'string', textColor: 'string', name: 'string' }]\n * @param {string} hexColor Color in hexadecimal format\n * @param {string} name Name of color\n * @param {integer} cantShape Cant of variations\n */\nconst generatePalette = (hexColor, name, cantShape = 22) => {\n  const step = 100 / Math.ceil(cantShape / 2);\n  const startVal = step * Math.floor(cantShape / 2);\n  const colors = [];\n  if (isColor(hexColor)) {\n    for (let i = 0; i < cantShape; i += 1) {\n      const color = colorBrightness(hexColor, startVal - i * step);\n      const textColor = getContrast(color);\n      let tmpName;\n      if (i > cantShape / 2) tmpName = `${name}-${i}`;\n      else if (i === cantShape / 2) tmpName = name;\n      else tmpName = `${name}-${i + 1}`;\n      colors.push({\n        name: tmpName,\n        color,\n        textColor\n      });\n    }\n  }\n  return colors;\n};\n\nexport { generatePalette, getContrast, hex2RGB, hexToRGBA, rgb2Hex, isColor };\n","const subscribersMap = {};\nconst addedGlobalEventListeners = false;\n\n/**\n * Returns an element\n * @param {*} elementSelector\n */\nconst getElement = elementSelector => {\n  return document.querySelector(elementSelector);\n};\n\n/**\n * Iterate through the listeners list and try to resolve\n * the promise if they are visible in the viewport\n * TODO: Fix the viewport detection part\n */\nconst resolveListeners = () => {\n  const subscribersKeyList = Object.keys(subscribersMap);\n  if (subscribersKeyList.length > 0) {\n    for (let index = 0; index < subscribersKeyList.length; index++) {\n      const key = subscribersKeyList[index];\n      if (subscribersMap[key]) {\n        //Only full load component when is visible in viewport\n        if (isElementInViewport(getElement(key))) {\n          subscribersMap[key].resolve(true);\n          subscribersMap[key] = null;\n          delete subscribersMap[key];\n        }\n      }\n    }\n  }\n};\n\n/**\n * Helper function to simulate a setInterval but\n * wthout hurting the browser performance\n * @param {*} fn\n * @param {*} delay\n */\nconst requestInterval = (fn, delay) => {\n  const requestAnimFrame = (() => {\n    return (\n      window.requestAnimationFrame ||\n      function hello(callback) {\n        window.setTimeout(callback, 1000 / 60);\n      }\n    );\n  })();\n  let start = new Date().getTime();\n  const handle = {};\n  function loop() {\n    handle.value = requestAnimFrame(loop);\n    const current = new Date().getTime();\n    const delta = current - start;\n    if (delta >= delay) {\n      fn.call();\n      start = new Date().getTime();\n    }\n  }\n  handle.value = requestAnimFrame(loop);\n  return handle;\n};\n\n/**\n * Try to resolve all listeners once an\n * user wants to play with the components\n * this heuristics are very basic, we should\n * find better ones.\n */\nconst addGlobalEventListeners = () => {\n  window.addEventListener(\"scroll\", () => {\n    resolveListeners();\n  });\n\n  window.addEventListener(\"click\", () => {\n    resolveListeners();\n  });\n\n  window.addEventListener(\"mousemove\", () => {\n    resolveListeners();\n  });\n\n  window.addEventListener(\"keydown\", () => {\n    resolveListeners();\n  });\n\n  requestInterval(() => {\n    resolveListeners();\n  }, 2000);\n};\n\n/**\n * Returns the DocElement\n */\nconst getDocElement = () => {\n  if (window !== undefined) {\n    return window.document.documentElement;\n  }\n  return false;\n};\n\n/**\n * Obtaining the viewport height\n * @method _getViewportH\n * @return ConditionalExpression\n */\nconst getViewportH = () => {\n  const client = getDocElement.clientHeight;\n  const inner = window.innerHeight;\n  return client < inner ? inner : client;\n};\n\n/**\n * The offset of the element\n * @method _getOffset\n * @param {} el\n * @return ObjectExpression\n */\nconst getOffset = el => {\n  let offsetTop = 0;\n  let offsetLeft = 0;\n  /* eslint-disable */\n  do {\n    if (!isNaN(el.offsetTop)) {\n      offsetTop += el.offsetTop;\n    }\n    if (!isNaN(el.offsetLeft)) {\n      offsetLeft += el.offsetLeft;\n    }\n  } while ((el = el.offsetParent));\n  /* eslint-enable */\n  return {\n    top: offsetTop,\n    left: offsetLeft\n  };\n};\n\n/**\n * Return true if the element if visible in a viewport zone\n * @param {} el\n * @param {} h\n * @return LogicalExpression\n */\nconst isElementInViewport = el => {\n  if (canIExecuteClientCode() && el) {\n    let element = el;\n    let top = element.offsetTop;\n    let left = element.offsetLeft;\n    const width = element.offsetWidth;\n    const height = element.offsetHeight;\n\n    while (element.offsetParent) {\n      element = element.offsetParent;\n      top += element.offsetTop;\n      left += element.offsetLeft;\n    }\n\n    return (\n      top < window.pageYOffset + window.innerHeight &&\n      left < window.pageXOffset + window.innerWidth &&\n      top + height > window.pageYOffset &&\n      left + width > window.pageXOffset\n    );\n  }\n};\n\n/**\n * Returns a promise that resolves once the initial\n * browser processing is done. This allows to save\n * the users that uses low cpu devices and also have\n * awesome results in Google Page Speed\n * @param {*} elementSelector\n * @param {*} inSSR\n */\nconst canILiftOff = (elementSelector, inSSR = true) => {\n  return new Promise(resolve => {\n    // we don't need to wait in SSR\n    if (window === undefined && inSSR) {\n      resolve(true);\n    } else {\n      // adds global listeners that will trigger\n      // once a real person is interacting with the browser\n      if (!addedGlobalEventListeners) {\n        addGlobalEventListeners();\n      }\n      // saving all the component instances subscriptions\n      subscribersMap[elementSelector] = {\n        resolve\n      };\n    }\n  });\n};\n\nconst canIExecuteClientCode = () => {\n  return typeof window !== \"undefined\";\n};\n\nexport { canILiftOff, isElementInViewport, canIExecuteClientCode };\n","import { generatePalette, hexToRGBA, getContrast } from \"../Color\";\nimport { canIExecuteClientCode } from \"../canI\";\n\nconst generateTypographyStyles = (typography) => {\n  let style = \"\";\n  if (typography.css && typeof typography.css === \"string\") {\n    style += typography.css;\n  }\n  if (typography.fonts && typeof typography.fonts === \"object\") {\n    Object.keys(typography.fonts).map((fontName) => {\n      if (typeof typography.fonts[fontName] === \"object\") {\n        if (typography.fonts[fontName].preset)\n          style += `@import url('${typography.fonts[fontName].preset}');`;\n        else if (Array.isArray(typography.fonts[fontName].src)) {\n          style += `@font-face {\n            font-family: '${\n              typography.fonts[fontName].alias\n                ? typography.fonts[fontName].alias\n                : fontName\n            }';\n            ${\n              typography.fonts[fontName].fontStyle\n                ? `font-style:${typography.fonts[fontName].fontStyle};`\n                : \"\"\n            }\n            ${\n              typography.fonts[fontName].fontWeight\n                ? `font-weight:${typography.fonts[fontName].fontWeight};`\n                : \"\"\n            }\n            ${\n              typography.fonts[fontName].fontDisplay\n                ? `font-display:${typography.fonts[fontName].fontDisplay};`\n                : \"\"\n            }\n            src:`;\n\n          typography.fonts[fontName].local &&\n            typography.fonts[fontName].local.forEach((local) => {\n              style += `local('${local}'),`;\n            });\n          typography.fonts[fontName].src.forEach((fontSrc, index) => {\n            style += `url('${fontSrc.url}') format('${fontSrc.format}')${\n              index < typography.fonts[fontName].src.length - 1 ? \",\" : \"\"\n            }`;\n          });\n          style += \"}\";\n        }\n        style += `.fr-font-name-${fontName\n          .toLocaleLowerCase()\n          .replace(/ /g, \"-\")}{font-family: '${\n          typography.fonts[fontName].alias\n            ? typography.fonts[fontName].alias\n            : fontName\n        }', 'sans-serif'}`;\n      }\n      return fontName;\n    });\n  }\n  return style;\n};\n\nconst generateStylesPalette = (palette, item, i) => {\n  let hoverBgColor = item.color;\n  let gradientTo = item.color;\n  let gradientButtonToHover = item.color;\n  let gradientButtonFromActive = item.color;\n  let gradientButtonToActive = item.color;\n  let gradientButtonTextActive = item.textColor;\n  let hoverColor = item.textColor;\n  let activeBgColor = item.color;\n  let activeColor = item.textColor;\n\n  if (palette[i + 2]) gradientTo = palette[i + 2].color;\n  else if (palette[i - 2]) gradientTo = palette[i - 2].color;\n\n  if (palette[i + 1]) gradientButtonToHover = palette[i + 1].color;\n  else if (palette[i - 1]) gradientButtonToHover = palette[i - 1].color;\n\n  if (palette[i + 2]) gradientButtonFromActive = palette[i + 2].color;\n  else if (palette[i - 2]) gradientButtonFromActive = palette[i - 2].color;\n\n  if (palette[i + 4]) gradientButtonToActive = palette[i + 4].color;\n  else if (palette[i - 4]) gradientButtonToActive = palette[i - 4].color;\n\n  if (palette[i + 4]) gradientButtonTextActive = palette[i + 4].textColor;\n  else if (palette[i - 4]) gradientButtonTextActive = palette[i - 4].textColor;\n\n  if (palette[i + 2]) hoverBgColor = palette[i + 2].color;\n  else if (palette[i - 2]) hoverBgColor = palette[i - 2].color;\n\n  if (palette[i + 2]) hoverColor = palette[i + 2].textColor;\n  else if (palette[i - 2]) hoverColor = palette[i - 2].textColor;\n\n  if (palette[i + 3]) activeBgColor = palette[i + 3].color;\n  else if (palette[i - 3]) activeBgColor = palette[i - 3].color;\n\n  if (palette[i + 3]) activeColor = palette[i + 3].textColor;\n  else if (palette[i - 3]) activeColor = palette[i - 3].textColor;\n  const styles = `\n  button.fr-btn-${item.name}{\n    background-color:${item.color};\n    border-color:${item.color};\n    color:${item.textColor} !important;\n  }\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):focus,\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):hover{\n    background-color:${hoverBgColor};\n    border-color:${hoverBgColor};\n    color:${hoverColor}\n  }\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-show > .fr-btn-outline-${item.name}.fr-dropdown-toggle{\n    color: ${activeColor};\n    background-color: ${activeBgColor};\n    border-color: ${activeBgColor};\n  }\n  .fr-border-${item.name}{border-color: ${item.color} !important;}\n  .fr-bg-${item.name}{background-color: ${item.color} !important;}\n  .gradient.fr-bg-${item.name},fr-btn-outline-${item.name}:hover,\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled){\n    background-image: linear-gradient(to bottom,${item.color},${gradientTo});\n  }\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):hover,\n  button.gradient.fr-btn-outline-${\n    item.name\n  }:not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-outline-${\n    item.name\n  }:not(:disabled):not(.fr-disabled):hover{\n    background-image: linear-gradient(to bottom,${\n      item.color\n    },${gradientButtonToHover});\n    color: ${item.textColor};\n  }\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.gradient.fr-btn-outline-${\n    item.name\n  }:not(:disabled):not(.fr-disabled):active{\n    background-image: linear-gradient(to bottom,${gradientButtonFromActive},${gradientButtonToActive});\n    color: ${gradientButtonTextActive};\n  }\n  .fr-text-${item.name}{color: ${item.color} !important;}\n  .fr-btn-outline-${item.name}{\n    color: ${item.color};\n    border-color: ${item.color};\n  }\n  .fr-btn-outline-${item.name}:hover{\n    color: ${item.textColor};\n    background-color: ${item.color};\n    border-color: ${item.color};\n  }\n  .fr-btn-outline-${item.name}.fr-disabled,\n  .fr-btn-outline-${item.name}:disabled{\n    color: ${item.color} !important;\n    background-color: transparent !important;\n    border-color: ${item.color} !important;\n  }\n  .fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled).fr-active:focus,\n  .fr-show > .fr-btn-outline-${item.name}.fr-dropdown-toggle:focus{\n    box-shadow: 0 0 0 0.2rem ${hexToRGBA(item.color)};\n  }\n  .fr-btn-${item.name}:focus, .fr-btn-outline-${item.name}:focus{\n    box-shadow: 0 0 0 0.2rem ${hexToRGBA(item.color)};\n  }\n  .fr-component-hover-${\n    item.name\n  }:hover:not(.fr-row):not([class^=fr-col]):not(button)>*{\n    color:${item.textColor} !important;\n  }\n  .fr-component-hover-${item.name}:hover:not(button){\n    background-color:${item.color} !important;\n    border-color:${hoverBgColor} !important;\n  }\n  .fr-icon.fr-i-${item.name} path{\n    fill: ${item.color};\n  }\n  .fr-btn-${item.name} .fr-icon path{\n    fill: ${item.textColor};\n  }\n`;\n  return styles;\n};\n\nconst initTheme = (theme) => {\n  const generatedStyles = [];\n  const themeToken = {\n    palette: {},\n    designTokens: theme.designTokens || {}\n  };\n\n  let outputFields = [];\n  if (theme.config && theme.config.outputFields) {\n    outputFields = theme.config.outputFields;\n  }\n  if (outputFields.includes(\"colors\")) themeToken.colors = theme.colors;\n  if (outputFields.includes(\"typography\"))\n    themeToken.typography = theme.typography;\n  if (theme) {\n    if (theme.typography) {\n      generatedStyles.push(generateTypographyStyles(theme.typography));\n    }\n    if (theme.colors) {\n      generatedStyles.push([\n        `button.fr-btn:disabled{\n          background-color:${\n            theme.components &&\n            theme.components.button &&\n            theme.components.button.disabled &&\n            theme.components.button.disabled.bgColor\n              ? theme.components.button.disabled.bgColor\n              : \"#d4d4d4\"\n          };\n          border-color:${\n            theme.components &&\n            theme.components.button &&\n            theme.components.button.disabled &&\n            theme.components.button.disabled.bgColor\n              ? theme.components.button.disabled.bgColor\n              : \"#d4d4d4\"\n          };\n          color:${\n            theme.components &&\n            theme.components.button &&\n            theme.components.button.disabled &&\n            theme.components.button.disabled.bgColor\n              ? theme.components.button.disabled.bgColor\n              : \"#afafaf\"\n          }\n        }\n    `\n      ]);\n      const themeColorsKeys = Object.keys(theme.colors);\n      for (let index = 0; index < themeColorsKeys.length; index += 1) {\n        const colorName = themeColorsKeys[index];\n        const colorValue = theme.colors[themeColorsKeys[index]];\n        if (colorValue !== \"none\") {\n          // Adding base color to palette\n          themeToken.palette[`${colorName}`] = colorValue;\n          const palette = generatePalette(colorValue, colorName);\n          if (theme.config && theme.config.generatePalette) {\n            palette.forEach((item, i) => {\n              // Adding color variations to the palette\n              themeToken.palette[`${item.name}`] = item.color;\n              // Avoiding executing unnecessary code that is not needed in the SSR\n              if (canIExecuteClientCode()) {\n                const styles = generateStylesPalette(palette, item, i);\n                generatedStyles.push(styles.replace(/\\n. |\\r/g, \"\"));\n              }\n            });\n          } else {\n            if (canIExecuteClientCode()) {\n              const styles = generateStylesPalette(\n                palette,\n                {\n                  color: colorValue,\n                  name: colorName,\n                  textColor: getContrast(colorValue)\n                },\n                11\n              );\n              generatedStyles.push(styles.replace(/\\n. |\\r/g, \"\"));\n            }\n          }\n        }\n      }\n      if (theme.colors.primary) {\n        const primaryHover = hexToRGBA(theme.colors.primary, 0.25);\n        generatedStyles.push(\n          `.fr-focus:focus, .fr-form-control:focus, .fr-focus\\\\:focus{box-shadow: 0 0 0 0.2rem ${primaryHover};outline: 0;}`\n        );\n      }\n    }\n    if (canIExecuteClientCode() && typeof document != \"undefined\") {\n      const element = document.getElementById(\"frTheming\");\n      if (element) {\n        element.innerHTML = generatedStyles.join(\" \");\n      } else {\n        const themeStyleNode = `${generatedStyles.join(\" \")}`;\n\n        const body = document.body || document.getElementsByTagName(\"body\")[0];\n        const style = document.createElement(\"style\");\n\n        style.type = \"text/css\";\n        style.id = \"frTheming\";\n        if (style.styleSheet) {\n          // This is required for IE8 and below.\n          style.styleSheet.cssText = themeStyleNode;\n        } else {\n          style.appendChild(document.createTextNode(themeStyleNode));\n        }\n        body.appendChild(style);\n      }\n    }\n  }\n  return themeToken;\n};\n\nexport { initTheme };\n","import { initTheme } from \"./ThemeBuilder\";\nif(typeof window !== \"undefined\"){\n    if(!window.FR) window.FR = {};\n    window.FR.initTheme=initTheme;\n}"],"names":["const","componentToHex","c","hex","toString","length","hexToRGBA","alpha","test","substring","split","join","hex2RGB","r","g","b","getContrast","hexColor","rgb","variacion","H","Z","value","colorBrightness","color","t","parseInt","generatePalette","name","cantShape","step","Math","ceil","startVal","floor","colors","let","i","textColor","push","canIExecuteClientCode","window","generateStylesPalette","palette","item","hoverBgColor","gradientTo","gradientButtonToHover","gradientButtonFromActive","gradientButtonToActive","gradientButtonTextActive","hoverColor","activeBgColor","activeColor","FR","initTheme","theme","generatedStyles","themeToken","designTokens","outputFields","config","includes","typography","style","css","fonts","Object","keys","map","fontName","preset","Array","isArray","src","alias","fontStyle","fontWeight","fontDisplay","local","forEach","fontSrc","index","toLocaleLowerCase","replace","generateTypographyStyles","components","button","disabled","bgColor","themeColorsKeys","colorName","colorValue","styles","primary","primaryHover","document","element","getElementById","innerHTML","themeStyleNode","body","getElementsByTagName","createElement","type","id","styleSheet","cssText","appendChild","createTextNode"],"mappings":"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"}

package/dist/front10-helpers.mjs

@@ -0,0 +1,2 @@
+var o=function(o){var n=o.toString(16);return 1===n.length?"0"+n:n},n=function(o,n){var t;return void 0===n&&(n=.5),!!/^#([A-Fa-f0-9]{3}){1,2}$/.test(o)&&(3===(t=o.substring(1).split("")).length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]),"rgba("+((t="0x"+t.join(""))>>16&255)+","+(t>>8&255)+","+(255&t)+","+n+")")},t=function(o){var n;return!!/^#([A-Fa-f0-9]{3}){1,2}$/.test(o)&&(3===(n=o.substring(1).split("")).length&&(n=[n[0],n[0],n[1],n[1],n[2],n[2]]),{r:(n="0x"+n.join(""))>>16&255,g:n>>8&255,b:255&n})},r=function(o){var n=t(o);return!!n&&((299*n.r+587*n.g+114*n.b)/1e3>=128?"#000000":"#FFFFFF")},e=function(o,n,t){return o/n*t},a=function(n,r){var a,l,c=t(n),i={};return!!c&&(r<0?(i.r=c.r-parseInt(c.r/100*-r,10),i.g=c.g-parseInt(c.g/100*-r,10),i.b=c.b-parseInt(c.b/100*-r,10)):(i.r=parseInt(e(255-c.r,100,r),10)+c.r,i.g=parseInt(e(255-c.g,100,r),10)+c.g,i.b=parseInt(e(255-c.b,100,r),10)+c.b),a=i.g,l=i.b,"#"+o(i.r)+o(a)+o(l))},l=function(o,n,e){void 0===e&&(e=22);var l=100/Math.ceil(e/2),c=l*Math.floor(e/2),i=[];if(t(o))for(var f=0;f<e;f+=1){var s=a(o,c-f*l),d=r(s);i.push({name:f>e/2?n+"-"+f:f===e/2?n:n+"-"+(f+1),color:s,textColor:d})}return i},c=function(){return"undefined"!=typeof window},i=function(o,t,r){var e=t.color,a=t.color,l=t.color,c=t.color,i=t.color,f=t.textColor,s=t.textColor,d=t.color,b=t.textColor;return o[r+2]?a=o[r+2].color:o[r-2]&&(a=o[r-2].color),o[r+1]?l=o[r+1].color:o[r-1]&&(l=o[r-1].color),o[r+2]?c=o[r+2].color:o[r-2]&&(c=o[r-2].color),o[r+4]?i=o[r+4].color:o[r-4]&&(i=o[r-4].color),o[r+4]?f=o[r+4].textColor:o[r-4]&&(f=o[r-4].textColor),o[r+2]?e=o[r+2].color:o[r-2]&&(e=o[r-2].color),o[r+2]?s=o[r+2].textColor:o[r-2]&&(s=o[r-2].textColor),o[r+3]?d=o[r+3].color:o[r-3]&&(d=o[r-3].color),o[r+3]?b=o[r+3].textColor:o[r-3]&&(b=o[r-3].textColor),"\n  button.fr-btn-"+t.name+"{\n    background-color:"+t.color+";\n    border-color:"+t.color+";\n    color:"+t.textColor+" !important;\n  }\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):focus,\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):hover{\n    background-color:"+e+";\n    border-color:"+e+";\n    color:"+s+"\n  }\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-show > .fr-btn-outline-"+t.name+".fr-dropdown-toggle{\n    color: "+b+";\n    background-color: "+d+";\n    border-color: "+d+";\n  }\n  .fr-border-"+t.name+"{border-color: "+t.color+" !important;}\n  .fr-bg-"+t.name+"{background-color: "+t.color+" !important;}\n  .gradient.fr-bg-"+t.name+",fr-btn-outline-"+t.name+":hover,\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled){\n    background-image: linear-gradient(to bottom,"+t.color+","+a+");\n  }\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):hover,\n  button.gradient.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):hover{\n    background-image: linear-gradient(to bottom,"+t.color+","+l+");\n    color: "+t.textColor+";\n  }\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.gradient.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):active{\n    background-image: linear-gradient(to bottom,"+c+","+i+");\n    color: "+f+";\n  }\n  .fr-text-"+t.name+"{color: "+t.color+" !important;}\n  .fr-btn-outline-"+t.name+"{\n    color: "+t.color+";\n    border-color: "+t.color+";\n  }\n  .fr-btn-outline-"+t.name+":hover{\n    color: "+t.textColor+";\n    background-color: "+t.color+";\n    border-color: "+t.color+";\n  }\n  .fr-btn-outline-"+t.name+".fr-disabled,\n  .fr-btn-outline-"+t.name+":disabled{\n    color: "+t.color+" !important;\n    background-color: transparent !important;\n    border-color: "+t.color+" !important;\n  }\n  .fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled).fr-active:focus,\n  .fr-show > .fr-btn-outline-"+t.name+".fr-dropdown-toggle:focus{\n    box-shadow: 0 0 0 0.2rem "+n(t.color)+";\n  }\n  .fr-btn-"+t.name+":focus, .fr-btn-outline-"+t.name+":focus{\n    box-shadow: 0 0 0 0.2rem "+n(t.color)+";\n  }\n  .fr-component-hover-"+t.name+":hover:not(.fr-row):not([class^=fr-col]):not(button)>*{\n    color:"+t.textColor+" !important;\n  }\n  .fr-component-hover-"+t.name+":hover:not(button){\n    background-color:"+t.color+" !important;\n    border-color:"+e+" !important;\n  }\n  .fr-icon.fr-i-"+t.name+" path{\n    fill: "+t.color+";\n  }\n  .fr-btn-"+t.name+" .fr-icon path{\n    fill: "+t.textColor+";\n  }\n"};"undefined"!=typeof window&&(window.FR||(window.FR={}),window.FR.initTheme=function(o){var t=[],e={palette:{},designTokens:o.designTokens||{}},a=[];if(o.config&&o.config.outputFields&&(a=o.config.outputFields),a.includes("colors")&&(e.colors=o.colors),a.includes("typography")&&(e.typography=o.typography),o){if(o.typography&&t.push(function(o){var n="";return o.css&&"string"==typeof o.css&&(n+=o.css),o.fonts&&"object"==typeof o.fonts&&Object.keys(o.fonts).map(function(t){return"object"==typeof o.fonts[t]&&(o.fonts[t].preset?n+="@import url('"+o.fonts[t].preset+"');":Array.isArray(o.fonts[t].src)&&(n+="@font-face {\n            font-family: '"+(o.fonts[t].alias?o.fonts[t].alias:t)+"';\n            "+(o.fonts[t].fontStyle?"font-style:"+o.fonts[t].fontStyle+";":"")+"\n            "+(o.fonts[t].fontWeight?"font-weight:"+o.fonts[t].fontWeight+";":"")+"\n            "+(o.fonts[t].fontDisplay?"font-display:"+o.fonts[t].fontDisplay+";":"")+"\n            src:",o.fonts[t].local&&o.fonts[t].local.forEach(function(o){n+="local('"+o+"'),"}),o.fonts[t].src.forEach(function(r,e){n+="url('"+r.url+"') format('"+r.format+"')"+(e<o.fonts[t].src.length-1?",":"")}),n+="}"),n+=".fr-font-name-"+t.toLocaleLowerCase().replace(/ /g,"-")+"{font-family: '"+(o.fonts[t].alias?o.fonts[t].alias:t)+"', 'sans-serif'}"),t}),n}(o.typography)),o.colors){t.push(["button.fr-btn:disabled{\n          background-color:"+(o.components&&o.components.button&&o.components.button.disabled&&o.components.button.disabled.bgColor?o.components.button.disabled.bgColor:"#d4d4d4")+";\n          border-color:"+(o.components&&o.components.button&&o.components.button.disabled&&o.components.button.disabled.bgColor?o.components.button.disabled.bgColor:"#d4d4d4")+";\n          color:"+(o.components&&o.components.button&&o.components.button.disabled&&o.components.button.disabled.bgColor?o.components.button.disabled.bgColor:"#afafaf")+"\n        }\n    "]);for(var f=Object.keys(o.colors),s=0;s<f.length;s+=1){var d=f[s],b=o.colors[f[s]];if("none"!==b){e.palette[""+d]=b;var u=l(b,d);if(o.config&&o.config.generatePalette)u.forEach(function(o,n){if(e.palette[""+o.name]=o.color,c()){var r=i(u,o,n);t.push(r.replace(/\n. |\r/g,""))}});else if(c()){var m=i(u,{color:b,name:d,textColor:r(b)},11);t.push(m.replace(/\n. |\r/g,""))}}}if(o.colors.primary){var p=n(o.colors.primary,.25);t.push(".fr-focus:focus, .fr-form-control:focus, .fr-focus\\:focus{box-shadow: 0 0 0 0.2rem "+p+";outline: 0;}")}}if(c()&&"undefined"!=typeof document){var g=document.getElementById("frTheming");if(g)g.innerHTML=t.join(" ");else{var h=""+t.join(" "),v=document.body||document.getElementsByTagName("body")[0],y=document.createElement("style");y.type="text/css",y.id="frTheming",y.styleSheet?y.styleSheet.cssText=h:y.appendChild(document.createTextNode(h)),v.appendChild(y)}}}return e});
+//# sourceMappingURL=front10-helpers.mjs.map

package/dist/front10-helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"front10-helpers.mjs","sources":["../src/Color/Color.js","../src/canI/canI.js","../src/ThemeBuilder/ThemeBuilder.js","../src/index.js"],"sourcesContent":["const componentToHex = c => {\n  const hex = c.toString(16);\n  return hex.length === 1 ? `0${hex}` : hex;\n};\n\nconst rgb2Hex = (r, g, b) =>\n  `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;\n\nconst hexToRGBA = (hex, alpha = 0.5) => {\n  let c;\n  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n    c = hex.substring(1).split(\"\");\n    if (c.length === 3) {\n      c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n    }\n    c = `0x${c.join(\"\")}`;\n    return `rgba(${(c >> 16) & 255},${(c >> 8) & 255},${c & 255},${alpha})`;\n  } else {\n    // console.error(\"Bad Hex:\", hex, \"Alpha: \", alpha);\n    return false;\n  }\n};\n\nconst isColor = color => {\n  if (hex2RGB(color)) return true;\n  else return false;\n};\n\nconst hex2RGB = hex => {\n  let c;\n  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n    c = hex.substring(1).split(\"\");\n    if (c.length === 3) {\n      c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n    }\n    c = `0x${c.join(\"\")}`;\n    // eslint-disable-next-line no-bitwise\n    return { r: (c >> 16) & 255, g: (c >> 8) & 255, b: c & 255 };\n  } else {\n    return false;\n    // throw new Error(\"Bad Hex\");\n  }\n};\n\n// https://24ways.org/2010/calculating-color-contrast\n// https://www.w3.org/WAI/ER/WD-AERT/#color-contrast\nconst getContrast = hexColor => {\n  const rgb = hex2RGB(hexColor);\n  if (rgb) {\n    const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;\n    return yiq >= 128 ? \"#000000\" : \"#FFFFFF\";\n  } else return false;\n};\n\nconst variacion = (H, Z, value) => {\n  return (H / Z) * value;\n};\n\n// https://www.w3.org/TR/WCAG20/#relativeluminancedef\nconst colorBrightness = (color, value) => {\n  const rgb = hex2RGB(color);\n  const t = {};\n  if (rgb) {\n    if (value < 0) {\n      t.r = rgb.r - parseInt((rgb.r / 100) * -value, 10);\n      t.g = rgb.g - parseInt((rgb.g / 100) * -value, 10);\n      t.b = rgb.b - parseInt((rgb.b / 100) * -value, 10);\n    } else {\n      t.r = parseInt(variacion(255 - rgb.r, 100, value), 10) + rgb.r;\n      t.g = parseInt(variacion(255 - rgb.g, 100, value), 10) + rgb.g;\n      t.b = parseInt(variacion(255 - rgb.b, 100, value), 10) + rgb.b;\n    }\n    return rgb2Hex(t.r, t.g, t.b);\n  } else return false;\n};\n\n/**\n * Function to generate a colors palette.\n * This function return a array of colors\n * in the following format: [{color: 'string', textColor: 'string', name: 'string' }]\n * @param {string} hexColor Color in hexadecimal format\n * @param {string} name Name of color\n * @param {integer} cantShape Cant of variations\n */\nconst generatePalette = (hexColor, name, cantShape = 22) => {\n  const step = 100 / Math.ceil(cantShape / 2);\n  const startVal = step * Math.floor(cantShape / 2);\n  const colors = [];\n  if (isColor(hexColor)) {\n    for (let i = 0; i < cantShape; i += 1) {\n      const color = colorBrightness(hexColor, startVal - i * step);\n      const textColor = getContrast(color);\n      let tmpName;\n      if (i > cantShape / 2) tmpName = `${name}-${i}`;\n      else if (i === cantShape / 2) tmpName = name;\n      else tmpName = `${name}-${i + 1}`;\n      colors.push({\n        name: tmpName,\n        color,\n        textColor\n      });\n    }\n  }\n  return colors;\n};\n\nexport { generatePalette, getContrast, hex2RGB, hexToRGBA, rgb2Hex, isColor };\n","const subscribersMap = {};\nconst addedGlobalEventListeners = false;\n\n/**\n * Returns an element\n * @param {*} elementSelector\n */\nconst getElement = elementSelector => {\n  return document.querySelector(elementSelector);\n};\n\n/**\n * Iterate through the listeners list and try to resolve\n * the promise if they are visible in the viewport\n * TODO: Fix the viewport detection part\n */\nconst resolveListeners = () => {\n  const subscribersKeyList = Object.keys(subscribersMap);\n  if (subscribersKeyList.length > 0) {\n    for (let index = 0; index < subscribersKeyList.length; index++) {\n      const key = subscribersKeyList[index];\n      if (subscribersMap[key]) {\n        //Only full load component when is visible in viewport\n        if (isElementInViewport(getElement(key))) {\n          subscribersMap[key].resolve(true);\n          subscribersMap[key] = null;\n          delete subscribersMap[key];\n        }\n      }\n    }\n  }\n};\n\n/**\n * Helper function to simulate a setInterval but\n * wthout hurting the browser performance\n * @param {*} fn\n * @param {*} delay\n */\nconst requestInterval = (fn, delay) => {\n  const requestAnimFrame = (() => {\n    return (\n      window.requestAnimationFrame ||\n      function hello(callback) {\n        window.setTimeout(callback, 1000 / 60);\n      }\n    );\n  })();\n  let start = new Date().getTime();\n  const handle = {};\n  function loop() {\n    handle.value = requestAnimFrame(loop);\n    const current = new Date().getTime();\n    const delta = current - start;\n    if (delta >= delay) {\n      fn.call();\n      start = new Date().getTime();\n    }\n  }\n  handle.value = requestAnimFrame(loop);\n  return handle;\n};\n\n/**\n * Try to resolve all listeners once an\n * user wants to play with the components\n * this heuristics are very basic, we should\n * find better ones.\n */\nconst addGlobalEventListeners = () => {\n  window.addEventListener(\"scroll\", () => {\n    resolveListeners();\n  });\n\n  window.addEventListener(\"click\", () => {\n    resolveListeners();\n  });\n\n  window.addEventListener(\"mousemove\", () => {\n    resolveListeners();\n  });\n\n  window.addEventListener(\"keydown\", () => {\n    resolveListeners();\n  });\n\n  requestInterval(() => {\n    resolveListeners();\n  }, 2000);\n};\n\n/**\n * Returns the DocElement\n */\nconst getDocElement = () => {\n  if (window !== undefined) {\n    return window.document.documentElement;\n  }\n  return false;\n};\n\n/**\n * Obtaining the viewport height\n * @method _getViewportH\n * @return ConditionalExpression\n */\nconst getViewportH = () => {\n  const client = getDocElement.clientHeight;\n  const inner = window.innerHeight;\n  return client < inner ? inner : client;\n};\n\n/**\n * The offset of the element\n * @method _getOffset\n * @param {} el\n * @return ObjectExpression\n */\nconst getOffset = el => {\n  let offsetTop = 0;\n  let offsetLeft = 0;\n  /* eslint-disable */\n  do {\n    if (!isNaN(el.offsetTop)) {\n      offsetTop += el.offsetTop;\n    }\n    if (!isNaN(el.offsetLeft)) {\n      offsetLeft += el.offsetLeft;\n    }\n  } while ((el = el.offsetParent));\n  /* eslint-enable */\n  return {\n    top: offsetTop,\n    left: offsetLeft\n  };\n};\n\n/**\n * Return true if the element if visible in a viewport zone\n * @param {} el\n * @param {} h\n * @return LogicalExpression\n */\nconst isElementInViewport = el => {\n  if (canIExecuteClientCode() && el) {\n    let element = el;\n    let top = element.offsetTop;\n    let left = element.offsetLeft;\n    const width = element.offsetWidth;\n    const height = element.offsetHeight;\n\n    while (element.offsetParent) {\n      element = element.offsetParent;\n      top += element.offsetTop;\n      left += element.offsetLeft;\n    }\n\n    return (\n      top < window.pageYOffset + window.innerHeight &&\n      left < window.pageXOffset + window.innerWidth &&\n      top + height > window.pageYOffset &&\n      left + width > window.pageXOffset\n    );\n  }\n};\n\n/**\n * Returns a promise that resolves once the initial\n * browser processing is done. This allows to save\n * the users that uses low cpu devices and also have\n * awesome results in Google Page Speed\n * @param {*} elementSelector\n * @param {*} inSSR\n */\nconst canILiftOff = (elementSelector, inSSR = true) => {\n  return new Promise(resolve => {\n    // we don't need to wait in SSR\n    if (window === undefined && inSSR) {\n      resolve(true);\n    } else {\n      // adds global listeners that will trigger\n      // once a real person is interacting with the browser\n      if (!addedGlobalEventListeners) {\n        addGlobalEventListeners();\n      }\n      // saving all the component instances subscriptions\n      subscribersMap[elementSelector] = {\n        resolve\n      };\n    }\n  });\n};\n\nconst canIExecuteClientCode = () => {\n  return typeof window !== \"undefined\";\n};\n\nexport { canILiftOff, isElementInViewport, canIExecuteClientCode };\n","import { generatePalette, hexToRGBA, getContrast } from \"../Color\";\nimport { canIExecuteClientCode } from \"../canI\";\n\nconst generateTypographyStyles = (typography) => {\n  let style = \"\";\n  if (typography.css && typeof typography.css === \"string\") {\n    style += typography.css;\n  }\n  if (typography.fonts && typeof typography.fonts === \"object\") {\n    Object.keys(typography.fonts).map((fontName) => {\n      if (typeof typography.fonts[fontName] === \"object\") {\n        if (typography.fonts[fontName].preset)\n          style += `@import url('${typography.fonts[fontName].preset}');`;\n        else if (Array.isArray(typography.fonts[fontName].src)) {\n          style += `@font-face {\n            font-family: '${\n              typography.fonts[fontName].alias\n                ? typography.fonts[fontName].alias\n                : fontName\n            }';\n            ${\n              typography.fonts[fontName].fontStyle\n                ? `font-style:${typography.fonts[fontName].fontStyle};`\n                : \"\"\n            }\n            ${\n              typography.fonts[fontName].fontWeight\n                ? `font-weight:${typography.fonts[fontName].fontWeight};`\n                : \"\"\n            }\n            ${\n              typography.fonts[fontName].fontDisplay\n                ? `font-display:${typography.fonts[fontName].fontDisplay};`\n                : \"\"\n            }\n            src:`;\n\n          typography.fonts[fontName].local &&\n            typography.fonts[fontName].local.forEach((local) => {\n              style += `local('${local}'),`;\n            });\n          typography.fonts[fontName].src.forEach((fontSrc, index) => {\n            style += `url('${fontSrc.url}') format('${fontSrc.format}')${\n              index < typography.fonts[fontName].src.length - 1 ? \",\" : \"\"\n            }`;\n          });\n          style += \"}\";\n        }\n        style += `.fr-font-name-${fontName\n          .toLocaleLowerCase()\n          .replace(/ /g, \"-\")}{font-family: '${\n          typography.fonts[fontName].alias\n            ? typography.fonts[fontName].alias\n            : fontName\n        }', 'sans-serif'}`;\n      }\n      return fontName;\n    });\n  }\n  return style;\n};\n\nconst generateStylesPalette = (palette, item, i) => {\n  let hoverBgColor = item.color;\n  let gradientTo = item.color;\n  let gradientButtonToHover = item.color;\n  let gradientButtonFromActive = item.color;\n  let gradientButtonToActive = item.color;\n  let gradientButtonTextActive = item.textColor;\n  let hoverColor = item.textColor;\n  let activeBgColor = item.color;\n  let activeColor = item.textColor;\n\n  if (palette[i + 2]) gradientTo = palette[i + 2].color;\n  else if (palette[i - 2]) gradientTo = palette[i - 2].color;\n\n  if (palette[i + 1]) gradientButtonToHover = palette[i + 1].color;\n  else if (palette[i - 1]) gradientButtonToHover = palette[i - 1].color;\n\n  if (palette[i + 2]) gradientButtonFromActive = palette[i + 2].color;\n  else if (palette[i - 2]) gradientButtonFromActive = palette[i - 2].color;\n\n  if (palette[i + 4]) gradientButtonToActive = palette[i + 4].color;\n  else if (palette[i - 4]) gradientButtonToActive = palette[i - 4].color;\n\n  if (palette[i + 4]) gradientButtonTextActive = palette[i + 4].textColor;\n  else if (palette[i - 4]) gradientButtonTextActive = palette[i - 4].textColor;\n\n  if (palette[i + 2]) hoverBgColor = palette[i + 2].color;\n  else if (palette[i - 2]) hoverBgColor = palette[i - 2].color;\n\n  if (palette[i + 2]) hoverColor = palette[i + 2].textColor;\n  else if (palette[i - 2]) hoverColor = palette[i - 2].textColor;\n\n  if (palette[i + 3]) activeBgColor = palette[i + 3].color;\n  else if (palette[i - 3]) activeBgColor = palette[i - 3].color;\n\n  if (palette[i + 3]) activeColor = palette[i + 3].textColor;\n  else if (palette[i - 3]) activeColor = palette[i - 3].textColor;\n  const styles = `\n  button.fr-btn-${item.name}{\n    background-color:${item.color};\n    border-color:${item.color};\n    color:${item.textColor} !important;\n  }\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):focus,\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):hover{\n    background-color:${hoverBgColor};\n    border-color:${hoverBgColor};\n    color:${hoverColor}\n  }\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-show > .fr-btn-outline-${item.name}.fr-dropdown-toggle{\n    color: ${activeColor};\n    background-color: ${activeBgColor};\n    border-color: ${activeBgColor};\n  }\n  .fr-border-${item.name}{border-color: ${item.color} !important;}\n  .fr-bg-${item.name}{background-color: ${item.color} !important;}\n  .gradient.fr-bg-${item.name},fr-btn-outline-${item.name}:hover,\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled){\n    background-image: linear-gradient(to bottom,${item.color},${gradientTo});\n  }\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):hover,\n  button.gradient.fr-btn-outline-${\n    item.name\n  }:not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-outline-${\n    item.name\n  }:not(:disabled):not(.fr-disabled):hover{\n    background-image: linear-gradient(to bottom,${\n      item.color\n    },${gradientButtonToHover});\n    color: ${item.textColor};\n  }\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.gradient.fr-btn-outline-${\n    item.name\n  }:not(:disabled):not(.fr-disabled):active{\n    background-image: linear-gradient(to bottom,${gradientButtonFromActive},${gradientButtonToActive});\n    color: ${gradientButtonTextActive};\n  }\n  .fr-text-${item.name}{color: ${item.color} !important;}\n  .fr-btn-outline-${item.name}{\n    color: ${item.color};\n    border-color: ${item.color};\n  }\n  .fr-btn-outline-${item.name}:hover{\n    color: ${item.textColor};\n    background-color: ${item.color};\n    border-color: ${item.color};\n  }\n  .fr-btn-outline-${item.name}.fr-disabled,\n  .fr-btn-outline-${item.name}:disabled{\n    color: ${item.color} !important;\n    background-color: transparent !important;\n    border-color: ${item.color} !important;\n  }\n  .fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled).fr-active:focus,\n  .fr-show > .fr-btn-outline-${item.name}.fr-dropdown-toggle:focus{\n    box-shadow: 0 0 0 0.2rem ${hexToRGBA(item.color)};\n  }\n  .fr-btn-${item.name}:focus, .fr-btn-outline-${item.name}:focus{\n    box-shadow: 0 0 0 0.2rem ${hexToRGBA(item.color)};\n  }\n  .fr-component-hover-${\n    item.name\n  }:hover:not(.fr-row):not([class^=fr-col]):not(button)>*{\n    color:${item.textColor} !important;\n  }\n  .fr-component-hover-${item.name}:hover:not(button){\n    background-color:${item.color} !important;\n    border-color:${hoverBgColor} !important;\n  }\n  .fr-icon.fr-i-${item.name} path{\n    fill: ${item.color};\n  }\n  .fr-btn-${item.name} .fr-icon path{\n    fill: ${item.textColor};\n  }\n`;\n  return styles;\n};\n\nconst initTheme = (theme) => {\n  const generatedStyles = [];\n  const themeToken = {\n    palette: {},\n    designTokens: theme.designTokens || {}\n  };\n\n  let outputFields = [];\n  if (theme.config && theme.config.outputFields) {\n    outputFields = theme.config.outputFields;\n  }\n  if (outputFields.includes(\"colors\")) themeToken.colors = theme.colors;\n  if (outputFields.includes(\"typography\"))\n    themeToken.typography = theme.typography;\n  if (theme) {\n    if (theme.typography) {\n      generatedStyles.push(generateTypographyStyles(theme.typography));\n    }\n    if (theme.colors) {\n      generatedStyles.push([\n        `button.fr-btn:disabled{\n          background-color:${\n            theme.components &&\n            theme.components.button &&\n            theme.components.button.disabled &&\n            theme.components.button.disabled.bgColor\n              ? theme.components.button.disabled.bgColor\n              : \"#d4d4d4\"\n          };\n          border-color:${\n            theme.components &&\n            theme.components.button &&\n            theme.components.button.disabled &&\n            theme.components.button.disabled.bgColor\n              ? theme.components.button.disabled.bgColor\n              : \"#d4d4d4\"\n          };\n          color:${\n            theme.components &&\n            theme.components.button &&\n            theme.components.button.disabled &&\n            theme.components.button.disabled.bgColor\n              ? theme.components.button.disabled.bgColor\n              : \"#afafaf\"\n          }\n        }\n    `\n      ]);\n      const themeColorsKeys = Object.keys(theme.colors);\n      for (let index = 0; index < themeColorsKeys.length; index += 1) {\n        const colorName = themeColorsKeys[index];\n        const colorValue = theme.colors[themeColorsKeys[index]];\n        if (colorValue !== \"none\") {\n          // Adding base color to palette\n          themeToken.palette[`${colorName}`] = colorValue;\n          const palette = generatePalette(colorValue, colorName);\n          if (theme.config && theme.config.generatePalette) {\n            palette.forEach((item, i) => {\n              // Adding color variations to the palette\n              themeToken.palette[`${item.name}`] = item.color;\n              // Avoiding executing unnecessary code that is not needed in the SSR\n              if (canIExecuteClientCode()) {\n                const styles = generateStylesPalette(palette, item, i);\n                generatedStyles.push(styles.replace(/\\n. |\\r/g, \"\"));\n              }\n            });\n          } else {\n            if (canIExecuteClientCode()) {\n              const styles = generateStylesPalette(\n                palette,\n                {\n                  color: colorValue,\n                  name: colorName,\n                  textColor: getContrast(colorValue)\n                },\n                11\n              );\n              generatedStyles.push(styles.replace(/\\n. |\\r/g, \"\"));\n            }\n          }\n        }\n      }\n      if (theme.colors.primary) {\n        const primaryHover = hexToRGBA(theme.colors.primary, 0.25);\n        generatedStyles.push(\n          `.fr-focus:focus, .fr-form-control:focus, .fr-focus\\\\:focus{box-shadow: 0 0 0 0.2rem ${primaryHover};outline: 0;}`\n        );\n      }\n    }\n    if (canIExecuteClientCode() && typeof document != \"undefined\") {\n      const element = document.getElementById(\"frTheming\");\n      if (element) {\n        element.innerHTML = generatedStyles.join(\" \");\n      } else {\n        const themeStyleNode = `${generatedStyles.join(\" \")}`;\n\n        const body = document.body || document.getElementsByTagName(\"body\")[0];\n        const style = document.createElement(\"style\");\n\n        style.type = \"text/css\";\n        style.id = \"frTheming\";\n        if (style.styleSheet) {\n          // This is required for IE8 and below.\n          style.styleSheet.cssText = themeStyleNode;\n        } else {\n          style.appendChild(document.createTextNode(themeStyleNode));\n        }\n        body.appendChild(style);\n      }\n    }\n  }\n  return themeToken;\n};\n\nexport { initTheme };\n","import { initTheme } from \"./ThemeBuilder\";\nif(typeof window !== \"undefined\"){\n    if(!window.FR) window.FR = {};\n    window.FR.initTheme=initTheme;\n}"],"names":["const","componentToHex","c","hex","toString","length","hexToRGBA","alpha","test","substring","split","join","hex2RGB","r","g","b","getContrast","hexColor","rgb","variacion","H","Z","value","colorBrightness","color","t","parseInt","generatePalette","name","cantShape","step","Math","ceil","startVal","floor","colors","let","i","textColor","push","canIExecuteClientCode","window","generateStylesPalette","palette","item","hoverBgColor","gradientTo","gradientButtonToHover","gradientButtonFromActive","gradientButtonToActive","gradientButtonTextActive","hoverColor","activeBgColor","activeColor","FR","initTheme","theme","generatedStyles","themeToken","designTokens","outputFields","config","includes","typography","style","css","fonts","Object","keys","map","fontName","preset","Array","isArray","src","alias","fontStyle","fontWeight","fontDisplay","local","forEach","fontSrc","index","toLocaleLowerCase","replace","generateTypographyStyles","components","button","disabled","bgColor","themeColorsKeys","colorName","colorValue","styles","primary","primaryHover","document","element","getElementById","innerHTML","themeStyleNode","body","getElementsByTagName","createElement","type","id","styleSheet","cssText","appendChild","createTextNode"],"mappings":"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"}

package/dist/front10-helpers.umd.js

@@ -0,0 +1,2 @@
+!function(o,n){"object"==typeof exports&&"undefined"!=typeof module?n():"function"==typeof define&&define.amd?define(n):n()}(0,function(){var o=function(o){var n=o.toString(16);return 1===n.length?"0"+n:n},n=function(o,n){var t;return void 0===n&&(n=.5),!!/^#([A-Fa-f0-9]{3}){1,2}$/.test(o)&&(3===(t=o.substring(1).split("")).length&&(t=[t[0],t[0],t[1],t[1],t[2],t[2]]),"rgba("+((t="0x"+t.join(""))>>16&255)+","+(t>>8&255)+","+(255&t)+","+n+")")},t=function(o){var n;return!!/^#([A-Fa-f0-9]{3}){1,2}$/.test(o)&&(3===(n=o.substring(1).split("")).length&&(n=[n[0],n[0],n[1],n[1],n[2],n[2]]),{r:(n="0x"+n.join(""))>>16&255,g:n>>8&255,b:255&n})},r=function(o){var n=t(o);return!!n&&((299*n.r+587*n.g+114*n.b)/1e3>=128?"#000000":"#FFFFFF")},e=function(o,n,t){return o/n*t},a=function(n,r){var a,l,i=t(n),c={};return!!i&&(r<0?(c.r=i.r-parseInt(i.r/100*-r,10),c.g=i.g-parseInt(i.g/100*-r,10),c.b=i.b-parseInt(i.b/100*-r,10)):(c.r=parseInt(e(255-i.r,100,r),10)+i.r,c.g=parseInt(e(255-i.g,100,r),10)+i.g,c.b=parseInt(e(255-i.b,100,r),10)+i.b),a=c.g,l=c.b,"#"+o(c.r)+o(a)+o(l))},l=function(o,n,e){void 0===e&&(e=22);var l=100/Math.ceil(e/2),i=l*Math.floor(e/2),c=[];if(t(o))for(var f=0;f<e;f+=1){var d=a(o,i-f*l),s=r(d);c.push({name:f>e/2?n+"-"+f:f===e/2?n:n+"-"+(f+1),color:d,textColor:s})}return c},i=function(){return"undefined"!=typeof window},c=function(o,t,r){var e=t.color,a=t.color,l=t.color,i=t.color,c=t.color,f=t.textColor,d=t.textColor,s=t.color,b=t.textColor;return o[r+2]?a=o[r+2].color:o[r-2]&&(a=o[r-2].color),o[r+1]?l=o[r+1].color:o[r-1]&&(l=o[r-1].color),o[r+2]?i=o[r+2].color:o[r-2]&&(i=o[r-2].color),o[r+4]?c=o[r+4].color:o[r-4]&&(c=o[r-4].color),o[r+4]?f=o[r+4].textColor:o[r-4]&&(f=o[r-4].textColor),o[r+2]?e=o[r+2].color:o[r-2]&&(e=o[r-2].color),o[r+2]?d=o[r+2].textColor:o[r-2]&&(d=o[r-2].textColor),o[r+3]?s=o[r+3].color:o[r-3]&&(s=o[r-3].color),o[r+3]?b=o[r+3].textColor:o[r-3]&&(b=o[r-3].textColor),"\n  button.fr-btn-"+t.name+"{\n    background-color:"+t.color+";\n    border-color:"+t.color+";\n    color:"+t.textColor+" !important;\n  }\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):focus,\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):hover{\n    background-color:"+e+";\n    border-color:"+e+";\n    color:"+d+"\n  }\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-show > .fr-btn-outline-"+t.name+".fr-dropdown-toggle{\n    color: "+b+";\n    background-color: "+s+";\n    border-color: "+s+";\n  }\n  .fr-border-"+t.name+"{border-color: "+t.color+" !important;}\n  .fr-bg-"+t.name+"{background-color: "+t.color+" !important;}\n  .gradient.fr-bg-"+t.name+",fr-btn-outline-"+t.name+":hover,\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled){\n    background-image: linear-gradient(to bottom,"+t.color+","+a+");\n  }\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):hover,\n  button.gradient.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):hover{\n    background-image: linear-gradient(to bottom,"+t.color+","+l+");\n    color: "+t.textColor+";\n  }\n  button.gradient.fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active,\n  button.gradient.fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):active{\n    background-image: linear-gradient(to bottom,"+i+","+c+");\n    color: "+f+";\n  }\n  .fr-text-"+t.name+"{color: "+t.color+" !important;}\n  .fr-btn-outline-"+t.name+"{\n    color: "+t.color+";\n    border-color: "+t.color+";\n  }\n  .fr-btn-outline-"+t.name+":hover{\n    color: "+t.textColor+";\n    background-color: "+t.color+";\n    border-color: "+t.color+";\n  }\n  .fr-btn-outline-"+t.name+".fr-disabled,\n  .fr-btn-outline-"+t.name+":disabled{\n    color: "+t.color+" !important;\n    background-color: transparent !important;\n    border-color: "+t.color+" !important;\n  }\n  .fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-"+t.name+":not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-outline-"+t.name+":not(:disabled):not(.fr-disabled).fr-active:focus,\n  .fr-show > .fr-btn-outline-"+t.name+".fr-dropdown-toggle:focus{\n    box-shadow: 0 0 0 0.2rem "+n(t.color)+";\n  }\n  .fr-btn-"+t.name+":focus, .fr-btn-outline-"+t.name+":focus{\n    box-shadow: 0 0 0 0.2rem "+n(t.color)+";\n  }\n  .fr-component-hover-"+t.name+":hover:not(.fr-row):not([class^=fr-col]):not(button)>*{\n    color:"+t.textColor+" !important;\n  }\n  .fr-component-hover-"+t.name+":hover:not(button){\n    background-color:"+t.color+" !important;\n    border-color:"+e+" !important;\n  }\n  .fr-icon.fr-i-"+t.name+" path{\n    fill: "+t.color+";\n  }\n  .fr-btn-"+t.name+" .fr-icon path{\n    fill: "+t.textColor+";\n  }\n"};"undefined"!=typeof window&&(window.FR||(window.FR={}),window.FR.initTheme=function(o){var t=[],e={palette:{},designTokens:o.designTokens||{}},a=[];if(o.config&&o.config.outputFields&&(a=o.config.outputFields),a.includes("colors")&&(e.colors=o.colors),a.includes("typography")&&(e.typography=o.typography),o){if(o.typography&&t.push(function(o){var n="";return o.css&&"string"==typeof o.css&&(n+=o.css),o.fonts&&"object"==typeof o.fonts&&Object.keys(o.fonts).map(function(t){return"object"==typeof o.fonts[t]&&(o.fonts[t].preset?n+="@import url('"+o.fonts[t].preset+"');":Array.isArray(o.fonts[t].src)&&(n+="@font-face {\n            font-family: '"+(o.fonts[t].alias?o.fonts[t].alias:t)+"';\n            "+(o.fonts[t].fontStyle?"font-style:"+o.fonts[t].fontStyle+";":"")+"\n            "+(o.fonts[t].fontWeight?"font-weight:"+o.fonts[t].fontWeight+";":"")+"\n            "+(o.fonts[t].fontDisplay?"font-display:"+o.fonts[t].fontDisplay+";":"")+"\n            src:",o.fonts[t].local&&o.fonts[t].local.forEach(function(o){n+="local('"+o+"'),"}),o.fonts[t].src.forEach(function(r,e){n+="url('"+r.url+"') format('"+r.format+"')"+(e<o.fonts[t].src.length-1?",":"")}),n+="}"),n+=".fr-font-name-"+t.toLocaleLowerCase().replace(/ /g,"-")+"{font-family: '"+(o.fonts[t].alias?o.fonts[t].alias:t)+"', 'sans-serif'}"),t}),n}(o.typography)),o.colors){t.push(["button.fr-btn:disabled{\n          background-color:"+(o.components&&o.components.button&&o.components.button.disabled&&o.components.button.disabled.bgColor?o.components.button.disabled.bgColor:"#d4d4d4")+";\n          border-color:"+(o.components&&o.components.button&&o.components.button.disabled&&o.components.button.disabled.bgColor?o.components.button.disabled.bgColor:"#d4d4d4")+";\n          color:"+(o.components&&o.components.button&&o.components.button.disabled&&o.components.button.disabled.bgColor?o.components.button.disabled.bgColor:"#afafaf")+"\n        }\n    "]);for(var f=Object.keys(o.colors),d=0;d<f.length;d+=1){var s=f[d],b=o.colors[f[d]];if("none"!==b){e.palette[""+s]=b;var u=l(b,s);if(o.config&&o.config.generatePalette)u.forEach(function(o,n){if(e.palette[""+o.name]=o.color,i()){var r=c(u,o,n);t.push(r.replace(/\n. |\r/g,""))}});else if(i()){var m=c(u,{color:b,name:s,textColor:r(b)},11);t.push(m.replace(/\n. |\r/g,""))}}}if(o.colors.primary){var p=n(o.colors.primary,.25);t.push(".fr-focus:focus, .fr-form-control:focus, .fr-focus\\:focus{box-shadow: 0 0 0 0.2rem "+p+";outline: 0;}")}}if(i()&&"undefined"!=typeof document){var g=document.getElementById("frTheming");if(g)g.innerHTML=t.join(" ");else{var h=""+t.join(" "),v=document.body||document.getElementsByTagName("body")[0],y=document.createElement("style");y.type="text/css",y.id="frTheming",y.styleSheet?y.styleSheet.cssText=h:y.appendChild(document.createTextNode(h)),v.appendChild(y)}}}return e})});
+//# sourceMappingURL=front10-helpers.umd.js.map

package/dist/front10-helpers.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"front10-helpers.umd.js","sources":["../src/Color/Color.js","../src/canI/canI.js","../src/ThemeBuilder/ThemeBuilder.js","../src/index.js"],"sourcesContent":["const componentToHex = c => {\n  const hex = c.toString(16);\n  return hex.length === 1 ? `0${hex}` : hex;\n};\n\nconst rgb2Hex = (r, g, b) =>\n  `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;\n\nconst hexToRGBA = (hex, alpha = 0.5) => {\n  let c;\n  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n    c = hex.substring(1).split(\"\");\n    if (c.length === 3) {\n      c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n    }\n    c = `0x${c.join(\"\")}`;\n    return `rgba(${(c >> 16) & 255},${(c >> 8) & 255},${c & 255},${alpha})`;\n  } else {\n    // console.error(\"Bad Hex:\", hex, \"Alpha: \", alpha);\n    return false;\n  }\n};\n\nconst isColor = color => {\n  if (hex2RGB(color)) return true;\n  else return false;\n};\n\nconst hex2RGB = hex => {\n  let c;\n  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {\n    c = hex.substring(1).split(\"\");\n    if (c.length === 3) {\n      c = [c[0], c[0], c[1], c[1], c[2], c[2]];\n    }\n    c = `0x${c.join(\"\")}`;\n    // eslint-disable-next-line no-bitwise\n    return { r: (c >> 16) & 255, g: (c >> 8) & 255, b: c & 255 };\n  } else {\n    return false;\n    // throw new Error(\"Bad Hex\");\n  }\n};\n\n// https://24ways.org/2010/calculating-color-contrast\n// https://www.w3.org/WAI/ER/WD-AERT/#color-contrast\nconst getContrast = hexColor => {\n  const rgb = hex2RGB(hexColor);\n  if (rgb) {\n    const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;\n    return yiq >= 128 ? \"#000000\" : \"#FFFFFF\";\n  } else return false;\n};\n\nconst variacion = (H, Z, value) => {\n  return (H / Z) * value;\n};\n\n// https://www.w3.org/TR/WCAG20/#relativeluminancedef\nconst colorBrightness = (color, value) => {\n  const rgb = hex2RGB(color);\n  const t = {};\n  if (rgb) {\n    if (value < 0) {\n      t.r = rgb.r - parseInt((rgb.r / 100) * -value, 10);\n      t.g = rgb.g - parseInt((rgb.g / 100) * -value, 10);\n      t.b = rgb.b - parseInt((rgb.b / 100) * -value, 10);\n    } else {\n      t.r = parseInt(variacion(255 - rgb.r, 100, value), 10) + rgb.r;\n      t.g = parseInt(variacion(255 - rgb.g, 100, value), 10) + rgb.g;\n      t.b = parseInt(variacion(255 - rgb.b, 100, value), 10) + rgb.b;\n    }\n    return rgb2Hex(t.r, t.g, t.b);\n  } else return false;\n};\n\n/**\n * Function to generate a colors palette.\n * This function return a array of colors\n * in the following format: [{color: 'string', textColor: 'string', name: 'string' }]\n * @param {string} hexColor Color in hexadecimal format\n * @param {string} name Name of color\n * @param {integer} cantShape Cant of variations\n */\nconst generatePalette = (hexColor, name, cantShape = 22) => {\n  const step = 100 / Math.ceil(cantShape / 2);\n  const startVal = step * Math.floor(cantShape / 2);\n  const colors = [];\n  if (isColor(hexColor)) {\n    for (let i = 0; i < cantShape; i += 1) {\n      const color = colorBrightness(hexColor, startVal - i * step);\n      const textColor = getContrast(color);\n      let tmpName;\n      if (i > cantShape / 2) tmpName = `${name}-${i}`;\n      else if (i === cantShape / 2) tmpName = name;\n      else tmpName = `${name}-${i + 1}`;\n      colors.push({\n        name: tmpName,\n        color,\n        textColor\n      });\n    }\n  }\n  return colors;\n};\n\nexport { generatePalette, getContrast, hex2RGB, hexToRGBA, rgb2Hex, isColor };\n","const subscribersMap = {};\nconst addedGlobalEventListeners = false;\n\n/**\n * Returns an element\n * @param {*} elementSelector\n */\nconst getElement = elementSelector => {\n  return document.querySelector(elementSelector);\n};\n\n/**\n * Iterate through the listeners list and try to resolve\n * the promise if they are visible in the viewport\n * TODO: Fix the viewport detection part\n */\nconst resolveListeners = () => {\n  const subscribersKeyList = Object.keys(subscribersMap);\n  if (subscribersKeyList.length > 0) {\n    for (let index = 0; index < subscribersKeyList.length; index++) {\n      const key = subscribersKeyList[index];\n      if (subscribersMap[key]) {\n        //Only full load component when is visible in viewport\n        if (isElementInViewport(getElement(key))) {\n          subscribersMap[key].resolve(true);\n          subscribersMap[key] = null;\n          delete subscribersMap[key];\n        }\n      }\n    }\n  }\n};\n\n/**\n * Helper function to simulate a setInterval but\n * wthout hurting the browser performance\n * @param {*} fn\n * @param {*} delay\n */\nconst requestInterval = (fn, delay) => {\n  const requestAnimFrame = (() => {\n    return (\n      window.requestAnimationFrame ||\n      function hello(callback) {\n        window.setTimeout(callback, 1000 / 60);\n      }\n    );\n  })();\n  let start = new Date().getTime();\n  const handle = {};\n  function loop() {\n    handle.value = requestAnimFrame(loop);\n    const current = new Date().getTime();\n    const delta = current - start;\n    if (delta >= delay) {\n      fn.call();\n      start = new Date().getTime();\n    }\n  }\n  handle.value = requestAnimFrame(loop);\n  return handle;\n};\n\n/**\n * Try to resolve all listeners once an\n * user wants to play with the components\n * this heuristics are very basic, we should\n * find better ones.\n */\nconst addGlobalEventListeners = () => {\n  window.addEventListener(\"scroll\", () => {\n    resolveListeners();\n  });\n\n  window.addEventListener(\"click\", () => {\n    resolveListeners();\n  });\n\n  window.addEventListener(\"mousemove\", () => {\n    resolveListeners();\n  });\n\n  window.addEventListener(\"keydown\", () => {\n    resolveListeners();\n  });\n\n  requestInterval(() => {\n    resolveListeners();\n  }, 2000);\n};\n\n/**\n * Returns the DocElement\n */\nconst getDocElement = () => {\n  if (window !== undefined) {\n    return window.document.documentElement;\n  }\n  return false;\n};\n\n/**\n * Obtaining the viewport height\n * @method _getViewportH\n * @return ConditionalExpression\n */\nconst getViewportH = () => {\n  const client = getDocElement.clientHeight;\n  const inner = window.innerHeight;\n  return client < inner ? inner : client;\n};\n\n/**\n * The offset of the element\n * @method _getOffset\n * @param {} el\n * @return ObjectExpression\n */\nconst getOffset = el => {\n  let offsetTop = 0;\n  let offsetLeft = 0;\n  /* eslint-disable */\n  do {\n    if (!isNaN(el.offsetTop)) {\n      offsetTop += el.offsetTop;\n    }\n    if (!isNaN(el.offsetLeft)) {\n      offsetLeft += el.offsetLeft;\n    }\n  } while ((el = el.offsetParent));\n  /* eslint-enable */\n  return {\n    top: offsetTop,\n    left: offsetLeft\n  };\n};\n\n/**\n * Return true if the element if visible in a viewport zone\n * @param {} el\n * @param {} h\n * @return LogicalExpression\n */\nconst isElementInViewport = el => {\n  if (canIExecuteClientCode() && el) {\n    let element = el;\n    let top = element.offsetTop;\n    let left = element.offsetLeft;\n    const width = element.offsetWidth;\n    const height = element.offsetHeight;\n\n    while (element.offsetParent) {\n      element = element.offsetParent;\n      top += element.offsetTop;\n      left += element.offsetLeft;\n    }\n\n    return (\n      top < window.pageYOffset + window.innerHeight &&\n      left < window.pageXOffset + window.innerWidth &&\n      top + height > window.pageYOffset &&\n      left + width > window.pageXOffset\n    );\n  }\n};\n\n/**\n * Returns a promise that resolves once the initial\n * browser processing is done. This allows to save\n * the users that uses low cpu devices and also have\n * awesome results in Google Page Speed\n * @param {*} elementSelector\n * @param {*} inSSR\n */\nconst canILiftOff = (elementSelector, inSSR = true) => {\n  return new Promise(resolve => {\n    // we don't need to wait in SSR\n    if (window === undefined && inSSR) {\n      resolve(true);\n    } else {\n      // adds global listeners that will trigger\n      // once a real person is interacting with the browser\n      if (!addedGlobalEventListeners) {\n        addGlobalEventListeners();\n      }\n      // saving all the component instances subscriptions\n      subscribersMap[elementSelector] = {\n        resolve\n      };\n    }\n  });\n};\n\nconst canIExecuteClientCode = () => {\n  return typeof window !== \"undefined\";\n};\n\nexport { canILiftOff, isElementInViewport, canIExecuteClientCode };\n","import { generatePalette, hexToRGBA, getContrast } from \"../Color\";\nimport { canIExecuteClientCode } from \"../canI\";\n\nconst generateTypographyStyles = (typography) => {\n  let style = \"\";\n  if (typography.css && typeof typography.css === \"string\") {\n    style += typography.css;\n  }\n  if (typography.fonts && typeof typography.fonts === \"object\") {\n    Object.keys(typography.fonts).map((fontName) => {\n      if (typeof typography.fonts[fontName] === \"object\") {\n        if (typography.fonts[fontName].preset)\n          style += `@import url('${typography.fonts[fontName].preset}');`;\n        else if (Array.isArray(typography.fonts[fontName].src)) {\n          style += `@font-face {\n            font-family: '${\n              typography.fonts[fontName].alias\n                ? typography.fonts[fontName].alias\n                : fontName\n            }';\n            ${\n              typography.fonts[fontName].fontStyle\n                ? `font-style:${typography.fonts[fontName].fontStyle};`\n                : \"\"\n            }\n            ${\n              typography.fonts[fontName].fontWeight\n                ? `font-weight:${typography.fonts[fontName].fontWeight};`\n                : \"\"\n            }\n            ${\n              typography.fonts[fontName].fontDisplay\n                ? `font-display:${typography.fonts[fontName].fontDisplay};`\n                : \"\"\n            }\n            src:`;\n\n          typography.fonts[fontName].local &&\n            typography.fonts[fontName].local.forEach((local) => {\n              style += `local('${local}'),`;\n            });\n          typography.fonts[fontName].src.forEach((fontSrc, index) => {\n            style += `url('${fontSrc.url}') format('${fontSrc.format}')${\n              index < typography.fonts[fontName].src.length - 1 ? \",\" : \"\"\n            }`;\n          });\n          style += \"}\";\n        }\n        style += `.fr-font-name-${fontName\n          .toLocaleLowerCase()\n          .replace(/ /g, \"-\")}{font-family: '${\n          typography.fonts[fontName].alias\n            ? typography.fonts[fontName].alias\n            : fontName\n        }', 'sans-serif'}`;\n      }\n      return fontName;\n    });\n  }\n  return style;\n};\n\nconst generateStylesPalette = (palette, item, i) => {\n  let hoverBgColor = item.color;\n  let gradientTo = item.color;\n  let gradientButtonToHover = item.color;\n  let gradientButtonFromActive = item.color;\n  let gradientButtonToActive = item.color;\n  let gradientButtonTextActive = item.textColor;\n  let hoverColor = item.textColor;\n  let activeBgColor = item.color;\n  let activeColor = item.textColor;\n\n  if (palette[i + 2]) gradientTo = palette[i + 2].color;\n  else if (palette[i - 2]) gradientTo = palette[i - 2].color;\n\n  if (palette[i + 1]) gradientButtonToHover = palette[i + 1].color;\n  else if (palette[i - 1]) gradientButtonToHover = palette[i - 1].color;\n\n  if (palette[i + 2]) gradientButtonFromActive = palette[i + 2].color;\n  else if (palette[i - 2]) gradientButtonFromActive = palette[i - 2].color;\n\n  if (palette[i + 4]) gradientButtonToActive = palette[i + 4].color;\n  else if (palette[i - 4]) gradientButtonToActive = palette[i - 4].color;\n\n  if (palette[i + 4]) gradientButtonTextActive = palette[i + 4].textColor;\n  else if (palette[i - 4]) gradientButtonTextActive = palette[i - 4].textColor;\n\n  if (palette[i + 2]) hoverBgColor = palette[i + 2].color;\n  else if (palette[i - 2]) hoverBgColor = palette[i - 2].color;\n\n  if (palette[i + 2]) hoverColor = palette[i + 2].textColor;\n  else if (palette[i - 2]) hoverColor = palette[i - 2].textColor;\n\n  if (palette[i + 3]) activeBgColor = palette[i + 3].color;\n  else if (palette[i - 3]) activeBgColor = palette[i - 3].color;\n\n  if (palette[i + 3]) activeColor = palette[i + 3].textColor;\n  else if (palette[i - 3]) activeColor = palette[i - 3].textColor;\n  const styles = `\n  button.fr-btn-${item.name}{\n    background-color:${item.color};\n    border-color:${item.color};\n    color:${item.textColor} !important;\n  }\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):focus,\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):hover{\n    background-color:${hoverBgColor};\n    border-color:${hoverBgColor};\n    color:${hoverColor}\n  }\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-${item.name}:not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled).fr-active,\n  button.fr-show > .fr-btn-outline-${item.name}.fr-dropdown-toggle{\n    color: ${activeColor};\n    background-color: ${activeBgColor};\n    border-color: ${activeBgColor};\n  }\n  .fr-border-${item.name}{border-color: ${item.color} !important;}\n  .fr-bg-${item.name}{background-color: ${item.color} !important;}\n  .gradient.fr-bg-${item.name},fr-btn-outline-${item.name}:hover,\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled){\n    background-image: linear-gradient(to bottom,${item.color},${gradientTo});\n  }\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):hover,\n  button.gradient.fr-btn-outline-${\n    item.name\n  }:not(:disabled):not(.fr-disabled):focus,\n  button.gradient.fr-btn-outline-${\n    item.name\n  }:not(:disabled):not(.fr-disabled):hover{\n    background-image: linear-gradient(to bottom,${\n      item.color\n    },${gradientButtonToHover});\n    color: ${item.textColor};\n  }\n  button.gradient.fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active,\n  button.gradient.fr-btn-outline-${\n    item.name\n  }:not(:disabled):not(.fr-disabled):active{\n    background-image: linear-gradient(to bottom,${gradientButtonFromActive},${gradientButtonToActive});\n    color: ${gradientButtonTextActive};\n  }\n  .fr-text-${item.name}{color: ${item.color} !important;}\n  .fr-btn-outline-${item.name}{\n    color: ${item.color};\n    border-color: ${item.color};\n  }\n  .fr-btn-outline-${item.name}:hover{\n    color: ${item.textColor};\n    background-color: ${item.color};\n    border-color: ${item.color};\n  }\n  .fr-btn-outline-${item.name}.fr-disabled,\n  .fr-btn-outline-${item.name}:disabled{\n    color: ${item.color} !important;\n    background-color: transparent !important;\n    border-color: ${item.color} !important;\n  }\n  .fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-${item.name}:not(:disabled):not(.fr-disabled):active:focus,\n  .fr-btn-outline-${item.name}:not(:disabled):not(.fr-disabled).fr-active:focus,\n  .fr-show > .fr-btn-outline-${item.name}.fr-dropdown-toggle:focus{\n    box-shadow: 0 0 0 0.2rem ${hexToRGBA(item.color)};\n  }\n  .fr-btn-${item.name}:focus, .fr-btn-outline-${item.name}:focus{\n    box-shadow: 0 0 0 0.2rem ${hexToRGBA(item.color)};\n  }\n  .fr-component-hover-${\n    item.name\n  }:hover:not(.fr-row):not([class^=fr-col]):not(button)>*{\n    color:${item.textColor} !important;\n  }\n  .fr-component-hover-${item.name}:hover:not(button){\n    background-color:${item.color} !important;\n    border-color:${hoverBgColor} !important;\n  }\n  .fr-icon.fr-i-${item.name} path{\n    fill: ${item.color};\n  }\n  .fr-btn-${item.name} .fr-icon path{\n    fill: ${item.textColor};\n  }\n`;\n  return styles;\n};\n\nconst initTheme = (theme) => {\n  const generatedStyles = [];\n  const themeToken = {\n    palette: {},\n    designTokens: theme.designTokens || {}\n  };\n\n  let outputFields = [];\n  if (theme.config && theme.config.outputFields) {\n    outputFields = theme.config.outputFields;\n  }\n  if (outputFields.includes(\"colors\")) themeToken.colors = theme.colors;\n  if (outputFields.includes(\"typography\"))\n    themeToken.typography = theme.typography;\n  if (theme) {\n    if (theme.typography) {\n      generatedStyles.push(generateTypographyStyles(theme.typography));\n    }\n    if (theme.colors) {\n      generatedStyles.push([\n        `button.fr-btn:disabled{\n          background-color:${\n            theme.components &&\n            theme.components.button &&\n            theme.components.button.disabled &&\n            theme.components.button.disabled.bgColor\n              ? theme.components.button.disabled.bgColor\n              : \"#d4d4d4\"\n          };\n          border-color:${\n            theme.components &&\n            theme.components.button &&\n            theme.components.button.disabled &&\n            theme.components.button.disabled.bgColor\n              ? theme.components.button.disabled.bgColor\n              : \"#d4d4d4\"\n          };\n          color:${\n            theme.components &&\n            theme.components.button &&\n            theme.components.button.disabled &&\n            theme.components.button.disabled.bgColor\n              ? theme.components.button.disabled.bgColor\n              : \"#afafaf\"\n          }\n        }\n    `\n      ]);\n      const themeColorsKeys = Object.keys(theme.colors);\n      for (let index = 0; index < themeColorsKeys.length; index += 1) {\n        const colorName = themeColorsKeys[index];\n        const colorValue = theme.colors[themeColorsKeys[index]];\n        if (colorValue !== \"none\") {\n          // Adding base color to palette\n          themeToken.palette[`${colorName}`] = colorValue;\n          const palette = generatePalette(colorValue, colorName);\n          if (theme.config && theme.config.generatePalette) {\n            palette.forEach((item, i) => {\n              // Adding color variations to the palette\n              themeToken.palette[`${item.name}`] = item.color;\n              // Avoiding executing unnecessary code that is not needed in the SSR\n              if (canIExecuteClientCode()) {\n                const styles = generateStylesPalette(palette, item, i);\n                generatedStyles.push(styles.replace(/\\n. |\\r/g, \"\"));\n              }\n            });\n          } else {\n            if (canIExecuteClientCode()) {\n              const styles = generateStylesPalette(\n                palette,\n                {\n                  color: colorValue,\n                  name: colorName,\n                  textColor: getContrast(colorValue)\n                },\n                11\n              );\n              generatedStyles.push(styles.replace(/\\n. |\\r/g, \"\"));\n            }\n          }\n        }\n      }\n      if (theme.colors.primary) {\n        const primaryHover = hexToRGBA(theme.colors.primary, 0.25);\n        generatedStyles.push(\n          `.fr-focus:focus, .fr-form-control:focus, .fr-focus\\\\:focus{box-shadow: 0 0 0 0.2rem ${primaryHover};outline: 0;}`\n        );\n      }\n    }\n    if (canIExecuteClientCode() && typeof document != \"undefined\") {\n      const element = document.getElementById(\"frTheming\");\n      if (element) {\n        element.innerHTML = generatedStyles.join(\" \");\n      } else {\n        const themeStyleNode = `${generatedStyles.join(\" \")}`;\n\n        const body = document.body || document.getElementsByTagName(\"body\")[0];\n        const style = document.createElement(\"style\");\n\n        style.type = \"text/css\";\n        style.id = \"frTheming\";\n        if (style.styleSheet) {\n          // This is required for IE8 and below.\n          style.styleSheet.cssText = themeStyleNode;\n        } else {\n          style.appendChild(document.createTextNode(themeStyleNode));\n        }\n        body.appendChild(style);\n      }\n    }\n  }\n  return themeToken;\n};\n\nexport { initTheme };\n","import { initTheme } from \"./ThemeBuilder\";\nif(typeof window !== \"undefined\"){\n    if(!window.FR) window.FR = {};\n    window.FR.initTheme=initTheme;\n}"],"names":["const","componentToHex","c","hex","toString","length","hexToRGBA","alpha","test","substring","split","join","hex2RGB","r","g","b","getContrast","hexColor","rgb","variacion","H","Z","value","colorBrightness","color","t","parseInt","generatePalette","name","cantShape","step","Math","ceil","startVal","floor","colors","let","i","textColor","push","canIExecuteClientCode","window","generateStylesPalette","palette","item","hoverBgColor","gradientTo","gradientButtonToHover","gradientButtonFromActive","gradientButtonToActive","gradientButtonTextActive","hoverColor","activeBgColor","activeColor","FR","initTheme","theme","generatedStyles","themeToken","designTokens","outputFields","config","includes","typography","style","css","fonts","Object","keys","map","fontName","preset","Array","isArray","src","alias","fontStyle","fontWeight","fontDisplay","local","forEach","fontSrc","index","toLocaleLowerCase","replace","generateTypographyStyles","components","button","disabled","bgColor","themeColorsKeys","colorName","colorValue","styles","primary","primaryHover","document","element","getElementById","innerHTML","themeStyleNode","body","getElementsByTagName","createElement","type","id","styleSheet","cssText","appendChild","createTextNode"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@front10/helpers",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "description": "Helpers for front10 components",
   "source": "src/index.js",
   "main": "dist/front10-helpers.js",