@descope/web-components-ui 1.0.426 → 1.0.428

package/node_modules/descope-avatar/project.json

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

package/node_modules/descope-avatar/src/component/AvatarClass.js

@@ -1,109 +0,0 @@
-import { createStyleMixin, draggableMixin, componentNameValidationMixin } from 'common/components-mixins';
-import { createBaseClass } from 'common/base-classes';
-import { compose } from 'common/utils';
-import { forwardAttrs, getComponentName, observeAttributes } from 'common/components-helpers';
-
-export const componentName = getComponentName('avatar');
-class RawAvatar extends createBaseClass({ componentName, baseSelector: ':host > .wrapper' }) {
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
-					display: inline-flex;
-				}
-
-        .editableBadge {
-          border: 1px solid;
-          border-radius: 100%;
-          height: fit-content;
-          width: 25%;
-          height: 25%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 5%;
-          box-sizing: border-box;
-          position: absolute;
-          bottom: 0;
-          inset-inline-end: 0;
-        }
-
-        vaadin-icon {
-          color: currentcolor;
-        }
-
-        vaadin-avatar {
-          width: 100%;
-          height: 100%;
-          margin: 0;
-          border: none
-        }
-
-        .wrapper {
-          display: inline-flex;
-          position: relative;
-          width: 100%;
-          height: 100%;
-        }
-      </style>
-
-
-      <div class="wrapper">
-        <vaadin-avatar></vaadin-avatar>
-        <div class="editableBadge">
-          <vaadin-icon icon="vaadin:pencil"></vaadin-icon>
-        </div>
-      </div>
-		`;
-
-    this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
-
-    forwardAttrs(this, this.avatarComponent, {
-      includeAttrs: ['display-name', 'img', 'abbr'],
-      mapAttrs: { 'display-name': 'name' },
-    });
-
-    const editableIcon = this.shadowRoot.querySelector('.editableBadge');
-
-    observeAttributes(
-      this,
-      () => {
-        editableIcon.style.display = this.isEditable ? '' : 'none';
-      },
-      { includeAttrs: ['editable'] }
-    );
-  }
-
-  get isEditable() {
-    return this.getAttribute('editable') === 'true';
-  }
-}
-
-const { host, editableBadge, avatar } = {
-  host: { selector: () => ':host' },
-  editableBadge: { selector: '> .editableBadge' },
-  avatar: { selector: 'vaadin-avatar' },
-};
-
-export const AvatarClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostWidth: [
-        { ...host, property: 'width' },
-        { ...host, property: 'min-width' },
-      ],
-      hostHeight: { ...host, property: 'height' },
-      cursor: [avatar, host],
-      hostDirection: { ...host, property: 'direction' },
-      avatarTextColor: { ...avatar, property: 'color' },
-      avatarBackgroundColor: { ...avatar, property: 'background-color' },
-      editableIconColor: { ...editableBadge, property: 'color' },
-      editableBorderColor: { ...editableBadge, property: 'border-color' },
-      editableBackgroundColor: { ...editableBadge, property: 'background-color' },
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
-)(RawAvatar);

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

@@ -1,8 +0,0 @@
-import { componentName, AvatarClass } from './AvatarClass';
-import '@vaadin/avatar';
-import '@vaadin/icon';
-import '@vaadin/icons';
-
-customElements.define(componentName, AvatarClass);
-
-export { AvatarClass };

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

@@ -1,44 +0,0 @@
-import globals from 'theme-globals';
-import { AvatarClass } from './component/AvatarClass';
-import { getThemeRefs } from 'common/theme-helpers';
-
-const globalRefs = getThemeRefs(globals);
-const compVars = AvatarClass.cssVarList;
-
-const avatar = {
-  [compVars.hostDirection]: globalRefs.direction,
-  [compVars.editableIconColor]: globalRefs.colors.surface.dark,
-  [compVars.editableBorderColor]: globalRefs.colors.surface.dark,
-  [compVars.editableBackgroundColor]: globalRefs.colors.surface.main,
-  [compVars.avatarTextColor]: globalRefs.colors.surface.main,
-  [compVars.avatarBackgroundColor]: globalRefs.colors.surface.dark,
-
-  _editable: {
-    [compVars.cursor]: 'pointer',
-  },
-
-  size: {
-    xs: {
-      [compVars.hostWidth]: '30px',
-      [compVars.hostHeight]: '30px',
-    },
-    sm: {
-      [compVars.hostWidth]: '40px',
-      [compVars.hostHeight]: '40px',
-    },
-    md: {
-      [compVars.hostWidth]: '60px',
-      [compVars.hostHeight]: '60px',
-    },
-    lg: {
-      [compVars.hostWidth]: '98px',
-      [compVars.hostHeight]: '98px',
-    },
-  },
-};
-
-export default avatar;
-
-export const vars = {
-  ...compVars,
-};

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

@@ -1,32 +0,0 @@
-import { componentName } from '../src/component/AvatarClass';
-import { directionControl, sizeControl } from 'common/sb-controls';
-import img from './avatar.jpeg'
-
-const Template = ({ 'display-name': displayName, img, size, editable, direction }) => `
-  <descope-avatar
-    display-name="${displayName || ''}"
-    img="${img}"
-    size="${size}"
-    editable="${editable || ''}"
-    st-host-direction="${direction ?? ''}">
-  ></descope-avatar
-`;
-
-export default {
-  component: componentName,
-  title: 'descope-avatar',
-  argTypes: {
-    ...sizeControl,
-    ...directionControl,
-  },
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  img: img,
-  'display-name': 'John Doe',
-  size: 'sm',
-  editable: false,
-  direction: ''
-};

package/node_modules/descope-combo-box/e2e/descope-combo-box.spec.ts

@@ -1,462 +0,0 @@
-import { test, expect } from '@playwright/test';
-import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
-import { createComboBoxTestDriver } from 'test-drivers';
-
-const storyName = 'descope-combo-box';
-const componentName = 'descope-combo-box';
-
-const BooleanValues = ['true', 'false'];
-
-const componentAttributes = {
-  label: 'Number field label',
-  placeholder: 'Test placeholder',
-  size: ['xs', 'sm', 'md', 'lg'],
-  bordered: BooleanValues,
-  readonly: BooleanValues,
-  required: BooleanValues,
-  'full-width': BooleanValues,
-  disabled: 'true',
-  'default-value': 'itemId2',
-};
-
-const presets = {
-  'Render with alt item renderer': {
-    itemsSource: 'prop',
-    overrideRenderItem: 'true',
-  },
-  'Render with data property': { itemsSource: 'prop' },
-  'Render with data attribute': { itemsSource: 'attr' },
-  'Render with data property and default value': {
-    itemsSource: 'prop',
-    'default-value': 'itemId2',
-  },
-};
-
-const rtlPresets = {
-  'direction rtl': {
-    direction: 'rtl',
-    label: '-Test Label',
-    placeholder: '-Test Placeholder',
-    itemsSource: 'attr',
-    'data[0].displayName': '-Item 1',
-    'data[1].displayName': '-Item 2',
-    'data[1].label': '-Data Item 2',
-  },
-  'direction rtl required': {
-    direction: 'rtl',
-    label: '-Test Label',
-    placeholder: '-Test Placeholder',
-    itemsSource: 'attr',
-    'data[0].displayName': '-Item 1',
-    'data[1].displayName': '-Item 2',
-    'data[1].label': '-Data Item 2',
-    required: 'true',
-  },
-};
-
-const floatingLabelProps = {
-  'label-type': 'floating',
-  label: 'label-',
-  placeholder: 'placeholder',
-};
-
-export const floatingLabelTypePresets = {
-  'floating label ltr': floatingLabelProps,
-  'floating label rtl': {
-    ...floatingLabelProps,
-    direction: 'rtl',
-  },
-  'floating label ltr with value': {
-    ...floatingLabelProps,
-    'default-value': 'itemId2',
-    direction: 'ltr',
-  },
-  'floating label rtl with value': {
-    ...floatingLabelProps,
-    'default-value': 'itemId2',
-    direction: 'rtl',
-  },
-};
-
-test.describe('theme', () => {
-  const { placeholder, ...restConfig } = componentAttributes;
-
-  test.describe('with placeholder', () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto(getStoryUrl(storyName, { placeholder }), {
-        waitUntil: 'networkidle',
-      });
-      await page.waitForSelector(componentName);
-      const component = createComboBoxTestDriver(page.locator(componentName));
-      await component.clear();
-    });
-
-    test('hover', async ({ page }) => {
-      const component = createComboBoxTestDriver(page.locator(componentName));
-      await component.hover();
-      expect(await component.screenshot()).toMatchSnapshot();
-    });
-
-    test('focus', async ({ page }) => {
-      const component = createComboBoxTestDriver(page.locator(componentName));
-      await component.focus();
-      expect(await component.screenshot()).toMatchSnapshot();
-    });
-  });
-
-  loopPresets(presets, (preset, name) => {
-    test.describe(name, () => {
-      test.beforeEach(async ({ page }) => {
-        await page.goto(getStoryUrl(storyName, preset), {
-          waitUntil: 'networkidle',
-        });
-      });
-
-      test('hover', async ({ page }) => {
-        const component = createComboBoxTestDriver(page.locator(componentName));
-        await component.hover();
-        expect(
-          await component.screenshot({ animations: 'disabled' }),
-        ).toMatchSnapshot();
-      });
-
-      test('focus', async ({ page }) => {
-        const component = createComboBoxTestDriver(page.locator(componentName));
-        await component.focus();
-        expect(
-          await component.screenshot({ animations: 'disabled' }),
-        ).toMatchSnapshot();
-      });
-    });
-  });
-
-  test.describe('with value', () => {
-    loopConfig(restConfig, (attr, value) => {
-      test.describe(`${attr}: ${value}`, () => {
-        test.beforeEach(async ({ page }) => {
-          await page.goto(getStoryUrl(storyName, { [attr]: value }), {
-            waitUntil: 'networkidle',
-          });
-
-          const component = createComboBoxTestDriver(
-            page.locator(componentName),
-          );
-          component.setValue('itemId4');
-        });
-
-        test('hover', async ({ page }) => {
-          const component = createComboBoxTestDriver(
-            page.locator(componentName),
-          );
-          await component.hover();
-          expect(await component.screenshot()).toMatchSnapshot();
-        });
-
-        test('focus', async ({ page }) => {
-          const component = createComboBoxTestDriver(
-            page.locator(componentName),
-          );
-          await component.focus();
-          expect(await component.screenshot()).toMatchSnapshot();
-        });
-      });
-    });
-  });
-
-  test.describe('dropDown', () => {
-    loopConfig(
-      {
-        size: componentAttributes.size,
-        'full-width': componentAttributes['full-width'],
-      },
-      (attr, value) => {
-        test.describe(`${attr}: ${value}`, () => {
-          test.beforeEach(async ({ page }) => {
-            await page.goto(getStoryUrl(storyName, { [attr]: value }), {
-              waitUntil: 'networkidle',
-            });
-
-            const component = createComboBoxTestDriver(
-              page.locator(componentName),
-            );
-            await component.openDropdown();
-          });
-          test('visible', async ({ page }) => {
-            const component = createComboBoxTestDriver(
-              page.locator(componentName),
-            );
-            await component.hover();
-            expect(await component.dropDown.screenshot()).toMatchSnapshot();
-          });
-        });
-      },
-    );
-  });
-
-  test.describe('direction rtl', () => {
-    loopPresets(rtlPresets, (preset, name) => {
-      test(name, async ({ page }) => {
-        await page.goto(getStoryUrl(storyName, preset));
-        await page.waitForSelector(componentName);
-        const component = page.locator(componentName);
-
-        expect(
-          await component.screenshot({
-            animations: 'disabled',
-            timeout: 3000,
-            caret: 'hide',
-          }),
-        ).toMatchSnapshot();
-      });
-    });
-    test('with error', async ({ page }) => {
-      await page.goto(getStoryUrl(storyName, Object.values(rtlPresets)[1]), {
-        waitUntil: 'networkidle',
-      });
-      const component = createComboBoxTestDriver(page.locator(componentName));
-      await page.getByRole('button').getByText('Submit').click();
-      expect(await component.screenshot({ delay: 1000 })).toMatchSnapshot();
-    });
-
-    test('with open dropdown', async ({ page }) => {
-      await page.goto(getStoryUrl(storyName, Object.values(rtlPresets)[1]), {
-        waitUntil: 'networkidle',
-      });
-      const component = createComboBoxTestDriver(page.locator(componentName));
-      await component.openDropdown();
-      await component.hover();
-      expect(await component.dropDown.screenshot()).toMatchSnapshot();
-    });
-
-    test('with open dropdown and value', async ({ page }) => {
-      await page.goto(getStoryUrl(storyName, Object.values(rtlPresets)[1]), {
-        waitUntil: 'networkidle',
-      });
-      const component = createComboBoxTestDriver(page.locator(componentName));
-      await component.setValue('itemId2');
-      await component.openDropdown();
-      await component.hover();
-      expect(await component.dropDown.screenshot()).toMatchSnapshot();
-    });
-
-    test('with value', async ({ page }) => {
-      await page.goto(getStoryUrl(storyName, Object.values(rtlPresets)[1]), {
-        waitUntil: 'networkidle',
-      });
-      const component = createComboBoxTestDriver(page.locator(componentName));
-      await component.setValue('itemId2');
-      expect(await component.screenshot()).toMatchSnapshot();
-    });
-  });
-});
-
-test.describe('logic', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, { 'full-width': true }), {
-      waitUntil: 'networkidle',
-    });
-  });
-
-  test('select item', async ({ page }) => {
-    const component = createComboBoxTestDriver(page.locator(componentName));
-    await component.openDropdown();
-    await component.selectItem("Achilles' Fateful Wrath");
-
-    expect(await component.getValue()).toBe('itemId2');
-  });
-
-  // 'required' - not working as expected
-
-  test.describe('clear button', () => {
-    test('clear button visible when has value', async ({ page }) => {
-      await page.goto(getStoryUrl(storyName, { 'default-value': 'itemId2' }), {
-        waitUntil: 'networkidle',
-      });
-      const component = createComboBoxTestDriver(page.locator(componentName));
-      await component.clearSelection();
-      expect(await component.getValue()).toBe('');
-    });
-  });
-
-  test('loading state', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, {}));
-    const componentLocator = page.locator(componentName);
-    const component = createComboBoxTestDriver(componentLocator);
-
-    await componentLocator.evaluate((node: HTMLElement) => {
-      node.setAttribute('loading', 'true');
-    });
-    await component.openDropdown();
-    expect(
-      await component.dropDown.screenshot({ animations: 'disabled' }),
-    ).toMatchSnapshot();
-
-    await componentLocator.evaluate((node: HTMLElement) => {
-      node.removeAttribute('loading');
-    });
-    await page.waitForTimeout(1000);
-    expect(
-      await component.dropDown.screenshot({ animations: 'disabled' }),
-    ).toMatchSnapshot();
-  });
-
-  test('allow custom value', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, { 'allow-custom-value': true }));
-    const component = createComboBoxTestDriver(page.locator(componentName));
-    const value = 'new value';
-    await component.setValue(value);
-    expect(await component.screenshot()).toMatchSnapshot();
-    expect(await component.getValue()).toBe(value);
-  });
-
-  test.describe('reset value', () => {
-    const testResetValue = async (
-      page: any,
-      allowCustomValue: boolean,
-      extraSteps?: (component: any) => Promise<void>,
-    ) => {
-      const urlParams = allowCustomValue ? { 'allow-custom-value': true } : {};
-      await page.goto(getStoryUrl(storyName, urlParams));
-      const component = createComboBoxTestDriver(page.locator(componentName));
-      await component.setValue('itemId2');
-      expect(await component.getValue()).toBe('itemId2');
-      expect(await component.screenshot()).toMatchSnapshot();
-      await component.setValue('');
-      expect(await component.getValue()).toBe('');
-      expect(await component.screenshot()).toMatchSnapshot();
-
-      if (extraSteps) {
-        await extraSteps(component);
-      }
-    };
-
-    test('no custom value', async ({ page }) => {
-      await testResetValue(page, false);
-    });
-
-    test('allow custom value', async ({ page }) => {
-      await testResetValue(page, true, async (component) => {
-        await component.setValue('new value');
-        expect(await component.getValue()).toBe('new value');
-        expect(await component.screenshot()).toMatchSnapshot();
-        await component.setValue('');
-        expect(await component.getValue()).toBe('');
-        expect(await component.screenshot()).toMatchSnapshot();
-      });
-    });
-  });
-
-  test('error message with icon', async ({ page }) => {
-    await page.goto(
-      getStoryUrl(storyName, { required: true, errorMsgIcon: true }),
-    );
-
-    const component = createComboBoxTestDriver(page.locator(componentName));
-
-    await page.getByRole('button').getByText('Submit').click();
-
-    await component.blur();
-
-    expect(
-      await component.screenshot({
-        animations: 'disabled',
-        caret: 'hide',
-        delay: 3000,
-      }),
-    ).toMatchSnapshot();
-  });
-});
-
-test.describe('variants', () => {
-  loopPresets(floatingLabelTypePresets, (preset, name) => {
-    test.describe(name, () => {
-      test.beforeEach(async ({ page }) => {
-        await page.goto(getStoryUrl(storyName, preset), {
-          waitUntil: 'networkidle',
-        });
-      });
-
-      test('hover', async ({ page }) => {
-        const component = createComboBoxTestDriver(page.locator(componentName));
-        await component.setValue('itemId2');
-        await component.hover();
-        expect(
-          await component.screenshot({ animations: 'disabled' }),
-        ).toMatchSnapshot();
-      });
-      test('focus', async ({ page }) => {
-        const component = createComboBoxTestDriver(page.locator(componentName));
-        await component.focus();
-        expect(
-          await component.screenshot({ animations: 'disabled' }),
-        ).toMatchSnapshot();
-      });
-    });
-  });
-});
-
-test.describe('hide toggle button', () => {
-  test('hide toggle button', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, { 'hide-toggle-button': true }));
-    const component = createComboBoxTestDriver(page.locator(componentName));
-    expect(await component.screenshot()).toMatchSnapshot();
-    await component.openDropdown();
-    expect(await component.dropDown.screenshot()).toMatchSnapshot();
-    await component.insertValue('itemname1');
-    expect(await component.screenshot()).toMatchSnapshot();
-    expect(await component.dropDown.screenshot()).toMatchSnapshot();
-  });
-});
-
-test.describe('data attribute', () => {
-  test('clear items', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, { itemsSource: 'prop' }));
-    const componentLocator = page.locator(componentName);
-    const component = createComboBoxTestDriver(componentLocator);
-    await component.openDropdown();
-    let items = await component.getItems();
-    expect(items).toHaveLength(4);
-    // Reduce data items
-    await componentLocator.evaluate((node: HTMLElement & { data: any[] }) => {
-      node.data = [
-        { displayName: 'Item1', value: '1', label: 'data item 1' },
-        { displayName: 'Item2', value: '2', label: 'data item 2' },
-      ];
-    });
-    items = await component.getItems();
-    expect(items).toHaveLength(2);
-    // Clear data items
-    await componentLocator.evaluate((node: HTMLElement & { data: any[] }) => {
-      node.data = [];
-    });
-    items = await component.getItems();
-    expect(items).toHaveLength(0);
-  });
-
-  test('allow custom value with no items', async ({ page }) => {
-    await page.goto(
-      getStoryUrl(storyName, {
-        itemsSource: 'prop',
-        'allow-custom-value': true,
-      }),
-    );
-    const componentLocator = page.locator(componentName);
-    const component = createComboBoxTestDriver(componentLocator);
-    // Clear data items
-    await componentLocator.evaluate((node: HTMLElement & { data: any[] }) => {
-      node.data = [];
-    });
-    await component.setValue('new value');
-    expect(await component.getValue()).toBe('new value');
-    expect(await component.screenshot()).toMatchSnapshot();
-  });
-});
-
-test.describe('override renderer', () => {
-  test('custom background', async ({ page }) => {
-    await page.goto(getStoryUrl(storyName, { overrideRenderer: true }));
-    const component = createComboBoxTestDriver(page.locator(componentName));
-    await component.openDropdown();
-    expect(await component.dropDown.screenshot()).toMatchSnapshot();
-  });
-});

package/node_modules/descope-combo-box/package.json

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