@descope/web-components-ui 1.0.279 → 1.0.281

package/src/index.cjs.js

@@ -37,3 +37,4 @@ export { NotificationClass } from './components/descope-notification/Notificatio
 export { GridClass } from './components/descope-grid/GridClass';
 export { BadgeClass } from './components/descope-badge/BadgeClass';
 export { MultiSelectComboBoxClass } from './components/descope-multi-select-combo-box/MultiSelectComboBoxClass';
+export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/MappingsFieldClass';

package/src/index.d.ts

@@ -42,6 +42,7 @@ export { ModalClass } from './components/descope-modal/ModalClass';
 export { NotificationClass } from './components/descope-notification/';
 export { BadgeClass } from './components/descope-badge/';
 export { MultiSelectComboBoxClass } from './components/descope-multi-select-combo-box/';
+export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/';
 
 export type Theme = {
   globals: {

package/src/index.js

@@ -31,6 +31,7 @@ export * from './components/descope-multi-select-combo-box';
 export * from './components/descope-badge';
 export * from './components/descope-modal';
 export * from './components/descope-notification';
+export * from './components/mapping-fields/descope-mappings-field';
 
 export {
   globalsThemeToStyle,

package/src/mixins/inputValidationMixin.js

@@ -20,6 +20,14 @@ export const inputValidationMixin = (superclass) =>
 
     #internals;
 
+    get internals() {
+      return this.#internals;
+    }
+
+    set internals(value) {
+      this.#internals = value;
+    }
+
     constructor() {
       super();
 

package/src/mixins/proxyInputMixin.js

@@ -38,7 +38,10 @@ const proxyInputMixin =
   ({
     proxyProps = [],
     // allows us to set the event that should trigger validation
+    // it can be either a string or an array of strings (for multiple events)
     inputEvent = 'input',
+    // Proxies all validations from the parent component to the input element
+    proxyParentValidation = false,
   }) =>
   (superclass) =>
     class ProxyInputMixinClass extends inputValidationMixin(superclass) {
@@ -128,12 +131,16 @@ const proxyInputMixin =
         // on some cases the base element is not ready so the inputElement is empty
         // we are deferring this section to make sure the base element is ready
         setTimeout(() => {
-          this.baseElement?.addEventListener(inputEvent, () => {
-            if (!this.baseElement.checkValidity()) {
-              this.#handleErrorMessage();
-            } else {
-              this.removeAttribute('invalid');
-            }
+          const validationEvents = Array.isArray(inputEvent) ? inputEvent : [inputEvent];
+
+          validationEvents.forEach((e) => {
+            this.baseElement?.addEventListener(e, () => {
+              if (!this.baseElement.checkValidity()) {
+                this.#handleErrorMessage();
+              } else {
+                this.removeAttribute('invalid');
+              }
+            });
           });
 
           this.baseElement.addEventListener('change', () => {
@@ -156,6 +163,41 @@ const proxyInputMixin =
 
           forwardAttrs(this, this.inputElement, { includeAttrs: ['inputmode'] });
         });
+
+        if (proxyParentValidation) {
+          // All functions called on the inputElement internals will be applied to the parent
+          // component internals as well. As a result, there's no need to add outer mechanisms
+          // to update the parent component's validity state based on the input elements validity.
+          const inputElementInternals = this.inputElement.internals;
+          const parentThis = this;
+          this.inputElement.internals = new Proxy(inputElementInternals, {
+            get: (target, prop) => {
+              if (typeof target[prop] === 'function' && prop === 'setValidity') {
+                return (...args) => {
+                  // If we're calling setValidity with 3 args, then the validationTarget
+                  // needs to be swapped to be the inputElement
+                  if (args.length === 3) {
+                    const newArgs = args.slice(0, args.length - 1);
+                    newArgs.push(parentThis.inputElement);
+                    parentThis.internals[prop](...newArgs);
+                  } else {
+                    parentThis.internals[prop](...args);
+                  }
+                  return target[prop](...args);
+                };
+              }
+
+              if (typeof target[prop] === 'function') {
+                return (...args) => {
+                  parentThis.internals[prop](...args);
+                  return target[prop](...args);
+                };
+              }
+
+              return target[prop];
+            },
+          });
+        }
       }
     };
 

package/src/theme/components/index.js

@@ -30,6 +30,7 @@ import * as grid from './grid';
 import * as notificationCard from './notificationCard';
 import * as multiSelectComboBox from './multiSelectComboBox';
 import * as badge from './badge';
+import * as mappingsField from './mappingsField';
 
 const components = {
   button,
@@ -65,6 +66,7 @@ const components = {
   notificationCard,
   multiSelectComboBox,
   badge,
+  mappingsField,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/inputWrapper.js

@@ -12,6 +12,7 @@ const [theme, refs, vars] = createHelperVars(
     placeholderTextColor: globalRefs.colors.surface.dark,
     requiredIndicator: "'*'",
     errorMessageTextColor: globalRefs.colors.error.main,
+    helperTextColor: globalRefs.colors.surface.dark,
 
     borderWidth: globalRefs.border.xs,
     borderRadius: globalRefs.radius.xs,
@@ -68,6 +69,7 @@ const [theme, refs, vars] = createHelperVars(
       borderColor: globalRefs.colors.surface.light,
       valueTextColor: globalRefs.colors.surface.light,
       placeholderTextColor: globalRefs.colors.surface.light,
+      helperTextColor: globalRefs.colors.surface.light,
       backgroundColor: globalRefs.colors.surface.main,
     },
   },

package/src/theme/components/mappingsField.js

@@ -0,0 +1,25 @@
+import globals from '../globals';
+import { MappingsFieldClass } from '../../components/mapping-fields/descope-mappings-field/MappingsFieldClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = MappingsFieldClass.cssVarList;
+
+export const mappingsField = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+  [vars.fontSize]: refs.fontSize,
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.separatorFontSize]: '14px',
+  [vars.labelTextColor]: refs.labelTextColor,
+  [vars.itemMarginBottom]: '1em',
+  // To be positioned correctly, the min width has to match the text field min width
+  [vars.valueLabelMinWidth]: refs.minWidth,
+  // To be positioned correctly, the min width has to match the combo box field min width
+  [vars.attrLabelMinWidth]: `calc(12em + 2 * ${globalRefs.border.xs})`,
+};
+
+export default mappingsField;
+export { vars };

package/src/theme/components/textField.js

@@ -25,6 +25,7 @@ export const textField = {
   [vars.inputBackgroundColor]: refs.backgroundColor,
   [vars.inputHeight]: refs.inputHeight,
   [vars.inputHorizontalPadding]: refs.horizontalPadding,
+  [vars.helperTextColor]: refs.helperTextColor,
   textAlign: {
     right: { [vars.inputTextAlign]: 'right' },
     left: { [vars.inputTextAlign]: 'left' },