@descope/web-components-ui 0.0.1

package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js

@@ -0,0 +1,133 @@
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { compose } from '../../../helpers';
+import {
+  createStyleMixin,
+  proxyInputMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+  createProxy,
+} from '../../../mixins';
+import { booleanFieldMixin } from '../booleanFieldMixin';
+import commonStyles from '../commonStyles';
+import { useHostExternalPadding } from '../../../helpers/themeHelpers/resetHelpers';
+
+export const componentName = getComponentName('checkbox');
+
+const {
+  host,
+  component,
+  checkboxElement,
+  checkboxSurface,
+  checkboxLabel,
+  requiredIndicator,
+  helperText,
+  errorMessage,
+} = {
+  host: { selector: () => ':host' },
+  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
+  component: { selector: 'vaadin-checkbox' },
+  checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
+  checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
+  checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
+
+export const CheckboxClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+
+      fontSize: [host, checkboxElement, checkboxLabel],
+      fontFamily: [checkboxLabel, helperText, errorMessage],
+
+      labelTextColor: { ...checkboxLabel, property: 'color' },
+      labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
+      labelLineHeight: { ...checkboxLabel, property: 'line-height' },
+      labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+
+      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' },
+
+      inputValueTextColor: { ...checkboxSurface, property: 'color' },
+      inputBackgroundColor: { ...checkboxElement, property: 'background-color' },
+
+      inputBorderRadius: { ...checkboxElement, property: 'border-radius' },
+      inputBorderWidth: { ...checkboxElement, property: 'border-width' },
+      inputBorderOffset: { ...checkboxElement, property: 'border-offset' },
+      inputBorderColor: { ...checkboxElement, property: 'border-color' },
+      inputBorderStyle: { ...checkboxElement, property: 'border-style' },
+
+      inputOutlineWidth: { ...checkboxElement, property: 'outline-width' },
+      inputOutlineOffset: { ...checkboxElement, property: 'outline-offset' },
+      inputOutlineColor: { ...checkboxElement, property: 'outline-color' },
+      inputOutlineStyle: { ...checkboxElement, property: 'outline-style' },
+
+      inputSize: [
+        { ...checkboxElement, property: 'width' },
+        { ...checkboxElement, property: 'height' },
+        { ...checkboxSurface, property: 'font-size' },
+        { ...component, property: 'font-size' },
+      ],
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  componentNameValidationMixin,
+  booleanFieldMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
+			${commonStyles}
+      ${useHostExternalPadding(CheckboxClass.cssVarList)}
+
+      :host {
+				display: inline-flex;
+				max-width: 100%;
+        margin: 1px;
+      }
+
+      :host ::part(error-message) {
+        direction: ltr;
+      }
+
+      vaadin-text-field {
+        width: 100%;
+      }
+
+      descope-boolean-field-internal {
+				padding: 0;
+				width: 100%;
+        height: 100%;
+      }
+
+      vaadin-checkbox::part(checkbox) {
+        margin: 0;
+      }
+
+      vaadin-checkbox::part(checkbox)::after {
+        top: 0;
+        left: 0;
+        -webkit-text-fill-color: initial;
+      }
+
+       vaadin-checkbox label {
+        -webkit-text-fill-color: initial;
+      }
+
+      vaadin-text-field::part(input-field)::after {
+        content: none;
+      }
+    `,
+    excludeAttrsSync: ['label', 'tabindex'],
+    componentName,
+  })
+);

package/src/components/boolean-fields/descope-checkbox/index.js

@@ -0,0 +1,8 @@
+import { componentName, CheckboxClass } from './CheckboxClass';
+import '@vaadin/checkbox';
+import '@vaadin/text-field';
+import '../descope-boolean-field-internal';
+
+customElements.define(componentName, CheckboxClass);
+
+export { CheckboxClass };

package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js

@@ -0,0 +1,154 @@
+import { getComponentName } from '../../../helpers/componentHelpers';
+import { compose } from '../../../helpers';
+import {
+  createStyleMixin,
+  proxyInputMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+  createProxy,
+} from '../../../mixins';
+import { booleanFieldMixin } from '../booleanFieldMixin';
+import commonStyles from '../commonStyles';
+import { useHostExternalPadding } from '../../../helpers/themeHelpers/resetHelpers';
+
+export const componentName = getComponentName('switch-toggle');
+
+const {
+  host,
+  component,
+  checkboxElement: track,
+  checkboxSurface: knob,
+  checkboxLabel,
+  requiredIndicator,
+  helperText,
+  errorMessage,
+} = {
+  host: { selector: () => ':host' },
+  requiredIndicator: { selector: '[required] vaadin-checkbox [slot="label"]:not(:empty)::after' },
+  component: { selector: 'vaadin-checkbox' },
+  checkboxElement: { selector: 'vaadin-checkbox::part(checkbox)' },
+  checkboxSurface: { selector: 'vaadin-checkbox::part(checkbox)::after' },
+  checkboxLabel: { selector: 'vaadin-checkbox [slot="label"]:not(:empty)' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
+
+export const SwitchToggleClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+
+      fontSize: [component, checkboxLabel, checkboxLabel],
+      fontFamily: [checkboxLabel, helperText, errorMessage],
+
+      labelTextColor: { ...checkboxLabel, property: 'color' },
+      labelSpacing: { ...checkboxLabel, property: 'padding-inline-start' },
+      labelLineHeight: { ...checkboxLabel, property: 'line-height' },
+      labelFontWeight: { ...checkboxLabel, property: 'font-weight' },
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+
+      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' },
+
+      trackBorderWidth: { ...track, property: 'border-width' },
+      trackBorderStyle: { ...track, property: 'border-style' },
+      trackBorderColor: { ...track, property: 'border-color' },
+      trackBackgroundColor: { ...track, property: 'background-color' },
+      trackBorderRadius: { ...track, property: 'border-radius' },
+      trackWidth: [{ ...track, property: 'width' }],
+      trackHeight: [
+        { ...knob, property: 'font-size' },
+        { ...track, property: 'height' },
+      ],
+
+      knobSize: [
+        { ...knob, property: 'width' },
+        { ...knob, property: 'height' },
+      ],
+      knobTextColor: { ...knob, property: 'color' },
+      knobRadius: { ...knob, property: 'border-radius' },
+      knobTransitionDuration: { ...knob, property: 'transition' },
+      knobColor: { ...knob, property: 'background-color' },
+      knobTopOffset: { ...knob, property: 'top' },
+      knobLeftOffset: { ...knob, property: 'left' },
+
+      inputOutlineWidth: { ...track, property: 'outline-width' },
+      inputOutlineOffset: { ...track, property: 'outline-offset' },
+      inputOutlineColor: { ...track, property: 'outline-color' },
+      inputOutlineStyle: { ...track, property: 'outline-style' },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  componentNameValidationMixin,
+  booleanFieldMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => `
+			${commonStyles}
+			${useHostExternalPadding(SwitchToggleClass.cssVarList)}
+
+      :host {
+				display: inline-flex;
+				max-width: 100%;
+      }
+
+      :host ::part(error-message) {
+        direction: ltr;
+      }
+
+      vaadin-text-field {
+        width: 100%;
+      }
+
+      vaadin-text-field::part(input-field)::after {
+        content: none;
+      }
+
+      descope-boolean-field-internal {
+				padding: 0;
+        width: 100%;
+      }
+
+      vaadin-text-field::part(input-field) {
+        cursor: pointer;
+      }
+
+      vaadin-checkbox {
+        cursor: pointer;
+      }
+
+      vaadin-checkbox [slot="label"]:not(:empty) {
+        cursor: pointer;
+			}
+
+      vaadin-checkbox::part(checkbox) {
+        margin: 0;
+			}
+
+      vaadin-checkbox::part(checkbox)::before {
+        content: '';
+			}
+
+      vaadin-checkbox[active]::part(checkbox) {
+				transform: none;
+			}
+
+      vaadin-checkbox::part(checkbox)::after {
+				position: absolute;
+				opacity: 1;
+				content: '';
+			}
+		`,
+    excludeAttrsSync: ['label', 'tabindex'],
+    componentName,
+  })
+);

package/src/components/boolean-fields/descope-switch-toggle/index.js

@@ -0,0 +1,8 @@
+import { componentName, SwitchToggleClass } from './SwitchToggleClass';
+import '@vaadin/checkbox';
+import '@vaadin/text-field';
+import '../descope-boolean-field-internal';
+
+customElements.define(componentName, SwitchToggleClass);
+
+export { SwitchToggleClass };

package/src/components/button-selection-group-fields/baseButtonSelectionGroup.js

@@ -0,0 +1,171 @@
+import { observeAttributes, observeChildren } from '../../helpers/componentHelpers';
+import {
+  resetInputLabelPosition,
+  resetInputCursor,
+  resetInputFieldDefaultWidth,
+} from '../../helpers/themeHelpers/resetHelpers';
+
+export const buttonSelectionGroupBaseMixin = (superclass) =>
+  class ButtonSelectionGroupMixinClass extends superclass {
+    // eslint-disable-next-line class-methods-use-this
+    #renderItem = ({ value, label }) =>
+      `<descope-button-selection-group-item value="${value}">${label}</descope-button-selection-group-item>`;
+
+    #data;
+
+    get renderItem() {
+      return this.#renderItem;
+    }
+
+    set renderItem(renderFn) {
+      this.#renderItem = renderFn;
+      this.renderItems();
+    }
+
+    get size() {
+      return this.inputElement?.size;
+    }
+
+    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() {
+      const template = this.getItemsTemplate();
+      if (template) this.innerHTML = template;
+    }
+
+    init() {
+      super.init?.();
+
+      this.renderItems();
+
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+
+      // we want new items to get the size
+      observeChildren(this, ({ addedNodes }) => {
+        addedNodes.forEach((node) => {
+          node.setAttribute('size', this.size);
+        });
+      });
+    }
+  };
+
+const { host, label, requiredIndicator, internalWrapper, errorMessage } = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  internalWrapper: { selector: () => ':host [part="internal-component"] slot' },
+  errorMessage: { selector: '::part(error-message)' },
+};
+
+export const buttonSelectionGroupMappings = {
+  hostWidth: { ...host, property: 'width' },
+  hostDirection: { ...host, property: 'direction' },
+  fontFamily: host,
+  labelTextColor: [
+    { ...label, property: 'color' },
+    { ...requiredIndicator, property: 'color' },
+  ],
+  labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+  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' },
+  itemsSpacing: { ...internalWrapper, property: 'gap' },
+};
+
+export const buttonSelectionGroupStyles = `
+			:host {
+				display: inline-flex;
+				max-width: 100%;
+			}
+			${resetInputFieldDefaultWidth()}
+			:host::after {
+				background-color: transparent;
+			}
+			:host::part(input-field)::after {
+				background-color: transparent;
+			}
+
+      [part="internal-component"] {
+				-webkit-mask-image: none;
+				padding: 0;
+				width: 100%;
+				height: 100%;
+        display: inline-block;
+				min-height: initial;
+			}
+
+			vaadin-text-field::part(input-field) {
+				background-color: transparent;
+				padding: 0;
+				overflow: hidden;
+				-webkit-mask-image: none;
+			}
+
+			vaadin-text-field {
+				margin: 0;
+				padding: 0;
+				width: 100%
+			}
+
+			vaadin-text-field::before {
+				height: 0;
+			}
+
+			vaadin-text-field[readonly] > input:placeholder-shown {
+				opacity: 1;
+			}
+
+			vaadin-text-field[readonly]::part(input-field)::after {
+				border: 0 solid;
+			}
+
+			vaadin-text-field::part(input-field) {
+				box-shadow: none;
+			}
+
+      ${resetInputLabelPosition('vaadin-text-field')}
+			${resetInputCursor('vaadin-text-field')}
+    `;

package/src/components/button-selection-group-fields/createBaseButtonSelectionGroupInternalClass.js

@@ -0,0 +1,101 @@
+import { createBaseInputClass } from '../../baseClasses/createBaseInputClass';
+import { observeAttributes } from '../../helpers/componentHelpers';
+import { createDispatchEvent } from '../../helpers/mixinsHelpers';
+
+export const createBaseButtonSelectionGroupInternalClass = (componentName) => {
+  class BaseButtonSelectionGroupInternalClass extends createBaseInputClass({
+    componentName,
+    baseSelector: 'slot',
+  }) {
+    constructor() {
+      super();
+
+      this.innerHTML = `
+      <style>
+      slot {
+        box-sizing: border-box;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+      }
+    </style>
+    <slot part="wrapper"></slot>
+      `;
+    }
+
+    dispatchChange = createDispatchEvent.bind(this, 'change');
+
+    get items() {
+      return this.querySelector('slot').assignedElements();
+    }
+
+    get isReadonly() {
+      return this.getAttribute('readonly') === 'true';
+    }
+
+    get size() {
+      return this.getAttribute('size') || 'md';
+    }
+
+    // eslint-disable-next-line getter-return, class-methods-use-this
+    get value() {
+      // eslint-disable-next-line no-console
+      console.warn('get value', 'is not implemented');
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    set value(value) {
+      // eslint-disable-next-line no-console
+      console.warn('set value', 'is not implemented');
+    }
+
+    onSizeChange() {
+      this.items.forEach((item) => {
+        item.setAttribute('size', this.size);
+      });
+    }
+
+    onReadOnlyChange() {
+      this.querySelector('slot').toggleAttribute('inert', this.isReadonly);
+    }
+
+    // eslint-disable-next-line class-methods-use-this
+    getValidity() {
+      // eslint-disable-next-line no-console
+      console.warn('getValidity', 'is not implemented');
+    }
+
+    onObservedAttributeChange(attrs) {
+      attrs.forEach((attr) => {
+        switch (attr) {
+          case 'size':
+            this.onSizeChange();
+            break;
+          case 'readonly':
+            this.onReadOnlyChange();
+            break;
+          default:
+            break;
+        }
+      });
+    }
+
+    init() {
+      // we are adding listeners before calling to super because it's stopping the events
+      this.addEventListener('focus', (e) => {
+        // we want to ignore focus events we are dispatching
+        if (e.isTrusted) {
+          this.items[0]?.focus();
+        }
+      });
+
+      super.init?.();
+
+      observeAttributes(this, this.onObservedAttributeChange.bind(this), {
+        includeAttrs: ['size', 'readonly'],
+      });
+    }
+  }
+
+  return BaseButtonSelectionGroupInternalClass;
+};

package/src/components/button-selection-group-fields/descope-button-multi-selection-group/ButtonMultiSelectionGroupClass.js

@@ -0,0 +1,67 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '../../../mixins';
+import { componentName as descopeInternalComponentName } from '../descope-button-multi-selection-group-internal/ButtonMultiSelectionGroupInternalClass';
+import { compose } from '../../../helpers';
+import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
+import {
+  buttonSelectionGroupBaseMixin,
+  buttonSelectionGroupMappings,
+  buttonSelectionGroupStyles,
+} from '../baseButtonSelectionGroup';
+
+export const componentName = getComponentName('button-multi-selection-group');
+
+const buttonMultiSelectionGroupMixin = (superclass) =>
+  class ButtonMultiSelectionGroupMixinClass extends superclass {
+    init() {
+      super.init?.();
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${descopeInternalComponentName}
+      	name="button-selection-group"
+      	slot="input"
+        tabindex="-1"
+        part="internal-component"
+      >
+        <slot></slot>
+      </${descopeInternalComponentName}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: ['size', 'default-values', 'min-items-selection', 'max-items-selection'],
+      });
+    }
+  };
+
+export const ButtonMultiSelectionGroupClass = compose(
+  createStyleMixin({
+    mappings: {
+      ...buttonSelectionGroupMappings,
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  componentNameValidationMixin,
+  buttonSelectionGroupBaseMixin,
+  buttonMultiSelectionGroupMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-field',
+    style: () => buttonSelectionGroupStyles,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);
+
+export default ButtonMultiSelectionGroupClass;

package/src/components/button-selection-group-fields/descope-button-multi-selection-group/index.js

@@ -0,0 +1,7 @@
+import { componentName, ButtonMultiSelectionGroupClass } from './ButtonMultiSelectionGroupClass';
+import '../descope-button-multi-selection-group-internal';
+import '../descope-button-selection-group-item';
+
+customElements.define(componentName, ButtonMultiSelectionGroupClass);
+
+export { ButtonMultiSelectionGroupClass };