@descope/web-components-ui 3.9.2 → 3.10.1

package/dist/index.esm.js

@@ -12443,6 +12443,8 @@ const overrideAttrs = [
   'data-password-policy-value-minlength',
   'data-password-policy-value-passwordstrength',
   'data-password-policy-actual-passwordstrength',
+  'data-password-policy-value-disallowedchars',
+  'data-password-policy-value-email',
 ];
 const dataAttrs = ['data', 'active-policies', 'overrides', ...overrideAttrs];
 const policyAttrs = ['label', 'value', ...dataAttrs];
@@ -12561,6 +12563,46 @@ class RawPolicyValidation extends createBaseClass({ componentName: componentName
             };
           }
         }
+
+        // disallowedchars: this stores the configured char list in
+        // overrides.disallowedchars.value so the message can interpolate
+        // `{{value}}`. The regex pattern itself is built upstream (orchestrator
+        // or caller) and shipped on the policy entry — it is not derived from
+        // this override. When the attribute is cleared, drop the override so
+        // the panel doesn't keep stale data.
+        if (attrName === 'data-password-policy-value-disallowedchars') {
+          if (newValue) {
+            this.#overrides = {
+              ...this.#overrides,
+              disallowedchars: {
+                ...this.#overrides?.disallowedchars,
+                value: newValue,
+              },
+            };
+          } else if (this.#overrides?.disallowedchars) {
+            const { disallowedchars: _drop, ...rest } = this.#overrides;
+            this.#overrides = rest;
+          }
+        }
+
+        // disallowemail: stash the user's email so the STR_NEQ_CI comparator
+        // has an `expected` to compare against the live password value. Clear
+        // the override when the attribute is removed/empty so we don't keep
+        // blocking against a previous user's email.
+        if (attrName === 'data-password-policy-value-email') {
+          if (newValue) {
+            this.#overrides = {
+              ...this.#overrides,
+              disallowemail: {
+                ...this.#overrides?.disallowemail,
+                expected: newValue,
+              },
+            };
+          } else if (this.#overrides?.disallowemail) {
+            const { disallowemail: _drop, ...rest } = this.#overrides;
+            this.#overrides = rest;
+          }
+        }
       }
 
       this.renderItems(this.#availablePolicies, this.#activePolicies, this.#overrides);
@@ -12625,6 +12667,7 @@ class RawPolicyValidation extends createBaseClass({ componentName: componentName
       }
 
       const { pattern, message, data, compare } = policy;
+      const normalizedCompare = typeof compare === 'string' ? compare.toUpperCase() : compare;
 
       if ((!pattern && !compare) || !message) {
         return results;
@@ -12638,9 +12681,23 @@ class RawPolicyValidation extends createBaseClass({ componentName: componentName
       if (pattern) {
         const exp = new RegExp(interpolateString(pattern, data));
         validationResult.valid = exp.test(this.value);
+      } else if (normalizedCompare === 'STR_NEQ_CI') {
+        // Compare the live password against the configured string AND its
+        // local-part (before '@'), case-insensitively. Used by the
+        // disallowemail policy.
+        const expected = (data?.expected ?? '').toLowerCase();
+        const actual = (this.value ?? '').toLowerCase();
+        if (!expected || !actual) {
+          // nothing to compare → mark valid so we don't block the flow
+          validationResult.valid = true;
+        } else {
+          const at = expected.indexOf('@');
+          const localPart = at > 0 ? expected.slice(0, at) : expected;
+          validationResult.valid = actual !== expected && actual !== localPart;
+        }
       } else if (compare) {
         validationResult.valid = this.compareValues(
-          compare,
+          normalizedCompare,
           data?.expected ?? -1,
           data?.actual ?? -1
         );
@@ -12656,13 +12713,18 @@ class RawPolicyValidation extends createBaseClass({ componentName: componentName
     return !this.validate().some(({ valid }) => valid === false);
   }
 
-  getValidationItemTemplate({ valid, message }) {
+  buildValidationItem({ valid, message }) {
     const status = !this.value ? 'none' : valid;
-    return `
-      <li class="item" data-valid="${status}">
-        <span class="message">${message}</span>
-      </li>
-    `;
+    const li = document.createElement('li');
+    li.className = 'item';
+    li.dataset.valid = status;
+    const span = document.createElement('span');
+    span.className = 'message';
+    // `textContent` handles any tenant-configured string in `message` safely
+    // (e.g. the disallowedchars list) without needing to escape HTML.
+    span.textContent = message ?? '';
+    li.appendChild(span);
+    return li;
   }
 
   renderItems(availablePolicies, activePolicies) {
@@ -12670,7 +12732,9 @@ class RawPolicyValidation extends createBaseClass({ componentName: componentName
       return;
     }
 
-    this.list.innerHTML = this.validate().map(this.getValidationItemTemplate.bind(this)).join('');
+    this.list.replaceChildren(
+      ...this.validate().map(this.buildValidationItem.bind(this)),
+    );
   }
 
   updateLabel(val) {
@@ -12771,6 +12835,8 @@ const customMixin$9 = (superclass) =>
           'available-policies',
           'data-password-policy-value-minlength',
           'data-password-policy-value-passwordstrength',
+          'data-password-policy-value-disallowedchars',
+          'data-password-policy-value-email',
           'label-type',
           'manual-visibility-toggle',
         ],
@@ -12959,6 +13025,8 @@ const policyPanelAttrs = [
   'active-policies',
   'data-password-policy-value-minlength',
   'data-password-policy-value-passwordstrength',
+  'data-password-policy-value-disallowedchars',
+  'data-password-policy-value-email',
   'manual-visibility-toggle',
 ];
 const commonAttrs$1 = [
@@ -29285,8 +29353,6 @@ class RawAnchored extends createBaseClass$1({
     `;
 
     this.defaultSlot = this.shadowRoot.querySelector('slot:not([name])');
-
-    this.#syncComponentState();
   }
 
   init() {
@@ -29344,7 +29410,7 @@ class RawAnchored extends createBaseClass$1({
   // To support conditional components in flow, we need to sync the 'hidden' className to the root of the component.
   // Ideally, this would happen in the SDK, but we resolved to this patch to fix the issue without forcing users to update SDKs.
   #syncComponentState() {
-    const hasHidden = this.#anchor.classList.contains('hidden');
+    const hasHidden = this.#anchor?.classList?.contains('hidden');
     this.classList.toggle('hidden', hasHidden);
   }
 
@@ -29409,6 +29475,7 @@ class RawAnchored extends createBaseClass$1({
   // empty host rather than reserving its layout box.
   #onAnchorChanged() {
     this.toggleAttribute('has-anchor', !!this.#anchor);
+    this.#syncComponentState();
   }
 }