@descope/web-components-ui 1.0.426 → 1.0.428

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

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

package/node_modules/descope-combo-box/src/component/ComboBoxClass.js

@@ -1,619 +0,0 @@
-import { compose } from 'common/utils';
-import {
-  getComponentName,
-  observeAttributes,
-  observeChildren,
-} from 'common/components-helpers';
-import {
-  resetInputLabelPosition,
-  resetInputCursor,
-  resetInputPlaceholder,
-  resetInputReadonlyStyle,
-  useHostExternalPadding,
-  inputFloatingLabelStyle,
-} from 'common/theme-helpers';
-import {
-  createStyleMixin,
-  draggableMixin,
-  createProxy,
-  componentNameValidationMixin,
-  portalMixin,
-  proxyInputMixin,
-} from 'common/components-mixins';
-
-export const componentName = getComponentName('combo-box');
-
-const ComboBoxMixin = (superclass) =>
-  class ComboBoxMixinClass extends superclass {
-    static get observedAttributes() {
-      return ['label-type'];
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    #renderItem = ({ displayName, value, label }) => {
-      return `<span data-name="${label}" data-id="${value}">${
-        displayName || label
-      }</span>`;
-    };
-
-    #data;
-
-    get defaultValue() {
-      return this.getAttribute('default-value');
-    }
-
-    get renderItem() {
-      return this.#renderItem;
-    }
-
-    set renderItem(renderFn) {
-      this.#renderItem = renderFn;
-      this.renderItems();
-    }
-
-    set renderer(fn) {
-      // fn takes (root, comboBox, model) as arguments
-      this.baseElement.renderer = fn;
-    }
-
-    get loading() {
-      return this.getAttribute('loading') === 'true';
-    }
-
-    set loading(val) {
-      if (val) {
-        this.setAttribute('loading', 'true');
-      } else {
-        this.removeAttribute('loading');
-      }
-    }
-
-    get data() {
-      if (this.#data) return this.#data;
-
-      const dataAttr = this.getAttribute('data');
-
-      if (dataAttr) {
-        try {
-          const data = JSON.parse(dataAttr);
-          if (this.isValidDataType(data)) {
-            return data;
-          }
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.error(
-            'could not parse data string from attribute "data" -',
-            e.message,
-          );
-        }
-      }
-
-      return [];
-    }
-
-    set data(data) {
-      if (this.isValidDataType(data)) {
-        this.#data = data;
-        this.renderItems();
-      }
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    isValidDataType(data) {
-      const isValid = Array.isArray(data);
-      if (!isValid) {
-        // eslint-disable-next-line no-console
-        console.error('data must be an array, received:', data);
-      }
-
-      return isValid;
-    }
-
-    getItemsTemplate() {
-      return this.data?.reduce?.(
-        (acc, item) => acc + (this.renderItem?.(item || {}) || ''),
-        '',
-      );
-    }
-
-    renderItems() {
-      if (this.#data || this.getAttribute('data')) {
-        const template = this.getItemsTemplate();
-        this.innerHTML = template;
-      }
-    }
-
-    handleSelectedItem() {
-      const { selectedItem } = this.baseElement;
-      const currentSelected = selectedItem?.['data-id'];
-
-      // If the selected item is still a child, there's no need to update the value
-      if (selectedItem && Array.from(this.children).includes(selectedItem)) {
-        return;
-      }
-
-      // if previously selected item ID exists in current children, set it as selected
-      if (currentSelected) {
-        this.value = currentSelected;
-      }
-
-      // otherwise, if default value is specified, set default value as selected item
-      if (!this.value) {
-        this.setDefaultValue();
-      }
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-    customValueTransformFn(val) {
-      return val;
-    }
-
-    // We want to override Vaadin's Combo Box value setter. This is needed since Vaadin couples between the
-    // field that it searches the value, and the finaly display value of the input.
-    // We provide a custom transform function to override that behavior.
-    setComboBoxDescriptor() {
-      const valueDescriptor = Object.getOwnPropertyDescriptor(
-        this.inputElement.constructor.prototype,
-        'value',
-      );
-
-      const comboBox = this;
-
-      Object.defineProperties(this.inputElement, {
-        value: {
-          ...valueDescriptor,
-          set(val) {
-            if (
-              !comboBox.baseElement.items?.length &&
-              !comboBox.allowCustomValue
-            ) {
-              return;
-            }
-
-            const transformedValue = comboBox.customValueTransformFn(val) || '';
-
-            if (transformedValue === this.value) {
-              return;
-            }
-
-            valueDescriptor.set.call(this, transformedValue);
-          },
-        },
-      });
-    }
-
-    // vaadin api is to set props on their combo box node,
-    // in order to avoid it, we are passing the children of this component
-    // to the items & renderer props, so it will be used as the combo box items
-    #onChildrenChange() {
-      const items = Array.from(this.children);
-
-      // we want the data-name attribute to be accessible as an object attribute
-      items.forEach((node) => {
-        Object.defineProperty(node, 'data-name', {
-          value: node.getAttribute('data-name'),
-          configurable: true,
-          writable: true,
-        });
-        Object.defineProperty(node, 'data-id', {
-          value: node.getAttribute('data-id'),
-          configurable: true,
-          writable: true,
-        });
-      });
-
-      this.baseElement.items = items;
-      setTimeout(() => {
-        // set timeout to ensure this runs after customValueTransformFn had the chance to be overriden
-        this.handleSelectedItem();
-      }, 0);
-    }
-
-    // the default vaadin behavior is to attach the overlay to the body when opened
-    // 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',
-      );
-      overlay._attachOverlay = () => {
-        overlay.bringToFront();
-      };
-      overlay._detachOverlay = () => {};
-      overlay._enterModalState = () => {};
-    }
-
-    #overrideRenderer() {
-      // use vaadin combobox custom renderer to render options as HTML
-      // and not via default renderer, which renders only the data-name's value
-      // in its own HTML template
-      this.baseElement.renderer = (root, combo, model) => {
-        // eslint-disable-next-line no-param-reassign
-        root.innerHTML = model.item.outerHTML;
-      };
-    }
-
-    init() {
-      super.init?.();
-
-      // eslint-disable-next-line func-names
-      this.getValidity = function () {
-        if (!this.value && this.isRequired) {
-          return {
-            valueMissing: true,
-          };
-        }
-        return {};
-      };
-
-      this.setComboBoxDescriptor();
-      this.#overrideOverlaySettings();
-      this.#overrideRenderer();
-
-      // Set up observers - order matters here since renderItems can clear innerHTML
-      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 }),
-        );
-      });
-    }
-
-    onLabelClick() {
-      if (this.isReadOnly || this.isDisabled) {
-        return;
-      }
-      this.focus();
-      this.setAttribute('opened', 'true');
-    }
-
-    attributeChangedCallback(attrName, oldValue, newValue) {
-      super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-      if (oldValue !== newValue) {
-        if (attrName === 'label-type') {
-          if (newValue === 'floating') {
-            this.addEventListener('click', this.onLabelClick);
-          } else {
-            this.removeEventListener('click', this.onLabelClick);
-          }
-        }
-      }
-    }
-
-    setDefaultValue() {
-      if (this.defaultValue) {
-        this.value = this.defaultValue;
-      }
-    }
-
-    #getChildToSelect(val) {
-      return this.baseElement.items?.find((item) => item['data-id'] === val);
-    }
-
-    #preventSelectedItemChangeEventIfNeeded(val, selectedChild) {
-      // If the actual value didn't change, but the selected item did (the element changed),
-      // we want to stop the event propagation since it's not a real change
-      const shouldPreventItemChangeEvent =
-        val === this.value && selectedChild !== this.baseElement.selectedItem;
-      if (shouldPreventItemChangeEvent) {
-        this.baseElement.addEventListener(
-          'selected-item-changed',
-          (e) => {
-            e.stopImmediatePropagation();
-          },
-          { once: true, capture: true },
-        );
-      }
-    }
-
-    set value(val) {
-      const selectedChild = this.#getChildToSelect(val);
-      this.#preventSelectedItemChangeEventIfNeeded(val, selectedChild);
-      if (val && selectedChild) {
-        this.baseElement.selectedItem = selectedChild;
-      } else if (!selectedChild && this.allowCustomValue) {
-        this.baseElement.value = val;
-      } else {
-        this.baseElement.selectedItem = undefined;
-      }
-    }
-
-    get value() {
-      return this.baseElement.selectedItem?.['data-id'] || this.allowCustomValue
-        ? this.baseElement.__data.value || ''
-        : '';
-    }
-
-    get allowCustomValue() {
-      return this.getAttribute('allow-custom-value') === 'true';
-    }
-  };
-
-const {
-  host,
-  inputField,
-  inputElement,
-  placeholder,
-  toggle,
-  clearButton,
-  label,
-  requiredIndicator,
-  helperText,
-  errorMessage,
-} = {
-  host: { selector: () => ':host' },
-  inputField: { selector: '::part(input-field)' },
-  inputElement: { selector: 'input' },
-  placeholder: { selector: '> input:placeholder-shown' },
-  toggle: { selector: '::part(toggle-button)' },
-  clearButton: { selector: '::part(clear-button)' },
-  label: { selector: '::part(label)' },
-  requiredIndicator: {
-    selector: '[required]::part(required-indicator)::after',
-  },
-  helperText: { selector: '::part(helper-text)' },
-  errorMessage: { selector: '::part(error-message)' },
-};
-
-export const ComboBoxClass = compose(
-  createStyleMixin({
-    mappings: {
-      hostWidth: { ...host, property: 'width' },
-      hostDirection: { ...host, property: 'direction' },
-      // we apply font-size also on the host so we can set its width with em
-      fontSize: [{}, host],
-      fontFamily: [label, placeholder, inputField, helperText, errorMessage],
-      labelFontSize: { ...label, property: 'font-size' },
-      labelFontWeight: { ...label, property: 'font-weight' },
-      labelTextColor: [
-        { ...label, property: 'color' },
-        { ...requiredIndicator, property: 'color' },
-      ],
-      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',
-      },
-      inputHeight: { ...inputField, property: 'height' },
-      inputBackgroundColor: { ...inputField, property: 'background-color' },
-      inputBorderColor: { ...inputField, property: 'border-color' },
-      inputBorderWidth: { ...inputField, property: 'border-width' },
-      inputBorderStyle: { ...inputField, property: 'border-style' },
-      inputBorderRadius: { ...inputField, property: 'border-radius' },
-      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
-      inputValueTextColor: { ...inputField, property: 'color' },
-      inputPlaceholderTextColor: { ...placeholder, property: 'color' },
-      inputDropdownButtonCursor: [
-        { ...toggle, property: 'cursor' },
-        { ...clearButton, property: 'cursor' },
-      ],
-      inputDropdownButtonColor: [
-        { ...toggle, property: 'color' },
-        { ...clearButton, property: 'color' },
-      ],
-      inputDropdownButtonSize: [
-        { ...toggle, property: 'font-size' },
-        { ...clearButton, property: 'font-size' },
-      ],
-      inputDropdownButtonOffset: [
-        { ...toggle, property: 'margin-right' },
-        { ...toggle, property: 'margin-left' },
-      ],
-      inputOutlineColor: { ...inputField, property: 'outline-color' },
-      inputOutlineWidth: { ...inputField, property: 'outline-width' },
-      inputOutlineStyle: { ...inputField, property: 'outline-style' },
-      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
-      inputHorizontalPadding: [
-        { ...inputElement, property: 'padding-left' },
-        { ...inputElement, property: 'padding-right' },
-      ],
-
-      labelPosition: { ...label, property: 'position' },
-      labelTopPosition: { ...label, property: 'top' },
-      labelHorizontalPosition: [
-        { ...label, property: 'left' },
-        { ...label, property: 'right' },
-      ],
-      inputTransformY: { ...label, property: 'transform' },
-      inputTransition: { ...label, property: 'transition' },
-      marginInlineStart: { ...label, property: 'margin-inline-start' },
-      placeholderOpacity: { ...placeholder, property: 'opacity' },
-      inputVerticalAlignment: { ...inputField, property: 'align-items' },
-      valueInputHeight: { ...inputElement, property: 'height' },
-      valueInputMarginBottom: { ...inputElement, property: 'margin-bottom' },
-
-      // we need to use the variables from the portal mixin
-      // 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,
-      },
-      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,
-      },
-      overlayItemPaddingInlineStart: {
-        property: () => ComboBoxClass.cssVarList.overlay.itemPaddingInlineStart,
-      },
-      overlayItemPaddingInlineEnd: {
-        property: () => ComboBoxClass.cssVarList.overlay.itemPaddingInlineEnd,
-      },
-    },
-  }),
-  draggableMixin,
-  portalMixin({
-    name: 'overlay',
-    selector: '',
-    mappings: {
-      backgroundColor: [
-        { selector: 'vaadin-combo-box-scroller' },
-        { selector: 'vaadin-combo-box-overlay::part(overlay)' },
-      ],
-      minHeight: { selector: 'vaadin-combo-box-overlay' },
-      margin: { selector: 'vaadin-combo-box-overlay' },
-      cursor: { selector: 'vaadin-combo-box-item' },
-      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',
-      },
-      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',
-      },
-      loaderBorderColor: {
-        selector: 'vaadin-combo-box-overlay::part(loader)',
-        property: 'border-color',
-      },
-      loaderBorderRadius: {
-        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',
-      },
-    },
-    forward: {
-      include: false,
-      attributes: ['size'],
-    },
-  }),
-  proxyInputMixin({
-    proxyProps: ['selectionStart'],
-    inputEvent: 'selected-item-changed',
-  }),
-  componentNameValidationMixin,
-  ComboBoxMixin,
-)(
-  createProxy({
-    slots: ['', 'prefix'],
-    wrappedEleName: 'vaadin-combo-box',
-    style: () => `
-		:host {
-			display: inline-flex;
-			box-sizing: border-box;
-			-webkit-mask-image: none;
-		}
-		${useHostExternalPadding(ComboBoxClass.cssVarList)}
-		${resetInputReadonlyStyle('vaadin-combo-box')}
-		${resetInputPlaceholder('vaadin-combo-box')}
-		${resetInputCursor('vaadin-combo-box')}
-
-		vaadin-combo-box {
-			padding: 0;
-			width: 100%;
-		}
-		vaadin-combo-box::before {
-			height: initial;
-		}
-		vaadin-combo-box [slot="input"] {
-			-webkit-mask-image: none;
-			min-height: 0;
-			box-sizing: border-box;
-		}
-
-		vaadin-combo-box::part(input-field) {
-			padding: 0;
-			box-shadow: none;
-		}
-
-    vaadin-combo-box::part(toggle-button),
-    vaadin-combo-box::part(clear-button) {
-      align-self: center;
-    }
-
-    vaadin-combo-box[hide-toggle-button="true"]::part(toggle-button) {
-      display: none;
-    }
-
-    vaadin-combo-box[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {
-      opacity: 0;
-    }
-    vaadin-combo-box[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {
-      opacity: 0;
-    }
-
-    ${resetInputLabelPosition('vaadin-combo-box')}
-    ${inputFloatingLabelStyle()}
-		`,
-    // Note: we exclude `size` to avoid overriding Vaadin's ComboBox property
-    // with the same name. Including it will cause Vaadin to calculate NaN size,
-    // and reset items to an empty array, and opening the list box with no items
-    // to display.
-    excludeAttrsSync: ['tabindex', 'size', 'data', 'loading'],
-    componentName,
-    includeForwardProps: ['items', 'renderer', 'selectedItem'],
-  }),
-);

package/node_modules/descope-combo-box/src/component/index.js

@@ -1,6 +0,0 @@
-import '@vaadin/combo-box';
-import { componentName, ComboBoxClass } from './ComboBoxClass';
-
-customElements.define(componentName, ComboBoxClass);
-
-export { ComboBoxClass };