@descope/web-components-ui 1.0.427 → 1.0.429

package/node_modules/descope-combo-box/src/theme.js

@@ -1,93 +0,0 @@
-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;
-
-export const comboBox = {
-  [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.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.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.labelPosition]: refs.labelPosition,
-  [vars.labelTopPosition]: refs.labelTopPosition,
-  [vars.labelHorizontalPosition]: refs.labelHorizontalPosition,
-  [vars.inputTransformY]: refs.inputTransformY,
-  [vars.inputTransition]: refs.inputTransition,
-  [vars.marginInlineStart]: refs.marginInlineStart,
-  [vars.placeholderOpacity]: refs.placeholderOpacity,
-  [vars.inputVerticalAlignment]: refs.inputVerticalAlignment,
-  [vars.valueInputHeight]: refs.valueInputHeight,
-  [vars.valueInputMarginBottom]: refs.valueInputMarginBottom,
-
-  // error message icon
-  [vars.errorMessageIcon]: refs.errorMessageIcon,
-  [vars.errorMessageIconSize]: refs.errorMessageIconSize,
-  [vars.errorMessageIconPadding]: refs.errorMessageIconPadding,
-  [vars.errorMessageIconRepeat]: refs.errorMessageIconRepeat,
-  [vars.errorMessageIconPosition]: refs.errorMessageIconPosition,
-
-  _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',
-
-  [vars.overlay.contentHeight]: '100%',
-  [vars.overlay.contentOpacity]: '1',
-  _loading: {
-    [vars.overlay.loaderTop]: '50%',
-    [vars.overlay.loaderLeft]: '50%',
-    [vars.overlay.loaderRight]: 'auto',
-    // Margin has to be negative to center the loader, "transform" can't be used because the animation uses it
-    // Margin has to be half of the width/height of the loader to center it
-    [vars.overlay.loaderMargin]: '-15px 0 0 -15px',
-    [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.loaderBorderRadius]: '50%',
-    [vars.overlay.contentHeight]: '100px',
-    [vars.overlay.contentOpacity]: '0',
-  },
-};
-
-export default comboBox;
-export { vars };

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

@@ -1,180 +0,0 @@
-/* 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/descope-text/e2e/descope-text.spec.ts

@@ -1,35 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { getStoryUrl, loopConfig } from 'e2e-utils';
-
-const componentAttributes = {
-  text: 'Test Text',
-  variant: ['h1', 'h2', 'h3', 'subtitle1', 'subtitle2', 'body1', 'body2'],
-  mode: ['primary', 'secondary', 'success', 'error'],
-  'text-align': ['left', 'center', 'right'],
-  'hide-when-empty': ['true'],
-};
-
-const storyName = 'descope-text';
-const componentName = 'descope-text';
-
-test.describe('theme', () => {
-  loopConfig(componentAttributes, (attr, value) => {
-    test(`${attr}: ${value}`, async ({ page }) => {
-      await page.goto(getStoryUrl(storyName, { [attr]: value }));
-      const component = page.locator(componentName);
-      expect(await component.screenshot()).toMatchSnapshot();
-    });
-  });
-
-  test(`full-width: false`, async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, { 'full-width': false }));
-    const component = page.locator(componentName);
-    expect(await component.screenshot()).toMatchSnapshot();
-  });
-
-  test(`direction: rtl`, async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, { direction: 'rtl', text: '-Hello World' }));
-    const component = page.locator(componentName);
-    expect(await component.screenshot()).toMatchSnapshot();
-  });
-});

package/node_modules/descope-text/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "descope-text",
-  "version": "0.0.1",
-  "exports": {
-    ".": {
-      "import": "./src/component/index.js"
-    },
-    "./theme": {
-      "import": "./src/theme.js"
-    },
-    "./class": {
-      "import": "./src/component/TextClass.js"
-    }
-  },
-  "scripts": {
-    "test": "echo 'No tests defined' && exit 0",
-    "test:e2e": "echo 'No e2e tests defined' && exit 0"
-  },
-  "devDependencies": {
-    "e2e-utils": "workspace:*",
-    "@playwright/test": "1.38.1"
-  },
-  "dependencies": {
-    "common": "0.0.1",
-    "theme-globals": "0.0.1"
-  },
-  "private": true,
-  "publishConfig": {
-    "link-workspace-packages": false
-  }
-}

package/node_modules/descope-text/project.json

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

package/node_modules/descope-text/src/component/TextClass.js

@@ -1,63 +0,0 @@
-import { createStyleMixin, draggableMixin, componentNameValidationMixin } from 'common/components-mixins';
-import { compose } from 'common/utils';
-import { getComponentName, observeChildren } from 'common/components-helpers';
-import { createBaseClass } from 'common/base-classes';
-
-export const componentName = getComponentName('text');
-
-class RawText extends createBaseClass({ componentName, baseSelector: ':host > slot' }) {
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
-      :host {
-        display: inline-block;
-        line-height: 1em;
-      }
-      :host > slot {
-        width: 100%;
-        display: inline-block;
-      }
-    </style>
-    <slot part="text-wrapper"></slot>
-    `;
-  }
-
-  get hideWhenEmpty() {
-    return this.getAttribute('hide-when-empty') === 'true';
-  }
-
-  init() {
-    super.init();
-
-    observeChildren(this, () => {
-      const hasChildren = !!this.childNodes.length;
-      this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
-    });
-  }
-}
-
-export const TextClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostWidth: { selector: () => ':host', property: 'width' },
-      hostDirection: { selector: () => ':host', property: 'direction' },
-      fontSize: {},
-      textColor: { property: 'color' },
-      textLineHeight: { property: 'line-height' },
-      textLetterSpacing: { property: 'letter-spacing' },
-      textShadow: {},
-      textAlign: {},
-      textTransform: {},
-      fontFamily: {},
-      fontStyle: {},
-      fontWeight: {},
-      borderWidth: {},
-      borderStyle: {},
-      borderColor: {},
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
-)(RawText);

package/node_modules/descope-text/src/component/index.js

@@ -1,5 +0,0 @@
-import { componentName, TextClass } from './TextClass';
-
-customElements.define(componentName, TextClass);
-
-export { TextClass };

package/node_modules/descope-text/src/theme.js

@@ -1,91 +0,0 @@
-import globals from 'theme-globals';
-import { getThemeRefs } from 'common/theme-helpers';
-import { TextClass } from './component/TextClass';
-
-const globalRefs = getThemeRefs(globals);
-const vars = TextClass.cssVarList;
-
-const text = {
-  [vars.hostDirection]: globalRefs.direction,
-  [vars.textLineHeight]: '1.35em',
-  [vars.textAlign]: 'left',
-  [vars.textColor]: globalRefs.colors.surface.dark,
-
-  variant: {
-    h1: {
-      [vars.fontSize]: globalRefs.typography.h1.size,
-      [vars.fontWeight]: globalRefs.typography.h1.weight,
-      [vars.fontFamily]: globalRefs.typography.h1.font,
-    },
-    h2: {
-      [vars.fontSize]: globalRefs.typography.h2.size,
-      [vars.fontWeight]: globalRefs.typography.h2.weight,
-      [vars.fontFamily]: globalRefs.typography.h2.font,
-    },
-    h3: {
-      [vars.fontSize]: globalRefs.typography.h3.size,
-      [vars.fontWeight]: globalRefs.typography.h3.weight,
-      [vars.fontFamily]: globalRefs.typography.h3.font,
-    },
-    subtitle1: {
-      [vars.fontSize]: globalRefs.typography.subtitle1.size,
-      [vars.fontWeight]: globalRefs.typography.subtitle1.weight,
-      [vars.fontFamily]: globalRefs.typography.subtitle1.font,
-    },
-    subtitle2: {
-      [vars.fontSize]: globalRefs.typography.subtitle2.size,
-      [vars.fontWeight]: globalRefs.typography.subtitle2.weight,
-      [vars.fontFamily]: globalRefs.typography.subtitle2.font,
-    },
-    body1: {
-      [vars.fontSize]: globalRefs.typography.body1.size,
-      [vars.fontWeight]: globalRefs.typography.body1.weight,
-      [vars.fontFamily]: globalRefs.typography.body1.font,
-    },
-    body2: {
-      [vars.fontSize]: globalRefs.typography.body2.size,
-      [vars.fontWeight]: globalRefs.typography.body2.weight,
-      [vars.fontFamily]: globalRefs.typography.body2.font,
-    },
-  },
-
-  mode: {
-    primary: {
-      [vars.textColor]: globalRefs.colors.surface.contrast,
-    },
-    secondary: {
-      [vars.textColor]: globalRefs.colors.surface.dark,
-    },
-    error: {
-      [vars.textColor]: globalRefs.colors.error.main,
-    },
-    success: {
-      [vars.textColor]: globalRefs.colors.success.main,
-    },
-  },
-
-  textAlign: {
-    right: { [vars.textAlign]: 'right' },
-    left: { [vars.textAlign]: 'left' },
-    center: { [vars.textAlign]: 'center' },
-  },
-
-  _fullWidth: {
-    [vars.hostWidth]: '100%',
-  },
-
-  _italic: {
-    [vars.fontStyle]: 'italic',
-  },
-
-  _uppercase: {
-    [vars.textTransform]: 'uppercase',
-  },
-
-  _lowercase: {
-    [vars.textTransform]: 'lowercase',
-  },
-};
-
-export default text;
-export { vars };

package/node_modules/descope-text/stories/descope-text.stories.js

@@ -1,55 +0,0 @@
-import { componentName } from '../src/component/TextClass';
-import {
-  textContentControl,
-  textAlignControl,
-  modeControl,
-  fullWidthControl,
-  typographyVariantControl,
-  directionControl,
-} from 'common/sb-controls';
-
-const Template = ({
-  variant,
-  mode,
-  'text-align': textAlign,
-  'full-width': fullWidth,
-  text,
-  'hide-when-empty': hideWhenEmpty,
-  direction,
-}) => `
-    <descope-text
-      mode="${mode || ''}"
-      variant="${variant || ''}"
-      full-width="${fullWidth || false}"
-      text-align="${textAlign}"
-      hide-when-empty="${hideWhenEmpty}"
-      st-host-direction="${direction ?? ''}"
-    >${text}</descope-text>
-  `;
-
-export default {
-  component: componentName,
-  title: 'descope-text',
-  parameters: {
-    panelPosition: 'right',
-    controls: { expanded: true },
-  },
-  argTypes: {
-    ...textContentControl,
-    ...modeControl,
-    ...textAlignControl,
-    ...fullWidthControl,
-    ...typographyVariantControl,
-    ...directionControl,
-  },
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  text: 'Lorem Ipsum',
-  variant: 'h1',
-  mode: 'primary',
-  'hide-when-empty': false,
-  fullWidth: true, // full-width is true by default for test purposes, which expect this as default and test the FALSE override only
-};

package/node_modules/theme-globals/package.json

@@ -1,16 +0,0 @@
-{
-  "name": "theme-globals",
-  "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"
-  },
-  "private": true,
-  "publishConfig": {
-    "link-workspace-packages": false
-  }
-}

package/node_modules/theme-globals/project.json

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