@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/cjs/f-checkbox-41864e53.js

@@ -0,0 +1,29 @@
+'use strict';
+
+const index = require('./index-8f2f4159.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)));
+};
+
+exports.FCheckbox = FCheckbox;

package/dist/cjs/f-chip-8957940b.js

@@ -0,0 +1,133 @@
+'use strict';
+
+const index = require('./index-8f2f4159.js');
+const fImage = require('./f-image-e16fe10d.js');
+const kupManager = require('./kup-manager-c63f4fb9.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";
+})(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;
+}
+
+exports.FChip = FChip;

package/dist/cjs/f-image-e16fe10d.js

@@ -0,0 +1,115 @@
+'use strict';
+
+const index = require('./index-8f2f4159.js');
+const kupManager = require('./kup-manager-c63f4fb9.js');
+
+/**
+ * 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);
+}
+
+exports.FImage = FImage;