@descope/web-components-ui 1.0.290 → 1.0.292

package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9476,9656],{6867:(e,t,i)=>{i.d(t,{Z:()=>p,f:()=>a});var n=i(3878),s=i(4567);const a=(0,s.iY)("saml-group-mappings-internal"),l=(0,n.P)({componentName:a,baseSelector:""}),p=class extends l{static get observedAttributes(){return["invalid"].concat(l.observedAttributes||[])}constructor(){super(),this.innerHTML='\n      <descope-text-field variant="body2" bordered="true"></descope-text-field>\n      <descope-mappings-field></descope-mappings-field>\n    ',this.groupInputElement=this.querySelector("descope-text-field"),this.mappingsElement=this.querySelector("descope-mappings-field")}resetInvalidIndication(){this.removeAttribute("invalid")}handleMappingsInvalidChange(e){e.includes("invalid")&&(this.mappingsElement.hasAttribute("invalid")||this.resetInvalidIndication())}initFocusHandler(){this.addEventListener("focus",(e=>{e.isTrusted&&(this.mappingsElement.checkValidity()?this.groupInputElement:this.mappingsElement).focus()}))}init(){this.initFocusHandler(),super.init?.(),(0,s.oP)(this,this.groupInputElement,{mapAttrs:{"label-group":"label"},includeAttrs:["size","label-group","readonly","disabled"]}),(0,s.oP)(this,this.mappingsElement,{includeAttrs:["size","full-width","label-value","label-attr","button-label","separator","options","readonly","disabled","data-errormessage-pattern-mismatch"]}),(0,s.FX)(this.mappingsElement,this.handleMappingsInvalidChange.bind(this),{includeAttrs:["invalid"]})}get value(){return{group:this.groupInputElement.value,mappings:this.mappingsElement.value}}set value(e){e?.group&&"string"==typeof e.group&&(this.groupInputElement.value=e.group),Array.isArray(e?.mappings)&&(this.mappingsElement.value=e.mappings)}getValidity(){return this.groupInputElement.checkValidity()?this.mappingsElement.checkValidity()?{}:this.mappingsElement.validity:this.groupInputElement.validity}#e(e){if(e){if(!this.groupInputElement.checkValidity())return void this.groupInputElement.setAttribute("invalid","true");this.mappingsElement.checkValidity()||this.mappingsElement.setAttribute("invalid","true")}}attributeChangedCallback(e,t,i){super.attributeChangedCallback?.(e,t,i),"invalid"===e&&this.#e("true"===i)}}},4115:(e,t,i)=>{i.r(t);var n=i(6867);customElements.define(n.f,n.Z)},3277:(e,t,i)=>{i.r(t),i.d(t,{SamlGroupMappingsClass:()=>d}),i(9381);var n=i(1e3),s=i(2061),a=i(4567),l=i(6867);const p=(0,a.iY)("saml-group-mappings"),{host:r,groupInput:o}={host:{selector:()=>":host"},groupInput:{selector:"descope-text-field"}},d=(0,s.qC)((0,n.yk)({mappings:{hostWidth:{...r,property:"width"},hostDirection:{...r,property:"direction"},groupNameInputMarginBottom:{...o,property:"margin-bottom"}}}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"],inputEvent:"input",triggerValidationEvents:["mapping-item-added","mapping-item-removed"],proxyParentValidation:!0}),n.Ae,(e=>class extends e{init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n      <${l.f}\n        tabindex="-1"\n      ></${l.f}>\n      `,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(l.f),(0,a.oP)(this,this.inputElement,{includeAttrs:["size","full-width","label-group","label-value","label-attr","button-label","separator","options","readonly","disabled"]}),(0,a.tg)(this,this.inputElement,{includeAttrs:["invalid"]})}}))((0,n.DM)({slots:[],wrappedEleName:"vaadin-custom-field",style:()=>"\n      :host {\n        display: inline-flex;\n        max-width: 100%;\n        direction: ltr;\n      }\n\n      vaadin-custom-field {\n        line-height: unset;\n        width: 100%;\n      }\n\n      descope-text-field {\n        width: auto;\n      }\n\n      descope-mappings-field {\n        display: block;\n      }\n    ",excludeAttrsSync:["tabindex","label-group","label-value","label-attr","button-label","separator","options","error-message"],componentName:p}));i(9357),i(5894),i(4115),customElements.define(p,d)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.290",
+  "version": "1.0.292",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-new-password/NewPasswordClass.js

@@ -4,9 +4,12 @@ import { createStyleMixin, proxyInputMixin, draggableMixin, createProxy } from '
 import { componentName as descopeInternalComponentName } from './descope-new-password-internal/componentName';
 import { PasswordClass } from '../descope-password/PasswordClass';
 import { useHostExternalPadding } from '../../helpers/themeHelpers/resetHelpers';
+import { PolicyValidationClass } from '../descope-policy-validation';
 
 export const componentName = getComponentName('new-password');
 
+const policyPreviewVars = PolicyValidationClass.cssVarList;
+
 const customMixin = (superclass) =>
   class NewPasswordMixinClass extends superclass {
     init() {
@@ -40,18 +43,32 @@ const customMixin = (superclass) =>
           'invalid',
           'readonly',
           'draggable',
+          'has-validation',
+          'policy-label',
+          'active-policies',
+          'available-policies',
+          'data-password-policy-value-minlength',
         ],
       });
     }
   };
 
-const { host, label, internalInputsWrapper, errorMessage, helperText, passwordInput } = {
+const {
+  host,
+  label,
+  internalInputsWrapper,
+  errorMessage,
+  helperText,
+  passwordInput,
+  policyPreview,
+} = {
   host: { selector: () => ':host' },
   label: { selector: '::part(label)' },
   internalInputsWrapper: { selector: 'descope-new-password-internal .wrapper' },
   helperText: { selector: '::part(helper-text)' },
   errorMessage: { selector: '::part(error-message)' },
   passwordInput: { selector: 'descope-password' },
+  policyPreview: { selector: 'descope-policy-validation' },
 };
 
 export const NewPasswordClass = compose(
@@ -75,6 +92,11 @@ export const NewPasswordClass = compose(
       ],
       inputsRequiredIndicator: { ...host, property: 'content' },
       spaceBetweenInputs: { ...internalInputsWrapper, property: 'gap' },
+      policyPreviewBackgroundColor: {
+        ...policyPreview,
+        property: policyPreviewVars.backgroundColor,
+      },
+      policyPreviewPadding: { ...policyPreview, property: policyPreviewVars.padding },
     },
   }),
   draggableMixin,
@@ -113,7 +135,6 @@ export const NewPasswordClass = compose(
 			-webkit-mask-image: none;
 			min-height: 0;
 			width: 100%;
-			height: 100%;
 			padding: 0;
 		}
 		descope-new-password-internal > .wrapper {
@@ -129,6 +150,13 @@ export const NewPasswordClass = compose(
 		descope-new-password-internal vaadin-password-field::before {
 			height: initial;
 		}
+    descope-policy-validation {
+      margin-top: 8px;
+      display: flex;
+    }
+    descope-policy-validation.hidden {
+      display: none;
+    }
 		`,
     excludeAttrsSync: ['tabindex'],
     componentName,

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -1,5 +1,5 @@
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
-import { observeAttributes } from '../../../helpers/componentHelpers';
+import { forwardAttrs, observeAttributes } from '../../../helpers/componentHelpers';
 import { NewPasswordClass } from '../NewPasswordClass';
 import { componentName } from './componentName';
 
@@ -10,6 +10,7 @@ const removeAttrPrefix = (attr, prefix) => attr.replace(prefix, '');
 
 const passwordInputAttrs = ['password-label', 'password-placeholder'];
 const confirmInputAttrs = ['confirm-label', 'confirm-placeholder'];
+const policyPanelAttrs = ['has-validation'];
 const commonAttrs = [
   'disabled',
   'bordered',
@@ -22,7 +23,12 @@ const commonAttrs = [
   'autocomplete',
 ];
 
-const inputRelatedAttrs = [].concat(commonAttrs, passwordInputAttrs, confirmInputAttrs);
+const inputRelatedAttrs = [].concat(
+  commonAttrs,
+  passwordInputAttrs,
+  confirmInputAttrs,
+  policyPanelAttrs
+);
 
 const BaseInputClass = createBaseInputClass({ componentName, baseSelector: 'div' });
 
@@ -54,7 +60,15 @@ class NewPasswordInternal extends BaseInputClass {
     return this.getAttribute('has-confirm') === 'true';
   }
 
+  get hasValidation() {
+    return this.getAttribute('has-validation') === 'true';
+  }
+
   getValidity() {
+    if (!this.policyPanel.isValid) {
+      return { patternMismatch: true };
+    }
+
     if (this.isRequired && !this.value) {
       return { valueMissing: true };
     }
@@ -85,7 +99,12 @@ class NewPasswordInternal extends BaseInputClass {
   }
 
   renderInputs(shouldRenderConfirm) {
-    let template = `<descope-password data-id="password"></descope-password>`;
+    let template = `
+      <div>
+        <descope-password data-id="password"></descope-password>
+        <descope-policy-validation></descope-policy-validation>
+      </div>
+    `;
 
     if (shouldRenderConfirm) {
       template += `<descope-password data-id="confirm"></descope-password>`;
@@ -95,6 +114,7 @@ class NewPasswordInternal extends BaseInputClass {
 
     this.passwordInput = this.querySelector('[data-id="password"]');
     this.confirmInput = this.querySelector('[data-id="confirm"]');
+    this.policyPanel = this.querySelector('descope-policy-validation');
 
     this.inputs = [this.passwordInput, this.confirmInput];
 
@@ -105,6 +125,23 @@ class NewPasswordInternal extends BaseInputClass {
     [...passwordInputAttrs, ...confirmInputAttrs, ...commonAttrs].forEach((attr) => {
       this.attributeChangedCallback(attr, null, this.getAttribute(attr));
     });
+
+    this.passwordInput.addEventListener('input', (e) => {
+      this.policyPanel.setAttribute('value', e.target.value);
+    });
+
+    forwardAttrs(this, this.policyPanel, {
+      includeAttrs: [
+        'policy-label',
+        'available-policies',
+        'active-policies',
+        'data-password-policy-value-minlength',
+      ],
+      mapAttrs: {
+        'policy-label': 'label',
+        'available-policies': 'data',
+      },
+    });
   }
 
   // the inputs are not required but we still want it to have a required
@@ -164,6 +201,14 @@ class NewPasswordInternal extends BaseInputClass {
     value === null ? ele?.removeAttribute(name) : ele?.setAttribute(name, value);
   }
 
+  hidePolicy() {
+    this.policyPanel.classList.add('hidden');
+  }
+
+  showPolicy() {
+    this.policyPanel.classList.remove('hidden');
+  }
+
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -185,6 +230,9 @@ class NewPasswordInternal extends BaseInputClass {
           newValue
         );
       }
+      if (attrName === 'has-validation') {
+        newValue === 'true' ? this.showPolicy() : this.hidePolicy();
+      }
     }
   }
 }

package/src/components/descope-new-password/index.js

@@ -1,6 +1,7 @@
 import { componentName, NewPasswordClass } from './NewPasswordClass';
 import '../descope-text-field';
 import '../descope-password';
+import '../descope-policy-validation';
 import './descope-new-password-internal';
 
 customElements.define(componentName, NewPasswordClass);

package/src/components/descope-policy-validation/PolicyValidationClass.js

@@ -0,0 +1,220 @@
+// eslint-disable-next-line max-classes-per-file
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import { interpolateString } from './helpers';
+
+export const componentName = getComponentName('policy-validation');
+
+const overrideAttrs = ['data-password-policy-value-minlength'];
+const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
+const policyAttrs = ['label', 'value', ...dataAttrs];
+
+class RawPolicyValidation extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
+  #availablePolicies;
+
+  #activePolicies = [];
+
+  #overrides;
+
+  static get observedAttributes() {
+    return policyAttrs;
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <div>
+      <div class="label"></div>
+      <ul></ul>
+    </div>
+    <style>
+      :host > div {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+      }
+      .label {
+        max-width: 100%;
+        text-wrap: wrap;
+        overflow-wrap: break-word;
+      }
+      .hide-label .label {
+        display: none;
+      }
+      ul {
+        display: flex;
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+      }
+      ul, li {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+      li::before {
+        display: inline-block;
+        width: 1em;
+        text-align: center;
+      }
+    </style>
+		`;
+
+    this.panel = this.shadowRoot.querySelector(':host > div');
+    this.label = this.shadowRoot.querySelector('.label');
+    this.list = this.shadowRoot.querySelector('ul');
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (oldValue !== newValue) {
+      if (attrName === 'label') {
+        this.updateLabel(newValue);
+      }
+
+      // we're don't know the order in which the attributes are forwarded, so we're trying to render every time
+      // once `data` and `active-policies` are populated, the render will be executed.
+      // once the `overrides` object is updated, we want to re-render the panel.
+      if (dataAttrs.includes(attrName)) {
+        if (attrName === 'data') {
+          try {
+            this.availablePolicies = JSON.parse(newValue);
+          } catch {
+            // eslint-disable-next-line no-console
+            console.error('Failed to set available policies');
+          }
+        }
+        if (attrName === 'active-policies') {
+          this.#activePolicies = (newValue || '').split(',');
+        }
+
+        if (attrName === 'data-password-policy-value-minlength') {
+          const ln = Number(newValue);
+          if (!Number.isNaN(ln) && ln > 0) {
+            this.#overrides = { ...this.#overrides, minlength: { value: `${ln}` } };
+          }
+        }
+      }
+
+      this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);
+    }
+  }
+
+  get availablePolicies() {
+    return this.#availablePolicies || [];
+  }
+
+  set availablePolicies(val) {
+    this.#availablePolicies = val;
+  }
+
+  get value() {
+    return this.getAttribute('value') || '';
+  }
+
+  validate() {
+    let policies = this.#availablePolicies;
+
+    if (this.#overrides) {
+      policies = this.#availablePolicies.map((policy) =>
+        this.#overrides[policy.id] ? { ...policy, data: this.#overrides[policy.id] } : policy
+      );
+    }
+
+    return this.#activePolicies.reduce((results, id) => {
+      const policy = policies.find((p) => p.id === id);
+
+      if (!policy) {
+        return results;
+      }
+
+      const { pattern, message, data } = policy;
+
+      if (!pattern || !message) {
+        return results;
+      }
+
+      const exp = new RegExp(interpolateString(pattern, data));
+
+      const validationResult = {
+        valid: exp.test(this.value),
+        message: interpolateString(message, data),
+        id,
+      };
+
+      results.push(validationResult);
+
+      return results;
+    }, []);
+  }
+
+  get isValid() {
+    return !this.validate().some(({ valid }) => valid === false);
+  }
+
+  getValidationItemTemplate({ valid, message }) {
+    const status = !this.value ? 'none' : valid;
+    return `
+      <li class="item" data-valid="${status}">
+        <span class="message">${message}</span>
+      </li>
+    `;
+  }
+
+  renderItems(availablePolicies, activePolicies) {
+    if (!availablePolicies || !activePolicies.length) {
+      return;
+    }
+
+    this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');
+  }
+
+  updateLabel(val) {
+    if (!val) {
+      this.classList.add('hide-label');
+      this.label.innerHTML = '';
+    } else {
+      this.label.innerHTML = val;
+      this.classList.remove('hide-label');
+    }
+  }
+}
+
+const { host, item, symbolDefault, symbolSuccess, symbolError } = {
+  host: { selector: () => ':host > div' },
+  item: { selector: () => '.item' },
+  symbolDefault: { selector: () => '.item[data-valid="none"]::before' },
+  symbolSuccess: { selector: () => '.item[data-valid="true"]::before' },
+  symbolError: { selector: () => '.item[data-valid="false"]::before' },
+};
+
+export const PolicyValidationClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      hostDirection: { selector: () => ':host', property: 'direction' },
+      fontSize: {},
+      fontFamily: {},
+      padding: {},
+      borderWidth: { ...host, property: 'border-width' },
+      borderStyle: { ...host, property: 'border-style' },
+      borderColor: { ...host, property: 'border-color' },
+      borderRadius: { ...host, property: 'border-radius' },
+      backgroundColor: { ...host, property: 'background-color' },
+      textColor: { property: 'color' },
+      labelMargin: { ...host, property: 'gap' },
+      itemsSpacing: { ...item, property: 'line-height' },
+      itemSymbolSuccessColor: { ...symbolSuccess, property: 'color' },
+      itemSymbolErrorColor: { ...symbolError, property: 'color' },
+      itemSymbolDefault: { ...symbolDefault, property: 'content' },
+      itemSymbolSuccess: { ...symbolSuccess, property: 'content' },
+      itemSymbolError: { ...symbolError, property: 'content' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawPolicyValidation);

package/src/components/descope-policy-validation/helpers.js

@@ -0,0 +1,2 @@
+export const interpolateString = (template, values) =>
+  template.replace(/{{(\w+)+}}/g, (match, key) => values?.[key] || match);

package/src/components/descope-policy-validation/index.js

@@ -0,0 +1,5 @@
+import { componentName, PolicyValidationClass } from './PolicyValidationClass';
+
+customElements.define(componentName, PolicyValidationClass);
+
+export { PolicyValidationClass };

package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js

@@ -7,7 +7,7 @@ import {
 } from '../../../mixins';
 import { TextClass } from '../../descope-text/TextClass';
 import { compose } from '../../../helpers';
-import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
+import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/componentHelpers';
 import { componentName as descopeInternalComponentName } from './descope-mappings-field-internal/MappingsFieldInternal';
 
 export const componentName = getComponentName('mappings-field');
@@ -64,6 +64,10 @@ const customMixin = (superclass) =>
         ],
       });
 
+      // This is required since when we remove the invalid attribute from the internal mappings field,
+      // we want to reflect the change in the parent component
+      syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
+
       this.setDefaultValues();
     }
   };
@@ -74,6 +78,7 @@ const {
   errorMessage,
   mappingItem,
   labels,
+  labelsText,
   valueLabel,
   attrLabel,
   separator,
@@ -84,6 +89,9 @@ const {
   errorMessage: { selector: '::part(error-message)' },
   mappingItem: { selector: 'descope-mapping-item::part(wrapper)' },
   labels: { selector: 'descope-mappings-field-internal [part="labels"] descope-text' },
+  labelsText: {
+    selector: 'descope-mappings-field-internal [part="labels"] descope-text::part(text-wrapper)',
+  },
   valueLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="value-label"]' },
   attrLabel: { selector: 'descope-mappings-field-internal [part="labels"] [part="attr-label"]' },
   separator: { selector: 'descope-mapping-item::part(separator)' },
@@ -99,6 +107,11 @@ export const MappingsFieldClass = compose(
       fontSize: [{}, host, { ...separator, property: 'margin-top' }],
       fontFamily: [helperText, errorMessage, labels],
       separatorFontSize: { ...separator, property: 'font-size' },
+      labelsFontSize: { ...labelsText, property: 'font-size' },
+      labelsLineHeight: [
+        { ...labelsText, property: 'line-height' },
+        { ...labels, property: 'line-height' },
+      ],
       labelTextColor: { ...labels, property: TextClass.cssVarList.textColor },
       itemMarginBottom: { ...mappingItem, property: 'margin-bottom' },
       valueLabelMinWidth: { ...valueLabel, property: 'min-width' },

package/src/components/mapping-fields/descope-mappings-field/descope-mapping-item/MappingItem.js

@@ -92,7 +92,7 @@ class MappingItem extends BaseInputClass {
 
   initRemoveButton() {
     this.removeButton.addEventListener('click', () =>
-      this.dispatchEvent(new CustomEvent('mapping-item-removed'))
+      this.dispatchEvent(new CustomEvent('mapping-item-removed', { bubbles: true, composed: true }))
     );
   }
 

package/src/components/mapping-fields/descope-mappings-field/descope-mappings-field-internal/MappingsFieldInternal.js

@@ -66,7 +66,7 @@ class MappingsFieldInternal extends BaseInputClass {
     // before the new item is added and thus returns a wrong result
     setTimeout(() => {
       this.setCustomValidity('');
-      newMappingItem.addEventListener('mapping-item-removed', (e) => {
+      newMappingItem.addEventListener('mapping-item-removed', () => {
         // If the removed item was the one that was invalid, we need to reset the invalid indication for the internal
         if (newMappingItem === this.#errorItem) {
           this.resetInvalidIndication();
@@ -74,8 +74,8 @@ class MappingsFieldInternal extends BaseInputClass {
         }
         newMappingItem.remove();
         this.setCustomValidity('');
-        e.stopPropagation();
       });
+      this.dispatchEvent(new CustomEvent('mapping-item-added', { bubbles: true, composed: true }));
       if (focusNewItem) {
         newMappingItem.focus();
       }

package/src/components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass.js

@@ -0,0 +1,110 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '../../../mixins';
+import { compose } from '../../../helpers';
+import { forwardAttrs, getComponentName, syncAttrs } from '../../../helpers/componentHelpers';
+import { componentName as descopeInternalComponentName } from './descope-saml-group-mappings-internal/SamlGroupMappingsInternal';
+
+export const componentName = getComponentName('saml-group-mappings');
+
+const customMixin = (superclass) =>
+  class SamlGroupMappingsMixinClass extends superclass {
+    init() {
+      super.init?.();
+
+      const template = document.createElement('template');
+
+      template.innerHTML = `
+      <${descopeInternalComponentName}
+        tabindex="-1"
+      ></${descopeInternalComponentName}>
+      `;
+
+      this.baseElement.appendChild(template.content.cloneNode(true));
+
+      this.inputElement = this.shadowRoot.querySelector(descopeInternalComponentName);
+
+      forwardAttrs(this, this.inputElement, {
+        includeAttrs: [
+          'size',
+          'full-width',
+          'label-group',
+          'label-value',
+          'label-attr',
+          'button-label',
+          'separator',
+          'options',
+          'readonly',
+          'disabled',
+        ],
+      });
+
+      syncAttrs(this, this.inputElement, { includeAttrs: ['invalid'] });
+    }
+  };
+
+const { host, groupInput } = {
+  host: { selector: () => ':host' },
+  groupInput: { selector: 'descope-text-field' },
+};
+
+export const SamlGroupMappingsClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostDirection: { ...host, property: 'direction' },
+      groupNameInputMarginBottom: { ...groupInput, property: 'margin-bottom' },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({
+    proxyProps: ['value', 'selectionStart'],
+    inputEvent: 'input',
+    triggerValidationEvents: ['mapping-item-added', 'mapping-item-removed'],
+    proxyParentValidation: true,
+  }),
+  componentNameValidationMixin,
+  customMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-custom-field',
+    style: () => `
+      :host {
+        display: inline-flex;
+        max-width: 100%;
+        direction: ltr;
+      }
+
+      vaadin-custom-field {
+        line-height: unset;
+        width: 100%;
+      }
+
+      descope-text-field {
+        width: auto;
+      }
+
+      descope-mappings-field {
+        display: block;
+      }
+    `,
+    excludeAttrsSync: [
+      'tabindex',
+      'label-group',
+      'label-value',
+      'label-attr',
+      'button-label',
+      'separator',
+      'options',
+      'error-message',
+    ],
+    componentName,
+  })
+);
+
+export default SamlGroupMappingsClass;