@descope/web-components-ui 1.0.289 → 1.0.291

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;

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

@@ -0,0 +1,136 @@
+import { createBaseInputClass } from '../../../../baseClasses/createBaseInputClass';
+import {
+  getComponentName,
+  forwardAttrs,
+  observeAttributes,
+} from '../../../../helpers/componentHelpers';
+
+export const componentName = getComponentName('saml-group-mappings-internal');
+
+const BaseInputClass = createBaseInputClass({ componentName, baseSelector: '' });
+
+class SamlGroupMappingsInternal extends BaseInputClass {
+  static get observedAttributes() {
+    return ['invalid'].concat(BaseInputClass.observedAttributes || []);
+  }
+
+  constructor() {
+    super();
+
+    this.innerHTML = `
+      <descope-text-field variant="body2" bordered="true"></descope-text-field>
+      <descope-mappings-field></descope-mappings-field>
+    `;
+
+    this.groupInputElement = this.querySelector('descope-text-field');
+    this.mappingsElement = this.querySelector('descope-mappings-field');
+  }
+
+  resetInvalidIndication() {
+    this.removeAttribute('invalid');
+  }
+
+  handleMappingsInvalidChange(changedAttributes) {
+    if (changedAttributes.includes('invalid')) {
+      if (!this.mappingsElement.hasAttribute('invalid')) {
+        this.resetInvalidIndication();
+      }
+    }
+  }
+
+  initFocusHandler() {
+    // This event listener needs to be placed before the super.init() call
+    this.addEventListener('focus', (e) => {
+      // we want to ignore focus events we are dispatching
+      if (e.isTrusted) {
+        const focusedElement = this.mappingsElement.checkValidity()
+          ? this.groupInputElement
+          : this.mappingsElement;
+        focusedElement.focus();
+      }
+    });
+  }
+
+  init() {
+    // This needs to be placed before the super.init() call to work
+    this.initFocusHandler();
+
+    super.init?.();
+
+    forwardAttrs(this, this.groupInputElement, {
+      mapAttrs: { 'label-group': 'label' },
+      includeAttrs: ['size', 'label-group', 'readonly', 'disabled'],
+    });
+
+    forwardAttrs(this, this.mappingsElement, {
+      includeAttrs: [
+        'size',
+        'full-width',
+        'label-value',
+        'label-attr',
+        'button-label',
+        'separator',
+        'options',
+        'readonly',
+        'disabled',
+        'data-errormessage-pattern-mismatch',
+      ],
+    });
+
+    // Observing the invalid attribute of the mappings field to reset the invalid state for this component.
+    // When an invalid item turns valid, the mappings field will remove the invalid attribute, and at this component
+    // level, we need to remove the invalid attribute as well to be able to mark the component as invalid the next time
+    observeAttributes(this.mappingsElement, this.handleMappingsInvalidChange.bind(this), {
+      includeAttrs: ['invalid'],
+    });
+  }
+
+  get value() {
+    return {
+      group: this.groupInputElement.value,
+      mappings: this.mappingsElement.value,
+    };
+  }
+
+  set value(value) {
+    if (value?.group && typeof value.group === 'string') {
+      this.groupInputElement.value = value.group;
+    }
+    if (Array.isArray(value?.mappings)) {
+      this.mappingsElement.value = value.mappings;
+    }
+  }
+
+  getValidity() {
+    if (!this.groupInputElement.checkValidity()) {
+      return this.groupInputElement.validity;
+    }
+    if (!this.mappingsElement.checkValidity()) {
+      return this.mappingsElement.validity;
+    }
+
+    return {};
+  }
+
+  #handleInvalidState(isInvalid) {
+    if (isInvalid) {
+      if (!this.groupInputElement.checkValidity()) {
+        this.groupInputElement.setAttribute('invalid', 'true');
+        return;
+      }
+
+      if (!this.mappingsElement.checkValidity()) {
+        this.mappingsElement.setAttribute('invalid', 'true');
+      }
+    }
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+    if (attrName === 'invalid') {
+      this.#handleInvalidState(newValue === 'true');
+    }
+  }
+}
+
+export default SamlGroupMappingsInternal;

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

@@ -0,0 +1,3 @@
+import SamlGroupMappingsInternal, { componentName } from './SamlGroupMappingsInternal';
+
+customElements.define(componentName, SamlGroupMappingsInternal);

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

@@ -0,0 +1,10 @@
+import '@vaadin/custom-field';
+
+import { componentName, SamlGroupMappingsClass } from './SamlGroupMappingsClass';
+import '../../descope-text-field';
+import '../descope-mappings-field';
+import './descope-saml-group-mappings-internal';
+
+customElements.define(componentName, SamlGroupMappingsClass);
+
+export { SamlGroupMappingsClass };

package/src/helpers/themeHelpers/componentsThemeManager.js

@@ -36,6 +36,10 @@ class ComponentsThemeManager {
     this.#themes = themes;
     this.#notify();
   }
+
+  get hasThemes() {
+    return !!Object.keys(this.#themes).length;
+  }
 }
 
 export const componentsThemeManager = new ComponentsThemeManager();

package/src/index.cjs.js

@@ -38,4 +38,6 @@ 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 { AvatarClass } from './components/descope-avatar/AvatarClass';
+export { UserAttributeClass } from './components/descope-user-attribute/UserAttributeClass';
 export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/MappingsFieldClass';
+export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass';

package/src/index.d.ts

@@ -43,6 +43,7 @@ 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 { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/';
 
 export type Theme = {
   globals: {

package/src/index.js

@@ -33,6 +33,8 @@ export * from './components/descope-modal';
 export * from './components/descope-notification';
 export * from './components/descope-avatar';
 export * from './components/mapping-fields/descope-mappings-field';
+export * from './components/descope-user-attribute';
+export * from './components/mapping-fields/descope-saml-group-mappings';
 
 export {
   globalsThemeToStyle,

package/src/mixins/proxyInputMixin.js

@@ -40,6 +40,7 @@ const proxyInputMixin =
     // 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',
+    triggerValidationEvents = [],
     // Proxies all validations from the parent component to the input element
     proxyParentValidation = false,
   }) =>
@@ -128,6 +129,12 @@ const proxyInputMixin =
           }
         };
 
+        triggerValidationEvents.forEach((e) => {
+          this.baseElement?.addEventListener(e, () => {
+            this.inputElement?.setCustomValidity('');
+          });
+        });
+
         // 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(() => {

package/src/theme/components/avatar.js

@@ -13,6 +13,10 @@ const avatar = {
   [compVars.avatarTextColor]: globalRefs.colors.surface.main,
   [compVars.avatarBackgroundColor]: globalRefs.colors.surface.dark,
 
+  _editable: {
+    [compVars.cursor]: 'pointer',
+  },
+
   size: {
     xs: {
       [compVars.hostWidth]: '30px',

package/src/theme/components/index.js

@@ -32,6 +32,8 @@ import * as multiSelectComboBox from './multiSelectComboBox';
 import * as badge from './badge';
 import * as avatar from './avatar';
 import * as mappingsField from './mappingsField';
+import * as userAttribute from './userAttribute';
+import * as samlGroupMappings from './samlGroupMappings';
 
 const components = {
   button,
@@ -69,6 +71,8 @@ const components = {
   badge,
   avatar,
   mappingsField,
+  userAttribute,
+  samlGroupMappings,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/mappingsField.js

@@ -13,13 +13,15 @@ export const mappingsField = {
   [vars.fontSize]: refs.fontSize,
   [vars.fontFamily]: refs.fontFamily,
   [vars.separatorFontSize]: '14px',
+  [vars.labelsFontSize]: '14px',
+  [vars.labelsLineHeight]: '1',
+  [vars.labelsMarginBottom]: '6px',
   [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})`,
-  [vars.labelsMarginBottom]: `calc(${globalRefs.typography.body2.size} / 2)`,
   [vars.separatorWidth]: '70px',
   [vars.removeButtonWidth]: '60px',
 };

package/src/theme/components/samlGroupMappings.js

@@ -0,0 +1,13 @@
+import { SamlGroupMappingsClass } from '../../components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass';
+import { refs } from './inputWrapper';
+
+const vars = SamlGroupMappingsClass.cssVarList;
+
+export const samlGroupMappings = {
+  [vars.hostWidth]: refs.width,
+  [vars.hostDirection]: refs.direction,
+  [vars.groupNameInputMarginBottom]: '1em',
+};
+
+export default samlGroupMappings;
+export { vars };

package/src/theme/components/userAttribute.js

@@ -0,0 +1,20 @@
+import globals from '../globals';
+import { UserAttributeClass } from '../../components/descope-user-attribute/UserAttributeClass';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+
+const globalRefs = getThemeRefs(globals);
+export const vars = UserAttributeClass.cssVarList;
+
+const userAttribute = {
+  [vars.hostDirection]: globalRefs.direction,
+  [vars.labelTextWidth]: '150px',
+  [vars.valueTextWidth]: '200px',
+  [vars.badgeMaxWidth]: '85px',
+  [vars.itemsGap]: '16px',
+  [vars.hostMinWidth]: '530px',
+  _fullWidth: {
+    [vars.hostWidth]: '100%',
+  },
+};
+
+export default userAttribute;