@umbraco-cms/backoffice 17.3.3 → 17.4.0-rc

package/dist-cms/packages/block/block-single/context/block-single-entries.context.js

@@ -31,11 +31,14 @@ export class UmbBlockSingleEntriesContext extends UmbBlockEntriesContext {
             const config = propertyContext.getConfig();
             const valueResolver = new UmbClipboardPastePropertyValueTranslatorValueResolver(this);
             const blockTypes = this._manager.getBlockTypes() ?? [];
+            const configuredSize = this._manager
+                .getEditorConfiguration()
+                ?.getValueByAlias('createModalSize');
             /*
             modal size logic:
             If more than 8 block types, medium modal, more than 12 large modal:
             */
-            const modalSize = blockTypes.length > 12 ? 'large' : blockTypes.length > 8 ? 'medium' : 'small';
+            const modalSize = configuredSize ?? (blockTypes.length > 12 ? 'large' : blockTypes.length > 8 ? 'medium' : 'small');
             return {
                 modal: { size: modalSize },
                 data: {

package/dist-cms/packages/block/block-single/property-editors/block-single-editor/manifests.js

@@ -27,6 +27,12 @@ export const manifests = [
                         description: 'Use the inline editor as the default block view.',
                         propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
                     },
+                    {
+                        alias: 'createModalSize',
+                        label: '#blockEditor_labelCreateModalSize',
+                        propertyEditorUiAlias: 'Umb.PropertyEditorUi.OverlaySize',
+                        config: [{ alias: 'defaultOptionLabel', value: 'Auto' }],
+                    },
                     {
                         alias: 'maxPropertyWidth',
                         label: 'Property editor width',

package/dist-cms/packages/block/block-type/components/block-type-card/block-type-card.element.js

@@ -81,7 +81,7 @@ let UmbBlockTypeCardElement = class UmbBlockTypeCardElement extends UmbLitElemen
 				.description=${this._description}
 				.background=${this.backgroundColor}>
 				${this._iconFile
-            ? html `<img src=${this._iconFile} alt="" />`
+            ? html `<img src=${this._iconFile} alt="" decoding="async" />`
             : html `<umb-icon name=${this._fallbackIcon ?? ''} color=${ifDefined(this.iconColor)}></umb-icon>`}
 				<slot name="actions" slot="actions"> </slot>
 			</uui-card-block-type>

package/dist-cms/packages/clipboard/clipboard-entry/detail/clipboard-entry-detail.store.js

@@ -12,7 +12,7 @@ export class UmbClipboardEntryDetailStore extends UmbDetailStoreBase {
      * @memberof UmbClipboardEntryDetailStore
      */
     constructor(host) {
-        super(host, UMB_CLIPBOARD_ENTRY_DETAIL_STORE_CONTEXT.toString());
+        super(host, UMB_CLIPBOARD_ENTRY_DETAIL_STORE_CONTEXT);
     }
 }
 export default UmbClipboardEntryDetailStore;

package/dist-cms/packages/clipboard/clipboard-entry/item/clipboard-entry-item.store.js

@@ -12,7 +12,7 @@ export class UmbClipboardEntryItemStore extends UmbItemStoreBase {
      * @memberof UmbClipboardEntryItemStore
      */
     constructor(host) {
-        super(host, UMB_CLIPBOARD_ENTRY_ITEM_STORE_CONTEXT.toString());
+        super(host, UMB_CLIPBOARD_ENTRY_ITEM_STORE_CONTEXT);
     }
 }
 export { UmbClipboardEntryItemStore as api };

package/dist-cms/packages/clipboard/clipboard-entry/picker-modal/clipboard-entry-picker-modal.element.js

@@ -19,16 +19,16 @@ let UmbClipboardEntryPickerModalElement = class UmbClipboardEntryPickerModalElem
         this.modalContext?.reject();
     }
     render() {
-        return html `<umb-body-layout headline="Clipboard">
+        return html `<umb-body-layout headline=${this.localize.term('general_clipboard')}>
 			<umb-clipboard-entry-picker
 				.selection=${this.value?.selection}
 				.config=${this.data}
 				@selection-change=${this.#onSelectionChange}></umb-clipboard-entry-picker>
 			<div slot="actions">
-				<uui-button label="Close" @click=${this.#close}></uui-button>
-				<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
+				<uui-button label=${this.localize.term('general_close')} @click=${this.#close}></uui-button>
+				<uui-button label=${this.localize.term('general_submit')} look="primary" color="positive" @click=${this.#submit}></uui-button>
 			</div>
-		</umb-body-layout> `;
+		</umb-body-layout>`;
     }
 };
 UmbClipboardEntryPickerModalElement = __decorate([

package/dist-cms/packages/clipboard/property/actions/copy/copy-to-clipboard.property-action.js

@@ -1,8 +1,10 @@
 import { UMB_CLIPBOARD_PROPERTY_CONTEXT } from '../../context/constants.js';
+import { UmbLocalizationController } from '../../../../../libs/localization-api/index.js';
 import { UMB_NOTIFICATION_CONTEXT } from '../../../../core/notification/index.js';
 import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '../../../../core/property/index.js';
 import { UmbPropertyActionBase } from '../../../../core/property-action/index.js';
 export class UmbCopyToClipboardPropertyAction extends UmbPropertyActionBase {
+    #localize = new UmbLocalizationController(this);
     #propertyDatasetContext;
     #propertyContext;
     #notificationContext;
@@ -39,8 +41,8 @@ export class UmbCopyToClipboardPropertyAction extends UmbPropertyActionBase {
         if (!propertyEditorUiAlias) {
             throw new Error('Property editor alias is not available');
         }
-        const workspaceName = this.#propertyDatasetContext.getName();
-        const propertyLabel = this.#propertyContext.getLabel();
+        const workspaceName = this.#localize.string(this.#propertyDatasetContext.getName());
+        const propertyLabel = this.#localize.string(this.#propertyContext.getLabel());
         const entryName = workspaceName ? `${workspaceName} - ${propertyLabel}` : propertyLabel;
         const propertyValue = this.#propertyContext.getValue();
         if (!propertyValue) {

package/dist-cms/packages/clipboard/property/context/clipboard.property-context.js

@@ -130,7 +130,7 @@ export class UmbClipboardPropertyContext extends UmbContextBase {
         if (!selection.length) {
             throw new Error('No clipboard entry selected');
         }
-        let propertyValues = [];
+        let propertyValues;
         if (args.multiple) {
             throw new Error('Multiple clipboard entries not supported');
         }

package/dist-cms/packages/code-editor/code-editor-modal/code-editor-modal.element.js

@@ -43,19 +43,25 @@ let UmbCodeEditorModalElement = class UmbCodeEditorModalElement extends UmbModal
 			<umb-code-editor
 				language=${ifDefined(this.data?.language)}
 				.code=${this.data?.content ?? ''}
+				?word-wrap=${this.data?.language === 'html'}
 				@loaded=${this.#onLoaded}></umb-code-editor>
 		`;
     }
     static { this.styles = [
         css `
 			#editor-box {
+				box-sizing: border-box;
 				padding: var(--uui-box-default-padding, var(--uui-size-space-5, 18px));
 				height: 100%;
+				min-width: 0;
 				display: flex;
+				overflow: hidden;
 			}
 
 			umb-code-editor {
 				width: 100%;
+				min-width: 0;
+				overflow: hidden;
 			}
 		`,
     ]; }

package/dist-cms/packages/content/content/audit-log/info-app/content-audit-log-workspace-info-app.element.js

@@ -7,20 +7,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { css, customElement, html, nothing, property, repeat, state, when } from '../../../../../external/lit/index.js';
 import { createExtensionApiByAlias } from '../../../../core/extension-registry/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { UmbPaginationManager } from '../../../../core/utils/index.js';
+import { UmbPaginationManager, UMB_DATE_TIME_FORMAT_OPTIONS } from '../../../../core/utils/index.js';
 import { UmbRequestReloadStructureForEntityEvent } from '../../../../core/entity-action/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 import { UmbUserItemRepository } from '../../../../user/user/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../../../core/action/index.js';
 import { UMB_ENTITY_WORKSPACE_CONTEXT } from '../../../../core/workspace/index.js';
-const TimeOptions = {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: 'numeric',
-    second: 'numeric',
-};
 let UmbContentAuditLogWorkspaceInfoAppElement = class UmbContentAuditLogWorkspaceInfoAppElement extends UmbLitElement {
     get manifest() {
         return this._manifest;
@@ -137,7 +129,9 @@ let UmbContentAuditLogWorkspaceInfoAppElement = class UmbContentAuditLogWorkspac
         const tagData = this.#auditLogRepository?.getTagStyleAndText?.(item.logType);
         const user = this.#userMap.get(item.user.unique);
         return html `
-			<umb-history-item .name=${user?.name ?? 'Unknown'} .detail=${this.localize.date(item.timestamp, TimeOptions)}>
+			<umb-history-item
+				.name=${user?.name ?? 'Unknown'}
+				.detail=${this.localize.date(item.timestamp, UMB_DATE_TIME_FORMAT_OPTIONS)}>
 				<umb-user-avatar slot="avatar" .name=${user?.name} .kind=${user?.kind} .imgUrls=${user?.avatarUrls ?? []}>
 				</umb-user-avatar>
 				<div class="log-type">

package/dist-cms/packages/content/content/manager/content-data-manager.js

@@ -119,7 +119,7 @@ export class UmbContentWorkspaceDataManager extends UmbElementWorkspaceDataManag
             };
         });
         const changedProperties = current?.values.map((value) => {
-            const persistedValues = persisted?.values.find((x) => UmbVariantId.Create(value).compare(x));
+            const persistedValues = persisted?.values.find((x) => x.alias === value.alias && UmbVariantId.Create(value).compare(x));
             return {
                 culture: value.culture,
                 segment: value.segment,

package/dist-cms/packages/content/content/workspace/content-detail-workspace-base.js

@@ -815,7 +815,9 @@ export class UmbContentDetailWorkspaceContextBase extends UmbEntityDetailWorkspa
         }
         const variantIdsIncludingInvariant = [...variantIds, UmbVariantId.CreateInvariant()];
         // Only update the variants that was chosen to be saved:
-        const persistedData = this._data.getCurrent();
+        // Use getPersisted() as the base so non-saved variants retain the actual
+        // server state, not unsaved local edits from current data.
+        const persistedData = this._data.getPersisted();
         const newPersistedData = await new UmbMergeContentVariantDataController(this).process(persistedData, data, variantIds, variantIdsIncludingInvariant);
         this._data.setPersisted(newPersistedData);
         // Only update the variants that was chosen to be saved:

package/dist-cms/packages/content/content-type/modals/composition-picker/composition-picker-modal.element.js

@@ -54,11 +54,11 @@ let UmbCompositionPickerModalElement = class UmbCompositionPickerModalElement ex
         const existingCompositionHasBeenRemoved = !initSelection.every((item) => setA.has(item));
         if (existingCompositionHasBeenRemoved) {
             await umbConfirmModal(this, {
-                headline: this.localize.term('general_remove'),
+                headline: '#general_remove',
                 content: html `<div style="max-width:400px">
 					${this.localize.term('contentTypeEditor_compositionRemoveWarning')}
 				</div>`,
-                confirmLabel: this.localize.term('general_submit'),
+                confirmLabel: '#general_submit',
                 color: 'danger',
             });
         }

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor-group.element.js

@@ -110,7 +110,7 @@ let UmbContentTypeWorkspaceViewEditGroupElement = class UmbContentTypeWorkspaceV
 					Are you sure you want to delete the group <strong>${this._group.name ?? this._group.ownerId}</strong>
 				</umb-localize>
 				</div>`,
-            confirmLabel: this.localize.term('actions_delete'),
+            confirmLabel: '#actions_delete',
             color: 'danger',
         });
         this.groupStructureHelper.removeContainer(this._group.ownerId);

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor-property.element.js

@@ -101,7 +101,7 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
         await umbConfirmModal(this, {
             headline: `${this.localize.term('actions_delete')} property`,
             content: html `<umb-localize key="contentTypeEditor_confirmDeletePropertyMessage" .args=${[this._property.name ?? unique]}>Are you sure you want to delete the property <strong>${this._property.name ?? unique}</strong></umb-localize></div>`,
-            confirmLabel: this.localize.term('actions_delete'),
+            confirmLabel: '#actions_delete',
             color: 'danger',
         });
         this._propertyStructureHelper?.removeProperty(unique);

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor.element.d.ts

@@ -2,6 +2,7 @@ import type { UmbPropertyTypeContainerMergedModel } from '../../../types.js';
 import { nothing } from '../../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../../../core/lit-element/index.js';
 import type { ManifestWorkspaceViewContentTypeDesignEditorKind, UmbWorkspaceViewElement } from '../../../../../core/workspace/index.js';
+import '../../../../../core/components/index.js';
 export declare class UmbContentTypeDesignEditorElement extends UmbLitElement implements UmbWorkspaceViewElement {
     #private;
     set manifest(value: ManifestWorkspaceViewContentTypeDesignEditorKind);
@@ -15,7 +16,7 @@ export declare class UmbContentTypeDesignEditorElement extends UmbLitElement imp
     private _sortModeActive?;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
-    renderTabsNavigation(): import("lit-html").TemplateResult<1> | undefined;
+    renderTabsNavigation(): import("lit-html").TemplateResult<1>;
     renderRootTab(): typeof nothing | import("lit-html").TemplateResult<1>;
     renderTab(tab: UmbPropertyTypeContainerMergedModel): import("lit-html").TemplateResult<1>;
     renderTabInner(tab: UmbPropertyTypeContainerMergedModel, tabActive: boolean, ownedTab: boolean): import("lit-html").TemplateResult<1>;

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor.element.js

@@ -15,6 +15,7 @@ import { CompositionTypeModel } from '../../../../../core/backend-api/index.js';
 import { umbConfirmModal, umbOpenModal } from '../../../../../core/modal/index.js';
 import { UmbTextStyles } from '../../../../../core/style/index.js';
 import { UmbSorterController } from '../../../../../core/sorter/index.js';
+import '../../../../../core/components/index.js';
 let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement extends UmbLitElement {
     #sorter;
     #workspaceContext;
@@ -215,11 +216,9 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
     async #requestDeleteTab(tab) {
         if (!tab || !tab.ownerId)
             return;
-        // TODO: Localize this:
-        const tabName = tab.name === '' ? 'Unnamed' : tab.name;
-        // TODO: Localize this:
+        const tabName = tab.name === '' ? this.localize.term('general_unnamed') : tab.name;
         const modalData = {
-            headline: 'Delete tab',
+            headline: '#contentTypeEditor_deleteTab',
             content: html `<umb-localize key="contentTypeEditor_confirmDeleteTabMessage" .args=${[tabName]}>
 					Are you sure you want to delete the tab <strong>${tabName}</strong>
 				</umb-localize>
@@ -228,7 +227,8 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 						This will delete all items that doesn't belong to a composition.
 					</umb-localize>
 				</div>`,
-            confirmLabel: this.localize.term('actions_delete'),
+            cancelLabel: '#general_cancel',
+            confirmLabel: '#actions_delete',
             color: 'danger',
         };
         // TODO: If this tab is composed of other tabs, then notify that it will only delete the local tab. [NL]
@@ -356,7 +356,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
         return html `
 			<umb-body-layout header-fit-height>
 				<div id="header" slot="header">
-					<div id="container-list">${this.renderTabsNavigation()} ${this.#renderAddButton()}</div>
+					<div id="container-list">${this.renderTabsNavigation()}</div>
 					${this.#renderActions()}
 				</div>
 				<umb-router-slot
@@ -372,13 +372,16 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 		`;
     }
     #renderAddButton() {
-        // TODO: Localize this:
         if (this._sortModeActive)
             return;
         return html `
-			<uui-button id="add-tab" data-mark="add-tab-button" @click="${this.#addTab}" label="Add tab">
+			<uui-button
+				id="add-tab"
+				data-mark="add-tab-button"
+				@click="${this.#addTab}"
+				label=${this.localize.term('contentTypeEditor_addTab')}>
 				<uui-icon name="icon-add"></uui-icon>
-				Add tab
+				<umb-localize key="contentTypeEditor_addTab">Add tab</umb-localize>
 			</uui-button>
 		`;
     }
@@ -397,7 +400,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 								compact
 								@click=${this.#openCompositionModal}>
 								<uui-icon name="icon-merge"></uui-icon>
-								${this.localize.term('contentTypeEditor_compositions')}
+								<umb-localize key="contentTypeEditor_compositions"></umb-localize>
 							</uui-button>
 						`
             : ''}
@@ -414,15 +417,16 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 		`;
     }
     renderTabsNavigation() {
-        if (!this._tabs || this._tabs.length === 0)
-            return;
         return html `
-			<div id="tabs-group">
-				<uui-tab-group>
-					${this.renderRootTab()}
-					${repeat(this._tabs, (tab) => tab.ownerId ?? tab.ids[0], (tab) => this.renderTab(tab))}
-				</uui-tab-group>
-			</div>
+			<umb-scrollable-container id="tabs-group">
+				${this._tabs && this._tabs.length > 0
+            ? html `<uui-tab-group>
+							${this.renderRootTab()}
+							${repeat(this._tabs, (tab) => tab.ownerId ?? tab.ids[0], (tab) => this.renderTab(tab))}
+						</uui-tab-group>`
+            : nothing}
+				${this.#renderAddButton()}
+			</umb-scrollable-container>
 		`;
     }
     renderRootTab() {
@@ -450,7 +454,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
         const tabActive = path === this._activePath;
         const ownedTab = tab.ownerId ? true : false;
         return html `<uui-tab
-			label=${tab.name && tab.name !== '' ? tab.name : 'Unnamed'}
+			label=${tab.name && tab.name !== '' ? tab.name : this.localize.term('general_unnamed')}
 			.active=${tabActive}
 			href=${path}
 			data-umb-tab-id=${ifDefined(tab.ownerId ?? tab.ids[0])}
@@ -462,9 +466,8 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 		</uui-tab>`;
     }
     renderTabInner(tab, tabActive, ownedTab) {
-        // TODO: Localize this:
         const hasTabName = tab.name && tab.name !== '';
-        const tabName = hasTabName ? tab.name : 'Unnamed';
+        const tabName = hasTabName ? tab.name : '#general_unnamed';
         const tabId = tab.ownerId ?? tab.ids[0];
         if (this._sortModeActive) {
             return html `<div class="tab-inner">
@@ -472,7 +475,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
                 ? html `<uui-icon name="icon-grip" class="drag-${tabId}"> </uui-icon>${this.localize.string(tabName)}
 							<uui-input
 								data-mark="tab:sort-input"
-								label="sort order"
+								label=${this.localize.term('sort_sortOrder')}
 								type="number"
 								value=${ifDefined(tab.sortOrder)}
 								style="width:50px"
@@ -486,7 +489,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 					data-mark="tab:name-input"
 					id="input"
 					look="placeholder"
-					placeholder="Unnamed"
+					placeholder=${this.localize.term('general_unnamed')}
 					label=${this.localize.term('settings_tabname')}
 					value="${tab.name}"
 					auto-width
@@ -499,7 +502,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
         }
         if (ownedTab) {
             return html `<div class="not-active">
-				<span class=${hasTabName ? '' : 'invalid'}>${hasTabName ? this.localize.string(tabName) : 'Unnamed'}</span>
+				<span class=${hasTabName ? '' : 'invalid'}>${this.localize.string(tabName)}</span>
 				${this.renderDeleteFor(tab)}
 			</div>`;
         }
@@ -574,10 +577,13 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 
 			#container-list {
 				display: flex;
+				overflow-x: hidden;
+				min-width: 0;
+				flex: 1;
 			}
 
 			#tabs-group {
-				display: flex;
+				min-width: 0;
 			}
 
 			#actions {
@@ -587,6 +593,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 
 			uui-tab-group {
 				flex-wrap: nowrap;
+				flex-shrink: 0;
 			}
 
 			uui-tab.content-tab-is-empty {
@@ -653,6 +660,10 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 			[drag-placeholder] {
 				opacity: 0.2;
 			}
+
+			#add-tab {
+				flex-shrink: 0;
+			}
 		`,
     ]; }
 };