@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/cjs/bar.helpers-f46a5a83.js

@@ -0,0 +1,372 @@
+'use strict';
+
+function isKeyboardEvent(event) {
+    return event.key !== undefined;
+}
+function removeHiddenTasks(tasks) {
+    const groupedTasks = tasks.filter((t) => t.hideChildren && t.type === 'project');
+    if (groupedTasks.length > 0) {
+        for (let i = 0; groupedTasks.length > i; i++) {
+            const groupedTask = groupedTasks[i];
+            const children = getChildren(tasks, groupedTask);
+            tasks = tasks.filter((t) => children.indexOf(t) === -1);
+        }
+    }
+    return tasks;
+}
+function getChildren(taskList, task) {
+    let tasks = [];
+    if (task.type !== 'project') {
+        tasks = taskList.filter((t) => t.dependencies && t.dependencies.indexOf(task.id) !== -1);
+    }
+    else {
+        tasks = taskList.filter((t) => t.project && t.project === task.id);
+    }
+    var taskChildren = [];
+    tasks.forEach((t) => {
+        taskChildren.push(...getChildren(taskList, t));
+    });
+    tasks = tasks.concat(tasks, taskChildren);
+    return tasks;
+}
+const sortTasks = (taskA, taskB) => {
+    const orderA = taskA.displayOrder || Number.MAX_VALUE;
+    const orderB = taskB.displayOrder || Number.MAX_VALUE;
+    if (orderA > orderB) {
+        return 1;
+    }
+    else if (orderA < orderB) {
+        return -1;
+    }
+    else {
+        return 0;
+    }
+};
+
+const convertToBarTasks = (tasks, dates, columnWidth, rowHeight, taskHeight, projectHeight, timelineHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates) => {
+    let barTasks = tasks.map((t, i) => {
+        return convertToBarTask(t, i, dates, columnWidth, rowHeight, taskHeight, projectHeight, timelineHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates);
+    });
+    // set dependencies
+    barTasks = barTasks.map((task) => {
+        const dependencies = task.dependencies || [];
+        for (let j = 0; j < dependencies.length; j++) {
+            const dependence = barTasks.findIndex((value) => value.id === dependencies[j]);
+            if (dependence !== -1)
+                barTasks[dependence].barChildren.push(task);
+        }
+        return task;
+    });
+    return barTasks;
+};
+const convertToBarTask = (task, index, dates, columnWidth, rowHeight, taskHeight, projectHeight, timelineHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates) => {
+    let barTask;
+    switch (task.type) {
+        case 'timeline':
+            barTask = convertToTimeline(task, index, dates, columnWidth, rowHeight, timelineHeight, barCornerRadius, handleWidth);
+            break;
+        case 'project':
+            barTask = convertToBar(task, index, dates, columnWidth, rowHeight, projectHeight, barCornerRadius, handleWidth, rtl, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, showSecondaryDates);
+            break;
+        default:
+            barTask = convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, showSecondaryDates);
+            break;
+    }
+    return barTask;
+};
+function computeTypeAndXs(start, end, type, dates, columnWidth, handleWidth, rtl) {
+    let x1;
+    let x2;
+    if (rtl) {
+        x2 = taskXCoordinateRTL(start, dates, columnWidth);
+        x1 = taskXCoordinateRTL(end, dates, columnWidth);
+    }
+    else {
+        x1 = taskXCoordinate(start, dates, columnWidth);
+        x2 = taskXCoordinate(end, dates, columnWidth);
+    }
+    let typeInternal = type;
+    if (typeInternal === 'task' && x2 - x1 < handleWidth * 2) {
+        typeInternal = 'smalltask';
+        x2 = x1 + handleWidth * 2;
+    }
+    return { x1, x2, typeInternal };
+}
+const convertToBar = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, showSecondaryDates) => {
+    const { x1, x2, typeInternal } = computeTypeAndXs(task.start, task.end, task.type, dates, columnWidth, handleWidth, rtl);
+    const { x1: x1secondary, x2: x2secondary } = showSecondaryDates && task.secondaryStart && task.secondaryEnd
+        ? computeTypeAndXs(task.secondaryStart, task.secondaryEnd, task.type, dates, columnWidth, handleWidth, rtl)
+        : { x1: undefined, x2: undefined };
+    const [progressWidth, progressX] = progressWithByParams(x1, x2, task.progress, rtl);
+    const y = taskYCoordinate(index, rowHeight, taskHeight);
+    const hideChildren = task.type === 'project' ? task.hideChildren : undefined;
+    const styles = Object.assign({ backgroundColor: barBackgroundColor, backgroundSelectedColor: barBackgroundSelectedColor, progressColor: barProgressColor, progressSelectedColor: barProgressSelectedColor }, task.styles);
+    return Object.assign(Object.assign({}, task), { typeInternal,
+        x1,
+        x2,
+        x1secondary,
+        x2secondary,
+        y,
+        index,
+        progressX,
+        progressWidth,
+        barCornerRadius,
+        handleWidth,
+        hideChildren, height: taskHeight, barChildren: [], styles });
+};
+const defaultStyles = (styles) => {
+    var _a, _b, _c, _d;
+    return ({
+        backgroundColor: (_a = styles === null || styles === void 0 ? void 0 : styles.backgroundColor) !== null && _a !== void 0 ? _a : '#deadbeef',
+        backgroundSelectedColor: (_b = styles === null || styles === void 0 ? void 0 : styles.backgroundSelectedColor) !== null && _b !== void 0 ? _b : '#cafebabe',
+        progressColor: (_c = styles === null || styles === void 0 ? void 0 : styles.progressColor) !== null && _c !== void 0 ? _c : '#deadbeef',
+        progressSelectedColor: (_d = styles === null || styles === void 0 ? void 0 : styles.progressSelectedColor) !== null && _d !== void 0 ? _d : '#cafebabe',
+    });
+};
+const convertToTimeline = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth) => {
+    var _a;
+    const y = taskYCoordinate(index, rowHeight, taskHeight);
+    function convertFrameToTask(frame, j) {
+        var _a, _b;
+        const { x1, x2 } = computeTypeAndXs(frame.start, frame.end, 'task', dates, columnWidth, handleWidth, false);
+        const n = +frame.start;
+        const baseColor = frame.backgroundColor;
+        const selColor = (_a = frame.backgroundSelectedColor) !== null && _a !== void 0 ? _a : baseColor;
+        return {
+            barChildren: [],
+            barCornerRadius: 0,
+            start: frame.start,
+            end: frame.end,
+            handleWidth: 0,
+            height: taskHeight,
+            id: `Frame-${task.id}-${j}`,
+            index: n,
+            name: '',
+            valuesToShow: task.valuesToShow,
+            progress: 0,
+            progressWidth: 0,
+            progressX: 0,
+            styles: {
+                backgroundColor: baseColor,
+                backgroundSelectedColor: selColor,
+                progressColor: baseColor,
+                progressSelectedColor: selColor,
+            },
+            timeline: [],
+            type: 'task',
+            typeInternal: 'timeline',
+            x1,
+            x2,
+            y,
+            icon: (_b = frame.icon) !== null && _b !== void 0 ? _b : undefined,
+        };
+    }
+    const { x1, x2 } = computeTypeAndXs(task.start, task.end, task.type, dates, columnWidth, handleWidth, false);
+    const children = (_a = task.timeline) === null || _a === void 0 ? void 0 : _a.map(convertFrameToTask);
+    return Object.assign(Object.assign({}, task), { x1,
+        x2,
+        y,
+        index, progressX: 0, progressWidth: 0, barCornerRadius,
+        handleWidth, typeInternal: task.type, progress: 0, height: taskHeight, hideChildren: undefined, barChildren: children !== null && children !== void 0 ? children : [], styles: defaultStyles(task.styles) });
+};
+const taskXCoordinate = (xDate, dates, columnWidth) => {
+    const index = dates.findIndex((d) => d.getTime() >= xDate.getTime()) - 1;
+    if (index < 0) {
+        return 0;
+    }
+    const remainderMillis = xDate.getTime() - dates[index].getTime();
+    const percentOfInterval = remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
+    const x = index * columnWidth + percentOfInterval * columnWidth;
+    return x;
+};
+const taskXCoordinateRTL = (xDate, dates, columnWidth) => {
+    let x = taskXCoordinate(xDate, dates, columnWidth);
+    x += columnWidth;
+    return x;
+};
+const taskYCoordinate = (index, rowHeight, taskHeight) => {
+    const y = index * rowHeight + (rowHeight - taskHeight) / 2;
+    return y;
+};
+const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
+    const progressWidth = (taskX2 - taskX1) * progress * 0.01;
+    let progressX;
+    if (rtl) {
+        progressX = taskX2 - progressWidth;
+    }
+    else {
+        progressX = taskX1;
+    }
+    return [progressWidth, progressX];
+};
+const progressByX = (x, task) => {
+    if (x >= task.x2)
+        return 100;
+    else if (x <= task.x1)
+        return 0;
+    else {
+        const barWidth = task.x2 - task.x1;
+        const progressPercent = Math.round(((x - task.x1) * 100) / barWidth);
+        return progressPercent;
+    }
+};
+const progressByXRTL = (x, task) => {
+    if (x >= task.x2)
+        return 0;
+    else if (x <= task.x1)
+        return 100;
+    else {
+        const barWidth = task.x2 - task.x1;
+        const progressPercent = Math.round(((task.x2 - x) * 100) / barWidth);
+        return progressPercent;
+    }
+};
+const getProgressPoint = (progressX, taskY, taskHeight) => {
+    const point = [
+        progressX - 5,
+        taskY + taskHeight,
+        progressX + 5,
+        taskY + taskHeight,
+        progressX,
+        taskY + taskHeight - 8.66,
+    ];
+    return point.join(',');
+};
+const startByX = (x, xStep, task) => {
+    if (x >= task.x2 - task.handleWidth * 2) {
+        x = task.x2 - task.handleWidth * 2;
+    }
+    const steps = Math.round((x - task.x1) / xStep);
+    const additionalXValue = steps * xStep;
+    const newX = task.x1 + additionalXValue;
+    return newX;
+};
+const endByX = (x, xStep, task) => {
+    if (x <= task.x1 + task.handleWidth * 2) {
+        x = task.x1 + task.handleWidth * 2;
+    }
+    const steps = Math.round((x - task.x2) / xStep);
+    const additionalXValue = steps * xStep;
+    const newX = task.x2 + additionalXValue;
+    return newX;
+};
+const moveByX = (x, xStep, task) => {
+    const steps = Math.round((x - task.x1) / xStep);
+    const additionalXValue = steps * xStep;
+    const newX1 = task.x1 + additionalXValue;
+    const newX2 = newX1 + task.x2 - task.x1;
+    return [newX1, newX2];
+};
+const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
+    let newDate = new Date(((x - taskX) / xStep) * timeStep + taskDate.getTime());
+    newDate = new Date(newDate.getTime() +
+        (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 60000);
+    return newDate;
+};
+/**
+ * Method handles event in real time(mousemove) and on finish(mouseup)
+ */
+const handleTaskBySVGMouseEvent = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) => handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl);
+const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta, rtl) => {
+    const changedTask = Object.assign({}, selectedTask);
+    let isChanged = false;
+    switch (action) {
+        case 'progress':
+            if (rtl) {
+                changedTask.progress = progressByXRTL(svgX, selectedTask);
+            }
+            else {
+                changedTask.progress = progressByX(svgX, selectedTask);
+            }
+            isChanged = changedTask.progress !== selectedTask.progress;
+            if (isChanged) {
+                const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
+                changedTask.progressWidth = progressWidth;
+                changedTask.progressX = progressX;
+            }
+            break;
+        case 'start': {
+            const newX1 = startByX(svgX, xStep, selectedTask);
+            changedTask.x1 = newX1;
+            isChanged = changedTask.x1 !== selectedTask.x1;
+            if (isChanged) {
+                if (rtl) {
+                    changedTask.end = dateByX(newX1, selectedTask.x1, selectedTask.end, xStep, timeStep);
+                }
+                else {
+                    changedTask.start = dateByX(newX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+                }
+                const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
+                changedTask.progressWidth = progressWidth;
+                changedTask.progressX = progressX;
+            }
+            break;
+        }
+        case 'end': {
+            const newX2 = endByX(svgX, xStep, selectedTask);
+            changedTask.x2 = newX2;
+            isChanged = changedTask.x2 !== selectedTask.x2;
+            if (isChanged) {
+                if (rtl) {
+                    changedTask.start = dateByX(newX2, selectedTask.x2, selectedTask.start, xStep, timeStep);
+                }
+                else {
+                    changedTask.end = dateByX(newX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+                }
+                const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
+                changedTask.progressWidth = progressWidth;
+                changedTask.progressX = progressX;
+            }
+            break;
+        }
+        case 'move': {
+            const [newMoveX1, newMoveX2] = moveByX(svgX - initEventX1Delta, xStep, selectedTask);
+            isChanged = newMoveX1 !== selectedTask.x1;
+            if (isChanged) {
+                changedTask.start = dateByX(newMoveX1, selectedTask.x1, selectedTask.start, xStep, timeStep);
+                changedTask.end = dateByX(newMoveX2, selectedTask.x2, selectedTask.end, xStep, timeStep);
+                changedTask.x1 = newMoveX1;
+                changedTask.x2 = newMoveX2;
+                const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
+                changedTask.progressWidth = progressWidth;
+                changedTask.progressX = progressX;
+            }
+            break;
+        }
+    }
+    return { isChanged, changedTask };
+};
+/**
+ * Calculate current date indicator
+ * @param start
+ * @param end
+ * @param dates
+ * @param columnWidth
+ * @returns
+ */
+function calculateCurrentDateCalculator(dates, columnWidth) {
+    return taskXCoordinate(new Date(), dates, columnWidth);
+}
+/**
+ * Calculate the coordinate of projections
+ * @param start
+ * @param end
+ * @param dates
+ * @param columnWidth
+ * @returns
+ */
+function calculateProjection(start, end, dates, columnWidth) {
+    return {
+        x0: taskXCoordinate(start, dates, columnWidth),
+        xf: taskXCoordinate(end, dates, columnWidth),
+    };
+}
+
+exports.calculateCurrentDateCalculator = calculateCurrentDateCalculator;
+exports.calculateProjection = calculateProjection;
+exports.convertToBarTasks = convertToBarTasks;
+exports.getProgressPoint = getProgressPoint;
+exports.handleTaskBySVGMouseEvent = handleTaskBySVGMouseEvent;
+exports.isKeyboardEvent = isKeyboardEvent;
+exports.removeHiddenTasks = removeHiddenTasks;
+exports.sortTasks = sortTasks;

package/dist/cjs/f-button-4caf541a.js

@@ -0,0 +1,105 @@
+'use strict';
+
+const index = require('./index-8f2f4159.js');
+const fButtonDeclarations = require('./f-button-declarations-51ef6d9a.js');
+const fImage = require('./f-image-e16fe10d.js');
+
+/*-------------------------------------------------*/
+/*                C o m p o n e n t                */
+/*-------------------------------------------------*/
+const FButton = (props, children) => {
+    if (!props.styling) {
+        props.styling = fButtonDeclarations.FButtonStyling.RAISED;
+    }
+    if (!props.label && !props.icon) {
+        return;
+    }
+    const isIconButton = !!(props.styling.toLowerCase() === fButtonDeclarations.FButtonStyling.ICON ||
+        (props.styling.toLowerCase() === fButtonDeclarations.FButtonStyling.RAISED &&
+            props.icon &&
+            (props.label === null || props.label === undefined)));
+    return (index.h("div", Object.assign({ class: `f-button ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''} ${props.info ? 'kup-info' : ''} ${props.large ? 'kup-large' : ''} ${props.pulsating ? 'kup-pulsating' : ''}  ${props.shaped ? 'kup-shaped' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.slim ? 'kup-slim' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''} ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
+        isIconButton ? renderIconButton(props) : renderButton(props),
+        children));
+};
+/*-------------------------------------------------*/
+/*                  M e t h o d s                  */
+/*-------------------------------------------------*/
+function renderButton(props) {
+    const isFlat = props.styling.toLowerCase() === fButtonDeclarations.FButtonStyling.FLAT;
+    const isFloating = props.styling.toLowerCase() === fButtonDeclarations.FButtonStyling.FLOATING;
+    const isIcon = props.styling.toLowerCase() === fButtonDeclarations.FButtonStyling.ICON;
+    const isOutlined = props.styling.toLowerCase() === fButtonDeclarations.FButtonStyling.OUTLINED;
+    const isRaised = !isFlat && !isFloating && !isOutlined && !isIcon ? true : false;
+    const propsFImage = {
+        color: props.disabled
+            ? `var(--kup_button_disabled_color)`
+            : isOutlined || isFlat
+                ? `var(--kup_button_primary_color)`
+                : `var(--kup_button_text_on_primary_color)`,
+        resource: props.icon,
+        sizeX: isFloating ? '1.75em' : '1.475em',
+        sizeY: isFloating ? '1.75em' : '1.475em',
+        wrapperClass: 'button__icon kup-icon',
+    };
+    if (props.showSpinner)
+        propsFImage.wrapperClass += ' content--hidden';
+    const classObj = {
+        button: true,
+        'button--disabled': props.disabled ? true : false,
+        'button--floating': isFloating ? true : false,
+        'button--outlined': isOutlined ? true : false,
+        'button--raised': isRaised ? true : false,
+        'button--no-label': !props.label || props.label === ' ' ? true : false,
+        'button--with-spinner': props.showSpinner && !props.disabled ? true : false,
+    };
+    const classLabelObj = {
+        button__label: true,
+        'content--hidden': props.showSpinner && !props.disabled ? true : false,
+    };
+    const styleSpinnerContainer = {
+        '--kup_button_spinner_height': propsFImage.sizeY,
+    };
+    return (index.h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onBlur: props.onBlur, onClick: props.onClick, onFocus: props.onFocus, style: styleSpinnerContainer, "aria-label": props.title },
+        props.trailingIcon
+            ? [
+                index.h("span", { class: classLabelObj }, props.label),
+                props.icon ? index.h(fImage.FImage, Object.assign({}, propsFImage)) : undefined,
+            ]
+            : [
+                props.icon ? index.h(fImage.FImage, Object.assign({}, propsFImage)) : undefined,
+                index.h("span", { class: classLabelObj }, props.label),
+            ],
+        props.showSpinner && !props.disabled ? (index.h("div", { class: "button__spinner-container" },
+            index.h("slot", { name: "spinner" }))) : undefined));
+}
+function renderIconButton(props) {
+    const propsFImage = {
+        color: props.disabled
+            ? `var(--kup_button_disabled_color)`
+            : `var(--kup_button_primary_color)`,
+        sizeX: props.large ? 'calc(1.75em * 1.5)' : '1.75em',
+        sizeY: props.large ? 'calc(1.75em * 1.5)' : '1.75em',
+    };
+    const classObj = {
+        'icon-button': true,
+        'button--disabled': props.disabled ? true : false,
+        'icon-button--on': props.toggable && props.checked ? true : false,
+        toggable: props.toggable ? true : false,
+        'button--with-spinner': props.showSpinner && !props.disabled ? true : false,
+    };
+    const styleSpinnerContainer = {
+        '--kup_button_spinner_height': propsFImage.sizeY,
+        '--kup_button_spinner_width': propsFImage.sizeX,
+    };
+    const iconOff = props.iconOff
+        ? props.iconOff
+        : props.icon + '_border';
+    return (index.h("button", { type: props.buttonType ? props.buttonType : 'button', class: classObj, disabled: props.disabled, onClick: props.onClick, style: styleSpinnerContainer, value: props.checked ? 'on' : 'off', "aria-label": props.title },
+        !props.showSpinner || props.disabled ? (index.h(fImage.FImage, Object.assign({}, propsFImage, { resource: props.toggable && !props.checked ? iconOff : props.icon, wrapperClass: `icon-button__icon kup-icon` }))) : null,
+        props.toggable && !props.showSpinner ? (index.h(fImage.FImage, Object.assign({}, propsFImage, { resource: props.icon, wrapperClass: `icon-button__icon icon-button__icon--on kup-icon` }))) : null,
+        props.showSpinner && !props.disabled ? (index.h("div", { class: "icon-button__spinner-container" },
+            index.h("slot", { name: "spinner" }))) : undefined));
+}
+
+exports.FButton = FButton;

package/dist/cjs/{f-button-declarations-3fd791a8.js → f-button-declarations-51ef6d9a.js}

@@ -11,9 +11,9 @@
  */
 exports.FButtonStyling = void 0;
 (function (FButtonStyling) {
-  FButtonStyling["FLAT"] = "flat";
-  FButtonStyling["FLOATING"] = "floating";
-  FButtonStyling["ICON"] = "icon";
-  FButtonStyling["OUTLINED"] = "outlined";
-  FButtonStyling["RAISED"] = "raised";
+    FButtonStyling["FLAT"] = "flat";
+    FButtonStyling["FLOATING"] = "floating";
+    FButtonStyling["ICON"] = "icon";
+    FButtonStyling["OUTLINED"] = "outlined";
+    FButtonStyling["RAISED"] = "raised";
 })(exports.FButtonStyling || (exports.FButtonStyling = {}));