area validation

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts

@@ -236,7 +236,6 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 	#rangeUnderflowValidator?: UmbFormControlValidatorConfig;
 	#rangeOverflowValidator?: UmbFormControlValidatorConfig;
 	async #setupRangeValidation(rangeLimit: UmbNumberRangeValueType | undefined) {
-		console.log('setupRangeValidation', rangeLimit);
 		if (this.#rangeUnderflowValidator) {
 			this.removeValidator(this.#rangeUnderflowValidator);
 			this.#rangeUnderflowValidator = undefined;
@@ -295,14 +294,14 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 						</umb-block-grid-entry>`,
 				)}
 			</div>
-			${this._areaKey ? html` <uui-form-validation-message .for=${this}></uui-form-validation-message>` : nothing}
 			${this._canCreate ? this.#renderCreateButton() : nothing}
+			${this._areaKey ? html` <uui-form-validation-message .for=${this}></uui-form-validation-message>` : nothing}
 		`;
 	}
 
 	#renderCreateButton() {
 		if (this._areaKey === null || this._layoutEntries.length === 0) {
-			return html`<uui-button-group>
+			return html`<uui-button-group id="createButton">
 				<uui-button
 					look="placeholder"
 					label=${this._singleBlockTypeName
@@ -354,19 +353,27 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
 				opacity: 0.2;
 				pointer-events: none;
 			}
+
 			> div {
 				display: flex;
 				flex-direction: column;
 				align-items: stretch;
 			}
 
-			uui-button-group {
+			#createButton {
 				padding-top: 1px;
 				grid-template-columns: 1fr auto;
 
 				--umb-block-grid--is-dragging--variable: var(--umb-block-grid--is-dragging) none;
 				display: var(--umb-block-grid--is-dragging--variable, grid);
 			}
+			:host(:not([pristine]):invalid) #createButton {
+				--uui-button-contrast: var(--uui-color-danger);
+				--uui-button-contrast-hover: var(--uui-color-danger);
+				--uui-color-default-emphasis: var(--uui-color-danger);
+				--uui-button-border-color: var(--uui-color-danger);
+				--uui-button-border-color-hover: var(--uui-color-danger);
+			}
 
 			.umb-block-grid__layout-container[data-area-length='0'] {
 				--umb-block-grid--is-dragging--variable: var(--umb-block-grid--is-dragging) 1;

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entries.context.ts

@@ -84,6 +84,10 @@ export class UmbBlockGridEntriesContext
 		this.#workspaceModal.setUniquePathValue('areaKey', areaKey ?? 'null');
 		this.#catalogueModal.setUniquePathValue('areaKey', areaKey ?? 'null');
 		this.#gotAreaKey();
+
+		// Idea: If we need to parse down a validation data path to target the specific layout object: [NL]
+		// If we have a areaKey, we want to inherit our layoutDataPath from nearest blockGridEntry context.
+		// If not, we want to set the layoutDataPath to a base one.
 	}
 
 	setLayoutColumns(columns: number | undefined) {
@@ -315,8 +319,8 @@ export class UmbBlockGridEntriesContext
 			if (!this.#areaType) return undefined;
 			// No need to observe as this method is called every time the area is changed.
 			this.#rangeLimits.setValue({
-				min: this.#areaType.minAllowed ?? 0,
-				max: this.#areaType.maxAllowed ?? Infinity,
+				min: this.#areaType.minAllowed ? parseInt(this.#areaType.minAllowed) : 0,
+				max: this.#areaType.maxAllowed ? parseInt(this.#areaType.maxAllowed) : Infinity,
 			});
 		} else if (this.#areaKey === null) {
 			if (!this._manager) return undefined;

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/types.ts

@@ -26,8 +26,8 @@ export interface UmbBlockGridTypeAreaType {
 	alias: string;
 	columnSpan?: number;
 	rowSpan?: number;
-	minAllowed?: number;
-	maxAllowed?: number;
+	minAllowed?: string;
+	maxAllowed?: string;
 	specifiedAllowance?: Array<UmbBlockGridTypeAreaTypePermission>;
 }