diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts index bcdc14b897..76ee38b35f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts @@ -11,6 +11,8 @@ import { html, customElement, state, repeat, css, property, nothing } from '@umb import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import '../block-grid-entry/index.js'; import { UmbSorterController, type UmbSorterConfig, type resolvePlacementArgs } from '@umbraco-cms/backoffice/sorter'; +import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; +import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; /** * Notice this utility method is not really shareable with others as it also takes areas into account. [NL] @@ -98,7 +100,7 @@ const SORTER_CONFIG: UmbSorterConfig('validationLimit')?.min ?? 0; + const max = config?.getValueByAlias('validationLimit')?.max ?? Infinity; + + this.addValidator( + 'rangeUnderflow', + () => { + return this.localize.term('validation_entriesShort', [min, min - (this._layoutEntries.length ?? 0)]); + }, + () => { + return (this._layoutEntries.length ?? 0) < min; + }, + ); + + this.addValidator( + 'rangeOverflow', + () => { + return this.localize.term('validation_entriesExceed', [max, (this._layoutEntries.length ?? 0) - max]); + }, + () => { + return (this._layoutEntries.length ?? 0) > max; + }, + ); + } + } + // TODO: Missing ability to jump directly to creating a Block, when there is only one Block Type. [NL] render() { return html` diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts index 21e61c2da5..fba24dea2d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts @@ -7,16 +7,19 @@ import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extensi import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type'; import type { UmbBlockGridTypeModel, UmbBlockGridValueModel } from '@umbraco-cms/backoffice/block-grid'; -import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; import '../../components/block-grid-entries/index.js'; import { observeMultiple } from '@umbraco-cms/backoffice/observable-api'; import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property'; +import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; /** * @element umb-property-editor-ui-block-grid */ @customElement('umb-property-editor-ui-block-grid') -export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implements UmbPropertyEditorUiElement { +export class UmbPropertyEditorUIBlockGridElement + extends UmbFormControlMixin(UmbLitElement) + implements UmbPropertyEditorUiElement +{ #context = new UmbBlockGridManagerContext(this); // private _value: UmbBlockGridValueModel = { @@ -28,10 +31,10 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; - const validationLimit = config.getValueByAlias('validationLimit'); + /*const validationLimit = config.getValueByAlias('validationLimit'); - this._limitMin = validationLimit?.min; - this._limitMax = validationLimit?.max; + this.#limitMin = validationLimit?.min; + this.#limitMax = validationLimit?.max;*/ const blocks = config.getValueByAlias>('blocks') ?? []; this.#context.setBlockTypes(blocks); @@ -45,11 +48,6 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement this.#context.setEditorConfiguration(config); } - // - @state() - private _limitMin?: number; - @state() - private _limitMax?: number; @state() private _layoutColumns?: number; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index e9e8b905dd..1b94730563 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -14,7 +14,7 @@ import { } from '@umbraco-cms/backoffice/property-editor'; import type { UmbBlockLayoutBaseModel } from '@umbraco-cms/backoffice/block'; import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type'; -import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/modal'; import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; @@ -74,7 +74,7 @@ export class UmbPropertyEditorUIBlockListElement extends UmbLitElement implement public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; - const validationLimit = config.getValueByAlias('validationLimit'); + const validationLimit = config.getValueByAlias('validationLimit'); this._limitMin = validationLimit?.min; this._limitMax = validationLimit?.max; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts index 4f86a9475e..0178c48acb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts @@ -68,6 +68,9 @@ export abstract class UmbBlockManagerContext< setEditorConfiguration(configs: UmbPropertyEditorConfigCollection) { this._editorConfiguration.setValue(configs); } + getEditorConfiguration(): UmbPropertyEditorConfigCollection | undefined { + return this._editorConfiguration.getValue(); + } setBlockTypes(blockTypes: Array) { this.#blockTypes.setValue(blockTypes); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts index 83f02dbbaf..cd522a0a1d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-number-range/input-number-range.element.ts @@ -2,7 +2,7 @@ import { css, customElement, html, ifDefined, property, state } from '@umbraco-c import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UUIInputElement } from '@umbraco-cms/backoffice/external/uui'; function getNumberOrUndefined(value: string) { @@ -43,7 +43,7 @@ export class UmbInputNumberRangeElement extends UmbFormControlMixin(UmbLitElemen } @property({ type: Object }) - validationRange?: NumberRangeValueType; + validationRange?: UmbNumberRangeValueType; private updateValue() { const newValue = diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/models/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/models/index.ts index 56d28dd753..c1f1a5034e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/models/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/models/index.ts @@ -9,7 +9,7 @@ export interface ServertimeOffset { offset: number; } -export interface NumberRangeValueType { +export interface UmbNumberRangeValueType { min?: number; max?: number; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/validation/mixins/form-control.mixin.ts b/src/Umbraco.Web.UI.Client/src/packages/core/validation/mixins/form-control.mixin.ts index 1e58626a9e..8e12d5ba56 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/validation/mixins/form-control.mixin.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/validation/mixins/form-control.mixin.ts @@ -96,7 +96,6 @@ export function UmbFormControlMixin< /** * Value of this form control. - * If you dont want the setFormValue to be called on the ElementInternals, then prevent calling this method, by not calling super.value = newValue in your implementation of the value setter method. * @type {string} * @attr value * @default '' diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts index 477ba1415d..5cfb04658f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/document-types/property-editors/document-type-picker/property-editor-ui-document-type-picker.element.ts @@ -2,7 +2,7 @@ import type { UmbInputDocumentTypeElement } from '../../components/input-documen import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; -import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; @@ -14,7 +14,7 @@ export class UmbPropertyEditorUIDocumentTypePickerElement extends UmbLitElement public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; - const minMax = config?.getValueByAlias('validationLimit'); + const minMax = config?.getValueByAlias('validationLimit'); this.min = minMax?.min ?? 0; this.max = minMax?.max ?? Infinity; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts index cf4793ae28..9a6a311b0f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/property-editors/document-picker/property-editor-ui-document-picker.element.ts @@ -3,7 +3,7 @@ import { UMB_DOCUMENT_ENTITY_TYPE } from '../../entity.js'; import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; -import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbTreeStartNode } from '@umbraco-cms/backoffice/tree'; @@ -16,7 +16,7 @@ export class UmbPropertyEditorUIDocumentPickerElement extends UmbLitElement impl public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; - const minMax = config.getValueByAlias('validationLimit'); + const minMax = config.getValueByAlias('validationLimit'); if (minMax) { this._min = minMax.min && minMax.min > 0 ? minMax.min : 0; this._max = minMax.max && minMax.max > 0 ? minMax.max : 1; diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts index b683681d17..1872d689ea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media-types/property-editors/media-type-picker/property-editor-ui-media-type-picker.element.ts @@ -2,7 +2,7 @@ import type { UmbInputMediaTypeElement } from '../../components/index.js'; import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; -import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; @@ -14,7 +14,7 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; - const minMax = config?.getValueByAlias('validationLimit'); + const minMax = config?.getValueByAlias('validationLimit'); this.min = minMax?.min ?? 0; this.max = minMax?.max ?? Infinity; } @@ -32,11 +32,7 @@ export class UmbPropertyEditorUIMediaTypePickerElement extends UmbLitElement imp render() { return html` - + `; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts index 6e6bbafd45..6594afd924 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-entity-picker/property-editor-ui-media-entity-picker.element.ts @@ -2,7 +2,7 @@ import { html, customElement, property } from '@umbraco-cms/backoffice/external/ import { splitStringToArray } from '@umbraco-cms/backoffice/utils'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; -import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UmbInputMediaElement } from '@umbraco-cms/backoffice/media'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; @@ -25,7 +25,7 @@ export class UmbPropertyEditorUIMediaEntityPickerElement extends UmbLitElement i public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; - const minMax = config?.getValueByAlias('validationLimit'); + const minMax = config?.getValueByAlias('validationLimit'); this.#min = minMax?.min ?? 0; this.#max = minMax?.max ?? Infinity; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts index 6a98cca0e5..83c86d901a 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts @@ -4,7 +4,7 @@ import { customElement, html, property, state } from '@umbraco-cms/backoffice/ex import { UmbId } from '@umbraco-cms/backoffice/id'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; -import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; @@ -49,7 +49,7 @@ export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement impleme const filter = config.getValueByAlias('filter'); this._allowedMediaTypes = filter?.split(',') ?? []; - const minMax = config.getValueByAlias('validationLimit'); + const minMax = config.getValueByAlias('validationLimit'); this._limitMin = minMax?.min ?? 0; this._limitMax = minMax?.max ?? Infinity; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.ts index e223e3fa18..397bdf9e69 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/members/member-group/property-editor/member-group-picker/property-editor-ui-member-group-picker.element.ts @@ -1,7 +1,7 @@ import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; -import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UmbInputMemberGroupElement } from '@umbraco-cms/backoffice/member-group'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; @@ -17,7 +17,7 @@ export class UmbPropertyEditorUIMemberGroupPickerElement extends UmbLitElement i public set config(config: UmbPropertyEditorConfigCollection | undefined) { if (!config) return; - const minMax = config?.getValueByAlias('validationLimit'); + const minMax = config?.getValueByAlias('validationLimit'); this.min = minMax?.min ?? 0; this.max = minMax?.max ?? Infinity; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts index 86e7400d20..8afc35ad70 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/number-range/property-editor-ui-number-range.element.ts @@ -3,7 +3,7 @@ import { customElement, html, property, state } from '@umbraco-cms/backoffice/ex import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor'; -import type { NumberRangeValueType } from '@umbraco-cms/backoffice/models'; +import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models'; import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor'; import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry'; @@ -14,7 +14,7 @@ import '../../core/components/input-number-range/input-number-range.element.js'; */ @customElement('umb-property-editor-ui-number-range') export class UmbPropertyEditorUINumberRangeElement - extends UmbFormControlMixin(UmbLitElement, undefined) + extends UmbFormControlMixin(UmbLitElement, undefined) implements UmbPropertyEditorUiElement { @state() @@ -24,10 +24,10 @@ export class UmbPropertyEditorUINumberRangeElement _maxValue?: number; @state() - _validationRange?: NumberRangeValueType; + _validationRange?: UmbNumberRangeValueType; @property({ type: Object }) - public set value(value: NumberRangeValueType | undefined) { + public set value(value: UmbNumberRangeValueType | undefined) { this.#value = value || { min: undefined, max: undefined }; this._minValue = value?.min; this._maxValue = value?.max; @@ -35,11 +35,11 @@ export class UmbPropertyEditorUINumberRangeElement public get value() { return this.#value; } - #value: NumberRangeValueType = { min: undefined, max: undefined }; + #value: UmbNumberRangeValueType = { min: undefined, max: undefined }; public set config(config: UmbPropertyEditorConfigCollection) { if (!config) return; - this._validationRange = config.getValueByAlias('validationRange'); + this._validationRange = config.getValueByAlias('validationRange'); } #onChange(event: CustomEvent & { target: UmbInputNumberRangeElement }) {