@descope/web-components-ui 1.0.290 → 1.0.292

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/index.cjs.js

@@ -40,3 +40,5 @@ export { MultiSelectComboBoxClass } from './components/descope-multi-select-comb
 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';
+export { PolicyValidationClass } from './components/descope-policy-validation/PolicyValidationClass';

package/src/index.d.ts

@@ -43,6 +43,8 @@ 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 { PolicyValidationClass } from './components/descope-policy-validation/';
 
 export type Theme = {
   globals: {

package/src/index.js

@@ -34,6 +34,8 @@ 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 * from './components/descope-policy-validation';
 
 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/index.js

@@ -33,6 +33,8 @@ 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';
+import * as policyValidation from './policyValidation';
 
 const components = {
   button,
@@ -71,6 +73,8 @@ const components = {
   avatar,
   mappingsField,
   userAttribute,
+  samlGroupMappings,
+  policyValidation,
 };
 
 const theme = Object.keys(components).reduce(

package/src/theme/components/inputWrapper.js

@@ -8,11 +8,13 @@ const globalRefs = getThemeRefs(globals);
 const [theme, refs, vars] = createHelperVars(
   {
     labelTextColor: globalRefs.colors.surface.dark,
+    labelFontSize: globalRefs.typography.body2.size,
     valueTextColor: globalRefs.colors.surface.contrast,
     placeholderTextColor: globalRefs.colors.surface.dark,
     requiredIndicator: "'*'",
-    errorMessageTextColor: globalRefs.colors.error.main,
     helperTextColor: globalRefs.colors.surface.dark,
+    errorMessageTextColor: globalRefs.colors.error.main,
+    successMessageTextColor: globalRefs.colors.success.main,
 
     borderWidth: globalRefs.border.xs,
     borderRadius: globalRefs.radius.xs,

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/newPassword.js

@@ -1,6 +1,9 @@
+import globals from '../globals';
 import { NewPasswordClass } from '../../components/descope-new-password/NewPasswordClass';
 import { refs } from './inputWrapper';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 
+const globalRefs = getThemeRefs(globals);
 const vars = NewPasswordClass.cssVarList;
 
 const newPassword = {
@@ -11,6 +14,8 @@ const newPassword = {
   [vars.fontFamily]: refs.fontFamily,
   [vars.spaceBetweenInputs]: '1em',
   [vars.errorMessageTextColor]: refs.errorMessageTextColor,
+  [vars.policyPreviewBackgroundColor]: 'none',
+  [vars.policyPreviewPadding]: globalRefs.spacing.lg,
 
   _required: {
     // NewPassword doesn't pass `required` attribute to its Password components.

package/src/theme/components/policyValidation.js

@@ -0,0 +1,29 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { PolicyValidationClass } from '../../components/descope-policy-validation/PolicyValidationClass';
+import { refs } from './inputWrapper';
+
+const globalRefs = getThemeRefs(globals);
+const vars = PolicyValidationClass.cssVarList;
+
+const policyValidation = {
+  [vars.fontFamily]: refs.fontFamily,
+  [vars.fontSize]: refs.labelFontSize,
+  [vars.textColor]: refs.labelTextColor,
+  [vars.borderWidth]: refs.borderWidth,
+  [vars.borderStyle]: refs.borderStyle,
+  [vars.borderColor]: refs.borderColor,
+  [vars.borderRadius]: globalRefs.radius.sm,
+  [vars.backgroundColor]: 'none',
+  [vars.padding]: '0px',
+  [vars.labelMargin]: globalRefs.spacing.sm,
+  [vars.itemsSpacing]: globalRefs.spacing.lg,
+  [vars.itemSymbolDefault]: "'\\2022'", // "•"
+  [vars.itemSymbolSuccess]: "'\\2713'", // "✓"
+  [vars.itemSymbolError]: "'\\2A09'", // "⨉"
+  [vars.itemSymbolSuccessColor]: globalRefs.colors.success.main,
+  [vars.itemSymbolErrorColor]: globalRefs.colors.error.main,
+};
+
+export default policyValidation;
+export { vars };

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 };