@descope/web-components-ui 1.0.319 → 1.0.320

package/src/components/descope-radio-group/RadioButtonClass.js

@@ -0,0 +1,74 @@
+import { compose } from '../../helpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+import {
+  componentNameValidationMixin,
+  createProxy,
+  createStyleMixin,
+  proxyInputMixin,
+} from '../../mixins';
+
+export const componentName = getComponentName('radio-button');
+
+const customMixin = (superclass) =>
+  class CustomMixin extends superclass {
+    constructor() {
+      super();
+
+      this.baseElement.checkValidity = () => {};
+    }
+
+    init() {
+      // we are forwarding vaadin checked-changed event
+      this.baseElement.addEventListener('checked-changed', (e) => {
+        this.dispatchEvent(
+          new CustomEvent(
+            'checked-changed',
+            { detail: e.detail },
+            { bubbles: true, composed: true }
+          )
+        );
+      });
+
+      super.init?.();
+
+      observeChildren(this, this.renderLabel.bind(this));
+    }
+
+    renderLabel() {
+      this.baseElement.setAttribute('label', this.textContent);
+    }
+
+    get value() {
+      return this.getAttribute('value');
+    }
+  };
+
+export const RadioButtonClass = compose(
+  createStyleMixin({
+    mappings: {
+      cursor: [{}, { selector: 'label' }],
+      fontSize: [{ selector: 'label' }, {}],
+      labelTextColor: { selector: 'label', property: 'color' },
+      fontFamily: { selector: 'label' },
+      radioSize: [
+        { selector: '::part(radio)', property: 'height' },
+        { selector: '::part(radio)', property: 'width' },
+      ],
+      radioBackgroundColor: { selector: '::part(radio)', property: 'background-color' },
+      radioMargin: { selector: '::part(radio)', property: 'margin' },
+      radioCheckedSize: { selector: '::part(radio)::after', property: 'border-width' },
+      radioCheckedColor: { selector: '::part(radio)::after', property: 'border-color' },
+    },
+  }),
+  proxyInputMixin({ proxyProps: ['setSelectionRange'] }),
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [''],
+    wrappedEleName: 'vaadin-radio-button',
+    excludeAttrsSync: ['tabindex', 'data'],
+    includeForwardProps: ['checked', 'name', 'disabled'],
+    componentName,
+  })
+);

package/src/components/descope-radio-group/RadioGroupClass.js

@@ -0,0 +1,192 @@
+import { compose } from '../../helpers';
+import {
+  forwardAttrs,
+  getComponentName,
+  observeAttributes,
+  observeChildren,
+} from '../../helpers/componentHelpers';
+import { resetInputLabelPosition } from '../../helpers/themeHelpers/resetHelpers';
+import {
+  componentNameValidationMixin,
+  createProxy,
+  createStyleMixin,
+  draggableMixin,
+  proxyInputMixin,
+} from '../../mixins';
+import textFieldMappings from '../descope-text-field/textFieldMappings';
+import { componentName as childNodeName, RadioButtonClass } from './RadioButtonClass';
+
+export const componentName = getComponentName('radio-group');
+
+const RadioGroupMixin = (superclass) =>
+  class RadioGroupMixinClass extends superclass {
+    // eslint-disable-next-line class-methods-use-this
+    #renderItem = ({ value, label }) =>
+      `<descope-radio-button value="${value}">${label}</descope-radio-button>`;
+
+    #data;
+
+    constructor() {
+      super();
+
+      // we are overriding vaadin children getter so it will run on our custom elements
+      Object.defineProperty(this.baseElement, 'children', {
+        get: () => this.querySelectorAll(childNodeName),
+      });
+
+      // we are overriding vaadin __filterRadioButtons so it will run on our custom elements
+      this.baseElement.__filterRadioButtons = (nodes) => {
+        return nodes.filter((node) => node.localName === childNodeName);
+      };
+
+      // vaadin radio group missing some input properties
+      this.baseElement.setCustomValidity = () => {};
+    }
+
+    get items() {
+      return this.shadowRoot.querySelector('slot').assignedElements();
+    }
+
+    get size() {
+      return this.getAttribute('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();
+      }
+    }
+
+    get defaultValue() {
+      return this.getAttribute('default-value');
+    }
+
+    // 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.inputElement = this.baseElement;
+
+      this.renderItems();
+
+      observeAttributes(this, this.renderItems.bind(this), { includeAttrs: ['data'] });
+
+      Object.defineProperty(this.baseElement, 'validity', {
+        get: () => {
+          return { valueMissing: !this.baseElement.checkValidity() };
+        },
+      });
+
+      forwardAttrs(this, this.baseElement, {
+        includeAttrs: ['layout'],
+        mapAttrs: { layout: 'theme' },
+      });
+
+      setTimeout(() => {
+        if (this.defaultValue) {
+          this.value = this.defaultValue;
+        }
+      });
+
+      // we want new items to get the size
+      observeChildren(this, ({ addedNodes }) => {
+        addedNodes.forEach((node) => {
+          node.setAttribute('size', this.size);
+        });
+      });
+
+      observeAttributes(
+        this,
+        () => {
+          this.items.forEach((item) => {
+            item.setAttribute('size', this.size);
+          });
+        },
+        {
+          includeAttrs: ['size'],
+        }
+      );
+    }
+  };
+
+export const RadioGroupClass = compose(
+  createStyleMixin({
+    mappings: {
+      ...textFieldMappings,
+      buttonsSpacing: { selector: '::part(group-field)', property: 'justify-content' },
+      buttonsRowGap: { selector: '::part(group-field)', property: 'row-gap' },
+      buttonsColumnGap: { selector: '::part(group-field)', property: 'column-gap' },
+      itemsLabelColor: {
+        selector: () => `::slotted(${RadioButtonClass.componentName})`,
+        property: RadioButtonClass.cssVarList.labelTextColor,
+      },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['setSelectionRange'] }),
+  componentNameValidationMixin,
+  RadioGroupMixin
+)(
+  createProxy({
+    slots: ['', 'prefix'],
+    wrappedEleName: 'vaadin-radio-group',
+    style: () => `
+    :host {
+      display: inline-block;
+      max-width: 100%;
+      box-sizing: border-box;
+    }
+
+    vaadin-radio-group {
+      padding: 0;
+      width: 100%;
+    }
+
+    ${resetInputLabelPosition('vaadin-radio-group')}
+    `,
+
+    excludeAttrsSync: ['tabindex', 'size', 'data', 'direction'],
+    componentName,
+    includeForwardProps: ['value'],
+  })
+);

package/src/components/descope-radio-group/index.js

@@ -0,0 +1,8 @@
+import { componentName as groupComponentName, RadioGroupClass } from './RadioGroupClass';
+import { componentName as buttonComponentName, RadioButtonClass } from './RadioButtonClass';
+import '@vaadin/radio-group';
+
+customElements.define(groupComponentName, RadioGroupClass);
+customElements.define(buttonComponentName, RadioButtonClass);
+
+export { RadioGroupClass };

package/src/index.cjs.js

@@ -45,3 +45,5 @@ export { MappingsFieldClass } from './components/mapping-fields/descope-mappings
 export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass';
 export { PolicyValidationClass } from './components/descope-policy-validation/PolicyValidationClass';
 export { CodeSnippetClass } from './components/descope-code-snippet/CodeSnippetClass';
+export { RadioGroupClass } from './components/descope-radio-group/RadioGroupClass';
+export { RadioButtonClass } from './components/descope-radio-group/RadioButtonClass';

package/src/index.js

@@ -40,6 +40,7 @@ export * from './components/descope-user-auth-method';
 export * from './components/mapping-fields/descope-saml-group-mappings';
 export * from './components/descope-policy-validation';
 export * from './components/descope-code-snippet';
+export * from './components/descope-radio-group';
 
 export {
   globalsThemeToStyle,

package/src/theme/components/index.js

@@ -39,6 +39,8 @@ import * as samlGroupMappings from './samlGroupMappings';
 import * as policyValidation from './policyValidation';
 import * as icon from './icon';
 import * as codeSnippet from './codeSnippet';
+import * as radioGroup from './radioGroup/radioGroup';
+import * as radioButton from './radioGroup/radioButton';
 
 const components = {
   button,
@@ -83,6 +85,8 @@ const components = {
   policyValidation,
   icon,
   codeSnippet,
+  radioGroup,
+  radioButton,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/radioGroup/radioButton.js

@@ -0,0 +1,42 @@
+import { RadioButtonClass } from '../../../components/descope-radio-group/RadioButtonClass';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import globals from '../../globals';
+import { refs } from '../inputWrapper';
+
+const vars = RadioButtonClass.cssVarList;
+const globalRefs = getThemeRefs(globals);
+
+export const radioButton = {
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.radioSize]: 'calc(1em + 6px)',
+  [vars.radioMargin]: 'auto 4px',
+  [vars.radioCheckedSize]: `calc(var(${vars.radioSize})/5)`,
+  [vars.radioCheckedColor]: globalRefs.colors.surface.light,
+  [vars.radioBackgroundColor]: globalRefs.colors.surface.light,
+
+  _checked: {
+    [vars.radioBackgroundColor]: globalRefs.colors.surface.contrast,
+  },
+
+  _hover: {
+    cursor: 'pointer',
+  },
+
+  size: {
+    xs: {
+      [vars.fontSize]: '12px',
+    },
+    sm: {
+      [vars.fontSize]: '14px',
+    },
+    md: {
+      [vars.fontSize]: '16px',
+    },
+    lg: {
+      [vars.fontSize]: '18px',
+    },
+  },
+};
+
+export default radioButton;
+export { vars };

package/src/theme/components/radioGroup/radioGroup.js

@@ -0,0 +1,37 @@
+import { RadioGroupClass } from '../../../components/descope-radio-group/RadioGroupClass';
+import { getThemeRefs } from '../../../helpers/themeHelpers';
+import globals from '../../globals';
+import { refs } from '../inputWrapper';
+
+const vars = RadioGroupClass.cssVarList;
+const globalRefs = getThemeRefs(globals);
+
+export const radioGroup = {
+  [vars.buttonsRowGap]: '9px',
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.labelRequiredIndicator]: refs.requiredIndicator,
+  [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.helperTextColor]: refs.helperTextColor,
+  [vars.itemsLabelColor]: globalRefs.colors.surface.contrast,
+
+  textAlign: {
+    right: { [vars.inputTextAlign]: 'right' },
+    left: { [vars.inputTextAlign]: 'left' },
+    center: { [vars.inputTextAlign]: 'center' },
+  },
+
+  _fullWidth: {
+    [vars.buttonsSpacing]: 'space-between',
+  },
+
+  _disabled: {
+    [vars.itemsLabelColor]: globalRefs.colors.surface.light,
+  },
+};
+
+export default radioGroup;
+export { vars };