@descope/web-components-ui 1.0.425 → 1.0.426

package/{src/components/descope-combo-box → node_modules/descope-combo-box/src/component}/ComboBoxClass.js

@@ -1,9 +1,9 @@
-import { compose } from '../../helpers';
+import { compose } from 'common/utils';
 import {
   getComponentName,
   observeAttributes,
   observeChildren,
-} from '../../helpers/componentHelpers';
+} from 'common/components-helpers';
 import {
   resetInputLabelPosition,
   resetInputCursor,
@@ -11,7 +11,7 @@ import {
   resetInputReadonlyStyle,
   useHostExternalPadding,
   inputFloatingLabelStyle,
-} from '../../helpers/themeHelpers/resetHelpers';
+} from 'common/theme-helpers';
 import {
   createStyleMixin,
   draggableMixin,
@@ -19,7 +19,7 @@ import {
   componentNameValidationMixin,
   portalMixin,
   proxyInputMixin,
-} from '../../mixins';
+} from 'common/components-mixins';
 
 export const componentName = getComponentName('combo-box');
 
@@ -31,7 +31,9 @@ const ComboBoxMixin = (superclass) =>
 
     // eslint-disable-next-line class-methods-use-this
     #renderItem = ({ displayName, value, label }) => {
-      return `<span data-name="${label}" data-id="${value}">${displayName || label}</span>`;
+      return `<span data-name="${label}" data-id="${value}">${
+        displayName || label
+      }</span>`;
     };
 
     #data;
@@ -79,7 +81,10 @@ const ComboBoxMixin = (superclass) =>
           }
         } catch (e) {
           // eslint-disable-next-line no-console
-          console.error('could not parse data string from attribute "data" -', e.message);
+          console.error(
+            'could not parse data string from attribute "data" -',
+            e.message,
+          );
         }
       }
 
@@ -105,7 +110,10 @@ const ComboBoxMixin = (superclass) =>
     }
 
     getItemsTemplate() {
-      return this.data?.reduce?.((acc, item) => acc + (this.renderItem?.(item || {}) || ''), '');
+      return this.data?.reduce?.(
+        (acc, item) => acc + (this.renderItem?.(item || {}) || ''),
+        '',
+      );
     }
 
     renderItems() {
@@ -146,7 +154,7 @@ const ComboBoxMixin = (superclass) =>
     setComboBoxDescriptor() {
       const valueDescriptor = Object.getOwnPropertyDescriptor(
         this.inputElement.constructor.prototype,
-        'value'
+        'value',
       );
 
       const comboBox = this;
@@ -155,7 +163,10 @@ const ComboBoxMixin = (superclass) =>
         value: {
           ...valueDescriptor,
           set(val) {
-            if (!comboBox.baseElement.items?.length && !comboBox.allowCustomValue) {
+            if (
+              !comboBox.baseElement.items?.length &&
+              !comboBox.allowCustomValue
+            ) {
               return;
             }
 
@@ -202,7 +213,9 @@ const ComboBoxMixin = (superclass) =>
     // we do not want that because it's difficult to style the overlay in this way
     // so we override it to open inside the shadow DOM
     #overrideOverlaySettings() {
-      const overlay = this.baseElement.shadowRoot.querySelector('vaadin-combo-box-overlay');
+      const overlay = this.baseElement.shadowRoot.querySelector(
+        'vaadin-combo-box-overlay',
+      );
       overlay._attachOverlay = () => {
         overlay.bringToFront();
       };
@@ -238,13 +251,17 @@ const ComboBoxMixin = (superclass) =>
       this.#overrideRenderer();
 
       // Set up observers - order matters here since renderItems can clear innerHTML
-      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+      observeAttributes(this, this.renderItems.bind(this), {
+        includeAttrs: ['data'],
+      });
       observeChildren(this, this.#onChildrenChange.bind(this));
 
       this.setDefaultValue();
 
       this.baseElement.addEventListener('selected-item-changed', () => {
-        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        this.dispatchEvent(
+          new Event('input', { bubbles: true, composed: true }),
+        );
       });
     }
 
@@ -291,7 +308,7 @@ const ComboBoxMixin = (superclass) =>
           (e) => {
             e.stopImmediatePropagation();
           },
-          { once: true, capture: true }
+          { once: true, capture: true },
         );
       }
     }
@@ -338,7 +355,9 @@ const {
   toggle: { selector: '::part(toggle-button)' },
   clearButton: { selector: '::part(clear-button)' },
   label: { selector: '::part(label)' },
-  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  requiredIndicator: {
+    selector: '[required]::part(required-indicator)::after',
+  },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
 };
@@ -360,9 +379,18 @@ export const ComboBoxClass = compose(
       errorMessageTextColor: { ...errorMessage, property: 'color' },
       errorMessageIcon: { ...errorMessage, property: 'background-image' },
       errorMessageIconSize: { ...errorMessage, property: 'background-size' },
-      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
-      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
-      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
+      errorMessageIconPadding: {
+        ...errorMessage,
+        property: 'padding-inline-start',
+      },
+      errorMessageIconRepeat: {
+        ...errorMessage,
+        property: 'background-repeat',
+      },
+      errorMessageIconPosition: {
+        ...errorMessage,
+        property: 'background-position',
+      },
       inputHeight: { ...inputField, property: 'height' },
       inputBackgroundColor: { ...inputField, property: 'background-color' },
       inputBorderColor: { ...inputField, property: 'border-color' },
@@ -415,15 +443,27 @@ export const ComboBoxClass = compose(
       // so we need to use an arrow function on the selector
       // for that to work, because ComboBox is not available
       // at this time.
-      overlayBackground: { property: () => ComboBoxClass.cssVarList.overlay.backgroundColor },
+      overlayBackground: {
+        property: () => ComboBoxClass.cssVarList.overlay.backgroundColor,
+      },
       overlayTextColor: {
         property: () => ComboBoxClass.cssVarList.overlay.textColor,
       },
-      overlayBorder: { property: () => ComboBoxClass.cssVarList.overlay.border },
-      overlayFontSize: { property: () => ComboBoxClass.cssVarList.overlay.fontSize },
-      overlayFontFamily: { property: () => ComboBoxClass.cssVarList.overlay.fontFamily },
-      overlayCursor: { property: () => ComboBoxClass.cssVarList.overlay.cursor },
-      overlayItemBoxShadow: { property: () => ComboBoxClass.cssVarList.overlay.itemBoxShadow },
+      overlayBorder: {
+        property: () => ComboBoxClass.cssVarList.overlay.border,
+      },
+      overlayFontSize: {
+        property: () => ComboBoxClass.cssVarList.overlay.fontSize,
+      },
+      overlayFontFamily: {
+        property: () => ComboBoxClass.cssVarList.overlay.fontFamily,
+      },
+      overlayCursor: {
+        property: () => ComboBoxClass.cssVarList.overlay.cursor,
+      },
+      overlayItemBoxShadow: {
+        property: () => ComboBoxClass.cssVarList.overlay.itemBoxShadow,
+      },
       overlayItemPaddingInlineStart: {
         property: () => ComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
       },
@@ -447,20 +487,47 @@ export const ComboBoxClass = compose(
       fontFamily: { selector: 'vaadin-combo-box-item' },
       textColor: { selector: 'vaadin-combo-box-item', property: 'color' },
       fontSize: { selector: 'vaadin-combo-box-item' },
-      itemBoxShadow: { selector: 'vaadin-combo-box-item', property: 'box-shadow' },
+      itemBoxShadow: {
+        selector: 'vaadin-combo-box-item',
+        property: 'box-shadow',
+      },
       itemPaddingInlineStart: {
         selector: 'vaadin-combo-box-item',
         property: 'padding-inline-start',
       },
-      itemPaddingInlineEnd: { selector: 'vaadin-combo-box-item', property: 'padding-inline-end' },
-
-      loaderTop: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'top' },
-      loaderLeft: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'left' },
-      loaderRight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'right' },
-      loaderMargin: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'margin' },
-      loaderWidth: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'width' },
-      loaderHeight: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'height' },
-      loaderBorder: { selector: 'vaadin-combo-box-overlay::part(loader)', property: 'border' },
+      itemPaddingInlineEnd: {
+        selector: 'vaadin-combo-box-item',
+        property: 'padding-inline-end',
+      },
+
+      loaderTop: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'top',
+      },
+      loaderLeft: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'left',
+      },
+      loaderRight: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'right',
+      },
+      loaderMargin: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'margin',
+      },
+      loaderWidth: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'width',
+      },
+      loaderHeight: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'height',
+      },
+      loaderBorder: {
+        selector: 'vaadin-combo-box-overlay::part(loader)',
+        property: 'border',
+      },
       loaderBorderColor: {
         selector: 'vaadin-combo-box-overlay::part(loader)',
         property: 'border-color',
@@ -469,17 +536,26 @@ export const ComboBoxClass = compose(
         selector: 'vaadin-combo-box-overlay::part(loader)',
         property: 'border-radius',
       },
-      contentHeight: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'height' },
-      contentOpacity: { selector: 'vaadin-combo-box-overlay::part(content)', property: 'opacity' },
+      contentHeight: {
+        selector: 'vaadin-combo-box-overlay::part(content)',
+        property: 'height',
+      },
+      contentOpacity: {
+        selector: 'vaadin-combo-box-overlay::part(content)',
+        property: 'opacity',
+      },
     },
     forward: {
       include: false,
       attributes: ['size'],
     },
   }),
-  proxyInputMixin({ proxyProps: ['selectionStart'], inputEvent: 'selected-item-changed' }),
+  proxyInputMixin({
+    proxyProps: ['selectionStart'],
+    inputEvent: 'selected-item-changed',
+  }),
   componentNameValidationMixin,
-  ComboBoxMixin
+  ComboBoxMixin,
 )(
   createProxy({
     slots: ['', 'prefix'],
@@ -539,5 +615,5 @@ export const ComboBoxClass = compose(
     excludeAttrsSync: ['tabindex', 'size', 'data', 'loading'],
     componentName,
     includeForwardProps: ['items', 'renderer', 'selectedItem'],
-  })
+  }),
 );

package/{src/theme/components/comboBox.js → node_modules/descope-combo-box/src/theme.js}

@@ -1,7 +1,7 @@
-import globals from '../globals';
-import { ComboBoxClass } from '../../components/descope-combo-box/ComboBoxClass';
-import { getThemeRefs } from '../../helpers/themeHelpers';
-import { refs } from './inputWrapper';
+import globals from 'theme-globals';
+import { ComboBoxClass } from './component/ComboBoxClass';
+import { getThemeRefs } from 'common/theme-helpers';
+import { refs } from 'theme-input-wrapper';
 
 const globalRefs = getThemeRefs(globals);
 const vars = ComboBoxClass.cssVarList;
@@ -81,8 +81,8 @@ export const comboBox = {
     [vars.overlay.loaderWidth]: '30px',
     [vars.overlay.loaderHeight]: '30px',
     [vars.overlay.loaderBorder]: '2px solid transparent',
-    [vars.overlay.loaderBorderColor]:
-      `${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.main} ${globalRefs.colors.primary.main}`,
+    [vars.overlay
+      .loaderBorderColor]: `${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.highlight} ${globalRefs.colors.primary.main} ${globalRefs.colors.primary.main}`,
     [vars.overlay.loaderBorderRadius]: '50%',
     [vars.overlay.contentHeight]: '100px',
     [vars.overlay.contentOpacity]: '0',

package/node_modules/descope-combo-box/stories/descope-combo-box.stories.js

@@ -0,0 +1,180 @@
+/* eslint no-param-reassign: 0 */
+
+import { componentName } from '../src/component/ComboBoxClass';
+import { withForm } from 'common/sb-helpers';
+import {
+  labelControl,
+  placeholderControl,
+  sizeControl,
+  fullWidthControl,
+  directionControl,
+  disabledControl,
+  readOnlyControl,
+  requiredControl,
+  borderedControl,
+  loadingControl,
+  errorMissingValueControl,
+  overrideRenderItemControl,
+  itemsSourceControl,
+  inputLabelTypeControl,
+  errorMessageIconControl,
+  errorMessageIconAttrs,
+} from 'common/sb-controls';
+
+const Template = ({
+  label,
+  placeholder,
+  size,
+  bordered,
+  'full-width': fullWidth,
+  readonly,
+  required,
+  direction,
+  disabled,
+  data,
+  overrideRenderItem,
+  itemsSource,
+  loading,
+  'default-value': defaultValue,
+  'data-errormessage-value-missing': customErrorMissingValue,
+  'label-type': labelType,
+  'hide-toggle-button': hideToggleButton,
+  'allow-custom-value': allowCustomValue,
+  overrideRenderer,
+  errorMsgIcon,
+}) => {
+  let serializedData;
+
+  try {
+    serializedData = JSON.stringify(data);
+  } catch (e) {
+    // do nothing
+  }
+
+  // this is another way to pass data to the component (prop instead of attr)
+  const dataFromPropScript = `
+  <script>
+    document.querySelector("descope-combo-box").data = ${serializedData.replace(
+      /\n/g,
+      '',
+    )}
+  </script>`;
+
+  // eslint-disable-next-line no-shadow
+  const altRenderItem = ({ displayName, label, value }) =>
+    `<span data-name="${displayName}" data-value="${value}">${label}</span>`;
+
+  // this allows us to update the render item function
+  const overrideRenderItemScript = `
+  <script>
+    document.querySelector("descope-combo-box").renderItem = ${altRenderItem
+      .toString()
+      .replace(/\n/g, '')}
+  </script>`;
+
+  const altRenderer = (root, combo, model) => {
+    if (model.index === 1) {
+      root.style.backgroundColor = '#008000';
+      root.style.color = '#ffffff';
+    }
+    root.innerHTML = model.item.outerHTML;
+  };
+
+  const overrideRendererScript = `
+  <script>
+    document.querySelector("descope-combo-box").renderer = ${altRenderer
+      .toString()
+      .replace(/\n/g, '')}
+  </script>`;
+
+  return withForm(`
+    <descope-combo-box
+      clear-button-visible
+      data='${(itemsSource === 'attr' && serializedData) || ''}'
+      size="${size}"
+      bordered="${bordered}"
+      item-label-path="data-name"
+      item-value-path="data-id"
+      label="${label || ''}"
+      placeholder="${placeholder || ''}"
+      default-value="${defaultValue || ''}"
+      required="${required || false}"
+      full-width="${fullWidth || false}"
+      readonly="${readonly || false}"
+      disabled="${disabled || false}"
+      loading="${loading || false}"
+      data-errormessage-value-missing="${customErrorMissingValue || ''}"
+      st-host-direction="${direction ?? ''}"
+      label-type="${labelType || ''}"
+      hide-toggle-button="${hideToggleButton || false}"
+      allow-custom-value="${allowCustomValue || false}"
+      ${errorMsgIcon ? errorMessageIconAttrs : ''}
+    >
+      <span data-name="ItemName1" data-id="itemId1">Trojan War Heroes' Valor</span>
+      <span data-name="ItemName2" data-id="itemId2">Achilles' Fateful Wrath</span>
+      <span data-name="ItemName3" data-id="itemId3">Epic Battle of Gods</span>
+      <span data-name="ItemName4" data-id="itemId4">Hector's Brave Sacrifice</span>
+      <span data-name="ItemName5" data-id="itemId5">Trojan Horse Deception</span>
+      <span data-name="ItemName6" data-id="itemId6">Agamemnon's Royal Command</span>
+      <span data-name="ItemName7" data-id="itemId7">Odysseus' Cunning Strategy</span>
+      <span data-name="ItemName8" data-id="itemId8">Helen's Beauty's Curse</span>
+      <span data-name="ItemName9" data-id="itemId9">Achilles' Heel Weakness</span>
+      <span data-name="ItemName10" data-id="itemId10">Epic Poem of Ancient</span>
+    </descope-combo-box>
+    ${itemsSource === 'prop' ? dataFromPropScript : ''}
+    ${overrideRenderItem ? overrideRenderItemScript : ''}
+    ${overrideRenderer ? overrideRendererScript : ''}
+  `);
+};
+
+export default {
+  component: componentName,
+  title: 'descope-combo-box',
+  argTypes: {
+    ...labelControl,
+    ...placeholderControl,
+    ...inputLabelTypeControl,
+    ...sizeControl,
+    ...fullWidthControl,
+    ...disabledControl,
+    ...readOnlyControl,
+    ...requiredControl,
+    ...borderedControl,
+    ...errorMissingValueControl,
+    ...overrideRenderItemControl,
+    ...itemsSourceControl,
+    ...directionControl,
+    ...loadingControl,
+    ...errorMessageIconControl,
+    'default-value': {
+      name: 'Default Value',
+      control: { type: 'text' },
+    },
+    'hide-toggle-button': {
+      name: 'Hide Toggle Button',
+      control: { type: 'boolean' },
+    },
+    'allow-custom-value': {
+      name: 'Allow Custom Value',
+      control: { type: 'boolean' },
+    },
+    overrideRenderer: {
+      name: 'Override the default renderer function',
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  size: 'md',
+  bordered: true,
+  loading: false,
+  data: [
+    { displayName: 'Item1', value: '1', label: 'data item 1' },
+    { displayName: 'Item2', value: 'itemId2', label: 'data item 2' },
+    { displayName: 'Item3', value: '3', label: 'data item 3' },
+    { displayName: 'Item4', value: '4', label: 'data item 4' },
+  ],
+};

package/node_modules/theme-input-wrapper/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "theme-input-wrapper",
+  "version": "0.0.1",
+  "main": "./src/index.js",
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  },
+  "dependencies": {
+    "common": "0.0.1",
+    "theme-globals": "0.0.1"
+  },
+  "private": true,
+  "publishConfig": {
+    "link-workspace-packages": false
+  }
+}

package/node_modules/theme-input-wrapper/project.json

@@ -0,0 +1,7 @@
+{
+  "name": "theme-input-wrapper",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/theme-input-wrapper/src",
+  "projectType": "library",
+  "tags": []
+}

package/node_modules/theme-input-wrapper/src/index.js

@@ -0,0 +1,130 @@
+import globals from 'theme-globals';
+import { getThemeRefs, createHelperVars } from 'common/theme-helpers';
+import { getComponentName } from 'common/components-helpers';
+
+const componentName = getComponentName('input-wrapper');
+const globalRefs = getThemeRefs(globals);
+
+const [theme, refs, vars] = createHelperVars(
+  {
+    labelTextColor: globalRefs.colors.surface.dark,
+    labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
+    labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
+    valueTextColor: globalRefs.colors.surface.contrast,
+    placeholderTextColor: globalRefs.colors.surface.dark,
+    requiredIndicator: "'*'",
+    helperTextColor: globalRefs.colors.surface.dark,
+    errorMessageTextColor: globalRefs.colors.error.main,
+    successMessageTextColor: globalRefs.colors.success.main,
+
+    borderWidth: globalRefs.border.xs,
+    borderRadius: globalRefs.radius.xs,
+    borderColor: 'transparent',
+
+    outlineWidth: globalRefs.border.sm,
+    outlineStyle: 'solid',
+    outlineColor: 'transparent',
+    outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
+
+    minWidth: '10em',
+    toggleButtonSize: '1.5em',
+    inputIconSize: '1em',
+    inputHeight: '3em',
+    horizontalPadding: '0.5em',
+    verticalPadding: '0.5em',
+
+    textAlign: 'start',
+
+    backgroundColor: globalRefs.colors.surface.main,
+
+    fontFamily: globalRefs.fonts.font1.family,
+
+    direction: globalRefs.direction,
+
+    overlayOpacity: '0.3',
+
+    errorMessageIcon: '',
+    errorMessageIconSize: '0',
+    errorMessageIconPadding: '0',
+    errorMessageIconPosition: '0 0.4em',
+    errorMessageIconRepeat: 'no-repeat',
+
+    size: {
+      xs: { fontSize: '12px', chipFontSize: '10px' },
+      sm: { fontSize: '14px', chipFontSize: '12px' },
+      md: { fontSize: '16px', chipFontSize: '14px' },
+      lg: { fontSize: '18px', chipFontSize: '16px' },
+    },
+
+    labelType: {
+      static: {
+        valueInputHeight: '3em',
+        valueInputMarginBottom: 'auto',
+      },
+      floating: {
+        labelPosition: 'absolute',
+        labelTopPosition: '0',
+        labelHorizontalPosition: '0.9em',
+        labelFontSize: '1em',
+        placeholderOpacity: 0,
+        inputHeight: '3.5em',
+        inputVerticalAlignment: 'flex-end',
+        inputTransformY: 'translateY(1.55em)',
+        inputTransition: 'all 75ms ease-in-out',
+        marginInlineStart: '0',
+        valueInputHeight: '1.5702em',
+        valueInputMarginBottom: '0.5em',
+
+        _focused: {
+          labelFontSize: '0.75em',
+          inputTransformY: 'translateY(1.05em)',
+          labelFontWeight: '400',
+          placeholderOpacity: 1,
+        },
+
+        _readOnly: {
+          placeholderOpacity: 0,
+        },
+
+        _hasValue: {
+          inputTransformY: 'translateY(1.05em)',
+          labelFontSize: '0.75em',
+          labelFontWeight: '400',
+        },
+      },
+    },
+
+    _fullWidth: {
+      width: '100%',
+    },
+
+    _focused: {
+      outlineColor: globalRefs.colors.surface.light,
+      _invalid: {
+        outlineColor: globalRefs.colors.error.main,
+      },
+    },
+
+    _bordered: {
+      outlineWidth: globalRefs.border.xs,
+      borderColor: globalRefs.colors.surface.light,
+      borderStyle: 'solid',
+      _invalid: {
+        borderColor: globalRefs.colors.error.main,
+      },
+    },
+
+    _disabled: {
+      labelTextColor: globalRefs.colors.surface.light,
+      borderColor: globalRefs.colors.surface.light,
+      valueTextColor: globalRefs.colors.surface.light,
+      placeholderTextColor: globalRefs.colors.surface.light,
+      helperTextColor: globalRefs.colors.surface.light,
+      backgroundColor: globalRefs.colors.surface.main,
+    },
+  },
+  componentName,
+);
+
+export { refs, vars };
+export default theme;