@sme.up/ketchup 5.2.0-SNAPSHOT → 6.1.0-SNAPSHOT

package/dist/esm/{f-cell-e4d83c27.js → f-cell-521ef17a.js}

@@ -1,97 +1,34 @@
-import { a as KupThemeIconValues, c as KupTagNames, b as KupThemeColorValues } from './kup-manager-0ab94726.js';
-import { h, a as getAssetPath } from './index-aeec9835.js';
-import { b as getCellValueForDisplay } from './cell-utils-69f75e2e.js';
-import { d as stringToNumber } from './utils-35c7a90d.js';
-import { F as FImage } from './f-image-de331954.js';
-import { F as FChip } from './f-chip-51dfefaf.js';
+import { V as KupTagNames, b as KupThemeColorValues } from './kup-manager-58b075b4.js';
+import { h } from './index-baeab1ac.js';
+import { c as getCellValueForDisplay } from './cell-utils-964da6b5.js';
+import { F as FTextField } from './f-text-field-d6c61c73.js';
+import { h as stringToNumber } from './utils-d7e4b3c2.js';
+import { F as FImage } from './f-image-c468d8ae.js';
+import { a as FChip } from './f-chip-1dda722f.js';
 
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
-const FTextField = (props, children) => {
-  return (h("div", Object.assign({ class: `f-text-field ${props.danger ? 'kup-danger' : ''} ${props.fullHeight ? 'kup-full-height' : ''} ${props.fullWidth ? 'kup-full-width' : ''}  ${props.info ? 'kup-info' : ''} ${props.secondary ? 'kup-secondary' : ''} ${props.shaped ? 'kup-shaped' : ''} ${props.success ? 'kup-success' : ''} ${props.warning ? 'kup-warning' : ''}  ${props.wrapperClass ? props.wrapperClass : ''}` }, props.dataSet, { id: props.id, title: props.title }),
-    props.leadingLabel || props.trailingLabel ? (h("div", { class: `mdc-form-field ${props.leadingLabel ? 'mdc-form-field--align-end' : ''}` }, [
-      setContent(props),
-      setHelper(props),
-      h("label", null, props.label),
-    ])) : ([setContent(props), setHelper(props)]),
-    children));
-};
-/*-------------------------------------------------*/
-/*                  M e t h o d s                  */
-/*-------------------------------------------------*/
-function setContent(props) {
-  const isOutlined = props.textArea || props.outlined;
-  let labelEl;
-  let iconEl;
-  if (props.label && !props.leadingLabel && !props.trailingLabel) {
-    labelEl = (h("label", { class: "mdc-floating-label", htmlFor: "kup-input" }, props.label));
-  }
-  if (props.icon) {
-    let iconStyle;
-    let iconClass = '';
-    if (Object.values(KupThemeIconValues).indexOf(props.icon) > -1) {
-      iconClass = props.icon.replace('--', '');
-    }
-    else {
-      let svg = `url('${getAssetPath(`./assets/svg/${props.icon}.svg`)}') no-repeat center`;
-      iconStyle = {
-        mask: svg,
-        webkitMask: svg,
-      };
-    }
-    iconEl = (h("span", { style: iconStyle, onClick: props.onIconClick, class: `mdc-text-field__icon kup-icon action ${iconClass}` }));
-  }
+const FCheckbox = (props) => {
+  const indeterminateAttr = {
+    'data-indeterminate': props.indeterminate ? true : false,
+  };
   const classObj = {
-    'is-clearable': props.isClearable,
-    'mdc-text-field': true,
-    'mdc-text-field--disabled': props.disabled,
-    'mdc-text-field--filled': !props.fullWidth && !isOutlined,
-    'mdc-text-field--no-label': !props.label,
-    'mdc-text-field--fullwidth': props.fullWidth,
-    'mdc-text-field--outlined': isOutlined,
-    'mdc-text-field--textarea': props.textArea,
-    'mdc-text-field--with-leading-icon': props.icon && !props.trailingIcon,
-    'mdc-text-field--with-trailing-icon': props.icon && props.trailingIcon,
+    checkbox: true,
+    'checkbox--checked': props.checked && !props.indeterminate ? true : false,
+    'checkbox--disabled': props.disabled ? true : false,
+    'checkbox--indeterminate': props.indeterminate ? true : false,
   };
-  return (h("div", { class: classObj },
-    props.textArea && props.maxLength ? (h("div", { class: "mdc-text-field-character-counter" },
-      "'0 / ' + ",
-      props.maxLength)) : undefined,
-    !props.trailingIcon ? iconEl : undefined,
-    props.textArea ? (h("span", { class: "mdc-text-field__resizer" },
-      h("textarea", { class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown }))) : (h("input", { type: props.inputType ? props.inputType : 'text', step: props.step, min: props.min, max: props.max, class: "mdc-text-field__input", disabled: props.disabled, readOnly: props.readOnly, placeholder: props.fullWidth ? props.label : undefined, maxlength: props.maxLength, value: props.value, onBlur: props.onBlur, onClick: props.onClick, onChange: props.onChange, onFocus: props.onFocus, onInput: props.onInput, onKeyDown: props.onKeyDown })),
-    props.isClearable ? (h("span", { class: `mdc-text-field__icon kup-icon ${KupThemeIconValues.CLEAR.replace('--', '')}`, onClick: props.onClearIconClick })) : undefined,
-    props.trailingIcon ? iconEl : undefined,
-    !props.fullWidth && !isOutlined ? labelEl : undefined,
-    isOutlined ? (h("div", { class: "mdc-notched-outline" },
-      h("div", { class: "mdc-notched-outline__leading" }),
-      h("div", { class: "mdc-notched-outline__notch" }, labelEl),
-      h("div", { class: "mdc-notched-outline__trailing" }))) : (h("span", { class: "mdc-line-ripple" }))));
-}
-function setHelper(props) {
-  if (props.helperEnabled !== false) {
-    if (props.helper) {
-      const classObj = {
-        'mdc-text-field-helper-text': true,
-        'mdc-text-field-helper-text--persistent': !props.helperWhenFocused,
-      };
-      return (h("div", { class: "mdc-text-field-helper-line" },
-        h("div", { class: classObj }, props.helper),
-        props.maxLength && !props.textArea ? (h("div", { class: "mdc-text-field-character-counter" },
-          "'0 / ' + ",
-          props.maxLength.toString())) : undefined));
-    }
-    else {
-      if (props.maxLength && !props.textArea) {
-        return (h("div", { class: "mdc-text-field-helper-line" },
-          h("div", { class: "mdc-text-field-character-counter" },
-            "'0 / ' + ",
-            props.maxLength)));
-      }
-    }
-  }
-}
+  return (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 }),
+    h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
+      h("div", { class: classObj },
+        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' })),
+        h("div", { class: "checkbox__background", onClick: props.onChange },
+          h("svg", { class: "checkbox__checkmark", viewBox: "0 0 24 24" },
+            h("path", { class: "checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
+          h("div", { class: "checkbox__mixedmark" }))),
+      props.label ? h("label", null, props.label) : undefined)));
+};
 
 const autoAlignComps = [KupTagNames.DATA_TABLE, KupTagNames.TREE];
 /**
@@ -238,35 +175,11 @@ const kupTypes = [
   FCellTypes.RATING,
 ];
 
-/*-------------------------------------------------*/
-/*                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 (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 }),
-    h("div", { class: `form-field ${props.leadingLabel ? 'form-field--align-end' : ''}` },
-      h("div", { class: classObj },
-        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' })),
-        h("div", { class: "checkbox__background", onClick: props.onChange },
-          h("svg", { class: "checkbox__checkmark", viewBox: "0 0 24 24" },
-            h("path", { class: "checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
-          h("div", { class: "checkbox__mixedmark" }))),
-      props.label ? h("label", null, props.label) : undefined)));
-};
-
 const dom = document.documentElement;
 /*-------------------------------------------------*/
 /*                C o m p o n e n t                */
 /*-------------------------------------------------*/
-const FCell = (props) => {
+const FCell = (props, children) => {
   const cell = props.cell;
   const column = props.column;
   const row = props.row;
@@ -354,12 +267,12 @@ const FCell = (props) => {
     };
     infoEl = h(FImage, Object.assign({}, fProps));
   }
-  return (h("div", { class: classObj, style: cell.style },
-    h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle },
-      props.indents,
-      infoEl,
-      icon,
-      content)));
+  return (h("div", { class: classObj, "kup-get-cell-props": () => {
+      return props;
+    }, style: cell.style },
+    h("div", { class: "f-cell__content", style: cell.styleContent, title: cellTitle }, children && children.length > 0
+      ? children
+      : [props.indents, infoEl, icon, content])));
 };
 function setCellSize(cellType, subcomponentProps, cell, props) {
   switch (cellType) {
@@ -734,4 +647,4 @@ function cellEvent(e, props, cellType, cellEventName) {
   }
 }
 
-export { FTextField as F, FCell as a, FCheckbox as b, FCellPadding as c };
+export { FCheckbox as F, FCellPadding as a, FCell as b };

package/dist/esm/{f-chip-51dfefaf.js → f-chip-1dda722f.js}

@@ -1,6 +1,6 @@
-import { h } from './index-aeec9835.js';
-import { F as FImage } from './f-image-de331954.js';
-import { a as KupThemeIconValues, i as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-0ab94726.js';
+import { h } from './index-baeab1ac.js';
+import { F as FImage } from './f-image-c468d8ae.js';
+import { a as KupThemeIconValues, h as KupLanguageGeneric, b as KupThemeColorValues } from './kup-manager-58b075b4.js';
 
 /**
  * Types of the f-chip component.
@@ -74,7 +74,8 @@ function createChipList(props, isChoice, isFilter, isInput) {
       }
     }
     function createChip(chip) {
-      let componentClass = `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) {
@@ -125,4 +126,4 @@ function createChipList(props, isChoice, isFilter, isInput) {
   return chipList;
 }
 
-export { FChip as F, FChipType as a };
+export { FChipType as F, FChip as a };

package/dist/esm/{f-image-de331954.js → f-image-c468d8ae.js}

@@ -1,5 +1,5 @@
-import { h, a as getAssetPath } from './index-aeec9835.js';
-import { b as KupThemeColorValues } from './kup-manager-0ab94726.js';
+import { h, a as getAssetPath } from './index-baeab1ac.js';
+import { b as KupThemeColorValues } from './kup-manager-58b075b4.js';
 
 /**
  * The type of a CSS step in CSS-drawing mode.