@sme.up/ketchup 8.0.2 → 8.2.0

package/dist/cjs/{f-checkbox-1148e791.js → f-checkbox-cff77b2c.js}

@@ -1,29 +1,29 @@
 'use strict';
 
-const index = require('./index-1f177abc.js');
+const index = require('./index-a9a3b467.js');
 
-/*-------------------------------------------------*/
-/*                C o m p o n e n t                */
-/*-------------------------------------------------*/
-const FCheckbox = (props) => {
-  const indeterminateAttr = {
-    'data-indeterminate': props.indeterminate ? true : false,
-  };
-  const classObj = {
-    checkbox: true,
-    'checkbox--checked': props.checked && !props.indeterminate ? true : false,
-    'checkbox--disabled': props.disabled ? true : false,
-    'checkbox--indeterminate': props.indeterminate ? true : false,
-  };
-  return (index.h("div", Object.assign({ class: `f-checkbox ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
-    index.h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
-      index.h("div", { class: classObj },
-        index.h("input", Object.assign({ type: "checkbox", class: "checkbox__native-control", checked: props.checked, disabled: props.disabled, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus }, indeterminateAttr, { value: props.checked ? 'on' : 'off' })),
-        index.h("div", { class: "checkbox__background", onClick: props.onChange },
-          index.h("svg", { class: "checkbox__checkmark", viewBox: "0 0 24 24" },
-            index.h("path", { class: "checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
-          index.h("div", { class: "checkbox__mixedmark" }))),
-      props.label ? index.h("label", null, props.label) : undefined)));
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FCheckbox = (props) => {
+  const indeterminateAttr = {
+    'data-indeterminate': props.indeterminate ? true : false,
+  };
+  const classObj = {
+    checkbox: true,
+    'checkbox--checked': props.checked && !props.indeterminate ? true : false,
+    'checkbox--disabled': props.disabled ? true : false,
+    'checkbox--indeterminate': props.indeterminate ? true : false,
+  };
+  return (index.h("div", Object.assign({ class: `f-checkbox ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
+    index.h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
+      index.h("div", { class: classObj },
+        index.h("input", Object.assign({ type: "checkbox", class: "checkbox__native-control", checked: props.checked, disabled: props.disabled, onBlur: props.onBlur, onChange: props.onChange, onFocus: props.onFocus }, indeterminateAttr, { value: props.checked ? 'on' : 'off' })),
+        index.h("div", { class: "checkbox__background", onClick: props.onChange },
+          index.h("svg", { class: "checkbox__checkmark", viewBox: "0 0 24 24" },
+            index.h("path", { class: "checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
+          index.h("div", { class: "checkbox__mixedmark" }))),
+      props.label ? index.h("label", null, props.label) : undefined)));
 };
 
 exports.FCheckbox = FCheckbox;

package/dist/cjs/{f-chip-2249b386.js → f-chip-318863df.js}

@@ -1,133 +1,133 @@
 'use strict';
 
-const index = require('./index-1f177abc.js');
-const fImage = require('./f-image-47d74999.js');
-const kupManager = require('./kup-manager-85b2a756.js');
+const index = require('./index-a9a3b467.js');
+const fImage = require('./f-image-f10144e9.js');
+const kupManager = require('./kup-manager-7747decd.js');
 
-/**
- * Types of the f-chip component.
- * @enum {string}
- * @property {string} CHOICE - Only 1 chip may be selected at a time.
- * @property {string} FILTER - Multiple chips may be selected at a time.
- * @property {string} INPUT - Chips can be deleted by clicking on the rightmost icon.
- * @property {string} STANDARD - Standard chip set.
- */
-exports.FChipType = void 0;
-(function (FChipType) {
-  FChipType["CHOICE"] = "choice";
-  FChipType["FILTER"] = "filter";
-  FChipType["INPUT"] = "input";
-  FChipType["STANDARD"] = "standard";
+/**
+ * Types of the f-chip component.
+ * @enum {string}
+ * @property {string} CHOICE - Only 1 chip may be selected at a time.
+ * @property {string} FILTER - Multiple chips may be selected at a time.
+ * @property {string} INPUT - Chips can be deleted by clicking on the rightmost icon.
+ * @property {string} STANDARD - Standard chip set.
+ */
+exports.FChipType = void 0;
+(function (FChipType) {
+  FChipType["CHOICE"] = "choice";
+  FChipType["FILTER"] = "filter";
+  FChipType["INPUT"] = "input";
+  FChipType["STANDARD"] = "standard";
 })(exports.FChipType || (exports.FChipType = {}));
 
-const dom = document.documentElement;
-/*-------------------------------------------------*/
-/*                C o m p o n e n t                */
-/*-------------------------------------------------*/
-const FChip = (props) => {
-  if (!props.type) {
-    props.type = exports.FChipType.STANDARD;
-  }
-  const isChoice = props.type.toLowerCase() === exports.FChipType.CHOICE;
-  const isFilter = props.type.toLowerCase() === exports.FChipType.FILTER;
-  const isInput = props.type.toLowerCase() === exports.FChipType.INPUT;
-  const classObj = {
-    'chip-set': true,
-    'chip-set--choice': isChoice ? true : false,
-    'chip-set--filter': isFilter ? true : false,
-    'chip-set--input': isInput ? true : false,
-  };
-  return (index.h("div", Object.assign({ class: `f-chip ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
-    index.h("div", { class: classObj, role: "grid" }, createChipList(props, isChoice, isFilter, isInput))));
-};
-/*-------------------------------------------------*/
-/*                  M e t h o d s                  */
-/*-------------------------------------------------*/
-function createChipList(props, isChoice, isFilter, isInput) {
-  const chipList = [];
-  for (let i = 0; props.data && i < props.data.length; i++) {
-    const chipGroup = [];
-    recursive(props.data[i], 0);
-    chipList.push(index.h("div", { class: "chip-set__item" }, ...chipGroup));
-    function recursive(chip, indent) {
-      const hasChildren = !!(chip.children && chip.children.length > 0);
-      const showChildren = !!(hasChildren && chip.isExpanded);
-      const indentStyle = {
-        ['--kup_chip_indent_offset']: indent.toString(),
-      };
-      chipGroup.push(index.h("div", { class: `chip-set__wrapper ${hasChildren && !showChildren
-          ? 'chip-set__wrapper--hidden-children'
-          : ''}` },
-        index.h("div", { class: "chip-set__indent", style: indentStyle }),
-        hasChildren ? (index.h(fImage.FImage, { onClick: props.onExpansionClick &&
-            props.onExpansionClick[i]
-            ? props.onExpansionClick[i].bind(props.onExpansionClick[i], chip)
-            : null, resource: `${kupManager.KupThemeIconValues.DROPDOWN}`, sizeX: "18px", sizeY: "18px", title: dom.ketchup.language.translate(kupManager.KupLanguageGeneric.EXPAND) +
-            '/' +
-            dom.ketchup.language.translate(kupManager.KupLanguageGeneric.COLLAPSE) +
-            ' (CTRL + Click)', wrapperClass: "dropdown-icon" })) : indent ? (index.h(fImage.FImage, { resource: "blank", sizeX: "18px", sizeY: "18px", wrapperClass: "dropdown-icon" })) : null,
-        createChip(chip)));
-      if (showChildren) {
-        for (let index = 0; index < chip.children.length; index++) {
-          if (chip.children[index]) {
-            recursive(chip.children[index], indent + 1);
-          }
-        }
-      }
-    }
-    function createChip(chip) {
-      const onlyIcon = !!(chip.icon && !chip.value);
-      let componentClass = `chip ${onlyIcon ? 'chip--only-icon' : ''}`;
-      let iconEl = [];
-      let iconClass = 'chip__icon chip__icon--leading';
-      if (isFilter || isChoice) {
-        if (chip.checked) {
-          componentClass += ' chip--selected';
-          if (isFilter) {
-            iconClass += ' chip__icon--leading-hidden';
-          }
-        }
-      }
-      if (chip.icon) {
-        const p = {
-          color: isChoice && chip.checked
-            ? `var(${kupManager.KupThemeColorValues.PRIMARY})`
-            : `var(${kupManager.KupThemeColorValues.TEXT})`,
-          resource: chip.icon,
-          sizeX: '18px',
-          sizeY: '18px',
-          wrapperClass: iconClass,
-        };
-        iconEl.push(index.h(fImage.FImage, Object.assign({}, p)));
-      }
-      if (isFilter) {
-        iconEl.push(index.h("span", { class: "chip__checkmark" },
-          index.h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" },
-            index.h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
-      }
-      return (index.h("div", { class: componentClass, "data-value": chip.id, onClick: props.onClick && props.onClick[i]
-          ? props.onClick[i].bind(props.onClick[i], chip)
-          : null, role: "row", title: chip.title ? chip.title : '' },
-        index.h("span", { class: "chip-set__indent" }),
-        iconEl,
-        index.h("span", { role: "gridcell" },
-          index.h("span", { role: "button", tabindex: i, class: "chip__primary-action", 
-            // @ts-ignore
-            value: chip.id, checked: chip.checked, onBlur: props.onBlur && props.onBlur[i]
-              ? props.onBlur[i].bind(props.onBlur[i], chip)
-              : null, onFocus: props.onFocus && props.onFocus[i]
-              ? props.onFocus[i].bind(props.onFocus[i], chip)
-              : null },
-            index.h("span", { class: "chip__text" }, props.displayId
-              ? chip.id + ' - ' + chip.value
-              : chip.value))),
-        isInput ? (index.h("span", { role: "gridcell" },
-          index.h("span", { tabindex: "-1", class: `kup-icon chip__icon ${kupManager.KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
-              ? props.onIconClick[i].bind(props.onIconClick[i], chip)
-              : null }))) : null));
-    }
-  }
-  return chipList;
+const dom = document.documentElement;
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FChip = (props) => {
+  if (!props.type) {
+    props.type = exports.FChipType.STANDARD;
+  }
+  const isChoice = props.type.toLowerCase() === exports.FChipType.CHOICE;
+  const isFilter = props.type.toLowerCase() === exports.FChipType.FILTER;
+  const isInput = props.type.toLowerCase() === exports.FChipType.INPUT;
+  const classObj = {
+    'chip-set': true,
+    'chip-set--choice': isChoice ? true : false,
+    'chip-set--filter': isFilter ? true : false,
+    'chip-set--input': isInput ? true : false,
+  };
+  return (index.h("div", Object.assign({ class: `f-chip ${props.danger ? 'kup-danger' : ''} ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
+    index.h("div", { class: classObj, role: "grid" }, createChipList(props, isChoice, isFilter, isInput))));
+};
+/*-------------------------------------------------*/
+/*                  M e t h o d s                  */
+/*-------------------------------------------------*/
+function createChipList(props, isChoice, isFilter, isInput) {
+  const chipList = [];
+  for (let i = 0; props.data && i < props.data.length; i++) {
+    const chipGroup = [];
+    recursive(props.data[i], 0);
+    chipList.push(index.h("div", { class: "chip-set__item" }, ...chipGroup));
+    function recursive(chip, indent) {
+      const hasChildren = !!(chip.children && chip.children.length > 0);
+      const showChildren = !!(hasChildren && chip.isExpanded);
+      const indentStyle = {
+        ['--kup_chip_indent_offset']: indent.toString(),
+      };
+      chipGroup.push(index.h("div", { class: `chip-set__wrapper ${hasChildren && !showChildren
+          ? 'chip-set__wrapper--hidden-children'
+          : ''}` },
+        index.h("div", { class: "chip-set__indent", style: indentStyle }),
+        hasChildren ? (index.h(fImage.FImage, { onClick: props.onExpansionClick &&
+            props.onExpansionClick[i]
+            ? props.onExpansionClick[i].bind(props.onExpansionClick[i], chip)
+            : null, resource: `${kupManager.KupThemeIconValues.DROPDOWN}`, sizeX: "18px", sizeY: "18px", title: dom.ketchup.language.translate(kupManager.KupLanguageGeneric.EXPAND) +
+            '/' +
+            dom.ketchup.language.translate(kupManager.KupLanguageGeneric.COLLAPSE) +
+            ' (CTRL + Click)', wrapperClass: "dropdown-icon" })) : indent ? (index.h(fImage.FImage, { resource: "blank", sizeX: "18px", sizeY: "18px", wrapperClass: "dropdown-icon" })) : null,
+        createChip(chip)));
+      if (showChildren) {
+        for (let index = 0; index < chip.children.length; index++) {
+          if (chip.children[index]) {
+            recursive(chip.children[index], indent + 1);
+          }
+        }
+      }
+    }
+    function createChip(chip) {
+      const onlyIcon = !!(chip.icon && !chip.value);
+      let componentClass = `chip ${onlyIcon ? 'chip--only-icon' : ''}`;
+      let iconEl = [];
+      let iconClass = 'chip__icon chip__icon--leading';
+      if (isFilter || isChoice) {
+        if (chip.checked) {
+          componentClass += ' chip--selected';
+          if (isFilter) {
+            iconClass += ' chip__icon--leading-hidden';
+          }
+        }
+      }
+      if (chip.icon) {
+        const p = {
+          color: isChoice && chip.checked
+            ? `var(${kupManager.KupThemeColorValues.PRIMARY})`
+            : `var(${kupManager.KupThemeColorValues.TEXT})`,
+          resource: chip.icon,
+          sizeX: '18px',
+          sizeY: '18px',
+          wrapperClass: iconClass,
+        };
+        iconEl.push(index.h(fImage.FImage, Object.assign({}, p)));
+      }
+      if (isFilter) {
+        iconEl.push(index.h("span", { class: "chip__checkmark" },
+          index.h("svg", { class: "chip__checkmark-svg", viewBox: "-2 -3 30 30" },
+            index.h("path", { class: "chip__checkmark-path", fill: "none", stroke: "black", d: "M1.73,12.91 8.1,19.28 22.79,4.59" }))));
+      }
+      return (index.h("div", { class: componentClass, "data-value": chip.id, onClick: props.onClick && props.onClick[i]
+          ? props.onClick[i].bind(props.onClick[i], chip)
+          : null, role: "row", title: chip.title ? chip.title : '' },
+        index.h("span", { class: "chip-set__indent" }),
+        iconEl,
+        index.h("span", { role: "gridcell" },
+          index.h("span", { role: "button", tabindex: i, class: "chip__primary-action", 
+            // @ts-ignore
+            value: chip.id, checked: chip.checked, onBlur: props.onBlur && props.onBlur[i]
+              ? props.onBlur[i].bind(props.onBlur[i], chip)
+              : null, onFocus: props.onFocus && props.onFocus[i]
+              ? props.onFocus[i].bind(props.onFocus[i], chip)
+              : null },
+            index.h("span", { class: "chip__text" }, props.displayId
+              ? chip.id + ' - ' + chip.value
+              : chip.value))),
+        isInput ? (index.h("span", { role: "gridcell" },
+          index.h("span", { tabindex: "-1", class: `kup-icon chip__icon ${kupManager.KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onIconClick && props.onIconClick[i]
+              ? props.onIconClick[i].bind(props.onIconClick[i], chip)
+              : null }))) : null));
+    }
+  }
+  return chipList;
 }
 
 exports.FChip = FChip;

package/dist/cjs/{f-image-47d74999.js → f-image-f10144e9.js}

@@ -1,115 +1,115 @@
 'use strict';
 
-const index = require('./index-1f177abc.js');
-const kupManager = require('./kup-manager-85b2a756.js');
+const index = require('./index-a9a3b467.js');
+const kupManager = require('./kup-manager-7747decd.js');
 
-/**
- * The type of a CSS step in CSS-drawing mode.
- * @property {string} bar - Draws a bar.
- */
-var FImageShape;
-(function (FImageShape) {
-  FImageShape["BAR"] = "bar";
+/**
+ * The type of a CSS step in CSS-drawing mode.
+ * @property {string} bar - Draws a bar.
+ */
+var FImageShape;
+(function (FImageShape) {
+  FImageShape["BAR"] = "bar";
 })(FImageShape || (FImageShape = {}));
 
-/*-------------------------------------------------*/
-/*                C o m p o n e n t                */
-/*-------------------------------------------------*/
-const FImage = (props) => {
-  let el;
-  let style;
-  if (props.resource) {
-    if (props.resource.indexOf('.') > -1 ||
-      props.resource.indexOf('/') > -1 ||
-      props.resource.indexOf('\\') > -1) {
-      style = {
-        '--kup_image_height': props.sizeY ? props.sizeY : 'auto',
-        '--kup_image_width': props.sizeX ? props.sizeX : '100%',
-      };
-      el = createImage(props);
-    }
-    else {
-      style = {
-        '--kup_image_height': props.sizeY ? props.sizeY : '100%',
-        '--kup_image_width': props.sizeX ? props.sizeX : '100%',
-      };
-      el = createIcon(props);
-    }
-  }
-  else if (props.data) {
-    style = {
-      '--kup_image_height': props.sizeY ? props.sizeY : '100%',
-      '--kup_image_width': props.sizeX ? props.sizeX : '100%',
-    };
-    el = createBar(props.data);
-  }
-  const badgeCollection = [];
-  if (props.badgeData) {
-    for (let index$1 = 0; index$1 < props.badgeData.length; index$1++) {
-      badgeCollection.push(index.h("kup-badge", Object.assign({}, props.badgeData[index$1])));
-    }
-  }
-  return (index.h("div", Object.assign({ class: `f-image ${props.wrapperClass ? props.wrapperClass : ''} ${props.fit ? 'kup-fit' : ''}` }, props.dataSet, { id: props.id, style: style, title: props.title, onClick: props.onClick }),
-    el,
-    ...badgeCollection));
-};
-/*-------------------------------------------------*/
-/*                  M e t h o d s                  */
-/*-------------------------------------------------*/
-function createIcon(props) {
-  const classObj = {
-    'f-image__icon': true,
-  };
-  const style = {
-    background: props.color
-      ? props.color
-      : `var(${kupManager.KupThemeColorValues.ICON})`,
-  };
-  if (props.resource.indexOf('--kup') > -1) {
-    let themeIcon = props.resource.replace('--', '');
-    classObj['kup-icon'] = true;
-    classObj[themeIcon] = true;
-  }
-  else {
-    const path = index.getAssetPath(`./assets/svg/${props.resource}.svg`);
-    style.mask = `url('${path}') no-repeat center`;
-    style.webkitMask = `url('${path}') no-repeat center`;
-  }
-  return index.h("div", { class: classObj, style: style });
-}
-function createImage(props) {
-  return index.h("img", { onLoad: props.onLoad, src: props.resource });
-}
-function createBar(data) {
-  const steps = [];
-  let leftProgression = 0;
-  for (let i = 0; i < data.length; i++) {
-    let drawStep = undefined;
-    if (!data[i].shape) {
-      data[i].shape = FImageShape.BAR;
-    }
-    if (!data[i].color) {
-      data[i].color = 'transparent';
-    }
-    if (!data[i].height) {
-      data[i].height = '100%';
-    }
-    if (!data[i].width) {
-      data[i].width = '100%';
-    }
-    const stepId = 'step-' + i;
-    const stepClass = 'css-step bottom-aligned';
-    const stepStyle = {
-      backgroundColor: data[i].color,
-      left: leftProgression + '%',
-      height: data[i].height,
-      width: data[i].width,
-    };
-    leftProgression += parseFloat(data[i].width);
-    drawStep = (index.h("span", { id: stepId, class: stepClass, style: stepStyle }));
-    steps.push(drawStep);
-  }
-  return index.h("div", { class: "f-image__css" }, steps);
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FImage = (props) => {
+  let el;
+  let style;
+  if (props.resource) {
+    if (props.resource.indexOf('.') > -1 ||
+      props.resource.indexOf('/') > -1 ||
+      props.resource.indexOf('\\') > -1) {
+      style = {
+        '--kup_image_height': props.sizeY ? props.sizeY : 'auto',
+        '--kup_image_width': props.sizeX ? props.sizeX : '100%',
+      };
+      el = createImage(props);
+    }
+    else {
+      style = {
+        '--kup_image_height': props.sizeY ? props.sizeY : '100%',
+        '--kup_image_width': props.sizeX ? props.sizeX : '100%',
+      };
+      el = createIcon(props);
+    }
+  }
+  else if (props.data) {
+    style = {
+      '--kup_image_height': props.sizeY ? props.sizeY : '100%',
+      '--kup_image_width': props.sizeX ? props.sizeX : '100%',
+    };
+    el = createBar(props.data);
+  }
+  const badgeCollection = [];
+  if (props.badgeData) {
+    for (let index$1 = 0; index$1 < props.badgeData.length; index$1++) {
+      badgeCollection.push(index.h("kup-badge", Object.assign({}, props.badgeData[index$1])));
+    }
+  }
+  return (index.h("div", Object.assign({ class: `f-image ${props.wrapperClass ? props.wrapperClass : ''} ${props.fit ? 'kup-fit' : ''}` }, props.dataSet, { id: props.id, style: style, title: props.title, onClick: props.onClick }),
+    el,
+    ...badgeCollection));
+};
+/*-------------------------------------------------*/
+/*                  M e t h o d s                  */
+/*-------------------------------------------------*/
+function createIcon(props) {
+  const classObj = {
+    'f-image__icon': true,
+  };
+  const style = {
+    background: props.color
+      ? props.color
+      : `var(${kupManager.KupThemeColorValues.ICON})`,
+  };
+  if (props.resource.indexOf('--kup') > -1) {
+    let themeIcon = props.resource.replace('--', '');
+    classObj['kup-icon'] = true;
+    classObj[themeIcon] = true;
+  }
+  else {
+    const path = index.getAssetPath(`./assets/svg/${props.resource}.svg`);
+    style.mask = `url('${path}') no-repeat center`;
+    style.webkitMask = `url('${path}') no-repeat center`;
+  }
+  return index.h("div", { class: classObj, style: style });
+}
+function createImage(props) {
+  return index.h("img", { onLoad: props.onLoad, src: props.resource });
+}
+function createBar(data) {
+  const steps = [];
+  let leftProgression = 0;
+  for (let i = 0; i < data.length; i++) {
+    let drawStep = undefined;
+    if (!data[i].shape) {
+      data[i].shape = FImageShape.BAR;
+    }
+    if (!data[i].color) {
+      data[i].color = 'transparent';
+    }
+    if (!data[i].height) {
+      data[i].height = '100%';
+    }
+    if (!data[i].width) {
+      data[i].width = '100%';
+    }
+    const stepId = 'step-' + i;
+    const stepClass = 'css-step bottom-aligned';
+    const stepStyle = {
+      backgroundColor: data[i].color,
+      left: leftProgression + '%',
+      height: data[i].height,
+      width: data[i].width,
+    };
+    leftProgression += parseFloat(data[i].width);
+    drawStep = (index.h("span", { id: stepId, class: stepClass, style: stepStyle }));
+    steps.push(drawStep);
+  }
+  return index.h("div", { class: "f-image__css" }, steps);
 }
 
 exports.FImage = FImage;