@arcgis/portal-components 5.0.0-next.1 → 5.0.0-next.11

package/dist/components/arcgis-portal-classification-config/customElement.js

@@ -1,135 +1,135 @@
 import { c as g } from "../../chunks/runtime.js";
 import { LitElement as b, nothing as C } from "@arcgis/lumina";
 import { css as v, html as n } from "lit";
-import { Task as E, TaskStatus as y } from "@lit/task";
-import { createRef as x, ref as I } from "lit/directives/ref.js";
+import { Task as E, TaskStatus as I } from "@lit/task";
+import { createRef as y, ref as x } from "lit/directives/ref.js";
 import { usePropertyChange as w } from "@arcgis/lumina/controllers";
-import { getClosestElement as $ } from "@arcgis/toolkit/dom";
-import { u as P, c as S } from "../../chunks/loadClassificationData.js";
-import { createArcadeExecutor as V } from "@arcgis/core/arcade.js";
-import { u as O } from "../../chunks/useT9n.js";
-import { d as h, a as d, g as R, r as m, c as A, b as _ } from "../../chunks/common.js";
-import { watch as F } from "@arcgis/core/core/reactiveUtils.js";
+import { getClosestElement as R } from "@arcgis/toolkit/dom";
+import { u as $, c as S } from "../../chunks/loadClassificationData.js";
+import { createArcadeExecutor as P } from "@arcgis/core/arcade.js";
+import { u as V } from "../../chunks/useT9n.js";
+import { d as f, a as d, g as O, r as u, c as A, b as F } from "../../chunks/common.js";
+import { watch as _ } from "@arcgis/core/core/reactiveUtils.js";
 import { r as D } from "../../chunks/requests.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.1 */
+v5.0.0-next.11 */
 async function T({
-  portalClassificationSchema: s,
+  portalClassificationSchema: a,
   itemClassification: t
 }) {
-  const i = Object.entries(s.attributes).map(async ([a]) => {
-    const r = await j(a, s, t);
-    return { [a]: { enabled: r } };
+  const i = Object.entries(a.attributes).map(async ([s]) => {
+    const r = await q(s, a, t);
+    return { [s]: { enabled: r } };
   }), e = await Promise.all(i);
   return Object.assign({}, ...e);
 }
-async function j(s, t, i) {
-  const e = t?.attributes?.[s];
+async function q(a, t, i) {
+  const e = t?.attributes?.[a];
   if (!e)
     return !1;
-  const { isAttributeEnabled: a } = e;
-  return a ? await f(
-    a,
+  const { isAttributeEnabled: s } = e;
+  return s ? await h(
+    s,
     JSON.stringify(t),
     i
   ) : !0;
 }
-async function M({
-  portalClassificationSchema: s,
+async function j({
+  portalClassificationSchema: a,
   itemClassification: t
 }) {
-  const i = Object.entries(s.attributes).map(async ([a]) => {
-    const r = await N(a, s, t);
-    return { [a]: { valueExpressionResult: r } };
+  const i = Object.entries(a.attributes).map(async ([s]) => {
+    const r = await M(s, a, t);
+    return { [s]: { valueExpressionResult: r } };
   }), e = await Promise.all(i);
   return Object.assign({}, ...e);
 }
-async function N(s, t, i) {
-  const e = t.attributes[s];
+async function M(a, t, i) {
+  const e = t.attributes[a];
   if (!e)
-    throw Error(`Attribute ${s} not found in schema`);
-  const a = e.valueExpression, r = e.validValues, o = e.validValuesMap;
-  return r?.length ? r : o && Object.keys(o)?.length ? o : a ? await f(
-    a,
+    throw Error(`Attribute ${a} not found in schema`);
+  const s = e.valueExpression, r = e.validValues, o = e.validValuesMap;
+  return r?.length ? r : o && Object.keys(o)?.length ? o : s ? await h(
+    s,
     t,
     i,
-    s
+    a
   ) : null;
 }
-async function q({
-  portalClassificationSchema: s,
+async function N({
+  portalClassificationSchema: a,
   itemClassification: t
 }) {
-  const i = Object.entries(s.attributes).map(async ([a]) => {
+  const i = Object.entries(a.attributes).map(async ([s]) => {
     const r = await H(
-      a,
       s,
+      a,
       t
     );
-    return { [a]: { attributeValidationResult: r } };
+    return { [s]: { attributeValidationResult: r } };
   }), e = await Promise.all(i);
   return Object.assign({}, ...e);
 }
-async function H(s, t, i) {
-  const e = t?.attributes?.[s];
+async function H(a, t, i) {
+  const e = t?.attributes?.[a];
   if (!e)
     return null;
-  const a = e?.attributeValidation;
-  return a ? await f(
-    a,
+  const s = e?.attributeValidation;
+  return s ? await h(
+    s,
     JSON.stringify(t),
     i,
-    s
+    a
   ) : null;
 }
-const u = async (s, t) => {
-  const i = s?.bannerExpression;
-  return i?.length ? await f(
+const m = async (a, t) => {
+  const i = a?.bannerExpression;
+  return i?.length ? await h(
     i,
-    s,
+    a,
     t
-  ) : k(s, t);
-}, k = (s, t) => {
-  const i = Object.entries(s.attributes).sort(
+  ) : U(a, t);
+}, U = (a, t) => {
+  const i = Object.entries(a.attributes).sort(
     ([, o], [, l]) => (o?.bannerOrder ?? 0) - (l?.bannerOrder ?? 0)
-  ), e = [], a = [];
+  ), e = [], s = [];
   return i.forEach(([o, l]) => {
     const c = t?.[o];
     c && l.bannerOrder && (e.push(
-      U({
+      L({
         elementType: l.uiElement ?? "",
         selectionDisplayLabel: l.bannerLabel ?? "",
         labelDelimiter: l.labelDelimiter ?? "",
         classificationProp: c,
         valueDelimiter: l.valueDelimiter ?? ""
       })
-    ), a.push(l.attributeDelimiter ?? ""));
+    ), s.push(l.attributeDelimiter ?? ""));
   }), e.length > 0 ? e.reduce(
-    (o, l, c) => c === 0 ? l : `${o}${a[c - 1]}${l}`,
+    (o, l, c) => c === 0 ? l : `${o}${s[c - 1]}${l}`,
     // avoiding to have delimiter at the start
     ""
   ) : "";
-}, U = ({
-  elementType: s,
+}, L = ({
+  elementType: a,
   selectionDisplayLabel: t,
   labelDelimiter: i,
   classificationProp: e,
-  valueDelimiter: a
+  valueDelimiter: s
 }) => {
-  const r = s.includes("multi") && e ? e.split("").join(a) : e;
+  const r = a.includes("multi") && e ? e.split("").join(s) : e;
   return `${t}${i}${r}`;
 };
-async function f(s, t, i, e = "") {
-  const a = {
+async function h(a, t, i, e = "") {
+  const s = {
     schemaJsonString: typeof t == "string" ? t : JSON.stringify(t),
     valueJsonString: JSON.stringify(i),
     attributeId: e
   };
-  return (await L(s)).execute(a);
+  return (await B(a)).execute(s);
 }
-async function L(s) {
-  return await V(s, {
+async function B(a) {
+  return await P(a, {
     variables: [
       {
         name: "schemaJsonString",
@@ -146,23 +146,23 @@ async function L(s) {
     ]
   });
 }
-const B = v`:host{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.header-section{padding:var(--calcite-spacing-sm)}.header-section__title-container{display:flex;align-items:center;justify-content:space-between}.header-section__title-text{margin:unset;font-weight:unset;font-size:var(--calcite-font-size)}.header-section__title-popover{padding:var(--calcite-spacing-md)}.form-section{display:flex;border-top:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);padding:var(--calcite-spacing-sm);height:100%;overflow:hidden}.form-section__sidebar{flex:1;padding:var(--calcite-spacing-sm)}.form-section__main-content{flex:3;padding:var(--calcite-spacing-sm);overflow:auto}.danger{color:var(--calcite-color-status-danger)}.spacing-y{margin:var(--calcite-spacing-md) 0}`;
-class J extends b {
+const J = v`:host{height:100%;box-sizing:border-box;display:flex;flex-direction:column}.header-section{padding:var(--calcite-spacing-sm)}.header-section__title-container{display:flex;align-items:center;justify-content:space-between}.header-section__title-text{margin:unset;font-weight:unset;font-size:var(--calcite-font-size)}.header-section__title-popover{padding:var(--calcite-spacing-md)}.form-section{display:flex;border-top:var(--calcite-border-width-sm) solid var(--calcite-color-border-1);padding:var(--calcite-spacing-sm);height:100%;overflow:hidden}.form-section__sidebar{flex:1;padding:var(--calcite-spacing-sm)}.form-section__main-content{flex:3;padding:var(--calcite-spacing-sm);overflow:auto}.danger{color:var(--calcite-color-status-danger)}.spacing-y{margin:var(--calcite-spacing-md) 0}`;
+class W extends b {
   constructor() {
-    super(), this.classificationModel = P(this), this.messages = O(), this.formMainContentRef = x(), this._classificationDataTask = S(this), this._formCreationTask = new E(this, {
+    super(), this.classificationModel = $(this), this.messages = V(), this.formMainContentRef = y(), this._classificationDataTask = S(this), this._formCreationTask = new E(this, {
       task: async () => {
         if (await this._classificationDataTask.taskComplete, !this.portalClassificationSchema || !this.portalItem)
           throw new Error("Portal item and classification schema are required to render the form");
         const t = this.portalItem.clone();
         if (await t.load(), !this.primaryAttribute)
           throw new Error("primaryAttribute is required but was undefined.");
-        this.existingClassification = !!t.classification, t.classification = h(t.classification, this.primaryAttribute, this.portalClassificationSchema), t.classification && (t.classification.banner = await u(this.portalClassificationSchema, t.classification)), this.pendingPortalItem = t, this._itemClassificationWatchHandle && (this._itemClassificationWatchHandle.remove(), this.portalItem.removeHandles("arcgis-classification-config"), this._itemClassificationWatchHandle = void 0), this._itemClassificationWatchHandle = F(() => this.portalItem.classification, (i) => {
+        this.existingClassification = !!t.classification, t.classification = f(t.classification, this.primaryAttribute, this.portalClassificationSchema), t.classification && (t.classification.banner = await m(this.portalClassificationSchema, t.classification)), this.pendingPortalItem = t, this._itemClassificationWatchHandle && (this._itemClassificationWatchHandle.remove(), this.portalItem.removeHandles("arcgis-classification-config"), this._itemClassificationWatchHandle = void 0), this._itemClassificationWatchHandle = _(() => this.portalItem.classification, (i) => {
           if (this.pendingPortalItem) {
             const e = this.pendingPortalItem.clone();
             e.load().then(() => {
               e.classification = i, this.pendingPortalItem = e;
-            }).catch((a) => {
-              console.error(a);
+            }).catch((s) => {
+              console.error(s);
             });
           }
         }), this.portalItem.addHandles(this._itemClassificationWatchHandle, "arcgis-classification-config"), await this.evaluateAttributeExpressions(this.portalClassificationSchema, this.pendingPortalItem), this.pendingPortalItem.classification = d(this.pendingPortalItem.classification, this.attributeExpressionResults), this.existingClassification && this.validateForm();
@@ -171,7 +171,7 @@ class J extends b {
     }), this.getFormDisplayOrder = (t) => this.portalClassificationSchema?.layouts.default.layoutElements[t].formDisplayOrder ?? 0, this.addEditInfoAttributes = () => {
       if (!this.pendingPortalItem?.classification)
         return {};
-      const t = structuredClone(this.pendingPortalItem.classification), i = R(this.pendingPortalItem, t);
+      const t = structuredClone(this.pendingPortalItem.classification), i = O(this.pendingPortalItem, t);
       return { ...t, ...i };
     }, this.updateFavoriteClassification = (t) => {
       this.favoriteClassifications = t;
@@ -179,17 +179,17 @@ class J extends b {
       const i = t.classification;
       if (this.selectedFavoriteClassificationName = t.name, this.pendingPortalItem) {
         const e = this.pendingPortalItem.clone();
-        if (await e.load(), e.classification = m(this.portalClassificationSchema, i), !this.portalClassificationSchema)
+        if (await e.load(), e.classification = u(this.portalClassificationSchema, i), !this.portalClassificationSchema)
           return;
         await this.evaluateAttributeExpressions(this.portalClassificationSchema, e), e.classification = d(e.classification, this.attributeExpressionResults), this.pendingPortalItem = e;
       }
-    }, this.existingClassification = !1, this.portalClassificationSchema = this.classificationModel.portalClassificationSchema, this.primaryAttribute = this.classificationModel.primaryAttribute, this.attributeExpressionResults = /* @__PURE__ */ new Map(), this.formValidationErrors = [], this.remoteValidationErrors = "", this.canUserConfigureClassification = !0, this.favoriteClassifications = [], this.status = this.classificationModel.status, this.values = {}, this.valid = !1, this.autoDestroyDisabled = !1, this.arcgisPropertyChange = w()("status", "values", "valid");
+    }, this.existingClassification = !1, this.portalClassificationSchema = this.classificationModel.portalClassificationSchema, this.primaryAttribute = this.classificationModel.primaryAttribute, this.attributeExpressionResults = /* @__PURE__ */ new Map(), this.formValidationErrors = [], this.remoteValidationErrors = "", this.canUserConfigureClassification = !0, this.favoriteClassifications = [], this.isRequiredErrors = /* @__PURE__ */ new Set(), this.status = this.classificationModel.status, this.values = {}, this.valid = !1, this.autoDestroyDisabled = !1, this.arcgisPropertyChange = w()("status", "values", "valid");
   }
   static {
-    this.properties = { existingClassification: 16, portalClassificationSchema: 16, primaryAttribute: 16, attributeExpressionResults: 16, formValidationErrors: 16, itemClassification: 16, pendingPortalItem: 16, selectedCategory: 16, remoteValidationErrors: 16, canUserConfigureClassification: 16, favoriteClassifications: 16, selectedFavoriteClassificationName: 16, portalItem: 0, status: 35, values: [1, { type: Object }], valid: 7, autoDestroyDisabled: 5 };
+    this.properties = { existingClassification: 16, portalClassificationSchema: 16, primaryAttribute: 16, attributeExpressionResults: 16, formValidationErrors: 16, itemClassification: 16, pendingPortalItem: 16, selectedCategory: 16, remoteValidationErrors: 16, canUserConfigureClassification: 16, favoriteClassifications: 16, selectedFavoriteClassificationName: 16, isRequiredErrors: 16, portalItem: 0, status: 35, values: [1, { type: Object }], valid: 7, autoDestroyDisabled: 5 };
   }
   static {
-    this.styles = B;
+    this.styles = J;
   }
   async destroy() {
     await this.manager.destroy();
@@ -199,7 +199,7 @@ class J extends b {
       this.pendingPortalItem = this.portalItem?.clone(), this.portalClassificationSchema && this.pendingPortalItem && (await this.evaluateAttributeExpressions(this.portalClassificationSchema, this.pendingPortalItem), this.pendingPortalItem.classification = d(this.pendingPortalItem.classification, this.attributeExpressionResults), this.validateForm());
     else if (this.portalItem && this.primaryAttribute && this.portalClassificationSchema) {
       const t = this.portalItem.clone();
-      await t.load(), this.pendingPortalItem = this.portalItem?.clone(), this.pendingPortalItem.classification = h(t.classification, this.primaryAttribute, this.portalClassificationSchema), this.portalClassificationSchema && this.pendingPortalItem && (await this.evaluateAttributeExpressions(this.portalClassificationSchema, this.pendingPortalItem), this.pendingPortalItem.classification = d(this.pendingPortalItem.classification, this.attributeExpressionResults));
+      await t.load(), this.pendingPortalItem = this.portalItem?.clone(), this.pendingPortalItem.classification = f(t.classification, this.primaryAttribute, this.portalClassificationSchema), this.portalClassificationSchema && this.pendingPortalItem && (await this.evaluateAttributeExpressions(this.portalClassificationSchema, this.pendingPortalItem), this.pendingPortalItem.classification = d(this.pendingPortalItem.classification, this.attributeExpressionResults));
     }
   }
   async validateForm() {
@@ -229,28 +229,28 @@ class J extends b {
     (t.has("formValidationErrors") || t.has("remoteValidationErrors")) && (this.valid = !this.formValidationErrors.length && !this.remoteValidationErrors);
   }
   loaded() {
-    const t = $(this.el, "form");
+    const t = R(this.el, "form");
     t && (this.listenOn(t, "formdata", this.updateFormData), this.listenOn(t, "submit", this.handleFormSubmit)), this.listen("submit", this.handleFormSubmit);
   }
   async updateClassificationProperty(t) {
     if (!this.pendingPortalItem || !this.portalClassificationSchema)
       return;
     const i = this.pendingPortalItem.clone();
-    await i.load(), Object.entries(t ?? {}).forEach(([e, a]) => {
+    await i.load(), Object.entries(t ?? {}).forEach(([e, s]) => {
       if (e === this.primaryAttribute) {
-        let r = _(a, i.classification, this.primaryAttribute);
-        r = m(this.portalClassificationSchema, r), i.classification = r;
+        let r = F(s, i.classification, this.primaryAttribute);
+        r = u(this.portalClassificationSchema, r), i.classification = r;
       } else {
         const r = new Map(Object.entries(i.classification ?? {}));
-        if (a === void 0 || a === "" || Array.isArray(a) && a.length === 0)
+        if (s === void 0 || s === "" || Array.isArray(s) && s.length === 0)
           r.delete(e);
-        else if (r.set(e, a), e === "fgi" && !r.has("fgiOptions")) {
+        else if (r.set(e, s), e === "fgi" && !r.has("fgiOptions")) {
           const o = this.portalClassificationSchema?.attributes?.fgiOptions?.defaultValue ?? [];
           r.set("fgiOptions", Array.isArray(o) ? o : [o]);
         }
         i.classification = Object.fromEntries(r);
       }
-    }), i.classification && !i.classification.fgi && delete i.classification.fgiOptions, await this.evaluateAttributeExpressions(this.portalClassificationSchema, i), i.classification = d(i.classification, this.attributeExpressionResults), i.classification && (i.classification.banner = await u(this.portalClassificationSchema, i.classification)), this.pendingPortalItem = i, this.existingClassification && this.validateForm();
+    }), i.classification && !i.classification.fgi && delete i.classification.fgiOptions, await this.evaluateAttributeExpressions(this.portalClassificationSchema, i), i.classification = d(i.classification, this.attributeExpressionResults), i.classification && (i.classification.banner = await m(this.portalClassificationSchema, i.classification)), this.pendingPortalItem = i, this.existingClassification && this.validateForm(), t && "classification" in t && this.updateIsRequiredErrors();
   }
   handleCategorySelectChange(t) {
     this.selectedCategory = t.target.selectedItems[0].value;
@@ -259,35 +259,41 @@ class J extends b {
     const e = await T({
       portalClassificationSchema: t,
       itemClassification: i.classification
-    }), a = await M({
+    }), s = await j({
       portalClassificationSchema: t,
       itemClassification: i.classification
-    }), r = await q({
+    }), r = await N({
       portalClassificationSchema: t,
       itemClassification: i.classification
     });
     Object.keys(t.attributes).forEach((o) => {
-      const l = e[o]?.enabled ?? !0, c = a[o]?.valueExpressionResult, p = r[o]?.attributeValidationResult;
+      const l = e[o]?.enabled ?? !0, c = s[o]?.valueExpressionResult, p = r[o]?.attributeValidationResult;
       this.attributeExpressionResults.set(o, { enabled: l, valueExpressionResult: c, attributeValidationResult: p });
     });
   }
-  updateFormValidationErrors() {
-    const t = [];
+  updateIsRequiredErrors() {
+    const t = /* @__PURE__ */ new Set();
     Object.entries(this.portalClassificationSchema?.attributes ?? {})?.forEach(([i, e]) => {
-      e.isRequired && /**
+      e.isRequired && !this.pendingPortalItem?.classification?.[i] && this.pendingPortalItem?.classification?.[i] !== 0 && t.add(i);
+    }), this.isRequiredErrors = t;
+  }
+  updateFormValidationErrors(t = !1) {
+    const i = [];
+    Object.entries(this.portalClassificationSchema?.attributes ?? {})?.forEach(([e, s]) => {
+      s.isRequired && /**
       * Because of the logic in updateClassificationProperty (we delete keys instead of setting falsy values),
       * we can assume that the classification property will not have valid falsy values beyond zero.
       */
-      !this.pendingPortalItem?.classification?.[i] && this.pendingPortalItem?.classification?.[i] !== 0 && t.push({
-        attribute: e.label,
+      !this.pendingPortalItem?.classification?.[e] && this.pendingPortalItem?.classification?.[e] !== 0 && (!t || this.isRequiredErrors.has(e)) && i.push({
+        attribute: s.label,
         reason: this.messages.isrequired ?? "is required",
-        category: e.attributeCategory
-      }), this.attributeExpressionResults.get(i)?.attributeValidationResult && t.push({
-        attribute: e.label,
-        reason: this.attributeExpressionResults.get(i)?.attributeValidationResult ?? "",
-        category: e.attributeCategory
+        category: s.attributeCategory
+      }), this.attributeExpressionResults.get(e)?.attributeValidationResult && i.push({
+        attribute: s.label,
+        reason: this.attributeExpressionResults.get(e)?.attributeValidationResult ?? "",
+        category: s.attributeCategory
       });
-    }), this.formValidationErrors = t;
+    }), this.formValidationErrors = i;
   }
   async updateRemoteValidationErrors() {
     if (!this.pendingPortalItem?.classification)
@@ -301,13 +307,13 @@ class J extends b {
     this.remoteValidationErrors = t;
   }
   async handleFormSubmit(t) {
-    this.validateForm(), this.formMainContentRef.value?.scrollIntoView();
+    this.validateForm(), this.updateIsRequiredErrors(), this.formMainContentRef.value?.scrollIntoView();
   }
   updateFormData(t) {
     const i = t.formData;
     let e = this.addEditInfoAttributes();
-    e = d(e, this.attributeExpressionResults), Object.entries(e ?? {}).forEach(([a, r]) => {
-      i.set(a, r);
+    e = d(e, this.attributeExpressionResults), Object.entries(e ?? {}).forEach(([s, r]) => {
+      i.set(s, r);
     });
   }
   renderCategoryTabs() {
@@ -327,7 +333,7 @@ class J extends b {
   renderFavoriteClassification() {
     const t = this.portalClassificationSchema?.attributeCategories?.[0] ?? "Default";
     return this.selectedCategory = this.portalClassificationSchema?.attributeCategories?.length ? this.selectedCategory : "Default", this.selectedCategory === t ? n`<arcgis-portal-classification-favorite .portalItem=${this.pendingPortalItem ?? this.portalItem} .classificationValue=${this.pendingPortalItem?.classification} .favoriteClassifications=${this.favoriteClassifications} .selectedFavoriteClassificationName=${this.selectedFavoriteClassificationName} .attributeExpressionResults=${this.attributeExpressionResults} .resetFavoriteClassification=${(i) => this.updateFavoriteClassification(i)} .updateClassificationData=${async (i) => {
-      await this.updateClassificationData(i), this.updateFormValidationErrors();
+      await this.updateClassificationData(i), this.updateFormValidationErrors(), this.updateIsRequiredErrors();
     }}></arcgis-portal-classification-favorite>` : null;
   }
   renderForm() {
@@ -340,8 +346,10 @@ class J extends b {
         return n`${this.renderValidationErrors()}${this.renderFavoriteClassification()}${t.filter(([, { attributeCategory: i }]) => this.selectedCategory === i || !i).map(([i, e]) => {
           if (this.attributeExpressionResults.get(i)?.enabled === !1)
             return null;
-          const a = this.pendingPortalItem?.classification?.[i];
-          return n`<arcgis-portal-classification-form-element .attributeKey=${i} .attribute=${e} .value=${a} @arcgisAttributeValueChange=${(r) => void this.updateClassificationProperty(r.detail)} .renderingInfo=${this.attributeExpressionResults.get(i)}></arcgis-portal-classification-form-element>`;
+          const s = this.pendingPortalItem?.classification?.[i];
+          return n`<arcgis-portal-classification-form-element .attributeKey=${i} .attribute=${e} .value=${s} @arcgisAttributeValueChange=${async (r) => {
+            await this.updateClassificationProperty(r.detail), e.isRequired && !r.detail[i] ? this.isRequiredErrors.add(i) : this.isRequiredErrors = new Set(Array.from(this.isRequiredErrors).filter((o) => o !== i)), this.updateFormValidationErrors(!0);
+          }} .renderingInfo=${this.attributeExpressionResults.get(i)} .isRequiredErrors=${this.isRequiredErrors}></arcgis-portal-classification-form-element>`;
         })}`;
       }
     });
@@ -356,11 +364,11 @@ class J extends b {
     return this.portalItem ? this._classificationDataTask.render({
       pending: () => n`<calcite-loader .label=${this.messages.loading ?? "loading"}></calcite-loader>`,
       error: () => this.renderNotice(this.messages.anerroroccurred ?? "An error has occurred.", "danger"),
-      complete: () => this.portalItem ? this.canUserConfigureClassification ? this.portalItem.portal.hasClassificationSchema ? n`<div class="header-section" role=region aria-label=${this.messages.documentbannerpreview ?? "documentbannerpreview" ?? C}><div class="header-section__title-container"><h2 class="header-section__title-text">${this.messages.documentbannerpreview ?? "documentbannerpreview"}</h2>${this.renderHelpTooltip()}</div>${this._formCreationTask.status === y.COMPLETE && n`<arcgis-portal-classification-banner .portalItem=${this.pendingPortalItem ?? this.portalItem} variant=preview .missingExistingClassification=${!this.existingClassification}></arcgis-portal-classification-banner>` || ""}</div><div class="form-section">${this.portalClassificationSchema?.attributeCategories?.length && n`<div class="form-section__sidebar">${this.renderCategoryTabs()}</div>` || ""}<div class="form-section__main-content" ${I(this.formMainContentRef)}>${this.renderForm()}</div></div>` : this.renderNotice(this.messages.missingclassificationschema ?? "Portal is missing classification schema.") : this.renderNotice(this.messages.userconfigurepermissionrequired ?? "User configuration permission is required.") : this.renderNotice(this.messages.portalitemrequired ?? "Portal item is required.")
+      complete: () => this.portalItem ? this.canUserConfigureClassification ? this.portalItem.portal.hasClassificationSchema ? n`<div class="header-section" role=region aria-label=${this.messages.documentbannerpreview ?? "documentbannerpreview" ?? C}><div class="header-section__title-container"><h2 class="header-section__title-text">${this.messages.documentbannerpreview ?? "documentbannerpreview"}</h2>${this.renderHelpTooltip()}</div>${this._formCreationTask.status === I.COMPLETE && n`<arcgis-portal-classification-banner .portalItem=${this.pendingPortalItem ?? this.portalItem} variant=preview .missingExistingClassification=${!this.existingClassification}></arcgis-portal-classification-banner>` || ""}</div><div class="form-section">${this.portalClassificationSchema?.attributeCategories?.length && n`<div class="form-section__sidebar">${this.renderCategoryTabs()}</div>` || ""}<div class="form-section__main-content" ${x(this.formMainContentRef)}>${this.renderForm()}</div></div>` : this.renderNotice(this.messages.missingclassificationschema ?? "Portal is missing classification schema.") : this.renderNotice(this.messages.userconfigurepermissionrequired ?? "User configuration permission is required.") : this.renderNotice(this.messages.portalitemrequired ?? "Portal item is required.")
     }) : this.renderNotice(this.messages.portalitemrequired ?? "Portal item is required.");
   }
 }
-g("arcgis-portal-classification-config", J);
+g("arcgis-portal-classification-config", W);
 export {
-  J as ArcgisPortalClassificationConfig
+  W as ArcgisPortalClassificationConfig
 };

package/dist/components/arcgis-portal-classification-favorite/customElement.js

@@ -7,7 +7,7 @@ import { u as d, r as v } from "../../chunks/requests.js";
 import { g as h } from "../../chunks/common.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.1 */
+v5.0.0-next.11 */
 const m = r`.select-favorite-label{display:flex;justify-content:space-between;align-items:center}.favorite-actions{display:flex;justify-content:flex-end;gap:1.5rem;align-items:center}.classification-favorite-dialog{--calcite-dialog-content-space: 0;--calcite-dialog-background-color: "var(--calcite-color-foreground-2)"}.save-new-favorite-button{display:flex;justify-content:flex-end;margin-top:.25rem;margin-bottom:1rem}.classification-favorite-item{display:flex;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem;border-bottom:1px solid var(--calcite-color-border-1)}.classification-favorite-list,.classification-favorite-input-section{margin:1.75rem 1rem}`;
 class C extends n {
   constructor() {

package/dist/components/arcgis-portal-classification-form-element/customElement.d.ts

@@ -12,7 +12,8 @@ export declare class ArcgisPortalClassificationFormElement extends LitElement {
     attributeKey: string;
     attribute: ClassificationSchema["attributes"][string];
     value: unknown;
-    renderingInfo: Pick<NonNullable<ReturnType<AttributeExpressionResults["get"]>>, "attributeValidationResult" | "valueExpressionResult">;
+    renderingInfo?: Pick<NonNullable<ReturnType<AttributeExpressionResults["get"]>>, "attributeValidationResult" | "valueExpressionResult">;
+    isRequiredErrors: Set<string>;
     /** The attribute value has changed. */
     readonly arcgisAttributeValueChange: TargetedEvent<this, Record<string, unknown>>;
 }

package/dist/components/arcgis-portal-classification-form-element/customElement.js

@@ -5,28 +5,28 @@ import { css as d, html as i } from "lit";
 import { u as h } from "../../chunks/useT9n.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/5.0/esri/copyright.txt for details.
-v5.0.0-next.1 */
+v5.0.0-next.11 */
 const m = d`.spacing-y{margin:var(--calcite-spacing-md) 0}.portal-classification-form-element-tooltip{display:flex;justify-content:space-between;align-items:center}`;
 function l(n, e) {
   return n.uiElement === e;
 }
 class v extends c {
   constructor() {
-    super(...arguments), this.messages = h(), this.arcgisAttributeValueChange = b();
+    super(...arguments), this.messages = h(), this.isRequiredErrors = /* @__PURE__ */ new Set(), this.arcgisAttributeValueChange = b();
   }
   static {
-    this.properties = { validationMsg: 16, attributeKey: 1, attribute: 0, value: 0, renderingInfo: 0 };
+    this.properties = { validationMsg: 16, attributeKey: 1, attribute: 0, value: 0, renderingInfo: 0, isRequiredErrors: 0 };
   }
   static {
     this.styles = m;
   }
   willUpdate(e) {
-    e.has("renderingInfo") && (this.validationMsg = this._getValidationMessage());
+    (e.has("renderingInfo") || e.has("isRequiredErrors")) && (this.validationMsg = this._getValidationMessage());
   }
   _getValidationMessage() {
-    if (this.renderingInfo.attributeValidationResult)
+    if (this.renderingInfo?.attributeValidationResult)
       return this.renderingInfo.attributeValidationResult;
-    if (this.attribute.isRequired && !this.value)
+    if (this.isRequiredErrors.has(this.attributeKey))
       return this.messages.requiredfield ?? "This is a required field.";
   }
   renderCheckbox() {
@@ -45,16 +45,16 @@ class v extends c {
     return l(this.attribute, "single-select") ? i`<calcite-label .for=${this.attributeKey}>${this.attribute.label}<calcite-combobox selection-mode=single id=${this.attributeKey ?? a} .label=${this.attribute.label} .name=${this.attributeKey} @calciteComboboxChange=${(e) => this.arcgisAttributeValueChange.emit({ [this.attributeKey]: e.target.value })} .placeholder=${this.attribute.description ?? this.messages.selectanoption} .required=${this.attribute.isRequired} .status=${this.validationMsg ? "invalid" : "valid"} overlay-positioning=fixed validation-icon=exclamation-mark-triangle .validationMessage=${this.validationMsg} .value=${this.value} data-testid=${`single-select-${this.attributeKey}`}>${this._renderSingleSelectComboboxOptions()}</calcite-combobox></calcite-label>` : null;
   }
   _renderSingleSelectComboboxOptions() {
-    if (!Array.isArray(this.renderingInfo.valueExpressionResult))
+    if (!Array.isArray(this.renderingInfo?.valueExpressionResult))
       return;
     const e = this.value;
-    return u(this.renderingInfo.valueExpressionResult, (t) => t.label, (t) => i`<calcite-combobox-item .selected=${e === t.value} text-label=${t.label ?? a} .value=${t.value} data-testid=${`single-combobox-item-${t.value}`}></calcite-combobox-item>`);
+    return u(this.renderingInfo?.valueExpressionResult, (t) => t.label, (t) => i`<calcite-combobox-item .selected=${e === t.value} text-label=${t.label ?? a} .value=${t.value} data-testid=${`single-combobox-item-${t.value}`}></calcite-combobox-item>`);
   }
   _renderComboboxOptions() {
-    if (!Array.isArray(this.renderingInfo.valueExpressionResult))
+    if (!Array.isArray(this.renderingInfo?.valueExpressionResult))
       return;
     const e = this.value;
-    return this.renderingInfo.valueExpressionResult.map((t) => i`<calcite-combobox-item .selected=${e?.includes(t.value)} text-label=${t.label ?? a} .value=${t.value} data-testid=${`combobox-item-${t.value}`}></calcite-combobox-item>`);
+    return this.renderingInfo?.valueExpressionResult.map((t) => i`<calcite-combobox-item .selected=${e?.includes(t.value)} text-label=${t.label ?? a} .value=${t.value} data-testid=${`combobox-item-${t.value}`}></calcite-combobox-item>`);
   }
   renderMultiSelect() {
     return l(this.attribute, "multi-select") ? i`<calcite-label .for=${this.attributeKey}>${this.attribute.label}<calcite-combobox id=${this.attributeKey ?? a} .label=${this.attribute.label} .name=${this.attributeKey} @calciteComboboxChange=${(e) => {
@@ -65,10 +65,10 @@ class v extends c {
     }} .placeholder=${this.attribute.description ?? this.messages.selectoptions} .required=${this.attribute.isRequired} .status=${this.validationMsg ? "invalid" : "valid"} validation-icon=exclamation-mark-triangle .validationMessage=${this.validationMsg} .value=${this.value}>${this._renderComboboxOptions()}</calcite-combobox></calcite-label>` : null;
   }
   _renderGroupedComboboxOptions() {
-    if (!this.renderingInfo.valueExpressionResult || Array.isArray(this.renderingInfo.valueExpressionResult))
+    if (!this.renderingInfo?.valueExpressionResult || Array.isArray(this.renderingInfo?.valueExpressionResult))
       return;
     const e = this.value;
-    return Object.entries(this.renderingInfo.valueExpressionResult).map(([t, s]) => i`<calcite-combobox-item .selected=${e?.includes(t)} text-label=${t ?? a} .value=${t}>${s.map((r) => i`<calcite-combobox-item .selected=${e?.includes(r.value)} text-label=${r.label ?? a} .value=${r.value} data-testid=${`grouped-combobox-item-${r.value}`}></calcite-combobox-item>`)}</calcite-combobox-item>`);
+    return Object.entries(this.renderingInfo?.valueExpressionResult).map(([t, s]) => i`<calcite-combobox-item .selected=${e?.includes(t)} text-label=${t ?? a} .value=${t}>${s.map((r) => i`<calcite-combobox-item .selected=${e?.includes(r.value)} text-label=${r.label ?? a} .value=${r.value} data-testid=${`grouped-combobox-item-${r.value}`}></calcite-combobox-item>`)}</calcite-combobox-item>`);
   }
   renderMultiGroupedSelectNested() {
     return l(this.attribute, "multi-grouped-select-nested") ? i`<calcite-label .for=${this.attributeKey}>${this.attribute.label}<calcite-combobox id=${this.attributeKey ?? a} .label=${this.attribute.label} .name=${this.attributeKey} @calciteComboboxChange=${(e) => {