@umbraco-cms/backoffice 17.0.2 → 17.1.0

package/dist-cms/packages/block/block-grid/components/block-grid-block/block-grid-block.element.js

@@ -13,12 +13,15 @@ let UmbBlockGridBlockElement = class UmbBlockGridBlockElement extends UmbLitElem
         return html `
 			<umb-ref-grid-block
 				standalone
-				href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
+				.readonly=${!(this.config?.showContentEdit ?? false)}
+				.href=${this.config?.showContentEdit ? this.config?.editContentPath : undefined}>
 				<umb-icon slot="icon" .name=${this.icon}></umb-icon>
 				<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
-				${when(this.unpublished, () => html `<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
-							><umb-localize key="blockEditor_notExposedLabel"></umb-localize
-						></uui-tag>`)}
+				${when(this.unpublished, () => html `
+						<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}>
+							<umb-localize key="blockEditor_notExposedLabel"></umb-localize>
+						</uui-tag>
+					`)}
 				<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
 			</umb-ref-grid-block>
 		`;
@@ -28,20 +31,42 @@ let UmbBlockGridBlockElement = class UmbBlockGridBlockElement extends UmbLitElem
 			umb-block-grid-areas-container {
 				margin-top: calc(var(--uui-size-2) + 1px);
 			}
+
 			umb-block-grid-areas-container::part(area) {
 				margin: var(--uui-size-2);
 			}
 
+			umb-ufm-render {
+				user-select: none;
+			}
+
 			uui-tag {
 				margin-left: 0.5em;
 				margin-bottom: -0.3em;
 				margin-top: -0.3em;
 				vertical-align: text-top;
 			}
+
 			:host([unpublished]) umb-icon,
 			:host([unpublished]) umb-ufm-render {
 				opacity: 0.6;
 			}
+
+			@keyframes umb-icon-jiggle {
+				0%,
+				100% {
+					transform: rotate(6deg);
+				}
+				50% {
+					transform: rotate(-6deg);
+				}
+			}
+
+			:host(.sortable) {
+				umb-icon {
+					animation: umb-icon-jiggle 500ms infinite ease-in-out;
+				}
+			}
 		`,
     ]; }
 };

package/dist-cms/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.js

@@ -118,28 +118,34 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 					<umb-ufm-render id="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
 				</div>
 			</span>
-			${when(this.unpublished, () => html `<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
-						><umb-localize key="blockEditor_notExposedLabel"></umb-localize
-					></uui-tag>`)}
+			${when(this.unpublished, () => html `
+					<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}>
+						<umb-localize key="blockEditor_notExposedLabel"></umb-localize>
+					</uui-tag>
+				`)}
 		`;
     }
     #renderInside() {
         if (this.unpublished === true) {
-            return html `<uui-button id="exposeButton" @click=${this.#expose}
-				><uui-icon name="icon-add"></uui-icon>
-				<umb-localize
-					key="blockEditor_createThisFor"
-					.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize
-			></uui-button>`;
+            return html `
+				<uui-button id="exposeButton" @click=${this.#expose}>
+					<uui-icon name="icon-add"></uui-icon>
+					<umb-localize
+						key="blockEditor_createThisFor"
+						.args=${[this._ownerContentTypeName, this._variantName]}></umb-localize>
+				</uui-button>
+			`;
         }
         else {
-            return html `<div id="inside" draggable="false">
-				<umb-property-type-based-property
-					.property=${this._inlineProperty}
-					.dataPath=${this._inlinePropertyDataPath ?? ''}
-					slot="areas"></umb-property-type-based-property>
-				<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
-			</div>`;
+            return html `
+				<div id="inside" draggable="false">
+					<umb-property-type-based-property
+						.property=${this._inlineProperty}
+						.dataPath=${this._inlinePropertyDataPath ?? ''}
+						slot="areas"></umb-property-type-based-property>
+					<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
+				</div>
+			`;
         }
     }
     static { this.styles = [

package/dist-cms/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.js

@@ -33,10 +33,12 @@ let UmbBlockGridBlockUnsupportedElement = class UmbBlockGridBlockUnsupportedElem
 		`;
     }
     #renderInside() {
-        return html `<div id="inside" draggable="false">
-			${this.localize.term('blockEditor_unsupportedBlockDescription')}
-			<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
-		</div>`;
+        return html `
+			<div id="inside" draggable="false">
+				${this.localize.term('blockEditor_unsupportedBlockDescription')}
+				<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
+			</div>
+		`;
     }
     static { this.styles = [
         UmbTextStyles,

package/dist-cms/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.js

@@ -189,7 +189,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
     }
     async #clipboardEntriesFilter(propertyValue) {
         const allowedElementTypeKeys = this.#retrieveAllowedElementTypes().map((x) => x.contentElementTypeKey);
-        const rootContentKeys = propertyValue.layout['Umbraco.BlockGrid']?.map((block) => block.contentKey) ?? [];
+        const rootContentKeys = propertyValue.layout[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS]?.map((block) => block.contentKey) ?? [];
         const rootContentTypeKeys = propertyValue.contentData
             .filter((content) => rootContentKeys.includes(content.key))
             .map((content) => content.contentTypeKey);

package/dist-cms/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.d.ts

@@ -11,11 +11,12 @@ export declare class UmbBlockGridEntriesElement extends UmbBlockGridEntriesEleme
     get layoutColumns(): number | undefined;
     private _areaKey?;
     private _canCreate?;
-    private _createLabel?;
     private _configCreateLabel?;
-    private _styleElement?;
-    private _layoutEntries;
+    private _createLabel?;
     private _isReadOnly;
+    private _layoutEntries;
+    private _limitMax?;
+    private _styleElement?;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist-cms/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.js

@@ -5,12 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbBlockGridEntriesContext } from './block-grid-entries.context.js';
+import { css, customElement, html, nothing, property, repeat, state, when } from '../../../../../external/lit/index.js';
 import { getAccumulatedValueOfIndex, getInterpolatedIndexOfPositionInWeightMap, isWithinRect, } from '../../../../core/utils/index.js';
+import { UmbFormControlMixin, UmbFormControlValidator } from '../../../../core/validation/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { html, customElement, state, repeat, css, property, nothing } from '../../../../../external/lit/index.js';
+import { UmbSorterController } from '../../../../core/sorter/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
-import { UmbSorterController, } from '../../../../core/sorter/index.js';
-import { UmbFormControlMixin, UmbFormControlValidator, } from '../../../../core/validation/index.js';
 /**
  * Notice this utility method is not really shareable with others as it also takes areas into account. [NL]
  * @param args
@@ -93,7 +93,6 @@ const SORTER_CONFIG = {
  * @element umb-block-grid-entries
  */
 let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElement) {
-    //
     #sorter;
     #context;
     #controlValidator;
@@ -122,7 +121,6 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
     }
     constructor() {
         super();
-        //
         this.#sorter = new UmbSorterController(this, {
             ...SORTER_CONFIG,
             onStart: () => {
@@ -145,8 +143,8 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
             },
         });
         this.#context = new UmbBlockGridEntriesContext(this);
-        this._layoutEntries = [];
         this._isReadOnly = false;
+        this._layoutEntries = [];
         this.observe(this.#context.layoutEntries, (layoutEntries) => {
             //const oldValue = this._layoutEntries;
             this.#sorter.setModel(layoutEntries);
@@ -195,6 +193,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
         new UmbFormControlValidator(this, this /*, this.#dataPath*/);
     }
     async #setupRangeValidation(rangeLimit) {
+        this._limitMax = rangeLimit?.max;
         if (this.#rangeUnderflowValidator) {
             this.removeValidator(this.#rangeUnderflowValidator);
             this.#rangeUnderflowValidator = undefined;
@@ -254,27 +253,35 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
         return html `
 			${this._styleElement}
 			<div class="umb-block-grid__layout-container" data-area-length=${this._layoutEntries.length}>
-				${repeat(this._layoutEntries, (layout, index) => `${index}_${layout.contentKey}`, (layout, index) => html `<umb-block-grid-entry
+				${repeat(this._layoutEntries, (layout, index) => `${index}_${layout.contentKey}`, (layout, index) => html `
+						<umb-block-grid-entry
 							class="umb-block-grid__layout-item"
 							index=${index}
 							.contentKey=${layout.contentKey}
 							.layout=${layout}>
-						</umb-block-grid-entry>`)}
+						</umb-block-grid-entry>
+					`)}
 			</div>
-			${this._canCreate ? this.#renderCreateButtonGroup() : nothing}
-			${this._areaKey ? html ` <uui-form-validation-message .for=${this}></uui-form-validation-message>` : nothing}
+			${when(this._canCreate, () => this.#renderCreateButtonGroup())}
+			${when(this._areaKey, () => html `<uui-form-validation-message .for=${this}></uui-form-validation-message>`)}
 		`;
     }
     #renderCreateButtonGroup() {
+        if (this._limitMax === 1 && this._layoutEntries.length > 0)
+            return nothing;
         if (this._areaKey === null || this._layoutEntries.length === 0) {
-            return html ` <uui-button-group id="createButton">
-				${this.#renderCreateButton()} ${this.#renderPasteButton()}
-			</uui-button-group>`;
+            return html `
+				<uui-button-group id="createButton">
+					${this.#renderCreateButton()} ${this.#renderPasteButton()}
+				</uui-button-group>
+			`;
         }
         else if (this._isReadOnly === false) {
-            return html `<uui-button-inline-create
-				href=${this.#context.getPathForCreateBlock(-1) ?? ''}
-				label=${this.localize.term('blockEditor_addBlock')}></uui-button-inline-create> `;
+            return html `
+				<uui-button-inline-create
+					href=${this.#context.getPathForCreateBlock(-1) ?? ''}
+					label=${this.localize.term('blockEditor_addBlock')}></uui-button-inline-create>
+			`;
         }
         else {
             return nothing;
@@ -383,19 +390,22 @@ __decorate([
 ], UmbBlockGridEntriesElement.prototype, "_canCreate", void 0);
 __decorate([
     state()
-], UmbBlockGridEntriesElement.prototype, "_createLabel", void 0);
+], UmbBlockGridEntriesElement.prototype, "_configCreateLabel", void 0);
 __decorate([
     state()
-], UmbBlockGridEntriesElement.prototype, "_configCreateLabel", void 0);
+], UmbBlockGridEntriesElement.prototype, "_createLabel", void 0);
 __decorate([
     state()
-], UmbBlockGridEntriesElement.prototype, "_styleElement", void 0);
+], UmbBlockGridEntriesElement.prototype, "_isReadOnly", void 0);
 __decorate([
     state()
 ], UmbBlockGridEntriesElement.prototype, "_layoutEntries", void 0);
 __decorate([
     state()
-], UmbBlockGridEntriesElement.prototype, "_isReadOnly", void 0);
+], UmbBlockGridEntriesElement.prototype, "_limitMax", void 0);
+__decorate([
+    state()
+], UmbBlockGridEntriesElement.prototype, "_styleElement", void 0);
 UmbBlockGridEntriesElement = __decorate([
     customElement('umb-block-grid-entries')
 ], UmbBlockGridEntriesElement);

package/dist-cms/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.d.ts

@@ -23,6 +23,7 @@ export declare class UmbBlockGridEntryContext extends UmbBlockEntryContext<typeo
     readonly isAllowed: import("rxjs").Observable<boolean>;
     readonly areaGridColumns: import("rxjs").Observable<number | undefined>;
     readonly showContentEdit: import("rxjs").Observable<boolean>;
+    readonly isSortMode: import("rxjs").Observable<boolean | undefined>;
     readonly scaleManager: UmbBlockGridScaleManager;
     constructor(host: UmbControllerHost);
     layoutsOfArea(areaKey: string): import("rxjs").Observable<UmbBlockGridLayoutModel[] | undefined>;

package/dist-cms/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.js

@@ -7,6 +7,7 @@ import { UmbArrayState, UmbBooleanState, UmbNumberState, appendToFrozenArray, me
 import { UmbBlockEntryContext } from '../../../block/index.js';
 import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
 import { UMB_CLIPBOARD_PROPERTY_CONTEXT } from '../../../../clipboard/index.js';
+import { UmbLocalizationController } from '../../../../../libs/localization-api/index.js';
 export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
     getMinMaxRowSpan() {
         const x = this._blockType.getValue();
@@ -18,9 +19,11 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
     getRelevantColumnSpanOptions() {
         return this.#relevantColumnSpanOptions.getValue();
     }
+    #localize;
     #canScale;
     #isAllowed;
     #areaGridColumns;
+    #isSortMode;
     constructor(host) {
         super(host, UMB_BLOCK_GRID_MANAGER_CONTEXT, UMB_BLOCK_GRID_ENTRIES_CONTEXT);
         //
@@ -35,6 +38,7 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
         this.inlineEditingMode = this._blockType.asObservablePart((x) => x?.inlineEditing === true);
         this.#relevantColumnSpanOptions = new UmbArrayState([], (x) => x);
         this.relevantColumnSpanOptions = this.#relevantColumnSpanOptions.asObservable();
+        this.#localize = new UmbLocalizationController(this);
         this.#canScale = new UmbBooleanState(false);
         this.canScale = this.#canScale.asObservable();
         this.#isAllowed = new UmbBooleanState(false);
@@ -42,6 +46,8 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
         this.#areaGridColumns = new UmbNumberState(undefined);
         this.areaGridColumns = this.#areaGridColumns.asObservable();
         this.showContentEdit = mergeObservables([this._contentStructureHasProperties, this.forceHideContentEditorInOverlay], ([a, b]) => a === true && b === false);
+        this.#isSortMode = new UmbBooleanState(undefined);
+        this.isSortMode = this.#isSortMode.asObservable();
         this.scaleManager = new UmbBlockGridScaleManager(this);
     }
     layoutsOfArea(areaKey) {
@@ -198,6 +204,7 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
                 });
             }
         }, 'observeRowSpanValidation');
+        this.observe(this._manager.isSortMode, (isSortMode) => this.#isSortMode.setValue(isSortMode ?? false), 'observeIsSortMode');
     }
     _gotContentType() { }
     #calcColumnSpan(columnSpan, relevantColumnSpanOptions, layoutColumns) {
@@ -223,8 +230,8 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
         if (!clipboardContext) {
             throw new Error('No clipboard context found');
         }
-        const workspaceName = propertyDatasetContext?.getName();
-        const propertyLabel = propertyContext?.getLabel();
+        const workspaceName = this.#localize.string(propertyDatasetContext?.getName());
+        const propertyLabel = this.#localize.string(propertyContext?.getLabel());
         const blockLabel = this.getName();
         const entryName = workspaceName
             ? `${workspaceName} - ${propertyLabel} - ${blockLabel}`

package/dist-cms/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.d.ts

@@ -1,5 +1,4 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { nothing } from '../../../../../external/lit/index.js';
 import type { PropertyValueMap } from '../../../../../external/lit/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../../core/property-editor/index.js';
 /**
@@ -28,6 +27,7 @@ export declare class UmbBlockGridEntryElement extends UmbLitElement implements U
     private _workspaceEditContentPath?;
     private _workspaceEditSettingsPath?;
     private _inlineEditingMode?;
+    private _isSortMode?;
     private _canScale?;
     private _showInlineCreateBefore?;
     private _showInlineCreateAfter?;
@@ -40,8 +40,7 @@ export declare class UmbBlockGridEntryElement extends UmbLitElement implements U
     constructor();
     connectedCallback(): void;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
-    render(): typeof nothing | import("lit-html").TemplateResult<1>;
-    renderInlineBlock(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1> | undefined;
     static styles: import("lit").CSSResult[];
 }
 export default UmbBlockGridEntryElement;