@descope/web-components-ui 3.8.0 → 3.9.1

package/src/theme/components/multiSelectComboBox.js

@@ -1,91 +0,0 @@
-import globals from '../globals';
-import { MultiSelectComboBoxClass } from '../../components/descope-multi-select-combo-box/MultiSelectComboBoxClass';
-import { getThemeRefs } from '../../helpers/themeHelpers';
-import { refs } from './inputWrapper';
-
-const globalRefs = getThemeRefs(globals);
-const vars = MultiSelectComboBoxClass.cssVarList;
-
-export const multiSelectComboBox = {
-  [vars.hostWidth]: refs.width,
-  [vars.hostDirection]: refs.direction,
-  [vars.fontSize]: refs.fontSize,
-  [vars.fontFamily]: refs.fontFamily,
-  [vars.labelFontSize]: refs.labelFontSize,
-  [vars.labelFontWeight]: refs.labelFontWeight,
-  [vars.inputValueFontWeight]: refs.inputValueFontWeight,
-  [vars.inputPlaceholderFontWeight]: refs.inputPlaceholderFontWeight,
-  [vars.helperTextFontWeight]: refs.helperTextFontWeight,
-  [vars.errorMessageFontWeight]: refs.errorMessageFontWeight,
-  [vars.labelTextColor]: refs.labelTextColor,
-  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
-  [vars.inputBorderColor]: refs.borderColor,
-  [vars.inputBorderWidth]: refs.borderWidth,
-  [vars.inputBorderStyle]: refs.borderStyle,
-  [vars.inputBorderRadius]: refs.borderRadius,
-  [vars.inputOutlineColor]: refs.outlineColor,
-  [vars.inputOutlineOffset]: refs.outlineOffset,
-  [vars.inputOutlineWidth]: refs.outlineWidth,
-  [vars.inputOutlineStyle]: refs.outlineStyle,
-  [vars.labelRequiredIndicator]: refs.requiredIndicator,
-  [vars.inputValueTextColor]: refs.valueTextColor,
-  [vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
-  [vars.inputBackgroundColor]: refs.backgroundColor,
-  [vars.inputHorizontalPadding]: refs.horizontalPadding,
-  [vars.inputVerticalPadding]: refs.verticalPadding,
-  [vars.inputHeight]: refs.inputHeight,
-  [vars.inputDropdownButtonColor]: globalRefs.colors.surface.dark,
-  [vars.inputDropdownButtonCursor]: 'pointer',
-  [vars.inputDropdownButtonSize]: refs.toggleButtonSize,
-  [vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
-  [vars.overlayItemPaddingInlineStart]: globalRefs.spacing.xs,
-  [vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,
-  [vars.chipFontSize]: refs.chipFontSize,
-  [vars.chipTextColor]: globalRefs.colors.surface.contrast,
-  [vars.chipBackgroundColor]: globalRefs.colors.surface.light,
-  [vars.labelPosition]: refs.labelPosition,
-  [vars.labelTopPosition]: refs.labelTopPosition,
-  [vars.labelLeftPosition]: refs.labelLeftPosition,
-  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars.inputTransformY]: refs.inputTransformY,
-  [vars.inputTransition]: refs.inputTransition,
-  [vars.marginInlineStart]: refs.marginInlineStart,
-  [vars.placeholderOpacity]: refs.placeholderOpacity,
-  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
-
-  // error message icon
-  [vars.errorMessageIcon]: refs.errorMessageIcon,
-  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
-  [vars.errorMessageFontSize]: refs.errorMessageFontSize,
-
-  labelType: {
-    floating: {
-      [vars.inputHorizontalPadding]: '0.25em',
-      _hasValue: {
-        [vars.inputHorizontalPadding]: '0.45em',
-      },
-    },
-  },
-
-  _readonly: {
-    [vars.inputDropdownButtonCursor]: 'default',
-  },
-
-  // Overlay theme exposed via the component:
-  [vars.overlayFontSize]: refs.fontSize,
-  [vars.overlayFontFamily]: refs.fontFamily,
-  [vars.overlayCursor]: 'pointer',
-  [vars.overlayItemBoxShadow]: 'none',
-  [vars.overlayBackground]: refs.backgroundColor,
-  [vars.overlayTextColor]: refs.valueTextColor,
-
-  // Overlay direct theme:
-  [vars.overlay.minHeight]: '400px',
-  [vars.overlay.margin]: '0',
-};
-
-export default multiSelectComboBox;
-export { vars };

package/stories/descope-multi-select-combo-box.stories.js

@@ -1,183 +0,0 @@
-import { componentName } from '../src/components/descope-multi-select-combo-box';
-import { toggleDefaultErrorMessageValueMissingDecorator, withForm } from './helpers';
-import {
-  labelControl,
-  placeholderControl,
-  sizeControl,
-  fullWidthControl,
-  directionControl,
-  disabledControl,
-  minItemsSelectionControl,
-  maxItemsSelectionControl,
-  readOnlyControl,
-  requiredControl,
-  borderedControl,
-  errorMissingValueControl,
-  overrideRenderItemControl,
-  itemsSourceControl,
-  inputLabelTypeControl,
-  errorPatternMismatchControl,
-  errorMessageIconControl,
-  errorMessageIconAttrs,
-  defaultValueMissingControl,
-} from './commonControls';
-
-const altRenderItem = ({ displayName, label, value }) =>
-  `<span data-name="${displayName}" data-id="${value}">${label}</span>`;
-
-const Template = ({
-  'allow-custom-value': allowCustomValue,
-  label,
-  placeholder,
-  size,
-  bordered,
-  'full-width': fullWidth,
-  readonly,
-  required,
-  direction,
-  disabled,
-  data,
-  overrideRenderItem,
-  itemsSource,
-  minItemsSelection,
-  maxItemsSelection,
-  pattern,
-  'default-values': defaultValues,
-  'data-errormessage-value-missing': customErrorMissingValue,
-  'data-errormessage-pattern-mismatch': customErrorPatternMismatch,
-  'ignore-data': ignoreData,
-  'label-type': labelType,
-  errorMsgIcon,
-}) => {
-  let serializedData;
-  let serializedDefaultValues;
-
-  try {
-    serializedData = JSON.stringify(data);
-    serializedDefaultValues = JSON.stringify(defaultValues);
-  } catch (e) {
-    // do nothing
-  }
-
-  if (ignoreData) {
-    serializedData = '[]';
-  }
-
-  return `
-    <descope-multi-select-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-values='${serializedDefaultValues || ''}'
-      required="${required || false}"
-      full-width="${fullWidth || false}"
-      readonly="${readonly || false}"
-      disabled="${disabled || false}"
-      data-errormessage-value-missing="${customErrorMissingValue || ''}"
-      data-errormessage-pattern-mismatch="${customErrorPatternMismatch || ''}"
-      st-host-direction="${direction ?? ''}"
-      allow-custom-value="${allowCustomValue || false}"
-      min-items-selection="${minItemsSelection || ''}"
-      max-items-selection="${maxItemsSelection || ''}"
-      label-type="${labelType || ''}"
-      pattern="${pattern || ''}"
-      ${errorMsgIcon ? errorMessageIconAttrs : ''}
-    >
-    ${
-      itemsSource === 'children' &&
-      `
-        <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-multi-select-combo-box>
-  `;
-};
-
-const allowCustomValueControl = {
-  'allow-custom-value': {
-    name: 'Allow Custom Values',
-    control: { type: 'boolean' },
-  },
-};
-
-export default {
-  component: componentName,
-  title: 'descope-multi-select-combo-box',
-  decorators: [
-    (story, { args }) => {
-      setTimeout(() => {
-        const ele = document.querySelector('descope-multi-select-combo-box');
-        if (args.itemsSource === 'prop') {
-          ele.data = args.data;
-        }
-        if (args.overrideRenderItem) {
-          ele.renderItem = altRenderItem;
-        }
-      });
-      return story();
-    },
-    toggleDefaultErrorMessageValueMissingDecorator,
-    withForm,
-  ],
-  argTypes: {
-    ...labelControl,
-    ...placeholderControl,
-    ...inputLabelTypeControl,
-    ...sizeControl,
-    ...fullWidthControl,
-    ...disabledControl,
-    ...readOnlyControl,
-    ...requiredControl,
-    ...borderedControl,
-    ...errorMissingValueControl,
-    ...errorPatternMismatchControl,
-    ...overrideRenderItemControl,
-    ...itemsSourceControl,
-    ...allowCustomValueControl,
-    ...minItemsSelectionControl,
-    ...maxItemsSelectionControl,
-    ...directionControl,
-    ...errorMessageIconControl,
-    ...defaultValueMissingControl,
-    'default-values': {
-      name: 'Default Values',
-      control: { type: 'object' },
-    },
-    // Control used to ignore the default data values, required for testing specific behavior
-    'ignore-data': {
-      name: 'Ignore Data Value',
-      control: { type: 'boolean' },
-    },
-  },
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  size: 'md',
-  bordered: true,
-  itemsSource: 'children',
-  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' },
-  ],
-  pattern: '',
-  'data-errormessage-value-missing': 'Please fill out this field.',
-  'data-errormessage-pattern-mismatch': 'Please match the requested format.',
-};